index.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <template>
  2. <div class="app-container">
  3. <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">-->
  4. <!-- <el-form-item label="销售公司" prop="companyId">-->
  5. <!-- <el-input-->
  6. <!-- v-model="queryParams.companyId"-->
  7. <!-- placeholder="请输入销售公司"-->
  8. <!-- clearable-->
  9. <!-- size="small"-->
  10. <!-- @keyup.enter.native="handleQuery"-->
  11. <!-- />-->
  12. <!-- </el-form-item>-->
  13. <!-- <el-form-item label="权限名称" prop="roleName">-->
  14. <!-- <el-input-->
  15. <!-- v-model="queryParams.roleName"-->
  16. <!-- placeholder="请输入权限名称"-->
  17. <!-- clearable-->
  18. <!-- size="small"-->
  19. <!-- @keyup.enter.native="handleQuery"-->
  20. <!-- />-->
  21. <!-- </el-form-item>-->
  22. <!-- <el-form-item>-->
  23. <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
  24. <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
  25. <!-- </el-form-item>-->
  26. <!-- </el-form>-->
  27. <!-- <el-row :gutter="10" class="mb8">-->
  28. <!-- <el-col :span="1.5">-->
  29. <!-- <el-button-->
  30. <!-- type="primary"-->
  31. <!-- plain-->
  32. <!-- icon="el-icon-plus"-->
  33. <!-- size="mini"-->
  34. <!-- @click="handleAdd"-->
  35. <!-- v-hasPermi="['sop:companySopRole:add']"-->
  36. <!-- >新增</el-button>-->
  37. <!-- </el-col>-->
  38. <!-- <el-col :span="1.5">-->
  39. <!-- <el-button-->
  40. <!-- type="success"-->
  41. <!-- plain-->
  42. <!-- icon="el-icon-edit"-->
  43. <!-- size="mini"-->
  44. <!-- :disabled="single"-->
  45. <!-- @click="handleUpdate"-->
  46. <!-- v-hasPermi="['sop:companySopRole:edit']"-->
  47. <!-- >修改</el-button>-->
  48. <!-- </el-col>-->
  49. <!-- <el-col :span="1.5">-->
  50. <!-- <el-button-->
  51. <!-- type="danger"-->
  52. <!-- plain-->
  53. <!-- icon="el-icon-delete"-->
  54. <!-- size="mini"-->
  55. <!-- :disabled="multiple"-->
  56. <!-- @click="handleDelete"-->
  57. <!-- v-hasPermi="['sop:companySopRole:remove']"-->
  58. <!-- >删除</el-button>-->
  59. <!-- </el-col>-->
  60. <!-- <el-col :span="1.5">-->
  61. <!-- <el-button-->
  62. <!-- type="warning"-->
  63. <!-- plain-->
  64. <!-- icon="el-icon-download"-->
  65. <!-- size="mini"-->
  66. <!-- :loading="exportLoading"-->
  67. <!-- @click="handleExport"-->
  68. <!-- v-hasPermi="['sop:companySopRole:export']"-->
  69. <!-- >导出</el-button>-->
  70. <!-- </el-col>-->
  71. <!-- </el-row>-->
  72. <el-table border v-loading="loading" :data="companySopRoleList">
  73. <el-table-column label="销售公司" align="center" prop="companyId">
  74. <template slot-scope="scope">
  75. <el-tag v-for="item in companyList" v-if="item.companyId == scope.row.companyId"> {{scope.row.companyName}}</el-tag>
  76. </template>
  77. </el-table-column>
  78. <el-table-column label="权限" align="center">
  79. <template slot-scope="scope">
  80. <div style="display: flex;flex-flow: wrap;justify-content: flex-start;">
  81. <el-tag style="width: 30%;margin: 0 5px" v-for="item in scope.row.rules">{{roleMap[item]}}</el-tag>
  82. </div>
  83. </template>
  84. </el-table-column>
  85. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  86. <template slot-scope="scope">
  87. <el-button
  88. size="mini"
  89. type="text"
  90. icon="el-icon-edit"
  91. @click="handleUpdate(scope.row)"
  92. v-hasPermi="['sop:companySopRole:edit']"
  93. >修改</el-button>
  94. </template>
  95. </el-table-column>
  96. </el-table>
  97. <pagination
  98. v-show="total>0"
  99. :total="total"
  100. :page.sync="queryParams.pageNum"
  101. :limit.sync="queryParams.pageSize"
  102. @pagination="getList"
  103. />
  104. <!-- 添加或修改公司SOP权限对话框 -->
  105. <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
  106. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  107. <el-form-item label="销售公司" prop="companyId">
  108. <el-select filterable v-model="form.companyId" placeholder="请选择公司名" size="small">
  109. <el-option
  110. v-for="item in companyList"
  111. :key="item.companyId"
  112. :label="item.companyName"
  113. :value="item.companyId"
  114. />
  115. </el-select>
  116. </el-form-item>
  117. <el-form-item label="权限" prop="rules">
  118. <div style="margin: 15px 0;"></div>
  119. <el-checkbox-group v-model="form.rules" style="display: flex;flex-flow: wrap;justify-content: flex-start;">
  120. <el-checkbox style="width: 28%" v-for="item in roleOptions" :label="item.dictValue" :key="item.dictValue">{{item.dictLabel}}</el-checkbox>
  121. </el-checkbox-group>
  122. </el-form-item>
  123. </el-form>
  124. <div slot="footer" class="dialog-footer">
  125. <el-button type="primary" @click="submitForm">确 定</el-button>
  126. <el-button @click="cancel">取 消</el-button>
  127. </div>
  128. </el-dialog>
  129. </div>
  130. </template>
  131. <script>
  132. import { listCompanySopRole, getCompanySopRole, delCompanySopRole, addCompanySopRole, updateCompanySopRole, exportCompanySopRole } from "@/api/sop/companySopRole";
  133. import { getCompanyList } from "@/api/company/company";
  134. export default {
  135. name: "CompanySopRole",
  136. data() {
  137. return {
  138. // 遮罩层
  139. loading: true,
  140. // 导出遮罩层
  141. exportLoading: false,
  142. // 选中数组
  143. ids: [],
  144. // 非单个禁用
  145. single: true,
  146. // 非多个禁用
  147. multiple: true,
  148. // 显示搜索条件
  149. showSearch: true,
  150. // 总条数
  151. total: 0,
  152. // 公司SOP权限表格数据
  153. companySopRoleList: [],
  154. roleOptions: [],
  155. roleMap: [],
  156. // 弹出层标题
  157. title: "",
  158. // 是否显示弹出层
  159. open: false,
  160. companyList: [],
  161. // 查询参数
  162. queryParams: {
  163. pageNum: 1,
  164. pageSize: 10,
  165. companyId: null,
  166. roleName: null,
  167. roleValue: null,
  168. },
  169. // 表单参数
  170. form: {},
  171. // 表单校验
  172. rules: {
  173. }
  174. };
  175. },
  176. created() {
  177. this.getList();
  178. this.getDicts("company_sop_role").then(response => {
  179. this.roleOptions = response.data;
  180. this.roleMap = response.data.reduce((obj, item) => {
  181. obj[item.dictValue] = item.dictLabel;
  182. return obj;
  183. }, {});
  184. });
  185. getCompanyList().then(response => {
  186. this.companyList = response.data;
  187. });
  188. },
  189. methods: {
  190. /** 查询公司SOP权限列表 */
  191. getList() {
  192. this.loading = true;
  193. listCompanySopRole(this.queryParams).then(response => {
  194. this.companySopRoleList = response.rows;
  195. this.total = response.total;
  196. this.loading = false;
  197. });
  198. },
  199. // 取消按钮
  200. cancel() {
  201. this.open = false;
  202. this.reset();
  203. },
  204. // 表单重置
  205. reset() {
  206. this.form = {
  207. id: null,
  208. companyId: null,
  209. roleName: null,
  210. roleValue: null,
  211. createTime: null,
  212. createBy: null,
  213. updateBy: null,
  214. updateTime: null,
  215. rules: this.roleOptions.map(e => e.dictValue),
  216. remark: null
  217. };
  218. this.resetForm("form");
  219. },
  220. /** 搜索按钮操作 */
  221. handleQuery() {
  222. this.queryParams.pageNum = 1;
  223. this.getList();
  224. },
  225. /** 重置按钮操作 */
  226. resetQuery() {
  227. this.resetForm("queryForm");
  228. this.handleQuery();
  229. },
  230. // 多选框选中数据
  231. handleSelectionChange(selection) {
  232. this.ids = selection.map(item => item.id)
  233. this.single = selection.length!==1
  234. this.multiple = !selection.length
  235. },
  236. /** 新增按钮操作 */
  237. handleAdd() {
  238. this.reset();
  239. this.open = true;
  240. this.title = "添加公司SOP权限";
  241. },
  242. /** 修改按钮操作 */
  243. handleUpdate(row) {
  244. this.reset();
  245. if(row.rules && row.rules.length > 0){
  246. this.form.rules = row.rules;
  247. }
  248. this.form.companyId = row.companyId;
  249. this.open = true;
  250. this.title = "修改公司SOP权限";
  251. },
  252. /** 提交按钮 */
  253. submitForm() {
  254. this.$refs["form"].validate(valid => {
  255. if (valid) {
  256. if (this.form.id != null) {
  257. updateCompanySopRole(this.form).then(response => {
  258. this.msgSuccess("修改成功");
  259. this.open = false;
  260. this.getList();
  261. });
  262. } else {
  263. addCompanySopRole(this.form).then(response => {
  264. this.msgSuccess("新增成功");
  265. this.open = false;
  266. this.getList();
  267. });
  268. }
  269. }
  270. });
  271. },
  272. /** 删除按钮操作 */
  273. handleDelete(row) {
  274. const ids = row.id || this.ids;
  275. this.$confirm('是否确认删除公司SOP权限编号为"' + ids + '"的数据项?', "警告", {
  276. confirmButtonText: "确定",
  277. cancelButtonText: "取消",
  278. type: "warning"
  279. }).then(function() {
  280. return delCompanySopRole(ids);
  281. }).then(() => {
  282. this.getList();
  283. this.msgSuccess("删除成功");
  284. }).catch(() => {});
  285. },
  286. /** 导出按钮操作 */
  287. handleExport() {
  288. const queryParams = this.queryParams;
  289. this.$confirm('是否确认导出所有公司SOP权限数据项?', "警告", {
  290. confirmButtonText: "确定",
  291. cancelButtonText: "取消",
  292. type: "warning"
  293. }).then(() => {
  294. this.exportLoading = true;
  295. return exportCompanySopRole(queryParams);
  296. }).then(response => {
  297. this.download(response.msg);
  298. this.exportLoading = false;
  299. }).catch(() => {});
  300. },
  301. }
  302. };
  303. </script>