@@ -70,7 +94,7 @@
-
-
- {{ getApprovalNodeTime(activity) }}
-
@@ -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)}`
}
}