前端项目中的字典封装

有时候在开发的过程中会遇到某个字段等于多种值，不同值表示不同的意思。如下案例：

• bindingAcctType =DEBIT是借记卡，=CREDIT是贷记卡，=PUBLIC是对公账户等等情况
• 如果是我刚入行的时候可能是下面这种写法。

function getTypeName(type:string){
  return type === 'DEBIT' ? '借记卡' : type === 'CREDIT' ? '贷记卡' : '对公账户'
}
// 或者
function getTypeName(type:string){
  const bindingAcctType=[
    {label:'借记卡',value:'DEBIT'},
    {label:'贷记卡',value:'CREDIT'},
    {label:'对公账户',value:'PUBLIC'},
  ]
  const find = bindingAcctType.find(item=>item.value===type)
  return find?find.label:''
}
// 在离谱点
function getTypeName(type:string){
  if(type==='DEBIT') return '借记卡'
  if(type==='CREDIT') return '贷记卡'
  if(type==='PUBLIC') return '对公账户'
}

• 以上几种方法个人认为都不太优雅，第一是麻烦。第二是复用性不高，可能在很多地方都要写一遍。有些时候我们不但需要得到字典对应的值，有时候还需要用字典列表来做下拉选择。这样使得代码更加的乱。虽然现在大部分项目都维护了字典系统，可以动态的添加修改，前端可以调接口拿到字典进行处理，但是大部分是没有的，这个时候就需要前端自己处理了。如果弄不好就是满地鸡毛，到处维护。成本太大不太好维护。
• 下面进行封装一下。便于维护和使用。

interface dictItem {
  label:string,
  value:string|number
}
interface dictType {
  [key:string]:Array<dictItem>
}
// 所有的字典数据都可以为在这个对象中，如果太多的话也可以考虑通过拆分模块的方式解决
const diceObj:dictType = {
	// 进件状态
  registStatus:[
    {label:'待进件',value:'0'},
    {label:'待打款验证',value:'1'},
    {label:'正常',value:'2'},
    {label:'进件审核中',value:'3'},
    {label:'审核失败',value:'4'},
    {label:'未授权',value:'5'},
    {label:'银行审核中',value:'6'},
  ],
  // 绑卡类型
  bindingAcctType:[
    {label:'借记卡',value:'DEBIT'},
    {label:'贷记卡',value:'CREDIT'},
    {label:'对公账户',value:'PUBLIC'},
  ],
}
/**
 * 获取字典值
 * @param key 要获取的字典key
 * @param value 字典值
 */
export function getDoctValue(key:string,value:string|number):string{
  const dice = diceObj[key] as Array<dictItem>;
  if(!dice) return '--'
  const item = dice.find(item=>item.value==value)
  return item?.label || '--'
}
/**
 * 获取字典列表
 * @param key 要获取的字典key
 */
export function getDiceList(key:string):dictItem[]{
  return diceObj[key] || []
}

• 下面是使用

<templat
  >
    <span class="w-[210px]">{{ getDoctValue('bindingAcctType',parent.bindingAcctType) }}span>
    <el-select v-else v-model="params.enterpriseBeneficiaryIdCardType">
      <el-option :label="item.label" :value="item.value" v-for="item,index of getDiceList('bindingAcctType')" :key="index">el-option>
    el-select>
  div>
template>
<script setup lang="ts">
import {getDiceList,getDoctValue} from '@/utils/dictionary'
script>

• 欢迎提供更好的解决方案来打我的脸