路由模块化，便于动态控制

src/router/index.js

@@ -6,6 +6,12 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 
+/* Router Modules */
+import clubRouter from './modules/club'
+import goodsRouter from './modules/goods'
+import orderRouter from './modules/order'
+import financeRouter from './modules/finance'
+import otherRouter from './modules/other'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -76,195 +82,6 @@ export const constantRoutes = [
         meta: { title: '首页', icon: 'dashboard', noCache: true, affix: true }
       }
     ]
-  },
-  {
-    path: '/club',
-    component: Layout,
-    redirect: '/club/list',
-    name: 'Club',
-    meta: { title: '会所管理', icon: 'tree' },
-    children: [
-      {
-        path: 'list',
-        name: 'List',
-        component: () => import('@/views/club/list'),
-        meta: { title: '会所列表', icon: 'list' }
-      },
-      {
-        path: 'form',
-        name: 'Form',
-        component: () => import('@/views/club/form'),
-        meta: { title: '上线会所', icon: 'form' }
-      },
-      {
-        path: 'operateList',
-        component: () => import('@/views/club/operateList'),
-        name: 'OperateList',
-        meta: { title: '查看运营人员', noCache: true, activeMenu: '/club/list' },
-        hidden: true
-      },
-      {
-        path: 'editForm',
-        component: () => import('@/views/club/editForm'),
-        name: 'EditForm',
-        meta: { title: '编辑会所', noCache: true, activeMenu: '/club/list' },
-        hidden: true
-      }
-    ]
-  },
-  {
-    path: '/goods',
-    component: Layout,
-    redirect: '/goods/list',
-    name: 'Goods',
-    meta: { title: '商品管理', icon: 'shopping' },
-    children: [
-      {
-        path: 'category',
-        name: 'Category',
-        component: () => import('@/views/goods/category'),
-        meta: { title: '商品分类', icon: 'component' }
-      },
-      {
-        path: 'category/edit/:id(\\d+)',
-        name: 'EditCategory',
-        component: () => import('@/views/goods/category-edit'),
-        meta: { title: '编辑分类', noCache: true, activeMenu: '/goods/category' },
-        hidden: true
-      },
-      {
-        path: 'category/create',
-        name: 'CreateCategory',
-        component: () => import('@/views/goods/category-create'),
-        meta: { title: '添加分类', noCache: true, activeMenu: '/goods/category' },
-        hidden: true
-      },
-      {
-        path: 'list',
-        name: 'List',
-        component: () => import('@/views/goods/list'),
-        meta: { title: '商品列表', icon: 'list' }
-      },
-      {
-        path: 'list/select/:type(\\d+)',
-        name: 'SelectProduct',
-        component: () => import('@/views/goods/list-select'),
-        meta: { title: '添加商品', noCache: true, activeMenu: '/goods/list' },
-        hidden: true
-      }
-    ]
-  },
-  {
-    path: '/order',
-    component: Layout,
-    redirect: '/order/list',
-    name: 'Order',
-    meta: { title: '订单管理', icon: 'documentation' },
-    children: [
-      {
-        path: 'list',
-        name: 'List',
-        component: () => import('@/views/order/list'),
-        meta: { title: '订单列表', icon: 'list' }
-      },
-      {
-        path: 'refund',
-        name: 'Refund',
-        component: () => import('@/views/order/refund'),
-        meta: { title: '用户退款列表', icon: 'skill' }
-      },
-      {
-        path: 'refund/detail/:id(\\d+)',
-        name: 'RefundDeatil',
-        component: () => import('@/views/order/refund-detail'),
-        meta: { title: '用户退款详情', noCache: true, activeMenu: '/order/refund' },
-        hidden: true
-      },
-      {
-        path: 'detail/:id(\\d+)',
-        name: 'Detail',
-        component: () => import('@/views/order/detail'),
-        meta: { title: '订单详情', noCache: true, activeMenu: '/order/list' },
-        hidden: true
-      },
-      {
-        path: 'logistics/:id(\\d+)',
-        name: 'logistics',
-        component: () => import('@/views/order/logistics'),
-        meta: { title: '发货记录', noCache: true, activeMenu: '/order/list' },
-        hidden: true
-      },
-      {
-        path: 'refund-record/:id(\\d+)',
-        name: 'RefundRecord',
-        component: () => import('@/views/order/refund-record'),
-        meta: { title: '收退款记录', noCache: true, activeMenu: '/order/list' },
-        hidden: true
-      },
-      {
-        path: 'refund-return/:id(\\d+)',
-        name: 'RefundRreturn',
-        component: () => import('@/views/order/refund-return'),
-        meta: { title: '退款（退货）记录', noCache: true, activeMenu: '/order/list' },
-        hidden: true
-      }
-    ]
-  },
-
-  {
-    path: '/finance',
-    component: Layout,
-    redirect: '/finance/list',
-    name: 'Finance',
-    meta: { title: '财务管理', icon: 'money' },
-    children: [
-      {
-        path: 'list',
-        name: 'List',
-        component: () => import('@/views/finance/list'),
-        meta: { title: '对账列表', icon: 'list' }
-      },
-      {
-        path: 'refund',
-        name: 'Refund',
-        component: () => import('@/views/finance/refund'),
-        meta: { title: '退款管理', icon: 'skill' }
-      }
-    ]
-  },
-
-  {
-    path: '/other',
-    component: Layout,
-    redirect: '/other/about',
-    name: 'Other',
-    meta: { title: '其他设置', icon: 'example' },
-    children: [
-      {
-        path: 'about',
-        name: 'About',
-        component: () => import('@/views/other/about'),
-        meta: { title: '关于我们', icon: 'peoples' }
-      },
-      {
-        path: 'after',
-        name: 'After',
-        component: () => import('@/views/other/after'),
-        meta: { title: '售后无忧', icon: 'star' }
-      },
-      {
-        path: 'notes',
-        name: 'Notes',
-        component: () => import('@/views/other/notes'),
-        meta: { title: '购物须知', icon: 'form' }
-      },
-      {
-        path: 'password',
-        name: 'Password',
-        component: () => import('@/views/other/password'),
-        meta: { title: '修改密码', icon: 'eye' }
-      }
-    ]
   }
 ]
 /**
@@ -272,15 +89,11 @@ export const constantRoutes = [
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
-  {
-    path: '/goods',
-    component: Layout,
-    redirect: '/goods/list',
-    name: 'Goods',
-    meta: { title: '商品管理', icon: 'shopping' },
-    hidden: true,
-    children: []
-  },
+  clubRouter,
+  goodsRouter,
+  orderRouter,
+  financeRouter,
+  otherRouter,
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/router/modules/club.js

@@ -0,0 +1,40 @@
+/* Layout */
+import Layout from '@/layout'
+
+const clubRouter = {
+  path: '/club',
+  component: Layout,
+  redirect: '/club/list',
+  name: 'Club',
+  meta: { title: '会所管理', icon: 'tree' },
+  children: [
+    {
+      path: 'list',
+      name: 'List',
+      component: () => import('@/views/club/list'),
+      meta: { title: '会所列表', icon: 'list' }
+    },
+    {
+      path: 'form',
+      name: 'Form',
+      component: () => import('@/views/club/form'),
+      meta: { title: '上线会所', icon: 'form' }
+    },
+    {
+      path: 'operateList',
+      component: () => import('@/views/club/operateList'),
+      name: 'OperateList',
+      meta: { title: '查看运营人员', noCache: true, activeMenu: '/club/list' },
+      hidden: true
+    },
+    {
+      path: 'editForm',
+      component: () => import('@/views/club/editForm'),
+      name: 'EditForm',
+      meta: { title: '编辑会所', noCache: true, activeMenu: '/club/list' },
+      hidden: true
+    }
+  ]
+}
+
+export default clubRouter

src/router/modules/finance.js

@@ -0,0 +1,26 @@
+/* Layout */
+import Layout from '@/layout'
+
+const financeRouter = {
+  path: '/finance',
+  component: Layout,
+  redirect: '/finance/list',
+  name: 'Finance',
+  meta: { title: '财务管理', icon: 'money' },
+  children: [
+    {
+      path: 'list',
+      name: 'List',
+      component: () => import('@/views/finance/list'),
+      meta: { title: '对账列表', icon: 'list' }
+    },
+    {
+      path: 'refund',
+      name: 'Refund',
+      component: () => import('@/views/finance/refund'),
+      meta: { title: '退款管理', icon: 'skill' }
+    }
+  ]
+}
+
+export default financeRouter

src/router/modules/goods.js

@@ -0,0 +1,47 @@
+/* Layout */
+import Layout from '@/layout'
+
+const goodsRouter = {
+  path: '/goods',
+  component: Layout,
+  redirect: '/goods/list',
+  name: 'Goods',
+  meta: { title: '商品管理', icon: 'shopping' },
+  children: [
+    {
+      path: 'category',
+      name: 'Category',
+      component: () => import('@/views/goods/category'),
+      meta: { title: '商品分类', icon: 'component' }
+    },
+    {
+      path: 'category/edit/:id(\\d+)',
+      name: 'EditCategory',
+      component: () => import('@/views/goods/category-edit'),
+      meta: { title: '编辑分类', noCache: true, activeMenu: '/goods/category' },
+      hidden: true
+    },
+    {
+      path: 'category/create',
+      name: 'CreateCategory',
+      component: () => import('@/views/goods/category-create'),
+      meta: { title: '添加分类', noCache: true, activeMenu: '/goods/category' },
+      hidden: true
+    },
+    {
+      path: 'list',
+      name: 'List',
+      component: () => import('@/views/goods/list'),
+      meta: { title: '商品列表', icon: 'list' }
+    },
+    {
+      path: 'list/select/:type(\\d+)',
+      name: 'SelectProduct',
+      component: () => import('@/views/goods/list-select'),
+      meta: { title: '添加商品', noCache: true, activeMenu: '/goods/list' },
+      hidden: true
+    }
+  ]
+}
+
+export default goodsRouter

src/router/modules/order.js

@@ -0,0 +1,61 @@
+/* Layout */
+import Layout from '@/layout'
+
+const orderRouter = {
+  path: '/order',
+  component: Layout,
+  redirect: '/order/list',
+  name: 'Order',
+  meta: { title: '订单管理', icon: 'documentation' },
+  children: [
+    {
+      path: 'list',
+      name: 'List',
+      component: () => import('@/views/order/list'),
+      meta: { title: '订单列表', icon: 'list' }
+    },
+    {
+      path: 'refund',
+      name: 'Refund',
+      component: () => import('@/views/order/refund'),
+      meta: { title: '用户退款列表', icon: 'skill' }
+    },
+    {
+      path: 'refund/detail/:id(\\d+)',
+      name: 'RefundDeatil',
+      component: () => import('@/views/order/refund-detail'),
+      meta: { title: '用户退款详情', noCache: true, activeMenu: '/order/refund' },
+      hidden: true
+    },
+    {
+      path: 'detail/:id(\\d+)',
+      name: 'Detail',
+      component: () => import('@/views/order/detail'),
+      meta: { title: '订单详情', noCache: true, activeMenu: '/order/list' },
+      hidden: true
+    },
+    {
+      path: 'logistics/:id(\\d+)',
+      name: 'logistics',
+      component: () => import('@/views/order/logistics'),
+      meta: { title: '发货记录', noCache: true, activeMenu: '/order/list' },
+      hidden: true
+    },
+    {
+      path: 'refund-record/:id(\\d+)',
+      name: 'RefundRecord',
+      component: () => import('@/views/order/refund-record'),
+      meta: { title: '收退款记录', noCache: true, activeMenu: '/order/list' },
+      hidden: true
+    },
+    {
+      path: 'refund-return/:id(\\d+)',
+      name: 'RefundRreturn',
+      component: () => import('@/views/order/refund-return'),
+      meta: { title: '退款（退货）记录', noCache: true, activeMenu: '/order/list' },
+      hidden: true
+    }
+  ]
+}
+
+export default orderRouter

src/router/modules/other.js

@@ -0,0 +1,38 @@
+/* Layout */
+import Layout from '@/layout'
+
+const otherRouter = {
+  path: '/other',
+  component: Layout,
+  redirect: '/other/about',
+  name: 'Other',
+  meta: { title: '其他设置', icon: 'example' },
+  children: [
+    {
+      path: 'about',
+      name: 'About',
+      component: () => import('@/views/other/about'),
+      meta: { title: '关于我们', icon: 'peoples' }
+    },
+    {
+      path: 'after',
+      name: 'After',
+      component: () => import('@/views/other/after'),
+      meta: { title: '售后无忧', icon: 'star' }
+    },
+    {
+      path: 'notes',
+      name: 'Notes',
+      component: () => import('@/views/other/notes'),
+      meta: { title: '购物须知', icon: 'form' }
+    },
+    {
+      path: 'password',
+      name: 'Password',
+      component: () => import('@/views/other/password'),
+      meta: { title: '修改密码', icon: 'eye' }
+    }
+  ]
+}
+
+export default otherRouter

src/store/modules/permission.js

@@ -58,35 +58,37 @@ const actions = {
       }
       getModule({ organizeID: 1 }).then(response => {
         const modules = response.data[0]
-        if (accessedRoutes[0].name === 'Goods') {
-          if (modules && modules.firstModulesName) {
-            accessedRoutes[0].children.unshift({
-              path: '/goods/list/preferred',
-              name: 'PreferredProduct',
-              component: () => import('@/views/goods/list-preferred'),
-              meta: { title: modules.firstModulesName, noCache: true, activeMenu: '/goods/list' },
-              hidden: true
-            })
+        accessedRoutes.forEach(routeItem => {
+          if (routeItem.name === 'Goods') {
+            if (modules && modules.firstModulesName) {
+              accessedRoutes[0].children.unshift({
+                path: '/goods/list/preferred',
+                name: 'PreferredProduct',
+                component: () => import('@/views/goods/list-preferred'),
+                meta: { title: modules.firstModulesName, noCache: true, activeMenu: '/goods/list' },
+                hidden: true
+              })
+            }
+            if (modules && modules.secondModulesName) {
+              accessedRoutes[0].children.unshift({
+                path: '/goods/list/preferential',
+                name: 'PreferentialProduct',
+                component: () => import('@/views/goods/list-preferential'),
+                meta: { title: modules.secondModulesName, noCache: true, activeMenu: '/goods/list' },
+                hidden: true
+              })
+            }
+            if (modules && modules.thirdModulesName) {
+              accessedRoutes[0].children.unshift({
+                path: '/goods/list/commonly',
+                name: 'CommonlyProduct',
+                component: () => import('@/views/goods/list-commonly'),
+                meta: { title: modules.thirdModulesName, noCache: true, activeMenu: '/goods/list' },
+                hidden: true
+              })
+            }
           }
-          if (modules && modules.secondModulesName) {
-            accessedRoutes[0].children.unshift({
-              path: '/goods/list/preferential',
-              name: 'PreferentialProduct',
-              component: () => import('@/views/goods/list-preferential'),
-              meta: { title: modules.secondModulesName, noCache: true, activeMenu: '/goods/list' },
-              hidden: true
-            })
-          }
-          if (modules && modules.thirdModulesName) {
-            accessedRoutes[0].children.unshift({
-              path: '/goods/list/commonly',
-              name: 'CommonlyProduct',
-              component: () => import('@/views/goods/list-commonly'),
-              meta: { title: modules.thirdModulesName, noCache: true, activeMenu: '/goods/list' },
-              hidden: true
-            })
-          }
-        }
+        })
         commit('SET_ROUTES', accessedRoutes)
         resolve(accessedRoutes)
       }).catch(() => {

src/views/goods/list.vue

@@ -21,17 +21,17 @@
           <el-option v-if="item.status*1 === 1" :key="item.id" :label="item.classifyName" :value="item.id" />
         </template>
       </el-select>
-      <el-select v-model="listQuery.preferredProduct" :placeholder="modules&&modules.firstModulesName? modules.firstModulesName : '星范优选'" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
-        <el-option :label="modules&&modules.firstModulesName? modules.firstModulesName : '星范优选'" value="1" />
-        <el-option :label="'非' + (modules&&modules.firstModulesName? modules.firstModulesName : '星范优选')" value="0" />
+      <el-select v-if="modules && modules.firstModulesName" v-model="listQuery.preferredProduct" :placeholder="modules.firstModulesName" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option :label="modules.firstModulesName" value="1" />
+        <el-option :label="'非' + modules.firstModulesName" value="0" />
       </el-select>
-      <el-select v-model="listQuery.preferentialProduct" :placeholder="modules&&modules.secondModulesName? modules.secondModulesName : '星范精品'" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
-        <el-option :label="modules&&modules.secondModulesName? modules.secondModulesName : '星范精品'" value="1" />
-        <el-option :label="'非' + (modules&&modules.secondModulesName? modules.secondModulesName : '星范精品')" value="0" />
+      <el-select v-if="modules && modules.secondModulesName" v-model="listQuery.preferentialProduct" :placeholder="modules.secondModulesName" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option :label="modules.secondModulesName" value="1" />
+        <el-option :label="'非' + modules.secondModulesName" value="0" />
       </el-select>
-      <el-select v-model="listQuery.commonlyProduct" :placeholder="modules&&modules.thirdModulesName? modules.thirdModulesName : '常用商品'" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
-        <el-option :label="modules&&modules.thirdModulesName? modules.thirdModulesName : '常用商品'" value="1" />
-        <el-option :label="'非' + (modules&&modules.thirdModulesName? modules.thirdModulesName : '常用商品')" value="0" />
+      <el-select v-if="modules && modules.thirdModulesName" v-model="listQuery.commonlyProduct" :placeholder="modules.thirdModulesName" clearable style="width: 110px" class="filter-item" value="" @change="handleFilter">
+        <el-option :label="modules.thirdModulesName" value="1" />
+        <el-option :label="'非' + modules.thirdModulesName" value="0" />
       </el-select>
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
         搜索
@@ -50,10 +50,10 @@
     >
       <el-table-column align="center" label="序号" width="35">
         <template slot-scope="scope">
-          {{ scope.$index }}
+          <span style="white-space:nowrap">{{ scope.$index }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="商品ID" align="center" prop="id" width="70" />
+      <el-table-column label="商品ID" align="center" prop="id" width="50" />
       <el-table-column label="商品图片" align="center" prop="mainImage">
         <template slot-scope="{row}">
           <img :src="row.mainImage" alt="" width="50">
@@ -65,19 +65,19 @@
       <el-table-column label="成本价" align="center" prop="costPrice" />
       <el-table-column label="售价" align="center" prop="retailPrice" />
       <el-table-column label="起订量" align="center" prop="minBuyNumber" />
-      <el-table-column :label="modules&&modules.firstModulesName? modules.firstModulesName : '星范优选'" align="center" prop="preferredProduct" width="50">
+      <el-table-column v-if="modules && modules.firstModulesName" :label="modules.firstModulesName" align="center" prop="preferredProduct" width="50">
         <template slot-scope="{row}">
           <!--<el-tag :type="row.preferredProduct | statusFilter">{{ row.preferredProduct*1 === 1 ? '启用' : '停用' }}</el-tag>-->
           <i v-if="row.preferredProduct*1 === 1" class="el-icon-success" type="success" />
         </template>
       </el-table-column>
-      <el-table-column :label="modules&&modules.secondModulesName? modules.secondModulesName : '星范精品'" align="center" prop="preferentialProduct" width="50">
+      <el-table-column v-if="modules && modules.secondModulesName" :label="modules.secondModulesName" align="center" prop="preferentialProduct" width="50">
         <template slot-scope="{row}">
           <!--<el-tag :type="row.preferentialProduct | statusFilter">{{ row.preferentialProduct*1 === 1 ? '启用' : '停用' }}</el-tag>-->
           <i v-if="row.preferentialProduct*1 === 1" class="el-icon-success" type="success" />
         </template>
       </el-table-column>
-      <el-table-column :label="modules&&modules.thirdModulesName? modules.thirdModulesName : '常用商品'" align="center" prop="commonlyProduct" width="50">
+      <el-table-column v-if="modules && modules.thirdModulesName" :label="modules.thirdModulesName" align="center" prop="commonlyProduct" width="50">
         <template slot-scope="{row}">
           <!--<el-tag :type="row.commonlyProduct | statusFilter">{{ row.commonlyProduct*1 === 1 ? '启用' : '停用' }}</el-tag>-->
           <i v-if="row.commonlyProduct*1 === 1" class="el-icon-success" type="success" />