Vue——vue3 之 数据字典管理

背景问题：
需要统一管理系统中的数据字典。

方案思考：
创建数据字典管理模块，统一管理枚举值和选项。

具体实现：
数据字典管理：

// stores/modules/dict.jsimport{defineStore}from'pinia'import{ref}from'vue'import{getDictList}from'@/api/dict'exportconstuseDictStore=defineStore('dict',()=>{constdictMap=ref({})// 获取字典数据constgetDictData=async(dictType)=>{if(dictMap.value[dictType]){returndictMap.value[dictType]}try{constresponse=awaitgetDictList(dictType)dictMap.value[dictType]=response.datareturnresponse.data}catch(error){console.error(`获取字典${dictType}失败:`,error)return[]}}// 获取字典标签constgetDictLabel=(dictType,value)=>{constdictData=dictMap.value[dictType]||[]constitem=dictData.find(item=>item.value===value)returnitem?item.label:value}// 批量获取字典constbatchGetDictData=async(dictTypes)=>{constpromises=dictTypes.map(type=>getDictData(type))constresults=awaitPromise.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.status==='1'}))})}

字典组件：

<!-- components/DictSelect.vue --> <template> <el-select v-model="selectedValue" :placeholder="placeholder" :clearable="clearable" :disabled="disabled" @change="handleChange" > <el-option v-for="item in dictOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.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>