feat：【antd】bpm task 的部分迁移

apps/web-antd/src/api/bpm/definition/index.ts

@@ -6,6 +6,7 @@ export namespace BpmProcessDefinitionApi {
   /** 流程定义 */
   export interface ProcessDefinition {
     id: string;
+    key?: string;
     version: number;
     name: string;
     description: string;

apps/web-antd/src/api/bpm/task/index.ts

@@ -13,6 +13,7 @@ export namespace BpmTaskApi {
     status: number; // 监听器状态
     event: string; // 监听事件
     valueType: string; // 监听器值类型
+    processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
   }
 
   // 流程任务

apps/web-antd/src/views/bpm/task/copy/index.vue

@@ -46,14 +46,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmProcessInstanceApi.Copy>,
 });
 </script>

apps/web-antd/src/views/bpm/task/done/data.ts

@@ -19,13 +19,22 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    // TODO @AI：是不是直接 import 下，不要动态；
     {
-      fieldName: 'processDefinitionId',
+      fieldName: 'processDefinitionKey',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: async () => {
+          const { getSimpleProcessDefinitionList } = await import(
+            '#/api/bpm/definition'
+          );
+          return await getSimpleProcessDefinitionList();
+        },
+        labelField: 'name',
+        valueField: 'key',
       },
     },
     {
@@ -88,6 +97,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '发起人',
       minWidth: 120,
     },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       field: 'name',
       title: '当前任务',

apps/web-antd/src/views/bpm/task/done/index.vue

@@ -6,6 +6,8 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
+import { $t } from '#/locales';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
 import { router } from '#/router';
@@ -27,10 +29,17 @@ function handleHistory(row: BpmTaskApi.TaskManager) {
 
 /** 撤回任务 */
 async function handleWithdraw(row: BpmTaskApi.TaskManager) {
-  await withdrawTask(row.id);
-  message.success('撤回成功');
-  // 刷新表格数据
-  await gridApi.query();
+  const hideLoading = message.loading({
+    content: '正在撤回中...',
+    duration: 0,
+  });
+  try {
+    await withdrawTask(row.id);
+    message.success('撤回成功');
+    await gridApi.query();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -54,14 +63,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
@@ -90,7 +97,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               icon: ACTION_ICON.EDIT,
               color: 'warning',
-              onClick: handleWithdraw.bind(null, row),
+              popConfirm: {
+                title: '确定要撤回该任务吗？',
+                confirm: handleWithdraw.bind(null, row),
+              },
             },
             {
               label: '历史',

apps/web-antd/src/views/bpm/task/manager/index.vue

@@ -43,14 +43,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
 });
 </script>
@@ -60,6 +58,7 @@ const [Grid] = useVbenVxeGrid({
     <template #doc>
       <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
     </template>
+
     <Grid table-title="流程任务">
       <template #actions="{ row }">
         <TableAction

apps/web-antd/src/views/bpm/task/todo/data.ts

@@ -19,13 +19,22 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    // TODO @AI：是不是直接 import 下，不要动态；
     {
-      fieldName: 'processDefinitionId',
+      fieldName: 'processDefinitionKey',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: async () => {
+          const { getSimpleProcessDefinitionList } = await import(
+            '#/api/bpm/definition'
+          );
+          return await getSimpleProcessDefinitionList();
+        },
+        labelField: 'name',
+        valueField: 'key',
       },
     },
     {
@@ -91,6 +100,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       title: '发起人',
       minWidth: 120,
     },
+    {
+      field: 'processInstance.createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
     {
       field: 'name',
       title: '当前任务',

apps/web-antd/src/views/bpm/task/todo/index.vue

@@ -14,11 +14,10 @@ defineOptions({ name: 'BpmTodoTask' });
 
 /** 办理任务 */
 function handleAudit(row: BpmTaskApi.Task) {
-  console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      id: row.processInstance.id,
+      id: row.processInstance!.id,
       taskId: row.id,
     },
   });
@@ -45,14 +44,12 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-    cellConfig: {
-      height: 64,
-    },
   } as VxeTableGridOptions<BpmTaskApi.Task>,
 });
 </script>