From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue | 361 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 361 insertions(+), 0 deletions(-)
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
new file mode 100644
index 0000000..91f333e
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -0,0 +1,361 @@
+<!-- 瀹℃壒璇︽儏鐨勫彸渚э細瀹℃壒娴� -->
+<template>
+ <el-timeline class="pt-20px">
+ <!-- 閬嶅巻姣忎釜瀹℃壒鑺傜偣 -->
+ <el-timeline-item
+ v-for="(activity, index) in activityNodes"
+ :key="index"
+ size="large"
+ :icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
+ :color="getApprovalNodeColor(activity.status)"
+ >
+ <template #dot>
+ <div
+ class="position-absolute left--10px top--6px rounded-full border border-solid border-#dedede w-30px h-30px flex justify-center items-center bg-#3f73f7 p-5px"
+ >
+ <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
+ <div
+ v-if="props.showStatusIcon"
+ class="position-absolute top-17px left-17px rounded-full flex items-center p-1px border-2 border-white border-solid"
+ :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
+ >
+ <el-icon :size="11" color="#fff">
+ <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
+ </el-icon>
+ </div>
+ </div>
+ </template>
+ <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}-${index}`">
+ <!-- 绗竴琛岋細鑺傜偣鍚嶇О銆佹椂闂� -->
+ <div class="flex w-full">
+ <div class="font-bold">
+ {{ activity.name }} <span v-if="activity.status === TaskStatusEnum.SKIP">銆愯烦杩囥��</span>
+ </div>
+ <!-- 淇℃伅锛氭椂闂� -->
+ <div
+ v-if="activity.status !== TaskStatusEnum.NOT_START"
+ class="text-#a5a5a5 text-13px mt-1 ml-auto"
+ >
+ {{ getApprovalNodeTime(activity) }}
+ </div>
+ </div>
+ <div v-if="activity.nodeType === NodeType.CHILD_PROCESS_NODE">
+ <el-button
+ type="primary"
+ plain
+ size="small"
+ @click="handleChildProcess(activity)"
+ :disabled="!activity.processInstanceId"
+ >
+ 鏌ョ湅瀛愭祦绋�
+ </el-button>
+ </div>
+ <!-- 闇�瑕佽嚜瀹氫箟閫夋嫨瀹℃壒浜� -->
+ <div
+ class="flex flex-wrap gap2 items-center"
+ v-if="
+ isEmpty(activity.tasks) &&
+ ((CandidateStrategy.START_USER_SELECT === activity.candidateStrategy &&
+ isEmpty(activity.candidateUsers)) ||
+ (props.enableApproveUserSelect &&
+ CandidateStrategy.APPROVE_USER_SELECT === activity.candidateStrategy))
+ "
+ >
+ <!-- && activity.nodeType === NodeType.USER_TASK_NODE -->
+ <el-tooltip content="娣诲姞鐢ㄦ埛" placement="left">
+ <el-button
+ class="!px-6px"
+ @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
+ >
+ <img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" />
+ </el-button>
+ </el-tooltip>
+ <div
+ v-for="(user, idx1) in customApproveUsers[activity.id]"
+ :key="idx1"
+ class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+ >
+ <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
+ <el-avatar class="!m-5px" :size="28" v-else>
+ {{ user.nickname.substring(0, 1) }}
+ </el-avatar>
+ {{ user.nickname }}
+ </div>
+ </div>
+ <div v-else class="flex items-center flex-wrap mt-1 gap2">
+ <!-- 鎯呭喌涓�锛氶亶鍘嗘瘡涓鎵硅妭鐐逛笅鐨勩�愯繘琛屼腑銆憈ask 浠诲姟 -->
+ <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
+ <div
+ class="position-relative flex flex-wrap gap2"
+ v-if="task.assigneeUser || task.ownerUser"
+ >
+ <!-- 淇℃伅锛氬ご鍍忔樀绉� -->
+ <div
+ class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+ >
+ <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
+ <el-avatar
+ class="!m-5px"
+ :size="28"
+ v-if="task.assigneeUser?.avatar"
+ :src="task.assigneeUser?.avatar"
+ />
+ <el-avatar class="!m-5px" :size="28" v-else>
+ {{ task.assigneeUser?.nickname.substring(0, 1) }}
+ </el-avatar>
+ {{ task.assigneeUser?.nickname }}
+ </template>
+ <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
+ <el-avatar
+ class="!m-5px"
+ :size="28"
+ v-if="task.ownerUser?.avatar"
+ :src="task.ownerUser?.avatar"
+ />
+ <el-avatar class="!m-5px" :size="28" v-else>
+ {{ task.ownerUser?.nickname.substring(0, 1) }}
+ </el-avatar>
+ {{ task.ownerUser?.nickname }}
+ </template>
+ <!-- 淇℃伅锛氫换鍔� ICON -->
+ <div
+ v-if="props.showStatusIcon && onlyStatusIconShow.includes(task.status)"
+ class="position-absolute top-19px left-23px rounded-full flex items-center p-1px border-2 border-white border-solid"
+ :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
+ >
+ <Icon :size="11" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
+ </div>
+ </div>
+ </div>
+ <teleport defer :to="`#activity-task-${activity.id}-${index}`">
+ <div
+ v-if="
+ task.reason &&
+ [NodeType.USER_TASK_NODE, NodeType.END_EVENT_NODE].includes(activity.nodeType)
+ "
+ class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+ >
+ <!-- TODO lesan锛氳繖閲屽鏋滄槸鍔炵悊锛岄渶瑕佹槸鍔炵悊鎰忚 -->
+ 瀹℃壒鎰忚锛歿{ task.reason }}
+ </div>
+ <div
+ v-if="task.signPicUrl && activity.nodeType === NodeType.USER_TASK_NODE"
+ class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+ >
+ 绛惧悕锛�
+ <el-image
+ class="w-90px h-40px ml-5px"
+ :src="task.signPicUrl"
+ :preview-src-list="[task.signPicUrl]"
+ />
+ </div>
+ </teleport>
+ </div>
+ <!-- 鎯呭喌浜岋細閬嶅巻姣忎釜瀹℃壒鑺傜偣涓嬬殑銆愬�欓�夌殑銆憈ask 浠诲姟銆備緥濡傝锛�1锛変緷娆″鎵癸紝2锛夋湭鏉ョ殑瀹℃壒浠诲姟绛� -->
+ <div
+ v-for="(user, idx1) in activity.candidateUsers"
+ :key="idx1"
+ class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
+ >
+ <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
+ <el-avatar class="!m-5px" :size="28" v-else>
+ {{ user.nickname.substring(0, 1) }}
+ </el-avatar>
+ {{ user.nickname }}
+
+ <!-- 淇℃伅锛氫换鍔� ICON -->
+ <div
+ v-if="props.showStatusIcon"
+ class="position-absolute top-20px left-24px rounded-full flex items-center p-1px border-2 border-white border-solid"
+ :style="{ backgroundColor: statusIconMap2['-1']?.color }"
+ >
+ <Icon :size="11" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-timeline-item>
+ </el-timeline>
+
+ <!-- 鐢ㄦ埛閫夋嫨寮圭獥 -->
+ <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import { NodeType, CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { isEmpty } from '@/utils/is'
+import { Check, Close, Loading, Clock, Minus, Delete, ArrowDown } 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'
+import finishSvg from '@/assets/svgs/bpm/finish.svg'
+import transactorSvg from '@/assets/svgs/bpm/transactor.svg'
+import childProcessSvg from '@/assets/svgs/bpm/child-process.svg'
+
+defineOptions({ name: 'BpmProcessInstanceTimeline' })
+const props = withDefaults(
+ defineProps<{
+ activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 瀹℃壒鑺傜偣淇℃伅
+ showStatusIcon?: boolean // 鏄惁鏄剧ず澶村儚鍙充笅瑙掔姸鎬佸浘鏍�
+ enableApproveUserSelect?: boolean // 鏄惁寮�鍚鎵逛汉鑷�夊姛鑳�
+ }>(),
+ {
+ showStatusIcon: true, // 榛樿鍊间负 true
+ enableApproveUserSelect: false // 榛樿鍊间负 false
+ }
+)
+const { push } = useRouter() // 璺敱
+
+// 瀹℃壒鑺傜偣
+const statusIconMap2 = {
+ // 璺宠繃
+ '-2': { color: '#cccccc', icon: 'ep:arrow-down' },
+ // 鏈紑濮�
+ '-1': { color: '#909398', icon: 'ep-clock' },
+ // 寰呭鎵�
+ '0': { color: '#00b32a', icon: 'ep:loading' },
+ // 瀹℃壒涓�
+ '1': { color: '#448ef7', icon: 'ep:loading' },
+ // 瀹℃壒閫氳繃
+ '2': { color: '#00b32a', icon: 'ep:circle-check-filled' },
+ // 瀹℃壒涓嶉�氳繃
+ '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
+ // 鍙栨秷
+ '4': { color: '#cccccc', icon: 'ep:delete-filled' },
+ // 閫�鍥�
+ '5': { color: '#f46b6c', icon: 'ep:remove-filled' },
+ // 濮旀淳涓�
+ '6': { color: '#448ef7', icon: 'ep:loading' },
+ // 瀹℃壒閫氳繃涓�
+ '7': { color: '#00b32a', icon: 'ep:circle-check-filled' }
+}
+
+const statusIconMap = {
+ // 璺宠繃
+ '-2': { color: '#909398', icon: ArrowDown },
+ // 瀹℃壒鏈紑濮�
+ '-1': { color: '#909398', icon: Clock },
+ '0': { color: '#00b32a', icon: Clock },
+ // 瀹℃壒涓�
+ '1': { color: '#448ef7', icon: Loading },
+ // 瀹℃壒閫氳繃
+ '2': { color: '#00b32a', icon: Check },
+ // 瀹℃壒涓嶉�氳繃
+ '3': { color: '#f46b6c', icon: Close },
+ // 宸插彇娑�
+ '4': { color: '#cccccc', icon: Delete },
+ // 閫�鍥�
+ '5': { color: '#f46b6c', icon: Minus },
+ // 濮旀淳涓�
+ '6': { color: '#448ef7', icon: Loading },
+ // 瀹℃壒閫氳繃涓�
+ '7': { color: '#00b32a', icon: Check }
+}
+
+const nodeTypeSvgMap = {
+ // 缁撴潫鑺傜偣
+ [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
+ // 鍙戣捣浜鸿妭鐐�
+ [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
+ // 瀹℃壒浜鸿妭鐐�
+ [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
+ // 鍔炵悊浜鸿妭鐐�
+ [NodeType.TRANSACTOR_NODE]: { color: '#ff943e', svg: transactorSvg },
+ // 鎶勯�佷汉鑺傜偣
+ [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
+ // 鏉′欢鍒嗘敮鑺傜偣
+ [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
+ // 骞惰鍒嗘敮鑺傜偣
+ [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg },
+ // 瀛愭祦绋嬭妭鐐�
+ [NodeType.CHILD_PROCESS_NODE]: { color: '#14bb83', svg: childProcessSvg }
+}
+
+// 鍙湁鍙湁鐘舵�佹槸 -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
+ }
+
+ if (
+ nodeType === NodeType.START_USER_NODE ||
+ nodeType === NodeType.USER_TASK_NODE ||
+ nodeType === NodeType.TRANSACTOR_NODE ||
+ nodeType === NodeType.CHILD_PROCESS_NODE ||
+ nodeType === NodeType.END_EVENT_NODE
+ ) {
+ return statusIconMap[taskStatus]?.icon
+ }
+}
+
+const getApprovalNodeColor = (taskStatus: number) => {
+ return statusIconMap[taskStatus]?.color
+}
+
+const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
+ if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
+ return `${formatDate(node.startTime)}`
+ }
+ if (node.endTime) {
+ return `${formatDate(node.endTime)}`
+ }
+ if (node.startTime) {
+ return `${formatDate(node.startTime)}`
+ }
+}
+
+// 閫夋嫨鑷畾涔夊鎵逛汉
+const userSelectFormRef = ref()
+const handleSelectUser = (activityId, selectedList) => {
+ userSelectFormRef.value.open(activityId, selectedList)
+}
+const emit = defineEmits<{
+ selectUserConfirm: [id: any, userList: any[]]
+}>()
+const customApproveUsers: any = ref({}) // key锛歛ctivityId锛寁alue锛氱敤鎴峰垪琛�
+// 閫夋嫨瀹屾垚
+const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
+ customApproveUsers.value[activityId] = userList || []
+ emit('selectUserConfirm', activityId, userList)
+}
+
+/** 璺宠浆瀛愭祦绋� */
+const handleChildProcess = (activity: any) => {
+ if (!activity.processInstanceId) {
+ return
+ }
+ push({
+ name: 'BpmProcessInstanceDetail',
+ query: {
+ id: activity.processInstanceId
+ }
+ })
+}
+
+/** 璁剧疆鑷畾涔夊鎵逛汉 */
+const setCustomApproveUsers = (activityId: string, users: any[]) => {
+ customApproveUsers.value[activityId] = users || []
+}
+
+/** 鎵归噺璁剧疆澶氫釜鑺傜偣鐨勮嚜瀹氫箟瀹℃壒浜� */
+const batchSetCustomApproveUsers = (data: Record<string, any[]>) => {
+ Object.keys(data).forEach((activityId) => {
+ customApproveUsers.value[activityId] = data[activityId] || []
+ })
+}
+
+// 鏆撮湶鏂规硶缁欑埗缁勪欢
+defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers })
+</script>
--
Gitblit v1.8.0