<template>
|
<div>
|
<el-select v-if="showType === 'select'" :value="dictValue" @change="changeProjectMajor" @input="$emit('input', $event)" :placeholder="placeholder" clearable style="width: 100%;" :disabled="disabled">
|
<el-option :label="data.dictLabel" v-for="data in dicts" :key="data.dictValue" :value ="data.dictValue">{{data.dictLabel}}</el-option>
|
</el-select>
|
<div v-if="showType === 'radio'">
|
<el-radio-group :value="dictValue" @input="$emit('input', $event)" :disabled="disabled">
|
<el-radio :label="data.dictValue" v-for="data in dicts" :key="data.dictValue">{{data.dictLabel}}</el-radio>
|
<el-input class="radio-input" v-if="isOtherOptionSelected" v-model="inputName"></el-input>
|
</el-radio-group>
|
</div>
|
<zt-combo-tree v-if="showType === 'tree'" v-model="dictValue" :datas="dictTrees" :disabled-filter="disabledFilter" @input="$emit('input', $event)" :placeholder="placeholder"/>
|
</div>
|
</template>
|
<script>
|
import cloneDeep from 'lodash/cloneDeep'
|
|
export default {
|
name: 'ZtDict',
|
props: {
|
inputName:{},
|
origin:{}, // 字典字段
|
value: [Number, String, Boolean],
|
dict: { // 字典类型
|
type: String,
|
required: true
|
},
|
excluded: {// 排除的
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
additional: {// 添加的
|
type: Array,
|
default: function () {
|
return []
|
}
|
},
|
radio: {
|
type: Boolean,
|
default: false
|
},
|
dataOnly: { // 对于字典树时，是否只能选择字典值
|
type: Boolean,
|
default: false
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
placeholder: String
|
},
|
data() {
|
return {
|
dictValue: typeof this.value === 'undefined' ? '' : (this.value + ''),
|
isName:false,
|
}
|
},
|
computed: {
|
showType() {
|
if (this.radio) {
|
return 'radio'
|
} else {
|
return this.dicts.length > 0 && this.dicts[0].children ? 'tree' : 'select'
|
}
|
},
|
dictTrees() {
|
let datas = cloneDeep(this.dicts)
|
this.wrapTreeId(datas)
|
return datas
|
},
|
isOtherOptionSelected() {
|
const selectedOption = this.dicts.find(data => data.dictValue === this.dictValue);
|
return selectedOption && selectedOption.dictLabel.includes('其他');
|
},
|
dicts: function () {
|
let dicts = this.$store.getters.getDict(this.dict)
|
if (this.excluded.length > 0) {
|
let excludedArray = []
|
this.excluded.forEach(value => excludedArray.push(value + ''))
|
dicts = dicts.filter(option => excludedArray.indexOf(option.dictValue + '') < 0)
|
}
|
return dicts.concat(this.additional);
|
}
|
},
|
watch: {
|
value(val, oldval) {
|
this.dictValue = typeof val === 'undefined' ? '' : (val + '')
|
},
|
inputName(){
|
this.$emit('getChangeInputData',this.inputName,this.origin)
|
}
|
},
|
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>
|
.el-radio__input.is-disabled + .el-radio__label {
|
color: #808080 !important;
|
}
|
|
.el-radio__input.is-disabled.is-checked + .el-radio__label {
|
color: #00a06e !important;
|
}
|
|
.el-radio__input.is-disabled.is-checked .el-radio__inner {
|
background-color: #00a06e !important;
|
border-color: #1890ff !important;
|
}
|
.radio-input.el-input{
|
position: absolute;
|
bottom: 5px;
|
left: 68px;
|
}
|
.radio-input.el-input>.el-input__inner{
|
height: 25px;
|
}
|
</style>
|
