mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-02-08 22:55:00 +08:00
Merge branch 'feature/bpm' of https://github.com/yudaocode/yudao-ui-admin-vue3 into feature/bpm
This commit is contained in:
YunaiV
commit
d477b35f83
1
src/assets/svgs/bpm/auditor.svg
Normal file
1
src/assets/svgs/bpm/auditor.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1729561718271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8640" width="200" height="200"><path d="M908.5952 920.4224H164.7616a31.0784 31.0784 0 0 1-30.976-30.976c0-17.0496 13.9264-30.976 30.976-30.976h743.8336c17.0496 0 31.0272 13.9264 31.0272 30.976a31.0784 31.0784 0 0 1-31.0272 30.976z m0-123.9552H164.7616a31.0784 31.0784 0 0 1-30.976-30.976v-154.9824c0-51.1488 41.8304-92.9792 92.9792-92.9792h198.3488c-6.1952-37.1712-24.7808-72.8064-51.1488-103.8336a216.576 216.576 0 0 1-54.2208-144.128c0-58.88 23.2448-114.688 66.6112-156.4672C429.7728 71.168 485.5296 51.0976 545.9968 52.6848c111.5648 4.608 206.08 100.6592 207.616 212.2752 1.536 55.808-20.1216 110.0288-57.344 151.8592-26.3168 27.904-41.8304 61.952-48.0256 100.7104h198.3488c51.2 0 93.0304 41.8304 93.0304 92.9792v154.9824a31.0784 31.0784 0 0 1-31.0272 30.976z m-712.8064-61.952H877.568v-124.0064a31.0784 31.0784 0 0 0-31.0272-30.976h-232.448a31.0784 31.0784 0 0 1-30.976-31.0272c0-65.024 23.2448-127.0784 66.6624-173.568 27.8528-29.3888 41.8304-68.1472 41.8304-108.4416-1.536-80.5888-68.1984-148.7872-148.7872-151.8592a150.528 150.528 0 0 0-113.152 43.3664 153.6 153.6 0 0 0-48.0256 111.616c0 37.1712 13.9776 74.3424 38.7584 102.2464 44.9536 51.1488 69.7344 113.152 69.7344 176.64a31.0784 31.0784 0 0 1-30.976 31.0272h-232.448a31.0784 31.0784 0 0 0-30.976 30.976v123.9552z" fill="#fff" p-id="8641"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
src/assets/svgs/bpm/condition.svg
Normal file
1
src/assets/svgs/bpm/condition.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1729585232424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1602" width="200" height="200"><path d="M925.5 898.9H804.9c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V572.2c0-19-15.4-34.4-34.5-34.4H529.2V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H443.1c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V537.8H219.1c-19 0-34.5 15.4-34.5 34.4V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H98.5c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4H133V555c0-38 30.9-68.8 68.9-68.8h275.7V297.1h-34.5c-19 0-34.5-15.4-34.5-34.4V159.5c0-19 15.4-34.4 34.5-34.4h120.6c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4h-34.5v189.2h292.9c38.1 0 68.9 30.8 68.9 68.8v172h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 18.8-15.4 34.2-34.5 34.2z m0 0" p-id="1603" fill="#fff"></path></svg>
|
||||
|
After Width: | Height: | Size: 897 B |
1
src/assets/svgs/bpm/copy.svg
Normal file
1
src/assets/svgs/bpm/copy.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1729649333541" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1644" width="200" height="200"><path d="M647.888 893.84L491.904 571.52l393.888-393.888-237.904 716.208zM872.32 123.232L459.872 535.68 134.96 380.88 872.32 123.232z m90.72-68.32a23.968 23.968 0 0 0-24.784-5.568L64.08 354.816a23.984 23.984 0 0 0-2.4 44.32l381.392 181.728 187.36 387.088a24.048 24.048 0 0 0 23.152 13.504 24.032 24.032 0 0 0 21.232-16.4L968.96 79.552c2.88-8.672 0.592-18.24-5.92-24.64z" fill="#fff" p-id="1645"></path></svg>
|
||||
|
After Width: | Height: | Size: 553 B |
1
src/assets/svgs/bpm/parallel.svg
Normal file
1
src/assets/svgs/bpm/parallel.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1729585239190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1755" width="200" height="200"><path d="M901.489435 536.822664v-0.931601l-1.001722-198.240726c-0.100172-19.162936-9.21584-37.474409-25.043042-50.246361-14.024104-11.349507-32.265456-17.60025-51.348255-17.610268l-618.062295-0.18031c-19.142902 0-37.424323 6.280795-51.478478 17.690405-15.827203 12.842072-24.902802 31.2437-24.892785 50.486775v196.798247A114.987635 114.987635 0 1 0 195.295664 536.922836V338.782282c1.15198-1.252152 4.808264-3.596181 10.768509-3.596181l276.725622 0.090155v199.753326a114.987635 114.987635 0 1 0 65.612772 1.412428V335.326342l275.693849 0.080138c6.01033 0 9.626546 2.344029 10.768508 3.596181l1.001722 195.70637a114.987635 114.987635 0 1 0 65.592737 2.113633zM214.979496 645.910158a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m354.689623 0a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m295.507904 56.437001a56.437001 56.437001 0 1 1 56.437001-56.437001 56.507122 56.507122 0 0 1-56.457035 56.437001z" p-id="1756" fill='#fff'></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/assets/svgs/bpm/starter.svg
Normal file
1
src/assets/svgs/bpm/starter.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1729561814171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1359" width="200" height="200"><path d="M674.496 603.456c120.256 0 218.176 90.752 221.44 203.84l0.064 5.888v125.888c0 11.52-9.92 20.928-22.144 20.928h-44.352a21.568 21.568 0 0 1-22.144-20.928v-125.888c0-67.712-56.512-123.264-128-125.76l-4.928-0.064H349.568c-71.488 0-130.176 53.504-132.864 121.152l-0.064 4.672v125.888c0 11.52-9.92 20.928-22.144 20.928h-44.352A21.568 21.568 0 0 1 128 939.072v-125.888c0-113.92 95.872-206.528 215.36-209.664l6.208-0.064h324.928zM497.216 128c122.368 0 221.568 93.888 221.568 209.728s-99.2 209.792-221.568 209.792c-122.304 0-221.44-93.952-221.44-209.728C275.712 221.952 374.848 128 497.152 128z m0 83.904c-73.408 0-132.864 56.32-132.864 125.888 0 69.504 59.52 125.824 132.864 125.824 73.408 0 132.928-56.32 132.928-125.824 0-69.504-59.52-125.888-132.928-125.888z" fill="#fff" p-id="1360"></path></svg>
|
||||
|
After Width: | Height: | Size: 947 B |
@ -35,7 +35,7 @@
|
||||
<Icon icon="fa:sort-amount-desc" class="mr-5px" />
|
||||
排序
|
||||
</el-button>
|
||||
<el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
|
||||
<el-button v-else link type="info" class="mr-20px" @click.stop="openModelForm('create')">
|
||||
<Icon icon="fa:plus" class="mr-5px" />
|
||||
新建
|
||||
</el-button>
|
||||
@ -150,7 +150,7 @@
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
@click="openModelForm('update', scope.row.id)"
|
||||
v-hasPermi="['bpm:model:update']"
|
||||
:disabled="!isManagerUser(scope.row)"
|
||||
>
|
||||
@ -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 })
|
||||
|
||||
@ -9,32 +9,70 @@
|
||||
: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
|
||||
class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
|
||||
>
|
||||
<el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
|
||||
<component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col items-start">
|
||||
<!-- 第一行：节点名称、时间 -->
|
||||
<div class="flex w-full">
|
||||
<div class="font-bold"> {{ activity.name }}</div>
|
||||
<!-- 信息：时间 -->
|
||||
<div
|
||||
v-if="activity.status !== TaskStatusEnum.NOT_START"
|
||||
class="text-#a5a5a5 text-13px mt-1 ml-auto"
|
||||
>
|
||||
{{ getApprovalNodeTime(activity) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center flex-wrap mt-1">
|
||||
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
|
||||
<div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
|
||||
<div class="flex flex-col pr-2">
|
||||
<div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
|
||||
<!-- 信息：头像 -->
|
||||
<div 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 p-8px gap-2 dark:color-gray-600 position-relative"
|
||||
>
|
||||
<template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
|
||||
<el-avatar
|
||||
v-if="task.assigneeUser && task.assigneeUser.avatar"
|
||||
:size="36"
|
||||
:src="task.assigneeUser.avatar"
|
||||
:size="28"
|
||||
v-if="task.assigneeUser?.avatar"
|
||||
:src="task.assigneeUser?.avatar"
|
||||
/>
|
||||
<el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
|
||||
{{ task.assigneeUser.nickname.substring(0, 1) }}
|
||||
<el-avatar :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
|
||||
v-else-if="task.ownerUser && task.ownerUser.avatar"
|
||||
:src="task.ownerUser.avatar"
|
||||
:size="28"
|
||||
v-if="task.ownerUser?.avatar"
|
||||
:src="task.ownerUser?.avatar"
|
||||
/>
|
||||
<el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
|
||||
{{ task.ownerUser.nickname.substring(0, 1) }}
|
||||
<el-avatar :size="28" v-else>
|
||||
{{ task.ownerUser?.nickname.substring(0, 1) }}
|
||||
</el-avatar>
|
||||
{{ task.ownerUser?.nickname }}
|
||||
</template>
|
||||
<!-- 信息：任务 ICON -->
|
||||
<div
|
||||
class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||||
v-if="onlyStatusIconShow.includes(task.status)"
|
||||
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||||
>
|
||||
<Icon
|
||||
:size="12"
|
||||
@ -43,45 +81,22 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col mt-1">
|
||||
<!-- 信息：昵称 -->
|
||||
<div
|
||||
v-if="task.assigneeUser && task.assigneeUser.nickname"
|
||||
class="text-12px text-align-center"
|
||||
>
|
||||
{{ task.assigneeUser.nickname }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="task.ownerUser && task.ownerUser.nickname"
|
||||
class="text-10px text-align-center"
|
||||
>
|
||||
{{ task.ownerUser.nickname }}
|
||||
</div>
|
||||
<div
|
||||
v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
|
||||
class="text-#a5a5a5 text-13px mt-1"
|
||||
>
|
||||
审批意见：{{ task.reason }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
|
||||
<div
|
||||
v-for="(user, idx1) in activity.candidateUsers"
|
||||
:key="idx1"
|
||||
class="flex items-center"
|
||||
class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
|
||||
>
|
||||
<div class="flex items-center flex-col pr-2">
|
||||
<div class="position-relative">
|
||||
<!-- 信息：头像 -->
|
||||
<el-avatar :size="36" v-if="user.avatar" :src="user.avatar" />
|
||||
<el-avatar v-else-if="user.nickname && user.nickname">
|
||||
<el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
|
||||
<el-avatar :size="28" v-else>
|
||||
{{ user.nickname.substring(0, 1) }}
|
||||
</el-avatar>
|
||||
{{ user.nickname }}
|
||||
|
||||
<!-- 信息：任务 ICON -->
|
||||
<div
|
||||
class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||||
v-if="onlyStatusIconShow.includes(task.status)"
|
||||
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
|
||||
>
|
||||
<Icon
|
||||
:size="12"
|
||||
@ -90,21 +105,15 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col mt-1">
|
||||
<!-- 信息：昵称 -->
|
||||
<div v-if="user.nickname" class="text-10px text-align-center">
|
||||
{{ user.nickname }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 信息：时间 -->
|
||||
<div
|
||||
v-if="activity.status !== TaskStatusEnum.NOT_START"
|
||||
class="text-#a5a5a5 text-13px mt-1"
|
||||
v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
|
||||
class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
|
||||
>
|
||||
{{ getApprovalNodeTime(activity) }}
|
||||
审批意见：{{ task.reason }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
@ -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)}`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user