332 lines
7.7 KiB
Vue
332 lines
7.7 KiB
Vue
<template>
|
||
<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">
|
||
<el-card>
|
||
<div>
|
||
当前节点: {{ operation.operationName }}
|
||
</div>
|
||
<div class="card">
|
||
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
|
||
<div>
|
||
<name-circle :user="user"/>
|
||
<span>{{ user.name }}</span>
|
||
</div>
|
||
<div>
|
||
<div class="remark">{{ operation.remark }}</div>
|
||
<div>
|
||
<div>审批人：</div>
|
||
<div>{{ user.name }}</div>
|
||
</div>
|
||
<div v-if="user.auditOpinion">
|
||
<div style="margin-bottom: 10px;color: #909399">{{ user.operationTime }}</div>
|
||
<el-text v-text="user.auditOpinion" style="word-break: break-all">
|
||
</el-text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
|
||
<el-card style="font-size: 16px;font-weight: bold;">
|
||
{{ timeline.context }}
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
|
||
import NameCircle from "@/components/NameCircle.vue";
|
||
|
||
const props = defineProps({
|
||
operationList: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
state: {
|
||
type: String,
|
||
default: () => {
|
||
return '1'
|
||
}
|
||
}
|
||
})
|
||
|
||
const timeline = ref()
|
||
|
||
const init = () => {
|
||
switch (props.state) {
|
||
case '1':
|
||
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 '4':
|
||
timeline.value = {
|
||
color: '#0bbd87',
|
||
icon: 'CircleCheckFilled',
|
||
context: '审批通过'
|
||
}
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
// let operationListNew = []
|
||
for (let i = 0; i < props.operationList?.length; i++) {
|
||
let operationNew = initOperationFun(props.operationList[i])
|
||
let userList = []
|
||
if (operationNew.userInfo) {
|
||
for (let user of operationNew.userInfo) {
|
||
let userNew = initUser(user, operationNew.operation)
|
||
userList.push(userNew)
|
||
}
|
||
operationNew.userInfo = userList
|
||
}
|
||
// operationListNew.push(operationNew)
|
||
// this.operationList.push(operationNew)
|
||
props.operationList[i] = operationNew
|
||
}
|
||
}
|
||
//获取到对应附件的地址
|
||
|
||
const getAttachmentList = (attachments, image) => {
|
||
let result = [];
|
||
if (attachments) {
|
||
for (let attachment of attachments) {
|
||
if (attachment.isImage === image) {
|
||
result.push(attachment)
|
||
}
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
const initUser = (user, type) => {
|
||
let state = user.state
|
||
//创建节点
|
||
if (state === 'CREATE') {
|
||
user["icon"] = 'CircleCheckFilled'
|
||
user["color"] = "#0bbd87"
|
||
}
|
||
//审批通过
|
||
if (state === 'AGREE' || state === 'AUTO_PASS') {
|
||
user["icon"] = 'CircleCheckFilled'
|
||
user["color"] = "#0bbd87"
|
||
}
|
||
if (type === "CC") {
|
||
user["icon"] = "Promotion"
|
||
user["color"] = "#3395f8"
|
||
}
|
||
//审批处理中
|
||
if (state === 'RUNNING') {
|
||
user["icon"] = 'Loading'
|
||
user["color"] = "#f78f5f"
|
||
user["class"] = 'is-loading'
|
||
}
|
||
//拒绝后评论
|
||
if (state === 'REFUSE') {
|
||
user["icon"] = 'Close'
|
||
user["color"] = "#f56c6c"
|
||
}
|
||
if (state === 'PASS') {
|
||
user["icon"] = 'MoreFilled'
|
||
user["color"] = "#c0c4cc"
|
||
}
|
||
return user;
|
||
}
|
||
|
||
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["remark"] = " 回退成功"
|
||
}
|
||
//拒绝操作
|
||
if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
|
||
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-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;
|
||
}
|
||
|
||
> div:first-child {
|
||
display: flex;
|
||
|
||
|
||
> span {
|
||
width: 100px;
|
||
color: #2a99ff;
|
||
margin-left: 10px;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
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 {
|
||
//width: 90px;
|
||
margin-top: 10px;
|
||
background: #f5f5f5;
|
||
padding: 12px;
|
||
overflow: hidden;
|
||
|
||
//.el-tooltip__trigger {
|
||
// width: 90px;
|
||
// text-align: center;
|
||
// //padding-top: 2px;
|
||
// //text-align: center;
|
||
// text-overflow: ellipsis;
|
||
// white-space: nowrap;
|
||
// overflow: hidden
|
||
//}
|
||
}
|
||
</style>
|