109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<el-row>
|
|
<el-button type="primary" @click="openTagePanel">从列表中选择数据</el-button>
|
|
<el-button v-if="false" type="primary" @click="creatTage">新建标签</el-button>
|
|
</el-row>
|
|
<template v-for="tag in dynamicTags">
|
|
<el-tag
|
|
v-if="tag[rowKey]"
|
|
:key="tag[rowKey]"
|
|
:disable-transitions="false"
|
|
closable
|
|
style="margin-right: 10px"
|
|
@close="tagHandleClose(tag)">
|
|
{{ tag[rowName] }}
|
|
</el-tag>
|
|
</template>
|
|
<select-label ref="selectLabel" :lazy="lazy" :load-node="loadNode" append-to-body @getResult="getChooseTage"/>
|
|
<edit-label ref="editLabel" append-to-body/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
|
import waves from '@/directive/waves'
|
|
import selectLabel from '../Label/components/selectLable.vue'
|
|
import editLabel from '../Label/components/editLabel.vue'
|
|
export default {
|
|
components: { selectLabel, Pagination, editLabel },
|
|
directives: { waves },
|
|
props: {
|
|
canAdd: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 这里有个bug => 这里传入的空数组必须有个 '',但是不会修复，只能这样凑合一下
|
|
dynamicTags: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
labels: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
lazy: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
loadNode: {
|
|
type: Function,
|
|
default: function() {}
|
|
},
|
|
rowKey: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
rowName: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
uuid: ''
|
|
}
|
|
},
|
|
methods: {
|
|
openTagePanel() {
|
|
if (this.labels.length > 0) {
|
|
this.$refs.selectLabel.init({ labels: this.labels })
|
|
} else {
|
|
this.$refs.selectLabel.init({})
|
|
}
|
|
},
|
|
getChooseTage(e) {
|
|
const list = e.e
|
|
const labelList = []
|
|
for (const listKey in list) {
|
|
const index = labelList.findIndex(item => { item[this.rowKey] === list[listKey][this.rowKey] })
|
|
if (index < 0) {
|
|
const label = JSON.parse(JSON.stringify(list[listKey]))
|
|
label.label = label.NAME
|
|
label.value = JSON.stringify(list[listKey])
|
|
const index = labelList.findIndex(item => item.value === label.value)
|
|
if (index < 0) {
|
|
labelList.push(label)
|
|
}
|
|
}
|
|
}
|
|
this.$emit('update:dynamicTags', labelList)
|
|
},
|
|
creatTage() {
|
|
this.$refs.editLabel.init({ TYPE: '0' })
|
|
},
|
|
tagHandleClose(tag) {
|
|
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
|
|
if (this.dynamicTags.length === 0) this.dynamicTags.push('')
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.information >>> .el-scrollbar__wrap {
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|