字典使用

在ZsAdmin中，字典用于统一管理系统中可配置的枚举值，如状态类型、性别、学历等。使用字典可以提高系统的可维护性和扩展性，减少硬编码。

字典管理

字典配置

字典数据通常存储在后端数据库中，通过管理界面进行配置。前端通过API获取字典数据并进行缓存，使用pinia的persist插件可以将字典数据持久化到localStorage中，避免每次刷新页面都需要重新获取字典数据。

字典hooks

import { DictData } from '@/types/sys/dict/DictData';

const useDict = async (dictType: string): Promise<DictData[]> => {
  const rawDictDataMap = localStorage.getItem('dictDataMap');
  if (!rawDictDataMap) {
    return [];
  }

  try {
    const parsedData = JSON.parse(rawDictDataMap);
    const dictList = parsedData?.dictDataMap?.[dictType];
    return Array.isArray(dictList) ? dictList : [];
  } catch (error) {
    // eslint-disable-next-line no-console
    console.error('解析字典数据失败:', error);
    return [];
  }
};

export default useDict;

字典使用

1. 全局字典管理

前端使用Pinia进行字典数据的状态管理，通过API获取字典数据后缓存到Store中。

// src/store/modules/sys/dict/dictDataStore.ts
export const useDictDataStore = defineStore('dictData', {
  state: (): DictDataState => {
    return {
      dictDataFormRef: ref(null),
      addEditRef: ref<HTMLFormElement | null>(null),
      loading: false,
      list: [],
      total: 0,
      form: {
        sysDictTypeId: '',
        pid: '',
        dictType: '',
        dictLabel: '',
        dictValue: '',
        status: 1,
        current: 1,
        pageSize: 30,
        order: 'asc',
        orderField: 'sort',
      },
      selectedKeys: [],
      dictDataMap: {},
    };
  },
  persist: { // 持久化配置
    key: 'dictDataMap',
    storage: localStorage,
    pick: ['dictDataMap'],
    serializer: {
      serialize: JSON.stringify,
      deserialize: JSON.parse,
    },
  },
  
  actions: {
    async loadDictDataPage() {
      this.loading = true;
      const { data } = await sysDictDataApi.dictDataPage(this.form);
      this.list = data?.list ?? [];
      this.total = data.total ?? 0;
      this.loading = false;
    },
    // 根据字典类型获取字典数据列表
    async loadDictDataList() {
      const data = await sysDictDataApi.getDictMapList();
      this.dictDataMap = data?.data ?? {};
    },
  }
});

2. 组件中使用字典

直接使用

<template>
    <a-tag color="arcoblue">
      {{
        smsCarrier.find((item) => item.dictValue === record.channel)
          ?.dictLabel ?? ''
      }}
    </a-tag>
</template>

<script setup lang="ts">
  import useDict from '@/hooks/dict';
  import { DictData } from '@/types/sys/dict/DictData';

  // 短信服务商
  const smsCarrier = ref<DictData[]>([]);

  async function loadDicts() {
    smsCarrier.value = await useDict('smsCarrier');
  }

onMounted(() => {
   loadDicts();
});
</script>