fix: 修复新建流程页面，用户取消后无法再次提交的bug

src/components/SystemForm/src/Form.vue

@@ -169,13 +169,13 @@
   async function setFieldsValue(record) {
     flowConfig.draftsFormData = record;
   }
-  async function workflowSubmit() {
+  async function workflowSubmit(saveRowKey) {
     let values = {};
     try {
       values = await SystemFormRef.value.validate();
       // 提交表单
       if (visible.value) {
-        let id = await submit();
+        let id = await submit(saveRowKey);
         let rowKey = getRowKey();
         values[rowKey] = id;
         values['_id'] = id
@@ -184,7 +184,7 @@
       return values;
     } catch (error) {}
   }
-  async function submit() {
+  async function submit(saveRowKey) {
     let saveValId = '';
     let values = await SystemFormRef.value.validate();
     let rowKey = getRowKey();
@@ -198,6 +198,10 @@
     } else {
       // 新增
       saveValId = await SystemFormRef.value.add(values);
+      if (saveRowKey) {
+        // 把rowKey写回去，新建流程的时候防止取消了重复提交
+        props.workflowConfig.formModel[rowKey] = saveValId;
+      }
     }
     return saveValId;
   }

src/views/secondDev/FormInformation.vue

@@ -239,13 +239,13 @@
         return formModes;
     }
 
-    async function getFormModels() {
+    async function getFormModels(saveRowKey) {
         let formModes = {};
 
         for (let index = 0; index < forms.configs.length; index++) {
             const ele = forms.configs[index];
             if (ele.formType == FormType.SYSTEM) {
-                let values = await itemRefs.value[index].workflowSubmit();
+                let values = await itemRefs.value[index].workflowSubmit(saveRowKey);
                 formModes[ele.formKey] = values;
             } else {
                 formModes[ele.formKey] = ele.formModel;

src/views/secondDev/createFlow.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="page-bg-wrap">
-        <a-spin tip="Loading..." :spinning="loading">
+        <a-spin :spinning="loading" tip="加载中...">
             <div class="geg-flow-page">
                 <div class="top-toolbar">
                     <a-space :size="10" wrap>
@@ -10,7 +10,7 @@
                             </slot>
                             关闭
                         </a-button>
-                        <a-button type="primary" :disabled="data.submitLoading" @click="saveLaunch">
+                        <a-button :disabled="data.submitLoading" type="primary" @click="saveLaunch">
                             <slot name="icon">
                                 <send-outlined />
                             </slot>
@@ -37,9 +37,7 @@
                     </a-space>
                 </div>
                 <div class="flow-content">
-                    <FormInformation :key="randKey" ref="formInformation" :disabled="false"
+                    <FormInformation :key="randKey" ref="formInformation" :disabled="false" :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos" :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
-                        :formAssignmentData="data.formAssignmentData" :formInfos="data.formInfos"
-                        :opinions="data.opinions" :opinionsComponents="data.opinionsComponents" />
                 </div>
             </div>
             <a-modal :visible="showFlowChart" centered class="geg" closable title="流程图" width="1200px">
@@ -54,311 +52,317 @@
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
+    import { useRouter } from 'vue-router';
-import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
+    import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
-import FormInformation from '/@/views/secondDev/FormInformation.vue';
+    import FormInformation from '/@/views/secondDev/FormInformation.vue';
-import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
+    import ProcessInformation from '/@/views/workflow/task/components/flow/ProcessInformation.vue';
-import { getStartProcessInfo, getReStartProcessInfo, reLaunch, postLaunch, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
+    import { getStartProcessInfo, getReStartProcessInfo, reLaunch, postLaunch, postApproval, postGetNextTaskMaybeArrival } from '/@/api/workflow/task';
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
+    import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
+    import { CloseOutlined, SendOutlined, ClockCircleOutlined, PrinterOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
-import { nextTick, onMounted, ref, toRaw, reactive } from 'vue';
+    import { nextTick, onMounted, ref, toRaw, reactive } from 'vue';
-import { postDraft, putDraft } from '/@/api/workflow/process';
+    import { postDraft, putDraft } from '/@/api/workflow/process';
-import { useI18n } from '/@/hooks/web/useI18n';
+    import { useI18n } from '/@/hooks/web/useI18n';
-import { separator } from '/@bpmn/config/info';
+    import { separator } from '/@bpmn/config/info';
-import { message } from 'ant-design-vue';
+    import { message } from 'ant-design-vue';
-import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
+    import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
-import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
+    import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
-import useEventBus from '/@/hooks/event/useEventBus';
+    import useEventBus from '/@/hooks/event/useEventBus';
 
-const { bus, CREATE_FLOW } = useEventBus();
+    const { bus, CREATE_FLOW } = useEventBus();
 
-const router = useRouter();
+    const router = useRouter();
-const tabStore = useMultipleTabStore();
+    const tabStore = useMultipleTabStore();
 
-const { t } = useI18n();
+    const { t } = useI18n();
-const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
+    const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
-const currentRoute = router.currentRoute.value;
+    const currentRoute = router.currentRoute.value;
-const rParams = currentRoute.params;
+    const rParams = currentRoute.params;
-const fullPath = currentRoute.fullPath;;
+    const fullPath = currentRoute.fullPath;
-const rSchemaId = rParams.arg1;
+    const rSchemaId = rParams.arg1;
-const rDraftsId = rParams.arg2;
+    const rDraftsId = rParams.arg2;
-const taskId = ref();
+    const taskId = ref();
-const loading = ref(false)
+    const loading = ref(false);
-const draftsJsonStr = localStorage.getItem('draftsJsonStr');
+    const draftsJsonStr = localStorage.getItem('draftsJsonStr');
-let formInformation = ref();
+    let formInformation = ref();
-const opinionDlg = ref();
+    const opinionDlg = ref();
-let pageMode = 'new';
+    let pageMode = 'new';
-const showFlowChart = ref(false);
+    const showFlowChart = ref(false);
-const disableSubmit = ref(false);
+    const disableSubmit = ref(false);
-const mainFormModels = ref();
+    const mainFormModels = ref();
-let randKey = ref('randkey'); // 强制表单重新渲染
+    let randKey = ref('randkey'); // 强制表单重新渲染
-let approvalData = reactive({
+    let approvalData = reactive({
-    isCountersign: false,
+        isCountersign: false,
-    isAddOrSubSign: false,
+        isAddOrSubSign: false,
-    stampInfo: {
+        stampInfo: {
-        stampId: '',
+            stampId: '',
-        password: ''
+            password: ''
-    },
+        },
-    buttonConfigs: [],
+        buttonConfigs: [],
-    approvedType: ApproveType.AGREE,
+        approvedType: ApproveType.AGREE,
-    approvedResult: ApproveCode.AGREE,
+        approvedResult: ApproveCode.AGREE,
-    approvedContent: '',
+        approvedContent: '',
-    rejectNodeActivityId: '',
+        rejectNodeActivityId: '',
-    rejectNodeActivityIds: [],
+        rejectNodeActivityIds: [],
-    circulateConfigs: [],
+        circulateConfigs: [],
-    nextTaskUser: {} // 格式为taskKey: 用户id（逗号分隔）
+        nextTaskUser: {} // 格式为taskKey: 用户id（逗号分隔）
-});
+    });
 
-if (draftsJsonStr) {
-    localStorage.removeItem('draftsJsonStr');
-    pageMode = 'draft';
-}
-
-function closeFlowChart() {
-    showFlowChart.value = false;
-}
-
-function openFlowChart() {
-    showFlowChart.value = true;
-}
-
-function close() {
-    tabStore.closeTab(currentRoute, router);
-}
-
-const props = defineProps({
-    rowKeyData: {
-        type: String
-    }
-});
-
-onMounted(async () => {
-    try {
-        // 发起流程
-        let res = await getStartProcessInfo(rSchemaId);
-        const title = res?.schemaInfo?.name;
-        if (title) {
-            const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
-            tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
-        }
-        initProcessData(res);
-    } catch (error) { }
-    randKey.value = Math.random() + '';
-    // 这里的顺序不能变 表单不渲染的时候 设置表单初值没用
-    await nextTick();
-    await initDraftsFormData();
-});
-
-async function initDraftsFormData() {
-    //isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
     if (draftsJsonStr) {
-        let formDataJson = JSON.parse(draftsJsonStr);
+        localStorage.removeItem('draftsJsonStr');
-        let formData = [];
+        pageMode = 'draft';
+    }
 
-        data.formInfos.forEach((item) => {
+    function closeFlowChart() {
-            if (formDataJson && item.formConfig && item.formConfig.key && formDataJson[item.formConfig.key]) {
+        showFlowChart.value = false;
-                formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
+    }
+
+    function openFlowChart() {
+        showFlowChart.value = true;
+    }
+
+    function close() {
+        tabStore.closeTab(currentRoute, router);
+    }
+
+    const props = defineProps({
+        rowKeyData: {
+            type: String
+        }
+    });
+
+    onMounted(async () => {
+        try {
+            // 发起流程
+            let res = await getStartProcessInfo(rSchemaId);
+            const title = res?.schemaInfo?.name;
+            if (title) {
+                const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
+                tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
+            }
+            initProcessData(res);
+        } catch (error) {}
+        randKey.value = Math.random() + '';
+        // 这里的顺序不能变 表单不渲染的时候 设置表单初值没用
+        await nextTick();
+        await initDraftsFormData();
+    });
+
+    async function initDraftsFormData() {
+        //isPublish.value = Object.keys(data.formInfos).length > 0 ? false : true;
+        if (draftsJsonStr) {
+            let formDataJson = JSON.parse(draftsJsonStr);
+            let formData = [];
+
+            data.formInfos.forEach((item) => {
+                if (formDataJson && item.formConfig && item.formConfig.key && formDataJson[item.formConfig.key]) {
+                    formData.push(item.formConfig.key ? formDataJson[item.formConfig.key] : {});
+                }
+            });
+            await formInformation.value.setFormData(formData);
+        }
+    }
+
+    async function saveDraft() {
+        try {
+            disableSubmit.value = true;
+            let formModels = await formInformation.value.saveDraftData();
+            if (rDraftsId !== '0') {
+                let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
+                showResult(res, '保存草稿');
+            } else {
+                let res = await postDraft(rSchemaId, formModels, props.rowKeyData);
+                showResult(res, '保存草稿');
+            }
+        } catch (error) {
+            notificationError('保存草稿');
+        }
+    }
+
+    function showResult(res, title) {
+        if (res) {
+            notificationSuccess(title);
+        } else {
+            notificationError(title);
+        }
+    }
+
+    function createFlowSuccess(taskList) {
+        /*opinionDlg.value.toggleDialog({
+            isClose: true
+        });*/
+        if (taskList) {
+            approvalCreate();
+        } else {
+            message.success('流程发起成功');
+
+            data.submitLoading = false;
+            loading.value = false;
+            setTimeout(() => {
+                bus.emit(CREATE_FLOW, {});
+                close();
+            }, 500);
+        }
+    }
+
+    async function approvalCreate() {
+        const params = await getApproveParams();
+        const nextNodes = await postGetNextTaskMaybeArrival(params);
+        opinionDlg.value.toggleDialog({
+            action: 'agree',
+            nextNodes,
+            rejectCancel: () => {
+                loading.value = false;
+                data.submitLoading = false;
+            },
+            callback: (args) => {
+                approvalData.approvedContent = args.opinion;
+                approvalData.nextTaskUser = args.nextTaskUser;
+                onFinish({});
             }
         });
-        await formInformation.value.setFormData(formData);
     }
-}
 
-async function saveDraft() {
+    function flowSuccess() {
-    try {
+        opinionDlg.value.toggleDialog({
-        disableSubmit.value = true;
+            isClose: true
-        let formModels = await formInformation.value.saveDraftData();
+        });
-        if (rDraftsId !== '0') {
+        message.success('操作成功');
-            let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
-            showResult(res, '保存草稿');
-        } else {
-            let res = await postDraft(rSchemaId, formModels, props.rowKeyData);
-            showResult(res, '保存草稿');
-        }
-    } catch (error) {
-        notificationError('保存草稿');
-    }
-}
-
-function showResult(res, title) {
-    if (res) {
-        notificationSuccess(title);
-    } else {
-        notificationError(title);
-    }
-}
-
-
-function createFlowSuccess(taskList) {
-    /*opinionDlg.value.toggleDialog({
-        isClose: true
-    });*/
-    if (taskList) {
-        approvalCreate();
-    } else {
-        message.success('流程发起成功');
-
-        data.submitLoading = false;
-        loading.value = false
         setTimeout(() => {
             bus.emit(CREATE_FLOW, {});
             close();
         }, 500);
     }
 
-}
+    function flowFail() {
-async function approvalCreate() {
+        opinionDlg.value.stopLoading();
-    const params = await getApproveParams();
-    let fileFolderIds = getUploadFileFolderIds(mainFormModels.value);
-    let system = formInformation.value.getSystemType();
-    const nextNodes = await postGetNextTaskMaybeArrival(params);
-    opinionDlg.value.toggleDialog({
-        action: 'agree',
-        nextNodes,
-        rejectCancel: () => {
-            loading.value = false;
-        },
-        callback: (args) => {
-            approvalData.approvedContent = args.opinion;
-            approvalData.nextTaskUser = args.nextTaskUser;
-            onFinish({});
-        }
-    });
-}
-function flowSuccess() {
-    opinionDlg.value.toggleDialog({
-        isClose: true
-    });
-    message.success('操作成功');
-    setTimeout(() => {
-        bus.emit(CREATE_FLOW, {});
-        close();
-    }, 500);
-}
-function flowFail() {
-    opinionDlg.value.stopLoading();
-}
-async function onFinish(values) {
-    try {
-        if (/*validateSuccess.value*/ true) {
-            let params = await getApproveParams();
-            await postApproval(params);
-            flowSuccess();
-            data.submitLoading = false;
-            loading.value = false
-        }
-    } catch (error) {
-        flowFail();
     }
-}
-async function getApproveParams() {
-    let formModels = mainFormModels.value;
-    let system = formInformation.value.getSystemType();
-    let fileFolderIds = getUploadFileFolderIds(formModels);
-    return {
-        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,
-        nextTaskUser: approvalData.nextTaskUser
-    };
-}
 
-async function saveLaunch() {
+    async function onFinish(values) {
-    data.submitLoading = true;
+        try {
-    loading.value = true
+            if (/*validateSuccess.value*/ true) {
-    try {
+                let params = await getApproveParams();
-        let validateForms = await formInformation.value.validateForm();
+                await postApproval(params);
+                flowSuccess();
+                data.submitLoading = false;
+                loading.value = false;
+            }
+        } catch (error) {
+            flowFail();
+        }
+    }
+
+    async function getApproveParams() {
+        let formModels = mainFormModels.value;
         let system = formInformation.value.getSystemType();
+        let fileFolderIds = getUploadFileFolderIds(formModels);
+        return {
+            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,
+            nextTaskUser: approvalData.nextTaskUser
+        };
+    }
 
-        if (validateForms.length > 0) {
+    async function saveLaunch() {
-            let successValidate = validateForms.filter((ele) => {
+        data.submitLoading = true;
-                return ele.validate;
+        loading.value = true;
-            });
+        try {
-            if (successValidate.length == validateForms.length) {
+            let validateForms = await formInformation.value.validateForm();
-                mainFormModels.value = await formInformation.value.getFormModels();
+            let system = formInformation.value.getSystemType();
-                for (let i in mainFormModels.value) {
+
-                    const item = mainFormModels.value[i]
+            if (validateForms.length > 0) {
-                    if (!item['_id']) {
+                let successValidate = validateForms.filter((ele) => {
-                        throw new Error('发起失败');
+                    return ele.validate;
-                    } else {
+                });
-                        delete item['_id']
+                if (successValidate.length == validateForms.length) {
+                    mainFormModels.value = await formInformation.value.getFormModels(true);
+                    for (let i in mainFormModels.value) {
+                        const item = mainFormModels.value[i];
+                        if (!item['_id']) {
+                            throw new Error('发起失败');
+                        } else {
+                            delete item['_id'];
+                        }
                     }
-                }
+                    let relationTasks = [];
-                let relationTasks = [];
+                    if (data.predecessorTasks && data.predecessorTasks.length > 0) {
-                if (data.predecessorTasks && data.predecessorTasks.length > 0) {
+                        relationTasks = data.predecessorTasks.map((ele) => {
-                    relationTasks = data.predecessorTasks.map((ele) => {
+                            return { taskId: ele.taskId, schemaId: ele.schemaId };
-                        return { taskId: ele.taskId, schemaId: ele.schemaId };
-                    });
-                }
-                let fileFolderIds = getUploadFileFolderIds(mainFormModels.value);
-                //如果传入了processId  代表是重新发起流程
-                let res;
-                res = await postLaunch(rSchemaId, mainFormModels.value, relationTasks, fileFolderIds, system);
-
-                // 下一节点审批人
-                let taskList = [];
-                if (res && res.length > 0) {
-                    taskId.value = res[0].taskId
-                    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) {
+                    }
-                        notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
+                    let fileFolderIds = getUploadFileFolderIds(mainFormModels.value);
-                        data.submitLoading = false;
+                    if (taskId.value) {
-                        loading.value = false
+                        // 如果在草稿节点取消，重新从草稿开始走
+                        return createFlowSuccess(true);
+                    }
+                    //如果传入了processId  代表是重新发起流程
+                    let res;
+                    res = await postLaunch(rSchemaId, mainFormModels.value, relationTasks, fileFolderIds, system);
+
+                    // 下一节点审批人
+                    let taskList = [];
+                    if (res && res.length > 0) {
+                        taskId.value = res[0].taskId;
+                        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) {
+                            notificationError('提交失败', '流程设计错误，开始后的第一个节点必须是审批人为发起人的起草节点。');
+                            data.submitLoading = false;
+                            loading.value = false;
+                        } else {
+                            createFlowSuccess(taskList);
+                        }
                     } else {
-                        createFlowSuccess(taskList);
+                        createFlowSuccess();
                     }
                 } else {
-                    createFlowSuccess();
+                    data.submitLoading = false;
+                    notificationError(t('发起流程'), t('表单校验未通过'));
+                    loading.value = false;
                 }
-            } else {
-                data.submitLoading = false;
-                notificationError(t('发起流程'), t('表单校验未通过'));
-                loading.value = false
             }
+        } catch (error) {
+            data.submitLoading = false;
+            loading.value = false;
+            notificationError(t('发起流程'), t('发起流程失败'));
         }
-    } catch (error) {
-        data.submitLoading = false;
-        loading.value = false
-        notificationError(t('发起流程'), t('发起流程失败'));
     }
-}
 
-function getUploadFileFolderIds(formModels) {
+    function getUploadFileFolderIds(formModels) {
-    let fileFolderIds = [];
+        let fileFolderIds = [];
-    let uploadComponentIds = formInformation.value.getUploadComponentIds();
+        let uploadComponentIds = formInformation.value.getUploadComponentIds();
-    uploadComponentIds.forEach((ids) => {
+        uploadComponentIds.forEach((ids) => {
-        if (ids.includes(separator)) {
+            if (ids.includes(separator)) {
-            let arr = ids.split(separator);
+                let arr = ids.split(separator);
-            if (arr.length == 2 && formModels[arr[0]][arr[1]]) {
+                if (arr.length == 2 && formModels[arr[0]][arr[1]]) {
-                fileFolderIds.push(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]])) {
+                } else if (arr.length == 3 && formModels[arr[0]][arr[1]] && Array.isArray(formModels[arr[0]][arr[1]])) {
-                formModels[arr[0]][arr[1]].forEach((o) => {
+                    formModels[arr[0]][arr[1]].forEach((o) => {
-                    fileFolderIds.push(o[arr[2]]);
+                        fileFolderIds.push(o[arr[2]]);
-                });
+                    });
+                }
             }
-        }
+        });
-    });
+        return fileFolderIds;
-    return fileFolderIds;
+    }
-}
 </script>
 
 <style lang="less"></style>

src/views/workflow/task/components/flow/FormInformation.vue

@@ -300,13 +300,13 @@
     }
     return formModes;
   }
-  async function getFormModels() {
+  async function getFormModels(saveRowKey) {
     let formModes = {};
 
     for (let index = 0; index < forms.configs.length; index++) {
       const ele = forms.configs[index];
       if (ele.formType == FormType.SYSTEM) {
-        let values = await itemRefs.value[index].workflowSubmit();
+        let values = await itemRefs.value[index].workflowSubmit(saveRowKey);
         formModes[ele.formKey] = values;
       } else {
         formModes[ele.formKey] = ele.formModel;