Home Explore Help
Register Sign In
ztpt-dev
/
scocial-management-platform-frontend
Watch 2
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

登录，动态导航，iframe

李文 4 years ago
parent
29a5569c72
commit
96bc3df6ef
16 changed files with 543 additions and 158 deletions
Split View Show Diff Stats
  1. 5 4
      public/index.html
  2. 13 4
      src/assets/scss/smp.scss
  3. 2 2
      src/mock/index.js
  4. 19 4
      src/mock/modules/common.js
  5. 117 9
      src/mock/modules/sys-menu.js
  6. 56 22
      src/router/index.js
  7. 1 0
      src/store/index.js
  8. 2 3
      src/utils/request.js
  9. 28 0
      src/utils/tool.js
  10. 40 3
      src/views/main/main-content-crumb.vue
  11. 21 6
      src/views/main/main-content.vue
  12. 144 61
      src/views/main/main-navbar-menu.vue
  13. 1 1
      src/views/main/main-sidebar-sub-menu.vue
  14. 63 6
      src/views/main/main-sidebar.vue
  15. 8 8
      src/views/main/main.vue
  16. 23 25
      src/views/pages/login.vue

+ 5 - 4
public/index.html
View File 

@@ -22,6 +22,7 @@
 
       'params': {},      // 参数, 由 this.$route.params 自动赋值
 
       'query': {},       // 查询参数, 由 this.$route.query 自动赋值
 
       'menuId': '',      // 菜单id（用于选中侧边栏菜单，与this.$store.state.sidebarMenuActiveName进行匹配）
 
+      // 'currentMenuItem': {},      // 当前选中一级菜单菜单
 
       'title': '',       // 标题
 
       'isTab': true,     // 是否通过tab展示内容?
 
       'iframeURL': ''    // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配)
 
@@ -37,19 +38,19 @@
 
 
   <!-- 开发环境 -->
 
   <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
 
-    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:31403';</script>
 
+    <script>window.SITE_CONFIG['apiURL'] = 'http://172.16.124.27:31902';</script>
 
   <% } %>
 
   <!-- 集成测试环境 -->
 
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
 
-    <script>window.SITE_CONFIG['apiURL'] = 'http://59.212.147.49:9081';</script>
 
+    <script>window.SITE_CONFIG['apiURL'] = 'http://192.168.12.225:31903';</script>
 
   <% } %>
 
   <!-- 验收测试环境 -->
 
   <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
 
-    <script>window.SITE_CONFIG['apiURL'] = 'http://59.212.147.49:9081';</script>
 
+    <script>window.SITE_CONFIG['apiURL'] = 'http://192.168.12.225:31903';</script>
 
   <% } %>
 
   <!-- 生产环境 -->
 
   <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
 
-    <script>window.SITE_CONFIG['apiURL'] = 'http://59.212.147.49:9081';</script>
 
+    <script>window.SITE_CONFIG['apiURL'] = 'http://192.168.12.225:31903';</script>
 
   <% } %>
 
 </head>
 
 <body>

+ 13 - 4
src/assets/scss/smp.scss
View File 

@@ -628,7 +628,7 @@ html,body{
 
     &::-webkit-scrollbar {display:none}
 
   }
 
 }
 
-.aui-wrapper{
 
+.aui-wrapper.all-main-wraper{
 
   min-width:1280px;
 
   min-height:800px;
 
   height:100%;
 
@@ -876,6 +876,9 @@ html,body{
 
       border-right:none;
 
     }
 
   }
 
+  .smps-bd-nomenu{
 
+    padding:20px;
 
+  }
 
   .smps-hd{
 
     height:55px;
 
     display: flex;
 
@@ -911,15 +914,17 @@ html,body{
 
   }
 
   .smps-bd{
 
     flex:1;
 
-    // overflow-y: auto;
 
-    // overflow-x: auto;
 
+    &.onopen{
 
+      overflow-y: auto;
 
+      &::-webkit-scrollbar {display:none}
 
+    }
 
   }
 
   .smps-menu{
 
     border-right:none;
 
     .el-menu-item,.el-submenu__title{
 
       display: flex;
 
       align-items: center;
 
-      i{
 
+      i.smp-nav-icon{
 
         margin:0 5px 0 0;
 
       }
 
       em{
 
@@ -993,6 +998,10 @@ html,body{
 
   // overflow:hidden;
 
   width:100%;
 
   height:calc(100% - 40px);
 
+  &.isIframe{
 
+    background-color: $smp--color-white;
 
+    overflow: hidden;
 
+  }
 
 }
 
 
 /* smp home

+ 2 - 2
src/mock/index.js
View File 

@@ -11,12 +11,12 @@ import * as sysUser from './modules/sys-user'
 
 // tips
 
 // 1. 开启/关闭[业务模块]拦截, 通过调用fnCreate方法[isOpen参数]设置.
 
 // 2. 开启/关闭[业务模块中某个请求]拦截, 通过函数返回对象中的[isOpen属性]设置.
 
-fnCreate(common, true)
 
+fnCreate(common, false)
 
 fnCreate(jobSchedule, true)
 
 fnCreate(oss, true)
 
 fnCreate(sysConfig, true)
 
 fnCreate(sysLog, true)
 
-fnCreate(sysMenu, true)
 
+fnCreate(sysMenu, false)
 
 fnCreate(sysRole, true)
 
 fnCreate(sysUser, true)

+ 19 - 4
src/mock/modules/common.js
View File 

@@ -1,16 +1,31 @@
 
 import Mock from 'mockjs'
 
 
 // 登录
 
+// export function login () {
 
+//   return {
 
+//     // isOpen: false,
 
+//     url: '/login',
 
+//     type: 'post',
 
+//     data: {
 
+//       'msg': 'success',
 
+//       'code': 0,
 
+//       'expire': Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
 
+//       'data': {
 
+//         'token': Mock.Random.string('abcdefghijklmnopqrstuvwxyz0123456789', 32)
 
+//       }
 
+//     }
 
+//   }
 
+// }
 
+// 登录
 
 export function login () {
 
   return {
 
     // isOpen: false,
 
-    url: '/sys/login',
 
+    url: '/login',
 
     type: 'post',
 
     data: {
 
-      'msg': 'success',
 
+      'msg': '登录成功',
 
       'code': 0,
 
-      'expire': Mock.Random.natural(60 * 60 * 1, 60 * 60 * 12),
 
-      'token': Mock.Random.string('abcdefghijklmnopqrstuvwxyz0123456789', 32)
 
+      'sessionToken': '5d9c68c6c50ed3d02a2fcf54f63993b6'
 
     }
 
   }
 
 }

+ 117 - 9
src/mock/modules/sys-menu.js
View File 

@@ -498,15 +498,119 @@ var navDataList = [
 
     ]
 
   }
 
 ]
 
-var navDataList2 = [
 
+// var navDataList2 = [
 
+//   {
 
+//     'id': 1,
 
+//     'parentId': 0, // 父ID，根ID是0
 
+//     'name': '项目', // 菜单名
 
+//     'ename': 'project-index', // 和路径相同，不要斜杠
 
+//     'path': '', // 页面路径 '/功能块名/页面名' 例子：/jiankong/shouye  后台录入
 
+//     'componentPath': '', // 文件路径，后台录入各子系统页面的文件路径，
 
+//     'noMenu': true // 如果该菜单只是有用，但是不出现在菜单中，就添加这个属性
 
+//   }
 
+// ]
 
+var navDataList3 = [
 
   {
 
     'id': 1,
 
-    'parentId': 0, // 父ID，根ID是0
 
-    'name': '项目', // 菜单名
 
-    'ename': 'project-index', // 和路径相同，不要斜杠
 
-    'path': '', // 页面路径 '/功能块名/页面名' 例子：/jiankong/shouye  后台录入
 
-    'componentPath': '', // 文件路径，后台录入各子系统页面的文件路径，
 
-    'noMenu': true // 如果该菜单只是有用，但是不出现在菜单中，就添加这个属性
 
+    'parentId': 0,
 
+    'name': '监测预警',
 
+    'ename': 'jcyj',
 
+    'path': '',
 
+    'componentPath': '',
 
+    'children': []
 
+  },
 
+  {
 
+    'id': 11,
 
+    'parentId': 1,
 
+    'name': '监测预警',
 
+    'ename': 'jcyjindex',
 
+    'path': 'jcyjindex',
 
+    'componentPath': 'business/home/home',
 
+    'children': []
 
+  }
 
+]
 
+var navDataList4 = [
 
+  {
 
+    'uuid': '1',
 
+    'parentUUID': 0,
 
+    'name': '监测预警',
 
+    'ename': 'jcyj',
 
+    'path': 'jcyjindex1',
 
+    'componentPath': 'business/home/home',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '11',
 
+    'parentUUID': '1',
 
+    'name': '监测预警',
 
+    'ename': 'jcyjindex',
 
+    'path': 'jcyjindex2',
 
+    'componentPath': 'business/home/home',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '111',
 
+    'parentUUID': '11',
 
+    'name': 'xiao监测预警',
 
+    'ename': 'jcyjindex',
 
+    'path': 'jcyjindex3',
 
+    'componentPath': 'business/home/home',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '1111',
 
+    'parentUUID': '111',
 
+    'name': 'xiaoxiao监测预警',
 
+    'ename': 'jcyjindex132',
 
+    'path': 'jcyjindex4',
 
+    'componentPath': 'business/home/home',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '2',
 
+    'parentUUID': 0,
 
+    'name': '列表',
 
+    'ename': 'lanmu2',
 
+    'path': 'lanmu2',
 
+    'componentPath': 'modules/demo/listDemo/list-demo',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '21',
 
+    'parentUUID': '2',
 
+    'name': '列表2',
 
+    'ename': 'lanmu22',
 
+    'path': 'lanmu22',
 
+    'componentPath': 'modules/demo/listDemo/list-demo',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '3',
 
+    'parentUUID': 0,
 
+    'name': '表单',
 
+    'ename': 'biaodan1',
 
+    'path': 'biaodan1',
 
+    'componentPath': 'modules/demo/all-form-type',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '31',
 
+    'parentUUID': '3',
 
+    'name': '表单2',
 
+    'ename': 'biaodan2',
 
+    'path': 'biaodan2',
 
+    'componentPath': 'modules/demo/all-form-type',
 
+    'children': []
 
+  },
 
+  {
 
+    'uuid': '4',
 
+    'parentUUID': 0,
 
+    'name': '网址嵌套',
 
+    'ename': 'webaddress',
 
+    'path': 'webaddress',
 
+    'url': 'http://localhost:8003',
 
+    // 'componentPath': 'modules/demo/all-form-type',
 
+    'children': []
 
   }
 
 ]
 
 
@@ -519,7 +623,7 @@ export function nav () {
 
     data: {
 
       'msg': 'success',
 
       'code': 0,
 
-      'data': navDataList2
 
+      'data': navDataList3
 
     }
 
   }
 
 }
 
@@ -530,7 +634,11 @@ export function list () {
 
     // isOpen: false,
 
     url: '/sys/menu/list',
 
     type: 'get',
 
-    data: dataList
 
+    data: {
 
+      'msg': 'success',
 
+      'code': 0,
 
+      'list': navDataList4
 
+    }
 
   }
 
 }

+ 56 - 22
src/router/index.js
View File 

@@ -30,13 +30,13 @@ export const moduleRoutes = {
 
   path: '/',
 
   component: () => import('@/views/main/main'),
 
   name: 'main',
 
-  redirect: {name: 'home'},
 
+  redirect: {name: 'login'},
 
   meta: {title: '主入口布局'},
 
   children: [
 
-    // {path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: {title: '首页'}},
 
-    {path: 'home', component: () => import('@/views/business/home/home'), name: 'home', meta: {title: '首页'}},
 
-    {path: 'demo/list-demo', component: () => import('@/views/modules/demo/listDemo/list-demo'), name: 'list-demo', meta: {title: '列表页'}},
 
-    {path: 'demo/all-form-type', component: () => import('@/views/modules/demo/all-form-type'), name: 'all-form-type', meta: {title: '表单页'}}
 
+    // {path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: {title: '首页', parentUUID: 0, uuid: 'index1'}}
 
+    // {path: 'home', component: () => import('@/views/business/home/home'), name: 'home', meta: {title: '首页'}}
 
+    // {path: 'demo/list-demo', component: () => import('@/views/modules/demo/listDemo/list-demo'), name: 'list-demo', meta: {title: '列表页'}},
 
+    // {path: 'demo/all-form-type', component: () => import('@/views/modules/demo/all-form-type'), name: 'all-form-type', meta: {title: '表单页'}}
 
   ]
 
 }
 
 
@@ -49,6 +49,7 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
 
   // 截取路由中token进行处理
 
   filterToken(to, from, next)
 
+  // console.log(to)
 
   // console.log(from)
 
   // 添加动态(菜单)路由
 
   // 已添加或者当前路由为页面路由, 可直接访问
 
@@ -62,14 +63,21 @@ router.beforeEach((to, from, next) => {
 
     return next()
 
   }
 
   // 获取菜单列表, 添加并全局变量保存
 
-  http.get('/sys/menu/nav').then(({data: res}) => {
 
+  http.get('/sys/menu/list').then(({data: res}) => {
 
     if (res.code !== 0) {
 
       Vue.prototype.$message.error(res.msg)
 
       return next({name: 'login'})
 
     }
 
-
 
-    window.SITE_CONFIG['menuList'] = res.data
 
-
 
+    let homePage = {
 
+      'uuid': 'index1',
 
+      'parentUUID': 0,
 
+      'name': '首页',
 
+      'ename': 'home',
 
+      'path': 'home',
 
+      'componentPath': 'modules/home'
 
+    }
 
+    res.list.unshift(homePage)
 
+    window.SITE_CONFIG['menuList'] = res.list
 
     fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList'])
 
     next({...to, replace: true})
 
   }).catch(() => {
 
@@ -107,27 +115,53 @@ function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
 
       temp = temp.concat(menuList[i].children)
 
       continue
 
     }
 
+    let path = menuList[i].path
 
+    let componentPath = menuList[i].componentPath
 
+    if (!path) {
 
+      continue
 
+    }
 
+
 
     // 组装路由
 
     var route = {
 
-      path: '',
 
-      component: null,
 
-      name: '',
 
+      path: path,
 
+      component: '',
 
+      name: menuList[i].ename,
 
       meta: {
 
-        ...window.SITE_CONFIG['contentTabDefault'],
 
-        menuId: menuList[i].id,
 
+        uuid: menuList[i].uuid,
 
+        parentUUID: menuList[i].parentUUID,
 
         title: menuList[i].name
 
       }
 
     }
 
-    // eslint-disable-next-line
 
-        let URL = (menuList[i].url || '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
 
-    if (isURL(URL)) {
 
-      route['path'] = route['name'] = `i-${menuList[i].id}`
 
-      route['meta']['iframeURL'] = URL
 
+    menuList[i].url = 'https://juejin.im/' // 测试用
 
+    if (isURL(menuList[i].url)) {
 
+      route.meta.iframeURL = menuList[i].url
 
+      route.component = () => import(`@/views/modules/home`)
 
     } else {
 
-      URL = URL.replace(/^\//, '').replace(/_/g, '-')
 
-      route['path'] = route['name'] = URL.replace(/\//g, '-')
 
-      route['component'] = () => import(`@/views/modules/${URL}`)
 
+      route.component = () => import(`@/views/${componentPath}`)
 
     }
 
+    // console.log(route)
 
+    // console.log(route)
 
+    // 组装路由
 
+    // var route = {
 
+    //   path: '',
 
+    //   component: null,
 
+    //   name: '',
 
+    //   meta: {
 
+    //     ...window.SITE_CONFIG['contentTabDefault'],
 
+    //     menuId: menuList[i].id,
 
+    //     title: menuList[i].name
 
+    //   }
 
+    // }
 
+    // // eslint-disable-next-line
 
+    //     let URL = (menuList[i].url || '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
 
+    // if (isURL(URL)) {
 
+    //   route['path'] = route['name'] = `i-${menuList[i].id}`
 
+    //   route['meta']['iframeURL'] = URL
 
+    // } else {
 
+    //   URL = URL.replace(/^\//, '').replace(/_/g, '-')
 
+    //   route['path'] = route['name'] = URL.replace(/\//g, '-')
 
+    //   route['component'] = () => import(`@/views/modules/${URL}`)
 
+    // }
 
     routes.push(route)
 
   }
 
   if (temp.length >= 1) {

+ 1 - 0
src/store/index.js
View File 

@@ -16,6 +16,7 @@ export default new Vuex.Store({
 
     sidebarFold: false,
 
     // 侧边栏, 菜单
 
     sidebarMenuList: [],
 
+    sidebarMenuItem: {},
 
     sidebarMenuActiveName: '',
 
     // 内容, 是否需要刷新
 
     contentIsNeedRefresh: false,

+ 2 - 3
src/utils/request.js
View File 

@@ -15,11 +15,10 @@ const http = axios.create({
 
  * 请求拦截
 
  */
 
 http.interceptors.request.use(config => {
 
-  //临时免登陆
 
+  // 临时免登陆
 
   // Cookies.set('token', '8dcbf9730cec72cf8435e4f7e67e27fc')
 
-  // console.log(config.url)
 
   config.headers['Accept-Language'] = Cookies.get('language') || 'zh-CN'
 
-  config.headers['token'] = Cookies.get('token') || ''
 
+  config.headers['sessionToken'] = Cookies.get('token') || ''
 
   // 默认参数
 
   var defaults = {}
 
   // 防止缓存，GET请求默认带_t参数

+ 28 - 0
src/utils/tool.js
View File 

@@ -0,0 +1,28 @@
 
+/**
 
+ * constrcut 方法
 
+ * 根据提供的 id, pid 和 children 将一个个节点构建成一棵或者多棵树
 
+ * @param nodes 节点对象
 
+ * @param config 配置对象
 
+ */
 
+function construct (nodes, config) {
 
+  var id = (config && config.id) || 'id'
 
+  var pid = (config && config.pid) || 'pid'
 
+  var children = (config && config.children) || 'children'
 
+  var idMap = {}
 
+  var jsonTree = []
 
+  nodes.forEach(function (v) { idMap[v[id]] = v })
 
+  nodes.forEach(function (v) {
 
+    var parent = idMap[v[pid]]
 
+    if (parent) {
 
+      !parent[children] && (parent[children] = [])
 
+      parent[children].push(v)
 
+    } else {
 
+      jsonTree.push(v)
 
+    }
 
+  })
 
+  return jsonTree
 
+}
 
+let tool = {
 
+  construct
 
+}
 
+export default tool

+ 40 - 3
src/views/main/main-content-crumb.vue
View File 

@@ -1,10 +1,14 @@
 
 <template>
 
   <div class="smp-crumb">
 
-    <div class="smpc-item"><span>首页</span></div>
 
+    <div class="smpc-item" v-for="(item,index) in menuChain" :key="index">
 
+      <i v-if="index!==0">></i>
 
+      <span :class="index===menuChain.length-1">{{item.name}}</span>
 
+    </div>
 
+    <!-- <div class="smpc-item"><span>首页</span></div>
 
     <div class="smpc-item">
 
       <i>></i>
 
       <span class="on">监测预警</span>
 
-    </div>
 
+    </div> -->
 
   </div>
 
 </template>
 
 
@@ -12,10 +16,43 @@
 
 export default {
 
   data () {
 
     return {
 
+      uuid: this.$route.meta.uuid,
 
+      menuList: window.SITE_CONFIG['menuList'],
 
+      menuChain: []
 
+    }
 
+  },
 
+  watch: {
 
+    $route () {
 
+      this.uuid = this.$route.meta.uuid
 
+      this.initCrumb()
 
     }
 
   },
 
+  mounted () {
 
+    this.initCrumb()
 
+  },
 
   methods: {
 
-
 
+    initCrumb () {
 
+      let item = this.menuList.filter((e) => {
 
+        return e.uuid === this.uuid
 
+      })
 
+      this.menuChain = item
 
+      this.setParentItem(item[0].parentUUID)
 
+      // console.log(this.menuChain, this.menuList)
 
+    },
 
+    findParent (parentId) {
 
+      let parent = this.menuList.filter((e) => {
 
+        return e.uuid === parentId
 
+      })
 
+      return parent[0] ? parent[0] : ''
 
+    },
 
+    setParentItem (parentId) {
 
+      // console.log(parentId)
 
+      let _lastItem = this.findParent(parentId)
 
+      if (_lastItem) {
 
+        this.menuChain.unshift(_lastItem)
 
+        this.setParentItem(_lastItem.parentUUID)
 
+      }
 
+    }
 
   }
 
 }
 
 </script>

+ 21 - 6
src/views/main/main-content.vue
View File 

@@ -1,23 +1,38 @@
 
 <template>
 
-  <main class="smp-content">
 
-    <keep-alive>
 
+  <main class="smp-content" :class="{'isIframe':isIframe}">
 
+    <iframe v-if="isIframe" :src="iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
 
+    <keep-alive v-else>
 
       <router-view />
 
     </keep-alive>
 
   </main>
 
 </template>
 
 
 <script>
 
-
 
+import { isURL } from '@/utils/validate'
 
 export default {
 
   data () {
 
     return {
 
+      iframeURL: this.$route.meta.iframeURL,
 
+      isIframe: false
 
     }
 
   },
 
-  components: {
 
-
 
+  watch: {
 
+    $route () {
 
+      this.iframeURL = this.$route.meta.iframeURL
 
+      this.initUrl()
 
+    }
 
+  },
 
+  mounted () {
 
+    this.initUrl()
 
   },
 
   methods: {
 
-
 
+    initUrl () {
 
+      this.isIframe = this.tabIsIframe(this.iframeURL)
 
+    },
 
+    // tabs, 是否通过iframe展示
 
+    tabIsIframe (url) {
 
+      return isURL(url)
 
+    }
 
   }
 
 }
 
 </script>

+ 144 - 61
src/views/main/main-navbar-menu.vue
View File 

@@ -6,7 +6,7 @@
 
         <span>{{item.name}}</span>
 
       </div>
 
     </div>
 
-    <div class="nbm-switch">
 
+    <div class="nbm-switch" v-if="isShowMore">
 
       <div class="nbm-item" v-if="menuOpen" @click="changeMenuStatus">
 
         <i class="smp-nav-icon smp-ni-back"></i>
 
         <span>返回</span>
 
@@ -20,87 +20,170 @@
 
 </template>
 
 
 <script>
 
+import tool from '@/utils/tool.js'
 
 export default {
 
   data () {
 
     return {
 
       lineWrapIndex: '',
 
       menuOpen: false,
 
+      isShowMore: false,
 
+      currentMenuItem: {},
 
+      menuDataAll: [],
 
+      iconArr: {
 
+        index: 'smp-ni-nav_sy_n',
 
+        jcyj: 'smp-ni-nav_jcyj_n',
 
+        fxyp: 'smp-ni-nav_fxyp_n',
 
+        zhdd: 'smp-ni-nav_zhdd_n',
 
+        xnpg: 'smp-ni-nav_xnpg_n',
 
+        jcsj: 'smp-ni-nav_jcsj_n',
 
+        jczj: 'smp-ni-nav_jczj_n',
 
+        fzsgzt: 'smp-ni-nav_fzsgzt_n',
 
+        xtgl: 'smp-ni-nav_xtgl_n',
 
+        znyw: 'smp-ni-nav_znyw_n'
 
+      },
 
       menuList: [
 
-        {
 
-          name: '首页',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_sy_n'
 
-        },
 
-        {
 
-          name: '监测预警',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_jcyj_n'
 
-        },
 
-        {
 
-          name: '分析研判',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_fxyp_n'
 
-        },
 
-        {
 
-          name: '指挥调度',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_zhdd_n'
 
-        },
 
-        {
 
-          name: '效能评估',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_xnpg_n'
 
-        },
 
-        {
 
-          name: '基础数据',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_jcsj_n'
 
-        },
 
-        {
 
-          name: '基础组件',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_jczj_n'
 
-        },
 
-        {
 
-          name: '反走私工作台',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_fzsgzt_n'
 
-        },
 
-        {
 
-          name: '系统管理',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_xtgl_n'
 
-        },
 
-        {
 
-          name: '智能运维',
 
-          url: '/home',
 
-          on: false,
 
-          icon: 'smp-ni-nav_znyw_n'
 
-        }
 
+        // {
 
+        //   name: '首页',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_sy_n',
 
+        //   uuid: 'index1',
 
+        //   parentUUID: 0
 
+        // }
 
+        // {
 
+        //   name: '监测预警',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_jcyj_n'
 
+        // },
 
+        // {
 
+        //   name: '分析研判',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_fxyp_n'
 
+        // },
 
+        // {
 
+        //   name: '指挥调度',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_zhdd_n'
 
+        // },
 
+        // {
 
+        //   name: '效能评估',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_xnpg_n'
 
+        // },
 
+        // {
 
+        //   name: '基础数据',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_jcsj_n'
 
+        // },
 
+        // {
 
+        //   name: '基础组件',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_jczj_n'
 
+        // },
 
+        // {
 
+        //   name: '反走私工作台',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_fzsgzt_n'
 
+        // },
 
+        // {
 
+        //   name: '系统管理',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_xtgl_n'
 
+        // },
 
+        // {
 
+        //   name: '智能运维',
 
+        //   url: '/home',
 
+        //   on: false,
 
+        //   icon: 'smp-ni-nav_znyw_n'
 
+        // }
 
       ]
 
     }
 
   },
 
+  mounted () {
 
+    this.initMenu()
 
+    this.initMenuMoreBtn()
 
+    this.getCurrentMenuByUrl()
 
+    // this.setIndexPage()
 
+  },
 
   methods: {
 
+    initMenuMoreBtn () {
 
+      let wraper = this.$refs['nbm-wraper']
 
+      let wraperW = wraper.getBoundingClientRect().width
 
+      let itemW = 120
 
+      let itemLength = this.menuList.length
 
+      this.isShowMore = (itemW * itemLength > wraperW)
 
+    },
 
+    initMenu () {
 
+      // uuid
 
+      // parentUUID
 
+      this.menuDataAll = window.SITE_CONFIG['menuList']
 
+      let list = []
 
+      this.menuDataAll.map((e, i) => {
 
+        if (!e.noMenu) {
 
+          list.push({
 
+            ...e,
 
+            url: e.path ? ('/' + e.path) : '',
 
+            on: false,
 
+            icon: this.iconArr[Object.keys(this.iconArr)[i]]
 
+          })
 
+        }
 
+      })
 
+      list = tool.construct(list, {
 
+        id: 'uuid',
 
+        pid: 'parentUUID',
 
+        children: 'children'
 
+      })
 
+      this.menuList = this.menuList.concat(list)
 
+    },
 
+    getCurrentMenuByUrl () {
 
+      let uuid = this.$route.meta.uuid
 
+      let _this = this
 
+      let rootOne = getParent(uuid)
 
+      let menuOne = this.menuList.filter((e) => {
 
+        return e.uuid === rootOne.uuid
 
+      })[0]
 
+      _this.setIndexPage(menuOne)
 
+      function getParent (uuid) {
 
+        let item = _this.menuDataAll.filter((e) => {
 
+          return e.uuid === uuid
 
+        })[0]
 
+        if (!item.parentUUID) {
 
+          return item
 
+        } else {
 
+          return getParent(item.parentUUID)
 
+        }
 
+      }
 
+    },
 
+    setIndexPage (item) {
 
+      this.setCurrentMenuItem(item)
 
+      item.on = true
 
+    },
 
     changeMenuStatus () {
 
       this.menuOpen = !this.menuOpen
 
     },
 
     gotoPage (item) {
 
       this.upMenuItem(item)
 
+      this.setCurrentMenuItem(item)
 
       this.menuList.forEach((e, i) => {
 
         e.on = false
 
       })
 
       item.on = true
 
       this.$router.push({ path: item.url })
 
     },
 
+    setCurrentMenuItem (item) {
 
+      // console.log(item)
 
+      this.currentMenuItem = item
 
+      // window.SITE_CONFIG['currentMenuItem'] = item
 
+      this.$store.state.sidebarMenuItem = item
 
+    },
 
     upMenuItem (item) {
 
       let wraper = this.$refs['nbm-wraper']
 
       let wraperW = wraper.getBoundingClientRect().width

+ 1 - 1
src/views/main/main-sidebar-sub-menu.vue
View File 

@@ -10,7 +10,7 @@
 
     </div>
 
     <sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
 
   </el-submenu>
 
-  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu)" :class="[{'smpsbm-lv2':menu.lv===2}]">
 
+  <el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu)" :class="[{'smpsbm-lv2':menu.lv>=2}]">
 
     <i v-if="menu.lv===1" :class="['smp-nav-icon',menu.icon]"></i>
 
     <em class="smpsbm-point" v-if="menu.lv===2">&middot;</em>
 
     <span class="smpsbm-name">

+ 63 - 6
src/views/main/main-sidebar.vue
View File 

@@ -1,19 +1,22 @@
 
 <template>
 
   <aside class="smp-sidebar" :class="{'smps-close':menuClose}">
 
     <div class="smps-hd" :class="{'smps-hdclose':menuClose}">
 
-      <div class="smpsh-title">监测预警</div>
 
+      <div class="smpsh-title">{{currentMenuName}}</div>
 
       <div class="smpsh-switch" :class="{'on':menuClose}" @click="switchMenu">
 
         <i class="smp-nav-icon-16 smp-ni16-slidebar-switch"></i>
 
       </div>
 
     </div>
 
-    <div class="smps-bd">
 
+    <div class="smps-bd" :class="{'onopen':!menuClose}">
 
       <el-menu
 
-        :unique-opened="true"
 
+        v-if="currentMenuList.length>0"
 
+        :unique-opened="false"
 
         :collapseTransition="false"
 
         :collapse="menuClose"
 
+        :default-active="activeIndex"
 
         class="smps-menu">
 
-        <sub-menu v-for="(menu) in sidebarMenuList" :key="menu.id" :menu="menu" />
 
+        <sub-menu v-for="(menu) in slideMenu" :key="menu.id" :menu="menu" />
 
       </el-menu>
 
+      <div class="smps-bd-nomenu" v-else>暂无</div>
 
     </div>
 
   </aside>
 
 </template>
 
@@ -23,7 +26,13 @@ import SubMenu from './main-sidebar-sub-menu'
 
 export default {
 
   data () {
 
     return {
 
+      activeIndex: '',
 
       menuClose: this.$store.state.sidebarFold,
 
+      iconClass: 'smp-ni-leftbar_jcyj',
 
+      menuDataAll: [],
 
+      currentMenuList: [],
 
+      currentMenuName: '暂无',
 
+      slideMenu: [],
 
       sidebarMenuList: [
 
         {
 
           name: '列表页',
 
@@ -129,10 +138,58 @@ export default {
 
   components: {
 
     SubMenu
 
   },
 
-  created () {
 
-    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
 
+
 
+  computed: {
 
+    currentMenuItem () {
 
+      return this.$store.state.sidebarMenuItem
 
+    }
 
+  },
 
+  watch: {
 
+    currentMenuItem () {
 
+      this.currentMenuList = this.currentMenuItem.children || []
 
+      this.currentMenuName = this.currentMenuItem.name
 
+      this.initMenu()
 
+    }
 
+  },
 
+  mounted () {
 
+    // this.$store.state.sidebarMenuList = window.SITE_CONFIG['currentMenuItem'].children
 
   },
 
   methods: {
 
+    initMenu () {
 
+      this.menuDataAll = window.SITE_CONFIG['menuList']
 
+      this.initSliderMenu()
 
+      this.setActiveOne()
 
+    },
 
+    initSliderMenu () {
 
+      let currentMenuList = this.currentMenuList
 
+      let lv = 1
 
+      if (currentMenuList) {
 
+        this.slideMenu = this.addMenu(currentMenuList, lv)
 
+      }
 
+    },
 
+    setActiveOne () {
 
+      this.activeIndex = this.$route.meta.uuid
 
+    },
 
+    addMenu (arr, lv) {
 
+      let list = []
 
+      arr.forEach((e) => {
 
+        if (!e.noMenu) {
 
+          let obj = {
 
+            ...e,
 
+            lv: lv,
 
+            id: e.uuid,
 
+            url: e.path ? ('/' + e.path) : '',
 
+            on: false,
 
+            icon: lv === 1 ? this.iconClass : ''
 
+          }
 
+          if (e.children && e.children.length) {
 
+            obj.children = this.addMenu(e.children, ++lv)
 
+          }
 
+          list.push(obj)
 
+        }
 
+      })
 
+      return list
 
+    },
 
     switchMenu () {
 
       this.menuClose = !this.menuClose
 
       this.$store.state.sidebarFold = !this.$store.state.sidebarFold

+ 8 - 8
src/views/main/main.vue
View File 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <div :style="auiWrapper" v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" class="aui-wrapper">
 
+  <div :style="auiWrapper" v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" class="aui-wrapper all-main-wraper">
 
     <template v-if="!loading">
 
       <div class="smp_main-t">
 
         <main-navbar v-if="navbarFlag"/>
 
@@ -56,13 +56,13 @@ export default {
 
   created () {
 
     // this.windowResizeHandle()
 
     this.routeHandle(this.$route)
 
-    Promise.all([
 
-      this.getUserInfo(),
 
-      this.getPermissions()
 
-    ]).then(() => {
 
-      this.loading = false
 
-    })
 
-
 
+    // Promise.all([
 
+    //   this.getUserInfo(),
 
+    //   this.getPermissions()
 
+    // ]).then(() => {
 
+    //   this.loading = false
 
+    // })
 
+    this.loading = false
 
     this.navbarFlag = window.SITE_CONFIG['isNavbar']
 
     this.sidebarFlag = window.SITE_CONFIG['isSidebar']
 
     if (!this.sidebarFlag) {

+ 23 - 25
src/views/pages/login.vue
View File 

@@ -24,7 +24,7 @@
 
                   </span>
 
                 </el-input>
 
               </el-form-item>
 
-              <el-form-item prop="captcha">
 
+              <!-- <el-form-item prop="captcha">
 
                 <el-row :gutter="20">
 
                   <el-col :span="14">
 
                     <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
 
@@ -37,7 +37,7 @@
 
                     <img :src="captchaPath" @click="getCaptcha()">
 
                   </el-col>
 
                 </el-row>
 
-              </el-form-item>
 
+              </el-form-item> -->
 
               <el-form-item>
 
                 <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
 
               </el-form-item>
 
@@ -60,10 +60,10 @@ export default {
 
       i18nMessages: messages,
 
       captchaPath: '',
 
       dataForm: {
 
-        username: 'admin',
 
-        password: 'admin',
 
-        uuid: '',
 
-        captcha: ''
 
+        username: 'testuser',
 
+        password: 'Lz!1234567'
 
+        // uuid: '',
 
+        // captcha: ''
 
       }
 
     }
 
   },
 
@@ -75,15 +75,15 @@ export default {
 
         ],
 
         password: [
 
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
 
-        ],
 
-        captcha: [
 
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
 
         ]
 
+        // captcha: [
 
+        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
 
+        // ]
 
       }
 
     }
 
   },
 
   created () {
 
-    this.getCaptcha()
 
+    // this.getCaptcha()
 
   },
 
   methods: {
 
     // 获取验证码
 
@@ -93,21 +93,19 @@ export default {
 
     },
 
     // 表单提交
 
     dataFormSubmitHandle: debounce(function () {
 
-      this.$router.replace({ name: 'home' })
 
-
 
-      // this.$refs['dataForm'].validate((valid) => {
 
-      //   if (!valid) {
 
-      //     return false
 
-      //   }
 
-      //   this.$http.post('/login', this.dataForm).then(({ data: res }) => {
 
-      //     if (res.code !== 0) {
 
-      //       this.getCaptcha()
 
-      //       return this.$message.error(res.msg)
 
-      //     }
 
-      //     Cookies.set('token', res.data.token)
 
-      //     this.$router.replace({ name: 'home' })
 
-      //   }).catch(() => {})
 
-      // })
 
+      this.$refs['dataForm'].validate((valid) => {
 
+        if (!valid) {
 
+          return false
 
+        }
 
+        this.$http.post('/login', this.dataForm).then(({ data: res }) => {
 
+          if (res.code !== 0) {
 
+            // this.getCaptcha()
 
+            return this.$message.error(res.msg)
 
+          }
 
+          Cookies.set('token', res.sessionToken)
 
+          this.$router.replace({ name: 'home' })
 
+        }).catch(() => {})
 
+      })
 
     }, 1000, { 'leading': true, 'trailing': false })
 
   }
 
 }