feat：【ele】bpm processInstance/report/ 的迁移

apps/web-ele/src/router/routes/modules/bpm.ts

@@ -98,18 +98,18 @@ const routes: RouteRecordRaw[] = [
       //     keepAlive: true,
       //   },
       // },
-      // {
-      //   path: 'process-instance/report',
-      //   component: () => import('#/views/bpm/processInstance/report/index.vue'),
-      //   name: 'BpmProcessInstanceReport',
-      //   meta: {
-      //     title: '数据报表',
-      //     activePath: '/bpm/manager/model',
-      //     icon: 'carbon:data-2',
-      //     hideInMenu: true,
-      //     keepAlive: true,
-      //   },
-      // },
+      {
+        path: 'process-instance/report',
+        component: () => import('#/views/bpm/processInstance/report/index.vue'),
+        name: 'BpmProcessInstanceReport',
+        meta: {
+          title: '数据报表',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:data-2',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
     ],
   },
 ];

apps/web-ele/src/views/bpm/processInstance/report/data.ts

@@ -0,0 +1,157 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface FormField {
+  field: string;
+  title: string;
+  type: string;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(
+  formFields: FormField[] = [],
+): VbenFormSchema[] {
+  // 基础搜索字段配置
+  const baseFormSchema: VbenFormSchema[] = [
+    {
+      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: 'status',
+      label: '流程状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择流程状态',
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+          'number',
+        ),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发起时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+
+  // 动态表单字段配置：目前支持 input 和 textarea 类型
+  const dynamicFormSchema: VbenFormSchema[] = formFields
+    .filter((item) => ['input', 'textarea'].includes(item.type))
+    .map((item) => ({
+      fieldName: `formFieldsParams.${item.field}`,
+      label: item.title,
+      component: 'Input',
+      componentProps: {
+        placeholder: `请输入${item.title}`,
+        allowClear: true,
+      },
+    }));
+
+  return [...baseFormSchema, ...dynamicFormSchema];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  formFields: FormField[] = [],
+): VxeTableGridOptions['columns'] {
+  // 基础列配置
+  const baseColumns: VxeGridPropTypes.Columns<BpmProcessInstanceApi.ProcessInstance> =
+    [
+      {
+        field: 'name',
+        title: '流程名称',
+        minWidth: 250,
+        fixed: 'left',
+      },
+      {
+        field: 'startUser.nickname',
+        title: '流程发起人',
+        minWidth: 200,
+      },
+      {
+        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',
+      },
+    ];
+
+  // 动态表单字段列配置：根据表单字段生成对应的列，从 formVariables 中获取值
+  const formFieldColumns = formFields.map((item) => ({
+    field: `formVariables.${item.field}`,
+    title: item.title,
+    minWidth: 120,
+    formatter: ({ row }: any) => {
+      return row.formVariables?.[item.field] ?? '';
+    },
+  }));
+
+  return [
+    ...baseColumns,
+    ...formFieldColumns,
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

apps/web-ele/src/views/bpm/processInstance/report/index.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, prompt } from '@vben/common-ui';
+
+import { ElInput, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  cancelProcessInstanceByAdmin,
+  getProcessInstanceManagerPage,
+} from '#/api/bpm/processInstance';
+import { parseFormFields } from '#/components/form-create';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceReport' });
+
+const router = useRouter();
+const { query } = useRoute();
+const processDefinitionId = query.processDefinitionId as string;
+
+const formFields = ref<any[]>([]);
+
+/** 获取流程定义 */
+async function getProcessDefinitionData() {
+  const processDefinition = await getProcessDefinition(processDefinitionId);
+  if (processDefinition?.formFields) {
+    formFields.value = parseFormCreateFields(processDefinition.formFields);
+  }
+}
+
+/** 解析表单字段 */
+function parseFormCreateFields(formFields?: string[]) {
+  const result: Array<Record<string, any>> = [];
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      try {
+        parseFormFields(JSON.parse(fieldStr), result);
+      } catch (error) {
+        console.error('解析表单字段失败', error);
+      }
+    });
+  }
+  return result;
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看详情 */
+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,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const { formFieldsParams = {}, ...restValues } = formValues || {};
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...restValues,
+            processDefinitionKey: query.processDefinitionKey,
+            formFieldsParams: JSON.stringify(formFieldsParams),
+          };
+          return await getProcessInstanceManagerPage(params);
+        },
+      },
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取流程定义
+  await getProcessDefinitionData();
+  // 更新表单配置、表格列配置
+  gridApi.formApi.setState({
+    schema: useGridFormSchema(formFields.value),
+  });
+  await gridApi.grid.reloadColumn(useGridColumns(formFields.value) as any[]);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="流程实例列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-instance:cancel'],
+              ifShow: row.status === 1,
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>