diff --git a/src/assets/svgs/bpm/auditor.svg b/src/assets/svgs/bpm/auditor.svg new file mode 100644 index 00000000..66d2c2c0 --- /dev/null +++ b/src/assets/svgs/bpm/auditor.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/bpm/condition.svg b/src/assets/svgs/bpm/condition.svg new file mode 100644 index 00000000..41ea85dd --- /dev/null +++ b/src/assets/svgs/bpm/condition.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/bpm/copy.svg b/src/assets/svgs/bpm/copy.svg new file mode 100644 index 00000000..8ff3bba6 --- /dev/null +++ b/src/assets/svgs/bpm/copy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/bpm/parallel.svg b/src/assets/svgs/bpm/parallel.svg new file mode 100644 index 00000000..ba0ac675 --- /dev/null +++ b/src/assets/svgs/bpm/parallel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/bpm/starter.svg b/src/assets/svgs/bpm/starter.svg new file mode 100644 index 00000000..c12c7129 --- /dev/null +++ b/src/assets/svgs/bpm/starter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue index 6d25128b..c6c87da5 100644 --- a/src/views/bpm/model/CategoryDraggableModel.vue +++ b/src/views/bpm/model/CategoryDraggableModel.vue @@ -35,7 +35,7 @@ 排序 - + 新建 @@ -150,7 +150,7 @@ @@ -299,12 +299,6 @@ const handleCategoryCommand = (command: string) => { } } -/** 添加/修改操作 */ -const formRef = ref() -const openForm = (type: string, id?: number) => { - formRef.value.open(type, id) -} - /** 删除按钮操作 */ const handleDelete = async (row: any) => { try { @@ -481,8 +475,8 @@ const handleDeleteGroup = async () => { // 添加流程模型弹窗 const modelFormRef = ref() -const handleAddModel = (type: string) => { - modelFormRef.value.open(type) +const openModelForm = (type: string, id?: number) => { + modelFormRef.value.open(type, id) } watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true }) diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue index f36afd60..7c87d55f 100644 --- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue +++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue @@ -9,103 +9,112 @@ :icon="getApprovalNodeIcon(activity.status, activity.nodeType)" :color="getApprovalNodeColor(activity.status)" > +
-
{{ activity.name }}
+ +
+
{{ activity.name }}
+ +
+ {{ getApprovalNodeTime(activity) }} +
+
-
-
- - - - {{ 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 }} +
- -
- {{ getApprovalNodeTime(activity) }} -
@@ -117,16 +126,21 @@ 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[] // 审批节点信息 }>() // 审批节点 - const statusIconMap2 = { // 未开始 - '-1': { color: '#e5e7ec', icon: 'ep-clock' }, + '-1': { color: '#909398', icon: 'ep-clock' }, // 待审批 '0': { color: '#e5e7ec', icon: 'ep:loading' }, // 审批中 @@ -147,7 +161,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 +179,27 @@ const statusIconMap = { '7': { color: '#00b32a', icon: Check } } +const nodeTypeSvgMap = { + // 发起人节点 + [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg }, + // 审批人节点 + [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg }, + // 抄送人节点 + [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg }, + // 条件分支节点 + [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg }, + // 并行分支节点 + [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 +} + const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => { if (taskStatus == TaskStatusEnum.NOT_START) { return statusIconMap[taskStatus]?.icon @@ -181,13 +216,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)}` } }