From 1ed485fe3e180c57d0846caa30f7a9a5618da2fc Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 21 Oct 2025 12:44:03 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91bpm=20proces?= =?UTF-8?q?sInstance/manager=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 --- .../views/bpm/processInstance/manager/data.ts | 38 +----------- .../bpm/processInstance/manager/index.vue | 59 ++++++++++--------- 2 files changed, 34 insertions(+), 63 deletions(-) diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts index 1815cc2b5..46025b6f5 100644 --- a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts +++ b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts @@ -1,14 +1,9 @@ import type { VbenFormSchema } from '#/adapter/form'; import type { VxeTableGridOptions } from '#/adapter/vxe-table'; -import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance'; - -import { h } from 'vue'; import { DICT_TYPE } from '@vben/constants'; import { getDictOptions } from '@vben/hooks'; -import { Button } from 'ant-design-vue'; - import { getCategorySimpleList } from '#/api/bpm/category'; import { getSimpleUserList } from '#/api/system/user'; import { getRangePickerDefaultProps } from '#/utils'; @@ -46,7 +41,6 @@ export function useGridFormSchema(): VbenFormSchema[] { allowClear: true, }, }, - // 流程分类 { fieldName: 'category', label: '流程分类', @@ -59,7 +53,6 @@ export function useGridFormSchema(): VbenFormSchema[] { valueField: 'code', }, }, - // 流程状态 { fieldName: 'status', label: '流程状态', @@ -73,7 +66,6 @@ export function useGridFormSchema(): VbenFormSchema[] { allowClear: true, }, }, - // 发起时间 { fieldName: 'createTime', label: '发起时间', @@ -87,9 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] { } /** 列表的字段 */ -export function useGridColumns( - onTaskClick: (task: BpmProcessInstanceApi.Task) => void, -): VxeTableGridOptions['columns'] { +export function useGridColumns(): VxeTableGridOptions['columns'] { return [ { field: 'id', @@ -103,27 +93,22 @@ export function useGridColumns( minWidth: 200, fixed: 'left', }, - { field: 'categoryName', title: '流程分类', minWidth: 120, fixed: 'left', }, - { field: 'startUser.nickname', title: '流程发起人', minWidth: 120, }, - { field: 'startUser.deptName', title: '发起部门', minWidth: 120, }, - - // 流程状态 { field: 'status', title: '流程状态', @@ -133,7 +118,6 @@ export function useGridColumns( props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS }, }, }, - { field: 'startTime', title: '发起时间', @@ -152,29 +136,11 @@ export function useGridColumns( minWidth: 180, formatter: 'formatPast2', }, - - // 当前审批任务 tasks { field: 'tasks', title: '当前审批任务', minWidth: 320, - slots: { - default: ({ row }) => { - if (!row?.tasks?.length) return '-'; - - return row.tasks.map((task: BpmProcessInstanceApi.Task) => - h( - Button, - { - type: 'link', - size: 'small', - onClick: () => onTaskClick(task), - }, - { default: () => task.name }, - ), - ); - }, - }, + slots: { default: 'tasks' }, }, { title: '操作', diff --git a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue index 5f2abc6fe..592b7ee8c 100644 --- a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue +++ b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue @@ -7,7 +7,7 @@ import { h } from 'vue'; import { DocAlert, Page, prompt } from '@vben/common-ui'; import { BpmProcessInstanceStatus } from '@vben/constants'; -import { message, Textarea } from 'ant-design-vue'; +import { Button, message, Textarea } from 'ant-design-vue'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { @@ -26,15 +26,19 @@ function handleRefresh() { gridApi.query(); } -/** 点击任务 */ -function onTaskClick(task: BpmProcessInstanceApi.Task) { - // TODO 待实现 - console.warn(task); +/** 查看任务详情 */ +function handleTaskDetail( + row: BpmProcessInstanceApi.ProcessInstance, + task: BpmProcessInstanceApi.Task, +) { + router.push({ + name: 'BpmProcessInstanceDetail', + query: { id: row.id, taskId: task.id }, + }); } /** 查看流程实例 */ function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) { - console.warn(row); router.push({ name: 'BpmProcessInstanceDetail', query: { id: row.id }, @@ -44,36 +48,23 @@ function handleDetail(row: BpmProcessInstanceApi.ProcessInstance) { /** 取消流程实例 */ function handleCancel(row: BpmProcessInstanceApi.ProcessInstance) { prompt({ - async beforeClose(scope) { - if (scope.isConfirm) { - if (scope.value) { - try { - await cancelProcessInstanceByAdmin(row.id, scope.value); - message.success('取消成功'); - handleRefresh(); - } catch { - return false; - } - } else { - message.error('请输入取消原因'); - return false; - } - } - }, component: () => { return h(Textarea, { placeholder: '请输入取消原因', allowClear: true, rows: 2, - rules: [{ required: true, message: '请输入取消原因' }], }); }, content: '请输入取消原因', title: '取消流程', modelPropName: 'value', - }) - .then(() => {}) - .catch(() => {}); + }).then(async (reason) => { + if (reason) { + await cancelProcessInstanceByAdmin(row.id, reason); + message.success('取消成功'); + handleRefresh(); + } + }); } const [Grid, gridApi] = useVbenVxeGrid({ @@ -81,7 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ schema: useGridFormSchema(), }, gridOptions: { - columns: useGridColumns(onTaskClick), + columns: useGridColumns(), height: 'auto', keepSource: true, proxyConfig: { @@ -97,6 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, rowConfig: { keyField: 'id', + isHover: true, }, toolbarConfig: { refresh: true, @@ -113,6 +105,19 @@ const [Grid, gridApi] = useVbenVxeGrid({ +