3 changed files with 246 additions and 28 deletions
-
211src/components/dict/SysDictSelect.vue
-
28src/views/modules/srmBaseInformation/srmSupplierGroup.vue
-
35src/views/modules/srmSupplier/supplierList.vue
@ -0,0 +1,211 @@ |
|||
<!-- |
|||
============================================================================= |
|||
SysDictSelect — 通用数据字典下拉（sys_dict_data） |
|||
----------------------------------------------------------------------------- |
|||
【约定】dict_label：界面展示文案；dict_value：业务表保存的编码；dict_type：字典类别； |
|||
仅加载 status=Y 的记录；后端按 dict_sort 升序。 |
|||
|
|||
【基础用法 · v-model = dict_value】 |
|||
import SysDictSelect from '@/components/dict/SysDictSelect.vue' |
|||
|
|||
components: { SysDictSelect } |
|||
|
|||
<sys-dict-select |
|||
v-model="form.taxType" |
|||
dict-type="supplier_group" |
|||
placeholder="请选择供应商分组" |
|||
style="width: 260px" |
|||
/> |
|||
|
|||
【获知选中行的 dict_label】（回填描述等） |
|||
<sys-dict-select |
|||
v-model="form.groupCode" |
|||
dict-type="supplier_group" |
|||
@option-change="(row, val) => { form.groupDesc = row ? row.dictLabel : '' }" |
|||
/> |
|||
|
|||
【指定站点】默认取当前用户的 $store.state.user.site；可覆盖： |
|||
<sys-dict-select v-model="x" dict-type="xxx" :site="'01'" /> |
|||
|
|||
【需要默认选中字典里 is_default=Y 的行】： |
|||
apply-default （首次打开且 value 为空时，自动 emit 默认值） |
|||
|
|||
【刷新选项】： |
|||
ref 调用 this.$refs.d.reload() |
|||
|
|||
【与原有 dict-data-select 区别】 |
|||
路径统一 @/api/dict；显式筛选 status=Y；注释与事件更清晰。 |
|||
============================================================================= |
|||
--> |
|||
<template> |
|||
<el-select |
|||
v-bind="$attrs" |
|||
:value="value" |
|||
:placeholder="placeholder" |
|||
:disabled="disabled" |
|||
:clearable="clearable" |
|||
:filterable="filterable" |
|||
:popper-append-to-body="popperAppendToBody" |
|||
:style="computedStyle" |
|||
@change="onChange" |
|||
@clear="$emit('clear')" |
|||
> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="String(item.dictCode != null ? item.dictCode : item.dictValue)" |
|||
:label="item.dictLabel || item.dictValue" |
|||
:value="item.dictValue" |
|||
:disabled="disabledValues.includes(item.dictValue)" |
|||
/> |
|||
</el-select> |
|||
</template> |
|||
|
|||
<script> |
|||
import { selectDictDataList } from '@/api/dict' |
|||
|
|||
export default { |
|||
name: 'SysDictSelect', |
|||
inheritAttrs: false, |
|||
model: { |
|||
prop: 'value', |
|||
event: 'input' |
|||
}, |
|||
props: { |
|||
/** 字典类型 sys_dict_data.dict_type，如 supplier_group */ |
|||
dictType: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
/** 绑定值（= dict_value） */ |
|||
value: { |
|||
type: [String, Number], |
|||
default: null |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: '请选择' |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
clearable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
filterable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
popperAppendToBody: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
/** 是否使用站点过滤（一般为 true） */ |
|||
useSite: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
/** 覆盖站点：不传则用 Vuex user.site */ |
|||
site: { |
|||
type: String, |
|||
default: undefined |
|||
}, |
|||
/** value 为空时，若字典存在 is_default=Y 的记录则自动选中 */ |
|||
applyDefault: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
/** 禁用的 dict_value 列表 */ |
|||
disabledValues: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
options: [], |
|||
loading: false |
|||
} |
|||
}, |
|||
computed: { |
|||
resolvedSite () { |
|||
if (!this.useSite) { |
|||
return '*' |
|||
} |
|||
if (this.site) { |
|||
return this.site |
|||
} |
|||
const s = this.$store && this.$store.state.user && this.$store.state.user.site |
|||
return s != null ? String(s) : '' |
|||
}, |
|||
computedStyle () { |
|||
if (!this.width) { |
|||
return {} |
|||
} |
|||
return { width: this.width } |
|||
} |
|||
}, |
|||
watch: { |
|||
dictType () { |
|||
this.reload() |
|||
}, |
|||
resolvedSite () { |
|||
this.reload() |
|||
} |
|||
}, |
|||
created () { |
|||
this.reload() |
|||
}, |
|||
methods: { |
|||
reload () { |
|||
this.loadOptions() |
|||
}, |
|||
async loadOptions () { |
|||
const site = this.resolvedSite |
|||
if (!site) { |
|||
this.options = [] |
|||
return |
|||
} |
|||
this.loading = true |
|||
try { |
|||
const { data } = await selectDictDataList({ |
|||
site, |
|||
dictType: this.dictType, |
|||
dictTypeList: [], |
|||
status: 'Y' |
|||
}) |
|||
if (data && data.code === 0) { |
|||
this.options = data.rows || [] |
|||
if (this.applyDefault && (this.value === null || this.value === '' || this.value === undefined)) { |
|||
const def = this.options.find(it => it.isDefault === 'Y' && it.status === 'Y') |
|||
if (def && def.dictValue != null) { |
|||
this.$emit('input', def.dictValue) |
|||
this.$emit('change', def.dictValue) |
|||
this.$emit('option-change', def, def.dictValue) |
|||
} |
|||
} |
|||
} else { |
|||
this.options = [] |
|||
this.$message && this.$message.error((data && data.msg) || '字典加载失败') |
|||
} |
|||
} catch (e) { |
|||
this.options = [] |
|||
console.error('SysDictSelect loadOptions', e) |
|||
} finally { |
|||
this.loading = false |
|||
} |
|||
}, |
|||
onChange (val) { |
|||
const row = (this.options || []).find(it => String(it.dictValue) === String(val)) |
|||
this.$emit('input', val) |
|||
this.$emit('change', val) |
|||
this.$emit('option-change', row || null, val) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue