修改部分页面链式异步加载和主题功能增加，同步若干avue组件部分

index.html

@@ -8,7 +8,7 @@
 	<meta name="apple-mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 	<meta name="format-detection" content="telephone=no">
-	<link rel="stylesheet" href="/static/cdn/element-ui/2.0.5/theme-chalk/index.css">
+	<link rel="stylesheet" href="/static/cdn/element-ui/2.3.6/theme-chalk/index.css">
 	<link rel="stylesheet" href="/static/cdn/animate/3.5.2/animate.css">
 	<link rel="stylesheet" href="/static/cdn/iconfont/1.0.0/index.css">
 	<title>Pig 微服务快速开发框架</title>
@@ -23,8 +23,8 @@
 	<script src="/static/cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script>
 	<script src="/static/cdn/vue-router/3.0.1/vue-router.js" charset="utf-8"></script>
 	<script src="/static/cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
-	<script src="/static/cdn/element-ui/2.0.5/index.js" charset="utf-8"></script>
+	<script src="/static/cdn/element-ui/2.3.6/index.js" charset="utf-8"></script>
 	<script src="/static/util/screen.js" charset="utf-8"></script>
 </body>
 
-</html>
+</html>

package.json

@@ -17,7 +17,7 @@
     "axios": "^0.16.2",
     "compression": "^1.6.2",
     "cross-env": "^3.2.4",
-    "element-ui": "^2.0.5",
+    "element-ui": "^2.3.6",
     "es6-promise": "^4.1.1",
     "express": "^4.14.1",
     "extract-text-webpack-plugin": "^2.1.2",

src/filters/index.js

@@ -1,5 +1,3 @@
-import { vaildUtil } from "../util/yun";
-
 function pluralize(time, label) {
   if (time === 1) {
     return time + label

src/page/index/sidebar/sidebarItem.vue

@@ -8,7 +8,7 @@
       <el-submenu v-else :index="filterPath(item.name,index)" :key="item.name">
         <template slot="title">
           <i :class="item.icon"></i>
-          <span slot="title" :class="{display:!show}">{{item.label}}</span>
+          <span slot="title" :class="{'el-menu--display':!show}">{{item.label}}</span>
         </template>
         <template v-for="(child,cindex) in item.children">
           <el-menu-item :index="filterPath(child.path,cindex)" @click="open(child)" v-if="child.children.length==0" :key="cindex">
@@ -52,9 +52,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.display,
-.display + .el-submenu__icon-arrow {
-  display: none;
-}
+
 </style>
 

src/page/index/top/index.vue

@@ -1,22 +1,27 @@
 <template>
-  <div class="header">
-    <div class="header-button is-left">
+  <div class="top">
+    <div class="top-button is-left">
       <top-logo></top-logo>
       <div class="tags-breadcrumb">
         <i class="icon-navicon tag-collapse" :class="[{ 'tag-collapse_right': isCollapse }]" @click="showCollapse"></i>
       </div>
     </div>
-    <h1 class="header-title">
+    <h1 class="top-title">
       <topMenu></topMenu>
     </h1>
-    <div class="header-button is-right">
+    <div class="top-button is-right">
+      <el-tooltip class="item" effect="dark" content="换肤" placement="bottom">
+        <span class="top-item">
+          <top-theme></top-theme>
+        </span>
+      </el-tooltip>
       <el-tooltip class="item" effect="dark" content="锁屏" placement="bottom">
-        <span class="header-item">
+        <span class="top-item">
           <top-lock></top-lock>
         </span>
       </el-tooltip>
       <el-tooltip class="item" effect="dark" :content="isFullScren?'退出全屏':'全屏'" placement="bottom">
-        <span class="header-item">
+        <span class="top-item">
           <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'" @click="handleScreen"></i>
         </span>
       </el-tooltip>
@@ -42,7 +47,7 @@
         </el-dropdown-menu>
       </el-dropdown>
       <el-tooltip class="item" effect="dark" content="用户头像" placement="bottom">
-        <img class="header-userImg" :src="userInfo.avatar">
+        <img class="top-userImg" :src="userInfo.avatar">
       </el-tooltip>
     </div>
   </div>
@@ -53,8 +58,9 @@ import { fullscreenToggel, listenfullscreen } from "@/util/util";
 import topLogo from "./top-logo";
 import topLock from "./top-lock";
 import topMenu from "./top-menu";
+import topTheme from "./top-theme";
 export default {
-  components: { topLock, topLogo, topMenu },
+  components: { topLock, topLogo, topMenu, topTheme },
   name: "top",
   data() {
     return {};

src/page/index/top/top-theme.vue

@@ -0,0 +1,154 @@
+<template>
+    <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme"></el-color-picker>
+</template>
+
+<script>
+const version = require("element-ui/package.json").version; // element-ui version from node_modules
+const ORIGINAL_THEME = "#409EFF"; // default color
+
+export default {
+  data() {
+    return {
+      chalk: "",
+      theme: ORIGINAL_THEME
+    };
+  },
+  watch: {
+    theme(val, oldVal) {
+      if (typeof val !== "string") return;
+      const themeCluster = this.getThemeCluster(val.replace("#", ""));
+      const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
+      console.log(themeCluster, originalCluster);
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(
+            ORIGINAL_THEME.replace("#", "")
+          );
+          const newStyle = this.updateStyle(
+            this[variable],
+            originalCluster,
+            themeCluster
+          );
+
+          let styleTag = document.getElementById(id);
+          if (!styleTag) {
+            styleTag = document.createElement("style");
+            styleTag.setAttribute("id", id);
+            document.head.appendChild(styleTag);
+          }
+          styleTag.innerText = newStyle;
+        };
+      };
+
+      const chalkHandler = getHandler("chalk", "chalk-style");
+
+      if (!this.chalk) {
+        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
+        this.getCSSString(url, chalkHandler, "chalk");
+      } else {
+        chalkHandler();
+      }
+
+      const styles = [].slice
+        .call(document.querySelectorAll("style"))
+        .filter(style => {
+          const text = style.innerText;
+          return (
+            new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
+          );
+        });
+      styles.forEach(style => {
+        const { innerText } = style;
+        if (typeof innerText !== "string") return;
+        style.innerText = this.updateStyle(
+          innerText,
+          originalCluster,
+          themeCluster
+        );
+      });
+      this.$message({
+        message: "换肤成功",
+        type: "success"
+      });
+    }
+  },
+
+  methods: {
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style;
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
+      });
+      return newStyle;
+    },
+
+    getCSSString(url, callback, variable) {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
+          callback();
+        }
+      };
+      xhr.open("GET", url);
+      xhr.send();
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        if (tint === 0) {
+          // when primary color is in its rgb space
+          return [red, green, blue].join(",");
+        } else {
+          red += Math.round(tint * (255 - red));
+          green += Math.round(tint * (255 - green));
+          blue += Math.round(tint * (255 - blue));
+
+          red = red.toString(16);
+          green = green.toString(16);
+          blue = blue.toString(16);
+
+          return `#${red}${green}${blue}`;
+        }
+      };
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        red = Math.round((1 - shade) * red);
+        green = Math.round((1 - shade) * green);
+        blue = Math.round((1 - shade) * blue);
+
+        red = red.toString(16);
+        green = green.toString(16);
+        blue = blue.toString(16);
+
+        return `#${red}${green}${blue}`;
+      };
+
+      const clusters = [theme];
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
+      }
+      clusters.push(shadeColor(theme, 0.1));
+      return clusters;
+    }
+  }
+};
+</script>
+
+<style>
+.theme-picker .el-color-picker__trigger {
+  vertical-align: middle;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+</style>

src/permission.js

@@ -3,7 +3,6 @@ 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'

src/router/router.js

@@ -2,7 +2,6 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import { routerMode } from '@/config/env';
 import store from '@/store'
-import { getStore, getSessionStore, vaildUtil } from '@/util/yun'
 
 import Layout from '@/page/index/'
 import viewRouter from './_router'

src/styles/element-ui.scss

@@ -3,13 +3,12 @@
     font-size: 12px;
     line-height: 28px;
 }
-.el-select,.el-date-editor.el-input, .el-date-editor.el-input__inner,.el-cascader,.el-input-number{
-    width: 100%;
+.el-loading-text{
+    text-align: center;
 }
-.el-col{
-    min-height: 63px;
-}
-.display,
-.display + .el-submenu__icon-arrow {
-  display: none;
+
+
+.el-menu--display,
+.el-menu--display + .el-submenu__icon-arrow {
+display: none;
 }

src/styles/top.scss

@@ -1,43 +1,38 @@
-.header {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    background-color: #fff;
-    border-bottom:2px solid $menuBg;
-    color: #333;
-    box-sizing: border-box;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    font-size: 18px;
-    height: 60px;
-    line-height: 1;
-    padding: 0 10px;
-    white-space: nowrap;
-  }
-  
-  .header-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: inherit;
-    font-weight: 400;
-    flex: 1;
-  }
- 
-  .header-userImg{
-    margin: 0 3px 0 10px;
-    padding: 2px;
-    width: 35px;
-    height:35px;
-    border-radius: 100%;
-    box-sizing: border-box;
-    border:1px solid #eee;
-  }
-  .header-button {
-    display: flex;
-    align-items: center;
-  }
-  .header-button>.header-item{
-    margin-right: 12px;
-  }
+.top {
+  align-items: center;
+  background-color: #fff;
+  border-bottom:2px solid $menuBg;
+  color: #333;
+  display: flex;
+  font-size: 18px;
+  height: 60px;
+  line-height: 1;
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
+.top-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  font-weight: 400;
+  flex: 1;
+}
+
+.top-userImg{
+  margin: 0 3px 0 10px;
+  padding: 2px;
+  width: 35px;
+  height:35px;
+  border-radius: 100%;
+  box-sizing: border-box;
+  border:1px solid #eee;
+}
+.top-button {
+  display: flex;
+  align-items: center;
+}
+.top-button>.top-item{
+  margin-right: 12px;
+}

src/util/yun.js

@@ -1,313 +0,0 @@
-import { Notification, Message } from 'element-ui';
-/**
- * 获取url参数
- */
-export const GetQueryString = (url, name) => {
-	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
-	var r = url.substr(url.indexOf('?') + 1).match(reg);
-	if (r != null) return unescape(r[2]);
-	return null;
-}
-export const parseParam = (param) => {
-
-	let paramStr = "";
-
-	if (param instanceof Object) {
-
-		for (let o in param) {
-			if (!vaildUtil.ifnull(param[o])) {
-				paramStr = `${paramStr}${o}=${param[o]}&`
-			}
-
-		}
-
-	}
-
-	return paramStr.substr(0, paramStr.length - 1);
-
-};
-
-/**
- * 弹窗
- */
-export const messageBox = function (conf) {
-	if (!(conf instanceof Object)) {
-		Message({
-			title: '错误提示',
-			message: conf,
-			type: 'info',
-		})
-	} else if (conf.type == 1) {
-		Notification({
-			title: conf.title,
-			message: conf.msg,
-			type: conf.boxtype,
-		})
-	} else {
-		Message({
-			title: conf.title,
-			message: conf.msg,
-			type: conf.boxtype,
-		})
-	}
-}
-
-/**
- * 计算年的时间差
- */
-export const nowCovyearOld = function (date) {
-	return dateFormat(new Date(), 'yyyy') - date;
-}
-/**
- * 计算到当年年份的时间差
- */
-export const nowCri = function (date) {
-	if (new Date().getTime() - new Date(date).getTime() < 0) return true;
-	return false;
-}
-/**
- * 计算年俩个年份的时间差
- */
-export const dateCri = function (date1, date2) {
-	if (new Date(date2).getTime() - new Date(date1).getTime() < 0) return true;
-	return false;
-}
-//根据个数返回相应的数组
-export const getArraynum = function (len) {
-	let list = [];
-	for (let i = 1; i <= len; i++) {
-		list.push(i);
-	}
-	return list;
-}
-/**
- * 根据身份证计算年龄，性别
- */
-export const IdCard = function (UUserCard, num) {
-	if (UUserCard.length == 18) {
-		if (num == 1) {
-			//获取出生日期
-			let birth = ''
-			birth = UUserCard.substring(6, 10) + "-" + UUserCard.substring(10, 12) + "-" + UUserCard.substring(12, 14);
-			return birth;
-		}
-		if (num == 2) {
-			//获取性别
-			if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
-				//男
-				return "1";
-			} else {
-				//女
-				return "2";
-			}
-		}
-		if (num == 3) {
-			//获取年龄
-			var myDate = new Date();
-			var month = myDate.getMonth() + 1;
-			var day = myDate.getDate();
-			var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
-			if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
-				age++;
-			}
-			return age;
-		}
-	}
-	return '';
-
-}
-/**
- * 根据传入的list和制定的属性求和
- */
-export const calcListnum = function (list, value) {
-	let num = 0;
-	for (let i = 0; i < list.length; i++) {
-		var o = list[i];
-		num = num + Number(o[value]);
-	}
-	return Number(num);
-}
-/**
- * Object的属性致空，但是属性存在
- */
-export const setObjectnull = function (obj) {
-	for (var o in obj) {
-		obj[o] = "";
-	}
-	return obj;
-}
-/**
- * Object的属性为null的至为空字符串
- */
-export const setObjectstr = function (obj) {
-	for (var o in obj) {
-		if (obj[o] == null || obj[o] == 'null') {
-			obj[o] = "";
-		}
-	}
-	return obj;
-}
-/**
- * 字符串数组转对象数组
- */
-export const strCovArray = function () {
-	let list = [];
-	for (let i = 0; i < arguments.length; i++) {
-		const str = arguments[i];
-		if (!!str) {
-			list.push(str);
-		}
-	}
-	return list;
-}
-/**
- * JSON格式化
- */
-export const formatJson = function (json, options) {
-	var reg = null,
-		formatted = '',
-		pad = 0,
-		PADDING = '    ';
-	options = options || {};
-	options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
-	options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
-	if (typeof json !== 'string') {
-		json = JSON.stringify(json);
-	} else {
-		try {
-			json = JSON.parse(json);
-		} catch (e) {
-			new Error('不是JSON对象');
-		}
-
-		json = JSON.stringify(json);
-	}
-	reg = /([\{\}])/g;
-	json = json.replace(reg, '\r\n$1\r\n');
-	reg = /([\[\]])/g;
-	json = json.replace(reg, '\r\n$1\r\n');
-	reg = /(\,)/g;
-	json = json.replace(reg, '$1\r\n');
-	reg = /(\r\n\r\n)/g;
-	json = json.replace(reg, '\r\n');
-	reg = /\r\n\,/g;
-	json = json.replace(reg, ',');
-	if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
-		reg = /\:\r\n\{/g;
-		json = json.replace(reg, ':{');
-		reg = /\:\r\n\[/g;
-		json = json.replace(reg, ':[');
-	}
-	if (options.spaceAfterColon) {
-		reg = /\:/g;
-		json = json.replace(reg, ':');
-	}
-	(json.split('\r\n')).forEach(function (node, index) {
-		var i = 0,
-			indent = 0,
-			padding = '';
-
-		if (node.match(/\{$/) || node.match(/\[$/)) {
-			indent = 1;
-		} else if (node.match(/\}/) || node.match(/\]/)) {
-			if (pad !== 0) {
-				pad -= 1;
-			}
-		} else {
-			indent = 0;
-		}
-
-		for (i = 0; i < pad; i++) {
-			padding += PADDING;
-		}
-
-		formatted += padding + node + '\r\n';
-		pad += indent;
-	});
-	return formatted;
-}
-
-
-
-/**
- * 查找字符串是否存在
- */
-export const findStrArray = (dic, value) => {
-	if (!vaildUtil.ifnull(dic)) {
-		for (let i = 0; i < dic.length; i++) {
-			if (dic[i] == value) {
-				return i;
-				break;
-			}
-		}
-	}
-	return -1;
-}
-/**
- * 查找对象数组是否存在
- */
-export const findObjArray = (dic, obj, v1, v2) => {
-	v1 = v1 || 'value';
-	v2 = v2 || 'value';
-	for (let i = 0; i < dic.length; i++) {
-		let o = dic[i];
-		if (o[v1] == obj[v2]) {
-			return i;
-			break;
-		}
-	}
-	return -1;
-}
-/**
- * 根据字典的值取缓存里面的
- */
-export const getDicvalue = (obj) => {
-	var flag = 0;
-	if (obj == 'Area_CD1' || obj == 'INDUSTRY_CLASS') {
-		flag = 1000;
-	}
-	if (localStorage.getItem(obj) == null) {
-		return eval(obj);
-	} else {
-		return JSON.parse(localStorage.getItem(obj));
-	}
-}
-/**
- * 验证俩个对象的属性值是否相等
- */
-export const validObj = (olds, news) => {
-	var flag = true;
-	for (var obj in news) {
-		if (news[obj] != olds[obj]) {
-			flag = false;
-			break;
-		}
-	}
-	return flag;
-}
-/**
- * 数据转换器
- */
-export const dataFormat = (data, type) => {
-	data = getSessionStore(data) || getStore(data) || null;
-	if (vaildUtil.ifnull(data)) return undefined;
-	if (type == 1) {	//转json对象
-		return JSON.parse(data);
-	} else if (type == 2) {//转Boolean对象
-		return eval(data);
-	} else {
-		return data;
-	}
-}
-
-//删除数组制定元素
-export const removeByValue = (arr, val) => {
-	for (var i = 0; i < arr.length; i++) {
-		if (arr[i] == val) {
-			arr.splice(i, 1);
-			return arr;
-			break;
-		}
-	}
-}
-

src/views/admin/log/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container calendar-list-container">
     <div class="filter-container">
-      <el-select style="width: 200px;" v-model="listQuery.type" filterable placeholder="请选择">
+      <el-select style="width: 200px;" class="filter-item" v-model="listQuery.type" filterable placeholder="请选择">
         <el-option v-for="item in dicts" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select>
@@ -158,3 +158,7 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/admin/role/index.vue

@@ -245,16 +245,18 @@ export default {
       });
     },
     handlePermission(row) {
-      fetchRoleTree(row.roleCode).then(response => {
-        this.checkedKeys = response.data;
-      });
-      fetchTree().then(response => {
-        this.treeData = response.data;
-        this.dialogStatus = "permission";
-        this.dialogPermissionVisible = true;
-        this.roleId = row.roleId;
-        this.roleCode = row.roleCode;
-      });
+      fetchRoleTree(row.roleCode)
+        .then(response => {
+          this.checkedKeys = response.data;
+          return fetchTree();
+        })
+        .then(response => {
+          this.treeData = response.data;
+          this.dialogStatus = "permission";
+          this.dialogPermissionVisible = true;
+          this.roleId = row.roleId;
+          this.roleCode = row.roleCode;
+        });
     },
     handleDept() {
       fetchDeptTree().then(response => {
@@ -330,18 +332,20 @@ export default {
     updatePermession(roleId, roleCode) {
       permissionUpd(roleId, this.$refs.menuTree.getCheckedKeys()).then(() => {
         this.dialogPermissionVisible = false;
-        fetchTree().then(response => {
-          this.treeData = response.data;
-        });
-        fetchRoleTree(roleCode).then(response => {
-          this.checkedKeys = response.data;
-        });
-        this.$notify({
-          title: "成功",
-          message: "修改成功",
-          type: "success",
-          duration: 2000
-        });
+        fetchTree()
+          .then(response => {
+            this.treeData = response.data;
+            return fetchRoleTree(roleCode);
+          })
+          .then(response => {
+            this.checkedKeys = response.data;
+            this.$notify({
+              title: "成功",
+              message: "修改成功",
+              type: "success",
+              duration: 2000
+            });
+          });
       });
     },
     resetTemp() {