merge origin zclhl/master 增加moment时间插件，实现动态路由功能

2024-12-22 12:58:55 +08:00 · 2018-05-14 22:29:39 +08:00 · 2018-05-14 22:29:39 +08:00 · 4590049b2e
commit 4590049b2e
parent fbbfb8f8b0
9 changed files with 172 additions and 246 deletions
--- a/src/components/iframe/main.vue
+++ b/src/components/iframe/main.vue
@ -19,7 +19,6 @@ export default {
  },
  mounted() {
    this.load();
-    this.resize();
  },
  props: ["routerPath"],
  watch: {
@ -54,6 +53,7 @@ export default {
    },
    // 加载组件
    load() {
+      this.resize();
      this.show();
      this.$route.query.src = this.$route.query.src
        ? this.$route.query.src.replace("$", "#")
@ -73,7 +73,7 @@ export default {
    iframeInit() {
      const iframe = this.$refs.iframe;
      if (!iframe) {
-        return
+        return;
      }
      const clientHeight = document.documentElement.clientHeight - 120;
      iframe.style.height = `${clientHeight}px`;
--- a/src/main.js
+++ b/src/main.js
@ -8,7 +8,9 @@ import './errorLog' // 错误日志
 import router from './router/router'
 import store from './store'
 import AVUE from 'avue-cli/packages/index.js'
-import { loadStyle } from './util/util'
+import {
+  loadStyle
+} from './util/util'
 import * as urls from '@/config/env'
 import {
  iconfontUrl,
--- a/src/page/index/sidebar/index.vue
+++ b/src/page/index/sidebar/index.vue
@ -8,12 +8,11 @@
 </template>

 <script>
-import MENU from "@/mock/menu";
 import { setUrlPath } from "@/util/util";
 import { mapGetters } from "vuex";
 import SidebarItem from "./sidebarItem";
 import logo from "./logo";
-import { initMenu } from '@/util/util'
+import { initMenu } from "@/util/util";
 export default {
  name: "sidebar",
  components: { SidebarItem, logo },
@ -21,12 +20,9 @@ export default {
    return {};
  },
  created() {
-    if (! this.$store.state.user.isInitMenu) {
-      this.$store.dispatch("GetMenu").then((data) => {
-          initMenu(this.$router, data)
-          this.$store.commit('IS_INIT_MENU', true)
-      });
-    }
+    this.$store.dispatch("GetMenu").then(data => {
+      initMenu(this.$router, data);
+    });
  },
  computed: {
    ...mapGetters(["menu", "tag", "isCollapse"]),
--- a/src/permission.js
+++ b/src/permission.js
@ -2,14 +2,20 @@ import router from './router/router'
 import store from './store'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-import { getToken } from '@/util/auth'
-import { setTitle } from '@/util/util'
-import { validatenull } from '@/util/validate'
+import {
+  getToken
+} from '@/util/auth'
+import {
+  setTitle
+} from '@/util/util'
+import {
+  validatenull
+} from '@/util/validate'

 // NProgress Configuration
 NProgress.configure({
  showSpinner: false
-}) 
+})

 function hasPermission(roles, permissionRoles) {
  if (!permissionRoles) return true
--- a/src/router/_router.js
+++ b/src/router/_router.js
@ -1,103 +1,71 @@
 const _import = require('./_import');
 import Layout from '@/page/index/'
 export default [{
-    path: '/wel',
-    component: Layout,
-    redirect: '/wel/index',
-    children: [{
-      path: 'index',
-      name: '首页',
-      component: _import('wel')
-    }]
+  path: '/',
+  name: '主页',
+  redirect: '/wel'
+}, {
+  path: '/wel',
+  component: Layout,
+  redirect: '/wel/index',
+  children: [{
+    path: 'index',
+    name: '首页',
+    component: _import('wel')
+  }]
+}, {
+  path: '*',
+  redirect: '/404',
+  hidden: true
+}, {
+  path: '/login',
+  name: '登录页',
+  component: _import('login/index')
+}, {
+  path: '/lock',
+  name: '锁屏页',
+  component: _import('lock/index')
+}, {
+  path: '/crud',
+  component: Layout,
+  redirect: '/crud/index',
+  children: [{
+    path: 'index',
+    name: 'crud实例',
+    component: _import('crud/index', 'views')
+  }]
+}, {
+  path: '/info',
+  component: Layout,
+  redirect: '/info/index',
+  children: [{
+    path: 'index',
+    name: '修改信息',
+    component: _import('admin/user/info', 'views')
+  }]
+}, {
+  path: '/404',
+  component: _import('error-page/404', 'components'),
+  name: '404'
+}, {
+  path: '/403',
+  component: _import('error-page/403', 'components'),
+  name: '403'
+}, {
+  path: '/500',
+  component: _import('error-page/500', 'components'),
+  name: '500'
+}, {
+  path: '/myiframe',
+  component: Layout,
+  redirect: '/myiframe',
+  meta: {
+    keepAlive: true
  },
-  {
-    path: '/crud',
-    component: Layout,
-    redirect: '/crud/index',
-    children: [{
-      path: 'index',
-      name: 'crud实例',
-      component: _import('crud/index', 'views')
-    }]
-  },
-  {
-    path: '/',
-    name: '主页',
-    redirect: '/wel'
-  }, {
-    path: '/info',
-    component: Layout,
-    redirect: '/info/index',
-    children: [{
-      path: 'index',
-      name: '修改信息',
-      component: _import('admin/user/info', 'views')
-    }]
-  }, {
-    menuId: 1,
-    path: '/admin',
-    component: Layout,
-    name: '系统管理',
-    hidden: false,
-    redirect: '/admin/user',
-    meta: {
-      title: '系统管理',
-    },
-    children: [{
-        menuId: 2,
-        path: 'user',
-        component: _import('admin/user/index', 'views'),
-        name: '用户管理',
-        meta: {
-          title: '用户管理'
-        }
-      },
-      {
-        menuId: 3,
-        path: 'menu',
-        component: _import('admin/menu/index', 'views'),
-        name: '菜单管理',
-        meta: {
-          title: '菜单管理'
-        }
-      },
-      {
-        menuId: 4,
-        path: 'role',
-        component: _import('admin/role/index', 'views'),
-        name: '角色管理',
-        meta: {
-          title: '角色管理'
-        }
-      },
-      {
-        menuId: 5,
-        path: 'dept',
-        component: _import('admin/dept/index', 'views'),
-        name: '部门管理',
-        meta: {
-          title: '部门管理',
-          keepAlive: true
-        }
-      },
-      {
-        menuId: 6,
-        path: 'dict',
-        component: _import('admin/dict/index', 'views'),
-        name: '字典管理',
-        meta: {
-          title: '字典管理'
-        }
-      },
-      {
-        menuId: 7,
-        path: 'log',
-        component: _import('admin/log/index', 'views'),
-        name: '日志管理',
-        meta: {
-          title: '日志管理'
-        }
-      }
-    ]
-  }
-]
+  children: [{
+    path: ':routerPath',
+    name: 'iframe',
+    component: _import('iframe/main', 'components'),
+    props: true
+  }]
+}]
--- a/src/router/router.js
+++ b/src/router/router.js
@ -1,9 +1,14 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import { routerMode } from '@/config/env'
+import {
+  routerMode
+} from '@/config/env'
 import store from '@/store'
-import { formatRoutes } from '@/util/util'
+import {
+  formatRoutes
+} from '@/util/util'
 import Layout from '@/page/index/'
+import baseRouter from './_router'
 const _import = require('./_import')

 Vue.use(VueRouter)
@ -24,76 +29,5 @@ export default new VueRouter({
      }
    }
  },
-  routes: [
-    {
-      path: '/',
-      name: '主页',
-      redirect: '/wel'
-    }, {
-      path: '/wel',
-      component: Layout,
-      redirect: '/wel/index',
-      children: [{
-        path: 'index',
-        name: '首页',
-        component: _import('wel')
-      }]
-    }, {
-      path: '*',
-      redirect: '/404',
-      hidden: true
-    }, {
-      path: '/login',
-      name: '登录页',
-      component: _import('login/index')
-    }, {
-      path: '/lock',
-      name: '锁屏页',
-      component: _import('lock/index')
-    }, {
-      path: '/crud',
-      component: Layout,
-      redirect: '/crud/index',
-      children: [{
-        path: 'index',
-        name: 'crud实例',
-        component: _import('crud/index', 'views')
-      }]
-    }, {
-      path: '/info',
-      component: Layout,
-      redirect: '/info/index',
-      children: [{
-        path: 'index',
-        name: '修改信息',
-        component: _import('admin/user/info', 'views')
-      }]
-    }, {
-      path: '/404',
-      component: _import('error-page/404', 'components'),
-      name: '404'
-    }, {
-      path: '/403',
-      component: _import('error-page/403', 'components'),
-      name: '403'
-    }, {
-      path: '/500',
-      component: _import('error-page/500', 'components'),
-      name: '500'
-    }, {
-      path: '/myiframe',
-      component: Layout,
-      redirect: '/myiframe',
-      meta: {
-        keepAlive: true
-      },
-      children: [{
-        path: ':routerPath',
-        name: 'iframe',
-        component: _import('iframe/main', 'components'),
-        props: true
-      }]
-    }
-  // 防止F5刷新页面，app重新加载，动态新增路由消失
-  ].concat(...formatRoutes(store.state.user.menu))
+  routes: [].concat(...formatRoutes(store.state.user.menu), baseRouter)
 })
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@ -1,17 +1,47 @@
-import { getToken, setToken, removeToken } from '@/util/auth'
-import { setStore, getStore } from '@/util/store'
-import { validatenull } from '@/util/validate'
-import { loginByUsername, mobileLogin, getUserInfo, logout } from '@/api/login'
-import { GetMenu } from '@/api/menu'
+import {
+  getToken,
+  setToken,
+  removeToken
+} from '@/util/auth'
+import {
+  setStore,
+  getStore
+} from '@/util/store'
+import {
+  validatenull
+} from '@/util/validate'
+import {
+  loginByUsername,
+  mobileLogin,
+  getUserInfo,
+  logout
+} from '@/api/login'
+import {
+  GetMenu
+} from '@/api/menu'
 const user = {
  state: {
-    userInfo: getStore({ name: 'userInfo' }) || {},
-    permissions: getStore({ name: 'permissions' }) || {},
-    roles: getStore({ name: 'roles' }) || [],
-    menu: getStore({ name: 'menu' }) || [],
-    isInitMenu: getStore({ name: 'isInitMenu' }) || false,
-    access_token: getStore({ name: 'access_token' }) || '',
-    refresh_token: getStore({ name: 'refresh_token' }) || ''
+    userInfo: getStore({
+      name: 'userInfo'
+    }) || {},
+    permissions: getStore({
+      name: 'permissions'
+    }) || {},
+    roles: getStore({
+      name: 'roles'
+    }) || [],
+    menu: getStore({
+      name: 'menu'
+    }) || [],
+    isInitMenu: getStore({
+      name: 'isInitMenu'
+    }) || false,
+    access_token: getStore({
+      name: 'access_token'
+    }) || '',
+    refresh_token: getStore({
+      name: 'refresh_token'
+    }) || ''
  },
  actions: {
    // 根据用户名登录
@ -133,6 +163,11 @@ const user = {
      return new Promise(resolve => {
        GetMenu().then((res) => {
          const data = res.data
+          data.forEach(ele => {
+            ele.children.forEach(child => {
+              if (!validatenull(child.component)) child.path = `${ele.path}/${child.path}`
+            });
+          });
          commit('SET_MENU', data)
          resolve(data)
        })
@ -149,26 +184,12 @@ const user = {
      })
    },
    SET_MENU: (state, menu) => {
-      state.menu = menu || []
+      state.menu = menu
      setStore({
        name: 'menu',
        content: state.menu,
        type: 'session'
      })
-      state.isInitMenu = false
-      setStore({
-        name: 'isInitMenu',
-        content: state.isInitMenu,
-        type: 'session'
-      })
-    },
-    IS_INIT_MENU: (state, isInitMenu) => {
-      state.isInitMenu = isInitMenu
-      setStore({
-        name: 'isInitMenu',
-        content: state.isInitMenu,
-        type: 'session'
-      })
    },
    SET_USER_INFO: (state, userInfo) => {
      state.userInfo = userInfo
--- a/src/util/util.js
+++ b/src/util/util.js
@ -1,5 +1,9 @@
-import { validatenull } from './validate'
-import { baseUrl } from '@/config/env'
+import {
+  validatenull
+} from './validate'
+import {
+  baseUrl
+} from '@/config/env'

 export const initMenu = (router, menu) => {
  if (menu.length === 0) {
@ -16,35 +20,29 @@ export const formatRoutes = (aMenu) => {
      component,
      name,
      icon,
-      hidden,
-      redirect,
-      meta,
      children
    } = oMenu
-    const oRouter = {
-      path: path,
-      component(resolve) {
-        let componentPath = ''
-        if (component === 'Layout') {
-          require(['../page/index'], resolve)
-          return
-        } else if (component.indexOf('/') !== 0) {
-          componentPath = '/' + component
-        } else {
-          componentPath = component
-        }
-        require(['../views' + componentPath + '.vue'], resolve)
-      },
-      name: name,
-      icon: icon,
-      hidden: hidden,
-      meta: meta,
-      children: (children && children instanceof Array) ? formatRoutes(children) : []
+    if (!validatenull(component)) {
+      let filePath;
+      const oRouter = {
+        path: path,
+        component(resolve) {
+          let componentPath = ''
+          if (component === 'Layout') {
+            require(['../page/index'], resolve)
+            return
+          } else {
+            componentPath = component
+          }
+          require([`../${componentPath}.vue`], resolve)
+        },
+        name: name,
+        icon: icon,
+        children: validatenull(children) ? [] : formatRoutes(children)
+      }
+      aRouter.push(oRouter)
    }
-    if (redirect) {
-      oRouter.redirect = redirect
-    }
-    aRouter.push(oRouter)
+
  })
  return aRouter
 }
--- a/src/views/admin/user/index.vue
+++ b/src/views/admin/user/index.vue
@ -198,7 +198,8 @@ export default {
            message: "请选择角色",
            trigger: "blur"
          }
-        ],phone: [
+        ],
+        phone: [
          {
            required: true,
            message: "手机号",
@ -298,8 +299,8 @@ export default {
        this.dialogFormVisible = true;
        this.dialogStatus = "update";
        this.role = [];
-        for (var i=0;i < row.roleList.length;i++) {
-          this.role[i] = row.roleList[i].roleId
+        for (var i = 0; i < row.roleList.length; i++) {
+          this.role[i] = row.roleList[i].roleId;
        }
        deptRoleList(response.data.deptId).then(response => {
          this.rolesOptions = response.data;