From 3ac5f784e72fff68ed288d06c22a1bfad9094686 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=90=E5=A4=9C?= <278898052@qq.com>
Date: Tue, 13 May 2025 19:54:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E3=80=90BPM=E3=80=91=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=20BPM=20=E4=BB=BB=E5=8A=A1=E7=9B=B8=E5=85=B3=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E8=BF=9B=E5=BA=A6=2050%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/modules/time-line.vue              |  11 +-
 .../src/views/bpm/processInstance/index.vue   |   2 +-
 apps/web-antd/src/views/bpm/task/copy/data.ts | 118 +++++++++++
 .../src/views/bpm/task/copy/index.vue         | 122 ++++++++++--
 apps/web-antd/src/views/bpm/task/done/data.ts | 188 ++++++++++++++++++
 .../src/views/bpm/task/done/index.vue         | 118 +++++++++--
 .../src/views/bpm/task/manager/data.ts        | 149 ++++++++++++++
 .../src/views/bpm/task/manager/index.vue      | 116 +++++++++--
 apps/web-antd/src/views/bpm/task/todo/data.ts | 153 ++++++++++++++
 .../src/views/bpm/task/todo/index.vue         | 118 +++++++++--
 10 files changed, 1004 insertions(+), 91 deletions(-)
 create mode 100644 apps/web-antd/src/views/bpm/task/copy/data.ts
 create mode 100644 apps/web-antd/src/views/bpm/task/done/data.ts
 create mode 100644 apps/web-antd/src/views/bpm/task/manager/data.ts
 create mode 100644 apps/web-antd/src/views/bpm/task/todo/data.ts

diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
index 399e8c886..408e6acb9 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -8,9 +8,8 @@ import { useRouter } from 'vue-router';
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime, isEmpty } from '@vben/utils';
 
-import { Avatar, Button, Image, Tooltip } from 'ant-design-vue';
+import { Avatar, Button, Image, Timeline, Tooltip } from 'ant-design-vue';
 
-import { TimeLine } from '#/components/time-line';
 import { UserSelectModal } from '#/components/user-select-modal';
 import {
   BpmCandidateStrategyEnum,
@@ -218,9 +217,9 @@ const handleUserSelectCancel = () => {
 
 <template>
   <div>
-    <TimeLine class="pt-20px">
+    <Timeline class="pt-20px">
       <!-- 遍历每个审批节点 -->
-      <TimeLine.Item
+      <Timeline.Item
         v-for="(activity, index) in activityNodes"
         :key="index"
         :color="getApprovalNodeColor(activity.status)"
@@ -449,8 +448,8 @@ const handleUserSelectCancel = () => {
             </div>
           </div>
         </div>
-      </TimeLine.Item>
-    </TimeLine>
+      </Timeline.Item>
+    </Timeline>
 
     <!-- 用户选择弹窗 -->
     <UserSelectModal
diff --git a/apps/web-antd/src/views/bpm/processInstance/index.vue b/apps/web-antd/src/views/bpm/processInstance/index.vue
index e213adecf..8383f64de 100644
--- a/apps/web-antd/src/views/bpm/processInstance/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/index.vue
@@ -23,7 +23,7 @@ import { BpmProcessInstanceStatus, DICT_TYPE } from '#/utils';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
-defineOptions({ name: 'BpmProcessInstanceManager' });
+defineOptions({ name: 'BpmProcessInstanceMy' });
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
diff --git a/apps/web-antd/src/views/bpm/task/copy/data.ts b/apps/web-antd/src/views/bpm/task/copy/data.ts
new file mode 100644
index 000000000..1d067a5ca
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/task/copy/data.ts
@@ -0,0 +1,118 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { useAccess } from '@vben/access';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+const { hasAccessByCodes } = useAccess();
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+
+    {
+      fieldName: 'createTime',
+      label: '抄送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = BpmTaskApi.TaskVO>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'processInstanceName',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'summary',
+      title: '摘要',
+      minWidth: 200,
+      slots: {
+        default: 'slot-summary',
+      },
+    },
+
+    {
+      field: 'startUser.nickname',
+      title: '流程发起人',
+      minWidth: 120,
+    },
+
+    {
+      field: 'processInstanceStartTime',
+      title: '流程发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    {
+      field: 'activityName',
+      title: '抄送节点',
+      minWidth: 180,
+    },
+
+    {
+      field: 'createUser.nickname',
+      title: '抄送人',
+      minWidth: 180,
+      slots: {
+        default: 'slot-createUser',
+      },
+    },
+    {
+      field: 'reason',
+      title: '抄送意见',
+      minWidth: 180,
+    },
+
+    {
+      field: 'createTime',
+      title: '抄送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    {
+      field: 'operation',
+      title: '操作',
+      minWidth: 120,
+      align: 'center',
+      fixed: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '流程名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'detail',
+            text: '详情',
+            show: hasAccessByCodes(['bpm:task:query']),
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/task/copy/index.vue b/apps/web-antd/src/views/bpm/task/copy/index.vue
index 3f5e2b5ed..f83d36206 100644
--- a/apps/web-antd/src/views/bpm/task/copy/index.vue
+++ b/apps/web-antd/src/views/bpm/task/copy/index.vue
@@ -1,34 +1,114 @@
 <script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
-
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessInstanceCopyPage } from '#/api/bpm/processInstance';
 import { DocAlert } from '#/components/doc-alert';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmCopyTask' });
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceCopyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+    cellConfig: {
+      height: 64,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
+});
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
+  switch (code) {
+    case 'detail': {
+      onDetail(row);
+      break;
+    }
+  }
+}
+
+/** 办理任务 */
+function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
+  const query = {
+    id: row.processInstanceId,
+    ...(row.activityId && { activityId: row.activityId }),
+  };
+
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query,
+  });
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert
       title="审批转办、委派、抄送"
       url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
     />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/copy/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="抄送任务">
+      <!-- 摘要 -->
+      <template #slot-summary="{ row }">
+        <div
+          class="flex flex-col py-2"
+          v-if="row.summary && row.summary.length > 0"
+        >
+          <div v-for="(item, index) in row.summary" :key="index">
+            <span class="text-gray-500">
+              {{ item.key }} : {{ item.value }}
+            </span>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </template>
+
+      <!-- 抄送人 -->
+      <template #slot-createUser="{ row }">
+        <span class="text-gray-500">
+          {{ row.createUser.nickname || '系统' }}
+        </span>
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/bpm/task/done/data.ts b/apps/web-antd/src/views/bpm/task/done/data.ts
new file mode 100644
index 000000000..2603f30a5
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/task/done/data.ts
@@ -0,0 +1,188 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { useAccess } from '@vben/access';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import {
+  DICT_TYPE,
+  formatPast2,
+  getDictOptions,
+  getRangePickerDefaultProps,
+} from '#/utils';
+
+const { hasAccessByCodes } = useAccess();
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionId',
+      label: '所属流程',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程定义的编号',
+        allowClear: true,
+      },
+    },
+    // 流程分类
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    // 流程状态
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    // 发起时间
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = BpmTaskApi.TaskVO>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'processInstance.summary',
+      title: '摘要',
+      minWidth: 200,
+      slots: {
+        default: 'slot-summary',
+      },
+    },
+
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+
+    {
+      field: 'createTime',
+      title: '任务开始时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    {
+      field: 'endTime',
+      title: '任务结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 180,
+    },
+
+    // 耗时
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: ({ row }) => {
+        return `${formatPast2(row.durationInMillis)}`;
+      },
+    },
+
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+
+    {
+      field: 'operation',
+      title: '操作',
+      minWidth: 120,
+      align: 'center',
+      fixed: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '流程名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'history',
+            text: '历史',
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/task/done/index.vue b/apps/web-antd/src/views/bpm/task/done/index.vue
index bd5ffef00..737281d79 100644
--- a/apps/web-antd/src/views/bpm/task/done/index.vue
+++ b/apps/web-antd/src/views/bpm/task/done/index.vue
@@ -1,13 +1,83 @@
 <script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
-
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskDonePage } from '#/api/bpm/task';
 import { DocAlert } from '#/components/doc-alert';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmDoneTask' });
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskDonePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+    cellConfig: {
+      height: 64,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+});
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+  switch (code) {
+    case 'history': {
+      onHistory(row);
+      break;
+    }
+  }
+}
+
+/** 查看历史 */
+function onHistory(row: BpmTaskApi.TaskVO) {
+  console.warn(row);
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+      taskId: row.id,
+    },
+  });
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert
       title="审批通过、不通过、驳回"
       url="https://doc.iocoder.cn/bpm/task-todo-done/"
@@ -18,23 +88,29 @@ import { DocAlert } from '#/components/doc-alert';
       url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
     />
     <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/done/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="已办任务">
+      <!-- 摘要 -->
+      <template #slot-summary="{ row }">
+        <div
+          class="flex flex-col py-2"
+          v-if="
+            row.processInstance.summary &&
+            row.processInstance.summary.length > 0
+          "
+        >
+          <div
+            v-for="(item, index) in row.processInstance.summary"
+            :key="index"
+          >
+            <span class="text-gray-500">
+              {{ item.key }} : {{ item.value }}
+            </span>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/bpm/task/manager/data.ts b/apps/web-antd/src/views/bpm/task/manager/data.ts
new file mode 100644
index 000000000..368d38f6b
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/task/manager/data.ts
@@ -0,0 +1,149 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { DICT_TYPE, formatPast2, getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+        allowClear: true,
+      },
+    },
+
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = BpmTaskApi.TaskVO>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'processInstance.summary',
+      title: '摘要',
+      minWidth: 200,
+      slots: {
+        default: 'slot-summary',
+      },
+    },
+
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+
+    {
+      field: 'createTime',
+      title: '任务开始时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    {
+      field: 'endTime',
+      title: '任务结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    // 审批人
+    {
+      field: 'assigneeUser.nickname',
+      title: '审批人',
+      minWidth: 180,
+    },
+
+    {
+      field: 'status',
+      title: '审批状态',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_TASK_STATUS },
+      },
+    },
+
+    {
+      field: 'reason',
+      title: '审批建议',
+      minWidth: 180,
+    },
+
+    // 耗时
+    {
+      field: 'durationInMillis',
+      title: '耗时',
+      minWidth: 180,
+      formatter: ({ row }) => {
+        return `${formatPast2(row.durationInMillis)}`;
+      },
+    },
+
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+
+    {
+      field: 'operation',
+      title: '操作',
+      minWidth: 120,
+      align: 'center',
+      fixed: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '流程名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'history',
+            text: '历史',
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/task/manager/index.vue b/apps/web-antd/src/views/bpm/task/manager/index.vue
index 0da6999bf..ace757bd4 100644
--- a/apps/web-antd/src/views/bpm/task/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/task/manager/index.vue
@@ -1,31 +1,105 @@
 <script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
-
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskManagerPage } from '#/api/bpm/task';
 import { DocAlert } from '#/components/doc-alert';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmManagerTask' });
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskManagerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+    cellConfig: {
+      height: 64,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+});
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+  switch (code) {
+    case 'history': {
+      onHistory(row);
+      break;
+    }
+  }
+}
+
+/** 查看历史 */
+function onHistory(row: BpmTaskApi.TaskVO) {
+  console.warn(row);
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+    },
+  });
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/manager/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <FormModal @success="onRefresh" />
+    <Grid table-title="流程任务">
+      <!-- 摘要 -->
+      <template #slot-summary="{ row }">
+        <div
+          class="flex flex-col py-2"
+          v-if="
+            row.processInstance.summary &&
+            row.processInstance.summary.length > 0
+          "
+        >
+          <div
+            v-for="(item, index) in row.processInstance.summary"
+            :key="index"
+          >
+            <span class="text-gray-500">
+              {{ item.key }} : {{ item.value }}
+            </span>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/bpm/task/todo/data.ts b/apps/web-antd/src/views/bpm/task/todo/data.ts
new file mode 100644
index 000000000..f20a26e47
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/task/todo/data.ts
@@ -0,0 +1,153 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { useAccess } from '@vben/access';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+const { hasAccessByCodes } = useAccess();
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionId',
+      label: '所属流程',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程定义的编号',
+        allowClear: true,
+      },
+    },
+    // 流程分类
+    {
+      fieldName: 'category',
+      label: '流程分类',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请输入流程分类',
+        allowClear: true,
+        api: getCategorySimpleList,
+        labelField: 'name',
+        valueField: 'code',
+      },
+    },
+    // 流程状态
+    {
+      fieldName: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+        placeholder: '请选择流程状态',
+        allowClear: true,
+      },
+    },
+    // 发起时间
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = BpmTaskApi.TaskVO>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'processInstance.summary',
+      title: '摘要',
+      minWidth: 200,
+      slots: {
+        default: 'slot-summary',
+      },
+    },
+
+    {
+      field: 'processInstance.startUser.nickname',
+      title: '发起人',
+      minWidth: 120,
+    },
+
+    {
+      field: 'createTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    {
+      field: 'name',
+      title: '当前任务',
+      minWidth: 180,
+    },
+
+    {
+      field: 'createTime',
+      title: '任务时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+
+    {
+      field: 'processInstanceId',
+      title: '流程编号',
+      minWidth: 280,
+    },
+
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 280,
+    },
+
+    {
+      field: 'operation',
+      title: '操作',
+      minWidth: 120,
+      align: 'center',
+      fixed: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: '流程名称',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'audit',
+            text: '办理',
+            show: hasAccessByCodes(['bpm:task:query']),
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/task/todo/index.vue b/apps/web-antd/src/views/bpm/task/todo/index.vue
index 9829b2eec..4b76a0f79 100644
--- a/apps/web-antd/src/views/bpm/task/todo/index.vue
+++ b/apps/web-antd/src/views/bpm/task/todo/index.vue
@@ -1,13 +1,83 @@
 <script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { BpmTaskApi } from '#/api/bpm/task';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
-
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskTodoPage } from '#/api/bpm/task';
 import { DocAlert } from '#/components/doc-alert';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmTodoTask' });
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTaskTodoPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+    cellConfig: {
+      height: 64,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+});
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+  switch (code) {
+    case 'audit': {
+      onAudit(row);
+      break;
+    }
+  }
+}
+
+/** 办理任务 */
+function onAudit(row: BpmTaskApi.TaskVO) {
+  console.warn(row);
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+      taskId: row.id,
+    },
+  });
+}
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert
       title="审批通过、不通过、驳回"
       url="https://doc.iocoder.cn/bpm/task-todo-done/"
@@ -18,23 +88,29 @@ import { DocAlert } from '#/components/doc-alert';
       url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
     />
     <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/task/todo/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal @success="onRefresh" />
+    <Grid table-title="待办任务">
+      <!-- 摘要 -->
+      <template #slot-summary="{ row }">
+        <div
+          class="flex flex-col py-2"
+          v-if="
+            row.processInstance.summary &&
+            row.processInstance.summary.length > 0
+          "
+        >
+          <div
+            v-for="(item, index) in row.processInstance.summary"
+            :key="index"
+          >
+            <span class="text-gray-500">
+              {{ item.key }} : {{ item.value }}
+            </span>
+          </div>
+        </div>
+        <div v-else>-</div>
+      </template>
+    </Grid>
   </Page>
 </template>