feat: 菜单管理国际化完成

src/components/menu_tree/select.vue

@@ -3,7 +3,7 @@
         show-search
         style="width: 100%"
         :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-        placeholder="请选择"
+        :placeholder="$t('select.placeholder')"
         allow-clear
         tree-default-expand-all
         :treeData="treeData"

src/local/system.js

@@ -3,4 +3,21 @@ export default {
     'system.jobName.add': ['请输入@:system.jobName', 'Please Input @:system.jobName'],
     'system.department': ['所属部门', 'Department'],
     'system.userTitleName': ['用户职称', 'User Title Name'],
+    'menu.name': ['名称', 'Menu Name'],
+    'menu.type': ['类型', 'Menu Type'],
+    'menu.order': ['排序', 'Order'],
+    'menu.icon': ['图标', 'Icon'],
+    'menu.addComponent': ['添加组件', 'Add Component'],
+    'menu.menuComponent': ['菜单组件', 'Menu Component'],
+    'menu.componentName': ['组件名称', 'Component Name'],
+    'menu.componentCode': ['组件编码', 'Component Code'],
+    'menu.parent': ['父级', 'Parent'],
+    'menu.noSelected': ['没选择代表根目录', 'No Representative Root Is Selected'],
+    'menu.catalogue': ['目录', 'Catalogue'],
+    'menu.menu': ['菜单', 'Menu'],
+    'menu.chineseName': ['中文名称', 'Chinese Name'],
+    'menu.englishName': ['英文名称', 'English Name'],
+    'menu.menuUrlRequired': ['请输入Url', 'URL Is Required'],
+    'menu.menuTypeNameZhRequired': ['请输入中文名称', '@:menu.chineseName Is Required'],
+    'menu.menuTypeNameEnRequired': ['请输入英文名称', '@:menu.englishName Is Required'],
 };

src/pages/system/menu/MenuManagement.vue

@@ -12,12 +12,17 @@
             <Form ref="addForm" v-else />
         </template>
 
-        <a-table-column title="名称" data-index="menuName" />
-        <a-table-column title="类型" data-index="menuTypeName" />
-        <a-table-column title="显示排序" data-index="viewIndex" :sorter="sorter" sortOrder="ascend" />
-        <a-table-column title="显示图标" data-index="menuIcon" />
-        <a-table-column title="模块URL" data-index="menuUrl" />
-        <a-table-column title="操作">
+        <a-table-column :title="$t('menu.name')" data-index="menuName" />
+        <a-table-column :title="$t('menu.type')" data-index="menuTypeName" />
+        <a-table-column
+            :title="$t('menu.order')"
+            data-index="viewIndex"
+            :sorter="sorter"
+            sortOrder="ascend"
+        />
+        <a-table-column :title="$t('menu.icon')" data-index="menuIcon" />
+        <a-table-column title="URL" data-index="menuUrl" />
+        <a-table-column :title="$t('table.operation')">
             <template #default="row">
                 <my-ac-btn :row="row" :buttons="buttons" />
             </template>
@@ -31,11 +36,11 @@ import Form from './form.vue';
 import AddCom from './add_com.vue';
 
 export default {
-    data: vm => ({
+    data: (vm) => ({
         addCom: false,
         currentClickRow: null,
         addBtn: {
-            text: '新建',
+            text: vm.$t('table.add'),
             onOk() {
                 return vm.addCom ? vm.$refs['addCom']?.submit() : vm.$refs['addForm']?.submit();
             },
@@ -47,7 +52,7 @@ export default {
         sortOrder: 'ascend',
         buttons: [
             {
-                label: '新增组件',
+                label: vm.$t('menu.addComponent'),
                 option: {
                     style: 'color: #ff4d4f',
                 },
@@ -56,10 +61,10 @@ export default {
                     vm.addCom = true;
                     vm.currentClickRow = row;
                 },
-                isHidden: row => row.menuType !== 'MENU',
+                isHidden: (row) => row.menuType !== 'MENU',
             },
-            { label: '编辑', click: vm.edit },
-            { type: 'confirm', url: row => `/api/v1/menus/${row.menuId}`, after: vm.refreshTable },
+            { label: vm.$t('table.edit'), click: vm.edit },
+            { type: 'confirm', url: (row) => `/api/v1/menus/${row.menuId}`, after: vm.refreshTable },
         ],
     }),
 
@@ -80,7 +85,7 @@ export default {
             });
         },
         show() {
-            this.$refs['table'].show({ title: '菜单组件' });
+            this.$refs['table'].show({ title: this.$t('menu.menuComponent') });
         },
     },
 };

src/pages/system/menu/add_com.vue

 <template>
     <div>
-        <a-button type="primary" class="tw-mb-2" @click="add">新增</a-button>
+        <a-button type="primary" class="tw-mb-2" @click="add">{{ $t('table.add') }}</a-button>
         <a-table :dataSource="components" :rowKey="getRowKey" :pagination="false">
-            <a-table-column title="组件编码">
+            <a-table-column :title="$t('menu.componentCode')">
                 <template #default="row">
                     <span v-if="row.componentId">{{ row.componentCode }}</span>
                     <a-input v-else v-model="row.componentCode" />
                 </template>
             </a-table-column>
-            <a-table-column title="组件名称">
+            <a-table-column :title="$t('menu.componentName')">
                 <template #default="row">
                     <span v-if="row.componentId">{{ row.componentName }}</span>
                     <a-input v-else v-model="row.componentName" />
                 </template>
             </a-table-column>
-            <a-table-column title="操作">
+            <a-table-column :title="$t('table.operation')">
                 <template #default="row">
-                    <a @click="() => del(row)">删除</a>
+                    <a @click="() => del(row)">{{ $t('table.delete') }}</a>
                 </template>
             </a-table-column>
         </a-table>
@@ -50,7 +50,7 @@ export default {
             });
         },
         del(row) {
-            this.components = this.components.filter(r => r !== row);
+            this.components = this.components.filter((r) => r !== row);
         },
         getRowKey(row) {
             return row.__key__ ? row.__key__ : row.componentId;
@@ -60,7 +60,7 @@ export default {
 
             return addMenuComponentApi(
                 menuId,
-                this.components.map(i => {
+                this.components.map((i) => {
                     delete i.__key__;
                     return i;
                 }),

src/pages/system/menu/form.vue

 <template>
     <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
-        <a-form-model-item label="父级" extra="没选择代表根目录" v-if="isAdd">
+        <a-form-model-item :label="$t('menu.parent')" :extra="$t('menu.noSelected')" v-if="isAdd">
             <MenuTree v-model="form.parentMenuId" />
         </a-form-model-item>
-        <a-form-model-item label="类型">
+        <a-form-model-item :label="$t('menu.type')">
             <a-radio-group v-model="form.menuType" :disabled="isEdit">
-                <a-radio value="CATALOG">目录</a-radio>
-                <a-radio value="MENU">菜单</a-radio>
+                <a-radio value="CATALOG">{{ $t('menu.catalogue') }}</a-radio>
+                <a-radio value="MENU">{{ $t('menu.menu') }}</a-radio>
             </a-radio-group>
         </a-form-model-item>
-        <a-form-model-item label="中文名称">
-            <a-input v-model="menuTypeNameZh" />
+        <a-form-model-item :label="$t('menu.chineseName')" prop="menuTypeNameZh">
+            <a-input v-model="form.menuTypeNameZh" :placeholder="$t('input.placeholder')" />
         </a-form-model-item>
-        <a-form-model-item label="英文名称">
-            <a-input v-model="menuTypeNameEn" />
+        <a-form-model-item :label="$t('menu.englishName')" prop="menuTypeNameEn">
+            <a-input v-model="form.menuTypeNameEn" :placeholder="$t('input.placeholder')" />
         </a-form-model-item>
-        <a-form-model-item label="模块URL" prop="menuUrl">
-            <a-input v-model="form.menuUrl" />
+        <a-form-model-item label="URL" prop="menuUrl">
+            <a-input v-model="form.menuUrl" :placeholder="$t('input.placeholder')" />
         </a-form-model-item>
-        <a-form-model-item label="显示排序" prop="viewIndex">
+        <a-form-model-item :label="$t('menu.order')" prop="viewIndex">
             <a-input-number v-model="form.viewIndex" />
         </a-form-model-item>
-        <a-form-model-item label="显示图标" prop="menuIcon">
-            <a-input v-model="form.menuIcon" />
+        <a-form-model-item :label="$t('menu.icon')" prop="menuIcon">
+            <a-input v-model="form.menuIcon" :placeholder="$t('input.placeholder')" />
         </a-form-model-item>
-        <a-form-model-item label="说明" prop="menuRemark">
-            <a-textarea v-model="form.menuRemark" />
+        <a-form-model-item :label="$t('table.remark')" prop="menuRemark">
+            <a-textarea v-model="form.menuRemark" :placeholder="$t('input.placeholder')" />
         </a-form-model-item>
     </a-form-model>
 </template>
@@ -36,7 +36,7 @@ import MenuTree from '@/components/menu_tree/select.vue';
 
 export default {
     components: { MenuTree },
-    data: () => ({
+    data: (vm) => ({
         type: 0,
         form: {
             menuType: 'CATALOG',
@@ -47,12 +47,14 @@ export default {
                 { i18nLocale: 'en_US', i18nMessage: '' },
             ],
             menuRemark: '',
-        },
             menuTypeNameZh: '',
             menuTypeNameEn: '',
+        },
 
         rules: {
-            menuUrl: [{ required: true }],
+            menuUrl: [{ required: true, message: vm.$t('menu.menuUrlRequired') }],
+            menuTypeNameZh: [{ required: true, message: vm.$t('menu.menuTypeNameZhRequired') }],
+            menuTypeNameEn: [{ required: true, message: vm.$t('menu.menuTypeNameEnRequired') }],
         },
     }),
     computed: {
@@ -66,18 +68,18 @@ export default {
     methods: {
         async submit() {
             await this.$refs['form'].validate();
-            console.log('this.form.enuNameI18nList', this.form.enuNameI18nList);
             const reqData = {
                 ...this.form,
                 parentMenuId: this.form.parentMenuId ?? 0,
-                menuNameI18nList: this.form.menuNameI18nList.map(i18 => {
-                    if (i18.i18nLocale === 'en_US') i18.i18nMessage = this.menuTypeNameEn;
-                    if (i18.i18nLocale === 'zh_CN') i18.i18nMessage = this.menuTypeNameZh;
+                menuNameI18nList: this.form.menuNameI18nList.map((i18) => {
+                    if (i18.i18nLocale === 'en_US') i18.i18nMessage = this.form.menuTypeNameEn;
+                    if (i18.i18nLocale === 'zh_CN') i18.i18nMessage = this.form.menuTypeNameZh;
                     return i18;
                 }),
                 menuName: this.menuTypeNameZh,
+                menuTypeNameEn: undefined,
+                menuTypeNameZh: undefined,
             };
-            console.log('this.form.enuNameI18nList', this.form.enuNameI18nList);
 
             return this.isEdit ? updateMenuApi(reqData) : addMenuApi(reqData);
         },
@@ -85,9 +87,12 @@ export default {
             this.type = 1;
             this.form = await getMenuDetailApi(data.menuId);
 
-            this.form.menuNameI18nList?.forEach(i18 => {
-                if (i18.i18nLocale === 'en_US') this.menuTypeNameEn = i18.i18nMessage;
-                if (i18.i18nLocale === 'zh_CN') this.menuTypeNameZh = i18.i18nMessage;
+            this.$set(this.form, 'menuTypeNameEn', '');
+            this.$set(this.form, 'menuTypeNameZh', '');
+
+            this.form.menuNameI18nList?.forEach((i18) => {
+                if (i18.i18nLocale === 'en_US') this.form.menuTypeNameEn = i18.i18nMessage;
+                if (i18.i18nLocale === 'zh_CN') this.form.menuTypeNameZh = i18.i18nMessage;
             });
         },
     },