371 lines
9.6 KiB
Vue
371 lines
9.6 KiB
Vue
<template>
|
||
<!-- <div>-->
|
||
<!-- <el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button> id="printBox"-->
|
||
<!-- </div>-->
|
||
<div style="margin: 10px">
|
||
<el-timeline>
|
||
<el-timeline-item v-for="(operation,index) in operationList"
|
||
:key="index" :timestamp="operation.startTime"
|
||
:icon="operation.icon"
|
||
:color="operation.color"
|
||
size="large"
|
||
placement="top">
|
||
<template #dot>
|
||
<!-- :style="{backgroundColor:operation.color}"-->
|
||
<div style="background-color:#fff;width: 16px; height: 16px">
|
||
<el-icon :color="operation.color" size="16px">
|
||
<component :is="operation.icon"></component>
|
||
</el-icon>
|
||
</div>
|
||
</template>
|
||
<el-card>
|
||
<div>
|
||
当前节点: {{ operation.operationName }}
|
||
</div>
|
||
<div class="card">
|
||
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name"
|
||
:style="{'flex-direction': isColumn?'column':'row'}">
|
||
<div class="avatar-block" :style="{'margin': isColumn?'0 0 10px 18px':'0'}">
|
||
<name-circle :user="user" :type="operation.operation"/>
|
||
<div class="name-block" :style="{'margin': isColumn?'0 0 0 30px':'0 20px 0 10px'}">
|
||
<div style="display: flex;align-items: center" >
|
||
<el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'"
|
||
style="margin-right: 5px;">
|
||
<UserFilled/>
|
||
</el-icon>
|
||
<span class="name-style">{{ user.name }}</span>
|
||
</div>
|
||
<span>{{ user.jobActivityDesc }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-if="user.isAgent" style="display: flex;" :style="{'margin': isColumn?'10px 0':'0'}">
|
||
<div>
|
||
<name-circle :user="user" :showIcon="true" :user-name="user.agentUserName" :type="operation.operation"/>
|
||
<span style="color: #909399;font-size: 14px">（代理审批）</span>
|
||
</div>
|
||
<div class="name-block">
|
||
<div style="display: flex;align-items: center">
|
||
<el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'"
|
||
style="margin-right: 5px;">
|
||
<UserFilled/>
|
||
</el-icon>
|
||
<span class="name-style">{{ user.agentUserName }}</span>
|
||
</div>
|
||
<span>{{ user.agentCompanyName }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="auditOpinion">
|
||
<div v-if="user.auditOpinion">
|
||
<div style="margin-bottom: 10px;color: #909399">{{ user.operationTime||'2024-09-22 12:16:29' }}</div>
|
||
<div class="username">
|
||
<span style="font-weight: bold">审批意见：</span>
|
||
<el-text v-text="user.auditOpinion" style="word-break: break-all">
|
||
</el-text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
|
||
<template #dot>
|
||
<div style="background-color:#fff;width: 16px; height: 16px">
|
||
<el-icon :color="timeline.color" size="16px">
|
||
<component :is="timeline.icon"></component>
|
||
</el-icon>
|
||
</div>
|
||
</template>
|
||
<el-card style="font-size: 16px;font-weight: bold;">
|
||
{{ timeline.context }}
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import NameCircle from "@/components/NameCircle.vue";
|
||
|
||
const props = defineProps({
|
||
operationList: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
state: {
|
||
type: String,
|
||
default: () => {
|
||
return '1'
|
||
}
|
||
},
|
||
isColumn: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
step: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
})
|
||
|
||
const timeline = ref({
|
||
color: '',
|
||
icon: '',
|
||
context: ''
|
||
})
|
||
|
||
const init = () => {
|
||
switch (props.state) {
|
||
case '1':
|
||
timeline.value = {
|
||
color: '#f78f5f',
|
||
icon: 'MoreFilled',
|
||
context: '审批进行中'
|
||
}
|
||
break
|
||
case '4':
|
||
if (props.step != 'report') {
|
||
timeline.value = {
|
||
color: '#0bbd87',
|
||
icon: 'CircleCheckFilled',
|
||
context: '审批通过'
|
||
}
|
||
} else {
|
||
timeline.value = {
|
||
color: '#f78f5f',
|
||
icon: 'MoreFilled',
|
||
context: '年度计划审批中'
|
||
}
|
||
}
|
||
break
|
||
case '2':
|
||
timeline.value = {
|
||
color: '#0bbd87',
|
||
icon: 'CircleCheckFilled',
|
||
context: '审批通过'
|
||
}
|
||
break
|
||
case '3':
|
||
timeline.value = {
|
||
color: '#f56c6c',
|
||
icon: 'CircleCloseFilled',
|
||
context: '审核已驳回'
|
||
}
|
||
break
|
||
case '5':
|
||
case '6':
|
||
timeline.value = {
|
||
color: '#0bbd87',
|
||
icon: 'CircleCheckFilled',
|
||
context: '年度计划审批通过'
|
||
}
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
// let operationListNew = []
|
||
for (let i = 0; i < props.operationList?.length; i++) {
|
||
props.operationList[i] = initOperationFun(props.operationList[i])
|
||
}
|
||
}
|
||
//获取到对应附件的地址
|
||
|
||
const getAttachmentList = (attachments, image) => {
|
||
let result = [];
|
||
if (attachments) {
|
||
for (let attachment of attachments) {
|
||
if (attachment.isImage === image) {
|
||
result.push(attachment)
|
||
}
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
|
||
const initOperationFun = (operation) => {
|
||
let state = operation.state
|
||
let type = operation.operation
|
||
//创建节点
|
||
if (type === 'CREATE') {
|
||
operation["icon"] = "CircleCheckFilled"
|
||
operation["color"] = "#0bbd87"
|
||
}
|
||
if (type === 'OPINION') {
|
||
//审批通过
|
||
if (state === 'AGREE' || state === 'AUTO_PASS') {
|
||
operation["icon"] = "CircleCheckFilled"
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 已同意"
|
||
}
|
||
if (state === 'PASS') {
|
||
operation["icon"] = "SemiSelect"
|
||
operation["color"] = "#c0c4cc"
|
||
}
|
||
//审批处理中
|
||
if (state === 'RUNNING') {
|
||
operation["icon"] = "Loading"
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 处理中"
|
||
}
|
||
//回退
|
||
// if (state === 'ROLLBACK') {
|
||
// // operation["icon"] = "RefreshLeft"
|
||
// // operation["color"] = "#f78f5f"
|
||
// operation["icon"] = "CircleCloseFilled"
|
||
// operation["color"] = "#f56c6c"
|
||
// operation["remark"] = " 回退成功"
|
||
// }
|
||
//拒绝操作
|
||
if (state === 'REFUSE' || state === 'AUTO_REFUSE' ||state === 'ROLLBACK') {
|
||
operation["icon"] = "CircleCloseFilled"
|
||
operation["color"] = "#f56c6c"
|
||
operation["remark"] = " 拒绝"
|
||
}
|
||
}
|
||
//抄送
|
||
if (type === 'CC') {
|
||
operation["icon"] = "Promotion"
|
||
operation["color"] = "#3395f8"
|
||
operation["remark"] = " 抄送成功"
|
||
}
|
||
//评论
|
||
if (type === 'COMMENT') {
|
||
//评论
|
||
if (state === 'COMMENT') {
|
||
operation["icon"] = "ChatDotRound"
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 添加了评论"
|
||
}
|
||
}
|
||
//触发器发送http请求
|
||
if (type === 'TRIGGER_WEBHOOK') {
|
||
operation["icon"] = "Share"
|
||
if (state === 'SUCCESS') {
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 成功"
|
||
} else if (state === 'RUNNING') {
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 请求中"
|
||
} else {
|
||
operation["color"] = "#f56c6c"
|
||
operation["remark"] = " 失败"
|
||
}
|
||
}
|
||
|
||
//触发器发送邮件
|
||
if (type === 'TRIGGER_EMAIL') {
|
||
operation["icon"] = "Message"
|
||
if (state === 'SUCCESS') {
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 成功"
|
||
} else if (state === 'RUNNING') {
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 发送中"
|
||
} else {
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 发送中"
|
||
}
|
||
}
|
||
return operation;
|
||
}
|
||
init()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.el-timeline-item__dot) {
|
||
margin-left: -3px;
|
||
}
|
||
|
||
:deep .el-card__body, .el-main {
|
||
padding: 10px;
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 15px;
|
||
|
||
> div:first-child {
|
||
display: flex;
|
||
}
|
||
|
||
.avatar_name {
|
||
padding: 10px 0;
|
||
display: flex;
|
||
margin-right: 5px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.name-block {
|
||
width: 130px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 10px;
|
||
margin-right: 20px;
|
||
|
||
.name-style {
|
||
color: #2a99ff;
|
||
}
|
||
|
||
> span:last-child {
|
||
margin-top: 5px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
.avatar-block {
|
||
display: flex;
|
||
|
||
.agent-style {
|
||
color: #909399;
|
||
font-size: 15px;
|
||
}
|
||
|
||
}
|
||
|
||
.auditOpinion {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #8a8a8a;
|
||
|
||
.remark {
|
||
font-weight: bold;
|
||
}
|
||
|
||
> div {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
//display: flex;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.el-timeline-item__node {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 1px;
|
||
}
|
||
|
||
.username {
|
||
margin-top: 10px;
|
||
background: #f5f5f5;
|
||
padding: 12px;
|
||
}
|
||
|
||
@media print {
|
||
//:deep .el-timeline-item__node--large > .el-icon {
|
||
// color: $iconColor !important;
|
||
//}
|
||
}
|
||
</style>
|