菜单、菜单多语言

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
+    "@typescript-eslint/no-var-requires": 0,
     "vue/max-attributes-per-line": [2, {
       "singleline": 10,
       "multiline": {

src/lang/en.js

@@ -198,5 +198,78 @@ export default {
     uploadHints: 'Uploading, please hold on. Do not close the window!',
     canNotBeBlank: ' cannot be blank',
     require: 'is required'
+  },
+
+  menu: {
+    // 一级菜单
+    dashboard: 'Dashboard',
+    shoppingMall: 'Shopping Mall',
+    memberManagement: 'Member Management',
+    networkChart: 'Network Chart',
+    bonusManagement: 'Bonus Management',
+    articleManagement: 'Article Management',
+    financialManagement: 'Financial Management',
+    fileManagement: 'File Management',
+    administrator: 'Administrator',
+    adManagement: 'Ad Management',
+    logManagement: 'Log Management',
+    settingManagement: 'Setting Management',
+    // 二级菜单/接口-shoppingMall
+    productsList: 'Products List',
+    orderList: 'Order List',
+    remainBV: 'Remain BV',
+    remainBVFlow: 'Remain BV Flow',
+    externalMallOrderList: 'External Mall Order List',
+    externalMallEntryList: 'External Mall Entry List',
+    // 二级菜单/接口-memberManagement
+    memberList: 'Member List',
+    emptyOrderOperation: 'Empty Order Operation',
+    moveNetworkManagement: 'Move Network Management',
+    memberLevelAdjustmentList: 'Member Level Adjustment List',
+    modifyStockistLevel: 'Modify Stockist Level',
+    // 二级菜单/接口-networkChart
+    placementNetwork: 'Placement Network',
+    sponsorNetwork: 'Sponsor Network',
+    // 二级菜单/接口-bonusManagement
+    closurePeriod: 'Closure Period',
+    memberBonusBalance: 'Member Bonus Balance',
+    memberBonus: 'Member Bonus',
+    bonusFlow: 'Bonus Flow',
+    memberPerformance: 'Member Performance',
+    salesRecord: 'Sales Record',
+    periodPerformance: 'Period Performance',
+    monthlyPerformance: 'Monthly Performance',
+    adjustPerformance: 'Adjust Performance',
+    // 二级菜单/接口-financialManagement
+    memberEcoinAdjustmentList: 'Member Ecoin Adjustment List',
+    transferRecordList: 'Transfer Record List',
+    withdrawalManagement: 'Withdrawal Management',
+    dealTypeManagement: '交易类型管理',
+    historicalBonusBalance: 'Historical Bonus Balance',
+    rechargeManagement: 'Recharge Management',
+    // 二级菜单/接口-articleManagement
+    categoryManagement: 'Category Management',
+    // 二级菜单/接口-fileManagement
+    exportFile: 'Export File',
+    // 二级菜单/接口-administrator
+    administratorRoleList: '管理员角色列表',
+    administratorList: '管理员列表',
+    resetPassword: 'Reset Password',
+    // 二级菜单/接口-logManagement
+    administratorLoginLog: '管理员登录日志',
+    memberLoginLog: 'Member login log',
+    administratorOperationLog: '管理员操作日志',
+    memberOperationLog: 'Member operation log',
+    systemLog: '系统日志',
+    // 二级菜单/接口-settingManagement
+    siteConfig: '站点设置',
+    bonusConfig: '奖金设置',
+    scoreConfig: '积分配置',
+    transferConfig: '转账配置',
+    exchangeRateConfig: '汇率配置',
+    otherConfig: '其他配置',
+    decLevelConfig: '会员级别配置',
+    empLevelConfig: '会员聘级配置',
+    decRoleConfig: '报单中心级别配置'
   }
 }

src/lang/zh.js

@@ -198,5 +198,78 @@ export default {
     uploadHints: '正在上传，请稍后。请勿关闭窗口！',
     canNotBeBlank: '不能为空',
     require: '必须填写'
+  },
+
+  menu: {
+    // 一级菜单
+    dashboard: '首页',
+    shoppingMall: '商城管理',
+    memberManagement: '会员管理',
+    networkChart: '会员网络',
+    bonusManagement: '奖金管理',
+    articleManagement: '文章管理',
+    financialManagement: '财务管理',
+    fileManagement: '文件管理',
+    administrator: '管理员',
+    adManagement: '广告管理',
+    logManagement: '日志管理',
+    settingManagement: '设置管理',
+    // 二级菜单/接口-shoppingMall
+    productsList: '商品管理',
+    orderList: '订单列表',
+    remainBV: '剩余BV',
+    remainBVFlow: '剩余BV流水',
+    externalMallOrderList: '外部商城订单列表',
+    externalMallEntryList: '外部商城报单列表',
+    // 二级菜单/接口-memberManagement
+    memberList: '会员列表',
+    emptyOrderOperation: '空单操作',
+    moveNetworkManagement: '移网管理',
+    memberLevelAdjustmentList: '会员级别调整列表',
+    modifyStockistLevel: '修改报单中心级别',
+    // 二级菜单/接口-networkChart
+    placementNetwork: '安置网络',
+    sponsorNetwork: '推荐网路',
+    // 二级菜单/接口-bonusManagement
+    closurePeriod: '封期管理',
+    memberBonusBalance: '会员奖金余额',
+    memberBonus: '往期奖金',
+    bonusFlow: '奖金流水',
+    memberPerformance: '用户业绩',
+    salesRecord: '业绩单',
+    periodPerformance: '期业绩',
+    monthlyPerformance: '月业绩',
+    adjustPerformance: '调整业绩',
+    // 二级菜单/接口-financialManagement
+    memberEcoinAdjustmentList: '会员余额调整列表',
+    transferRecordList: '转账记录列表',
+    withdrawalManagement: '提现管理',
+    dealTypeManagement: '交易类型管理',
+    historicalBonusBalance: '历史奖金余额',
+    rechargeManagement: '充值管理',
+    // 二级菜单/接口-articleManagement
+    categoryManagement: '分类管理',
+    // 二级菜单/接口-fileManagement
+    exportFile: '导出文件',
+    // 二级菜单/接口-administrator
+    administratorRoleList: '管理员角色列表',
+    administratorList: '管理员列表',
+    resetPassword: '重置密码',
+    // 二级菜单/接口-logManagement
+    administratorLoginLog: '管理员登录日志',
+    memberLoginLog: '会员登录日志',
+    administratorOperationLog: '管理员操作日志',
+    memberOperationLog: '会员操作日志',
+    systemLog: '系统日志',
+    // 二级菜单/接口-settingManagement
+    siteConfig: '站点设置',
+    bonusConfig: '奖金设置',
+    scoreConfig: '积分配置',
+    transferConfig: '转账配置',
+    exchangeRateConfig: '汇率配置',
+    otherConfig: '其他配置',
+    decLevelConfig: '会员级别配置',
+    empLevelConfig: '会员聘级配置',
+    decRoleConfig: '报单中心级别配置'
   }
 }

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,14 +3,14 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitleWiki(onlyOneChild.meta.title)" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" />
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="generateTitleWiki(item.meta.title)" />
       </template>
       <sidebar-item
         v-for="child in item.children"
@@ -26,7 +26,7 @@
 
 <script>
 import path from 'path'
-import { generateTitle } from '@/utils/i18n'
+import { generateTitle, generateTitleWiki } from '@/utils/i18n'
 import { isExternal } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
@@ -92,7 +92,8 @@ export default {
       return path.resolve(this.basePath, routePath)
     },
 
-    generateTitle
+    generateTitle,
+    generateTitleWiki
   }
 }
 </script>

src/permission.js

@@ -44,7 +44,6 @@ router.beforeEach(async(to, from, next) => {
           // set the replace: true, so the navigation will not leave a history record
           next({ ...to, replace: true })
         } catch (error) {
-          console.log('error', error)
           usersInfo.clear()
           next(`/login?redirect=${to.path}`)
           NProgress.done()

src/store/modules/app.js

@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie'
-import { getLanguage } from '@/lang/index'
+import { getLanguage } from '@/lang'
 
 const state = {
   sidebar: {

src/store/modules/permission.js

@@ -1,38 +1,4 @@
-import { asyncRoutes, constantRoutes } from '@/router'
-
-/**
- * Use meta.role to determine if the current user has permission
- * @param roles
- * @param route
- */
-function hasPermission(roles, route) {
-  if (route.meta && route.meta.roles) {
-    return roles.some(role => route.meta.roles.includes(role))
-  } else {
-    return true
-  }
-}
-
-/**
- * Filter asynchronous routing tables by recursion
- * @param routes asyncRoutes
- * @param roles
- */
-export function filterAsyncRoutes(routes, roles) {
-  const res = []
-
-  routes.forEach(route => {
-    const tmp = { ...route }
-    if (hasPermission(roles, tmp)) {
-      if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles)
-      }
-      res.push(tmp)
-    }
-  })
-
-  return res
-}
+import Layout from '@/layout'
 
 const state = {
   routes: [],
@@ -42,21 +8,49 @@ const state = {
 const mutations = {
   SET_ROUTES: (state, routes) => {
     state.addRoutes = routes
-    state.routes = constantRoutes.concat(routes)
+    // state.routes = constantRoutes.concat(routes)
+    state.routes = routes
   }
 }
 
+/**
+ * 把从后端查询的菜单数据拼装成路由格式的数据
+ * @param routes
+ * @param data 后端返回的菜单数据
+ */
+export function generaMenu(routes, data) {
+  data.forEach(item => {
+    const menu = {
+      path: '/' + item.routePath,
+      component: Layout,
+      hidden: item.show === 0, // 状态为0的隐藏
+      redirect: item.routePath,
+      children: [],
+      name: item.name,
+      meta: {
+        title: item.wiki,
+        icon: item.icon
+      }
+    }
+
+    if (item.child) {
+      generaMenu(menu.children, item.child)
+    }
+
+    routes.push(menu)
+  })
+  return routes
+}
+
 const actions = {
   generateRoutes({ commit }, roles) {
     return new Promise(resolve => {
-      let accessedRoutes
-      if (roles.includes('admin')) {
-        accessedRoutes = asyncRoutes || []
-      } else {
-        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-      }
-      commit('SET_ROUTES', accessedRoutes)
-      resolve(accessedRoutes)
+      roles = ['admin']
+      const baseInfo = JSON.parse(localStorage.getItem('baseInfo'))
+      const apiMenu = baseInfo.menu
+      const formatMenu = generaMenu([], apiMenu)
+      commit('SET_ROUTES', formatMenu)
+      resolve(formatMenu)
     })
   }
 }

src/utils/i18n.js

@@ -10,3 +10,13 @@ export function generateTitle(title) {
   }
   return title
 }
+
+export function generateTitleWiki(wiki) {
+  const hasKey = this.$te('menu.' + wiki)
+
+  if (hasKey) {
+    // $t :this method from vue-i18n, inject in @/lang/index.js
+    return this.$t('menu.' + wiki)
+  }
+  return wiki
+}