From f488d7e414d61a3ad86a16ffb6a3e5245d55ca86 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 21 Oct 2025 12:52:31 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91bpm=20process?=
 =?UTF-8?q?Instance/manager=20=E7=9A=84=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/bpm/processInstance/data.ts     |  23 +--
 .../views/bpm/processInstance/manager/data.ts |   8 +-
 .../views/bpm/processInstance/manager/data.ts | 156 ++++++++++++++++++
 .../bpm/processInstance/manager/index.vue     | 148 +++++++++++++++++
 4 files changed, 316 insertions(+), 19 deletions(-)
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/manager/data.ts
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/manager/index.vue

diff --git a/apps/web-antd/src/views/bpm/processInstance/data.ts b/apps/web-antd/src/views/bpm/processInstance/data.ts
index 214c58b0b..35f7e0cae 100644
--- a/apps/web-antd/src/views/bpm/processInstance/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/data.ts
@@ -5,23 +5,12 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
-    // {
-    //   fieldName: 'startUserId',
-    //   label: '发起人',
-    //   component: 'ApiSelect',
-    //   componentProps: {
-    //     placeholder: '请选择发起人',
-    //     allowClear: true,
-    //     api: getSimpleUserList,
-    //     labelField: 'nickname',
-    //     valueField: 'id',
-    //   },
-    // },
     {
       fieldName: 'name',
       label: '流程名称',
@@ -34,13 +23,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'processDefinitionId',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -53,7 +44,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -67,7 +57,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 发起时间
     {
       fieldName: 'createTime',
       label: '发起时间',
diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
index 46025b6f5..a356cd076 100644
--- a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
@@ -5,6 +5,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -35,10 +36,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'processDefinitionId',
       label: '所属流程',
-      component: 'Input',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请输入流程定义的编号',
+        placeholder: '请选择流程定义',
         allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
       },
     },
     {
diff --git a/apps/web-ele/src/views/bpm/processInstance/manager/data.ts b/apps/web-ele/src/views/bpm/processInstance/manager/data.ts
new file mode 100644
index 000000000..a356cd076
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/manager/data.ts
@@ -0,0 +1,156 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getCategorySimpleList } from '#/api/bpm/category';
+import { getSimpleProcessDefinitionList } from '#/api/bpm/definition';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'startUserId',
+      label: '发起人',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择发起人',
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processDefinitionId',
+      label: '所属流程',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择流程定义',
+        allowClear: true,
+        api: getSimpleProcessDefinitionList,
+        labelField: 'name',
+        valueField: 'id',
+      },
+    },
+    {
+      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(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '流程编号',
+      minWidth: 320,
+      fixed: 'left',
+    },
+    {
+      field: 'name',
+      title: '流程名称',
+      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: '流程状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
+      },
+    },
+    {
+      field: 'startTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'durationInMillis',
+      title: '流程耗时',
+      minWidth: 180,
+      formatter: 'formatPast2',
+    },
+    {
+      field: 'tasks',
+      title: '当前审批任务',
+      minWidth: 320,
+      slots: { default: 'tasks' },
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processInstance/manager/index.vue b/apps/web-ele/src/views/bpm/processInstance/manager/index.vue
new file mode 100644
index 000000000..0afcbc425
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/manager/index.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h } from 'vue';
+
+import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus } from '@vben/constants';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelProcessInstanceByAdmin,
+  getProcessInstanceManagerPage,
+} from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceManager' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看任务详情 */
+function handleTaskDetail(
+  row: BpmProcessInstanceApi.ProcessInstance,
+  task: BpmProcessInstanceApi.Task,
+) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id, taskId: task.id },
+  });
+}
+
+/** 查看流程实例 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 取消流程实例 */
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
+  prompt({
+    component: () => {
+      return h(ElInput, {
+        placeholder: '请输入取消原因',
+        clearable: true,
+        rows: 2,
+        type: 'textarea',
+      });
+    },
+    content: '请输入取消原因',
+    title: '取消流程',
+    modelPropName: 'modelValue',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
+      ElMessage.success('取消成功');
+      handleRefresh();
+    }
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceManagerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    </template>
+
+    <Grid table-title="流程实例">
+      <template #tasks="{ row }">
+        <template v-if="row.tasks && row.tasks.length > 0">
+          <ElButton
+            v-for="task in row.tasks"
+            :key="task.id"
+            link
+            type="primary"
+            @click="handleTaskDetail(row, task)"
+          >
+            {{ task.name }}
+          </ElButton>
+        </template>
+        <span v-else>-</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('ui.actionTitle.cancel'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:cancel'],
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>