diff --git a/apps/web-antd/src/views/bpm/processInstance/report/data.ts b/apps/web-antd/src/views/bpm/processInstance/report/data.ts index 6db9cf278..dc099b5bf 100644 --- a/apps/web-antd/src/views/bpm/processInstance/report/data.ts +++ b/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: any[] = [], + formFields: FormField[] = [], ): VbenFormSchema[] { - // 基础搜索字段 - const baseFormSchema = [ + // 基础搜索字段配置 + const baseFormSchema: VbenFormSchema[] = [ { fieldName: 'startUserId', label: '发起人', - component: 'Select', + component: 'ApiSelect', componentProps: { placeholder: '请选择发起人', allowClear: true, - options: userList.map((user) => ({ - label: user.nickname, - value: user.id, - })), + api: getSimpleUserList, + labelField: 'nickname', + valueField: 'id', }, }, { @@ -72,29 +77,27 @@ export function useGridFormSchema( }, ]; - // 动态表单字段 暂时只支持 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, - }, - }; - }); + // 动态表单字段配置：目前支持 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: any[] = [], -): VxeTableGridOptions['columns'] { + formFields: FormField[] = [], +): VxeTableGridOptions['columns'] { + // 基础列配置 const baseColumns: VxeGridPropTypes.Columns = [ { @@ -131,8 +134,8 @@ export function useGridColumns( }, ]; - // 添加动态表单字段列，暂时全部以字符串，TODO 展示优化, 按 type 展示控制 - const formFieldColumns = (formFields || []).map((item) => ({ + // 动态表单字段列配置：根据表单字段生成对应的列，从 formVariables 中获取值 + const formFieldColumns = formFields.map((item) => ({ field: `formVariables.${item.field}`, title: item.title, minWidth: 120, diff --git a/apps/web-antd/src/views/bpm/processInstance/report/index.vue b/apps/web-antd/src/views/bpm/processInstance/report/index.vue index 786bc7561..926889596 100644 --- a/apps/web-antd/src/views/bpm/processInstance/report/index.vue +++ b/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([]); -const userList = ref([]); // 用户列表 -const gridReady = ref(false); // 表格是否准备好 - -// 表格的列需要解析表单字段，这里定义成变量，解析表单字段后再渲染 -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); +async function getProcessDefinitionData() { + const processDefinition = await getProcessDefinition(processDefinitionId); + if (processDefinition?.formFields) { + formFields.value = parseFormCreateFields(processDefinition.formFields); } -}; +} /** 解析表单字段 */ -const parseFormCreateFields = (formFields?: string[]) => { +function parseFormCreateFields(formFields?: string[]) { const result: Array> = []; if (formFields) { formFields.forEach((fieldStr: string) => { @@ -59,113 +48,92 @@ const parseFormCreateFields = (formFields?: string[]) => { }); } return result; -}; +} /** 刷新表格 */ function handleRefresh() { - if (gridApi) { - gridApi.query(); - } + gridApi.query(); } /** 查看详情 */ -const handleDetail = (row: BpmProcessInstanceApi.ProcessInstance) => { +function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) { router.push({ name: 'BpmProcessInstanceDetail', - query: { - id: row.id, - }, + query: { id: row.id }, }); -}; +} -/** 取消按钮操作 */ -const handleCancel = async (row: BpmProcessInstanceApi.ProcessInstance) => { +/** 取消流程实例 */ +function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) { prompt({ - content: '请输入取消原因：', + component: () => { + return h(Textarea, { + placeholder: '请输入取消原因', + allowClear: true, + rows: 2, + }); + }, + content: '请输入取消原因', title: '取消流程', - icon: 'question', - component: Input, modelPropName: 'value', - async beforeClose(scope) { - if (!scope.isConfirm) return; - if (!scope.value) { - message.warning('请输入取消原因'); - return false; - } - await cancelProcessInstanceByAdmin(row.id, scope.value); - return true; - }, - }).then(() => { - message.success('取消成功'); - handleRefresh(); + }).then(async (reason) => { + if (reason) { + await cancelProcessInstanceByAdmin(row.id, reason); + message.success('取消成功'); + handleRefresh(); + } }); -}; +} -/** 创建表格 */ -const createGrid = () => { - const [GridCompnent, api] = useVbenVxeGrid({ - formOptions: { - schema: useGridFormSchema(userList.value, formFields.value), +const [Grid, gridApi] = useVbenVxeGrid({ + formOptions: { + schema: useGridFormSchema(), + }, + gridOptions: { + columns: useGridColumns(), + height: 'auto', + keepSource: true, + rowConfig: { + keyField: 'id', + isHover: true, }, - gridOptions: { - columns: useGridColumns(formFields.value), - height: 'auto', - keepSource: true, - rowConfig: { - keyField: 'id', - }, - toolbarConfig: { - refresh: true, - 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); - }, + 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, - }); - - Grid = GridCompnent; - gridApi = api; - gridReady.value = true; -}; + }, + } as VxeTableGridOptions, +}); /** 初始化 */ onMounted(async () => { - // 获取用户列表 - userList.value = await getSimpleUserList(); - - // 获取流程定义，并获取表单字段。 + // 获取流程定义 await getProcessDefinitionData(); - - // 解析表单字段后，再创建表格，表格的列依赖于表单字段 - createGrid(); - - // 确保 DOM 更新完成 - await nextTick(); - - // 加载表格数据 - gridApi.query(); + // 更新表单配置、表格列配置 + gridApi.formApi.setState({ + schema: useGridFormSchema(formFields.value), + }); + await gridApi.grid.reloadColumn(useGridColumns(formFields.value) as any[]); });