Skip to content

GitLab

S
Starter Web Vue
Commit 0a73a4bb authored by shuiluo's avatar shuiluo
Browse files
Options

feat: 菜单管理国际化完成

parent 593f5e6f
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 48 deletions
src/components/menu_tree/select.vue
View file @ 0a73a4bb
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
show-search show-search
style="width: 100%" style="width: 100%"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
placeholder="请选择" :placeholder="$t('select.placeholder')"
allow-clear allow-clear
tree-default-expand-all tree-default-expand-all
:treeData="treeData" :treeData="treeData"
......
src/local/system.js
View file @ 0a73a4bb
...@@ -3,4 +3,21 @@ export default { ...@@ -3,4 +3,21 @@ export default {
'system.jobName.add': ['请输入@:system.jobName', 'Please Input @:system.jobName'], 'system.jobName.add': ['请输入@:system.jobName', 'Please Input @:system.jobName'],
'system.department': ['所属部门', 'Department'], 'system.department': ['所属部门', 'Department'],
'system.userTitleName': ['用户职称', 'User Title Name'], '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
View file @ 0a73a4bb
...@@ -12,12 +12,17 @@ ...@@ -12,12 +12,17 @@
<Form ref="addForm" v-else /> <Form ref="addForm" v-else />
</template> </template>
<a-table-column title="名称" data-index="menuName" /> <a-table-column :title="$t('menu.name')" data-index="menuName" />
<a-table-column title="类型" data-index="menuTypeName" /> <a-table-column :title="$t('menu.type')" data-index="menuTypeName" />
<a-table-column title="显示排序" data-index="viewIndex" :sorter="sorter" sortOrder="ascend" /> <a-table-column
<a-table-column title="显示图标" data-index="menuIcon" /> :title="$t('menu.order')"
<a-table-column title="模块URL" data-index="menuUrl" /> data-index="viewIndex"
<a-table-column title="操作"> :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"> <template #default="row">
<my-ac-btn :row="row" :buttons="buttons" /> <my-ac-btn :row="row" :buttons="buttons" />
</template> </template>
...@@ -31,11 +36,11 @@ import Form from './form.vue'; ...@@ -31,11 +36,11 @@ import Form from './form.vue';
import AddCom from './add_com.vue'; import AddCom from './add_com.vue';
export default { export default {
data: vm => ({ data: (vm) => ({
addCom: false, addCom: false,
currentClickRow: null, currentClickRow: null,
addBtn: { addBtn: {
text: '新建', text: vm.$t('table.add'),
onOk() { onOk() {
return vm.addCom ? vm.$refs['addCom']?.submit() : vm.$refs['addForm']?.submit(); return vm.addCom ? vm.$refs['addCom']?.submit() : vm.$refs['addForm']?.submit();
}, },
...@@ -47,7 +52,7 @@ export default { ...@@ -47,7 +52,7 @@ export default {
sortOrder: 'ascend', sortOrder: 'ascend',
buttons: [ buttons: [
{ {
label: '新增组件', label: vm.$t('menu.addComponent'),
option: { option: {
style: 'color: #ff4d4f', style: 'color: #ff4d4f',
}, },
...@@ -56,10 +61,10 @@ export default { ...@@ -56,10 +61,10 @@ export default {
vm.addCom = true; vm.addCom = true;
vm.currentClickRow = row; vm.currentClickRow = row;
}, },
isHidden: row => row.menuType !== 'MENU', isHidden: (row) => row.menuType !== 'MENU',
}, },
{ label: '编辑', click: vm.edit }, { label: vm.$t('table.edit'), click: vm.edit },
{ type: 'confirm', url: row => `/api/v1/menus/${row.menuId}`, after: vm.refreshTable }, { type: 'confirm', url: (row) => `/api/v1/menus/${row.menuId}`, after: vm.refreshTable },
], ],
}), }),
...@@ -80,7 +85,7 @@ export default { ...@@ -80,7 +85,7 @@ export default {
}); });
}, },
show() { show() {
this.$refs['table'].show({ title: '菜单组件' }); this.$refs['table'].show({ title: this.$t('menu.menuComponent') });
}, },
}, },
}; };
......
src/pages/system/menu/add_com.vue
View file @ 0a73a4bb
<template> <template>
<div> <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 :dataSource="components" :rowKey="getRowKey" :pagination="false">
<a-table-column title="组件编码"> <a-table-column :title="$t('menu.componentCode')">
<template #default="row"> <template #default="row">
<span v-if="row.componentId">{{ row.componentCode }}</span> <span v-if="row.componentId">{{ row.componentCode }}</span>
<a-input v-else v-model="row.componentCode" /> <a-input v-else v-model="row.componentCode" />
</template> </template>
</a-table-column> </a-table-column>
<a-table-column title="组件名称"> <a-table-column :title="$t('menu.componentName')">
<template #default="row"> <template #default="row">
<span v-if="row.componentId">{{ row.componentName }}</span> <span v-if="row.componentId">{{ row.componentName }}</span>
<a-input v-else v-model="row.componentName" /> <a-input v-else v-model="row.componentName" />
</template> </template>
</a-table-column> </a-table-column>
<a-table-column title="操作"> <a-table-column :title="$t('table.operation')">
<template #default="row"> <template #default="row">
<a @click="() => del(row)">删除</a> <a @click="() => del(row)">{{ $t('table.delete') }}</a>
</template> </template>
</a-table-column> </a-table-column>
</a-table> </a-table>
...@@ -50,7 +50,7 @@ export default { ...@@ -50,7 +50,7 @@ export default {
}); });
}, },
del(row) { del(row) {
this.components = this.components.filter(r => r !== row); this.components = this.components.filter((r) => r !== row);
}, },
getRowKey(row) { getRowKey(row) {
return row.__key__ ? row.__key__ : row.componentId; return row.__key__ ? row.__key__ : row.componentId;
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
return addMenuComponentApi( return addMenuComponentApi(
menuId, menuId,
this.components.map(i => { this.components.map((i) => {
delete i.__key__; delete i.__key__;
return i; return i;
}), }),
......
src/pages/system/menu/form.vue
View file @ 0a73a4bb
<template> <template>
<a-form-model layout="vertical" :model="form" :rules="rules" ref="form"> <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" /> <MenuTree v-model="form.parentMenuId" />
</a-form-model-item> </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-group v-model="form.menuType" :disabled="isEdit">
<a-radio value="CATALOG">目录</a-radio> <a-radio value="CATALOG">{{ $t('menu.catalogue') }}</a-radio>
<a-radio value="MENU">菜单</a-radio> <a-radio value="MENU">{{ $t('menu.menu') }}</a-radio>
</a-radio-group> </a-radio-group>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="中文名称"> <a-form-model-item :label="$t('menu.chineseName')" prop="menuTypeNameZh">
<a-input v-model="menuTypeNameZh" /> <a-input v-model="form.menuTypeNameZh" :placeholder="$t('input.placeholder')" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="英文名称"> <a-form-model-item :label="$t('menu.englishName')" prop="menuTypeNameEn">
<a-input v-model="menuTypeNameEn" /> <a-input v-model="form.menuTypeNameEn" :placeholder="$t('input.placeholder')" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="模块URL" prop="menuUrl"> <a-form-model-item label="URL" prop="menuUrl">
<a-input v-model="form.menuUrl" /> <a-input v-model="form.menuUrl" :placeholder="$t('input.placeholder')" />
</a-form-model-item> </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-input-number v-model="form.viewIndex" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="显示图标" prop="menuIcon"> <a-form-model-item :label="$t('menu.icon')" prop="menuIcon">
<a-input v-model="form.menuIcon" /> <a-input v-model="form.menuIcon" :placeholder="$t('input.placeholder')" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="说明" prop="menuRemark"> <a-form-model-item :label="$t('table.remark')" prop="menuRemark">
<a-textarea v-model="form.menuRemark" /> <a-textarea v-model="form.menuRemark" :placeholder="$t('input.placeholder')" />
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</template> </template>
...@@ -36,7 +36,7 @@ import MenuTree from '@/components/menu_tree/select.vue'; ...@@ -36,7 +36,7 @@ import MenuTree from '@/components/menu_tree/select.vue';
export default { export default {
components: { MenuTree }, components: { MenuTree },
data: () => ({ data: (vm) => ({
type: 0, type: 0,
form: { form: {
menuType: 'CATALOG', menuType: 'CATALOG',
...@@ -47,12 +47,14 @@ export default { ...@@ -47,12 +47,14 @@ export default {
{ i18nLocale: 'en_US', i18nMessage: '' }, { i18nLocale: 'en_US', i18nMessage: '' },
], ],
menuRemark: '', menuRemark: '',
menuTypeNameZh: '',
menuTypeNameEn: '',
}, },
menuTypeNameZh: '',
menuTypeNameEn: '',
rules: { 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: { computed: {
...@@ -66,18 +68,18 @@ export default { ...@@ -66,18 +68,18 @@ export default {
methods: { methods: {
async submit() { async submit() {
await this.$refs['form'].validate(); await this.$refs['form'].validate();
console.log('this.form.enuNameI18nList', this.form.enuNameI18nList);
const reqData = { const reqData = {
...this.form, ...this.form,
parentMenuId: this.form.parentMenuId ?? 0, parentMenuId: this.form.parentMenuId ?? 0,
menuNameI18nList: this.form.menuNameI18nList.map(i18 => { menuNameI18nList: this.form.menuNameI18nList.map((i18) => {
if (i18.i18nLocale === 'en_US') i18.i18nMessage = this.menuTypeNameEn; if (i18.i18nLocale === 'en_US') i18.i18nMessage = this.form.menuTypeNameEn;
if (i18.i18nLocale === 'zh_CN') i18.i18nMessage = this.menuTypeNameZh; if (i18.i18nLocale === 'zh_CN') i18.i18nMessage = this.form.menuTypeNameZh;
return i18; return i18;
}), }),
menuName: this.menuTypeNameZh, menuName: this.menuTypeNameZh,
menuTypeNameEn: undefined,
menuTypeNameZh: undefined,
}; };
console.log('this.form.enuNameI18nList', this.form.enuNameI18nList);
return this.isEdit ? updateMenuApi(reqData) : addMenuApi(reqData); return this.isEdit ? updateMenuApi(reqData) : addMenuApi(reqData);
}, },
...@@ -85,9 +87,12 @@ export default { ...@@ -85,9 +87,12 @@ export default {
this.type = 1; this.type = 1;
this.form = await getMenuDetailApi(data.menuId); this.form = await getMenuDetailApi(data.menuId);
this.form.menuNameI18nList?.forEach(i18 => { this.$set(this.form, 'menuTypeNameEn', '');
if (i18.i18nLocale === 'en_US') this.menuTypeNameEn = i18.i18nMessage; this.$set(this.form, 'menuTypeNameZh', '');
if (i18.i18nLocale === 'zh_CN') this.menuTypeNameZh = i18.i18nMessage;
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;
}); });
}, },
}, },
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment