From c7ecb0a69f3cfcf6eaebd70dd51892844beaa3fc Mon Sep 17 00:00:00 2001 From: GoldenZqqq <1361001127@qq.com> Date: Wed, 23 Oct 2024 10:58:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81=E5=AE=A1?= =?UTF-8?q?=E6=89=B9=E9=A1=B5=E9=9D=A2-=E6=97=B6=E9=97=B4=E7=BA=BF?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80=E9=87=8D?= =?UTF-8?q?=E6=9E=84=E4=B8=8E=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svgs/bpm/condition.svg | 2 +- src/assets/svgs/bpm/copy.svg | 2 +- src/assets/svgs/bpm/parallel.svg | 2 +- .../detail/ProcessInstanceTimeline.vue | 244 ++++++------------ 4 files changed, 81 insertions(+), 169 deletions(-) diff --git a/src/assets/svgs/bpm/condition.svg b/src/assets/svgs/bpm/condition.svg index 4b572ee4..41ea85dd 100644 --- a/src/assets/svgs/bpm/condition.svg +++ b/src/assets/svgs/bpm/condition.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svgs/bpm/copy.svg b/src/assets/svgs/bpm/copy.svg index 736fd767..8ff3bba6 100644 --- a/src/assets/svgs/bpm/copy.svg +++ b/src/assets/svgs/bpm/copy.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svgs/bpm/parallel.svg b/src/assets/svgs/bpm/parallel.svg index 46aa962f..ba0ac675 100644 --- a/src/assets/svgs/bpm/parallel.svg +++ b/src/assets/svgs/bpm/parallel.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue index cda01889..7c87d55f 100644 --- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue +++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue @@ -38,88 +38,80 @@
-
-
- - - - {{ task.assigneeUser.nickname.substring(0, 1) }} - - - - {{ task.ownerUser.nickname.substring(0, 1) }} - - +
+
+
- + + + +
+ +
-
-
- +
- {{ task.assigneeUser.nickname }} -
-
- {{ task.ownerUser.nickname }} -
-
- 审批意见：{{ task.reason }} -
-
-
-
- -
-
-
- - - - {{ user.nickname.substring(0, 1) }} - - -
- -
-
-
- -
+ + + {{ user.nickname.substring(0, 1) }} + {{ user.nickname }} + + +
+ +
+
+ 审批意见：{{ task.reason }} +
@@ -141,93 +133,9 @@ import conditionSvg from '@/assets/svgs/bpm/condition.svg' import parallelSvg from '@/assets/svgs/bpm/parallel.svg' defineOptions({ name: 'BpmProcessInstanceTimeline' }) -// defineProps<{ -// approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息 -// }>() -const approveNodes = [ - { - id: 1, - name: '发起审批', - nodeType: NodeType.START_USER_NODE, - status: TaskStatusEnum.NOT_START, - startTime: new Date('2024-10-01 10:00:00'), - endTime: null, - candidateUsers: [], - tasks: [] - }, - { - id: 2, - name: '经理审批', - nodeType: NodeType.USER_TASK_NODE, - status: TaskStatusEnum.RUNNING, // 审批中 - startTime: new Date('2024-10-02 11:00:00'), - endTime: null, - candidateUsers: [ - { - nickname: '张经理', - avatar: 'https://picsum.photos/200?r=1' - }, - { - nickname: '张经理', - avatar: 'https://picsum.photos/200?r=1' - }, - { - nickname: '张经理', - avatar: 'https://picsum.photos/200?r=1' - }, - { - nickname: '张经理', - avatar: 'https://picsum.photos/200?r=1' - } - ], - tasks: [ - { - assigneeUser: { - nickname: '李经理', - avatar: 'https://picsum.photos/200?r=1' - }, - ownerUser: null, - status: TaskStatusEnum.RUNNING, // 审批中 - reason: '同意' - } - ] - }, - { - id: 3, - name: '财务审批', - nodeType: NodeType.USER_TASK_NODE, - status: TaskStatusEnum.APPROVE, // 审批通过 - startTime: new Date('2024-10-03 14:00:00'), - endTime: new Date('2024-10-03 15:00:00'), - candidateUsers: [], - tasks: [ - { - assigneeUser: { - nickname: '王财务', - avatar: 'https://picsum.photos/200?r=1' - }, - ownerUser: null, - status: TaskStatusEnum.APPROVE, // 审批通过 - reason: '审批通过' - } - ] - }, - { - id: 4, - name: '总经理审批', - nodeType: NodeType.USER_TASK_NODE, - status: TaskStatusEnum.NOT_START, // 未开始 - startTime: null, - endTime: null, - candidateUsers: [ - { - nickname: '总经理', - avatar: 'https://picsum.photos/200?r=1' - } - ], - tasks: [] - } -] +defineProps<{ + approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息 +}>() // 审批节点 const statusIconMap2 = { @@ -273,17 +181,21 @@ const statusIconMap = { const nodeTypeSvgMap = { // 发起人节点 - [NodeType.START_USER_NODE]: { color: '', svg: starterSvg }, + [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg }, // 审批人节点 - [NodeType.USER_TASK_NODE]: { color: '', svg: auditorSvg }, + [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg }, // 抄送人节点 - [NodeType.COPY_TASK_NODE]: { color: '', svg: copySvg }, + [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg }, // 条件分支节点 - [NodeType.CONDITION_NODE]: { color: '', svg: conditionSvg }, + [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg }, // 并行分支节点 - [NodeType.PARALLEL_BRANCH_NODE]: { color: '', svg: parallelSvg } + [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg } } +// 只有只有状态是 -1、0、1 才展示头像右小角状态小icon +const onlyStatusIconShow = [-1, 0, 1] + +// timeline时间线上icon图标 const getApprovalNodeImg = (nodeType: NodeType) => { return nodeTypeSvgMap[nodeType]?.svg }