From 3f580033419cfcad557d4034398df9a29cd47d1f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 21 Oct 2025 13:10:47 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91bpm=20process?=
 =?UTF-8?q?Instance/index.vue=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     | 122 +++++++++++
 .../src/views/bpm/processInstance/index.vue   | 205 ++++++++++++++++++
 2 files changed, 327 insertions(+)
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/data.ts
 create mode 100644 apps/web-ele/src/views/bpm/processInstance/index.vue

diff --git a/apps/web-ele/src/views/bpm/processInstance/data.ts b/apps/web-ele/src/views/bpm/processInstance/data.ts
new file mode 100644
index 000000000..883cc97e2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/data.ts
@@ -0,0 +1,122 @@
+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 { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      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: 'name',
+      title: '流程名称',
+      minWidth: 200,
+      fixed: 'left',
+    },
+    {
+      field: 'summary',
+      title: '摘要',
+      minWidth: 200,
+      slots: {
+        default: 'slot-summary',
+      },
+    },
+    {
+      field: 'categoryName',
+      title: '流程分类',
+      minWidth: 120,
+      fixed: 'left',
+    },
+    {
+      field: 'status',
+      title: '流程状态',
+      minWidth: 250,
+      slots: {
+        default: 'slot-status',
+      },
+    },
+    {
+      field: 'startTime',
+      title: '发起时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processInstance/index.vue b/apps/web-ele/src/views/bpm/processInstance/index.vue
new file mode 100644
index 000000000..776e2c1a2
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processInstance/index.vue
@@ -0,0 +1,205 @@
+<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, DICT_TYPE } from '@vben/constants';
+
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  cancelProcessInstanceByStartUser,
+  getProcessInstanceMyPage,
+} from '#/api/bpm/processInstance';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceMy' });
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看流程实例 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 重新发起流程 */
+async function handleCreate(row: BpmProcessInstanceApi.ProcessInstance) {
+  // 如果是【业务表单】，不支持重新发起
+  if (row?.id) {
+    const processDefinitionDetail = await getProcessDefinition(
+      row.processDefinitionId,
+    );
+    if (processDefinitionDetail.formType === 20) {
+      ElMessage.error(
+        '重新发起流程失败，原因：该流程使用业务表单，不支持重新发起',
+      );
+      return;
+    }
+  }
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: 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 cancelProcessInstanceByStartUser(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 getProcessInstanceMyPage({
+            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/process-instance"
+      />
+    </template>
+
+    <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-status="{ row }">
+        <template
+          v-if="
+            row.status === BpmProcessInstanceStatus.RUNNING &&
+            row.tasks!.length > 0
+          "
+        >
+          <!-- 单人审批 -->
+          <template v-if="row.tasks!.length === 1">
+            <span>
+              <ElButton link type="primary" @click="handleDetail(row)">
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
+              </ElButton>
+              ({{ row.tasks![0]!.name }}) 审批中
+            </span>
+          </template>
+          <!-- 多人审批 -->
+          <template v-else>
+            <span>
+              <ElButton link type="primary" @click="handleDetail(row)">
+                {{ row.tasks![0]!.assigneeUser?.nickname }}
+              </ElButton>
+              等 {{ row.tasks!.length }} 人 ({{ row.tasks![0]!.name }})审批中
+            </span>
+          </template>
+        </template>
+        <!-- 非审批中状态 -->
+        <template v-else>
+          <DictTag
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="row.status"
+          />
+        </template>
+      </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),
+            },
+            {
+              label: '重新发起',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              ifShow: row.status !== BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:create'],
+              onClick: handleCreate.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>