From ae95eb33672cf976bc8b71c9d750baea429580a7 Mon Sep 17 00:00:00 2001 From: jason <2667446@qq.com> Date: Sat, 21 Jun 2025 22:05:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20[BPM=20=E5=B7=A5=E4=BD=9C=E6=B5=81]=20S?= =?UTF-8?q?imple=20=E6=B5=8F=E8=A7=88=E6=A8=A1=E5=BC=8F=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=AE=A1=E6=89=B9=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/nodes/end-event-node.vue | 29 ++++++--- .../nodes/modules/process-instance-data.ts | 56 +++++++++++++++++ .../nodes/modules/process-instance-modal.vue | 44 +++++++++++++ .../nodes/modules/task-list-data.ts | 61 +++++++++++++++++++ .../nodes/modules/task-list-modal.vue | 47 ++++++++++++++ .../components/nodes/start-user-node.vue | 29 +++++---- .../components/nodes/user-task-node.vue | 42 +++++++++++-- 7 files changed, 283 insertions(+), 25 deletions(-) create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts create mode 100644 apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue index c03fac9c9..bf6a2c1a9 100644 --- a/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/end-event-node.vue @@ -5,7 +5,10 @@ import type { SimpleFlowNode } from '../../consts'; import { inject, ref } from 'vue'; +import { useVbenModal } from '@vben/common-ui'; + import { useTaskStatusClass, useWatchNode } from '../../helpers'; +import ProcessInstanceModal from './modules/process-instance-modal.vue'; defineOptions({ name: 'EndEventNode' }); const props = defineProps({ @@ -20,15 +23,26 @@ const currentNode = useWatchNode(props); const readonly = inject('readonly'); const processInstance = inject>('processInstance', ref({})); -const processInstanceInfos = ref([]); // 流程的审批信息 +const [Modal, modalApi] = useVbenModal({ + connectedComponent: ProcessInstanceModal, + destroyOnClose: true, +}); function nodeClick() { if (readonly && processInstance && processInstance.value) { - console.warn( - 'TODO 只读模式，弹窗显示审批信息', - processInstance.value, - processInstanceInfos.value, - ); + const processInstanceInfo = [ + { + startUser: processInstance.value.startUser, + createTime: processInstance.value.startTime, + endTime: processInstance.value.endTime, + status: processInstance.value.status, + durationInMillis: processInstance.value.durationInMillis, + }, + ]; + modalApi + .setData(processInstanceInfo) + .setState({ title: '流程信息' }) + .open(); } } @@ -42,5 +56,6 @@ function nodeClick() { 结束 - + + diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts new file mode 100644 index 000000000..b9f58027d --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-data.ts @@ -0,0 +1,56 @@ +import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; + +import { DICT_TYPE } from '#/utils'; + +/** 流程实例列表字段 */ +export function useGridColumns(): VxeTableGridOptions['columns'] { + return [ + { + field: 'startUser', + title: '发起人', + slots: { + default: ({ row }: { row: any }) => { + return row.startUser?.nickname; + }, + }, + minWidth: 100, + }, + { + field: 'deptName', + title: '部门', + slots: { + default: ({ row }: { row: any }) => { + return row.startUser?.deptName; + }, + }, + minWidth: 100, + }, + { + field: 'createTime', + title: '开始时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'endTime', + title: '结束时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'status', + title: '流程状态', + minWidth: 90, + cellRender: { + name: 'CellDict', + props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS }, + }, + }, + { + field: 'durationInMillis', + title: '耗时', + minWidth: 100, + formatter: 'formatPast2', + }, + ]; +} diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue new file mode 100644 index 000000000..e9ddbf34b --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/process-instance-modal.vue @@ -0,0 +1,44 @@ + + + diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts new file mode 100644 index 000000000..124ec6142 --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-data.ts @@ -0,0 +1,61 @@ +import type { VxeTableGridOptions } from '@vben/plugins/vxe-table'; + +import { DICT_TYPE } from '#/utils'; + +/** 审批记录列表字段 */ +export function useGridColumns(): VxeTableGridOptions['columns'] { + return [ + { + field: 'assigneeUser', + title: '审批人', + slots: { + default: ({ row }: { row: any }) => { + return row.assigneeUser?.nickname || row.ownerUser?.nickname; + }, + }, + minWidth: 100, + }, + { + field: 'deptName', + title: '部门', + slots: { + default: ({ row }: { row: any }) => { + return row.assigneeUser?.deptName || row.ownerUser?.deptName; + }, + }, + minWidth: 100, + }, + { + field: 'createTime', + title: '开始时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'endTime', + title: '结束时间', + formatter: 'formatDateTime', + minWidth: 140, + }, + { + field: 'status', + title: '审批状态', + minWidth: 90, + cellRender: { + name: 'CellDict', + props: { type: DICT_TYPE.BPM_TASK_STATUS }, + }, + }, + { + field: 'reason', + title: '审批建议', + minWidth: 160, + }, + { + field: 'durationInMillis', + title: '耗时', + minWidth: 100, + formatter: 'formatPast2', + }, + ]; +} diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue new file mode 100644 index 000000000..a5e7e40e7 --- /dev/null +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/modules/task-list-modal.vue @@ -0,0 +1,47 @@ + + + diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue index 74fffa992..c6acbe0ec 100644 --- a/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/start-user-node.vue @@ -6,6 +6,7 @@ import type { SimpleFlowNode } from '../../consts'; import { inject, ref } from 'vue'; +import { useVbenModal } from '@vben/common-ui'; import { IconifyIcon } from '@vben/icons'; import { Input } from 'ant-design-vue'; @@ -15,6 +16,7 @@ import { BpmNodeTypeEnum } from '#/utils'; import { NODE_DEFAULT_TEXT } from '../../consts'; import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers'; import StartUserNodeConfig from '../nodes-config/start-user-node-config.vue'; +import TaskListModal from './modules/task-list-modal.vue'; import NodeHandler from './node-handler.vue'; defineOptions({ name: 'StartUserNode' }); @@ -27,7 +29,6 @@ const props = defineProps({ }); // 定义事件，更新父组件。 -// const emits = defineEmits<{ defineEmits<{ 'update:modelValue': [node: SimpleFlowNode | undefined]; }>(); @@ -44,24 +45,25 @@ const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2( const nodeSetting = ref(); -// 任务的弹窗显示，用于只读模式 -const selectTasks = ref([]); // 选中的任务数组 - +const [Modal, modalApi] = useVbenModal({ + connectedComponent: TaskListModal, + destroyOnClose: true, +}); function nodeClick() { if (readonly) { // 只读模式，弹窗显示任务信息 if (tasks && tasks.value) { - console.warn( - 'TODO 只读模式，弹窗显示任务信息', - tasks.value, - selectTasks.value, + // 过滤出当前节点的任务 + const nodeTasks = tasks.value.filter( + (task) => task.taskDefinitionKey === currentNode.value.id, ); + // 弹窗显示任务信息 + modalApi + .setData(nodeTasks) + .setState({ title: currentNode.value.name }) + .open(); } } else { - console.warn( - 'TODO 编辑模式，打开节点配置、把当前节点传递给配置组件', - nodeSetting.value, - ); nodeSetting.value.showStartUserNodeConfig(currentNode.value); } } @@ -122,5 +124,6 @@ function nodeClick() { ref="nodeSetting" :flow-node="currentNode" /> - + + diff --git a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue index 3acb853ca..9f7ee6bf1 100644 --- a/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue +++ b/apps/web-antd/src/components/simple-process-design/components/nodes/user-task-node.vue @@ -5,6 +5,7 @@ import type { SimpleFlowNode } from '../../consts'; import { inject, ref } from 'vue'; +import { useVbenModal } from '@vben/common-ui'; import { IconifyIcon } from '@vben/icons'; import { Input } from 'ant-design-vue'; @@ -14,6 +15,26 @@ import { BpmNodeTypeEnum } from '#/utils'; import { NODE_DEFAULT_TEXT } from '../../consts'; import { useNodeName2, useTaskStatusClass, useWatchNode } from '../../helpers'; import UserTaskNodeConfig from '../nodes-config/user-task-node-config.vue'; +import TaskListModal from './modules/task-list-modal.vue'; +// // 使用useVbenVxeGrid +// const [Grid, gridApi] = useVbenVxeGrid({ +// gridOptions: { +// columns: columns.value, +// keepSource: true, +// border: true, +// height: 'auto', +// data: selectTasks.value, +// rowConfig: { +// keyField: 'id', +// }, +// pagerConfig: { +// enabled: false, +// }, +// toolbarConfig: { +// enabled: false, +// }, +// } as VxeTableGridOptions, +// }); import NodeHandler from './node-handler.vue'; defineOptions({ name: 'UserTaskNode' }); @@ -42,11 +63,23 @@ const { showInput, changeNodeName, clickTitle, inputRef } = useNodeName2( ); const nodeSetting = ref(); +const [Modal, modalApi] = useVbenModal({ + connectedComponent: TaskListModal, + destroyOnClose: true, +}); + function nodeClick() { if (readonly) { if (tasks && tasks.value) { - // 只读模式，弹窗显示任务信息 TODO 待实现 - console.warn('只读模式，弹窗显示任务信息待实现'); + // 过滤出当前节点的任务 + const nodeTasks = tasks.value.filter( + (task) => task.taskDefinitionKey === currentNode.value.id, + ); + // 弹窗显示任务信息 + modalApi + .setData(nodeTasks) + .setState({ title: currentNode.value.name }) + .open(); } } else { // 编辑模式，打开节点配置、把当前节点传递给配置组件 @@ -64,8 +97,6 @@ function findReturnTaskNodes( // 从父节点查找 emits('findParentNode', matchNodeList, BpmNodeTypeEnum.USER_TASK_NODE); } - -// const selectTasks = ref([]); // 选中的任务数组