效果图
实现代码
<template>
<div>
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:color="activity.color"
:icon="activity.icon"
>
{{activity.content}}
<el-link v-if="!activity.finish" type="primary" :underline="false" style="padding-bottom: 4px" @click="changeName(activity.nameInfo,index)">修改</el-link>
<div>
<p v-if="activity.nameInfo.length>0">
{{getNameTxt(activity.nameInfo)}}
</p>
<p v-if="activity.remark!=''">备注: {{activity.remark}}</p>
<p v-if="activity.timestamp!=''">{{activity.timestamp}}</p>
</div>
</el-timeline-item>
</el-timeline>
</div>
<el-dialog
title="修改审批人"
:visible.sync="dialogVisible"
width="500px"
:before-close="handleClose">
<span>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="审批人:">
<el-select
v-model="value"
multiple
value-key="keyId"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.keyId"
:label="item.name"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-form>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Demo",
data() {
return {
dialogVisible:false,
oppIndex:0,
form:{
name:"张三",
},
activities: [
{
content: '创建成功',
nameInfo:[
{
name:'王峰',
keyId:21,
}
],
remark:'',
finish:true,
timestamp: '2018-04-15 18:00:00',
icon:'el-icon-success'
}, {
content: '一级负责人',
nameInfo:[
{
name:'张三丰',
keyId:21,
}
],
remark:'同意',
finish:true,
timestamp: '2018-04-13 18:40:00',
icon:'el-icon-success'
}, {
content: '二级负责人',
nameInfo:[
{
name:'李斯',
keyId:11,
},
{
name:'秦二世',
keyId:12,
},
{
name:'扶苏',
keyId:13,
}
],
remark:'',
finish:false,
timestamp: ''
}, {
content: '三级负责人',
nameInfo:[
{
name:'嬴政',
keyId:11,
},
{
name:'赵武',
keyId:12,
},
{
name:'齐秦',
keyId:13,
}
],
remark:'',
finish:false,
timestamp: ''
}, {
content: '最终负责人',
nameInfo:[
{
name:'司马师',
keyId:11,
},
{
name:'曹操',
keyId:12,
},
{
name:'张飞',
keyId:13,
}
],
remark:'',
finish:false,
timestamp: ''
}
],
options: [],
value: [],
list: [],
loading: false,
states: [
{
"name":"张三",
"keyId":1,
},
{
"name":"李斯",
"keyId":2,
},
{
"name":"嬴政",
"keyId":3,
},
{
"name":"李健",
"keyId":4,
},
{
"name":"李白",
"keyId":5,
},
{
"name":"王五",
"keyId":6,
}
]
};
},
methods: {
handleClose(done) {
done();
},
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.keyId.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
},
changeName(param,index){
this.oppIndex=index;
this.options=param;
this.value=param;
this.dialogVisible=true;
},
getNameTxt(param){
if(param==null||param==undefined||param.length<1){
return "";
}
let map = param.map(item=>item.name);
return map.toString();
},
submit(){
this.activities[this.oppIndex].nameInfo=this.value;
this.dialogVisible = false;
}
},
created() {
},
async mounted() {
this.list = this.states.map(item => {
return { name: `${item.name}`, keyId: `${item.keyId}` };
});
},
};
</script>
<style lang="less" scoped>
.dialog-footer {
text-align: center;
}
.el-form {
.el-input {
width: 200px;
}
.el-form-item {
margin-right: 60px;
display: inline-block;
}
.width-200 {
width: 200px;
}
}
/deep/ .el-timeline-item__icon{
color:#20B43A;
}
/deep/ .el-dialog__footer{
text-align: center;
}
/deep/ .el-dialog__header {
background-color: #F5F5F5;
}
</style>