yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 工作流审批页面-头像右下角状态icon本体颜色与背景色调整优化

pull/586/MERGE
GoldenZqqq 2024-11-14 10:00:48 +08:00
parent 0db0b66051
commit 2719541462
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
View File

@ -16,9 +16,10 @@
<img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" /> <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
<div <div
v-if="showStatusIcon" v-if="showStatusIcon"
class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px" class="position-absolute top-17px left-17px rounded-full flex items-center p-2px"
:style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
> >
<el-icon :size="12" :color="getApprovalNodeColor(activity.status)"> <el-icon :size="12" color="#fff">
<component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" /> <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
</el-icon> </el-icon>
</div> </div>
@ -52,7 +53,7 @@
class="!px-6px" class="!px-6px"
@click="handleSelectUser(activity.id, customApproveUsers[activity.id])" @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
> >
<img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" /> <img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" />
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<div <div
@ -105,13 +106,10 @@
<!-- 信息：任务 ICON --> <!-- 信息：任务 ICON -->
<div <div
v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)" v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px" class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
:style="{ backgroundColor: statusIconMap2[task.status]?.color }"
> >
<Icon <Icon :size="12" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
:size="12"
:icon="statusIconMap2[task.status]?.icon"
:color="statusIconMap2[task.status]?.color"
/>
</div> </div>
</div> </div>
</div> </div>
@ -142,13 +140,10 @@
<!-- 信息：任务 ICON --> <!-- 信息：任务 ICON -->
<div <div
v-if="showStatusIcon" v-if="showStatusIcon"
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px" class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
:style="{ backgroundColor: statusIconMap2['-1']?.color }"
> >
<Icon <Icon :size="12" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
:size="12"
:icon="statusIconMap2['-1']?.icon"
:color="statusIconMap2['-1']?.color"
/>
</div> </div>
</div> </div>
</div> </div>
@ -190,7 +185,7 @@ const statusIconMap2 = {
// 未开始 // 未开始
'-1': { color: '#909398', icon: 'ep-clock' }, '-1': { color: '#909398', icon: 'ep-clock' },
// 待审批 // 待审批
'0': { color: '#e5e7ec', icon: 'ep:loading' }, '0': { color: '#00b32a', icon: 'ep:loading' },
// 审批中 // 审批中
'1': { color: '#448ef7', icon: 'ep:loading' }, '1': { color: '#448ef7', icon: 'ep:loading' },
// 审批通过 // 审批通过
@ -210,7 +205,7 @@ const statusIconMap2 = {
const statusIconMap = { const statusIconMap = {
// 审批未开始 // 审批未开始
'-1': { color: '#909398', icon: Clock }, '-1': { color: '#909398', icon: Clock },
'0': { color: '#e5e7ec', icon: Clock }, '0': { color: '#00b32a', icon: Clock },
// 审批中 // 审批中
'1': { color: '#448ef7', icon: Loading }, '1': { color: '#448ef7', icon: Loading },
// 审批通过 // 审批通过
@ -229,9 +224,9 @@ const statusIconMap = {
const nodeTypeSvgMap = { const nodeTypeSvgMap = {
// 结束节点 // 结束节点
[NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg }, [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
// 发起人节点 // 发起人节点
[NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg }, [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
// 审批人节点 // 审批人节点
[NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg }, [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
// 抄送人节点 // 抄送人节点