feat: 新审批对话框支持并行节点

src/components/SecondDev/OpinionDialog.vue

@@ -5,14 +5,17 @@
             <a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
         </template>
         <div class="dialog-wrap">
-            <a-form :label-col="{ span: 5 }" :model="formState" autocomplete="off">
+            <a-form :label-col="{ span: 6 }" :model="formState" autocomplete="off">
                 <a-form-item v-if="_action === 'agree'" label="下一节点" name="nextNodeName">
-                    <span>{{ formState.nextNodeName }}</span>
+                    <span>{{ getNextNodesName() }}</span>
-                </a-form-item>
-                <a-form-item v-if="_action === 'agree' && !isEnd" label="审批人">
-                    <a-select v-show="chooseAssign" v-model:value="formState.assignees" :options="nextAssignees" max-tag-count="responsive" mode="multiple" placeholder="请选择审批人"></a-select>
-                    <span v-show="!chooseAssign">{{ getAssigneeText() }}</span>
                 </a-form-item>
+                <template v-for="node in flowNextNodes">
+                    <a-form-item v-if="_action === 'agree' && !isEnd" :label="flowNextNodes.length > 1 ? node.activityName + '审批人' : '审批人'">
+                        <a-select v-show="node.chooseAssign" v-model:value="node.assignees" :options="node.nextAssignees" :placeholder="'请选择' + node.activityName + '的审批人'" max-tag-count="responsive" mode="multiple"></a-select>
+                        <span v-show="!node.chooseAssign">{{ getAssigneeText(node) }}</span>
+                    </a-form-item>
+                </template>
+
                 <a-form-item v-if="_action === 'reject'" label="退回至" name="rejectNode">
                     <a-select v-model:value="rejectNodeId">
                         <a-select-option v-for="(item, index) in rejectNodeList" :key="index" :value="item.activityId">{{ item.activityName }}</a-select-option>
@@ -35,34 +38,33 @@
     const isOpen = ref(false);
     const rejectNodeList = ref([]);
     const rejectNodeId = ref('');
-    const nextAssigneeName = ref(''); // 不可选审批人
-    const nextAssignees = ref([]);
     const loading = ref(false);
     const isEnd = ref(false);
-    const chooseAssign = ref(true);
 
     let _action = ref('agree');
     let _processId = '';
     let _taskId = '';
-    let _nextNodes = [];
+    let flowNextNodes = ref([]);
     let _callback = null;
     let _onCancel = null;
 
     const formState = reactive({
-        nextNodeName: '',
         opinion: '',
-        assignees: [],
         opinionList: ['同意。', '请领导审批。']
     });
 
-    function getAssigneeText() {
+    function getAssigneeText(node) {
         // 注意这里用的是下拉框的数据结构 所以字段是value和label
-        return (nextAssignees.value || [])
+        return (node.nextAssignees || [])
-            .filter((item) => formState.assignees.includes(item.value))
+            .filter((item) => node.assignees.includes(item.value))
             .map((item) => item.label)
             .join('、');
     }
 
+    function getNextNodesName() {
+        return flowNextNodes.value.length > 1 ? '多个并行节点' : flowNextNodes.value[0].activityName;
+    }
+
     function toggleDialog({ isClose, action, callback, rejectCancel, processId, taskId, nextNodes } = {}) {
         if (isClose) {
             isOpen.value = false;
@@ -75,17 +77,20 @@
         _onCancel = rejectCancel;
         _processId = processId;
         _taskId = taskId;
-        _nextNodes = nextNodes;
+        flowNextNodes.value = nextNodes;
         formState.opinion = '';
         dialogTitle.value = `审批`;
-        if (nextNodes && nextNodes.length === 1) {
+        if (nextNodes && nextNodes.length) {
             // 下一个节点唯一时（可能有并行节点）
             const nNode = nextNodes[0];
-            formState.nextNodeName = nNode.activityName;
+            //formState.nextNodeName = nNode.activityName;
             isEnd.value = nNode.isEnd;
-            if (nNode.userList?.length) {
+            nextNodes.forEach((nNode) => {
+                if (!nNode.userList?.length) {
+                    return;
+                }
                 const selected = [];
-                nextAssignees.value = nNode.userList.map((item) => {
+                nNode.nextAssignees = nNode.userList.map((item) => {
                     if (item.checked || nNode.userList.length === 1) {
                         // 只有一个人的时候必须选他
                         selected.push(item['F_UserId']);
@@ -95,13 +100,14 @@
                         label: item['F_RealName']
                     };
                 });
-                formState.assignees = selected;
+                nNode.assignees = selected;
                 if (!nNode.chooseAssign) {
                     // 不需要选审批人的时候 所有备选人都要放到下个节点
-                    formState.assignees = nNode.userList.map((item) => item['F_UserId']);
+                    nNode.assignees = nNode.userList.map((item) => item['F_UserId']);
                 }
-            }
+                nNode.chooseAssign = nNode.chooseAssign;
-            chooseAssign.value = nNode.chooseAssign;
+            });
+            flowNextNodes.value = nextNodes;
         }
         if (action === 'reject') {
             loadRejectNodeList();
@@ -116,13 +122,14 @@
     }
 
     function onClickOK() {
-        if (!isEnd.value && _action.value === 'agree' && !formState.assignees.length) {
+        const isEmpty = flowNextNodes.value.find((node) => !node.assignees?.length);
+        if (!isEnd.value && _action.value === 'agree' && isEmpty) {
             return message.error('请选择审批人');
         }
         const nextTaskUser = {};
-        if (_nextNodes && _nextNodes.length === 1) {
+        flowNextNodes.value.forEach((nNode) => {
-            nextTaskUser[_nextNodes[0].activityId] = isEnd.value ? '' : formState.assignees.join(',');
+            nextTaskUser[nNode.activityId] = isEnd.value ? '' : nNode.assignees.join(',');
-        }
+        });
         if (_callback && typeof _callback === 'function') {
             loading.value = true;
             _callback({