公共数据字典选择组件SelectCommonDict
基础字典维护
引用：
Markup 全选
import SelectCommonDict from '@components/SelectCommonDict/index.vue'
...
components: {
SelectCommonDict
}使用例子
HTML 全选
<SelectCommonDict :disabled="isView" v-model="data.deliveryType" dict-type="送货方式" :only-label="true"></SelectCommonDict>
属性说明
| 属性 | 类型 | 说明 |
|---|---|---|
| disabled | boolean | 组件可用状态 |
dict-type | string | 基础数据类型，对应数据字典中的类别,类别名称 |
only-label | boolean | 是否只设置描述文本,默认:false，默认value值为code，如果该值设置为true,则value会设置为描述文本值，如果该值为true，则按道理不需要再去多余的设置options |
| options | object | 配置，当用户选择数据的时候，会根据配置自动设置附加数据字段，当 ony-label为false时，可以通过该配置来自动给描述文本字段设置文本描述值 |
| options.dataSource | object | 数据源 |
| options.codeFildName | string | 数据源中ID对应的字段名称，当选择数据的时候，会自动设置该属性值 |
| options.descriptionFileName | string | 数据源中描述文本对应的字段名称，当选择数据的时候，会自动设置该属性值 |
组件源码
JavaScript 全选
<template>
<el-select style="width:100%;" v-model="currentValue" :disabled="disabled" placeholder="请选择">
<el-option v-for="item in data" :key="item.dictID" :label="item.dictDescription" :value="item[valueMember]"></el-option>
</el-select>
</template>
<script>
import { ajax } from 'yesweb-libs'
const request = {
getCommonData(context, dictType) {
return ajax.get(context, '/microapps/CommonDict/GetCommonData', {
dictType,
})
},
}
export default {
data() {
return {
currentValue: this.value,
data: [],
}
},
props: {
value: {
type: String,
default: '',
},
disabled: {
type: Boolean,
default: false,
},
dictType: {
type: String,
default: '',
},
onlyLabel: {
type: Boolean,
default: false,
},
options: {
type: Object,
default: function () {
return {
dataSource: null, // 对象数据
codeFildName: null, // code值绑定字段
descriptionFildName: null, // description说明绑定字段
}
},
},
},
computed: {
valueMember() {
if (this.onlyLabel) {
return 'dictDescription'
} else {
return 'dictID'
}
},
},
created() {
request
.getCommonData(this, this.dictType)
.then((res) => {
this.data = res.data
})
.catch((err) => {
this.data = []
})
},
watch: {
value(val) {
if (this.currentValue !== val) {
this.currentValue = val
}
},
currentValue(val) {
if (this.value != val) {
var obj = this.data.find((item) => item[this.valueMember] == val)
if (this.options.dataSource) {
if (this.options.codeFildName)
this.options.dataSource[this.options.codeFildName] = obj.dictID
if (this.options.descriptionFildName)
this.options.dataSource[this.options.descriptionFildName] =
obj.dictDescription
}
this.$emit('input', val)
// if (this.bindObject != null && this.displayMember)
// this.bindObject[this.displayMember] = obj.dictDescription
this.$emit('on-changed', val, obj)
}
},
},
}
</script>
版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
YESWEB 张国生
