108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
<template>
|
|
<div :class="{'line': row === 1, 'lines': row > 1}"
|
|
:title="hoverTip ? content: null"
|
|
:style="{'--row':row}">
|
|
<slot name="pre"></slot>
|
|
<div style="display: flex;">
|
|
<div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
|
|
<el-avatar size="large"
|
|
:src="user.avatar"></el-avatar>
|
|
<div v-if="user.icon"
|
|
class="el-timeline-item__node" :style="{
|
|
backgroundColor: user.color
|
|
}">
|
|
<i v-if="user.icon"
|
|
class="el-timeline-item__icon"
|
|
:class="user.icon"
|
|
></i>
|
|
</div>
|
|
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
|
|
<span class="item_name">{{ user.name }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AvatarEllipsis",
|
|
install(Vue) {
|
|
Vue.component('avatarEllipsis', this)
|
|
},
|
|
components: {},
|
|
props: {
|
|
row: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
hoverTip: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
userInfo: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
created() {
|
|
this.init()
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
init() {
|
|
for (let user of this.userInfo) {
|
|
this.initUser(user)
|
|
}
|
|
},
|
|
initUser(user) {
|
|
let state = user.state
|
|
//创建节点
|
|
if (state === 'CREATE') {
|
|
this.$set(user, "icon", "el-icon-check")
|
|
this.$set(user, "color", "#0bbd87")
|
|
}
|
|
//审批通过
|
|
if (state === 'AGREE' || state === 'AUTO_PASS') {
|
|
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' || state === 'AUTO_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;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.avatar_name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right: 5px;
|
|
/*width: 45px;*/
|
|
}
|
|
.item_name{
|
|
width: 45px;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden
|
|
}
|
|
</style>
|