refactor(page-table, page-dialog-form): 实现国际化自动响应,移除提前翻译逻辑

1. 为page-table和page-dialog-form添加内部$t翻译逻辑,支持语言切换自动更新
2. 移除data()中提前翻译的k()辅助函数,改为直接传入i18n key
3. 更新文档说明最新的i18n使用规范,新增迁移指南文档
4. 修复工厂区域页面的国际化调用方式,统一使用this.key()传参
This commit is contained in:
sheng
2026-05-28 11:30:08 +08:00
parent 48cfebd008
commit 4539bec3a4
6 changed files with 351 additions and 219 deletions

View File

@@ -8,7 +8,7 @@
不支持复杂表单联动如有需要通过默认插槽自定义内容
依赖element-ui <el-dialog> <el-form> <el-input> <el-select>
i18n由调用方负责翻译组件直接渲染传入的文本
i18n组件内部通过 $t() 翻译传入的 i18n key切换语言时自动响应
@author 前端团队
@since 2026-05
@@ -22,7 +22,7 @@
-->
<el-dialog
:visible.sync="visibleProxy"
:title="title"
:title="$t(title)"
:width="width"
:close-on-click-modal="false"
:destroy-on-close="true"
@@ -37,7 +37,7 @@
<el-form
ref="form"
:model="formData"
:rules="rules"
:rules="translatedRules"
:label-width="labelWidth || '100px'"
>
<!--
@@ -51,7 +51,7 @@
<el-form-item
v-for="col in flatFormCols"
:key="col.prop"
:label="col.label"
:label="$t(col.label)"
:prop="col.prop"
>
<!-- ===== 输入框类型 ===== -->
@@ -64,7 +64,7 @@
<el-input
v-if="col.type === 'input'"
v-model="formData[col.prop]"
:placeholder="col.placeholder"
:placeholder="$t(col.placeholder)"
:type="col.inputType || 'text'"
:autosize="col.autosize"
:clearable="col.clearable !== false"
@@ -79,7 +79,7 @@
<el-select
v-else-if="col.type === 'select'"
v-model="formData[col.prop]"
:placeholder="col.placeholder"
:placeholder="$t(col.placeholder)"
:clearable="col.clearable !== false"
:style="col.style"
:filterable="col.filterable !== false"
@@ -107,8 +107,8 @@
由调用方负责翻译传已翻译的文本即可
-->
<template #footer>
<el-button @click="onClose">{{ cancelText }}</el-button>
<el-button type="primary" :loading="submitting" @click="onSubmit">{{ confirmText }}</el-button>
<el-button @click="onClose">{{ $t(cancelText) }}</el-button>
<el-button type="primary" :loading="submitting" @click="onSubmit">{{ $t(confirmText) }}</el-button>
</template>
</el-dialog>
</template>
@@ -243,6 +243,15 @@ export default {
*/
flatFormCols () {
return this.formCols.flat()
},
translatedRules () {
const rules = this.rules || {}
const translated = {}
for (const [field, validators] of Object.entries(rules)) {
translated[field] = validators.map(v => ({ ...v, message: this.$t(v.message) }))
}
return translated
}
},
methods: {
@@ -258,7 +267,6 @@ export default {
onSubmit () {
this.$refs.form.validate((valid, invalidFields) => {
if (!valid) {
// 验证失败:取第一条错误信息提示用户
const firstKey = Object.keys(invalidFields)[0]
if (firstKey && invalidFields[firstKey].length) {
const msg = invalidFields[firstKey][0].message

View File

@@ -35,7 +35,7 @@
:disabled="btn.needSelection && !selectedCount"
@click="btn.onClick"
>
{{ btn.label }}
{{ $t(btn.label) }}
</el-button>
<!-- 自定义工具栏内容如打印按钮列筛选器等 -->
<slot name="toolbar-extra" />
@@ -91,7 +91,7 @@
:key="'idx-' + col.idx"
type="index"
:width="col.width"
:label="col.label || '#'"
:label="$t(col.label) || '#'"
/>
<!-- 3. 操作列自动渲染 rowButtons编辑/删除等行内按钮 -->
<!--
@@ -382,6 +382,9 @@ export default {
delete attrs.idx
delete attrs.slot
delete attrs.headerSlot
if (attrs.label) {
attrs.label = this.$t(attrs.label)
}
return attrs
},