介绍

基于 BuildAdmin 的多语言数据字典

功能特性

字典条目

提供全面的字典项管理功能，涵盖增、删、改、查操作。同时，支持一键快速生成各类代码，包括远程下拉配置代码、表单项代码以及表格列配置代码，极大提升开发效率。

字典类型

具备字典条目分类管理能力，可有效应对字典项繁多的场景，实现条理清晰的分类管理，便于用户快速查找与使用。

字典数据

可对每个字典条目下的数据集进行精细管理。字典数据不仅支持多语言显示，还支持用户根据实际需求自定义支持的翻译语言，满足多样化的多语言需求。

安装使用

多语言支持

模块为字典数据预设了 中文、英文、德语、法语 四种语言，若您需要修改支持的语言，请于：后台 > 字典条目 > 字典翻译语言 > 字典数据（即支持的语言列表本身也是一个字典条目）

快速生成代码

1、此功能仅推荐开发者使用
2、功能位于：后台 > 字典条目 > 生成远程下拉框代码
3、翻译 key 和 表单字段名：用于配置生成代码中的表单字段名和字段 label 的多语言翻译 key

字典状态商店

本模块自带了一个字典状态商店，方便前端随时访问字典数据，代码文件位于 /@/stores/dict，以下此状态商店的详细介绍：

State

Actions

以 get 开头的函数总是返回一个 ComputedRef，即值需要通过 .value 访问

vue 模板中使用字典数据

建议判断 dict.state.initialized === true 确保字典数据已经加载完毕后再渲染，比如：

<div v-if="dict.state.initialized"> {{ dict.getDictValue('audit_status', 'submitted') }} </div>

当然，以上情景不加 v-if 直接渲染也是可以的，因为返回数据具有响应性，当字典值由 undefined 更新为实际值后，页面将自动重新渲染。

JavaScript 中使用字典数据

1. 首先是需要防范数据尚未加载完毕的情况，以下是两个确定数据已加载完毕的办法：

import { useDict } from '/@/stores/dict' const dict = useDict() // 可能为空值，因为数据尚未加载完毕 console.log(dict.getDictValue('test', 'test1').value) /** * setTimeout 回调法 * 由于 vue 的 setup 中不能直接使用 await，通过回调函数的形式绕过限制使用 await */ setTimeout(async () => { /** * 等待初始化完毕 * 内部有缓存检查和唯一化的请求 Promise，有类似节流的效果 */ await dict.initialize() // 此时即可成功获取到值 console.log(dict.getDictValue('test', 'test1').value) }, 0) /** * 还可以使用 onMounted 等回调法 */ onMounted(async () => { await dict.initialize() // 此时即可成功获取到值 console.log(dict.getDictValue('test', 'test1').value) })

2. 获取字典数据的方法内部使用了 computed 包裹，所以当字典数据直接用于渲染函数时，无需等待数据加载完毕，渲染函数内部能正确处理数据响应完成重新渲染，比如：

formatter(row, column, cellValue) { return dict.getDictValue('test', cellValue) }

3. 虽然字典数据类型已经是 ComputedRef，但不影响您嵌套使用 computed
4. 在 BuildAdmin 的开发环境中，php think run 一次只能处理一个请求，即请求是排队处理的，可能造成字典数据总是能够正常被访问（已加载完毕）的假象，若需确认使用字典数据的逻辑是正确的，可以延迟状态商店代码文件底部的 initialize() 调用代码来观察业务逻辑