字典管理设计
概述
字典管理用于统一管理系统中的下拉选项、状态标签、分类数据等静态或半静态数据。通过字典标识（唯一英文标识）进行引用，实现数据的一处维护、多处调用，便于统一管理和更新。
核心价值：
- 统一管理：所有字典数据集中维护，修改一处即可全局生效
- 低代码引用：在表单和列表中通过
dictKey直接引用，无需硬编码 - 多场景复用：支持下拉选择（select）、单选（radio）、多选（checkbox）、状态标签（tagList）等多种场景
字典数据
字典数据以 JSON 数组 格式存储，每个数据项包含 label 和 value 两个核心字段：
| 字段 | 说明 | 类型 | 是否必填 |
|---|---|---|---|
label | 显示名称（用户看到的文本） | string | 是 |
value | 实际值（存储/传输用的值） | string | number | 是 |
示例
[
{
"label": "设计表单1",
"value": "1"
},
{
"label": "流程表单2",
"value": "2"
},
{
"label": "流程表单3",
"value": "3"
}
]
字典标识命名规范
字典标识（dictKey）为唯一英文标识，建议遵循以下命名规范：
| 规则 | 说明 | 示例 |
|---|---|---|
| 全小写 | 统一使用小写字母 | sys_form、order_status |
| 下划线分隔 | 单词间用下划线连接 | user_role、device_type |
| 语义化 | 表意清晰，见名知义 | article_category 表示文章分类 |
| 模块前缀 | 按模块加前缀便于归类 | sys_config、sys_dict、order_status、user_gender |
命名示例
// ✅ 推荐
"sys_form" // 系统表单字典
"order_status" // 订单状态字典
"user_gender" // 用户性别字典
"device_type" // 设备类型字典
"task_priority" // 任务优先级字典
// ❌ 不推荐
"form" // 过于宽泛，容易冲突
"orderStatus" // 驼峰命名，应使用下划线
"zhuangtai" // 拼音，应使用英文
操作步骤
创建字典
- 进入 页面设计 → 字典管理
- 点击 新增 按钮
- 填写字典信息：
- 模板名称：如
表单分类 - 字典标识：如
sys_form（英文唯一） - 状态：
启用/禁用 - 备注：补充说明
- 模板名称：如
- 点击 确定 保存
设置字典数据
- 在字典列表中找到已创建的字典
- 点击右侧 设置 按钮
- 以 JSON 数组 格式输入字典数据
- 点击 保存 生效
数据格式：
[
{
"label": "设计表单1",
"value": "1"
},
{
"label": "流程表单2",
"value": "2"
},
{
"label": "流程表单3",
"value": "3"
}
]
使用数据字典
在表单中引用字典
在表单设计的字段配置中，通过 config 中的 optionsType 和 optionsFun 引用字典：
| 配置项 | 说明 | 示例值 |
|---|---|---|
optionsType | 选项来源类型，2 表示数据字典 | 2 |
optionsFun | 字典标识（dictKey） | "sys_form" |
表单配置示例
{
type: "select",
name: "form_type",
control: {
modelValue: "",
placeholder: "请选择表单类型"
},
options: [],
config: {
optionsType: 2, // 2 = 数据字典
optionsFun: "sys_form" // 字典标识
},
formItem: {
label: "表单类型"
}
}
各 optionsType 对比
| 值 | 说明 | optionsFun 配置 | 适用场景 |
|---|---|---|---|
0 | 固定选项 | 无需配置，使用 control.options | 选项固定不变 |
1 | 远程接口 | 接口 URL | 选项动态加载 |
2 | 数据字典 | 字典标识（如 sys_form） | 统一管理、多处复用 |
在列表中引用字典
在列表设计的列配置中，通过 config 中的 dictKey 引用字典进行数据翻译：
| 配置项 | 说明 | 示例值 |
|---|---|---|
type | 渲染类型，dictKey 表示字典映射 | "dictKey" |
dictKey | 字典标识 | "sys_form" |
列表列配置示例
{
prop: "form_type",
label: "表单类型",
config: {
dictKey: "sys_form", // 字典标识
type: "dictKey" // 渲染类型
},
width: "120px",
align: "center"
}