feat(i18n): add dict management multilang UI with en/vi input fields

This commit is contained in:
2026-06-24 13:42:12 +08:00
parent 822414c228
commit f4fe7fe873
4 changed files with 144 additions and 55 deletions

View File

@@ -294,7 +294,30 @@
"addDictType": "Add Dict Type",
"editDictType": "Edit Dict Type",
"englishValue": "English Value",
"vietnameseValue": "Vietnamese Value"
"vietnameseValue": "Vietnamese Value",
"enterDictLabel": "Enter dict label",
"dataStatus": "Data Status",
"dataLabel": "Data Label",
"enterDataLabel": "Enter data label",
"dataValue": "Data Value",
"enterDataValue": "Enter data value",
"cssClass": "CSS Class",
"enterCssClass": "Enter CSS class",
"displaySort": "Display Sort",
"listClass": "Display Style",
"listClassOptions": {
"default": "Default",
"primary": "Primary",
"success": "Success",
"info": "Info",
"warning": "Warning",
"danger": "Danger"
},
"enterContent": "Enter content",
"valDictLabelRequired": "Data label cannot be empty",
"valDictValueRequired": "Data value cannot be empty",
"valDictSortRequired": "Sort order cannot be empty",
"deleteConfirm": "Are you sure to delete dict data \"{id}\"?"
}
},
"dict": {

View File

@@ -294,7 +294,30 @@
"addDictType": "Thêm Loại Từ Điển",
"editDictType": "Sửa Loại Từ Điển",
"englishValue": "Giá Trị Tiếng Anh",
"vietnameseValue": "Giá Trị Tiếng Việt"
"vietnameseValue": "Giá Trị Tiếng Việt",
"enterDictLabel": "Nhập nhãn từ điển",
"dataStatus": "Trạng Thái Dữ Liệu",
"dataLabel": "Nhãn Dữ Liệu",
"enterDataLabel": "Nhập nhãn dữ liệu",
"dataValue": "Giá Trị Dữ Liệu",
"enterDataValue": "Nhập giá trị dữ liệu",
"cssClass": "Thuộc Tính CSS",
"enterCssClass": "Nhập thuộc tính CSS",
"displaySort": "Thứ Tự Hiển Thị",
"listClass": "Kiểu Hiển Thị",
"listClassOptions": {
"default": "Mặc Định",
"primary": "Chính",
"success": "Thành Công",
"info": "Thông Tin",
"warning": "Cảnh Báo",
"danger": "Nguy Hiểm"
},
"enterContent": "Nhập nội dung",
"valDictLabelRequired": "Nhãn dữ liệu không được để trống",
"valDictValueRequired": "Giá trị dữ liệu không được để trống",
"valDictSortRequired": "Thứ tự không được để trống",
"deleteConfirm": "Bạn có chắc chắn muốn xóa dữ liệu từ điển \"{id}\"?"
}
},
"dict": {

View File

@@ -294,7 +294,30 @@
"addDictType": "新增字典类型",
"editDictType": "编辑字典类型",
"englishValue": "英文值",
"vietnameseValue": "越南文值"
"vietnameseValue": "越南文值",
"enterDictLabel": "请输入字典标签",
"dataStatus": "数据状态",
"dataLabel": "数据标签",
"enterDataLabel": "请输入数据标签",
"dataValue": "数据键值",
"enterDataValue": "请输入数据键值",
"cssClass": "样式属性",
"enterCssClass": "请输入样式属性",
"displaySort": "显示排序",
"listClass": "回显样式",
"listClassOptions": {
"default": "默认",
"primary": "主要",
"success": "成功",
"info": "信息",
"warning": "警告",
"danger": "危险"
},
"enterContent": "请输入内容",
"valDictLabelRequired": "数据标签不能为空",
"valDictValueRequired": "数据键值不能为空",
"valDictSortRequired": "数据顺序不能为空",
"deleteConfirm": "是否确认删除字典编码为\"{id}\"的数据项?"
}
},
"dict": {

View File

@@ -8,7 +8,7 @@
class="query-form"
>
<el-form-item
label="字典名称"
:label="$t('system.dict.dictName')"
prop="dictType"
>
<el-select
@@ -24,24 +24,24 @@
</el-select>
</el-form-item>
<el-form-item
label="字典标签"
:label="$t('system.dict.dictLabel')"
prop="dictLabel"
>
<el-input
v-model="queryParams.dictLabel"
placeholder="请输入字典标签"
:placeholder="$t('system.dict.enterDictLabel')"
clearable
style="width: 200px"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item
label="状态"
:label="$t('common.status')"
prop="status"
>
<el-select
v-model="queryParams.status"
placeholder="数据状态"
:placeholder="$t('system.dict.dataStatus')"
clearable
style="width: 200px"
>
@@ -59,13 +59,13 @@
icon="Search"
@click="handleQuery"
>
搜索
{{ $t('common.search') }}
</el-button>
<el-button
icon="Refresh"
@click="resetQuery"
>
重置
{{ $t('common.reset') }}
</el-button>
</el-form-item>
</el-form>
@@ -82,7 +82,7 @@
icon="Plus"
@click="handleAdd"
>
新增
{{ $t('common.add') }}
</el-button>
</el-col>
<el-col :span="1.5">
@@ -94,7 +94,7 @@
:disabled="single"
@click="handleUpdate"
>
修改
{{ $t('common.edit') }}
</el-button>
</el-col>
<el-col :span="1.5">
@@ -106,7 +106,7 @@
:disabled="multiple"
@click="handleDelete"
>
删除
{{ $t('common.delete') }}
</el-button>
</el-col>
<el-col :span="1.5">
@@ -117,7 +117,7 @@
icon="Download"
@click="handleExport"
>
导出
{{ $t('common.export') }}
</el-button>
</el-col>
<el-col :span="1.5">
@@ -127,7 +127,7 @@
icon="Close"
@click="handleClose"
>
关闭
{{ $t('common.close') }}
</el-button>
</el-col>
<right-toolbar
@@ -147,12 +147,12 @@
align="center"
/>
<vxe-column
title="字典编码"
:title="$t('system.dict.dictCode')"
align="center"
field="dictCode"
/>
<vxe-column
title="字典标签"
:title="$t('system.dict.dictLabel')"
align="center"
field="dictLabel"
>
@@ -175,17 +175,17 @@
</template>
</vxe-column>
<vxe-column
title="字典键值"
:title="$t('system.dict.dictValue')"
align="center"
field="dictValue"
/>
<vxe-column
title="字典排序"
:title="$t('system.dict.dictSort')"
align="center"
field="dictSort"
/>
<vxe-column
title="状态"
:title="$t('common.status')"
align="center"
field="status"
>
@@ -198,13 +198,13 @@
</template>
</vxe-column>
<vxe-column
title="备注"
:title="$t('common.remark')"
align="center"
field="remark"
show-overflow="title"
/>
<vxe-column
title="创建时间"
:title="$t('common.createTime')"
align="center"
field="createTime"
width="180"
@@ -214,7 +214,7 @@
</template>
</vxe-column>
<vxe-column
title="操作"
:title="$t('common.operation')"
align="center"
width="160"
class-name="small-padding fixed-width"
@@ -228,7 +228,7 @@
class="action-button"
@click="handleUpdate(scope.row)"
>
修改
{{ $t('common.edit') }}
</el-button>
<el-button
v-hasPermi="['system:dict:remove']"
@@ -238,7 +238,7 @@
class="action-button"
@click="handleDelete(scope.row)"
>
删除
{{ $t('common.delete') }}
</el-button>
</template>
</vxe-column>
@@ -267,41 +267,57 @@
:rules="rules"
label-width="80px"
>
<el-form-item label="字典类型">
<el-form-item :label="$t('system.dict.dictType')">
<el-input
v-model="form.dictType"
:disabled="true"
/>
</el-form-item>
<el-form-item
label="数据标签"
:label="$t('system.dict.dataLabel')"
prop="dictLabel"
>
<el-input
v-model="form.dictLabel"
placeholder="请输入数据标签"
:placeholder="$t('system.dict.enterDataLabel')"
/>
</el-form-item>
<el-form-item
label="数据键值"
:label="$t('system.dict.englishValue')"
>
<el-input
v-model="form.dictValueEn"
:placeholder="$t('system.dict.englishValue')"
/>
</el-form-item>
<el-form-item
:label="$t('system.dict.vietnameseValue')"
>
<el-input
v-model="form.dictValueVi"
:placeholder="$t('system.dict.vietnameseValue')"
/>
</el-form-item>
<el-form-item
:label="$t('system.dict.dataValue')"
prop="dictValue"
>
<el-input
v-model="form.dictValue"
placeholder="请输入数据键值"
:placeholder="$t('system.dict.enterDataValue')"
/>
</el-form-item>
<el-form-item
label="样式属性"
:label="$t('system.dict.cssClass')"
prop="cssClass"
>
<el-input
v-model="form.cssClass"
placeholder="请输入样式属性"
:placeholder="$t('system.dict.enterCssClass')"
/>
</el-form-item>
<el-form-item
label="显示排序"
:label="$t('system.dict.displaySort')"
prop="dictSort"
>
<el-input-number
@@ -311,20 +327,20 @@
/>
</el-form-item>
<el-form-item
label="回显样式"
:label="$t('system.dict.listClass')"
prop="listClass"
>
<el-select v-model="form.listClass">
<el-option
v-for="item in listClassOptions"
:key="item.value"
:label="item.label + '(' + item.value + ')'"
:label="$t('system.dict.listClassOptions.' + item.value) + '(' + item.value + ')'"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="状态"
:label="$t('common.status')"
prop="status"
>
<el-radio-group v-model="form.status">
@@ -338,13 +354,13 @@
</el-radio-group>
</el-form-item>
<el-form-item
label="备注"
:label="$t('common.remark')"
prop="remark"
>
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入内容"
:placeholder="$t('system.dict.enterContent')"
/>
</el-form-item>
</el-form>
@@ -354,10 +370,10 @@
type="primary"
@click="submitForm"
>
确 定
{{ $t('common.confirm') }}
</el-button>
<el-button @click="cancel">
取 消
{{ $t('common.cancel') }}
</el-button>
</div>
</template>
@@ -369,7 +385,9 @@
import {addData, delData, getData, listData, updateData,} from "@/api/system/dict/data";
import {getType, optionselect as getDictOptionselect,} from "@/api/system/dict/type";
import useDictStore from "@/store/modules/dict";
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
@@ -387,12 +405,12 @@ const typeOptions = ref([]);
const route = useRoute();
// 数据标签回显样式
const listClassOptions = ref([
{ value: "default", label: "默认" },
{ value: "primary", label: "主要" },
{ value: "success", label: "成功" },
{ value: "info", label: "信息" },
{ value: "warning", label: "警告" },
{ value: "danger", label: "危险" },
{ value: "default", label: t('system.dict.listClassOptions.default') },
{ value: "primary", label: t('system.dict.listClassOptions.primary') },
{ value: "success", label: t('system.dict.listClassOptions.success') },
{ value: "info", label: t('system.dict.listClassOptions.info') },
{ value: "warning", label: t('system.dict.listClassOptions.warning') },
{ value: "danger", label: t('system.dict.listClassOptions.danger') },
]);
const data = reactive({
@@ -406,13 +424,13 @@ const data = reactive({
},
rules: {
dictLabel: [
{ required: true, message: "数据标签不能为空", trigger: "blur" },
{ required: true, message: t('system.dict.valDictLabelRequired'), trigger: "blur" },
],
dictValue: [
{ required: true, message: "数据键值不能为空", trigger: "blur" },
{ required: true, message: t('system.dict.valDictValueRequired'), trigger: "blur" },
],
dictSort: [
{ required: true, message: "数据顺序不能为空", trigger: "blur" },
{ required: true, message: t('system.dict.valDictSortRequired'), trigger: "blur" },
],
},
});
@@ -454,6 +472,8 @@ function reset() {
dictCode: undefined,
dictLabel: undefined,
dictValue: undefined,
dictValueEn: undefined,
dictValueVi: undefined,
cssClass: undefined,
listClass: "default",
dictSort: 0,
@@ -482,7 +502,7 @@ function resetQuery() {
function handleAdd() {
reset();
open.value = true;
title.value = "添加字典数据";
title.value = t('system.dict.addDictData');
form.value.dictType = queryParams.value.dictType;
}
/** 多选框选中数据 */
@@ -498,7 +518,7 @@ function handleUpdate(row) {
getData(dictCode).then((response) => {
form.value = response.data;
open.value = true;
title.value = "修改字典数据";
title.value = t('system.dict.editDictData');
});
}
/** 提交按钮 */
@@ -508,14 +528,14 @@ function submitForm() {
if (form.value.dictCode != undefined) {
updateData(form.value).then((response) => {
useDictStore().removeDict(queryParams.value.dictType);
proxy.$modal.msgSuccess("修改成功");
proxy.$modal.msgSuccess(t('message.editSuccess'));
open.value = false;
getList();
});
} else {
addData(form.value).then((response) => {
useDictStore().removeDict(queryParams.value.dictType);
proxy.$modal.msgSuccess("新增成功");
proxy.$modal.msgSuccess(t('message.addSuccess'));
open.value = false;
getList();
});
@@ -527,13 +547,13 @@ function submitForm() {
function handleDelete(row) {
const dictCodes = row.dictCode || ids.value;
proxy.$modal
.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?')
.confirm(t('system.dict.deleteConfirm', { id: dictCodes }))
.then(function () {
return delData(dictCodes);
})
.then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
proxy.$modal.msgSuccess(t('message.deleteSuccess'));
useDictStore().removeDict(queryParams.value.dictType);
})
.catch(() => {});