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

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

@@ -8,26 +8,31 @@ 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(
-  userList: any[] = [],
+  formFields: FormField[] = [],
-  formFields: any[] = [],
 ): VbenFormSchema[] {
-  // 基础搜索字段
+  // 基础搜索字段配置
-  const baseFormSchema = [
+  const baseFormSchema: VbenFormSchema[] = [
     {
       fieldName: 'startUserId',
       label: '发起人',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
         placeholder: '请选择发起人',
         allowClear: true,
-        options: userList.map((user) => ({
+        api: getSimpleUserList,
-          label: user.nickname,
+        labelField: 'nickname',
-          value: user.id,
+        valueField: 'id',
-        })),
       },
     },
     {
@@ -72,12 +77,10 @@ export function useGridFormSchema(
     },
   ];
 
-  // 动态表单字段 暂时只支持 input 和 textarea,  TODO 其他类型的支持
+  // 动态表单字段配置：目前支持 input 和 textarea 类型
-  const dynamicFormSchema = formFields
+  const dynamicFormSchema: VbenFormSchema[] = formFields
-    .filter((item) => item.type === 'input' || item.type === 'textarea')
+    .filter((item) => ['input', 'textarea'].includes(item.type))
-    // 根据类型选择合适的表单组件
+    .map((item) => ({
-    .map((item) => {
-      return {
       fieldName: `formFieldsParams.${item.field}`,
       label: item.title,
       component: 'Input',
@@ -85,16 +88,16 @@ export function useGridFormSchema(
         placeholder: `请输入${item.title}`,
         allowClear: true,
       },
-      };
+    }));
-    });
 
   return [...baseFormSchema, ...dynamicFormSchema];
 }
 
 /** 列表的字段 */
 export function useGridColumns(
-  formFields: any[] = [],
+  formFields: FormField[] = [],
-): VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>['columns'] {
+): VxeTableGridOptions['columns'] {
+  // 基础列配置
   const baseColumns: VxeGridPropTypes.Columns<BpmProcessInstanceApi.ProcessInstance> =
     [
       {
@@ -131,8 +134,8 @@ export function useGridColumns(
       },
     ];
 
-  // 添加动态表单字段列，暂时全部以字符串，TODO 展示优化, 按 type 展示控制
+  // 动态表单字段列配置：根据表单字段生成对应的列，从 formVariables 中获取值
-  const formFieldColumns = (formFields || []).map((item) => ({
+  const formFieldColumns = formFields.map((item) => ({
     field: `formVariables.${item.field}`,
     title: item.title,
     minWidth: 120,

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

@@ -2,12 +2,12 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
-import { nextTick, onMounted, ref } from 'vue';
+import { h, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, prompt } from '@vben/common-ui';
 
-import { Input, message } from 'ant-design-vue';
+import { message, Textarea } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProcessDefinition } from '#/api/bpm/definition';
@@ -15,39 +15,28 @@ 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 router = useRouter();
 const { query } = useRoute();
 const processDefinitionId = query.processDefinitionId as string;
 
 const formFields = ref<any[]>([]);
-const userList = ref<any[]>([]); // 用户列表
-const gridReady = ref(false); // 表格是否准备好
-
-// 表格的列需要解析表单字段，这里定义成变量，解析表单字段后再渲染
-let Grid: any = null;
-let gridApi: any = null;
 
 /** 获取流程定义 */
-const getProcessDefinitionData = async () => {
+async function getProcessDefinitionData() {
-  try {
   const processDefinition = await getProcessDefinition(processDefinitionId);
-    if (processDefinition && processDefinition.formFields) {
+  if (processDefinition?.formFields) {
     formFields.value = parseFormCreateFields(processDefinition.formFields);
   }
-  } catch (error) {
+}
-    console.error('获取流程定义失败', error);
-  }
-};
 
 /** 解析表单字段 */
-const parseFormCreateFields = (formFields?: string[]) => {
+function parseFormCreateFields(formFields?: string[]) {
   const result: Array<Record<string, any>> = [];
   if (formFields) {
     formFields.forEach((fieldStr: string) => {
@@ -59,60 +48,54 @@ const parseFormCreateFields = (formFields?: string[]) => {
     });
   }
   return result;
-};
+}
 
 /** 刷新表格 */
 function handleRefresh() {
-  if (gridApi) {
   gridApi.query();
-  }
 }
 
 /** 查看详情 */
-const handleDetail = (row: BpmProcessInstanceApi.ProcessInstance) => {
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) {
   router.push({
     name: 'BpmProcessInstanceDetail',
-    query: {
+    query: { id: row.id },
-      id: row.id,
-    },
   });
-};
+}
 
-/** 取消按钮操作 */
+/** 取消流程实例 */
-const handleCancel = async (row: BpmProcessInstanceApi.ProcessInstance) => {
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) {
   prompt({
-    content: '请输入取消原因：',
+    component: () => {
-    title: '取消流程',
+      return h(Textarea, {
-    icon: 'question',
+        placeholder: '请输入取消原因',
-    component: Input,
+        allowClear: true,
-    modelPropName: 'value',
+        rows: 2,
-    async beforeClose(scope) {
+      });
-      if (!scope.isConfirm) return;
-      if (!scope.value) {
-        message.warning('请输入取消原因');
-        return false;
-      }
-      await cancelProcessInstanceByAdmin(row.id, scope.value);
-      return true;
     },
-  }).then(() => {
+    content: '请输入取消原因',
+    title: '取消流程',
+    modelPropName: 'value',
+  }).then(async (reason) => {
+    if (reason) {
+      await cancelProcessInstanceByAdmin(row.id, reason);
       message.success('取消成功');
       handleRefresh();
+    }
   });
-};
+}
 
-/** 创建表格 */
+const [Grid, gridApi] = useVbenVxeGrid({
-const createGrid = () => {
-  const [GridCompnent, api] = useVbenVxeGrid({
   formOptions: {
-      schema: useGridFormSchema(userList.value, formFields.value),
+    schema: useGridFormSchema(),
   },
   gridOptions: {
-      columns: useGridColumns(formFields.value),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -121,9 +104,7 @@ const createGrid = () => {
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-            // 处理表单值，将 formFieldsParams 对象提取出来
           const { formFieldsParams = {}, ...restValues } = formValues || {};
-
           const params = {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -135,37 +116,24 @@ const createGrid = () => {
         },
       },
     },
-    } as VxeTableGridOptions,
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstance>,
-  });
+});
-
-  Grid = GridCompnent;
-  gridApi = api;
-  gridReady.value = true;
-};
 
 /** 初始化 */
 onMounted(async () => {
-  // 获取用户列表
+  // 获取流程定义
-  userList.value = await getSimpleUserList();
-
-  // 获取流程定义，并获取表单字段。
   await getProcessDefinitionData();
-
+  // 更新表单配置、表格列配置
-  // 解析表单字段后，再创建表格，表格的列依赖于表单字段
+  gridApi.formApi.setState({
-  createGrid();
+    schema: useGridFormSchema(formFields.value),
-
+  });
-  // 确保 DOM 更新完成
+  await gridApi.grid.reloadColumn(useGridColumns(formFields.value) as any[]);
-  await nextTick();
-
-  // 加载表格数据
-  gridApi.query();
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <!-- 动态渲染表格 -->
+    <Grid table-title="流程实例列表">
-    <component :is="Grid" v-if="gridReady" table-title="流程实例列表">
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -179,6 +147,7 @@ onMounted(async () => {
             {
               label: '取消',
               type: 'link',
+              danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['bpm:process-instance:cancel'],
               ifShow: row.status === 1,
@@ -187,6 +156,6 @@ onMounted(async () => {
           ]"
         />
       </template>
-    </component>
+    </Grid>
   </Page>
 </template>