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 Antd from 'ant-design-vue'; |
|||
import App from './App.vue' |
|||
import router from './router' |
|||
import store from './store' |
|||
import http from './api/http' |
|||
|
|||
import 'ant-design-vue/dist/antd.css'; |
|||
Vue.config.productionTip = false |
|||
|
|||
new Vue({ |
|||
Vue.use(Antd); |
|||
var vue =new Vue({ |
|||
router, |
|||
store, |
|||
render: function (h) { return h(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 Vuex from 'vuex' |
|||
|
|||
Vue.use(Vuex) |
|||
|
|||
export default new Vuex.Store({ |
|||
Vue.use(Vuex); |
|||
const moduleA = { |
|||
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: { |
|||
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