houzhongjian
2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2
提交 | 用户 | 时间
759b1c 1 <template>
H 2   <div>
3     <!-- 列表弹窗 -->
4     <el-dialog title="任务分配规则" :visible.sync="visible" width="800px" append-to-body>
5       <el-table v-loading="loading" :data="list">
6         <el-table-column label="任务名" align="center" prop="taskDefinitionName" width="120" fixed />
7         <el-table-column label="任务标识" align="center" prop="taskDefinitionKey" width="120" show-tooltip-when-overflow />
8         <el-table-column label="规则类型" align="center" prop="type" width="120">
9           <template v-slot="scope">
10             <dict-tag :type="DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE" :value="scope.row.type" />
11           </template>
12         </el-table-column>
13         <el-table-column label="规则范围" align="center" prop="options" width="440px">
14           <template v-slot="scope">
15             <el-tag size="medium" v-if="scope.row.options" :key="option" v-for="option in scope.row.options">
16               {{ getAssignRuleOptionName(scope.row.type, option) }}
17             </el-tag>
18           </template>
19         </el-table-column>
20         <el-table-column v-if="modelId" label="操作" align="center" width="80" fixed="right">
21           <template v-slot="scope">
22             <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTaskAssignRule(scope.row)"
23                        v-hasPermi="['bpm:task-assign-rule:update']">修改</el-button>
24           </template>
25         </el-table-column>
26       </el-table>
27     </el-dialog>
28     <!-- 添加/修改弹窗 -->
29     <el-dialog title="修改任务规则" :visible.sync="open" width="500px" append-to-body>
30       <el-form ref="taskAssignRuleForm" :model="form" :rules="rules" label-width="110px">
31         <el-form-item label="任务名称" prop="taskDefinitionName">
32           <el-input v-model="form.taskDefinitionName" disabled />
33         </el-form-item>
34         <el-form-item label="任务标识" prop="taskDefinitionKey">
35           <el-input v-model="form.taskDefinitionKey" disabled />
36         </el-form-item>
37         <el-form-item label="规则类型" prop="type">
38           <el-select v-model="form.type" clearable style="width: 100%">
39             <el-option v-for="dict in taskAssignRuleTypeDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
40           </el-select>
41         </el-form-item>
42         <el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
43           <el-select v-model="form.roleIds" multiple clearable style="width: 100%">
44             <el-option v-for="item in roleOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
45           </el-select>
46         </el-form-item>
47         <el-form-item v-if="form.type === 20 || form.type === 21" label="指定部门" prop="deptIds">
48           <treeselect v-model="form.deptIds" :options="deptTreeOptions" multiple flat :defaultExpandLevel="3"
49                       placeholder="请选择指定部门" :normalizer="normalizer"/>
50         </el-form-item>
51         <el-form-item v-if="form.type === 22" label="指定岗位" prop="postIds">
52           <el-select v-model="form.postIds" multiple clearable style="width: 100%">
53             <el-option v-for="item in postOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
54           </el-select>
55         </el-form-item>
56         <el-form-item v-if="form.type === 30 || form.type === 31 || form.type === 32" label="指定用户" prop="userIds">
57           <el-select v-model="form.userIds" multiple clearable style="width: 100%">
58             <el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
59           </el-select>
60         </el-form-item>
61         <el-form-item v-if="form.type === 40" label="指定用户组" prop="userGroupIds">
62           <el-select v-model="form.userGroupIds" multiple clearable style="width: 100%">
63             <el-option v-for="item in userGroupOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
64           </el-select>
65         </el-form-item>
66         <el-form-item v-if="form.type === 50" label="指定脚本" prop="scripts">
67           <el-select v-model="form.scripts" multiple clearable style="width: 100%">
68             <el-option v-for="dict in taskAssignScriptDictDatas" :key="parseInt(dict.value)"
69                        :label="dict.label" :value="parseInt(dict.value)"/>
70           </el-select>
71         </el-form-item>
72       </el-form>
73       <div slot="footer" class="dialog-footer">
74         <el-button type="primary" @click="submitAssignRuleForm">确 定</el-button>
75         <el-button @click="cancelAssignRuleForm">取 消</el-button>
76       </div>
77     </el-dialog>
78   </div>
79 </template>
80
81 <script>
82 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
83 import {createTaskAssignRule, getTaskAssignRuleList, updateTaskAssignRule} from "@/api/bpm/taskAssignRule";
84 import {listSimpleRoles} from "@/api/system/role";
85 import {listSimpleDepts} from "@/api/system/dept";
86
87 import Treeselect from "@riophae/vue-treeselect";
88 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
89 import {listSimplePosts} from "@/api/system/post";
90 import {listSimpleUsers} from "@/api/system/user";
91 import {listSimpleUserGroups} from "@/api/bpm/userGroup";
92
93 export default {
94   name: "BpmTaskAssignRule",
95   components: {
96     Treeselect
97   },
98   data() {
99     return {
100       // 如下参数,可传递
101       modelId: undefined, // 流程模型的编号。如果 modelId 非空,则用于流程模型的查看与配置
102       processDefinitionId: undefined, // 流程定义的编号。如果 processDefinitionId 非空,则用于流程定义的查看,不支持配置
103       visible: false,
104
105       // 任务分配规则表单
106       row: undefined, // 选中的流程模型
107       list: [], // 选中流程模型的任务分配规则们
108       loading: false, // 加载中
109       open: false, // 是否打开
110       form: {}, // 表单
111       rules: { // 表单校验规则
112         type: [{ required: true, message: "规则类型不能为空", trigger: "change" }],
113         roleIds: [{required: true, message: "指定角色不能为空", trigger: "change" }],
114         deptIds: [{required: true, message: "指定部门不能为空", trigger: "change" }],
115         postIds: [{required: true, message: "指定岗位不能为空", trigger: "change"}],
116         userIds: [{required: true, message: "指定用户不能为空", trigger: "change"}],
117         userGroupIds: [{required: true, message: "指定用户组不能为空", trigger: "change"}],
118         scripts: [{required: true, message: "指定脚本不能为空", trigger: "change"}],
119       },
120
121       // 各种下拉框
122       roleOptions: [],
123       deptOptions: [],
124       deptTreeOptions: [],
125       postOptions: [],
126       userOptions: [],
127       userGroupOptions: [],
128
129       // 数据字典
130       modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
131       taskAssignRuleTypeDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
132       taskAssignScriptDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT),
133     };
134   },
135   methods: {
136     initModel(modelId) {
137       this.modelId = modelId;
138       this.processDefinitionId = undefined;
139
140       // 初始化所有下拉框
141       this.init0();
142     },
143     initProcessDefinition(processDefinitionId) {
144       this.modelId = undefined;
145       this.processDefinitionId = processDefinitionId;
146
147       // 初始化所有下拉框
148       this.init0();
149     },
150     /** 初始化 */
151     init0() {
152       // 设置可见
153       this.visible = true;
154       // 获得列表
155       this.getList();
156
157       // 获得角色列表
158       this.roleOptions = [];
159       listSimpleRoles().then(response => {
160         this.roleOptions.push(...response.data);
161       });
162       // 获得部门列表
163       this.deptOptions = [];
164       this.deptTreeOptions = [];
165       listSimpleDepts().then(response => {
166         this.deptOptions.push(...response.data);
167         this.deptTreeOptions.push(...this.handleTree(response.data, "id"));
168       });
169       // 获得岗位列表
170       this.postOptions = [];
171       listSimplePosts().then(response => {
172         this.postOptions.push(...response.data);
173       });
174       // 获得用户列表
175       this.userOptions = [];
176       listSimpleUsers().then(response => {
177         this.userOptions.push(...response.data);
178       });
179       // 获得用户组列表
180       this.userGroupOptions = [];
181       listSimpleUserGroups().then(response => {
182         this.userGroupOptions.push(...response.data);
183       });
184     },
185     /** 获得任务分配规则列表 */
186     getList() {
187       this.loading = true;
188       getTaskAssignRuleList({
189         modelId: this.modelId,
190         processDefinitionId: this.processDefinitionId,
191       }).then(response => {
192         this.loading = false;
193         this.list = response.data;
194       })
195     },
196     /** 处理修改任务分配规则的按钮操作 */
197     handleUpdateTaskAssignRule(row) {
198       // 先重置标识
199       this.resetAssignRuleForm();
200       // 设置表单
201       this.form = {
202         ...row,
203         options: [],
204         roleIds: [],
205         deptIds: [],
206         postIds: [],
207         userIds: [],
208         userGroupIds: [],
209         scripts: [],
210       };
211       // 将 options 赋值到对应的 roleIds 等选项
212       if (row.type === 10) {
213         this.form.roleIds.push(...row.options);
214       } else if (row.type === 20 || row.type === 21) {
215         this.form.deptIds.push(...row.options);
216       } else if (row.type === 22) {
217         this.form.postIds.push(...row.options);
218       } else if (row.type === 30 || row.type === 31 || row.type === 32) {
219         this.form.userIds.push(...row.options);
220       } else if (row.type === 40) {
221         this.form.userGroupIds.push(...row.options);
222       } else if (row.type === 50) {
223         this.form.scripts.push(...row.options);
224       }
225       this.open = true;
226     },
227     /** 提交任务分配规则的表单 */
228     submitAssignRuleForm() {
229       this.$refs["taskAssignRuleForm"].validate(valid => {
230         if (valid) {
231           // 构建表单
232           let form = {
233             ...this.form,
234             taskDefinitionName: undefined,
235           };
236           // 将 roleIds 等选项赋值到 options 中
237           if (form.type === 10) {
238             form.options = form.roleIds;
239           } else if (form.type === 20 || form.type === 21) {
240             form.options = form.deptIds;
241           } else if (form.type === 22) {
242             form.options = form.postIds;
243           } else if (form.type === 30 || form.type === 31 || form.type === 32) {
244             form.options = form.userIds;
245           } else if (form.type === 40) {
246             form.options = form.userGroupIds;
247           } else if (form.type === 50) {
248             form.options = form.scripts;
249           }
250           form.roleIds = undefined;
251           form.deptIds = undefined;
252           form.postIds = undefined;
253           form.userIds = undefined;
254           form.userGroupIds = undefined;
255           form.scripts = undefined;
256           // 新增
257           if (!form.id) {
258             form.modelId = this.modelId; // 模型编号
259             createTaskAssignRule(form).then(response => {
260               this.$modal.msgSuccess("修改成功");
261               this.open = false;
262               this.getList();
263             });
264             // 修改
265           } else {
266             form.taskDefinitionKey = undefined; // 无法修改
267             updateTaskAssignRule(form).then(response => {
268               this.$modal.msgSuccess("修改成功");
269               this.open = false;
270               this.getList();
271             });
272           }
273         }
274       });
275     },
276     /** 取消任务分配规则的表单 */
277     cancelAssignRuleForm() {
278       this.open = false;
279       this.resetAssignRuleForm();
280     },
281     /** 表单重置 */
282     resetAssignRuleForm() {
283       this.form = {};
284       this.resetForm("taskAssignRuleForm");
285     },
286     getAssignRuleOptionName(type, option) {
287       if (type === 10) {
288         for (const roleOption of this.roleOptions) {
289           if (roleOption.id === option) {
290             return roleOption.name;
291           }
292         }
293       } else if (type === 20 || type === 21) {
294         for (const deptOption of this.deptOptions) {
295           if (deptOption.id === option) {
296             return deptOption.name;
297           }
298         }
299       } else if (type === 22) {
300         for (const postOption of this.postOptions) {
301           if (postOption.id === option) {
302             return postOption.name;
303           }
304         }
305       } else if (type === 30 || type === 31 || type === 32) {
306         for (const userOption of this.userOptions) {
307           if (userOption.id === option) {
308             return userOption.nickname;
309           }
310         }
311       } else if (type === 40) {
312         for (const userGroupOption of this.userGroupOptions) {
313           if (userGroupOption.id === option) {
314             return userGroupOption.name;
315           }
316         }
317       } else if (type === 50) {
318         option = option + ''; // 转换成 string
319         for (const dictData of this.taskAssignScriptDictDatas) {
320           if (dictData.value === option) {
321             return dictData.label;
322           }
323         }
324       }
325       return '未知(' + option + ')';
326     },
327     // 格式化部门的下拉框
328     normalizer(node) {
329       return {
330         id: node.id,
331         label: node.name,
332         children: node.children
333       }
334     }
335   }
336 };
337 </script>