248 lines
7.2 KiB
Vue
248 lines
7.2 KiB
Vue
<template>
|
|
|
|
<div v-if="options!== null && options.attrs!==null" class="de-select-grid-class">
|
|
<div class="de-select-grid-search">
|
|
<el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
|
|
</div>
|
|
<div>
|
|
<el-tree
|
|
v-if="options!== null && options.attrs!==null"
|
|
ref="deSelectGrid"
|
|
:data="options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas"
|
|
:props="defaultProp"
|
|
:indent="0"
|
|
:filter-node-method="filterNode"
|
|
class="de-filter-tree"
|
|
default-expand-all
|
|
>
|
|
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
|
|
<span style="display: flex;flex: 1;width: 0;">
|
|
<el-radio v-if="!options.attrs.multiple" v-model="options.value" :label="data.id" @change="changeRadioBox"><span> {{ node.label }} </span></el-radio>
|
|
<el-checkbox v-if="options.attrs.multiple && data.id !== allNode.id" v-model="data.checked" :label="data.id" @change="changeCheckBox(data)"><span> {{ node.label }} </span></el-checkbox>
|
|
<el-checkbox v-if="inDraw && options.attrs.multiple && data.id === allNode.id" v-model="data.checked" :indeterminate="data.indeterminate" :label="data.id" @change="allCheckChange(data)"><span> {{ node.label }} </span></el-checkbox>
|
|
</span>
|
|
<span v-if="!options.attrs.multiple && options.value && options.value === data.id" class="child">
|
|
<span style="margin-left: 12px;" @click.stop>
|
|
<span class="el-dropdown-link">
|
|
<el-button
|
|
icon="el-icon-circle-close"
|
|
type="text"
|
|
size="small"
|
|
@click="cancelRadio(data)"
|
|
/>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</el-tree>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
element: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
inDraw: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
inScreen: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
options: null,
|
|
// value: null,
|
|
checked: null,
|
|
defaultProp: {
|
|
id: 'id',
|
|
label: 'text',
|
|
children: 'children'
|
|
},
|
|
keyWord: null,
|
|
allNode: {
|
|
id: (-2 << 16) + '',
|
|
text: this.$t('commons.all'),
|
|
checked: false,
|
|
indeterminate: false
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
operator() {
|
|
return this.options.attrs.multiple ? 'in' : 'eq'
|
|
}
|
|
},
|
|
watch: {
|
|
'options.attrs.multiple': function(value) {
|
|
const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
|
|
this.options.attrs.datas = []
|
|
this.options.attrs.datas = datas
|
|
const sourceValue = this.options.value
|
|
const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
|
|
if (value) {
|
|
!sourceValid && (this.options.value = [])
|
|
sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
|
|
!this.inDraw && (this.options.value = [])
|
|
if (!this.inDraw) {
|
|
this.options.value = []
|
|
this.allNode.indeterminate = false
|
|
this.allNode.checked = false
|
|
}
|
|
this.setMutiBox()
|
|
} else {
|
|
!sourceValid && (this.options.value = null)
|
|
sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
|
|
!this.inDraw && (this.options.value = null)
|
|
}
|
|
},
|
|
keyWord(val) {
|
|
this.$refs.deSelectGrid.filter(val)
|
|
}
|
|
},
|
|
created() {
|
|
this.options = this.element.options
|
|
this.setMutiBox()
|
|
this.setRadioBox()
|
|
// this.setCondition()
|
|
},
|
|
mounted() {
|
|
// this.$nextTick(() => {
|
|
// this.options && this.options.value && this.changeValue(this.options.value)
|
|
// })
|
|
this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.initValue(this.options.value)
|
|
},
|
|
methods: {
|
|
initValue(value) {
|
|
// this.options.value = [value]
|
|
this.setCondition()
|
|
},
|
|
setMutiBox() {
|
|
if (this.options && this.options.attrs.multiple) {
|
|
this.options.attrs.datas.forEach(data => {
|
|
data.checked = (this.options.value && this.options.value.includes(data.id))
|
|
})
|
|
this.setAllNodeStatus()
|
|
}
|
|
},
|
|
setRadioBox() {
|
|
if (this.options && !this.options.attrs.multiple) {
|
|
if (Array.isArray(this.options.value) && this.options.value.length > 0) {
|
|
// this.value = this.options.value.length[0]
|
|
}
|
|
}
|
|
},
|
|
|
|
setCondition() {
|
|
const param = {
|
|
component: this.element,
|
|
value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
|
|
operator: this.operator
|
|
}
|
|
this.inDraw && this.$store.commit('addViewFilter', param)
|
|
},
|
|
changeCheckBox(data) {
|
|
const values = Array.isArray(this.options.value) ? this.options.value : this.options.value ? [this.options.value] : []
|
|
const index = values.indexOf(data.id)
|
|
if (index < 0 && data.checked) {
|
|
values.push(data.id)
|
|
}
|
|
if (index >= 0 && !data.checked) {
|
|
values.splice(index, 1)
|
|
}
|
|
|
|
this.setAllNodeStatus()
|
|
|
|
this.options.value = values
|
|
this.setCondition()
|
|
this.styleChange()
|
|
},
|
|
// 勾选数据项 会影响全选节点的状态
|
|
setAllNodeStatus() {
|
|
const nodeSize = this.options.attrs.datas.length
|
|
const checkedSize = this.options.attrs.datas.filter(item => item.checked).length
|
|
if (nodeSize === checkedSize) {
|
|
this.allNode.checked = true
|
|
this.allNode.indeterminate = false
|
|
} else if (checkedSize === 0) {
|
|
this.allNode.checked = false
|
|
this.allNode.indeterminate = false
|
|
} else {
|
|
this.allNode.checked = false
|
|
this.allNode.indeterminate = true
|
|
}
|
|
},
|
|
allCheckChange(data) {
|
|
data.indeterminate = false
|
|
const values = []
|
|
// this.options.value = []
|
|
this.options.attrs.datas.forEach(item => {
|
|
item.checked = data.checked
|
|
// data.checked && this.options.value.push(item.id)
|
|
data.checked && values.push(item.id)
|
|
})
|
|
|
|
this.options.value = values
|
|
this.setCondition()
|
|
},
|
|
changeRadioBox(value) {
|
|
// this.options.value = []
|
|
// if (this.value) this.options.value = [this.value]
|
|
this.setCondition()
|
|
},
|
|
cancelRadio(data) {
|
|
this.options.value = null
|
|
this.changeRadioBox()
|
|
},
|
|
filterNode(value, data) {
|
|
if (!value) return true
|
|
return data[this.defaultProp.label].indexOf(value) !== -1
|
|
},
|
|
styleChange() {
|
|
this.$store.state.styleChangeTimes++
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-tree-node-list {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
padding:0 8px;
|
|
}
|
|
.father .child {
|
|
display: none;
|
|
}
|
|
.father:hover .child {
|
|
display: inline;
|
|
}
|
|
.de-filter-tree {
|
|
>>>span.is-leaf {
|
|
width: 5px !important;
|
|
padding: 6px 0 !important;
|
|
}
|
|
}
|
|
.de-select-grid-search {
|
|
>>>input {
|
|
border-radius: 0px;
|
|
}
|
|
}
|
|
</style>
|