chore: Optimizing

src/views/workflow/task/TaskForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="prefixCls">
+  <div v-loading="state.loading" :class="prefixCls">
     <ALayoutContent class="m-10">
       <h4 class="text-center text-lg pb-2">{{ state.formTitle }}</h4>
       <ATables v-model:activeKey="state.taskSelectedTab"
@@ -197,6 +197,8 @@
 
   /** 类型规范统一声明定义区域 */
   interface WindowState {
+    // 加载
+    loading: boolean;
     // 流程表单标题
     formTitle: string;
     // 流程表单key
@@ -267,6 +269,7 @@
   const { getIsMobile } = useAppInject();
   const { getCalcContentWidth } = useMenuSetting();
   const state = reactive<WindowState>({
+    loading: false,
     formTitle: '',
     formKey: '',
     formType: '',
@@ -381,6 +384,8 @@
 
   /** 流程抄送 */
   async function cc(data: Recordable) {
+    state.loading = true;
+    try {
       if (state.isCC && state.auditForm.userIds) {
         await auditForm.value.validate();
         await saveWorkflowCopy(state.auditForm.userIds.join(','), {
@@ -391,21 +396,31 @@
           taskName: ''
         });
       }
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 暂存草稿 */
   function save() {
+    state.loading = true;
+    try {
       notification.warn({
         message: '提示',
         description: '功能正在开发中...'
       });
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 启动流程 */
-  function start(vars: Recordable) {
+  async function start(vars: Recordable) {
+    state.loading = true;
+    try {
       // 外置表单
       if (state.formType === '2') {
-      formPreview.value.startProcessDefinition(async (businessTable: string, businessId: string) => {
+        await formPreview.value.startProcessDefinition(async (businessTable: string, businessId: string) => {
           const processInsId = await startProcessDefinition({
             processDefKey: state.processDefKey,
             businessTable: businessTable,
@@ -418,12 +433,15 @@
         });
       // 动态表单
       } else {
-      formPreview.value.startFormProcessDefinition({ processDefId: state.processDefId, ...vars }, async (processInsId: string) => {
+        await formPreview.value.startFormProcessDefinition({ processDefId: state.processDefId, ...vars }, async (processInsId: string) => {
           await cc({ processInsId });
           await close();
           await push({ path: PageEnum.TODO_TASK_PAGE });
         });
       }
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 同意任务 */
@@ -504,7 +522,12 @@
 
   /** 打印 */
   function print() {
+    state.loading = true;
+    try {
       console.warn('---工作流表单打印成功,此处可以做一些打印回调逻辑处理!---');
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 驳回到任意节点 */
@@ -514,26 +537,38 @@
 
   /** 加签 */
   function addMultiInstance() {
+    state.loading = true;
+    try {
       // flowable开源版加签会导致模板数量急剧扩大,需要经过内部讨论是否有比较好的解决方案:http://www.pangubpm.com/doc58.html
       notification.warn({
         message: '提示',
         description: '功能正在开发中...'
       });
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 减签 */
   function delMultiInstance () {
+    state.loading = true;
+    try {
       notification.warn({
         message: '提示',
         description: '功能正在开发中...'
       });
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 自定义按钮提交 */
-  function commit(vars?: Recordable) {
+  async function commit(vars?: Recordable) {
+    state.loading = true;
+    try {
       // 外置表单审批
       if (state.formType === '2') {
-      formPreview.value.auditTask(async () => {
+        await formPreview.value.auditTask(async () => {
           await auditTask({
             taskId: state.taskId,
             taskDefKey: state.taskDefKey,
@@ -549,7 +584,7 @@
         });
       // 动态表单审批
       } else {
-      formPreview.value.auditFormTask({
+        await formPreview.value.auditFormTask({
           formType: '',
           taskId: state.taskId,
           processInsId: state.processInsId,
@@ -562,10 +597,15 @@
           await push({ path: PageEnum.TODO_TASK_PAGE });
         });
       }
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 处理回退到任意节点 */
   async function handleRollBackTask(backTaskDefKey: string) {
+    state.loading = true;
+    try {
       await rejectTask({
         currentTaskId: state.taskId,
         rollBackTaskDefKey: backTaskDefKey,
@@ -574,26 +614,38 @@
       await cc({ processInsId: state.processInsId });
       await close();
       await push({ path: PageEnum.TODO_TASK_PAGE });
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 处理转派任务 */
   async function handleTransferTask(userList: KiccUser[]) {
+    state.loading = true;
+    try {
       await transferTask( state.taskId, userList[0].id);
       await cc({ processInsId: state.processInsId });
       await close();
       await push({ path: PageEnum.TODO_TASK_PAGE });
+    } finally {
+      state.loading = false;
+    }
   }
 
   /** 处理任务委派 */
   async function handleDelegateTask(userList: KiccUser[]) {
+    state.loading = true;
+    try {
       await delegateTask(state.taskId, userList[0].id);
       await cc({ processInsId: state.processInsId });
       await close();
       await push({ path: PageEnum.TODO_TASK_PAGE });
+    } finally {
+      state.loading = false;
+    }
   }
 
-  async function submit(button: Partial<WorkflowButton>) {
-    await appStore.setPageLoadingAction(true);
+  function submit(button: Partial<WorkflowButton>) {
     // 设置流程变量
     const vars: Recordable = {};
     // 流程表单标题
@@ -652,7 +704,6 @@
         // 自定义按钮提交
       default:
         commit(vars);
-      await appStore.setPageLoadingAction(false);
     }
   }
 
@@ -682,7 +733,7 @@
         transition: inline-block 0.3s, left 0.3s, width 0.3s, margin-left 0.3s, font-size 0.3s;
         position: fixed;
         bottom: 0;
-        z-index: @page-footer-z-index;
+        z-index: 9;
       }
     }
   }

src/views/workflow/task/popups/UserPicker/index.vue

@@ -92,7 +92,7 @@
     await handleRefreshTable();
     // 处理设置数据
     state.tag = data._tag;
-    const { ids, emitEventName } = data.record as Recordable;
+    const { ids, emitEventName } = data.record || {};
     isArray(ids) && setSelectedRowKeys(ids);
     const modalProps: Partial<ModalProps> = { title: props.title };
     state.emitEventName = emitEventName || 'success';