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