!240 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !240 from Jason/dev
2025-10-27 02:28:52 +00:00
parent 86c68b5466 a325d3585e
commit a00c5caf6c
4 changed files with 159 additions and 124 deletions
--- a/apps/web-antd/src/views/bpm/model/index.vue
+++ b/apps/web-antd/src/views/bpm/model/index.vue
@@ -150,44 +150,44 @@ async function handleCategorySortSubmit() {
      v-spinning="modelListSpinning"
    >
      <template #extra>
-        <Input
-          v-model:value="queryParams.name"
-          placeholder="搜索流程"
-          allow-clear
-          @press-enter="getList"
-          class="!w-60"
-        />
-        <Button class="ml-2" type="primary" @click="createModel">
-          <IconifyIcon icon="lucide:plus" /> 新建模型
-        </Button>
-        <Dropdown class="ml-2" placement="bottomRight" arrow>
-          <Button>
-            <template #icon>
-              <div class="flex items-center justify-center">
-                <IconifyIcon icon="lucide:settings" />
-              </div>
-            </template>
+        <div v-if="!isCategorySorting">
+          <Input
+            v-model:value="queryParams.name"
+            placeholder="搜索流程"
+            allow-clear
+            @press-enter="getList"
+            class="!w-60"
+          />
+          <Button class="ml-2" type="primary" @click="createModel">
+            <IconifyIcon icon="lucide:plus" /> 新建模型
          </Button>
-          <template #overlay>
-            <Menu @click="(e) => handleCommand(e.key as string)">
-              <Menu.Item key="handleCategoryAdd">
-                <div class="flex items-center gap-1">
-                  <IconifyIcon icon="lucide:plus" />
-                  新建分类
+          <Dropdown class="ml-2" placement="bottomRight" arrow>
+            <Button>
+              <template #icon>
+                <div class="flex items-center justify-center">
+                  <IconifyIcon icon="lucide:settings" />
                </div>
-              </Menu.Item>
-              <Menu.Item key="handleCategorySort">
-                <div class="flex items-center gap-1">
-                  <IconifyIcon icon="lucide:align-start-vertical" />
-                  分类排序
-                </div>
-              </Menu.Item>
-            </Menu>
-          </template>
-        </Dropdown>
-      </template>
-      <div class="flex h-full items-center justify-between pl-5">
-        <div class="mb-4 mr-6" v-if="isCategorySorting">
+              </template>
+            </Button>
+            <template #overlay>
+              <Menu @click="(e) => handleCommand(e.key as string)">
+                <Menu.Item key="handleCategoryAdd">
+                  <div class="flex items-center gap-1">
+                    <IconifyIcon icon="lucide:plus" />
+                    新建分类
+                  </div>
+                </Menu.Item>
+                <Menu.Item key="handleCategorySort">
+                  <div class="flex items-center gap-1">
+                    <IconifyIcon icon="lucide:align-start-vertical" />
+                    分类排序
+                  </div>
+                </Menu.Item>
+              </Menu>
+            </template>
+          </Dropdown>
+        </div>
+        <div class="flex h-full items-center justify-between" v-else>
          <Button @click="handleCategorySortCancel" class="mr-3">
            取 消
          </Button>
@@ -199,7 +199,7 @@ async function handleCategorySortSubmit() {
            保存排序
          </Button>
        </div>
-      </div>
+      </template>

      <!-- 按照分类，展示其所属的模型列表 -->
      <div class="px-3" ref="categoryGroupRef">
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -12,7 +12,6 @@ import { IconifyIcon } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';

-// TODO @jason：某个模型下的排序功能，无法使用。操作流程：模型分类 A 的右侧【排序】，然后，无法拖拽使用；
 import { useDebounceFn } from '@vueuse/core';
 import { useSortable } from '@vueuse/integrations/useSortable';
 import {
@@ -65,7 +64,7 @@ const userId = useUserStore().userInfo?.id;
 const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.Model[]>([]);
 const modelList = ref<BpmModelApi.Model[]>([]);
-// TODO @jason：可以全部展开么？
+// TODO @jason：可以全部展开么？ @芋艿 上次讨论。好像是因为性能问题才只展开第一个分类
 const isExpand = ref(props.isFirst); // 根据是否为第一个分类, 来设置初始展开状态

 const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
@@ -154,13 +153,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 +173,8 @@ async function handleModelSortSubmit() {
    emit('success');
  } catch (error) {
    console.error('排序保存失败', error);
+  } finally {
+    hideLoading();
  }
 }

@@ -207,18 +212,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 +265,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 +322,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');
 }

 /** 跳转到指定流程定义列表 */
@@ -422,12 +463,14 @@ function handleRenameSuccess() {
    >
      <div class="flex h-12 items-center">
        <!-- 头部：分类名 -->
-        <!-- TODO @jason：1）无法拖动排序；2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。 -->
+        <!-- TODO @jason：2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。@芋艿 好像 yudao-ui-admin-vue3 交互也是这样的，需要改吗? -->
        <div class="flex items-center">
          <Tooltip v-if="isCategorySorting" title="拖动排序">
-            <span
-              class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
-            ></span>
+            <!-- drag-handle 标识可以拖动，不能删掉 -->
+            <IconifyIcon
+              icon="ic:round-drag-indicator"
+              class="drag-handle ml-2.5 cursor-move text-2xl text-gray-500"
+            />
          </Tooltip>
          <div class="ml-4 mr-2 text-lg font-medium">
            {{ categoryInfo.name }}
@@ -517,15 +560,16 @@ function handleRenameSuccess() {
            :class="`category-${categoryInfo.id}`"
          >
            <template #name="{ row }">
-              <div class="flex items-center">
+              <div class="flex items-center overflow-hidden">
                <Tooltip
                  v-if="isModelSorting"
                  title="拖动排序"
                  placement="left"
                >
+                  <!-- drag-handle 标识用于推动排序。 useSortable 用到 -->
                  <IconifyIcon
                    icon="ic:round-drag-indicator"
-                    class="mr-2.5 cursor-move text-2xl text-gray-500"
+                    class="drag-handle mr-2.5 flex-shrink-0 cursor-move text-2xl text-gray-500"
                  />
                </Tooltip>
                <div
@@ -542,9 +586,11 @@ function handleRenameSuccess() {
                  class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
                  alt="图标"
                />
-                <EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
-                  {{ row.name }}
-                </EllipsisText>
+                <div class="min-w-0 overflow-hidden">
+                  <EllipsisText :tooltip-when-ellipsis="true">
+                    {{ row.name }}
+                  </EllipsisText>
+                </div>
              </div>
            </template>
            <template #startUserIds="{ row }">
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/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();
    }
  },
 );
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -558,9 +558,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 },
  });
 }