feat：【antd】bpm processInstance/manager 的迁移

apps/web-antd/src/views/bpm/processInstance/manager/data.ts

@@ -1,14 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
-
-import { h } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { Button } from 'ant-design-vue';
-
 import { getCategorySimpleList } from '#/api/bpm/category';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -46,7 +41,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -59,7 +53,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -73,7 +66,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 发起时间
     {
       fieldName: 'createTime',
       label: '发起时间',
@@ -87,9 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onTaskClick: (task: BpmProcessInstanceApi.Task) => void,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -103,27 +93,22 @@ export function useGridColumns(
       minWidth: 200,
       fixed: 'left',
     },
-
     {
       field: 'categoryName',
       title: '流程分类',
       minWidth: 120,
       fixed: 'left',
     },
-
     {
       field: 'startUser.nickname',
       title: '流程发起人',
       minWidth: 120,
     },
-
     {
       field: 'startUser.deptName',
       title: '发起部门',
       minWidth: 120,
     },
-
-    // 流程状态
     {
       field: 'status',
       title: '流程状态',
@@ -133,7 +118,6 @@ export function useGridColumns(
         props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
       },
     },
-
     {
       field: 'startTime',
       title: '发起时间',
@@ -152,29 +136,11 @@ export function useGridColumns(
       minWidth: 180,
       formatter: 'formatPast2',
     },
-
-    // 当前审批任务 tasks
     {
       field: 'tasks',
       title: '当前审批任务',
       minWidth: 320,
-      slots: {
+      slots: { default: 'tasks' },
-        default: ({ row }) => {
-          if (!row?.tasks?.length) return '-';
-
-          return row.tasks.map((task: BpmProcessInstanceApi.Task) =>
-            h(
-              Button,
-              {
-                type: 'link',
-                size: 'small',
-                onClick: () => onTaskClick(task),
-              },
-              { default: () => task.name },
-            ),
-          );
-        },
-      },
     },
     {
       title: '操作',

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

@@ -7,7 +7,7 @@ import { h } from 'vue';
 import { DocAlert, Page, prompt } from '@vben/common-ui';
 import { BpmProcessInstanceStatus } from '@vben/constants';
 
-import { message, Textarea } from 'ant-design-vue';
+import { Button, message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -26,15 +26,19 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 点击任务 */
+/** 查看任务详情 */
-function onTaskClick(task: BpmProcessInstanceApi.Task) {
+function handleTaskDetail(
-  // TODO 待实现
+  row: BpmProcessInstanceApi.ProcessInstance,
-  console.warn(task);
+  task: BpmProcessInstanceApi.Task,
+) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id, taskId: task.id },
+  });
 }
 
 /** 查看流程实例 */
 function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
-  console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.id },
@@ -44,36 +48,23 @@ function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
 /** 取消流程实例 */
 function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
   prompt({
-    async beforeClose(scope) {
-      if (scope.isConfirm) {
-        if (scope.value) {
-          try {
-            await cancelProcessInstanceByAdmin(row.id, scope.value);
-            message.success('取消成功');
-            handleRefresh();
-          } catch {
-            return false;
-          }
-        } else {
-          message.error('请输入取消原因');
-          return false;
-        }
-      }
-    },
     component: () => {
       return h(Textarea, {
         placeholder: '请输入取消原因',
         allowClear: true,
         rows: 2,
-        rules: [{ required: true, message: '请输入取消原因' }],
       });
     },
     content: '请输入取消原因',
     title: '取消流程',
     modelPropName: 'value',
-  })
+  }).then(async (reason) => {
-    .then(() => {})
+    if (reason) {
-    .catch(() => {});
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      message.success('取消成功');
+      handleRefresh();
+    }
+  });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -81,7 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onTaskClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -97,6 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -113,6 +105,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <Grid table-title="流程实例">
+      <template #tasks="{ row }">
+        <template v-if="row.tasks && row.tasks.length > 0">
+          <Button
+            v-for="task in row.tasks"
+            :key="task.id"
+            type="link"
+            @click="handleTaskDetail(row, task)"
+          >
+            {{ task.name }}
+          </Button>
+        </template>
+        <span v-else>-</span>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[