102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<template>
|
|
<el-timeline-item :timestamp="timestamp" placement="top" :color="name ? '#66b1ff' : ''" class="timeline-item">
|
|
<el-card>
|
|
<el-form-item :prop="prop" style="margin-bottom: 0">
|
|
<h4>{{ title }}</h4>
|
|
<div style="margin-top: 10px;width: 300px;max-width: 100%">
|
|
<el-input
|
|
:disabled="disabled"
|
|
:value="name"
|
|
:placeholder="placeholder || `选择${title}`"
|
|
readonly
|
|
@click.native="choice(id)"
|
|
/>
|
|
</div>
|
|
</el-form-item>
|
|
</el-card>
|
|
<Role-tree
|
|
v-if="!disabled"
|
|
:check-box="!multiple"
|
|
:is-title="`选择${title}`"
|
|
:is-visible.sync="modalShowFlag"
|
|
:nodeList="nodeList"
|
|
@checkedRole="checkedRole"
|
|
/>
|
|
</el-timeline-item>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TimeLineFormItem',
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
prop: {
|
|
type: String
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
timestamp: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
multiple: { // 多选
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
drawerTitle: '', // drawer标题
|
|
modalShowFlag: false, // drawer开关
|
|
nodeList: [],
|
|
}
|
|
},
|
|
methods: {
|
|
handleChange (event) {
|
|
this.$emit('input', event)
|
|
},
|
|
choice (id) {
|
|
this.nodeList = id.split(',')
|
|
this.modalShowFlag = true
|
|
},
|
|
checkedRole (data) {
|
|
const id = this.joint(data, 'id')
|
|
const name = this.joint(data, 'name')
|
|
this.$emit('update:id', id)
|
|
this.$emit('update:name', name)
|
|
},
|
|
joint (data, type) {
|
|
return data.reduce((init, item) => {
|
|
if (init === '') {
|
|
return item[type]
|
|
} else {
|
|
return init + ',' + item[type]
|
|
}
|
|
}, '')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.timeline-item /deep/ .el-form-item__content{
|
|
margin: 0!important;
|
|
}
|
|
</style>
|