fix: 移除新增的tabKey，调整对应的路由设计，方便关闭路由和修改标题

feat: 新样式的退回操作对话框

src/components/SecondDev/OpinionDialog.vue

@@ -2,9 +2,14 @@
     <a-modal :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg" @cancel="onClickCancel" @ok="onClickOK">
         <div class="dialog-wrap">
             <a-form :label-col="{ span: 5 }" :model="formState" autocomplete="off">
-                <a-form-item label="下一节点" name="nextNodeName">
+                <a-form-item v-if="_action === 'agree'" label="下一节点" name="nextNodeName">
                     <span>{{ formState.nextNodeName }}</span>
                 </a-form-item>
+                <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>
+                    </a-select>
+                </a-form-item>
                 <a-form-item label="审批意见" name="opinion">
                     <a-textarea v-model:value="formState.opinion" :maxlength="200" :rows="3" placeholder="请输入审批意见，不超过200字" />
                 </a-form-item>
@@ -15,17 +20,17 @@
 
 <script setup>
     import { reactive, ref } from 'vue';
+    import { getRejectNodeList } from '/@/api/workflow/task';
 
     const dialogTitle = ref('审批');
     const isOpen = ref(false);
-    let _action = 'approve';
+    const rejectNodeList = ref([]);
-    const titleMapping = {
+    const rejectNodeId = ref('');
-        approve: '同意',
+
-        deny: '拒绝',
+    let _action = ref('agree');
-        eject: '退回',
+    let _processId = '';
-        cancel: '终止',
+    let _taskId = '';
-        transfer: '转办'
+
-    };
     let _callback = null;
 
     const formState = reactive({
@@ -34,18 +39,35 @@
         opinionList: ['同意。', '请领导审批。']
     });
 
-    function toggleDialog({ action, callback } = {}) {
+    function toggleDialog({ isClose, action, callback, processId, taskId } = {}) {
+        if (isClose) {
+            isOpen.value = false;
+            return;
+        }
         isOpen.value = true;
-        _action = action;
+        _action.value = action;
         _callback = callback;
+        _processId = processId;
+        _taskId = taskId;
         formState.opinion = '';
-        dialogTitle.value = `审批 - ${titleMapping[action]}`;
+        dialogTitle.value = `审批`;
+        if (action === 'reject') {
+            loadRejectNodeList();
+        }
+    }
+
+    async function loadRejectNodeList() {
+        let res = await getRejectNodeList(_processId, _taskId);
+        if (res && Array.isArray(res) && res.length > 0) {
+            rejectNodeList.value = res;
+        }
     }
 
     function onClickOK() {
         if (_callback && typeof _callback === 'function') {
             _callback({
-                opinion: formState.opinion
+                opinion: formState.opinion,
+                rejectNodeId: rejectNodeId.value
             });
         }
         isOpen.value = false;
@@ -62,6 +84,6 @@
 
 <style lang="less" scoped>
     .dialog-wrap {
-        padding-right: 15px;
+        padding: 10px 15px 0 0;
     }
 </style>

src/router/routes/basic.ts

@@ -125,8 +125,8 @@ export const USERCENTER_ROUTE: AppRouteRecordRaw = {
     ]
 };
 
-export const FLOW_ROUTE: AppRouteRecordRaw = {
+export const FLOW_ROUTE: AppRouteRecordRaw[] = [{
-    path: '/flow',
+    path: '/flow/:arg1/:arg2',
     name: 'Flow',
     meta: {
         title: '流程'
@@ -148,18 +148,27 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
             meta: {
                 title: '审批流程'
             }
+        }
+    ]
+}, {
+    path: '/flowList',
+    name: 'FlowList',
+    meta: {
+        title: '流程列表'
     },
+    component: LAYOUT,
+    children: [
         /* 菜单不支持复用，不同菜单如果path或者name一样会报错 */
         {
-            path: 'flowList',
+            path: 'draft',
             name: 'FlowListPage',
             component: () => import('/@/views/secondDev/processTasksPage.vue'),
             meta: {
-                title: '流程列表'
+                title: '草稿箱'
             }
         },
         {
-            path: 'flowList2',
+            path: 'todo',
             name: 'FlowListPage2',
             component: () => import('/@/views/secondDev/processTasksPage.vue'),
             meta: {
@@ -167,4 +176,4 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
             }
         }
     ]
-};
+}];

src/router/routes/index.ts

@@ -53,6 +53,6 @@ export const basicRoutes = [
     PAGE_NOT_FOUND_ROUTE,
     SYSTEM_ROUTE,
     USERCENTER_ROUTE,
-    FLOW_ROUTE
+    ...FLOW_ROUTE
     // CUSTOMFORM_ROUTE,
 ];

src/store/modules/multipleTab.ts

@@ -177,8 +177,8 @@ export const useMultipleTabStore = defineStore({
       cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
     },
 
-    changeTitle(tabKey: string, title: string) {
+    changeTitle(fullPath: string, title: string) {
-      const tab = (this.tabList as any).find((item) => item.tabKey === tabKey);
+      const tab = (this.tabList as any).find((item) => item.fullPath === fullPath);
       if (tab) {
         tab.tabTitle = title;
       }

src/views/secondDev/approveFlowPage.vue

@@ -24,9 +24,9 @@
                     <a-dropdown>
                         <template #overlay>
                             <a-menu @click="onMoreClick">
-                                <a-menu-item key="1">退回</a-menu-item>
+                                <a-menu-item key="terminate">终止</a-menu-item>
-                                <a-menu-item key="2">终止</a-menu-item>
+                                <a-menu-item key="transfer">转办</a-menu-item>
-                                <a-menu-item key="3">转办</a-menu-item>
+                                <a-menu-item key="flowchart">查看流程图</a-menu-item>
                             </a-menu>
                         </template>
                         <a-button>
@@ -56,22 +56,26 @@
     import { onMounted, reactive, ref, unref } from 'vue';
     import FormInformation from '/@/views/secondDev/FormInformation.vue';
     import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
-    import { getApprovalProcess } from '/@/api/workflow/task';
+    import { getApprovalProcess, postApproval } from '/@/api/workflow/task';
     import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
     import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
     import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
+    import { separator } from '/@bpmn/config/info';
 
-    const { data, initProcessData } = userTaskItem();
+    const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
 
     const router = useRouter();
-    const { currentRoute } = router;
+    const currentRoute = router.currentRoute.value;
-    const rParams = currentRoute.value.query;
+    const rQuery = currentRoute.query;
-    //const schemaId = ref(rParams.schemaId);
+    const rParams = currentRoute.params;
-    const taskId = ref(rParams.taskId);
+    const schemaId = ref(rParams.arg1);
-    const processId = ref(rParams.processId);
+    const taskId = ref(rQuery.taskId);
+    const processId = ref(rParams.arg2);
     const renderKey = ref('');
     const formConfigs = ref();
     const opinionDlg = ref();
+    const validateSuccess = ref(false);
+    const formInformation = ref();
 
     let approvalData = reactive({
         isCountersign: false,
@@ -92,18 +96,44 @@
 
     function onMoreClick() {}
 
-    function onApproveClick() {
+    async function onApproveClick() {
+        await submit();
+        approvalData.approvedType = ApproveType.AGREE;
+        approvalData.approvedResult = ApproveCode.AGREE;
         opinionDlg.value.toggleDialog({
-            action: 'approve'
+            action: 'agree'
         });
     }
 
-    function onDenyClick() {
+    async function onDenyClick() {
+        approvalData.approvedType = ApproveType.REJECT;
+        approvalData.approvedResult = ApproveCode.REJECT;
         opinionDlg.value.toggleDialog({
-            action: 'deny'
+            action: 'reject',
+            processId: processId.value,
+            taskId: taskId.value,
+            callback: (args) => {
+                approvalData.approvedContent = args.opinion;
+                approvalData.rejectNodeActivityId = args.rejectNodeId;
+                onFinish({});
+            }
         });
     }
 
+    function reset() {
+        approvalData.isAddOrSubSign = false;
+        approvalData.stampInfo = {
+            stampId: '',
+            password: ''
+        };
+        approvalData.buttonConfigs = [];
+        approvalData.approvedType = ApproveType.AGREE;
+        approvalData.approvedContent = '';
+        approvalData.rejectNodeActivityId = '';
+        approvalData.rejectNodeActivityIds = [];
+        approvalData.circulateConfigs = [];
+    }
+
     onMounted(async () => {
         if (unref(taskId)) {
             try {
@@ -131,4 +161,100 @@
         } else {
         }
     });
+
+    async function submit() {
+        data.submitLoading = true;
+        validateSuccess.value = false;
+        try {
+            let validateForms = await formInformation.value.validateForm();
+            if (validateForms.length > 0) {
+                let successValidate = validateForms.filter((ele) => {
+                    return ele.validate;
+                });
+                if (successValidate.length == validateForms.length) {
+                    validateSuccess.value = true;
+                    data.submitLoading = false;
+                } else {
+                    data.submitLoading = false;
+                    notificationError(t('审批流程'), t('表单校验未通过'));
+                }
+            }
+        } catch (error) {
+            data.submitLoading = false;
+            notificationError(t('审批流程'), t('审批流程失败'));
+        }
+    }
+
+    function getUploadFileFolderIds(formModels) {
+        let fileFolderIds = [];
+        let uploadComponentIds = formInformation.value.getUploadComponentIds();
+        uploadComponentIds.forEach((ids) => {
+            if (ids.includes(separator)) {
+                let arr = ids.split(separator);
+                if (arr.length == 2 && formModels[arr[0]][arr[1]]) {
+                    fileFolderIds.push(formModels[arr[0]][arr[1]]);
+                } else if (arr.length == 3 && formModels[arr[0]][arr[1]] && Array.isArray(formModels[arr[0]][arr[1]])) {
+                    formModels[arr[0]][arr[1]].forEach((o) => {
+                        fileFolderIds.push(o[arr[2]]);
+                    });
+                }
+            }
+        });
+        return fileFolderIds;
+    }
+
+    async function onFinish(values) {
+        try {
+            if (/*validateSuccess.value*/ true) {
+                let formModels = await formInformation.value.getFormModels();
+                let system = formInformation.value.getSystemType();
+                let fileFolderIds = getUploadFileFolderIds(formModels);
+                let params = {
+                    approvedType: approvalData.approvedType,
+                    approvedResult: approvalData.approvedResult, // approvalData.approvedType 审批结果 如果为 4 就需要传buttonCode
+                    approvedContent: approvalData.approvedContent,
+                    formData: formModels,
+                    rejectNodeActivityId: approvalData.rejectNodeActivityId,
+                    taskId: taskId.value,
+                    fileFolderIds,
+                    circulateConfigs: approvalData.circulateConfigs,
+                    stampId: values.stampId,
+                    stampPassword: values.password,
+                    isOldSystem: system
+                };
+
+                let res = await postApproval(params);
+                // 下一节点审批人
+                let taskList = [];
+                if (res && res.length > 0) {
+                    taskList = res
+                        .filter((ele) => {
+                            return ele.isMultiInstance == false && ele.isAppoint == true;
+                        })
+                        .map((ele) => {
+                            return {
+                                taskId: ele.taskId,
+                                taskName: ele.taskName,
+                                provisionalApprover: ele.provisionalApprover,
+                                selectIds: []
+                            };
+                        });
+                    if (taskList.length > 0) {
+                        approveUserData.list = taskList;
+                        approveUserData.schemaId = props.schemaId;
+                        approveUserData.visible = true;
+                        data.submitLoading = false;
+                    } else {
+                        opinionDlg.value.toggleDialog({ isClose: true });
+                        data.submitLoading = false;
+                        save(true, t('审批流程'));
+                    }
+                } else {
+                    opinionDlg.value.toggleDialog({ isClose: true });
+                    data.submitLoading = false;
+                    save(true, t('审批流程'));
+                }
+            }
+        } catch (error) {}
+    }
 </script>

src/views/secondDev/createFlow.vue

@@ -71,10 +71,11 @@
 
     const { t } = useI18n();
     const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
-    const currentRoute = router.currentRoute;
+    const currentRoute = router.currentRoute.value;
-    const rParams = currentRoute.value.query;
+    const rParams = currentRoute.params;
-    const rSchemaId = rParams.schemaId;
+    const fullPath = currentRoute.fullPath;
-    const rDraftsId = rParams.draftsId;
+    const rSchemaId = rParams.arg1;
+    const rDraftsId = rParams.arg2;
     const draftsJsonStr = localStorage.getItem('draftsJsonStr');
     let formInformation = ref();
     let pageMode = 'new';
@@ -147,9 +148,8 @@
                 let res = await getStartProcessInfo(rSchemaId);
                 const title = res?.schemaInfo?.name;
                 if (title) {
-                    const tabKey = `${pageMode}_${pageMode === 'new' ? rSchemaId : rDraftsId}`;
                     const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
-                    tabStore.changeTitle(tabKey, `${tabPrefix}：${title}`);
+                    tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
                 }
                 initProcessData(res);
             }
@@ -179,7 +179,7 @@
         try {
             disableSubmit.value = true;
             let formModels = await formInformation.value.saveDraftData();
-            if (rDraftsId) {
+            if (rDraftsId !== '0') {
                 let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
                 showResult(res, t('保存草稿'));
             } else {

src/views/secondDev/processTasksPage.vue

@@ -94,17 +94,16 @@
     ];
     const selectedKeys = ref(['ToDoTasks']);
     const query = unref(currentRoute).query;
-    let id = query.name;
+    let id = 'ToDoTasks';
-    const tabKey = query.tabKey as string;
+    const lHash = location.hash;
+    if (lHash.indexOf('/draft') > 0) {
+        id = 'Drafts';
+    }
     let data = reactive({
         componentName: shallowRef(ToDoTasks)
     });
     if (id) {
         selectedKeys.value = [id.toString()];
-        const tabName = treeData.find((item) => item.id === id)?.name;
-        if (tabName && tabKey) {
-            tabStore.changeTitle(tabKey, tabName);
-        }
         handleSelect([id]);
     }
 

src/views/workflow/task/FlowLaunch.vue

@@ -1,42 +1,15 @@
 <template>
-  <PageLayout
+    <PageLayout :layoutClass="currentRoute.path == '/workflow/launch' ? '!p-2' : currentRoute.path == '/task/processtasks' ? '!p-0 !pr-7px' : ''" :searchConfig="searchConfig" :title="t('流程模板列表')" @search="search" @scroll-height="scrollHeight">
-    :layoutClass="
-      currentRoute.path == '/workflow/launch'
-        ? '!p-2'
-        : currentRoute.path == '/task/processtasks'
-        ? '!p-0 !pr-7px'
-        : ''
-    "
-    :searchConfig="searchConfig"
-    :title="t('流程模板列表')"
-    @search="search"
-    @scroll-height="scrollHeight"
-  >
         <template #left>
-      <BasicTree
+            <BasicTree :clickRowToExpand="true" :fieldNames="{ key: 'id', title: 'name' }" :title="t('流程模板分类')" :treeData="data.treeData" search @select="handleSelect" />
-        :clickRowToExpand="true"
-        :fieldNames="{ key: 'id', title: 'name' }"
-        :title="t('流程模板分类')"
-        :treeData="data.treeData"
-        search
-        @select="handleSelect"
-      />
         </template>
 
         <template #search></template>
 
         <template #right>
-      <div
+            <div v-if="data.list.length > 0" :style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }">
-        v-if="data.list.length > 0"
-        :style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }"
-      >
                 <div class="list-page-box">
-          <TemplateCard
+                    <TemplateCard v-for="(item, index) in data.list" :key="index" :item="item" @click="launchProcessInTab(item.id)" />
-            v-for="(item, index) in data.list"
-            :key="index"
-            :item="item"
-            @click="launchProcessInTab(item.id)"
-          />
                 </div>
                 <div class="page-box">
                     <a-pagination
@@ -54,11 +27,7 @@
             <div v-else>
                 <EmptyBox />
             </div>
-      <LaunchProcess
+            <LaunchProcess v-if="visibleLaunchProcess" :schemaId="data.schemaId" @close="visibleLaunchProcess = false" />
-        v-if="visibleLaunchProcess"
-        :schemaId="data.schemaId"
-        @close="visibleLaunchProcess = false"
-      />
         </template>
     </PageLayout>
 </template>
@@ -85,13 +54,13 @@
         {
             field: 'code',
             label: t('模板编码'),
-      type: 'input',
+            type: 'input'
         },
         {
             field: 'name',
             label: t('模板名称'),
-      type: 'input',
+            type: 'input'
-    },
+        }
     ];
     const { tableOptions, scrollHeight } = userTableScrollHeight();
     let visibleLaunchProcess = ref(false);
@@ -109,8 +78,8 @@
         pagination: {
             current: 1,
             total: 0,
-      pageSize: 18,
+            pageSize: 18
-    },
+        }
     });
 
     watch(
@@ -118,7 +87,7 @@
         (val) => {
             if (val.path == '/workflow/launch') init();
         },
-    { deep: true },
+        { deep: true }
     );
     onMounted(() => {
         getCategoryTree();
@@ -134,7 +103,7 @@
 
     async function getCategoryTree() {
         let res = (await getDicDetailList({
-      itemId: FlowCategory.ID,
+            itemId: FlowCategory.ID
         })) as unknown as TreeItem[];
         data.treeData = res.map((ele) => {
             ele.icon = 'ant-design:tags-outlined';
@@ -146,11 +115,11 @@
         const searchParams = {
             ...{
                 limit: data.pagination.current,
-        size: data.pagination.pageSize,
+                size: data.pagination.pageSize
             },
             ...{ category: data.selectDeptId },
             ...params,
-      ...{ enabledMark: 1 }, // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
+            ...{ enabledMark: 1 } // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
         };
 
         try {
@@ -165,20 +134,15 @@
         getList();
     }
 
-  /*
     async function launchProcess(id: string) {
+        // 旧版弹窗界面 便于调试
         data.schemaId = id;
         visibleLaunchProcess.value = true;
     }
-*/
 
     function launchProcessInTab(id: string) {
         router.push({
-      path: '/flow/createFlow',
+            path: `/flow/${id}/0/createFlow`
-      query: {
-        schemaId: id,
-        tabKey: 'new_' + id,
-      },
         });
     }
 

src/views/workflow/task/components/processTasks/DraftsV2.vue

@@ -96,12 +96,7 @@
             processData.visible = true;*/
             localStorage.setItem('draftsJsonStr', res.formData);
             router.push({
-                path: '/flow/createFlow',
+                path: `/flow/${res.schemaId}/${record.id}/createFlow`
-                query: {
-                    schemaId: res.schemaId,
-                    draftsId: record.id,
-                    tabKey: 'draft_' + record.id
-                }
             });
         } catch (error) {}
     }

src/views/workflow/task/components/processTasks/ToDoTasksV2.vue

@@ -136,12 +136,9 @@
     const onRowDblClick = (record, index) => {
         const { processId, taskId, schemaId } = record;
         router.push({
-            path: "/flow/approveFlow",
+            path: `/flow/${schemaId}/${processId}/approveFlow`,
             query: {
-                schemaId,
+                taskId
-                taskId,
-                processId,
-                tabKey: "approve_" + taskId
             }
         });
     };