字典管理

vue-admin-kit 提供完整的字典管理功能，支持字典加载、缓存、响应式获取等。

使用字典

import {
  useDict,
  useDictReactive,
  useDictLabel,
  useDictOptions,
  useDictTagType,
  getDictLabel,
  getDictLabels,
  preloadDicts,
  clearDictCache,
  isDictLoaded,
  areDictsLoaded,
} from "vue-admin-kit";

// 响应式获取字典数据
const { dictData, loaded } = useDict("sys_status");

// 响应式字典（返回 ref）
const statusDict = useDictReactive("sys_status");

// 获取字典标签
const statusLabel = useDictLabel("sys_status", "1");

// 获取字典选项列表（用于 Select 组件）
const statusOptions = useDictOptions("sys_status");

// 获取字典标签类型（用于 Tag 组件）
const tagType = useDictTagType("sys_status", "1");

// 同步获取（需确保已加载）
const label = getDictLabel("sys_status", "1");

// 批量获取标签
const labels = getDictLabels("sys_status", ["1", "2"]);

// 预加载字典
await preloadDicts(["sys_status", "sys_yes_no", "sys_user_sex"]);

// 清除字典缓存
clearDictCache("sys_status"); // 清除单个
clearDictCache(); // 清除全部

// 检查字典是否已加载
const loaded = isDictLoaded("sys_status");
const allLoaded = areDictsLoaded(["sys_status", "sys_yes_no"]);

自定义字典适配器

import type { DictAdapterConfig } from "vue-admin-kit";

export const CUSTOM_ADAPTERS: Record<string, DictAdapterConfig> = {
  // 自定义适配器：保险专员
  insurance_commissioner: {
    api: () => getCommissionerList(),
    params: () => ({ roleCode: "commissioner" }),
    transform: (response) => {
      const data = response?.data || response;
      return data.map((item: any) => ({
        label: item.name,
        value: String(item.id),
      }));
    },
  },
};

// 在配置中注册
setupPageTemplate({
  dependencies: {
    customAdapters: CUSTOM_ADAPTERS,
  },
});

字典类型定义

interface DictDataOption {
  label: string;
  value: string;
  elTagType?: "success" | "warning" | "danger" | "info" | "";
  raw?: any;
}

interface DictAdapterConfig {
  api: () => Promise<any>;
  params?: () => Record<string, any>;
  transform: (response: any) => DictDataOption[];
}