Skip to content

GitLab

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

feat: 菜单管理国际化完成

parent 593f5e6f
Show 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 @@
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
View file @ 0a73a4bb
......@@ -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
View file @ 0a73a4bb
......@@ -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
View file @ 0a73a4bb
<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
View file @ 0a73a4bb
<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;
});
},
},
......
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