306 lines
8.4 KiB
Vue
306 lines
8.4 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 style="display: flex;">
|
|
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
|
|
<el-avatar size="large" :src="user.avatar"></el-avatar>
|
|
<div v-if="!$slots.dot && operation.userInfo.length > 1"
|
|
class="el-timeline-item__node" :style="{
|
|
backgroundColor: user.color
|
|
}">
|
|
<el-icon v-if="user.icon" :class="user.class">
|
|
<component :is="user.icon"/>
|
|
</el-icon>
|
|
</div>
|
|
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
|
|
<span class="username">{{ user.name }}</span>
|
|
</el-tooltip>
|
|
|
|
<template v-if="user.auditOpinion">
|
|
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
|
|
<div>
|
|
{{ user.auditOpinion }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div style="margin-left: 10px;">
|
|
<div style="color: #c0bebe">{{ operation.operationName }}</div>
|
|
<div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div>
|
|
</div>
|
|
</div>
|
|
<!-- <template v-if="operation.comment">-->
|
|
<!-- <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">-->
|
|
<!-- <div>-->
|
|
<!-- {{ operation.comment.context }}-->
|
|
<!-- </div>-->
|
|
<!-- <div style="margin-top: 10px;"-->
|
|
<!-- v-if="operation.comment.attachments && operation.comment.attachments.length > 0">-->
|
|
<!-- <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">-->
|
|
<!-- <el-image-->
|
|
<!-- style="width: 100px; height: 100px"-->
|
|
<!-- :src="item.url"-->
|
|
<!-- :preview-src-list="[item.url]">-->
|
|
<!-- </el-image>-->
|
|
<!-- </template>-->
|
|
<!-- <div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">-->
|
|
<!-- <el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document">{{ file.name }}</el-link>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
</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 {ref, defineProps} from '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;
|
|
}
|
|
|
|
.avatar_name {
|
|
width: 45px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.el-timeline-item__node {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 1px;
|
|
}
|
|
|
|
.username {
|
|
width: 45px;
|
|
padding-top: 2px;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden
|
|
}
|
|
</style>
|