feat: [antd]->[bpm] 代码评审修改 20%

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -154,13 +154,17 @@ function handleModelSort() {
 
 /** 处理模型的排序提交 */
 async function handleModelSortSubmit() {
-  // TODO @jason：loading 加一下，体验好点。
+  // 确保数据已经正确同步
+  if (!modelList.value || modelList.value.length === 0) {
+    message.error('排序数据异常，请重试');
+    return;
+  }
+
+  const hideLoading = message.loading({
+    content: '正在保存排序...',
+    duration: 0,
+  });
   try {
-    // 确保数据已经正确同步
-    if (!modelList.value || modelList.value.length === 0) {
-      message.error('排序数据异常，请重试');
-      return;
-    }
     // 保存排序
     const ids = modelList.value.map((item) => item.id);
     await updateModelSortBatch(ids);
@@ -170,6 +174,8 @@ async function handleModelSortSubmit() {
     emit('success');
   } catch (error) {
     console.error('排序保存失败', error);
+  } finally {
+    hideLoading();
   }
 }
 
@@ -207,18 +213,29 @@ async function handleDeleteCategory() {
     return;
   }
 
-  // TODO @jason：改成 await；然后增加一个 loading；
-  confirm({
+  await confirm({
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      // 发起删除
+      const hideLoading = message.loading({
+        content: `正在删除分类: "${props.categoryInfo.name}"...`,
+        duration: 0,
+      });
+      try {
+        await deleteCategory(props.categoryInfo.id);
+      } finally {
+        hideLoading();
+      }
+      return true;
+    },
     content: `确定要删除[${props.categoryInfo.name}]吗？`,
-  }).then(async () => {
-    // 发起删除
-    await deleteCategory(props.categoryInfo.id);
-    message.success(
-      $t('ui.actionMessage.deleteSuccess', [props.categoryInfo.name]),
-    );
-    // 刷新列表
-    emit('success');
+    icon: 'question',
   });
+  message.success(
+    $t('ui.actionMessage.deleteSuccess', [props.categoryInfo.name]),
+  );
+  // 刷新列表
+  emit('success');
 }
 
 /** 处理表单详情点击 */
@@ -249,21 +266,27 @@ async function modelOperation(type: string, id: number) {
 
 /** 发布流程 */
 async function handleDeploy(row: any) {
-  // TODO @jason：改成 await；然后增加一个 loading；
-  confirm({
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起部署
-      await deployModel(row.id);
+      const hideLoading = message.loading({
+        content: `正在发布流程: "${row.name}"...`,
+        duration: 0,
+      });
+      try {
+        await deployModel(row.id);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要发布[${row.name}]流程吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`发布[${row.name}]流程成功`);
-    // 刷新列表
-    emit('success');
   });
+  message.success(`发布[${row.name}]流程成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** '更多'操作按钮 */
@@ -300,63 +323,82 @@ function handleModelCommand(command: string, row: any) {
 }
 
 /** 更新状态操作 */
-function handleChangeState(row: any) {
+async function handleChangeState(row: any) {
   const state = row.processDefinition.suspensionState;
   const newState = state === 1 ? 2 : 1;
   const statusState = state === 1 ? '停用' : '启用';
-  // TODO @jason：改成 await；然后增加一个 loading；
-  confirm({
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起更新状态
-      await updateModelState(row.id, newState);
+      const hideLoading = message.loading({
+        content: `正在${statusState}流程: "${row.name}"...`,
+        duration: 0,
+      });
+      try {
+        await updateModelState(row.id, newState);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要${statusState}流程: "${row.name}" 吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`${statusState} 流程: "${row.name}" 成功`);
-    // 刷新列表
-    emit('success');
   });
+  message.success(`${statusState} 流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** 清理流程操作 */
-function handleClean(row: any) {
-  // TODO @jason：改成 await；然后增加一个 loading；
-  confirm({
+async function handleClean(row: any) {
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起清理操作
-      await cleanModel(row.id);
+      const hideLoading = message.loading({
+        content: `正在清理流程: "${row.name}"...`,
+        duration: 0,
+      });
+      try {
+        await cleanModel(row.id);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要清理流程: "${row.name}" 吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`清理流程: "${row.name}" 成功`);
-    // 刷新列表
-    emit('success');
   });
+  message.success(`清理流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** 删除流程操作 */
-function handleDelete(row: any) {
-  // TODO @jason：改成 await；然后增加一个 loading；
-  confirm({
+async function handleDelete(row: any) {
+  await confirm({
     beforeClose: async ({ isConfirm }) => {
       if (!isConfirm) return;
       // 发起删除操作
-      await deleteModel(row.id);
+      const hideLoading = message.loading({
+        content: $t('ui.actionMessage.deleting', [row.name]),
+        duration: 0,
+      });
+      try {
+        await deleteModel(row.id);
+      } finally {
+        hideLoading();
+      }
       return true;
     },
     content: `确认要删除流程: "${row.name}" 吗？`,
     icon: 'question',
-  }).then(async () => {
-    message.success(`删除流程: "${row.name}" 成功`);
-    // 刷新列表
-    emit('success');
   });
+
+  message.success(`删除流程: "${row.name}" 成功`);
+  // 刷新列表
+  emit('success');
 }
 
 /** 跳转到指定流程定义列表 */

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -6,6 +6,7 @@ import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import {
+  BpmFieldPermissionType,
   BpmModelFormType,
   BpmModelType,
   BpmTaskStatusEnum,
@@ -44,13 +45,6 @@ const props = defineProps<{
   taskId?: string; // 任务编号
 }>();
 
-// TODO @jason：是不是使用全局的 FieldPermissionType？export enum FieldPermissionType {
-enum FieldPermissionType {
-  NONE = '3', // 隐藏
-  READ = '1', // 只读
-  WRITE = '2', // 编辑
-}
-
 const processInstanceLoading = ref(false); // 流程实例的加载中
 const processInstance = ref<BpmProcessInstanceApi.ProcessInstance>(); // 流程实例
 const processDefinition = ref<any>({}); // 流程定义
@@ -131,18 +125,16 @@ async function getApprovalDetail() {
           processInstance.value.formVariables,
         );
       }
-      // TODO @jason：这里 await 来搞？
-      nextTick().then(() => {
-        fApi.value?.btn.show(false);
-        fApi.value?.resetBtn.show(false);
-        fApi.value?.disabled(true);
-        // 设置表单字段权限
-        if (formFieldsPermission) {
-          Object.keys(data.formFieldsPermission).forEach((item) => {
-            setFieldPermission(item, formFieldsPermission[item]);
-          });
-        }
-      });
+      await nextTick();
+      fApi.value?.btn.show(false);
+      fApi.value?.resetBtn.show(false);
+      fApi.value?.disabled(true);
+      // 设置表单字段权限
+      if (formFieldsPermission) {
+        Object.keys(data.formFieldsPermission).forEach((item) => {
+          setFieldPermission(item, formFieldsPermission[item]);
+        });
+      }
     } else {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
       BusinessFormComponent.value = registerComponent(
@@ -178,15 +170,15 @@ async function getProcessModelView() {
 
 /** 设置表单权限 */
 function setFieldPermission(field: string, permission: string) {
-  if (permission === FieldPermissionType.READ) {
+  if (permission === BpmFieldPermissionType.READ) {
     fApi.value?.disabled(true, field);
   }
-  if (permission === FieldPermissionType.WRITE) {
+  if (permission === BpmFieldPermissionType.WRITE) {
     fApi.value?.disabled(false, field);
     // 加入可以编辑的字段
     writableFields.push(field);
   }
-  if (permission === FieldPermissionType.NONE) {
+  if (permission === BpmFieldPermissionType.NONE) {
     fApi.value?.hidden(true, field);
   }
 }
@@ -203,13 +195,11 @@ function setFieldPermission(field: string, permission: string) {
 /** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
 watch(
   () => activeTab.value,
-  (newVal) => {
+  async (newVal) => {
     if (newVal === 'record') {
       // 如果切换到流转记录标签，刷新任务列表
-      // TODO @jason：await nextTick 要不？
-      nextTick(() => {
-        taskListRef.value?.refresh();
-      });
+      await nextTick();
+      taskListRef.value?.refresh();
     }
   },
 );

apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue

@@ -548,9 +548,8 @@ async function handleCancel() {
 /** 处理再次提交 */
 async function handleReCreate() {
   // 跳转发起流程界面
-  // TODO @jason：这个要优化成 push 到 name 么？这样后续 path 可以按需调整；
   await router.push({
-    path: '/bpm/task/create',
+    name: 'BpmProcessInstanceCreate',
     query: { processInstanceId: props.processInstance?.id },
   });
 }