<template>
|
<div>
|
<el-checkbox-group v-model="dictValue"
|
:class="{'checkbox-column-1': column === '1', 'checkbox-column-2': column === '2', 'checkbox-column-3': column === '3', 'checkbox-column-4': column === '4'}"
|
@input="$emit('input', $event)"
|
v-if="showType === 'checkbox'"
|
:disabled="disabled">
|
<el-checkbox :label="data.dictValue" v-for="data in dicts" :key="data.dictValue">{{data.dictLabel}}</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</template>
|
<script>
|
import cloneDeep from 'lodash/cloneDeep'
|
|
export default {
|
name: 'ZtDictCheckbox',
|
props: {
|
value: [Number, String, Boolean],
|
dict: { // 字典类型
|
type: String,
|
required: true
|
},
|
excluded: {// 排除的
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
column: { // 几列
|
type: String,
|
default: '2'
|
},
|
checkbox: {
|
type: Boolean,
|
default: true
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
placeholder: String
|
},
|
data() {
|
return {
|
dictValue: Array.isArray(this.value) ? [...this.value] : []
|
}
|
},
|
computed: {
|
showType() {
|
if (this.checkbox) {
|
return 'checkbox'
|
} else {
|
return this.dicts.length > 0 && this.dicts[0].children ? 'tree' : 'select'
|
}
|
},
|
dictTrees() {
|
let datas = cloneDeep(this.dicts)
|
this.wrapTreeId(datas)
|
return datas
|
},
|
dicts: function () {
|
let dicts = this.$store.getters.getDict(this.dict)
|
if (this.excluded.length > 0) {
|
let excludedArray = []
|
this.excluded.forEach(value => excludedArray.push(value + ''))
|
return dicts.filter(option => excludedArray.indexOf(option.dictValue + '') < 0)
|
} else {
|
return dicts
|
}
|
}
|
},
|
watch: {
|
value(val, oldval) {
|
this.dictValue = Array.isArray(val) ? [...val] : [];
|
}
|
},
|
methods: {
|
wrapTreeId(dictTypes) {
|
dictTypes.forEach(item => {
|
if ((item.dictType || '').length > 0) { // 字典类型
|
item.id = item.dictType
|
item.name = item.dictName
|
if (item.dataList && item.dataList.length > 0) {
|
item.children = item.dataList
|
}
|
if (item.children && item.children.length > 0) {
|
this.wrapTreeId(item.children)
|
}
|
} else { // 字典值
|
item.id = item.dictValue
|
item.name = item.dictLabel
|
}
|
})
|
},
|
changeProjectMajor(){
|
this.$emit('changeProjectMajor')
|
},
|
disabledFilter(dict) {
|
return this.dataOnly && (dict.dictType || '').length > 0
|
},
|
onSelected() {
|
|
}
|
}
|
}
|
</script>
|
<style>
|
.checkbox-column-2>.el-checkbox{
|
width: 40%;
|
}
|
.el-checkbox__input.is-disabled + .el-checkbox__label {
|
color: #808080 !important;
|
}
|
|
.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
|
color: #00a06e !important;
|
}
|
|
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
|
background-color: #00a06e !important;
|
border-color: #1890ff !important;
|
}
|
</style>
|
