更新avue底层，优化底层组件

config/index.js

@@ -1,6 +1,6 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
 var path = require('path')
-var baseUrl = 'http://192.168.0.101:9999';
+var baseUrl = 'http://218.70.11.118:7777';
 module.exports = {
   build: {
     env: require('./prod.env'),

package.json

@@ -25,6 +25,7 @@
     "js-cookie": "2.1.4",
     "mock": "^0.1.1",
     "mockjs": "^1.0.1-beta3",
+    "nprogress": "^0.2.0",
     "vue": "2.5.2",
     "vue-axios": "^2.0.2",
     "vue-image-crop-upload": "^2.2.3",

src/components/iframe/iframe.vue

@@ -1,19 +1,22 @@
 <template>
-	<iframe v-if="$route.query.src" :src='$route.query.src' class="iframe" ref="iframe"  v-loading.fullscreen.lock="fullscreenLoading"></iframe>  
-    <iframe v-else :src="urlPath" class="iframe" ref="iframe"  v-loading.fullscreen.lock="fullscreenLoading"></iframe>  
+  <iframe v-if="$route.query.src" :src='$route.query.src' class="iframe" ref="iframe"></iframe>
+  <iframe v-else :src="urlPath" class="iframe" ref="iframe"></iframe>
 </template>
 
 <script>
 import { mapState, mapGetters } from "vuex";
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
 export default {
   name: "myiframe",
   data() {
     return {
-      fullscreenLoading: false,
       urlPath: this.getUrlPath() //iframe src 路径
     };
   },
-  created() {},
+  created() {
+    NProgress.configure({ showSpinner: false });
+  },
   mounted() {
     this.load();
     this.resize();
@@ -37,11 +40,11 @@ export default {
   methods: {
     // 显示等待框
     show() {
-      this.fullscreenLoading = true;
+      NProgress.start();
     },
     // 隐藏等待狂
     hide() {
-      this.fullscreenLoading = false;
+      NProgress.done();
     },
     // 加载浏览器窗口变化自适应
     resize() {

src/page/index/sidebar/sidebarItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-wrapper">
-    <template v-for="item in menu">
+    <template v-for="(item,index) in menu">
       <el-menu-item v-if="item.children.length===0 " :index="item.path" @click="open(item)" :key="item.label">
         <i :class="item.icon"></i>
         <span slot="title">{{item.label}}</span>
@@ -11,7 +11,7 @@
           <span slot="title" :class="{display:!show}">{{item.label}}</span>
         </template>
         <template v-for="(child,cindex) in item.children">
-          <el-menu-item v-if="child.children.length==0" :index="child.path" @click="open(child)" :key="cindex">
+          <el-menu-item :index="child.path" @click="open(child)" v-if="child.children.length==0" :key="cindex">
             <i :class="child.icon"></i>
             <span slot="title">{{child.label}}</span>
           </el-menu-item>
@@ -40,10 +40,9 @@ export default {
   mounted() {},
   methods: {
     open(item) {
-      this.$router.push({ path: resolveUrlPath(item.path) });
-      this.$store.commit("ADD_TAG", {
-        label: item.label,
-        value: item.path
+      this.$router.push({
+        path: resolveUrlPath(item.path, item.label),
+        query: item.query
       });
     }
   }

src/page/index/tags.vue

@@ -8,7 +8,7 @@
     <!-- tag盒子 -->
     <div class="tags-box" ref="tagBox">
       <div class="tags-list" ref="tagsList" @mousewheel="hadelMousewheel" @mouseup="hadelMouseUp" @mousemove="hadelMouse" @mousedown="hadelMousestart" @touchup="hadelMouseUp" @touchmove="hadelMouse" @touchstart="hadelMousestart">
-        <div ref="tagsPageOpened" class="tag-item" :name="item.value" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item.value,item.label,item.num)">
+        <div ref="tagsPageOpened" class="tag-item" :name="item.value" @contextmenu.prevent="openMenu(item,$event)" v-for="(item,index) in tagList" :key="index" @click="openUrl(item)">
           <span class="icon-yuan tag-item-icon" :class="{'is-active':nowTagValue==item.value}"></span>
           <span class="tag-text">{{item.label}}</span>
           <i class="el-icon-close tag-close" @click.stop="closeTag(item)" v-if="item.close"></i>
@@ -87,14 +87,12 @@ export default {
     init() {
       this.refsTag = this.$refs.tagsPageOpened;
       setTimeout(() => {
-        if (this.refsTag) {
-          this.refsTag.forEach((item, index) => {
-            if (this.tag.value === item.attributes.name.value) {
-              let tag = this.refsTag[index];
-              this.moveToView(tag);
-            }
-          });
-        }
+        this.refsTag.forEach((item, index) => {
+          if (this.tag.value === item.attributes.name.value) {
+            let tag = this.refsTag[index];
+            this.moveToView(tag);
+          }
+        });
       }, 1);
     },
     showCollapse() {
@@ -172,8 +170,6 @@ export default {
     },
     closeAllTags() {
       this.$store.commit("DEL_ALL_TAG");
-      this.$store.commit("ADD_TAG", this.tagWel);
-      this.$router.push({ path: resolveUrlPath(this.tagWel.value) });
     },
     moveToView(tag) {
       if (tag.offsetLeft < -this.tagBodyLeft) {
@@ -194,12 +190,11 @@ export default {
         );
       }
     },
-    openUrl(url, name, num) {
-      this.$store.commit("ADD_TAG", {
-        label: name,
-        value: url
+    openUrl(item) {
+      this.$router.push({
+        path: resolveUrlPath(item.value, item.label),
+        query: item.query
       });
-      this.$router.push({ path: resolveUrlPath(url) });
     },
     eachTag(tag) {
       for (var key in this.tagList) {
@@ -215,7 +210,7 @@ export default {
       this.$store.commit("DEL_TAG", item);
       if (item.value == this.tag.value) {
         tag = this.tagList[key == 0 ? key : key - 1];
-        this.openUrl(tag.value, tag.label, tag.num);
+        this.openUrl(tag);
       }
     }
   }

src/page/index/top/index.vue

@@ -4,7 +4,7 @@
       <top-logo></top-logo>
     </div>
     <h1 class="header-title">
-      <!-- <topMenu></topMenu> -->
+      <topMenu></topMenu>
     </h1>
     <div class="header-button is-right">
       <el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
@@ -24,13 +24,16 @@
         </span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>
-            <a href="https://gitee.com/smallweigit/avue" target="_blank">avue地址</a>
+            <router-link to="/">首页</router-link>
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <router-link to="/info/index">修改信息</router-link>
           </el-dropdown-item>
           <el-dropdown-item>
             <a href="https://gitee.com/log4j/pig" target="_blank">pig地址</a>
           </el-dropdown-item>
           <el-dropdown-item>
-            <router-link to="/info">修改信息</router-link>
+            <a href="https://gitee.com/smallweigit/avue" target="_blank">avue地址</a>
           </el-dropdown-item>
           <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
         </el-dropdown-menu>
@@ -41,10 +44,9 @@
     </div>
   </div>
 </template>
-
 <script>
 import { mapState, mapGetters } from "vuex";
-import { fullscreenToggel } from "@/util/util";
+import { fullscreenToggel, listenfullscreen } from "@/util/util";
 import topLogo from "./top-logo";
 import topLock from "./top-lock";
 import topMenu from "./top-menu";
@@ -56,6 +58,9 @@ export default {
   },
   filters: {},
   created() {},
+  mounted() {
+    listenfullscreen(this.setScreen);
+  },
   computed: {
     ...mapState({
       userInfo: state => state.user.userInfo
@@ -64,9 +69,11 @@ export default {
   },
   methods: {
     handleScreen() {
-      this.$store.commit("SET_FULLSCREN");
       fullscreenToggel();
     },
+    setScreen() {
+      this.$store.commit("SET_FULLSCREN");
+    },
     logout() {
       this.$confirm("是否退出系统, 是否继续?", "提示", {
         confirmButtonText: "确定",

src/permission.js

@@ -1,26 +1,39 @@
 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 { vaildUtil } from '@/util/yun';
 import { setTitle } from '@/util/util';
 import { validatenull } from '@/util/validate';
 import { asyncRouterMap } from '@/router/router'
-import { Duplex } from 'stream';
+NProgress.configure({ showSpinner: false })// NProgress Configuration
 function hasPermission(roles, permissionRoles) {
     if (!permissionRoles) return true
     return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
-const whiteList = ['/login', '/404', '/401']
+const whiteList = ['/login', '/404', '/401', '/lock']
 const lockPage = '/lock'
 router.addRoutes(asyncRouterMap); // 动态添加可访问路由表
 router.beforeEach((to, from, next) => {
-    store.commit('SET_TAG', to.query.src ? to.query.src : to.path);
+    NProgress.start() // start progress bar
+    const value = to.query.src ? to.query.src : to.path;
+    const label = to.query.name ? to.query.name : to.name;
+    if (whiteList.indexOf(value) == -1) {
+        store.commit('ADD_TAG', {
+            label: label,
+            value: value,
+            query: to.query
+        });
+    }
     if (store.getters.access_token) { // determine if there has token
         /* has token*/
         if (store.getters.isLock && to.path != lockPage) {
             next({ path: lockPage })
+            NProgress.done();
         } else if (to.path === '/login') {
             next({ path: '/' })
+            NProgress.done();
         } else {
             if (store.getters.roles.length === 0) {
                 store.dispatch('GetUserInfo').then(res => {
@@ -29,6 +42,7 @@ router.beforeEach((to, from, next) => {
                 }).catch(() => {
                     store.dispatch('FedLogOut').then(() => {
                         next({ path: '/login' })
+                        NProgress.done();
                     })
                 })
             } else {
@@ -41,6 +55,7 @@ router.beforeEach((to, from, next) => {
             next()
         } else {
             next('/login')
+            NProgress.done();
         }
     }
 })
@@ -49,42 +64,43 @@ router.beforeEach((to, from, next) => {
 function findMenuParent(tag) {
     let tagCurrent = [];
     const menu = store.getters.menu;
-    //如果是一级菜单直接返回
-    for (let i = 0, j = menu.length; i < j; i++) {
-        if (menu[i].path == tag.value) {
-            tagCurrent.push(tag);
-            return tagCurrent;
-        }
-    }
-
-    let currentPathObj = menu.filter(item => {
-        if (item.children.length == 1) {
-            return item.children[0].path === tag.value;
-        } else {
-            let i = 0;
-            let childArr = item.children;
-            let len = childArr.length;
-            while (i < len) {
-                if (childArr[i].path === tag.value) {
-                    return true;
-                    break;
-                }
-                i++;
-            }
-            return false;
-        }
-    })[0];
-    if (!validatenull(tagCurrent)) {
-        tagCurrent.push({
-            label: currentPathObj.label,
-            value: currentPathObj.path
-        });
-    }
     tagCurrent.push(tag);
     return tagCurrent;
+    // //如果是一级菜单直接返回
+    // for (let i = 0, j = menu.length; i < j; i++) {
+    //     if (menu[i].href == tag.value) {
+    //         tagCurrent.push(tag);
+    //         return tagCurrent;
+    //     }
+    // }
+
+    // let currentPathObj = menu.filter(item => {
+    //     if (item.children.length == 1) {
+    //         return item.children[0].href === tag.value;
+    //     } else {
+    //         let i = 0;
+    //         let childArr = item.children;
+    //         let len = childArr.length;
+    //         while (i < len) {
+    //             if (childArr[i].href === tag.value) {
+    //                 return true;
+    //                 break;
+    //             }
+    //             i++;
+    //         }
+    //         return false;
+    //     }
+    // })[0];
+    // tagCurrent.push({
+    //     label: currentPathObj.label,
+    //     value: currentPathObj.href
+    // });
+    // tagCurrent.push(tag);
+    // return tagCurrent;
 
 }
 router.afterEach((to, from) => {
+    NProgress.done();
     setTimeout(() => {
         const tag = store.getters.tag;
         setTitle(tag.label);

src/router/router.js

@@ -41,18 +41,18 @@ export const asyncRouterMap = [
 		path: '/',
 		name: '主页',
 		redirect: '/wel'
-	},{
-    path: '/info',
-    component: Layout,
-    redirect: '/info/index',
-    children: [
-      {
-        path: 'index',
-        name: '修改信息',
-        component: _import('admin/user/info', 'views')
-      }
-    ]
-  },
+	}, {
+		path: '/info',
+		component: Layout,
+		redirect: '/info/index',
+		children: [
+			{
+				path: 'index',
+				name: '修改信息',
+				component: _import('admin/user/info', 'views')
+			}
+		]
+	},
 	{
 		path: '/myiframe',
 		component: Layout,

src/store/modules/tags.js

@@ -3,6 +3,7 @@ import { validatenull } from "@/util/validate"
 const tagObj = {
     label: '',
     value: '',
+    query: '',
     num: '',
     close: true,
 }
@@ -38,6 +39,7 @@ const navs = {
             state.tagList.push({
                 label: action.label,
                 value: action.value,
+                query: action.query,
             })
             state.tagList = setFistTag(state.tagList);
             setStore({ name: 'tagList', content: state.tagList })

src/styles/common.scss

@@ -46,9 +46,9 @@ td {
 }
 
 body {
-	color: #666;
-	font-family: Microsoft YaHei, SimSun;
-	// background: #f6f6f6;
+	min-width: 1200px;
+	color: #333;
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei";
 	line-height: 2;
 }
 
@@ -81,12 +81,12 @@ textarea {
 
 textarea {
 	resize: none;
-} 
+}
 //禁用了文本的拖拉，尤其在谷歌下
 p {
 	text-align: justify;
 	text-justify: distribute;
-} 
+}
 //为了使文本段落左右两边对齐
 p {
 	word-wrap: break-word
@@ -211,5 +211,4 @@ table {
   .app-container {
 	padding: 20px;
 	box-sizing: border-box;
-  }
-  
+  }

src/util/util.js

@@ -2,11 +2,30 @@ import { validatenull } from './validate'
 import { baseUrl } from '@/config/env'
 
 
+/**
+ * 加密处理
+ */
+export const encryption = (params) => {
+    let { data, type, param, key } = params;
+    let result = JSON.parse(JSON.stringify(data));
+    if (type == 'Base64') {
+        param.forEach(ele => {
+            result[ele] = btoa(result[ele]);
+        })
+    } else if (type == 'Aes') {
+        param.forEach(ele => {
+            result[ele] = CryptoJS.AES.encrypt(result[ele], key).toString();
+        })
+
+    }
+    return result;
+};
+
 /**
  * 设置浏览器头部标题
  */
 export const setTitle = function (title) {
-    title = title ? `${title} Pig 微服务系统快速开发框架` : 'Pig 微服务系统快速开发框架';
+    title = title ? `${title}——Avue 通用管理 系统快速开发框架` : 'Avue 通用管理 系统快速开发框架';
     window.document.title = title;
 };
 /**
@@ -19,7 +38,26 @@ export const fullscreenToggel = () => {
         reqFullScreen();
     }
 }
-
+/**
+ * esc监听全屏
+ */
+export const listenfullscreen = (callback) => {
+    function listen() {
+        callback()
+    }
+    document.addEventListener("fullscreenchange", function (e) {
+        listen();
+    });
+    document.addEventListener("mozfullscreenchange", function (e) {
+        listen();
+    });
+    document.addEventListener("webkitfullscreenchange", function (e) {
+        listen();
+    });
+    document.addEventListener("msfullscreenchange", function (e) {
+        listen();
+    });
+}
 /**
  * 浏览器判断是否全屏
  */
@@ -78,14 +116,14 @@ export const findParent = (menu, id) => {
 /**
  * 总体路由处理器
  */
-export const resolveUrlPath = (url) => {
+export const resolveUrlPath = (url, name) => {
 
     let reqUrl = url;
     if (url.indexOf("#") != -1 && url.indexOf("http") == -1) {
         const port = reqUrl.substr(reqUrl.indexOf(':'));
-        reqUrl = `/myiframe/urlPath?src=${baseUrl}${port}${reqUrl.replace('#', '').replace(port, '')}`;
+        reqUrl = `/myiframe/urlPath?src=${baseUrl}${port}${reqUrl.replace('#', '').replace(port, '')}}&name=${name}`;
     } else if (url.indexOf("http") != -1) {
-        reqUrl = `/myiframe/urlPath?src=${reqUrl}`;
+        reqUrl = `/myiframe/urlPath?src=${reqUrl}&name=${name}`;
     } else {
         reqUrl = `${reqUrl}`;
     }

src/views/dashboard/index.vue

@@ -2,22 +2,21 @@
   <div class="dashboard-container">
     <div class="dashboard-text">欢迎登录</div>
     <div class="dashboard-text">用户名：{{name}}</div>
-    <div class="dashboard-text">角色名：<span v-for='role in roles' :key='role'>{{role}}</span></div>
+    <div class="dashboard-text">角色名：
+      <span v-for='role in roles' :key='role'>{{role}}</span>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'dashboard',
+  name: "dashboard",
   computed: {
-    ...mapGetters([
-      'name',
-      'roles'
-    ])
+    ...mapGetters(["name", "roles"])
   }
-}
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>