【update】菜单管理-增加双语

src/components/menu/index.js

@@ -2,6 +2,7 @@ import Menu from 'ant-design-vue/es/menu'
 import Icon from 'ant-design-vue/es/icon'
 
 const { Item, SubMenu } = Menu
+// import i18n from '@/common/lang'
 
 export default {
   name: 'SMenu',
@@ -40,6 +41,10 @@ export default {
       return keys
     }
   },
+  created () {
+    const langCn = localStorage.language
+    this.showKey = langCn === 'en-us' ? 'titleEn' : 'title'
+  },
   mounted () {
     this.updateMenu()
   },
@@ -150,12 +155,12 @@ export default {
           item.meta = Object.assign(item.meta, { hidden: true })
         })
       }
-
+      // <span>{menu.meta.title && menu.meta.title.includes('t(\'') ? i18n.t(menu.meta.title.replace('t(\'', '').replace('\')', '')) : menu.meta.title}</span>
       return (
         <Item {...{ key: menu.path }}>
           <tag {...{ props, attrs }}>
             {this.renderIcon(menu.meta.icon)}
-            <span>{menu.meta.title}</span>
+            <span>{menu.meta[this.showKey] || menu.meta.title}</span>
           </tag>
         </Item>
       )
@@ -169,7 +174,7 @@ export default {
         <SubMenu {...{ key: menu.path }}>
           <span slot="title">
             {this.renderIcon(menu.meta.icon)}
-            <span>{menu.meta.title}</span>
+            <span>{menu.meta[this.showKey] || menu.meta.title}</span>
           </span>
           {itemArr}
         </SubMenu>

src/components/page/GlobalHeader.vue

@@ -199,6 +199,8 @@ export default {
     height: @height;
     background-color: white;
     transition: background 300ms;
+    display: flex;
+    align-items: center;
 
     /* dark 样式 */
 
@@ -225,5 +227,7 @@ export default {
 .breadcrumb {
   display: inline-block;
   margin: 0;
+  flex: 1;
+  width: 0;
 }
 </style>

src/components/tools/Breadcrumb.vue

@@ -2,9 +2,9 @@
   <a-breadcrumb class="breadcrumb">
     <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
       <router-link v-if="item.name + '' !== name + ''" :to="{ path: item.path }">
-        {{ item.meta.title }}
+        {{ item.meta[showKey] || item.meta.title }}
       </router-link>
-      <span v-else>{{ item.meta.title }}</span>
+      <span v-else>{{ item.meta[showKey] || item.meta.title }}</span>
     </a-breadcrumb-item>
   </a-breadcrumb>
 </template>
@@ -16,10 +16,12 @@ export default {
   data () {
     return {
       name: '',
-      breadList: []
+      breadList: [],
+      showKey: ''
     }
   },
   created () {
+    this.showKey = localStorage.language === 'en-us' ? 'titleEn' : 'title'
     this.getBreadcrumb()
   },
   methods: {

src/utils/util.js

@@ -151,6 +151,7 @@ function generateChildRouters (data) {
       hidden: item.hidden,
       meta: {
         title: item.meta.title,
+        titleEn: item.meta.titleEn,
         icon: item.meta.icon,
         url: item.meta.url,
         permissionList: item.meta.permissionList,

src/views/system/PermissionList.vue

@@ -92,8 +92,8 @@ const columns = [
     key: 'name'
   }, {
     title: '菜单英文名称',
-    dataIndex: 'englishName',
+    dataIndex: 'menuEn',
-    key: 'englishName',
+    key: 'menuEn',
     scopedSlots: { customRender: 'text' }
   }, {
     title: '菜单类型',

src/views/system/modules/PermissionModal.vue

@@ -31,9 +31,9 @@
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
           label="菜单英文名称"
-          prop="englishName"
+          prop="menuEn"
           :hasFeedback="true" >
-          <a-input placeholder="请输入菜单英文名称" v-model="model.englishName" :readOnly="disableSubmit"/>
+          <a-input placeholder="请输入菜单英文名称" v-model="model.menuEn" :readOnly="disableSubmit"/>
         </a-form-model-item>
 
         <a-form-model-item
@@ -217,7 +217,7 @@ export default {
     validatorRules: function () {
       return {
         name: [{ required: true, message: '请输入菜单标题!' }],
-        englishName: [{ required: false, message: '请输入菜单英文名称' }],
+        menuEn: [{ required: false, message: '请输入菜单英文名称' }],
         component: [{ required: this.show, message: '请输入前端组件!' }],
         url: [{ required: this.show, message: '请输入菜单路径!' }],
         permsType: [{ required: true, message: '请输入授权策略!' }],