通过接口获取字典的数据进行渲染

完整的代码

js 复制代码

// 定义字典类型枚举（语义化）
enum DictType {
  NORMAL = 1,    // 普通字典
  INTEGER = 2,   // 整数字典
  PRODUCT = 3    // 产品类型字典
}

// 字典项通用类型
type DictItem = {
  label?: string;
  value?: string | number;
  name?: string;
  productType?: string | number;
  [key: string]: any;
};

// 声明外部依赖函数类型
declare function getDictOptions(dictKey: string): DictItem[];
declare function getIntDictOptions(dictKey: string): DictItem[];
declare function getCellTypeOption(): DictItem[];

/**
 * 根据字典值获取对应的文本标签
 * @param val 要匹配的字典值
 * @param dictKey 字典标识（用于获取字典列表）
 * @param type 字典类型
 * @returns 匹配的文本标签，匹配不到返回原始值
 */
const getDictText = (
  val: string | number | undefined | null,
  dictKey: string,
  type: DictType
): string | number | undefined | null => {
  // 空值直接返回
  if (val === undefined || val === null) return val;

  // 类型配置映射
  const configMap: Record<DictType, {
    keyLabel: keyof DictItem;
    keyValue: keyof DictItem;
    getList: () => DictItem[];
  }> = {
    [DictType.NORMAL]: {
      keyLabel: 'label',
      keyValue: 'value',
      getList: () => getDictOptions(dictKey)
    },
    [DictType.INTEGER]: {
      keyLabel: 'label',
      keyValue: 'value',
      getList: () => getIntDictOptions(dictKey)
    },
    [DictType.PRODUCT]: {
      keyLabel: 'name',
      keyValue: 'productType',
      getList: () => getCellTypeOption()
    }
  };

  // 获取配置（兜底到普通字典）
  const { keyLabel, keyValue, getList } = configMap[type] || configMap[DictType.NORMAL];
  const dictList = getList() || [];

  // 查找匹配项
  const matchItem = dictList.find(item => item[keyValue] == val);

  return matchItem ? matchItem[keyLabel] : val;
};

代码解释

js 复制代码

declare function getDictOptions(dictKey: string): DictItem[];
declare function getIntDictOptions(dictKey: string): DictItem[];
declare function getCellTypeOption(): DictItem[];
// 这个三个方法都是外部调用字典接口的方法

js 复制代码

export const getDictOptions = (dictType: string) => {
  return dictStore.getDictByType(dictType) || []
}

export const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
  // 获得通用的 DictDataType 列表
  const dictOptions: DictDataType[] = getDictOptions(dictType)
  // 转换成 number 类型的 NumberDictDataType 类型
  // why 需要特殊转换：避免 IDEA 在 v-for="dict in getIntDictOptions(...)" 时，el-option 的 key 会告警
  const dictOption: NumberDictDataType[] = []
  dictOptions.forEach((dict: DictDataType) => {
    dictOption.push({
      ...dict,
      value: parseInt(dict.value + '')
    })
  })
  return dictOption
}
getCellTypeOption() {
    const cellTypeList = wsCache.get(CACHE_KEY.CELL_TYPE_CACHE)
    if (cellTypeList) {
    this.cellTypeList = cellTypeList
    }
    // this.cellTypeList.map((v) => {
    //   return { ...v, label: v.name, value: v.id, disabled: v.status != 0 }
    // })
    return this.cellTypeList.filter((v) => v.status == 0)
},

亮点是使用枚举来定义不同类型的字典接口

js 复制代码

enum DictType {
  NORMAL = 1,    // 普通字典
  INTEGER = 2,   // 整数字典
  PRODUCT = 3    // 产品类型字典
}