main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue';
// import App from './App';
// import router from './router';
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// import store from '@/store/index';
// Vue.config.productionTip = false;
// import Base from './utils/base.js' //引入封装公共方法
// import './directive/directive.js' //引入全局指令
// import axios from 'axios'; //引入axios
// import qs from 'qs'; //引入qs模块，用来序列化post类型的数据
// Vue.use(ElementUI);
// Vue.use(Base)
// let isFilterApi = process.env.NODE_ENV == 'development' ? false : true; //线上环境还是本地环境
// Vue.prototype.$axios = axios.create({
// baseURL: '',
// timeout: 300000, //超时设置
// transformRequest: [function (data) {
// return data;
// }],
// transformResponse: [function (data) {
// // 对 data 进行任意转换处理
// return data;
// }]
// });
// /**
// *
// * 1.发送json格式数据：
// * {"Content-type": "application/json; charset=utf-8"}
// * JSON.stringify(data)
// * 2.发送表单数据：
// * {"Content-type": "application/x-www-form-urlencoded; charset=utf-8"}
// * data:{
// * key:value
// * }
// * 3.发送纯文本（默认值）：
// * {"Content-type": "text/plain; charset=utf-8"}
// * 4.发送html文本：
// * {"Content-type": "text/html; charset=utf-8"}
// * 5.上传文件：
// * { "Content-Type": "multipart/form-data" }
// *
// *
// */
// Vue.prototype.$http = function (option) {
// store.commit('openLoading');
// //更改headers请求格式
// this.$axios.defaults.headers.post['Content-Type'] = option.headers ? option.headers : "application/x-www-form-urlencoded; charset=utf-8";
// // this.$axios.defaults.headers.delete['Content-Type'] = option.headers?option.headers:"application/json; charset=utf-8";
// if (option.responseType == 'file') {
// this.$axios.defaults.responseType = 'arraybuffer';
// } else {
// delete this.$axios.defaults.responseType;
// }
// if (option.url.indexOf('/member/login') == -1) {
// // this.$axios.defaults.headers.common['token'] = JSON.parse(localStorage.getItem('userInfo')).data.token;
// this.$axios.defaults.headers.common['Authorization'] = JSON.parse(localStorage.getItem('userInfo')).datas.token;
// } else {
// // delete this.$axios.defaults.headers.common['token'];
// delete this.$axios.defaults.headers.common['Authorization'];
// }
// //如果登录接口中 userType=0，则必须传tspId字段
// //用户数据区分属于哪个服务商
// let data = option.data;
// if (option.headers && option.headers.indexOf('application/json') > -1) {
// data = JSON.stringify(data);
// } else if (option.headers && option.headers.indexOf('multipart/form-data') > -1) {
// //上传文件
// data = data; //数据格式不变
// } else {
// data = qs.stringify(data);
// }
// let url = '';
// if ((option.method && option.method.toLowerCase() == 'get') || (option.method && option.method.toLowerCase() == 'delete')) {
// url = option.url + '?' + this.$getStrSort(option.data);
// } else {
// url = option.url;
// }
// //如果是门户系统单点登录过来，则在每一个请求地址上加上‘utk=val’，否则不需要
// url = sessionStorage.getItem('utk') ? (url.indexOf('?') > -1 ? (url + '&utk=' + sessionStorage.getItem('utk')) : (url + '?utk=' + sessionStorage.getItem('utk'))) : url;
// var curWwwPath = window.document.location.href;
// var pathName = window.document.location.pathname;
// var pos = curWwwPath.indexOf(pathName);
// var localhostPath = curWwwPath.substring(0, pos);
// this.$axios({
// method: option.method ? option.method : 'post',
// url: option.noservices ? url : (isFilterApi ? (url.replace("/api", localhostPath)) : url),
// data: data,
// dataType: option.dataType ? option.dataType : "json",
// }).then(obj => {
// if (option.nostatus) {
// //如果返回值没有任何状态
// option.success && option.success(obj);
// store.commit('closeLoading', 'success');
// return;
// }
// let datas = '';
// if (option.responseType == 'file' || (typeof obj.data == 'string' && !JSON.parse(obj.data).code)) {
// //数据流
// option.success && option.success(obj.data);
// store.commit('closeLoading', 'success');
// return;
// }
// switch (typeof obj.data == 'string' && Number(JSON.parse(obj.data).code)) {
// case 100:
// //请求成功
// if (obj.data) {
// datas = JSON.parse(obj.data);
// }
// option.success && option.success(datas);
// store.commit('closeLoading', 'success');
// break;
// case 101:
// //请求成功---门户过来，但属于未登录用户，需返回门户登录页
// store.commit('closeLoading', 'success');
// sessionStorage.removeItem('utk');
// window.location.href = "http://me.cofcotrading.com/";
// break;
// case 1:
// //请求成功，返回警告
// if (obj.data) {
// datas = JSON.parse(obj.data);
// }
// store.commit('closeLoading', 'error');
// if (option.error) {
// option.error(JSON.parse(obj.data));
// } else {
// this.$message({
// message: JSON.parse(obj.data).msg,
// showClose: true,
// center: true,
// type: 'warning'
// });
// }
// break;
// default:
// //请求不成功
// option.error ? option.error(JSON.parse(obj.data)) : this.$message({
// message: JSON.parse(obj.data).msg,
// showClose: true,
// center: true,
// type: 'error'
// });
// store.commit('closeLoading', 'error');
// break;
// }
// //消除loading
// setTimeout(function () {
// if (document.getElementsByClassName('el-loading-mask')[0]) {
// for (let i = 0; i < document.getElementsByClassName('el-loading-mask').length; i++) {
// document.getElementsByClassName('el-loading-mask')[i].style.display = 'none';
// }
// }
// }, 1000);
// }).catch(err => {
// console.error(err);
// if (err.response && err.response.data && JSON.parse(err.response.data).success === false) {
// this.$message({
// message: JSON.parse(err.response.data).message.indexOf('File is not exist') > -1 ? '删除失败，文件不存在！' : JSON.parse(err.response.data).message,
// showClose: true,
// center: true,
// type: 'warning'
// });
// store.commit('closeLoading', 'error');
// return;
// }
// if (err.code == "ECONNABORTED" && err.config.url.indexOf('/member/login') == -1) {
// this.$message({
// type: 'warning',
// showClose: true,
// message: '请求超时'
// });
// } else if (err.response && err.response.status && err.config.url.indexOf('/member/login') == -1) {
// switch (Number(err.response.status)) {
// case 400:
// this.$message({
// type: 'warning',
// showClose: true,
// message: '请求无效！'
// });
// break;
// case 401:
// //token超时
// this.$message({
// type: 'warning',
// showClose: true,
// message: '登录超时，已自动退出登录！'
// });
// this.$loginOut();
// break;
// case 404:
// this.$message({
// type: 'error',
// showClose: true,
// message: '没找到该接口，请联系管理员'
// });
// break;
// case 500:
// if (err.response.message && err.response.message.indexOf('Read timed out') > -1) {
// this.$message({
// type: 'error',
// showClose: true,
// message: '编码超时'
// });
// } else if (err.response.data && JSON.parse(err.response.data).errorCode == '3300') {
// this.$message({
// type: 'error',
// showClose: true,
// message: '服务异常'
// });
// } else if (err.response.data && JSON.parse(err.response.data).message.indexOf('Read timed out') > -1) {
// this.$message({
// type: 'error',
// showClose: true,
// message: '网关超时'
// });
// } else {
// this.$message({
// type: 'error',
// showClose: true,
// message: '非常抱歉，服务器出错了'
// });
// }
// break;
// case 504:
// this.$message({
// type: 'error',
// showClose: true,
// message: '非常抱歉，服务已断开'
// });
// break;
// default:
// if (err.response && err.response.errorCode == '3300') {
// this.$message({
// type: 'error',
// showClose: true,
// message: '网关超时'
// });
// } else {
// option.error ? option.error(err.message ? err.message : err) : console.error(err.message);
// }
// }
// } else {
// //给登录接口用，因为登录接口提示框不一样
// option.error ? option.error(err.message ? err.message : err) : console.error(err.message);
// }
// //消除loading
// setTimeout(function () {
// if (document.getElementsByClassName('el-loading-mask')[0]) {
// for (let i = 0; i < document.getElementsByClassName('el-loading-mask').length; i++) {
// document.getElementsByClassName('el-loading-mask')[i].style.display = 'none';
// }
// }
// }, 1000);
// store.commit('closeLoading', 'error');
// })
// };
// /**
// *
// * 多请求axios
// * 请求都完成后，再运行func函数；
// *
// * arr:为返回请求结果的函数组成的数组
// * func:为全部请求结束后，执行的函数
// *
// */
// //如果我们需用在两个接口同时完成后在执行一些逻辑,我们可以使用axios.all处理并发请求:
// // Vue.prototype.$httpAll = function(arr,func){
// // this.$axios.all(arr)
// // .then(axios.spread(func));
// // }
// /**
// *
// * 请求例子：
// * function getUserAccount() {
// * return axios.get('/user/12345');
// * }
// *
// * function getUserPermissions() {
// * return axios.get('/user/12345/permissions');
// * }
// *
// * this.$httpAll([getUserAccount(),getUserPermissions()],function(acct, perms){
// * console.log()
// * });
// *
// */
// // http request 拦截器
// // 加Authorization
// // let instance = Vue.prototype.$axios;
// // instance.interceptors.request.use(
// // config => {
// // if (localStorage.getItem('hasLogin')) {
// // 如果登录成功后，所有的请求，一律判断是否存在Authorization，如果存在的话，则每个http header都加上Authorization
// // config.headers.Authorization = `Authorization ${JSON.parse(localStorage.getItem('userInfo')).data.Authorization}`;
// // }
// // return config;
// // },
// // err => {
// // return Promise.reject(err);
// // });
// // http response 拦截器
// // instance.interceptors.response.use(
// // response => {
// // return response;
// // },
// // error => {
// // if (error.response) {
// // switch (error.response.status) {
// // case 401:
// // // 返回 401 清除Authorization信息并跳转到登录页面
// // localStorage.removeItem('hasLogin');
// // router.replace({
// // path: '/login'
// // })
// // }
// // }
// // return Promise.reject(error.response.data) // 返回接口返回的错误信息
// // }
// // );
// //
// /*================================TANXIN-AJAX======START=================================*/
// const axios2 = axios.create({
// timeout: 60000,
// retry: 4,
// retryDelay: 300,
// });
// /*
// * 请求拦截器
// * */
// axios2.interceptors.request.use((config) => {
// // store.commit('fucaigaunli/set_loading_state',true);
// store.commit('openLoading');
// //对已经登录的添加token
// if (sessionStorage.getItem('hasLogin')) {
// // 如果登录成功后，所有的请求，一律判断是否存在token，如果存在的话，则每个http header都加上token
// config.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('userInfo')).datas.token}`;
// }
// return config;
// }, (err) => {
// return Promise.reject(err);
// });
// /*
// * 响应拦截器
// * */
// axios2.interceptors.response.use((response) => {
// store.commit('closeLoading', 'success');
// // console.table(response);
// let data = response.data;
// // 对响应数据做点什么
// if (data.code && (data.code != "100")) {
// Vue.prototype.$message({
// type: 'error',
// message: data.msg || "请求出错了"
// });
// }
// return Promise.resolve(data);
// }, (error) => {
// store.commit('closeLoading', 'error');
// console.log(error);
// // 局部保存config
// let config = error.config;
// // 超时的处理
// if ((error.message && error.message.toLocaleLowerCase().indexOf("timeout") > -1) || (error.response && error.response.data && error.response.data.message.toLowerCase().indexOf("read timed out") > -1)) {
// // 设置超时数目
// config.__retryCount = config.__retryCount || 0;
// if (config.__retryCount >= config.retry) {
// Vue.prototype.$message({
// type: 'error',
// message: "请求超时,请刷新页面重新请求"
// });
// return Promise.reject(error);
// }
// config.__retryCount += 1;
// let backoff = new Promise(resolve => {
// setTimeout(() => resolve(), config.retryDelay || 1);
// });
// return backoff.then(() => axios2(config));
// } else {
// // 对响应错误做点什么
// switch (error.response.status) {
// //处理后台响应的错误
// case 401:
// sessionStorage.removeItem('hasLogin');
// router.replace({
// path: '/login'
// });
// return;
// case 404:
// Vue.prototype.$message({
// type: 'error',
// message: "接口不存在，请联系管理员"
// });
// return Promise.reject(error);
// case 500:
// Vue.prototype.$message({
// type: 'error',
// message: "服务器报错啦，请联系管理员",
// });
// return Promise.reject(error);
// default:
// Vue.prototype.$message({
// type: 'error',
// message: '未知错误',
// });
// return Promise.reject(error);
// }
// }
// return Promise.reject(error);
// });
// Vue.prototype.$ajax = axios2;
// /*====================================TANXIN-AJAX===END================================*/
// /* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// store,
// template: '<App/>',
// components: { App }
// });
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUi from 'element-ui'
import VueRouter from 'vue-router'
import 'lib-flexible'
import "babel-polyfill"
import Vuex from 'vuex'
// import store from './store/store.js'
import store from '@/store/index';
import 'element-ui/lib/theme-chalk/index.css'
// import './assets/iconfont/iconfont.css'
import Base from './utils/base.js' //引入封装公共方法
import './directive/directive.js' //引入全局指令
import router from './router'
import axios from 'axios'
// import md5 from 'js-md5';
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(ElementUi)
Vue.use(Base)
// require('./mock.js')
import filters from './filters/filters.js'
// 导出的是对象，可以直接通过 key 和 value 来获得过滤器的名和过滤器的方法
for (let key in filters) {
Vue.filter(key, filters[key])
}
// Vue.prototype.$md5 = md5;
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
var qs = require('querystring');
//决定是否过滤URL中的/api
let isFilterApi = process.env.NODE_ENV == 'development' ? false : true; //线上环境还是本地环境
Vue.prototype.$axios = axios.create({
baseURL: '',
timeout: 300000, //超时设置
transformRequest: [function (data) {
return data;
}],
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}]
});
/* Vue.directive('loadmore', {
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
let sign = 100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign) {
binding.value()
}
})
}
}); */
/**
*
* 1.发送json格式数据：
* {"Content-type": "application/json; charset=utf-8"}
* JSON.stringify(data)
* 2.发送表单数据：
* {"Content-type": "application/x-www-form-urlencoded; charset=utf-8"}
* data:{
* key:value
* }
* 3.发送纯文本（默认值）：
* {"Content-type": "text/plain; charset=utf-8"}
* 4.发送html文本：
* {"Content-type": "text/html; charset=utf-8"}
* 5.上传文件：
* { "Content-Type": "multipart/form-data" }
*
*
*/
Vue.prototype.$http = function (option) {
// debugger
store.commit('openLoading');
//更改headers请求格式
this.$axios.defaults.headers.post['Content-Type'] = option.headers ? option.headers : "application/x-www-form-urlencoded; charset=utf-8";
// this.$axios.defaults.headers.delete['Content-Type'] = option.headers?option.headers:"application/json; charset=utf-8";
if (option.responseType == 'file') {
this.$axios.defaults.responseType = 'arraybuffer';
} else {
delete this.$axios.defaults.responseType;
}
if (option.url.indexOf('/capthca') == -1 && option.url.indexOf('/verify') == -1 && option.url.indexOf('/login') == -1 && option.url.indexOf('/register') == -1 && option.url.indexOf('/register_l') == -1) {
// this.$axios.defaults.headers.common['token'] = JSON.parse(localStorage.getItem('userInfo')).data.token;
if (sessionStorage.getItem('hasLogin')) {
this.$axios.defaults.headers.common['Authorization'] = JSON.parse(localStorage.getItem('userInfo')).datas.token;
} else {
//临时注释三天内免登陆机制，使用永久免登录仅供测试
// if (!localStorage.getItem('remainLoginTime')||!(Date.now()<localStorage.getItem('remainLoginTime'))){
// localStorage.removeItem('remainLoginTime');
// localStorage.removeItem('userInfo');
// }else{
this.$axios.defaults.headers.common['Authorization'] = JSON.parse(localStorage.getItem('userInfo')).datas.token;
// }
}
} else {
// delete this.$axios.defaults.headers.common['token'];
delete this.$axios.defaults.headers.common['Authorization'];
}
//如果登录接口中 userType=0，则必须传tspId字段
//用户数据区分属于哪个服务商
let data = option.data;
if (option.headers && option.headers.indexOf('application/json') > -1) {
data = JSON.stringify(data);
} else if (option.headers && option.headers.indexOf('multipart/form-data') > -1) {
//上传文件
data = data; //数据格式不变
} else {
data = qs.stringify(data);
}
let url = '';
if ((option.method && option.method.toLowerCase() == 'get') || (option.method && option.method.toLowerCase() == 'delete')) {
url = option.url + '?' + this.$getStrSort(option.data);
} else {
url = option.url;
}
console.log("url,", url)
// console.log("option,", option)
//如果是门户系统单点登录过来，则在每一个请求地址上加上‘utk=val’，否则不需要
url = sessionStorage.getItem('utk') ? (url.indexOf('?') > -1 ? (url + '&utk=' + sessionStorage.getItem('utk')) : (url + '?utk=' + sessionStorage.getItem('utk'))) : url;
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
console.log("curWwwPath", curWwwPath)
console.log("pathName", pathName)
console.log("pos", pos)
console.log("localhostPath", localhostPath)
this.$axios({
method: option.method ? option.method : 'post',
url: option.noservices ? url : (isFilterApi ? (url.replace("/api", localhostPath)) : url),
data: data,
dataType: option.dataType ? option.dataType : "json",
}).then(obj => {
if (option.nostatus) {
//如果返回值没有任何状态
option.success && option.success(obj);
store.commit('closeLoading', 'success');
return;
}
let datas = '';
if (option.responseType == 'file' || (typeof obj.data == 'string' && !JSON.parse(obj.data).code)) {
//数据流
option.success && option.success(obj.data);
store.commit('closeLoading', 'success');
return;
}
switch (typeof obj.data == 'string' && Number(JSON.parse(obj.data).code)) {
case 100:
//请求成功
if (obj.data) {
datas = JSON.parse(obj.data);
}
option.success && option.success(datas);
store.commit('closeLoading', 'success');
break;
case 101:
//请求成功---门户过来，但属于未登录用户，需返回门户登录页
store.commit('closeLoading', 'success');
sessionStorage.removeItem('utk');
window.location.href = "http://me.cofcotrading.com/";
break;
case 1:
//请求成功，返回警告
if (obj.data) {
datas = JSON.parse(obj.data);
}
store.commit('closeLoading', 'error');
if (option.error) {
option.error(JSON.parse(obj.data));
} else {
this.$message({
message: JSON.parse(obj.data).msg,
showClose: true,
center: true,
type: 'warning'
});
}
break;
default:
//请求不成功
option.error ? option.error(JSON.parse(obj.data)) : this.$message({
message: JSON.parse(obj.data).msg,
showClose: true,
center: true,
type: 'error'
});
store.commit('closeLoading', 'error');
break;
}
//消除loading
setTimeout(function () {
if (document.getElementsByClassName('el-loading-mask')[0]) {
for (let i = 0; i < document.getElementsByClassName('el-loading-mask').length; i++) {
document.getElementsByClassName('el-loading-mask')[i].style.display = 'none';
}
}
}, 1000);
}).catch(err => {
console.error(err);
if (err.response && err.response.data && JSON.parse(err.response.data).success === false) {
this.$message({
message: JSON.parse(err.response.data).message.indexOf('File is not exist') > -1 ? '删除失败，文件不存在！' : JSON.parse(err.response.data).message,
showClose: true,
center: true,
type: 'warning'
});
store.commit('closeLoading', 'error');
return;
}
if (err.code == "ECONNABORTED" && err.config.url.indexOf('/member/login') == -1) {
this.$message({
type: 'warning',
showClose: true,
message: '请求超时'
});
} else if (err.response && err.response.status && err.config.url.indexOf('/member/login') == -1) {
switch (Number(err.response.status)) {
case 400:
this.$message({
type: 'warning',
showClose: true,
message: '请求无效！'
});
break;
case 401:
//token超时
this.$message({
type: 'warning',
showClose: true,
message: '登录超时，已自动退出登录！'
});
this.$loginOut();
break;
case 404:
this.$message({
type: 'error',
showClose: true,
message: '没找到该接口，请联系管理员'
});
break;
case 500:
if (err.response.message && err.response.message.indexOf('Read timed out') > -1) {
this.$message({
type: 'error',
showClose: true,
message: '编码超时'
});
} else if (err.response.data && JSON.parse(err.response.data).errorCode == '3300') {
this.$message({
type: 'error',
showClose: true,
message: '服务异常'
});
} else if (err.response.data && JSON.parse(err.response.data).message.indexOf('Read timed out') > -1) {
this.$message({
type: 'error',
showClose: true,
message: '网关超时'
});
} else {
this.$message({
type: 'error',
showClose: true,
message: '非常抱歉，服务器出错了'
});
}
break;
case 504:
this.$message({
type: 'error',
showClose: true,
message: '非常抱歉，服务已断开'
});
break;
default:
if (err.response && err.response.errorCode == '3300') {
this.$message({
type: 'error',
showClose: true,
message: '网关超时'
});
} else {
option.error ? option.error(err.message ? err.message : err) : console.error(err.message);
}
}
} else {
//给登录接口用，因为登录接口提示框不一样
option.error ? option.error(err.message ? err.message : err) : console.error(err.message);
}
//消除loading
setTimeout(function () {
if (document.getElementsByClassName('el-loading-mask')[0]) {
for (let i = 0; i < document.getElementsByClassName('el-loading-mask').length; i++) {
document.getElementsByClassName('el-loading-mask')[i].style.display = 'none';
}
}
}, 1000);
store.commit('closeLoading', 'error');
})
};
/**
*
* 多请求axios
* 请求都完成后，再运行func函数；
*
* arr:为返回请求结果的函数组成的数组
* func:为全部请求结束后，执行的函数
*
*/
//如果我们需用在两个接口同时完成后在执行一些逻辑,我们可以使用axios.all处理并发请求:
// Vue.prototype.$httpAll = function(arr,func){
// this.$axios.all(arr)
// .then(axios.spread(func));
// }
/**
*
* 请求例子：
* function getUserAccount() {
* return axios.get('/user/12345');
* }
*
* function getUserPermissions() {
* return axios.get('/user/12345/permissions');
* }
*
* this.$httpAll([getUserAccount(),getUserPermissions()],function(acct, perms){
* console.log()
* });
*
*/
// http request 拦截器
// 加Authorization
// let instance = Vue.prototype.$axios;
// instance.interceptors.request.use(
// config => {
// if (localStorage.getItem('hasLogin')) {
// 如果登录成功后，所有的请求，一律判断是否存在Authorization，如果存在的话，则每个http header都加上Authorization
// config.headers.Authorization = `Authorization ${JSON.parse(localStorage.getItem('userInfo')).data.Authorization}`;
// }
// return config;
// },
// err => {
// return Promise.reject(err);
// });
// http response 拦截器
// instance.interceptors.response.use(
// response => {
// return response;
// },
// error => {
// if (error.response) {
// switch (error.response.status) {
// case 401:
// // 返回 401 清除Authorization信息并跳转到登录页面
// localStorage.removeItem('hasLogin');
// router.replace({
// path: '/login'
// })
// }
// }
// return Promise.reject(error.response.data) // 返回接口返回的错误信息
// }
// );
//
/*================================TANXIN-AJAX======START=================================*/
const axios2 = axios.create({
timeout: 60000,
retry: 4,
retryDelay: 300,
});
/*
* 请求拦截器
* */
axios2.interceptors.request.use((config) => {
store.commit('fucaigaunli/set_loading_state', true);
store.commit('openLoading');
//对已经登录的添加token
if (sessionStorage.getItem('hasLogin')) {
// 如果登录成功后，所有的请求，一律判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.Authorization = `Bearer ${JSON.parse(localStorage.getItem('userInfo')).datas.token}`;
}
return config;
}, (err) => {
return Promise.reject(err);
});
/*
* 响应拦截器
* */
axios2.interceptors.response.use((response) => {
store.commit('closeLoading', 'success');
// console.table(response);
let data = response.data;
// 对响应数据做点什么
if (data.code && (data.code != "100")) {
Vue.prototype.$message({
type: 'error',
message: data.msg || "请求出错了"
});
}
return Promise.resolve(data);
}, (error) => {
store.commit('closeLoading', 'error');
console.log(error);
// 局部保存config
let config = error.config;
// 超时的处理
if ((error.message && error.message.toLocaleLowerCase().indexOf("timeout") > -1) || (error.response && error.response.data && error.response.data.message.toLowerCase().indexOf("read timed out") > -1)) {
// 设置超时数目
config.__retryCount = config.__retryCount || 0;
if (config.__retryCount >= config.retry) {
Vue.prototype.$message({
type: 'error',
message: "请求超时,请刷新页面重新请求"
});
return Promise.reject(error);
}
config.__retryCount += 1;
let backoff = new Promise(resolve => {
setTimeout(() => resolve(), config.retryDelay || 1);
});
return backoff.then(() => axios2(config));
} else {
// 对响应错误做点什么
switch (error.response.status) {
//处理后台响应的错误
case 401:
sessionStorage.removeItem('hasLogin');
router.replace({
path: '/login'
});
return;
case 404:
Vue.prototype.$message({
type: 'error',
message: "接口不存在，请联系管理员"
});
return Promise.reject(error);
case 500:
Vue.prototype.$message({
type: 'error',
message: "服务器报错啦，请联系管理员",
});
return Promise.reject(error);
default:
Vue.prototype.$message({
type: 'error',
message: '未知错误',
});
return Promise.reject(error);
}
}
return Promise.reject(error);
});
let bl = true;
// 为了简单明了删除了对IE的支持
(function () {
if (!sessionStorage.length) {
// 这个调用能触发目标事件，从而达到共享数据的目的
console.log(Date.now(), 1)
localStorage.setItem('getSessionStorage', Date.now());
router.beforeEach((to, from, next) => {
if (to.path != '/login')
localStorage.setItem('stopRoute', to.path);
console.log(to.path)
next()
})
};
// 该事件是核心
window.addEventListener('storage', function (event) {
console.log(event)
if (event.key == 'getSessionStorage') {
console.log(Date.now(), 3)
// 已存在的标签页会收到这个事件
localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
localStorage.removeItem('sessionStorage');
} else if (event.key == 'sessionStorage' && !sessionStorage.length) {
// 新开启的标签页会收到这个事件
console.log(Date.now(), 4)
bl = false;
var data = JSON.parse(event.newValue),
value;
for (var key in data) {
sessionStorage.setItem(key, data[key]);
}
console.log('end', sessionStorage)
if (sessionStorage.getItem('hasLogin')) {
let t = localStorage.getItem('stopRoute');
localStorage.removeItem('stopRoute');
console.log(t);
router.replace({
path: t
});
}
}
});
})();
//等待session写入完毕后开启拦截路由
router.afterEach((to, from) => {
if (to.path != '/login' && to.path != '/sms-login' && to.path != '/register' && to.path != '/register_l' ||
from.path == '/login' && to.path != '/sms-login' && to.path != '/register' && to.path != '/register_l' ||
from.path == '/sms-login' && to.path != '/login' && to.path != '/register' && to.path != '/register_l' ||
from.path == '/register' && to.path != '/login' && to.path != '/sms-login' && to.path != '/register_l' ||
from.path == '/register_l' && to.path != '/register' && to.path != '/login' && to.path != '/sms-login') {
if (!sessionStorage.getItem('hasLogin')) {
console.log(Date.now(), 2)
router.replace({
path: '/login'
});
}
}
})
// router.afterEach((to, from) => {
// if (to.path!='/login'&&to.path!='/sms-login'||from.path=='/login'&&to.path!='/sms-login'||from.path=='/sms-login'&&to.path!='/login')
// {
// if(!sessionStorage.getItem('hasLogin')){
// console.log(Date.now(),2)
// router.replace({
// path: '/login'
// });
// }
// }
// })
function formatDate(date, fmt) {
let exp = date;
if (!exp && typeof (exp) != 'undefined' && exp != 0) {
fmt = null
} else {
date = new Date(date);
if (typeof (fmt) === "undefined") {
fmt = "yyyy-MM-dd HH:mm:ss";
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
}
}/* */
}
return fmt
};
//定义一个时间过滤器
Vue.filter("FormatDate", function (date, fmt) {
return formatDate(date, fmt);
});
Vue.prototype.$ajax = axios2;
/*====================================TANXIN-AJAX===END================================*/
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App />'
})
自定义指令文件directive.js中常用定义的指令:
'use strict';
/**
*
*
* 添加所有的全局指令
*
*
*/
import Vue from 'vue'
// 聚焦指令
// 注册一个全局自定义指令 `v-focus`
// v-focus
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
}
})
//el-input只能输入数字（不包含加减号和小数点）
//v-enterNumber
// 针对中文输入法无效
Vue.directive('enterNumber', {
inserted: function (el) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode;
let re = /\d/;
if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
});
}
});
//el-input只能输入数字和小数点（不包含加减号）
// *注： 只针对 elementUI的Input组件有效
//v-enterFloat
// 针对中文输入法无效
Vue.directive('enterFloat', {
inserted: function (el) {
el.addEventListener("keypress",function(e){
e = e || window.event;
let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
let re = /\d/;
if(charcode == 46){
if(el.children[0].value.split('.').length>1){
e.preventDefault();
}
return;
}else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
}
});
},
});
//弹出框可拖拽
//v-dialogDrag
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
let oevent = e || window.event;
const disX = oevent.clientX - dialogHeaderEl.offsetLeft;
const disY = oevent.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换
let styL=0, styT=0;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
} else {
styL = sty.left!='auto'?(+sty.left.replace(/\px/g, '')):(dialogHeaderEl.offsetLeft);
styT = sty.top!='auto'?(+sty.top.replace(/\px/g, '')):(dialogHeaderEl.offsetTop);
}
document.onmousemove = function(e) {
// 通过事件委托，计算移动的距离
let oevent = e || window.event;
const l = oevent.clientX - disX;
const t = oevent.clientY - disY;
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
// 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
}
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
})
// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
bind(el, binding, vnode, oldVnode) {
const dragDom = binding.value.$el.querySelector('.el-dialog');
el.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft;
document.onmousemove = function(e) {
e.preventDefault(); // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
dragDom.style.width = `${l}px`;
}
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
})
Vue.directive('loadmore', { //懒加载
bind(el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function () {
let sign = 100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign) {
binding.value()
}
})
}
})
常用工具函数:
/*
*
*常用工具函数
*
*/
'use strict';
import api from '../api/index.js'
import btnPermission from './btnPermission.js'
export default {
/**
* 每个插件都有的install方法，用于安装插件
* @param {Object} Vue - Vue类
* @param {Object} [pluginOptions] - 插件安装配置
*/
install:function(Vue,option){
//全局引入api，这样在任何组件中，都不需要再import，直接使用全局变量引用即可
//比如：在Login.vue 中 使用登录接口
// url:this.$api.模块名.接口名,
Vue.prototype.$api = api;
// 这里不删除全部缓存，因为很可能下一次登录的账号是同一个，这时留下一些习惯缓存是很好的体验
// 但，如果下一次登录，和退出登录时，不是同一个账号，则做全部删除缓存处理，在login接口中操作
// 子组件调用：this.$loginOut()
Vue.prototype.$loginOut = function (methodOptions) {
sessionStorage.removeItem('hasLogin');
localStorage.removeItem('userInfo');
sessionStorage.removeItem('utk');
this.$router.replace({path:'/login'});
}
/**
*
* 根据登录接口二级菜单，提交的接口权限数据，判断该按钮是否有对应的显示权限
*
*
*/
Vue.prototype.$hasVisible = function(mark){
//根据二级菜单的权限，控制该页面的对应按钮是否生成
// mark: 按钮 标识码
let markObj = btnPermission;
let curMark = '';
if(mark&&markObj[mark]){
curMark = markObj[mark];
}else{
console.error('显示按钮的功能标识写错了！');
return false;
}
let hasVisibleBool = false;
let menuUrl = this.$route.path.split('/home/')[1]?this.$route.path.split('/home/')[1].split('/')[0]:this.$route.path.split('/common/')[1].split('/')[0];//一级菜单url
let curPageUrl = this.$route.path;//当前页面全路径
let twomenu = localStorage.getItem('twomenu')&&JSON.parse(localStorage.getItem('twomenu'))[menuUrl];//该一级菜单下的所有二级菜单
if(twomenu&&twomenu.length>0){
for (let i = 0; i < twomenu.length; i++) {
if(curPageUrl.indexOf(twomenu[i].menuUrl)>-1){
if(!twomenu[i].childFunction){
hasVisibleBool = false;
}else{
let funcArr = twomenu[i].childFunction;
if(funcArr&&funcArr.length>0){
for (let k = 0; k < funcArr.length; k++) {
if(funcArr[k].funTag == curMark){
hasVisibleBool = true;
break;
}else{
hasVisibleBool = false;
}
}
}
}
}
}
}
return hasVisibleBool;
}
//设置cookie
Vue.prototype.$setCookie = function(name, value, expiredays){
//调用示例：this.$setCookie('login','true',7);
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};
//获取cookie
Vue.prototype.$getCookie = function(name){
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
},
//删除cookie
Vue.prototype.$delCookie = function(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
//由于原生使用localStorage/sessionStorage比较简单，用原生即可；
//限制只能输入数字
// 建议优先使用指令：v-enterNumber
Vue.prototype.$number = function(value){
if(/\D/.test(value)){
value = value.replace(/\D/g,'');
}
return value;
}
//是否是合法的11位手机号码
Vue.prototype.$legalPhone = function(phone){
let bool = false;
if(/^[1][3,4,5,7,8][0-9]{9}$/.test(phone)){
bool = true;
}
return bool;
}
//数组或对象数组去重函数
/**
* [$noRepeat description]
* @param arr 目标数组或对象数组
* @param key 根据数组对象的某个字段key来去重
* @return
*/
Vue.prototype.$noRepeat = function(arr,key){
if(!(arr instanceof Array)){
return;
}
let newarr = [];
let bool = false;
for (let i = 0; i < arr.length; i++) {
if(key){
if(i !== 0){
bool = newarr.every((item,index,array)=>{
return item[key] != arr[i][key];
});
}
if(i===0||bool){
newarr.push(arr[i]);
}
}else if(newarr.indexOf(arr[i]) == -1){
newarr.push(arr[i]);
}
}
return newarr;
}
//去除空格
Vue.prototype.$trim = function(str){
//去除字符串左右空格
if(Object.prototype.toString.call(str) !== "[object String]"){
return str;
}
return str.replace(/^\s*|\s*$/g,"");
}
Vue.prototype.$trimAll = function(str){
//去除字符串全部空格
if(Object.prototype.toString.call(str) !== "[object String]"){
return str;
}
return str.replace(/\s*/g,"");
}
Vue.prototype.$trimLeft = function(str){
//去除字符串左侧空格
if(Object.prototype.toString.call(str) !== "[object String]"){
return str;
}
return str.replace(/^\s*/,"");
}
Vue.prototype.$trimRight = function(str){
//去除字符串右侧空格
if(Object.prototype.toString.call(str) !== "[object String]"){
return str;
}
return str.replace(/(\s*$)/g,"");
}
//检测数据的类型
//使用方法：this.$dataTypes.isNull(null);===> true
//
Vue.prototype.$dataTypes = {
isPrototype( data ) {
return Object.prototype.toString.call(data).toLowerCase()
},
isArray( data ) {
return this.isPrototype( data ) === '[object array]'
},
isJSON( data ) {
return this.isPrototype( data ) === '[object object]'
},
isFunction( data ) {
return this.isPrototype( data ) === '[object function]'
},
isString( data ) {
return this.isPrototype( data ) === '[object string]'
},
isNumber( data ) {
return this.isPrototype( data ) === '[object number]'
},
isUndefined( data ) {
return this.isPrototype( data ) === '[object undefined]'
},
isNull( data ) {
return this.isPrototype( data ) === '[object null]'
}
}
//添加时间戳转换
Vue.prototype.$formatTime = function(time){
let date = new Date(time);
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let minute = date.getMinutes();
let second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
}
//日期截取
//例如：2019-01-29T16:00:00.000+0000 转换后为： 2019-01-29
Vue.prototype.$formatDate = function(time){
if(!time){
return '';
}
return time.substr(0,10);
}
//自动生成数字混合字母的验证码;
//
//具备功能：
//1，随机5-7位的数字字母组合；
//2，随机字体大小；
//3，随机字体颜色；
//4，随机字体是否倾斜；
//
//
Vue.prototype.$createVerifyCode = function(){
let nums_letter_arr=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']; //所有的大小写字母
for (let i = 0; i < 10; i++) {
nums_letter_arr.push(i);
};
let alllength=nums_letter_arr.length; //总共有多少位数字加字母；
let nums = parseInt(Math.random()*10); // 取11~14位；
//当在0~2.5区间时，取11位，在2.5~5.0区间取12，取11位，在5.0~7.5区间取13,否则取14；
if(nums<=2.5){
nums=11;
}else if(nums>2.5&&nums<=5.0){
nums=12;
}else if(nums>5.0&&nums<=7.5){
nums=13;
}else{
nums=14;
}
let result=[]; //最后随机生成的11~14位的数字和字母结果；
let randomnum = '';
for (let i = 0; i < nums; i++) {
randomnum = parseInt(Math.random()*nums_letter_arr.length);
result.push(nums_letter_arr[randomnum]);
};
//生成一个对象数组,如果第二个参数为true则表示取取用当前字符，否则舍弃；最后得到boolean为true的5~7位的结果；
let numnewarr=[];
for (let i = 0; i < result.length; i++) {
numnewarr.push({
id:i,
val:result[i],
boolean:Math.random()*10>5?true:false
})
};
//如果数组numnewarr中，boolean值为true的个数少于5个，则随机补足到7个,如果大于7个则随机减少到7个；
let boolcount=0; //boolean值为true的个数
let boolean_true_arr=[]; //boolean为true对应的所有结果
let boolean_false_arr=[]; //boolean为false对应的所有结果
for (let i = 0; i < numnewarr.length; i++) {
if(numnewarr[i].boolean){
boolcount++;
boolean_true_arr.push(numnewarr[i]);
}else{
boolean_false_arr.push(numnewarr[i]);
}
};
if(boolcount<5){
let five_down_id=[]; //boolcount小于5时，随机从boolean_false_arr获取（5-boolcount）个id；
let f_curcount=''; //当前boolean_false_arr总个数中的随机数;
for (let i = 0; i < 5-boolcount; i++) {
let f_curcount=parseInt(Math.random()*(boolean_false_arr.length));
five_down_id.push(boolean_false_arr[f_curcount].id);
};
for (let i = 0; i < numnewarr.length; i++) {
for (let j = 0; j < five_down_id.length; j++) {
if(five_down_id[j]==numnewarr[i].id){
numnewarr[i].boolean=true;
}
};
};
}else if(boolcount>=7){
let seven_up_id=[]; //boolcount大于等于7时，随机从boolean_true_arr获取（boolcount-7）个id；
let t_curcount=''; //当前boolean_true_arr总个数中的随机数;
for (let i = 0; i < boolcount-7; i++) {
let t_curcount=parseInt(Math.random()*(boolean_true_arr.length));
seven_up_id.push(boolean_true_arr[t_curcount].id);
};
for (let i = 0; i < numnewarr.length; i++) {
for (let j = 0; j < seven_up_id.length; j++) {
if(seven_up_id[j]==numnewarr[i].id){
numnewarr[i].boolean=false;
}
};
};
}
//添加随机字体大小尺寸;
let sizearr=['12px','13px','14px','15px','16px'];
for (let i = 0; i < numnewarr.length; i++) {
numnewarr[i].fontsize=sizearr[parseInt(Math.random()*(sizearr.length))];
};
//添加随机字体颜色值;
let colorarr=['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'teal'];
for (let i = 0; i < numnewarr.length; i++) {
numnewarr[i].color=colorarr[parseInt(Math.random()*(colorarr.length))];
};
//添加字体是否倾斜
let isiarr=['normal','italic'];
for (let i = 0; i < numnewarr.length; i++) {
numnewarr[i].italics=isiarr[parseInt(Math.random()*(isiarr.length))];
};
//添加字体是否加粗
let isweightarr=['normal','bold'];
for (let i = 0; i < numnewarr.length; i++) {
numnewarr[i].weight=isweightarr[parseInt(Math.random()*(isweightarr.length))];
};
return numnewarr;
}
//对象序列化并排序
//
//具备功能：
//1，传入一个对象，将键值对序列化
//2，将键值对按照ASCII码升序排列；
//
//
Vue.prototype.$getStrSort = function(dataObj){
let keyarr=[];
let newObj='';
for(let key in dataObj){
keyarr.push(key);
}
if(!keyarr.length){
return false;
}
keyarr.sort(function (a, b) {
return a.localeCompare(b);
});
for (var i = 0; i < keyarr.length; i++) {
for(let key in dataObj){
if(key == keyarr[i]){
newObj += keyarr[i]+'='+dataObj[key]+'&';
}
}
};
return newObj.substr(0, newObj.length-1);
}
/*
*
* 比较数字大小
* arr:数组类型，
* type:获取最大值或者最小值,‘min’:获取数组中最小值，'max':获取数组中最大值
*
*/
Vue.prototype.$getMaxOrMin = function(arr,type){
if(Object.prototype.toString.call(arr) !== "[object Array]"){
return;
}
arr.sort(function (a, b) {
return a-b;
});
if(type === 'min'){
return arr[0];
}else if(type === 'max'){
return arr[arr.length - 1];
}
}
/**
*
* 日期比较大小
* date1/date2:日期格式 非时间戳
* 返回 date1是否大于date2
*/
Vue.prototype.$compareDate = function(date1,date2){
if(!date1&&!date2){
return;
}
let d1 = (date1.indexOf('-')>-1)&&date1.replace(/-/g,'/');
let d2 = (date2.indexOf('-')>-1)&&date2.replace(/-/g,'/');
return new Date(d1).getTime() - new Date(d2).getTime();
}
}
}