22 changed files with 1125 additions and 41 deletions
@ -0,0 +1,27 @@ |
|||||
|
// https://eslint.org/docs/user-guide/configuring
|
||||
|
|
||||
|
module.exports = { |
||||
|
root: true, |
||||
|
parserOptions: { |
||||
|
parser: 'babel-eslint' |
||||
|
}, |
||||
|
env: { |
||||
|
browser: true, |
||||
|
}, |
||||
|
extends: [ |
||||
|
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
|
||||
|
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
|
||||
|
'plugin:vue/essential' |
||||
|
], |
||||
|
// required to lint *.vue files
|
||||
|
plugins: [ |
||||
|
'vue' |
||||
|
], |
||||
|
// add your custom rules here
|
||||
|
rules: { |
||||
|
// allow async-await
|
||||
|
'generator-star-spacing': 'off', |
||||
|
// allow debugger during development
|
||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,256 @@ |
|||||
|
import axios from 'axios' |
||||
|
|
||||
|
axios.defaults.timeout = 50000; |
||||
|
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
|
||||
|
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; |
||||
|
|
||||
|
|
||||
|
//'application/json;charset=utf-8';//
|
||||
|
if (process.env.NODE_ENV == 'development') { |
||||
|
axios.defaults.baseURL = 'http://127.0.0.1:9991/'; |
||||
|
} |
||||
|
else if (process.env.NODE_ENV == 'production') { |
||||
|
axios.defaults.baseURL = 'http://132.232.2.109:9991/'; |
||||
|
} |
||||
|
let ipAddress = axios.defaults.baseURL; |
||||
|
axios.interceptors.request.use((config) => { |
||||
|
//axios.defaults.headers[_Authorization] = $httpVue.$store.getters.getToken();
|
||||
|
|
||||
|
//console.log(axios.defaults.headers[_Authorization])
|
||||
|
if (config.method === 'post') { |
||||
|
//config.data =qs.stringify(config.data);
|
||||
|
// console.log('post拦截：' + config.data);
|
||||
|
} |
||||
|
return config; |
||||
|
}, (error) => { |
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
//返回状态判断(添加响应拦截器)
|
||||
|
axios.interceptors.response.use((res) => { |
||||
|
//对响应数据做些事
|
||||
|
if (res.data.success) { |
||||
|
return res; |
||||
|
} |
||||
|
return Promise.resolve(res); |
||||
|
}, (error) => { |
||||
|
let httpMessage = ''; |
||||
|
if (error.response) { |
||||
|
if (error.response.data && error.response.data.message) { |
||||
|
httpMessage = error.response.data.message; |
||||
|
} else if (error.response.status == '404') { |
||||
|
httpMessage = "没有找到请求的地址"; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
httpMessage = '网络好像出了点问题~' |
||||
|
} |
||||
|
|
||||
|
redirect(error.response || {}, httpMessage); |
||||
|
return Promise.reject(error.response); |
||||
|
}); |
||||
|
|
||||
|
let $httpVue = null, currentToken = ''; |
||||
|
const _Authorization = 'Authorization', _Bearer = 'Bearer '; |
||||
|
|
||||
|
function init(vue) { |
||||
|
$httpVue = vue |
||||
|
console.log(vue) |
||||
|
} |
||||
|
|
||||
|
function getToken() { |
||||
|
if (currentToken) { |
||||
|
return _Bearer + currentToken; |
||||
|
} |
||||
|
return $httpVue.$store.getters.getToken(); |
||||
|
} |
||||
|
|
||||
|
//_showLoading=true异步请求时会显示遮罩层,_showLoading=字符串，异步请求时遮罩层显示当前字符串
|
||||
|
function post(url, params) { |
||||
|
axios.defaults.headers[_Authorization] = getToken(); |
||||
|
return new Promise((resolve, reject) => { |
||||
|
// axios.post(url, qs.stringify(params)) //
|
||||
|
axios.post(url, params) |
||||
|
.then(response => { |
||||
|
if (response.status == 202) { |
||||
|
getNewToken(() => { post(url, params); }); |
||||
|
return; |
||||
|
} |
||||
|
resolve(response.data); |
||||
|
}, err => { |
||||
|
if (err.status == 202) { |
||||
|
getNewToken(() => { post(url, params); }); |
||||
|
return; |
||||
|
} |
||||
|
reject(err.data && err.data.message ? err.data.message : '网络好像出了点问题~~'); |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
reject(error) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
//_showLoading=true异步请求时会显示遮罩层,_showLoading=字符串，异步请求时遮罩层显示当前字符串
|
||||
|
function get(url, param) { |
||||
|
axios.defaults.headers[_Authorization] = getToken(); |
||||
|
return new Promise((resolve, reject) => { |
||||
|
axios.get(url, { params: param }) |
||||
|
.then(response => { |
||||
|
if (response.status == 202) { |
||||
|
getNewToken(() => { get(url, param); }); |
||||
|
return; |
||||
|
} |
||||
|
resolve(response.data) |
||||
|
}, err => { |
||||
|
if (err.status == 202) { |
||||
|
getNewToken(() => { get(url, param); }); |
||||
|
return; |
||||
|
} |
||||
|
redirect(response.data); |
||||
|
reject(err) |
||||
|
}) |
||||
|
.catch((error) => { |
||||
|
reject(error) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
function createXHR() { |
||||
|
if (XMLHttpRequest) { |
||||
|
return new XMLHttpRequest(); |
||||
|
} |
||||
|
if (ActiveXObject) { |
||||
|
if (typeof arguments.callee.activeXString != "string") { |
||||
|
var versions = [ |
||||
|
"MSXML2.XMLHttp.6.0", |
||||
|
"MSXML2.XMLHttp", |
||||
|
"MSXML2.XMLHttp.3.0" |
||||
|
]; |
||||
|
for (var i = 0; i < versions.length; i++) { |
||||
|
try { |
||||
|
new ActiveXObject(versions[i]); |
||||
|
arguments.callee.activeXString = versions[i]; |
||||
|
break; |
||||
|
} catch (e) { |
||||
|
console.log("no"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return new ActiveXObject(arguments.callee.activeXString); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function redirect(responseText, message) { |
||||
|
try { |
||||
|
let responseData = typeof responseText == 'string' ? JSON.parse(responseText) : responseText; |
||||
|
// $httpVue.$message.error(responseData.message || '~服务器好像出了点问题...')
|
||||
|
if ((responseData.hasOwnProperty('code') && responseData.code == 401) |
||||
|
|| (responseData.data && responseData.data.code == 401)) { |
||||
|
toLogin(); |
||||
|
} else { |
||||
|
$httpVue.$message.error(message); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.log(error); |
||||
|
$httpVue.$message.error(responseText) |
||||
|
} |
||||
|
} |
||||
|
function toLogin() { |
||||
|
currentToken = ""; |
||||
|
$httpVue.$router.push({ path: '/login', params: { r: Math.random() } }); |
||||
|
} |
||||
|
//当前token快要过期时，用现有的token换成一个新的token
|
||||
|
function getNewToken(callBack) { |
||||
|
ajax({ |
||||
|
url: "/api/User/replaceToken", |
||||
|
param: {}, |
||||
|
json: true, |
||||
|
success: function (x) { |
||||
|
if (x.status) { |
||||
|
let userInfo = $httpVue.$store.getters.getUserInfo(); |
||||
|
userInfo.token = x.data; |
||||
|
currentToken = x.data; |
||||
|
$httpVue.$store.commit('setUserInfo', userInfo); |
||||
|
callBack(); |
||||
|
} else { |
||||
|
console.log(x.message); |
||||
|
toLogin(); |
||||
|
} |
||||
|
}, |
||||
|
errror: function (ex) { |
||||
|
console.log(ex); |
||||
|
toLogin(); |
||||
|
}, |
||||
|
type: "post", |
||||
|
async: false |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
function ajax(param) { |
||||
|
let httpParam = |
||||
|
Object.assign({ |
||||
|
url: '', headers: {}, |
||||
|
param: {}, json: true, |
||||
|
success: function () { }, |
||||
|
errror: function () { }, |
||||
|
type: 'post', async: true |
||||
|
}, param); |
||||
|
|
||||
|
httpParam.url = axios.defaults.baseURL + httpParam.url.replace(/\/?/, ''); |
||||
|
httpParam.headers[_Authorization] = getToken(); |
||||
|
var xhr = createXHR(); |
||||
|
// console.log(xhr.readyState);
|
||||
|
xhr.onreadystatechange = function () { |
||||
|
if (xhr.status == 403 || xhr.status == 401) { |
||||
|
redirect(xhr.responseText); |
||||
|
return; |
||||
|
} |
||||
|
if (xhr.status == 202) { |
||||
|
getNewToken(() => { |
||||
|
ajax(param); |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
if (xhr.readyState == 4 && xhr.status == 200) { |
||||
|
httpParam.success(httpParam.json ? JSON.parse(xhr.responseText) : xhr.responseText); |
||||
|
return; |
||||
|
} |
||||
|
if (xhr.status != 0 && xhr.readyState != 1) { |
||||
|
httpParam.errror(xhr); |
||||
|
} |
||||
|
}; |
||||
|
//初始化请求
|
||||
|
xhr.open( |
||||
|
httpParam.type, |
||||
|
httpParam.url, |
||||
|
httpParam.async |
||||
|
); |
||||
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
||||
|
for (const key in httpParam.headers) { |
||||
|
xhr.setRequestHeader(key, httpParam.headers[key]); |
||||
|
} |
||||
|
let dataStr = ''; |
||||
|
for (const key in httpParam.param) { |
||||
|
dataStr += key + "=" + httpParam.param[key]; |
||||
|
} |
||||
|
try { |
||||
|
xhr.send(dataStr); |
||||
|
} catch (error) { |
||||
|
toLogin(); |
||||
|
// console.log(error)
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ajax.post = function (url, param, success, errror) { |
||||
|
ajax({ url: url, param: param, success: success, error: errror, type: 'post' }) |
||||
|
} |
||||
|
ajax.get = function (url, param, success, errror) { |
||||
|
ajax({ url: url, param: param, success: success, error: errror, type: 'post' }) |
||||
|
} |
||||
|
export default { post, get, ajax, init, ipAddress } |
||||
@ -0,0 +1,83 @@ |
|||||
|
|
||||
|
.layout-container { |
||||
|
// border-top: 1px solid #eee; |
||||
|
background: #eee; |
||||
|
// padding: 15px; |
||||
|
/* margin-bottom: 40px; */ |
||||
|
} |
||||
|
// .animated { |
||||
|
// -webkit-animation-duration: 1s; |
||||
|
// animation-duration: 1s; |
||||
|
// -webkit-animation-fill-mode: both; |
||||
|
// animation-fill-mode: both; |
||||
|
// } |
||||
|
// .animated.infinite { |
||||
|
// -webkit-animation-iteration-count: infinite; |
||||
|
// animation-iteration-count: infinite; |
||||
|
// } |
||||
|
// .animated.hinge { |
||||
|
// -webkit-animation-duration: 2s; |
||||
|
// animation-duration: 2s; |
||||
|
// } |
||||
|
// .animated.bounceIn, |
||||
|
// .animated.bounceOut, |
||||
|
// .animated.flipOutX, |
||||
|
// .animated.flipOutY { |
||||
|
// -webkit-animation-duration: 0.75s; |
||||
|
// animation-duration: 0.75s; |
||||
|
// } |
||||
|
// @-webkit-keyframes fadeInDown { |
||||
|
// 0% { |
||||
|
// opacity: 0; |
||||
|
// -webkit-transform: translate3d(0, -100%, 0); |
||||
|
// transform: translate3d(0, -100%, 0); |
||||
|
// } |
||||
|
// to { |
||||
|
// opacity: 1; |
||||
|
// -webkit-transform: none; |
||||
|
// transform: none; |
||||
|
// } |
||||
|
// } |
||||
|
// @keyframes fadeInDown { |
||||
|
// 0% { |
||||
|
// opacity: 0; |
||||
|
// -webkit-transform: translate3d(0, -100%, 0); |
||||
|
// transform: translate3d(0, -100%, 0); |
||||
|
// } |
||||
|
// to { |
||||
|
// opacity: 1; |
||||
|
// -webkit-transform: none; |
||||
|
// transform: none; |
||||
|
// } |
||||
|
// } |
||||
|
// .fadeInDown { |
||||
|
// -webkit-animation-name: fadeInDown; |
||||
|
// animation-name: fadeInDown; |
||||
|
// } |
||||
|
|
||||
|
// @-webkit-keyframes slideInDown { |
||||
|
// 0% { |
||||
|
// -webkit-transform: translate3d(0, -100%, 0); |
||||
|
// transform: translate3d(0, -100%, 0); |
||||
|
// visibility: visible; |
||||
|
// } |
||||
|
// to { |
||||
|
// -webkit-transform: translateZ(0); |
||||
|
// transform: translateZ(0); |
||||
|
// } |
||||
|
// } |
||||
|
// @keyframes slideInDown { |
||||
|
// 0% { |
||||
|
// -webkit-transform: translate3d(0, -100%, 0); |
||||
|
// transform: translate3d(0, -100%, 0); |
||||
|
// visibility: visible; |
||||
|
// } |
||||
|
// to { |
||||
|
// -webkit-transform: translateZ(0); |
||||
|
// transform: translateZ(0); |
||||
|
// } |
||||
|
// } |
||||
|
// .slideInDown { |
||||
|
// -webkit-animation-name: slideInDown; |
||||
|
// animation-name: slideInDown; |
||||
|
// } |
||||
@ -0,0 +1,229 @@ |
|||||
|
.view-container{ |
||||
|
padding: 15px; |
||||
|
background: white; |
||||
|
} |
||||
|
.view-header { |
||||
|
height: 45px; |
||||
|
position: relative; |
||||
|
padding-bottom: 11px; |
||||
|
display: -webkit-flex; |
||||
|
display: flex; |
||||
|
.search-line { |
||||
|
flex: 1; |
||||
|
margin-left: 50px; |
||||
|
display: flex; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.search-line > div { |
||||
|
margin-left: 30px; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.search-line > div > div{ |
||||
|
width: 200px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
.search-line > div:first-child{ |
||||
|
flex: 1; |
||||
|
} |
||||
|
.search-line > div .ivu-select-dropdown{ |
||||
|
max-height: 300px; |
||||
|
} |
||||
|
// .btn-group > button { |
||||
|
// text-align: right; |
||||
|
// } |
||||
|
.btn-group{ |
||||
|
white-space: nowrap; |
||||
|
button { |
||||
|
margin-left: 10px; |
||||
|
// padding: 5px 16px; |
||||
|
} |
||||
|
.dropdown{ |
||||
|
height: 31px; |
||||
|
padding-right: 9px; |
||||
|
padding-left: 11px; |
||||
|
border-top-right-radius: 0px; |
||||
|
border-bottom-right-radius: 0px; |
||||
|
} |
||||
|
.r-dropdown{ |
||||
|
height: 31px; |
||||
|
margin-left: 0px; |
||||
|
padding-left: 5px; |
||||
|
padding-right: 5px; |
||||
|
border-bottom-left-radius: 0px; |
||||
|
border-left: 1px solid #eee; |
||||
|
border-top-left-radius: 0; |
||||
|
} |
||||
|
} |
||||
|
// .btn-group button { |
||||
|
// margin-left: 10px; |
||||
|
// // padding: 5px 16px; |
||||
|
// } |
||||
|
// .btn-group .dropdown { |
||||
|
// position: relative; |
||||
|
// padding: 5px 34px 5px 10px; |
||||
|
// } |
||||
|
// .btn-group .dropdown span i.ivu-icon-ios-arrow-down { |
||||
|
// top: 0px; |
||||
|
// height: 34px; |
||||
|
// border-left: 1px solid; |
||||
|
// height: 100%; |
||||
|
// position: absolute; |
||||
|
// margin-left: 10px; |
||||
|
// padding: 9px 5px 5px 5px; |
||||
|
// } |
||||
|
// .btn-group .dropdown .ivu-dropdown { |
||||
|
// bottom: 0; |
||||
|
// right: 0; |
||||
|
// left: 0; |
||||
|
// position: absolute; |
||||
|
// } |
||||
|
.btn-group .ivu-dropdown-item { |
||||
|
text-align: left !important; |
||||
|
} |
||||
|
.btn-group .ivu-dropdown-item:not(:last-child) { |
||||
|
border-bottom: 1px dotted #eee; |
||||
|
} |
||||
|
.desc-text { |
||||
|
margin-top: 5px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 3px; |
||||
|
font-size: 15px; |
||||
|
color: #607d8b; |
||||
|
white-space: nowrap; |
||||
|
border-bottom: 2px solid #009688; |
||||
|
} |
||||
|
.desc-text .ivu-icon { |
||||
|
font-size: 20px; |
||||
|
bottom: 2px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.search-box { |
||||
|
background: #fefefe; |
||||
|
margin-top: 45px; |
||||
|
border: 1px solid #ececec; |
||||
|
position: absolute; |
||||
|
z-index: 999; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
// width: 100%; |
||||
|
padding: 25px 40px; |
||||
|
padding-bottom: 0; |
||||
|
box-shadow: 0px 7px 18px -12px #bdc0bb; |
||||
|
} |
||||
|
.notice { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
position: relative; |
||||
|
top: 12px; |
||||
|
left: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.table-info-cell-title { |
||||
|
background-color: #f5f5f5 !important; |
||||
|
} |
||||
|
.iview-com { |
||||
|
background: #f3f3f3; |
||||
|
> div.item{ |
||||
|
// margin-bottom: 10px; |
||||
|
|
||||
|
margin-bottom: 12px; |
||||
|
background: white; |
||||
|
} |
||||
|
> div.form-item{ |
||||
|
padding: 8px 16px 7px 16px; |
||||
|
//box-shadow: 0 1px 7px rgb(199, 199, 199); |
||||
|
} |
||||
|
> div.table-item{ |
||||
|
// padding: 0px 16px 12px 16px; |
||||
|
border: 1px solid #e8e8e8; |
||||
|
box-shadow: 0 1px 7px rgb(199, 199, 199); |
||||
|
} |
||||
|
.v-text{ |
||||
|
line-height: 27px; |
||||
|
} |
||||
|
.form-text{ |
||||
|
position: relative; |
||||
|
/* height: 38px; */ |
||||
|
/* line-height: 38px; */ |
||||
|
/* padding: 0 15px; */ |
||||
|
// border-bottom: 1px solid #e4e4e4; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
/* border-radius: 2px 2px 0 0; */ |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 14px; |
||||
|
.title{ |
||||
|
border-bottom: 2px solid #00BCD4; |
||||
|
color: #009688; |
||||
|
font-weight: bold; |
||||
|
letter-spacing: 1px; |
||||
|
// border-bottom-right-radius: 5px; |
||||
|
// border-top-left-radius: 5px; |
||||
|
padding: 6px 0; |
||||
|
// background: #009688; |
||||
|
// color: white; |
||||
|
} |
||||
|
.icon{ |
||||
|
color: #00BCD4; |
||||
|
font-size: 19px; |
||||
|
position: relative; |
||||
|
top: -1px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-closex { |
||||
|
text-align: right; |
||||
|
padding-bottom: 24px; |
||||
|
} |
||||
|
.form-closex button { |
||||
|
margin-left: 10px; |
||||
|
padding: 4px 13px; |
||||
|
} |
||||
|
.grid-detail{ |
||||
|
// margin-left:16px; |
||||
|
// // margin-top:-28px; |
||||
|
// padding-bottom: 16px; |
||||
|
} |
||||
|
.toolbar{ |
||||
|
padding: 3px 15px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
// padding: 3px; |
||||
|
border-top: 1px solid #eae9e9; |
||||
|
// border-top-left-radius: 5px; |
||||
|
// // background: #37aba0; |
||||
|
// border-top-right-radius: 5px; |
||||
|
// border: 1px solid #f1f1f1; |
||||
|
.title{ |
||||
|
line-height: 28px; |
||||
|
border-bottom: 2px solid #03A9F4; |
||||
|
font-size: 14px; |
||||
|
font-weight: bolder; |
||||
|
margin-bottom: 0; |
||||
|
color: #828282; |
||||
|
.icon{ |
||||
|
color: #009688; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
.btns{ |
||||
|
line-height: 28px; |
||||
|
flex: 1; |
||||
|
text-align: right; |
||||
|
margin-right: 12px; |
||||
|
button{ |
||||
|
border: none; |
||||
|
margin-left:15px; |
||||
|
border: 0px; |
||||
|
color: #009688; |
||||
|
} |
||||
|
button:hover{ |
||||
|
color: #FF9800; |
||||
|
border-color: #FF9800; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,75 @@ |
|||||
|
*{ |
||||
|
box-sizing:border-box; |
||||
|
-moz-box-sizing:border-box; /* Firefox */ |
||||
|
-webkit-box-sizing:border-box; /* Safari */ |
||||
|
} |
||||
|
.el-pager li{ |
||||
|
font-weight: 100; |
||||
|
margin-right: 9px; |
||||
|
border: 1px solid #eee; |
||||
|
border-radius: 3px; |
||||
|
min-width: 28px; |
||||
|
} |
||||
|
.el-pager li.active,.el-pager li:hover{ |
||||
|
background: #ed4014; |
||||
|
color: white; |
||||
|
} |
||||
|
.el-pagination__editor.el-input .el-input__inner{ |
||||
|
height: 23px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.animated { |
||||
|
-webkit-animation-duration: 0.5s; |
||||
|
animation-duration: 0.5s; |
||||
|
-webkit-animation-fill-mode: both; |
||||
|
animation-fill-mode: both; |
||||
|
} |
||||
|
|
||||
|
@media (print), (prefers-reduced-motion) { |
||||
|
.animated { |
||||
|
-webkit-animation: unset !important; |
||||
|
animation: unset !important; |
||||
|
-webkit-transition: none !important; |
||||
|
transition: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes fadeInDown { |
||||
|
from { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: translate3d(0, -100%, 0); |
||||
|
transform: translate3d(0, -100%, 0); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: translate3d(0, 0, 0); |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeInDown { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
-webkit-transform: translate3d(0, -100%, 0); |
||||
|
transform: translate3d(0, -100%, 0); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
-webkit-transform: translate3d(0, 0, 0); |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fadeInDown { |
||||
|
-webkit-animation-name: fadeInDown; |
||||
|
animation-name: fadeInDown; |
||||
|
} |
||||
|
.ivu-message{ |
||||
|
z-index: 999999999 !important; |
||||
|
} |
||||
|
.ivu-form-item-content{ |
||||
|
text-align: left; |
||||
|
} |
||||
|
After Width: | Height: | Size: 5.0 KiB |
@ -0,0 +1,2 @@ |
|||||
|
var test1 = function () { alert(11) } |
||||
|
export { test1 } |
||||
@ -0,0 +1,5 @@ |
|||||
|
//对vue参数进行扩展
|
||||
|
var extend = function (param) { |
||||
|
console.log(param) |
||||
|
} |
||||
|
export { extend } |
||||
@ -0,0 +1,15 @@ |
|||||
|
//对vue参数进行扩展
|
||||
|
var extend = function ($vueParam) { |
||||
|
$vueParam.methods.volBoxFrom = function () { |
||||
|
this.$Message.info("扩展js,增加弹出消息"); |
||||
|
this.$refs.volBoxFrom.show(); |
||||
|
} |
||||
|
//修改data属性:
|
||||
|
let data = $vueParam.data(); |
||||
|
data.formFileds['extend'] = "动态扩展字段"; |
||||
|
data.formOptions.splice(0,0,{ filed: "extend", title: "动态增加字段", type: "text", required: true }); |
||||
|
$vueParam.data = function () { |
||||
|
return data; |
||||
|
} |
||||
|
} |
||||
|
export { extend } |
||||
@ -1,12 +1,19 @@ |
|||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
|
import Antd from 'ant-design-vue'; |
||||
import App from './App.vue' |
import App from './App.vue' |
||||
import router from './router' |
import router from './router' |
||||
import store from './store' |
import store from './store' |
||||
|
import http from './api/http' |
||||
|
|
||||
|
import 'ant-design-vue/dist/antd.css'; |
||||
Vue.config.productionTip = false |
Vue.config.productionTip = false |
||||
|
|
||||
new Vue({ |
Vue.use(Antd); |
||||
|
var vue =new Vue({ |
||||
router, |
router, |
||||
store, |
store, |
||||
render: function (h) { return h(App) } |
render: function (h) { return h(App) } |
||||
}).$mount('#app') |
}).$mount('#app') |
||||
|
|
||||
|
Vue.prototype.http = http; |
||||
|
Vue.prototype.http.init(vue); |
||||
@ -0,0 +1,27 @@ |
|||||
|
|
||||
|
const data = { |
||||
|
state: { |
||||
|
data: {} |
||||
|
}, |
||||
|
mutations: { |
||||
|
// setData(state, data) { //this.$store.commit('setData', data)
|
||||
|
// state.data = data;
|
||||
|
// },
|
||||
|
clear(state) { |
||||
|
state.data = {}; |
||||
|
} |
||||
|
}, getters: { |
||||
|
getData: (state) => () => { //调用方式 store.getters.getData()
|
||||
|
return data; |
||||
|
}, |
||||
|
data: (state) => () => { |
||||
|
return data; |
||||
|
} |
||||
|
}, actions: { |
||||
|
// setData(context, data) {
|
||||
|
// context.commit('setData', data); //调用方式 store.dispatch('push')
|
||||
|
// }
|
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export default data; |
||||
@ -1,15 +1,150 @@ |
|||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
import Vuex from 'vuex' |
import Vuex from 'vuex' |
||||
|
|
||||
Vue.use(Vuex) |
|
||||
|
|
||||
export default new Vuex.Store({ |
Vue.use(Vuex); |
||||
|
const moduleA = { |
||||
state: { |
state: { |
||||
|
m: 123 |
||||
|
}, mutations: { |
||||
|
|
||||
|
}, getters: { |
||||
|
|
||||
|
}, actions: { |
||||
|
toDo(context) { |
||||
|
return context.Store.m; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
const moduleB = { |
||||
|
state: { |
||||
|
m: 456 |
||||
|
}, mutations: { |
||||
|
|
||||
|
}, getters: { |
||||
|
|
||||
|
}, actions: { |
||||
|
toDo(context) { |
||||
|
return context.Store.m; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const test = new Vuex.Store({ |
||||
|
modules: { //分成多个模块
|
||||
|
a: moduleA, //store.state.a
|
||||
|
b: moduleB //store.state.b
|
||||
|
}, |
||||
|
state: { |
||||
|
count: 12220 |
||||
}, |
}, |
||||
mutations: { |
mutations: { |
||||
|
increment(state, par1) { |
||||
|
state.count++ |
||||
|
} |
||||
}, |
}, |
||||
actions: { |
getters: { |
||||
|
newVal: (parState, getters) => { //parState这个是参数,是vuex调用时传的state对象.getters同样可以调用getters.state.count
|
||||
|
parState.count = 888; |
||||
|
return parState.count; |
||||
|
} |
||||
|
}, actions: { |
||||
|
increment(context, par1) {//传入参数
|
||||
|
context.commit('increment', par1) //store.dispatch('increment')
|
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function getUserInfo(state) { |
||||
|
if (state.userInfo) return state.userInfo; |
||||
|
let userInfo = localStorage.getItem(keys.USER); |
||||
|
if (userInfo) { |
||||
|
state.userInfo = JSON.parse(userInfo); |
||||
|
} |
||||
|
return state.userInfo; |
||||
|
} |
||||
|
//getter 相当于 state 的计算属性，mutation 是用来修改 state 的
|
||||
|
//使用actions或mutation获取不了state对象
|
||||
|
const keys = { USER: 'user' } |
||||
|
//因为分了模块所有属性调试方法都需要加上this.$store.system(system为模块名称)
|
||||
|
const system = { |
||||
|
state: { |
||||
|
permission: [], |
||||
|
isLoading: false,//2020.06.03增加路由切换时加载提示
|
||||
|
userInfo: null |
||||
}, |
}, |
||||
modules: { |
mutations: { |
||||
|
setPermission(state, data) { //调用方式 this.$store.commit('setPermission', data)
|
||||
|
if (!data || typeof data != 'object') return; |
||||
|
if (data instanceof Array) { |
||||
|
state.permission.push(...data); |
||||
|
} else { |
||||
|
state.permission = data; |
||||
|
} |
||||
|
}, setUserInfo(state, data) { |
||||
|
state.userInfo = data; |
||||
|
localStorage.setItem(keys.USER, JSON.stringify(data)); |
||||
|
}, |
||||
|
clearUserInfo(state) { |
||||
|
state.permission = []; |
||||
|
state.userInfo = null; |
||||
|
localStorage.removeItem(keys.USER); |
||||
|
}, |
||||
|
test(state) { |
||||
|
return 113344; |
||||
|
}, |
||||
|
updateLoadingState(state, flag) { |
||||
|
state.isLoading = flag |
||||
|
} |
||||
|
}, getters: { |
||||
|
getPermission: (state) => (path) => { //调用方式 store.getters.getPermission('sys_User')
|
||||
|
if (!path) return state.permission; |
||||
|
return state.permission.find(x => x.path == path); |
||||
|
}, |
||||
|
getUserInfo: (state) => () => { |
||||
|
getUserInfo(state); |
||||
|
return state.userInfo; |
||||
|
}, getUserName: (state) => () => { |
||||
|
getUserInfo(state); |
||||
|
if (state.userInfo) { |
||||
|
return state.userInfo.userName; |
||||
|
} |
||||
|
return '未获取到登陆信息'; |
||||
|
}, |
||||
|
getToken: (state) => () => { |
||||
|
getUserInfo(state); |
||||
|
if (state.userInfo) { |
||||
|
return 'Bearer ' + state.userInfo.token; |
||||
|
} |
||||
|
return ''; |
||||
|
}, |
||||
|
isLogin: (state) => () => { |
||||
|
if (getUserInfo(state)) { |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
}, |
||||
|
isLoading: (state) => () => { |
||||
|
return state.isLoading; |
||||
|
} |
||||
|
|
||||
|
}, actions: { |
||||
|
setPermission(context, data) { |
||||
|
context.commit('setPermission', data); //调用方式 store.dispatch('push')
|
||||
|
}, |
||||
|
toDo(context) { |
||||
|
return context.Store.m; |
||||
|
}, |
||||
|
onLoading(context, flag) { |
||||
|
context.commit("updateLoadingState", flag); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
import data from './data.js' |
||||
|
const store = new Vuex.Store({ |
||||
|
modules: { //分成多个模块
|
||||
|
system,//this.$store.state.system
|
||||
|
data |
||||
} |
} |
||||
}) |
}) |
||||
|
export default store; |
||||
|
|||||
@ -0,0 +1,33 @@ |
|||||
|
<template> |
||||
|
<div class="card-container"> |
||||
|
<a-tabs type="card"> |
||||
|
<a-tab-pane key="1" tab="Tab Title 1"> |
||||
|
<p @click="testHttp">Content of Tab Pane 1</p> |
||||
|
<p>{{html}}</p> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="2" tab="Tab Title 2"> |
||||
|
<p>Content of Tab Pane 2</p> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane key="3" tab="Tab Title 3"> |
||||
|
<p>Content of Tab Pane 3</p> |
||||
|
</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
html:'' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
testHttp(){ |
||||
|
this.http.get('http://www.baidu.com').then(res=>{ |
||||
|
this.html=res |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,17 @@ |
|||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
||||
|
module.exports = { |
||||
|
// 修改打包后js文件名
|
||||
|
configureWebpack: { // webpack 配置
|
||||
|
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.js】
|
||||
|
filename: `js/[name].js`, |
||||
|
chunkFilename: `js/[name].js` |
||||
|
}, |
||||
|
// 修改打包后css文件名
|
||||
|
plugins: [ |
||||
|
new MiniCssExtractPlugin({ |
||||
|
filename: `css/[name].css`, |
||||
|
chunkFilename: `css/[name].css` |
||||
|
}) |
||||
|
] |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue