BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 842cb6bd6b2ab53bedde440c68e6ee4e981189ba

Authored by YunaiV
1 parent 5efb4c26

BPM 模型重构 7：将任务分配规则，分装成前端组件

Inline Side-by-side
Showing 3 changed files with 248 additions and 194 deletions
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/bpm/enums/definition/BpmTaskAssignRuleTypeEnum.java
  View file @842cb6b
... ... @@ -16,6 +16,7 @@ public enum BpmTaskAssignRuleTypeEnum {
16 16  
17 17 DEPT_MEMBER(20, "部门的成员"), // 包括负责人
18 18 DEPT_LEADER(21, "部门的负责人"),
  19 + POST(22, "岗位"),
19 20  
20 21 USER(30, "用户"),
21 22  
... ...
yudao-admin-ui/src/views/bpm/model/index.vue
  View file @842cb6b
... ... @@ -200,61 +200,7 @@
200 200 </el-dialog>
201 201  
202 202 <!-- ========== 流程任务分配规则 ========== -->
203   - <!-- 列表弹窗 -->
204   - <el-dialog title="任务分配规则" :visible.sync="taskAssignRule.listOpen" width="800px" append-to-body>
205   - <el-table v-loading="taskAssignRule.loading" :data="taskAssignRule.list">
206   - <el-table-column label="任务名" align="center" prop="taskDefinitionName" width="120" fixed />
207   - <el-table-column label="任务标识" align="center" prop="taskDefinitionKey" width="120" show-tooltip-when-overflow />
208   - <el-table-column label="规则类型" align="center" prop="type" width="120">
209   - <template slot-scope="scope">
210   - <span>{{ getDictDataLabel(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE, scope.row.type) }}</span>
211   - </template>
212   - </el-table-column>
213   - <el-table-column label="规则范围" align="center" prop="options" width="300px">
214   - <template slot-scope="scope">
215   - <el-tag size="medium" v-if="scope.row.options" v-for="option in scope.row.options">
216   - {{ getAssignRuleOptionName(scope.row.type, option) }}
217   - </el-tag>
218   - </template>
219   - </el-table-column>
220   - <el-table-column label="操作" align="center" width="80" fixed="right">
221   - <template slot-scope="scope">
222   - <!-- TODO 权限 -->
223   - <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTaskAssignRule(scope.row)"
224   - v-hasPermi="['bpm:model:update']">修改</el-button>
225   - </template>
226   - </el-table-column>
227   - </el-table>
228   - </el-dialog>
229   - <!-- 添加/修改弹窗 -->
230   - <el-dialog title="修改任务规则" :visible.sync="taskAssignRule.open" width="500px" append-to-body>
231   - <el-form ref="taskAssignRuleForm" :model="taskAssignRule.form" :rules="taskAssignRule.rules" label-width="110px">
232   - <el-form-item label="任务名称" prop="taskDefinitionName">
233   - <el-input v-model="taskAssignRule.form.taskDefinitionName" disabled />
234   - </el-form-item>
235   - <el-form-item label="任务标识" prop="taskDefinitionKey">
236   - <el-input v-model="taskAssignRule.form.taskDefinitionKey" disabled />
237   - </el-form-item>
238   - <el-form-item label="规则类型" prop="type">
239   - <el-select v-model="taskAssignRule.form.type" clearable style="width: 100%">
240   - <el-option v-for="dict in taskAssignRuleDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
241   - </el-select>
242   - </el-form-item>
243   - <el-form-item v-if="taskAssignRule.form.type === 10" label="指定角色" prop="roleIds">
244   - <el-select v-model="taskAssignRule.form.roleIds" multiple clearable style="width: 100%">
245   - <el-option v-for="item in taskAssignRule.roleOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
246   - </el-select>
247   - </el-form-item>
248   - <el-form-item v-if="taskAssignRule.form.type === 20 || taskAssignRule.form.type === 21" label="指定部门" prop="deptIds">
249   - <treeselect v-model="taskAssignRule.form.deptIds" :options="taskAssignRule.deptTreeOptions" multiple flat :defaultExpandLevel="3"
250   - placeholder="请选择指定部门" :normalizer="normalizer"/>
251   - </el-form-item>
252   - </el-form>
253   - <div slot="footer" class="dialog-footer">
254   - <el-button type="primary" @click="submitAssignRuleForm">确 定</el-button>
255   - <el-button @click="cancelAssignRuleForm">取 消</el-button>
256   - </div>
257   - </el-dialog>
  203 + <taskAssignRuleDialog ref="taskAssignRuleDialog" />
258 204 </div>
259 205 </template>
260 206  
... ... @@ -273,9 +219,7 @@ import {getForm, getSimpleForms} from &quot;@/api/bpm/form&quot;;
273 219 import {decodeFields} from "@/utils/formGenerator";
274 220 import Parser from '@/components/parser/Parser'
275 221 import {getBaseHeader} from "@/utils/request";
276   -import {createTaskAssignRule, getTaskAssignRuleList, updateTaskAssignRule} from "@/api/bpm/taskAssignRule";
277   -import {listSimpleRoles} from "@/api/system/role";
278   -import {listSimpleDepts} from "@/api/system/dept";
  222 +import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog";
279 223  
280 224 import Treeselect from "@riophae/vue-treeselect";
281 225 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
... ... @@ -284,7 +228,8 @@ export default {
284 228 name: "model",
285 229 components: {
286 230 Parser,
287   - Treeselect
  231 + Treeselect,
  232 + taskAssignRuleDialog
288 233 },
289 234 data() {
290 235 return {
... ... @@ -329,25 +274,6 @@ export default {
329 274 formCustomViewPath: [{ required: true, message: "表单查看路由不能为空", trigger: "blur" }],
330 275 },
331 276  
332   - // 任务分配规则表单
333   - taskAssignRule: {
334   - row: undefined, // 选中的流程模型
335   - list: [], // 选中流程模型的任务分配规则们
336   - listOpen: false, // 列表是否打开
337   - loading: false, // 加载中
338   - open: false, // 是否打开
339   - form: {}, // 表单
340   - rules: { // 表单校验规则
341   - type: [{ required: true, message: "规则类型不能为空", trigger: "change" }],
342   - roleIds: [{required: true, message: "指定角色不能为空", trigger: "change" }],
343   - deptIds: [{required: true, message: "指定部门不能为空", trigger: "change" }],
344   - },
345   - // 各种下拉框
346   - roleOptions: [],
347   - deptOptions: [],
348   - deptTreeOptions: [],
349   - },
350   -
351 277 // 流程导入参数
352 278 upload: {
353 279 // 是否显示弹出层（用户导入）
... ... @@ -600,125 +526,10 @@ export default {
600 526 this.$refs.upload.submit();
601 527 })
602 528 },
603   - // ========== ==========
604   - doGetTaskAssignRuleList() {
605   - this.taskAssignRule.loading = true;
606   - getTaskAssignRuleList({
607   - modelId: this.taskAssignRule.row.id
608   - }).then(response => {
609   - this.taskAssignRule.loading = false;
610   - this.taskAssignRule.list = response.data;
611   - })
612   - },
613 529 /** 处理任务分配规则列表的按钮操作 */
614 530 handleAssignRule(row) {
615   - this.taskAssignRule.row = row;
616   - this.taskAssignRule.listOpen = true;
617   - this.doGetTaskAssignRuleList();
618   - // 获得角色列表
619   - this.taskAssignRule.roleOptions = [];
620   - listSimpleRoles().then(response => {
621   - this.taskAssignRule.roleOptions.push(...response.data);
622   - });
623   - // 获得部门列表
624   - this.taskAssignRule.deptOptions = [];
625   - this.taskAssignRule.deptTreeOptions = [];
626   - listSimpleDepts().then(response => {
627   - // 处理 roleOptions 参数
628   - this.taskAssignRule.deptOptions.push(...response.data);
629   - this.taskAssignRule.deptTreeOptions.push(...this.handleTree(response.data, "id"));
630   - });
631   - },
632   - /** 处理修改任务分配规则的按钮操作 */
633   - handleUpdateTaskAssignRule(row) {
634   - // 先重置标识
635   - this.resetAssignRuleForm();
636   - // 设置表单
637   - this.taskAssignRule.form = {
638   - ...row,
639   - options: [],
640   - roleIds: [],
641   - deptIds: [],
642   - };
643   - // 将 options 赋值到对应的 roleIds 等选项
644   - if (row.type === 10) {
645   - this.taskAssignRule.form.roleIds.push(...row.options);
646   - } else if (row.type === 20 || row.type === 21) {
647   - this.taskAssignRule.form.deptIds.push(...row.options);
648   - }
649   - this.taskAssignRule.open = true;
650   - },
651   - /** 提交任务分配规则的表单 */
652   - submitAssignRuleForm() {
653   - this.$refs["taskAssignRuleForm"].validate(valid => {
654   - if (valid) {
655   - // 构建表单
656   - let form = {
657   - ...this.taskAssignRule.form,
658   - taskDefinitionName: undefined,
659   - };
660   - // 将 roleIds 等选项赋值到 options 中
661   - if (form.type === 10) {
662   - form.options = form.roleIds;
663   - } else if (form.type === 20 || form.type === 21) {
664   - form.options = form.deptIds;
665   - }
666   - form.roleIds = undefined;
667   - form.deptIds = undefined;
668   - // 新增
669   - if (!form.id) {
670   - form.modelId = this.taskAssignRule.row.id // 模型编号
671   - createTaskAssignRule(form).then(response => {
672   - this.msgSuccess("修改成功");
673   - this.taskAssignRule.open = false;
674   - this.doGetTaskAssignRuleList();
675   - });
676   - // 修改
677   - } else {
678   - form.taskDefinitionKey = undefined; // 无法修改
679   - updateTaskAssignRule(form).then(response => {
680   - this.msgSuccess("修改成功");
681   - this.taskAssignRule.open = false;
682   - this.doGetTaskAssignRuleList();
683   - });
684   - }
685   - }
686   - });
687   - },
688   - /** 取消任务分配规则的表单 */
689   - cancelAssignRuleForm() {
690   - this.taskAssignRule.open = false;
691   - this.resetAssignRuleForm();
692   - },
693   - /** 表单重置 */
694   - resetAssignRuleForm() {
695   - this.taskAssignRule.form = {};
696   - this.resetForm("taskAssignRuleForm");
  531 + this.$refs['taskAssignRuleDialog'].initModel(row.id);
697 532 },
698   - getAssignRuleOptionName(type, option) {
699   - if (type === 10) {
700   - for (const roleOption of this.taskAssignRule.roleOptions) {
701   - if (roleOption.id === option) {
702   - return roleOption.name;
703   - }
704   - }
705   - } else if (type === 20 || type === 21) {
706   - for (const deptOption of this.taskAssignRule.deptOptions) {
707   - if (deptOption.id === option) {
708   - return deptOption.name;
709   - }
710   - }
711   - }
712   - return '未知(' + option + ')';
713   - },
714   - // 格式化部门的下拉框
715   - normalizer(node) {
716   - return {
717   - id: node.id,
718   - label: node.name,
719   - children: node.children
720   - }
721   - }
722 533 }
723 534 };
724 535 </script>
... ...
yudao-admin-ui/src/views/bpm/taskAssignRule/taskAssignRuleDialog.vue 0 → 100644
  View file @842cb6b
  1 +<template>
  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 slot-scope="scope">
  10 + <span>{{ getDictDataLabel(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE, scope.row.type) }}</span>
  11 + </template>
  12 + </el-table-column>
  13 + <el-table-column label="规则范围" align="center" prop="options" width="300px">
  14 + <template slot-scope="scope">
  15 + <el-tag size="medium" v-if="scope.row.options" 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 label="操作" align="center" width="80" fixed="right">
  21 + <template slot-scope="scope">
  22 + <!-- TODO 权限 -->
  23 + <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateTaskAssignRule(scope.row)"
  24 + v-hasPermi="['bpm:model:update']">修改</el-button>
  25 + </template>
  26 + </el-table-column>
  27 + </el-table>
  28 + </el-dialog>
  29 + <!-- 添加/修改弹窗 -->
  30 + <el-dialog title="修改任务规则" :visible.sync="open" width="500px" append-to-body>
  31 + <el-form ref="taskAssignRuleForm" :model="form" :rules="rules" label-width="110px">
  32 + <el-form-item label="任务名称" prop="taskDefinitionName">
  33 + <el-input v-model="form.taskDefinitionName" disabled />
  34 + </el-form-item>
  35 + <el-form-item label="任务标识" prop="taskDefinitionKey">
  36 + <el-input v-model="form.taskDefinitionKey" disabled />
  37 + </el-form-item>
  38 + <el-form-item label="规则类型" prop="type">
  39 + <el-select v-model="form.type" clearable style="width: 100%">
  40 + <el-option v-for="dict in taskAssignRuleDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
  41 + </el-select>
  42 + </el-form-item>
  43 + <el-form-item v-if="form.type === 10" label="指定角色" prop="roleIds">
  44 + <el-select v-model="form.roleIds" multiple clearable style="width: 100%">
  45 + <el-option v-for="item in roleOptions" :key="parseInt(item.id)" :label="item.name" :value="parseInt(item.id)" />
  46 + </el-select>
  47 + </el-form-item>
  48 + <el-form-item v-if="form.type === 20 || form.type === 21" label="指定部门" prop="deptIds">
  49 + <treeselect v-model="form.deptIds" :options="deptTreeOptions" multiple flat :defaultExpandLevel="3"
  50 + placeholder="请选择指定部门" :normalizer="normalizer"/>
  51 + </el-form-item>
  52 + </el-form>
  53 + <div slot="footer" class="dialog-footer">
  54 + <el-button type="primary" @click="submitAssignRuleForm">确 定</el-button>
  55 + <el-button @click="cancelAssignRuleForm">取 消</el-button>
  56 + </div>
  57 + </el-dialog>
  58 + </div>
  59 +</template>
  60 +
  61 +<script>
  62 +import {DICT_TYPE, getDictDatas} from "@/utils/dict";
  63 +import {createTaskAssignRule, getTaskAssignRuleList, updateTaskAssignRule} from "@/api/bpm/taskAssignRule";
  64 +import {listSimpleRoles} from "@/api/system/role";
  65 +import {listSimpleDepts} from "@/api/system/dept";
  66 +
  67 +import Treeselect from "@riophae/vue-treeselect";
  68 +import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  69 +
  70 +export default {
  71 + name: "taskAssignRuleDialog",
  72 + components: {
  73 + Treeselect
  74 + },
  75 + data() {
  76 + return {
  77 + // 如下参数，可传递
  78 + modelId: undefined, // 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
  79 + processDefinitionId: undefined, // 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
  80 + visible: false,
  81 +
  82 + // 任务分配规则表单
  83 + row: undefined, // 选中的流程模型
  84 + list: [], // 选中流程模型的任务分配规则们
  85 + loading: false, // 加载中
  86 + open: false, // 是否打开
  87 + form: {}, // 表单
  88 + rules: { // 表单校验规则
  89 + type: [{ required: true, message: "规则类型不能为空", trigger: "change" }],
  90 + roleIds: [{required: true, message: "指定角色不能为空", trigger: "change" }],
  91 + deptIds: [{required: true, message: "指定部门不能为空", trigger: "change" }],
  92 + },
  93 +
  94 + // 各种下拉框
  95 + roleOptions: [],
  96 + deptOptions: [],
  97 + deptTreeOptions: [],
  98 +
  99 + // 数据字典
  100 + modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE),
  101 + taskAssignRuleDictDatas: getDictDatas(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
  102 + };
  103 + },
  104 + methods: {
  105 + initModel(modelId) {
  106 + this.modelId = modelId;
  107 + this.processDefinitionId = undefined;
  108 +
  109 + // 初始化所有下拉框
  110 + this.init0();
  111 + },
  112 + initProcessDefinition(processDefinitionId) {
  113 + this.modelId = undefined;
  114 + this.processDefinitionId = processDefinitionId;
  115 +
  116 + // 初始化所有下拉框
  117 + this.init0();
  118 + },
  119 + /** 初始化 */
  120 + init0() {
  121 + // 设置可见
  122 + this.visible = true;
  123 + // 获得列表
  124 + this.getList();
  125 +
  126 + // 获得角色列表
  127 + this.roleOptions = [];
  128 + listSimpleRoles().then(response => {
  129 + this.roleOptions.push(...response.data);
  130 + });
  131 + // 获得部门列表
  132 + this.deptOptions = [];
  133 + this.deptTreeOptions = [];
  134 + listSimpleDepts().then(response => {
  135 + // 处理 roleOptions 参数
  136 + this.deptOptions.push(...response.data);
  137 + this.deptTreeOptions.push(...this.handleTree(response.data, "id"));
  138 + });
  139 + },
  140 + /** 获得任务分配规则列表 */
  141 + getList() {
  142 + this.loading = true;
  143 + getTaskAssignRuleList({
  144 + modelId: this.modelId,
  145 + }).then(response => {
  146 + this.loading = false;
  147 + this.list = response.data;
  148 + })
  149 + },
  150 + /** 处理修改任务分配规则的按钮操作 */
  151 + handleUpdateTaskAssignRule(row) {
  152 + // 先重置标识
  153 + this.resetAssignRuleForm();
  154 + // 设置表单
  155 + this.form = {
  156 + ...row,
  157 + options: [],
  158 + roleIds: [],
  159 + deptIds: [],
  160 + };
  161 + // 将 options 赋值到对应的 roleIds 等选项
  162 + if (row.type === 10) {
  163 + this.form.roleIds.push(...row.options);
  164 + } else if (row.type === 20 || row.type === 21) {
  165 + this.form.deptIds.push(...row.options);
  166 + }
  167 + this.open = true;
  168 + },
  169 + /** 提交任务分配规则的表单 */
  170 + submitAssignRuleForm() {
  171 + this.$refs["taskAssignRuleForm"].validate(valid => {
  172 + if (valid) {
  173 + // 构建表单
  174 + let form = {
  175 + ...this.form,
  176 + taskDefinitionName: undefined,
  177 + };
  178 + // 将 roleIds 等选项赋值到 options 中
  179 + if (form.type === 10) {
  180 + form.options = form.roleIds;
  181 + } else if (form.type === 20 || form.type === 21) {
  182 + form.options = form.deptIds;
  183 + }
  184 + form.roleIds = undefined;
  185 + form.deptIds = undefined;
  186 + // 新增
  187 + if (!form.id) {
  188 + form.modelId = this.modelId; // 模型编号
  189 + createTaskAssignRule(form).then(response => {
  190 + this.msgSuccess("修改成功");
  191 + this.open = false;
  192 + this.getList();
  193 + });
  194 + // 修改
  195 + } else {
  196 + form.taskDefinitionKey = undefined; // 无法修改
  197 + updateTaskAssignRule(form).then(response => {
  198 + this.msgSuccess("修改成功");
  199 + this.open = false;
  200 + this.getList();
  201 + });
  202 + }
  203 + }
  204 + });
  205 + },
  206 + /** 取消任务分配规则的表单 */
  207 + cancelAssignRuleForm() {
  208 + this.open = false;
  209 + this.resetAssignRuleForm();
  210 + },
  211 + /** 表单重置 */
  212 + resetAssignRuleForm() {
  213 + this.form = {};
  214 + this.resetForm("taskAssignRuleForm");
  215 + },
  216 + getAssignRuleOptionName(type, option) {
  217 + if (type === 10) {
  218 + for (const roleOption of this.roleOptions) {
  219 + if (roleOption.id === option) {
  220 + return roleOption.name;
  221 + }
  222 + }
  223 + } else if (type === 20 || type === 21) {
  224 + for (const deptOption of this.deptOptions) {
  225 + if (deptOption.id === option) {
  226 + return deptOption.name;
  227 + }
  228 + }
  229 + }
  230 + return '未知(' + option + ')';
  231 + },
  232 + // 格式化部门的下拉框
  233 + normalizer(node) {
  234 + return {
  235 + id: node.id,
  236 + label: node.name,
  237 + children: node.children
  238 + }
  239 + }
  240 + }
  241 +};
  242 +</script>
... ...