核心内容摘要
17c134路nom
背景问题需要统一管理系统中的数据字典。
方案思考创建数据字典管理模块统一管理枚举值和选项。
具体实现数据字典管理// stores/modules/dict.jsimport{defineStore}frompiniaimport{ref}fromvueimport{getDictList}from/api/dictexportconstuseDictStoredefineStore(dict,(){constdictMapref({})// 获取字典数据constgetDictDataasync(dictType){if(dictMap.value[dictType]){returndictMap.value[dictType]}try{constresponseawaitgetDictList(dictType)dictMap.value[dictType]response.datareturnresponse.data}catch(error){console.error(获取字典${dictType}失败:,error)return[]}}// 获取字典标签constgetDictLabel(dictType,value){constdictDatadictMap.value[dictType]||[]constitemdictData.find(itemitem.valuevalue)returnitem?item.label:value}// 批量获取字典constbatchGetDictDataasync(dictTypes){constpromisesdictTypes.map(typegetDictData(type))constresultsawaitPromise.all(promises)returnresults}// 清除字典缓存constclearDictCache(dictType){if(dictType){deletedictMap.value[dictType]}else{dictMap.value{}}}return{dictMap,getDictData,getDictLabel,batchGetDictData,clearDictCache}})字典API// api/dict.jsimportrequestfrom/utils/request// 获取字典列表exportfunctiongetDictList(dictType){returnrequest({url:/system/dict/data/type/${dictType},method:get})}// 获取所有字典类型exportfunctiongetAllDictTypes(){returnrequest({url:/system/dict/type/list,method:get})}// 获取字典选项exportfunctiongetDictOptions(dictType){returnrequest({url:/system/dict/data/type/${dictType},method:get}).then(response{returnresponse.data.map(item({label:item.dictLabel,value:item.dictValue,disabled:item.status1}))})}字典组件!-- components/DictSelect.vue -- template el-select v-modelselectedValue :placeholderplaceholder :clearableclearable :disableddisabled changehandleChange el-option v-foritem in dictOptions :keyitem.value :labelitem.label :valueitem.value :disableditem.disabled / /el-select /template script setup import { ref, computed, onMounted, watch } from vue import { useDictStore } from /stores/modules/dict const props defineProps({ modelValue: [String, Number], dictType: { type: String, required: true }, placeholder: { type: String, default: 请选择 }, clearable: { type: Boolean, default: true }, disabled: { type: Boolean, default: false } }) const emit defineEmits([update:modelValue, change]) const dictStore useDictStore() const dictOptions ref([]) const selectedValue computed({ get: () props.modelValue, set: (value) emit(update:modelValue, value) }) const handleChange (value) { emit(change, value) } // 获取字典数据 const loadDictData async () { const data await dictStore.getDictData(props.dictType) dictOptions.value data.map(item ({ label: item.dictLabel, value: item.dictValue, disabled: item.status 1 })) } onMounted(() { loadDictData() }) // 监听字典类型变化 watch(() props.dictType, () { loadDictData() }) /script