Pre Merge pull request !142 from Jason/dev

apps/web-antd/src/api/bpm/category/index.ts

@@ -3,9 +3,8 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmCategoryApi {
-  /** 流程分类 VO */
+  /** 流程分类 */
-  // TODO @jason：不用 VO 后缀哈
+  export interface Category {
-  export interface CategoryVO {
     id: number;
     name: string;
     code: string;
@@ -17,7 +16,7 @@ export namespace BpmCategoryApi {
 
 /** 查询流程分类分页 */
 export async function getCategoryPage(params: PageParam) {
-  return requestClient.get<PageResult<BpmCategoryApi.CategoryVO>>(
+  return requestClient.get<PageResult<BpmCategoryApi.Category>>(
     '/bpm/category/page',
     { params },
   );
@@ -25,18 +24,18 @@ export async function getCategoryPage(params: PageParam) {
 
 /** 查询流程分类详情 */
 export async function getCategory(id: number) {
-  return requestClient.get<BpmCategoryApi.CategoryVO>(
+  return requestClient.get<BpmCategoryApi.Category>(
     `/bpm/category/get?id=${id}`,
   );
 }
 
 /** 新增流程分类 */
-export async function createCategory(data: BpmCategoryApi.CategoryVO) {
+export async function createCategory(data: BpmCategoryApi.Category) {
   return requestClient.post<number>('/bpm/category/create', data);
 }
 
 /** 修改流程分类 */
-export async function updateCategory(data: BpmCategoryApi.CategoryVO) {
+export async function updateCategory(data: BpmCategoryApi.Category) {
   return requestClient.put<boolean>('/bpm/category/update', data);
 }
 
@@ -47,7 +46,7 @@ export async function deleteCategory(id: number) {
 
 /** 查询流程分类列表 */
 export async function getCategorySimpleList() {
-  return requestClient.get<BpmCategoryApi.CategoryVO[]>(
+  return requestClient.get<BpmCategoryApi.Category[]>(
     `/bpm/category/simple-list`,
   );
 }

apps/web-antd/src/api/bpm/definition/index.ts

@@ -15,6 +15,7 @@ export namespace BpmProcessDefinitionApi {
     formType?: number;
     bpmnXml?: string;
     simpleModel?: string;
+    formFields?: string[];
   }
 }
 

apps/web-antd/src/api/bpm/form/index.ts

@@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
 
 export namespace BpmFormApi {
   /** 流程表单 */
-  // TODO @jason：不用 VO 后缀哈
+  // TODO @ziye：不用 VO 后缀哈
   export interface FormVO {
     id?: number | undefined;
     name: string;

apps/web-antd/src/api/bpm/model/index.ts

@@ -11,9 +11,8 @@ export namespace BpmModelApi {
     deptName?: string;
   }
 
-  /** 流程定义 VO */
+  /** 流程定义 */
-  // TODO @jason：不用 VO 后缀哈
+  export interface ProcessDefinition {
-  export interface ProcessDefinitionVO {
     id: string;
     key?: string;
     version: number;
@@ -23,8 +22,8 @@ export namespace BpmModelApi {
     formCustomViewPath?: string;
   }
 
-  /** 流程模型 VO */
+  /** 流程模型 */
-  export interface ModelVO {
+  export interface Model {
     id: number;
     key: string;
     name: string;
@@ -36,7 +35,7 @@ export namespace BpmModelApi {
     formId: number;
     formCustomCreatePath: string;
     formCustomViewPath: string;
-    processDefinition: ProcessDefinitionVO;
+    processDefinition: ProcessDefinition;
     status: number;
     remark: string;
     createTime: string;
@@ -49,23 +48,23 @@ export namespace BpmModelApi {
 export interface ModelCategoryInfo {
   id: number;
   name: string;
-  modelList: BpmModelApi.ModelVO[];
+  modelList: BpmModelApi.Model[];
 }
 
 /** 获取流程模型列表 */
 export async function getModelList(name: string | undefined) {
-  return requestClient.get<BpmModelApi.ModelVO[]>('/bpm/model/list', {
+  return requestClient.get<BpmModelApi.Model[]>('/bpm/model/list', {
     params: { name },
   });
 }
 
 /** 获取流程模型详情 */
 export async function getModel(id: string) {
-  return requestClient.get<BpmModelApi.ModelVO>(`/bpm/model/get?id=${id}`);
+  return requestClient.get<BpmModelApi.Model>(`/bpm/model/get?id=${id}`);
 }
 
 /** 更新流程模型 */
-export async function updateModel(data: BpmModelApi.ModelVO) {
+export async function updateModel(data: BpmModelApi.Model) {
   return requestClient.put('/bpm/model/update', data);
 }
 
@@ -78,7 +77,7 @@ export async function updateModelSortBatch(ids: number[]) {
 }
 
 /** 更新流程模型的 BPMN XML */
-export async function updateModelBpmn(data: BpmModelApi.ModelVO) {
+export async function updateModelBpmn(data: BpmModelApi.Model) {
   return requestClient.put('/bpm/model/update-bpmn', data);
 }
 
@@ -92,7 +91,7 @@ export async function updateModelState(id: number, state: number) {
 }
 
 /** 创建流程模型 */
-export async function createModel(data: BpmModelApi.ModelVO) {
+export async function createModel(data: BpmModelApi.Model) {
   return requestClient.post('/bpm/model/create', data);
 }
 

apps/web-antd/src/api/bpm/processInstance/index.ts

@@ -53,7 +53,7 @@ export namespace BpmProcessInstanceApi {
     formVariables: Record<string, any>;
     id: number;
     name: string;
-    processDefinition?: BpmModelApi.ProcessDefinitionVO;
+    processDefinition?: BpmModelApi.ProcessDefinition;
     processDefinitionId: string;
     remark: string;
     result: number;
@@ -67,7 +67,7 @@ export namespace BpmProcessInstanceApi {
   export type ApprovalDetail = {
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
     formFieldsPermission: any;
-    processDefinition: BpmModelApi.ProcessDefinitionVO;
+    processDefinition: BpmModelApi.ProcessDefinition;
     processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
     status: number;
     todoTask: BpmTaskApi.TaskVO;

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

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

apps/web-antd/src/views/bpm/category/index.vue

@@ -29,12 +29,12 @@ function handleCreate() {
 }
 
 /** 编辑流程分类 */
-function handleEdit(row: BpmCategoryApi.CategoryVO) {
+function handleEdit(row: BpmCategoryApi.Category) {
   formModalApi.setData(row).open();
 }
 
 /** 删除流程分类 */
-async function handleDelete(row: BpmCategoryApi.CategoryVO) {
+async function handleDelete(row: BpmCategoryApi.Category) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.code]),
     key: 'action_key_msg',
@@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: { code: 'query' },
       search: true,
     },
-  } as VxeTableGridOptions<BpmCategoryApi.CategoryVO>,
+  } as VxeTableGridOptions<BpmCategoryApi.Category>,
 });
 </script>
 

apps/web-antd/src/views/bpm/category/modules/form.vue

@@ -18,7 +18,7 @@ import { $t } from '#/locales';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<BpmCategoryApi.CategoryVO>();
+const formData = ref<BpmCategoryApi.Category>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['流程分类'])
@@ -39,7 +39,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as BpmCategoryApi.CategoryVO;
+    const data = (await formApi.getValues()) as BpmCategoryApi.Category;
     try {
       await (formData.value?.id ? updateCategory(data) : createCategory(data));
       // 关闭并提示
@@ -56,7 +56,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<BpmCategoryApi.CategoryVO>();
+    const data = modalApi.getData<BpmCategoryApi.Category>();
     if (!data || !data.id) {
       return;
     }

apps/web-antd/src/views/bpm/category/modules/rename-form.vue

@@ -12,7 +12,7 @@ import { getCategory, updateCategory } from '#/api/bpm/category';
 import { $t } from '#/locales';
 
 const emit = defineEmits(['success']);
-const formData = ref<BpmCategoryApi.CategoryVO>();
+const formData = ref<BpmCategoryApi.Category>();
 
 // 定义表单结构
 const formSchema = [
@@ -53,7 +53,7 @@ const [Modal, modalApi] = useVbenModal({
       status: formData.value?.status,
       description: formData.value?.description,
       sort: formData.value?.sort,
-    } as BpmCategoryApi.CategoryVO;
+    } as BpmCategoryApi.Category;
 
     try {
       await updateCategory(data);
@@ -74,7 +74,7 @@ const [Modal, modalApi] = useVbenModal({
     }
 
     // 加载数据
-    const data = modalApi.getData<BpmCategoryApi.CategoryVO>();
+    const data = modalApi.getData<BpmCategoryApi.Category>();
 
     if (!data || !data.id) {
       return;

apps/web-antd/src/views/bpm/model/form/index.vue

@@ -133,7 +133,7 @@ provide('modelData', formData);
 
 // 数据列表
 const formList = ref<BpmFormApi.FormVO[]>([]);
-const categoryList = ref<BpmCategoryApi.CategoryVO[]>([]);
+const categoryList = ref<BpmCategoryApi.Category[]>([]);
 const userList = ref<SystemUserApi.User[]>([]);
 const deptList = ref<SystemDeptApi.Dept[]>([]);
 

apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue

@@ -29,7 +29,7 @@ import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '#/utils';
 
 const props = defineProps({
   categoryList: {
-    type: Array as PropType<BpmCategoryApi.CategoryVO[]>,
+    type: Array as PropType<BpmCategoryApi.Category[]>,
     required: true,
   },
   userList: {

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -5,7 +5,8 @@ import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
 import { computed, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { confirm, useVbenModal } from '@vben/common-ui';
+import { useAccess } from '@vben/access';
+import { confirm, EllipsisText, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
@@ -65,8 +66,8 @@ const router = useRouter();
 const userStore = useUserStore();
 const userId = userStore.userInfo?.id;
 const isModelSorting = ref(false);
-const originalData = ref<BpmModelApi.ModelVO[]>([]);
+const originalData = ref<BpmModelApi.Model[]>([]);
-const modelList = ref<BpmModelApi.ModelVO[]>([]);
+const modelList = ref<BpmModelApi.Model[]>([]);
 const isExpand = ref(false);
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -90,6 +91,18 @@ const sortableInstance = ref<any>(null);
 /** 解决 v-model 问题，使用计算属性 */
 const expandKeys = computed(() => (isExpand.value ? ['1'] : []));
 
+const { hasAccessByCodes } = useAccess();
+/** 权限校验：通过 computed 解决列表的卡顿问题 */
+const hasPermiUpdate = computed(() => {
+  return hasAccessByCodes(['bpm:model:update']);
+});
+const hasPermiDelete = computed(() => {
+  return hasAccessByCodes(['bpm:model:delete']);
+});
+const hasPermiDeploy = computed(() => {
+  return hasAccessByCodes(['bpm:model:deploy']);
+});
+
 /** 处理模型的排序 */
 function handleModelSort() {
   // 保存初始数据并确保数据完整
@@ -145,21 +158,9 @@ async function handleModelSortSubmit() {
       message.error('排序数据异常，请重试');
       return;
     }
-
     // 保存排序
     const ids = modelList.value.map((item) => item.id);
-
+    await updateModelSortBatch(ids);
-    // 检查是否有所有必要的ID
-    if (ids.length === props.categoryInfo.modelList.length) {
-      // 使用排序后的数据
-      await updateModelSortBatch(ids);
-    } else {
-      console.warn('排序数据不完整，尝试使用原始数据');
-      // 如果数据不完整，使用原始数据
-      const originalIds = props.categoryInfo.modelList.map((item) => item.id);
-      await updateModelSortBatch(originalIds);
-    }
-
     // 刷新列表
     isModelSorting.value = false;
     message.success('排序模型成功');
@@ -283,7 +284,7 @@ function handleModelCommand(command: string, row: any) {
       break;
     }
     case 'handleReport': {
-      console.warn('报表待实现', row);
+      handleReport(row);
       break;
     }
     default: {
@@ -359,6 +360,17 @@ function handleDefinitionList(row: any) {
   });
 }
 
+/** 跳转到流程报表页面 */
+function handleReport(row: any) {
+  router.push({
+    name: 'BpmProcessInstanceReport',
+    query: {
+      processDefinitionId: row.processDefinition.id,
+      processDefinitionKey: row.key,
+    },
+  });
+}
+
 /** 更新 modelList 模型列表 */
 const updateModelList = useDebounceFn(() => {
   const newModelList = props.categoryInfo.modelList;
@@ -520,11 +532,9 @@ const handleRenameSuccess = () => {
                   class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
                   alt="图标"
                 />
-                <div class="min-w-0">
+                <EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
-                  <EllipsisText :max-width="100" :tooltip-when-ellipsis="true">
+                  {{ row.name }}
-                    {{ row.name }}
+                </EllipsisText>
-                  </EllipsisText>
-                </div>
               </div>
             </template>
             <template #startUserIds="{ row }">
@@ -568,7 +578,6 @@ const handleRenameSuccess = () => {
               >
                 {{ row.formName }}
               </Button>
-              <!-- TODO BpmModelFormType.CUSTOM -->
               <Button
                 v-else-if="row.formType === BpmModelFormType.CUSTOM"
                 type="link"
@@ -598,13 +607,12 @@ const handleRenameSuccess = () => {
             </template>
             <template #actions="{ row }">
               <div class="flex items-center space-x-0">
-                <!-- TODO 权限校验-->
                 <Button
                   type="link"
                   size="small"
                   class="px-1"
                   @click="modelOperation('update', row.id)"
-                  :disabled="!isManagerUser(row)"
+                  :disabled="!isManagerUser(row) || !hasPermiUpdate"
                 >
                   修改
                 </Button>
@@ -613,7 +621,7 @@ const handleRenameSuccess = () => {
                   size="small"
                   class="px-1"
                   @click="handleDeploy(row)"
-                  :disabled="!isManagerUser(row)"
+                  :disabled="!isManagerUser(row) || !hasPermiDeploy"
                 >
                   发布
                 </Button>
@@ -626,13 +634,12 @@ const handleRenameSuccess = () => {
                       <Menu.Item key="handleCopy"> 复制 </Menu.Item>
                       <Menu.Item key="handleDefinitionList"> 历史 </Menu.Item>
 
-                      <!-- TODO 待实现报表
+                      <Menu.Item
-                        <Menu.Item
+                        key="handleReport"
-                          key="handleReport"
+                        :disabled="!isManagerUser(row)"
-                          :disabled="!isManagerUser(record)"
+                      >
-                        >
+                        报表
-                          报表
+                      </Menu.Item>
-                        </Menu.Item> -->
                       <Menu.Item
                         key="handleChangeState"
                         v-if="row.processDefinition"
@@ -654,7 +661,7 @@ const handleRenameSuccess = () => {
                       <Menu.Item
                         danger
                         key="handleDelete"
-                        :disabled="!isManagerUser(row)"
+                        :disabled="!isManagerUser(row) || !hasPermiDelete"
                       >
                         删除
                       </Menu.Item>

apps/web-antd/src/views/bpm/model/modules/data.ts

@@ -4,12 +4,12 @@ import type { BpmModelApi } from '#/api/bpm/model';
 import { DICT_TYPE } from '#/utils';
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions<BpmModelApi.ModelVO>['columns'] {
+export function useGridColumns(): VxeTableGridOptions<BpmModelApi.Model>['columns'] {
   return [
     {
       field: 'name',
       title: '流程名称',
-      minWidth: 250,
+      minWidth: 200,
       slots: { default: 'name' },
     },
     {
@@ -21,7 +21,7 @@ export function useGridColumns(): VxeTableGridOptions<BpmModelApi.ModelVO>['colu
     {
       field: 'type',
       title: '流程类型',
-      minWidth: 150,
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.BPM_MODEL_TYPE },
@@ -36,12 +36,12 @@ export function useGridColumns(): VxeTableGridOptions<BpmModelApi.ModelVO>['colu
     {
       field: 'deploymentTime',
       title: '最后发布',
-      minWidth: 260,
+      minWidth: 280,
       slots: { default: 'deploymentTime' },
     },
     {
       title: '操作',
-      width: 200,
+      width: 150,
       fixed: 'right',
       slots: { default: 'actions' },
     },

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

@@ -161,7 +161,7 @@ const processDefinitionGroup = computed(() => {
     string,
     BpmProcessDefinitionApi.ProcessDefinitionVO[]
   > = {};
-  categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
+  categoryList.value.forEach((category: BpmCategoryApi.Category) => {
     if (grouped[category.code]) {
       orderedGroup[category.code] = grouped[
         category.code
@@ -203,7 +203,7 @@ const availableCategories = computed(() => {
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
 
   // 过滤出有流程的分类
-  return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
+  return categoryList.value.filter((category: BpmCategoryApi.Category) =>
     availableCategoryCodes.includes(category.code),
   );
 });

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

@@ -0,0 +1,153 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
+
+/** 搜索的表单 */
+export function useGridFormSchema(
+  userList: any[] = [],
+  formFields: any[] = [],
+): VbenFormSchema[] {
+  // 基础搜索字段
+  const baseFormSchema = [
+    {
+      fieldName: 'startUserId',
+      label: '发起人',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择发起人',
+        allowClear: true,
+        options: userList.map((user) => ({
+          label: user.nickname,
+          value: user.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(),
+        placeholder: ['开始日期', '结束日期'],
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        placeholder: ['开始日期', '结束日期'],
+        allowClear: true,
+      },
+    },
+  ];
+
+  // 动态表单字段 暂时只支持 input 和 textarea,  TODO 其他类型的支持
+  const dynamicFormSchema = formFields
+    .filter((item) => item.type === 'input' || item.type === 'textarea')
+    // 根据类型选择合适的表单组件
+    .map((item) => {
+      return {
+        fieldName: `formFieldsParams.${item.field}`,
+        label: item.title,
+        component: 'Input',
+        componentProps: {
+          placeholder: `请输入${item.title}`,
+          allowClear: true,
+        },
+      };
+    });
+
+  return [...baseFormSchema, ...dynamicFormSchema];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  formFields: any[] = [],
+): VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>['columns'] {
+  const baseColumns: VxeGridPropTypes.Columns<BpmProcessInstanceApi.ProcessInstanceVO> =
+    [
+      {
+        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',
+      },
+    ];
+
+  // 添加动态表单字段列，暂时全部以字符串，TODO 展示优化, 按 type 展示控制
+  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-antd/src/views/bpm/processInstance/report/index.vue

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { h, nextTick, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page } from '@vben/common-ui';
+
+import { Input, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  cancelProcessInstanceByAdmin,
+  getProcessInstanceManagerPage,
+} from '#/api/bpm/processInstance';
+import { getSimpleUserList } from '#/api/system/user';
+import { parseFormFields } from '#/components/simple-process-design';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'BpmProcessInstanceReport' });
+
+const router = useRouter(); // 路由
+const { query } = useRoute();
+const processDefinitionId = query.processDefinitionId as string;
+
+const formFields = ref<any[]>([]);
+const userList = ref<any[]>([]); // 用户列表
+const gridReady = ref(false); // 表格是否准备好
+const cancelReason = ref(''); // 取消原因
+
+// 表格的列需要解析表单字段，这里定义成变量，解析表单字段后再渲染
+let Grid: any = null;
+let gridApi: any = null;
+
+/** 获取流程定义 */
+const getProcessDefinitionData = async () => {
+  try {
+    const processDefinition = await getProcessDefinition(processDefinitionId);
+    if (processDefinition && processDefinition.formFields) {
+      formFields.value = parseFormCreateFields(processDefinition.formFields);
+    }
+  } catch (error) {
+    console.error('获取流程定义失败', error);
+  }
+};
+
+/** 解析表单字段 */
+const 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 onRefresh() {
+  if (gridApi) {
+    gridApi.query();
+  }
+}
+
+/** 查看详情 */
+const handleDetail = (row: BpmProcessInstanceApi.ProcessInstanceVO) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.id,
+    },
+  });
+};
+
+/** 取消按钮操作 */
+const handleCancel = async (row: BpmProcessInstanceApi.ProcessInstanceVO) => {
+  cancelReason.value = ''; // 重置取消原因
+  confirm({
+    title: '取消流程',
+    content: h('div', [
+      h('p', '请输入取消原因：'),
+      h(Input, {
+        value: cancelReason.value,
+        'onUpdate:value': (val: string) => {
+          cancelReason.value = val;
+        },
+        placeholder: '请输入取消原因',
+      }),
+    ]),
+    beforeClose: async ({ isConfirm }) => {
+      if (!isConfirm) return;
+      if (!cancelReason.value.trim()) {
+        message.warning('请输入取消原因');
+        return false;
+      }
+      await cancelProcessInstanceByAdmin(row.id, cancelReason.value);
+      return true;
+    },
+  }).then(() => {
+    message.success('取消成功');
+    onRefresh();
+  });
+};
+
+/** 创建表格 */
+const createGrid = () => {
+  const [GridCompnent, api] = useVbenVxeGrid({
+    formOptions: {
+      schema: useGridFormSchema(userList.value, formFields.value),
+    },
+    gridOptions: {
+      columns: useGridColumns(formFields.value),
+      height: 'auto',
+      keepSource: true,
+      rowConfig: {
+        keyField: 'id',
+      },
+      toolbarConfig: {
+        refresh: { code: 'query' },
+        search: true,
+      },
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            // 处理表单值，将 formFieldsParams 对象提取出来
+            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,
+  });
+
+  Grid = GridCompnent;
+  gridApi = api;
+  gridReady.value = true;
+};
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取用户列表
+  userList.value = await getSimpleUserList();
+
+  // 获取流程定义，并获取表单字段。
+  await getProcessDefinitionData();
+
+  // 解析表单字段后，再创建表格，表格的列依赖于表单字段
+  createGrid();
+
+  // 确保 DOM 更新完成
+  await nextTick();
+
+  // 加载表格数据
+  gridApi.query();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 动态渲染表格 -->
+    <component :is="Grid" v-if="gridReady" table-title="流程实例列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'link',
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-instance:cancel'],
+              ifShow: row.status === 1,
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </component>
+  </Page>
+</template>