258 lines
7.8 KiB
Vue
258 lines
7.8 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 avatar_icon" :style="{
|
|
backgroundColor: user.color
|
|
}">
|
|
<i v-if="user.icon"
|
|
class="el-timeline-item__icon"
|
|
:class="user.icon"
|
|
></i>
|
|
</div>
|
|
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
|
|
<span class="username">{{ user.name }}</span>
|
|
</el-tooltip>
|
|
</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.operation === 'comment' || operation.operation === 'refuse'">
|
|
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
|
|
<div>
|
|
{{ operation.comment.context }}
|
|
</div>
|
|
<div style="margin-top: 10px;" v-if="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>
|
|
|
|
export default {
|
|
name: "OperationRender",
|
|
props: {
|
|
operationList: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
state: {
|
|
type: String,
|
|
default: () => {
|
|
return '1'
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
timeline: {},
|
|
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
switch (this.state) {
|
|
case '1':
|
|
this.timeline = {
|
|
color: '#f78f5f',
|
|
icon: 'el-icon-more',
|
|
context: '审批进行中'
|
|
}
|
|
break
|
|
case '2':
|
|
this.timeline = {
|
|
color: '#0bbd87',
|
|
icon: 'el-icon-check',
|
|
context: '审批通过'
|
|
}
|
|
break
|
|
case '3':
|
|
this.timeline = {
|
|
color: '#f56c6c',
|
|
icon: 'el-icon-close',
|
|
context: '审核已驳回'
|
|
}
|
|
break
|
|
case '4':
|
|
this.timeline = {
|
|
color: '#0bbd87',
|
|
icon: 'el-icon-check',
|
|
context: '审批通过'
|
|
}
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
// let operationListNew = []
|
|
for (let i = 0;i<this.operationList.length;i++) {
|
|
let operationNew = this.initOperationFun(this.operationList[i])
|
|
let userList = []
|
|
for (let user of operationNew.userInfo) {
|
|
let userNew = this.initUser(user)
|
|
userList.push(userNew)
|
|
}
|
|
operationNew.userInfo = userList
|
|
// operationListNew.push(operationNew)
|
|
// this.operationList.push(operationNew)
|
|
this.operationList[i] = operationNew
|
|
}
|
|
},
|
|
//获取到对应附件的地址
|
|
getAttachmentList(attachments, image) {
|
|
let result = [];
|
|
for (let attachment of attachments) {
|
|
if (attachment.isImage === image) {
|
|
result.push(attachment)
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
initUser(user) {
|
|
let state = user.state
|
|
//创建节点
|
|
if (state === 'CREATE') {
|
|
this.$set(user, "icon", "el-icon-check")
|
|
this.$set(user, "color", "#0bbd87")
|
|
}
|
|
//审批通过
|
|
if (state === 'AGREE') {
|
|
this.$set(user, "icon", "el-icon-check")
|
|
this.$set(user, "color", "#0bbd87")
|
|
}
|
|
//审批处理中
|
|
if (state === 'RUNNING') {
|
|
this.$set(user, "icon", "el-icon-loading")
|
|
this.$set(user, "color", "#f78f5f")
|
|
}
|
|
//拒绝后评论
|
|
if (state === 'REFUSE') {
|
|
this.$set(user, "icon", "el-icon-close")
|
|
this.$set(user, "color", "#f56c6c")
|
|
}
|
|
if (state === 'PASS'){
|
|
this.$set(user, "icon", "el-icon-more")
|
|
this.$set(user, "color", "#c0c4cc")
|
|
}
|
|
return user;
|
|
},
|
|
initOperationFun(operation) {
|
|
let state = operation.state
|
|
let type = operation.operation
|
|
//创建节点
|
|
if (state === 'CREATE') {
|
|
this.$set(operation, "icon", "el-icon-check")
|
|
this.$set(operation, "color", "#0bbd87")
|
|
this.$set(operation, "remark", operation.userInfo.name)
|
|
}
|
|
//审批通过
|
|
if (state === 'AGREE') {
|
|
this.$set(operation, "icon", "el-icon-check")
|
|
this.$set(operation, "color", "#0bbd87")
|
|
this.$set(operation, "remark", operation.userInfo.name + ' (已同意)')
|
|
}
|
|
if (state === 'PASS'){
|
|
this.$set(operation, "icon", "el-icon-more")
|
|
this.$set(operation, "color", "#c0c4cc")
|
|
}
|
|
//审批处理中
|
|
if (state === 'RUNNING') {
|
|
this.$set(operation, "icon", "el-icon-loading")
|
|
this.$set(operation, "color", "#f78f5f")
|
|
this.$set(operation, "remark", operation.userInfo.name + ' (处理中)')
|
|
}
|
|
//抄送
|
|
if (type === 'CC') {
|
|
this.$set(operation, "icon", "el-icon-s-promotion")
|
|
this.$set(operation, "color", "#3395f8")
|
|
this.$set(operation, "remark", operation.userInfo.name + ' (抄送成功)')
|
|
}
|
|
//评论
|
|
if (state === 'COMMENT') {
|
|
this.$set(operation, "icon", "el-icon-chat-dot-round")
|
|
this.$set(operation, "color", "#0bbd87")
|
|
this.$set(operation, "remark", operation.userInfo.name + ' (添加了评论)')
|
|
}
|
|
//拒绝后评论
|
|
if (state === 'REFUSE' && type === 'COMMENT') {
|
|
this.$set(operation, "icon", "el-icon-chat-dot-round")
|
|
this.$set(operation, "color", "#f56c6c")
|
|
this.$set(operation, "remark", operation.userInfo.name + ' (填写拒绝理由)')
|
|
}
|
|
//拒绝操作
|
|
if (state === 'REFUSE' && type === 'OPINION') {
|
|
this.$set(operation, "icon", "el-icon-close")
|
|
this.$set(operation, "color", "#f56c6c")
|
|
this.$set(operation, "remark", operation.userInfo.name + ' (拒绝)')
|
|
}
|
|
return operation;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style 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;
|
|
}
|
|
.avatar_icon{
|
|
position: absolute;
|
|
bottom: 16px;
|
|
right: -2px;
|
|
}
|
|
.username{
|
|
width: 45px;
|
|
padding-top: 2px;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden
|
|
}
|
|
</style>
|