+ ![]()
+
+
+
+
+
+
-
{{ activity.name }}
+
+
+
{{ activity.name }}
+
+
+ {{ getApprovalNodeTime(activity) }}
+
+
@@ -70,7 +94,7 @@
-
-
@@ -117,16 +134,105 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { TaskStatusEnum } from '@/api/bpm/task'
import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
+import starterSvg from '@/assets/svgs/bpm/starter.svg'
+import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
+import copySvg from '@/assets/svgs/bpm/copy.svg'
+import conditionSvg from '@/assets/svgs/bpm/condition.svg'
+import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+
defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps<{
- approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
-}>()
+// 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: []
+ }
+]
// 审批节点
-
const statusIconMap2 = {
// 未开始
- '-1': { color: '#e5e7ec', icon: 'ep-clock' },
+ '-1': { color: '#909398', icon: 'ep-clock' },
// 待审批
'0': { color: '#e5e7ec', icon: 'ep:loading' },
// 审批中
@@ -147,7 +253,7 @@ const statusIconMap2 = {
const statusIconMap = {
// 审批未开始
- '-1': { color: '#e5e7ec', icon: Clock },
+ '-1': { color: '#909398', icon: Clock },
'0': { color: '#e5e7ec', icon: Clock },
// 审批中
'1': { color: '#448ef7', icon: Loading },
@@ -165,6 +271,23 @@ const statusIconMap = {
'7': { color: '#00b32a', icon: Check }
}
+const nodeTypeSvgMap = {
+ // 发起人节点
+ [NodeType.START_USER_NODE]: { color: '', svg: starterSvg },
+ // 审批人节点
+ [NodeType.USER_TASK_NODE]: { color: '', svg: auditorSvg },
+ // 抄送人节点
+ [NodeType.COPY_TASK_NODE]: { color: '', svg: copySvg },
+ // 条件分支节点
+ [NodeType.CONDITION_NODE]: { color: '', svg: conditionSvg },
+ // 并行分支节点
+ [NodeType.PARALLEL_BRANCH_NODE]: { color: '', svg: parallelSvg }
+}
+
+const getApprovalNodeImg = (nodeType: NodeType) => {
+ return nodeTypeSvgMap[nodeType]?.svg
+}
+
const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
if (taskStatus == TaskStatusEnum.NOT_START) {
return statusIconMap[taskStatus]?.icon
@@ -181,13 +304,13 @@ const getApprovalNodeColor = (taskStatus: number) => {
const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
- return `发起时间：${formatDate(node.startTime)}`
+ return `${formatDate(node.startTime)}`
}
if (node.endTime) {
- return `审批时间：${formatDate(node.endTime)}`
+ return `${formatDate(node.endTime)}`
}
if (node.startTime) {
- return `创建时间：${formatDate(node.startTime)}`
+ return `${formatDate(node.startTime)}`
}
}
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 3/3] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
=?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2-=E6=97=B6=E9=97=B4?=
=?UTF-8?q?=E7=BA=BF=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?=
=?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=8E=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?=
=?UTF-8?q?=E8=B0=83=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 @@
@@ -99,13 +123,6 @@
- {{ getApprovalNodeTime(activity) }}
-
-
-
@@ -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
}
-
-
- {{ task.assigneeUser.nickname.substring(0, 1) }}
-
-
- {{ task.ownerUser.nickname.substring(0, 1) }}
-
-
+
-
-
+
-
+
-
-
+ {{ task.assigneeUser?.nickname.substring(0, 1) }}
+
+ {{ task.assigneeUser?.nickname }}
+
+
+
+ {{ task.ownerUser?.nickname.substring(0, 1) }}
+
+ {{ task.ownerUser?.nickname }}
+
+
+
-
+
-
+
-
- {{ task.assigneeUser.nickname }}
-
-
- {{ task.ownerUser.nickname }}
-
-
- 审批意见：{{ task.reason }}
-
-
-
-
-
-
- {{ user.nickname.substring(0, 1) }}
-
-
-
-
-
-
-
-
+
+
+ {{ user.nickname.substring(0, 1) }}
+
{{ user.nickname }}
+
+
+
+
+ 审批意见：{{ task.reason }}
+