当前位置：首页 > wzjs >正文

通州建设网站河北企业网站建设

wzjs 2025/8/2 15:56:42

通州建设网站,河北企业网站建设,江苏网站建设seo优化,录播教育系统网站建设费用需求页面中上面搜索项有获取字典枚举接口，table表格中也有根据key匹配字典中的value 方案一需要做到的要求这里上面下拉列表是一个组件获取的字典，下面也是通过字典匹配，所以尽量统一封装一个函数，每个组件保证最少变动tabl…

需求

页面中上面搜索项有获取字典枚举接口，table表格中也有根据key匹配字典中的value

方案一

在这里插入图片描述

需要做到的要求

这里上面下拉列表是一个组件获取的字典，下面也是通过字典匹配，所以尽量统一封装一个函数，每个组件保证最少变动
table表格中如果filters中更改,会获取多次接口，—使用闭包让只获取一次接口，节省性能
filter中又是必须同步函数，异步函数报错，所以不能使用async,await
最好请求接口之后存储起来下次直接拿不用请求了

综上

utils/dictionary.js

import { getDicValue } from '@/api/systemManage'
import store from '@/store'
/*** 获取字典数据* @param {Boolean} hasAllOption 是否包含全部选项*/
export function getDicValueList(dictClassCode, hasAllOption = true) {const dictionaryCache = store.state.dictionary.dictionaryCache || {}return new Promise((resolve, reject) => {let optionList = []if (dictionaryCache[dictClassCode]) {const dicList = JSON.parse(JSON.stringify(dictionaryCache[dictClassCode]))if (hasAllOption) {optionList = [ { value: '', label: '全部' }, ...dicList]} else {optionList = [...dicList]}resolve(optionList)} else {getDicValue(dictClassCode).then(response => {console.log('字典调用', dictClassCode)const dicList = response.value || []store.dispatch('dictionary/setDictionaryCache', { key: dictClassCode, value: dicList })if (hasAllOption) {optionList = [ { value: '', label: '全部' }, ...dicList]} else {optionList = [...dicList]}resolve(optionList)}).catch(error => {reject([])})}})
}/*** 获取字典数据并返回一个闭包函数* @param {string} dictClassCode 字典类代码* @param {string} noTitle 默认值，当找不到匹配项时返回* @returns {Promise<Function>} 返回一个闭包函数，该函数可以根据 value 获取 label*/
export async function getDicValueName(dictClassCode, noTitle = "--") {try {const response = await getDicValueList(dictClassCode, false)const listData = response || []return (value) => {let label = noTitlelistData.some(item => {if (item.value === value) {label = item.labelreturn true}})return label}} catch (err) {console.error(err)return (value) => noTitle}
}

下拉框组件

created () {this.getOptionLists()},getOptionLists() {if (this.dictClassCode) {getDicValueList(this.dictClassCode).then(res => {this.optionLists = res})} else {this.optionLists = this.options}},

table组件中

<span>{{ filterStateName(scope.row.state) }}</span>import { getDicValueName } from '@/utils/dictionary'created() {this.initDictionary()},methods: {
async initDictionary() {try {this.filterStateName = await getDicValueName('DC_DICTIONARY_STATE')} catch (error) {console.error('Failed to fetch dictionary:', error)this.filterStateName = (value) => '--'}},}

问题：但是这种因为一进页面这两个组件都是去获取字典，所以还是从接口拿的数据，会调用两次接口

方案二（建议）

方案：接下来优化可以通过路由导航预加载，先获取字典之后，在加载页面
router.js

// 预加载字典
export function preloadDictionary(dictClassCodeList) {const pList = []dictClassCodeList.forEach(dictClassCode => {const p = getDicValueList(dictClassCode)pList.push(p)})return Promise.all(pList)
}// 预加载字典
router.beforeEach((to, from, next) => {if(to.meta && to.meta.dictClassCodeList&& to.meta.dictClassCodeList.length > 0) {preloadDictionary(to.meta.dictClassCodeList).then(res => {next()})} else {next()}
})