Skip to content

肖康 / cloudSystem

Go to a project
Commit 80c27c51 by liangjianmin
Options

js

parent db4449d6
Inline Side-by-side
Showing with 145 additions and 65 deletions
src/ajax/index.js
import axios from 'axios'; import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import Util from "../tool";
/** /**
...@@ -25,14 +26,20 @@ switch (envs) { ...@@ -25,14 +26,20 @@ switch (envs) {
NODE_ENVS = '/'; NODE_ENVS = '/';
break; break;
} }
export const http = (method, url, param) => { export const http = (method, url, param) => {
param = param && typeof param === 'object' ? param : {}; param = param && typeof param === 'object' ? param : {};
let token = Util.getCookie('token') || '';
const config = { const config = {
url: `${NODE_ENVS}${url}`, url: `${NODE_ENVS}${url}`,
method: method, method: method,
transformRequest: [function (param) { transformRequest: [function (param) {
return qs.stringify(param); return qs.stringify(param);
}] }],
headers: {
'Authorization': 'Bearer ' + token
}
}; };
// post请求时需要设定Content-Type // post请求时需要设定Content-Type
......
src/components/menu.vue
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<span class="icon iconfont"></span> <span class="icon iconfont"></span>
<div class="drop-box"> <div class="drop-box">
<a href="#">修改密码</a> <a href="#">修改密码</a>
<a href="#">退出登录</a> <a href="javascript:;" @click="logout">退出登录</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -132,33 +132,35 @@ ...@@ -132,33 +132,35 @@
MenuItemGroup, MenuItemGroup,
Message Message
} from 'element-ui' } from 'element-ui'
Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu) Vue.use(Menu).use(MenuItem).use(MenuItemGroup).use(Submenu)
export default { export default {
name: 'menus', name: 'menus',
props: { props: {},
},
created() { created() {
/* this.$http('get', "/api/user/getuserinfo").then(res => {
}).catch(err => {
console.log(err.message);
})*/
}, },
data() { data() {
return { return {
collapse: false, collapse: false,
isIndexTab: true, isIndexTab: true,
tabSure: "", tabSure: "",
tabs:"" tabs: ""
} }
}, },
watch:{ watch: {
$route(to,from){ $route(to, from) {
let tab_arr=sessionStorage.getItem('tabs') let tab_arr = sessionStorage.getItem('tabs')
if(tab_arr){ if (tab_arr) {
this.tabs=JSON.parse(tab_arr); this.tabs = JSON.parse(tab_arr);
} }
let app_ = document.getElementById('app'); let app_ = document.getElementById('app');
this.collapse=false this.collapse = false
if (this.collapse) { if (this.collapse) {
app_.setAttribute('style', 'padding-left:62px'); app_.setAttribute('style', 'padding-left:62px');
} else { } else {
...@@ -186,27 +188,27 @@ ...@@ -186,27 +188,27 @@
if (lk == "/message") { if (lk == "/message") {
this.tabSure = 5 this.tabSure = 5
} }
let tab_arr=sessionStorage.getItem('tabs') let tab_arr = sessionStorage.getItem('tabs')
if(tab_arr){ if (tab_arr) {
this.tabs=JSON.parse(tab_arr); this.tabs = JSON.parse(tab_arr);
} }
}, },
closetab(path){ closetab(path) {
let tab_arr=JSON.parse(sessionStorage.getItem('tabs')) let tab_arr = JSON.parse(sessionStorage.getItem('tabs'))
for(var i=0;i<tab_arr.length;i++){ for (var i = 0; i < tab_arr.length; i++) {
if(tab_arr[i].path==path){ if (tab_arr[i].path == path) {
tab_arr.splice(i,1); tab_arr.splice(i, 1);
sessionStorage.setItem('tabs', JSON.stringify(tab_arr)); sessionStorage.setItem('tabs', JSON.stringify(tab_arr));
this.tabs=tab_arr; this.tabs = tab_arr;
if(path==this.$route.path){ if (path == this.$route.path) {
if(i==0){ if (i == 0) {
this.$router.push({ this.$router.push({
path: "/", path: "/",
}) })
}else{ } else {
this.$router.push({ this.$router.push({
path: tab_arr[i-1].path, path: tab_arr[i - 1].path,
}) })
} }
} }
...@@ -237,13 +239,18 @@ ...@@ -237,13 +239,18 @@
}, },
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
this.tabss(key) this.tabss(key)
},
logout() {
this.$http('get', "/auth/logout").then(res => {
}).catch(err => {
console.log(err.message);
})
} }
} }
} }
</script> </script>
<style lang="less" > <style lang="less">
#app { #app {
padding-left: 226px; padding-left: 226px;
padding-top: 56px; padding-top: 56px;
...@@ -256,6 +263,7 @@ ...@@ -256,6 +263,7 @@
right: 0px; right: 0px;
height: 56px; height: 56px;
z-index: 99; z-index: 99;
.con-box { .con-box {
height: 56px; height: 56px;
background: #fff; background: #fff;
...@@ -271,43 +279,51 @@ ...@@ -271,43 +279,51 @@
background: #1969F9; background: #1969F9;
box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5); box-shadow: 0px 2px 42px -8px rgba(206, 214, 219, 0.5);
} }
.tab-box{
padding:8px 0px; .tab-box {
.item{ padding: 8px 0px;
color:#646B78;
.item {
color: #646B78;
font-size: 14px; font-size: 14px;
margin-left: 20px; margin-left: 20px;
height:40px; height: 40px;
line-height: 40px; line-height: 40px;
cursor: pointer; cursor: pointer;
&.act{
&.act {
position: relative; position: relative;
font{
color:#333; font {
color: #333;
} }
&::after{
content:""; &::after {
content: "";
position: absolute; position: absolute;
bottom:-8px; bottom: -8px;
width: 32px; width: 32px;
height: 5px; height: 5px;
background: #1969F9; background: #1969F9;
left:50%; left: 50%;
margin-left:-22px; margin-left: -22px;
} }
&.first{
&::after{
margin-left:-15px; &.first {
&::after {
margin-left: -15px;
} }
} }
} }
.icon{
.icon {
font-size: 14px; font-size: 14px;
margin-left: 5px; margin-left: 5px;
} }
} }
} }
.user-box { .user-box {
height: 40px; height: 40px;
padding: 8px 0; padding: 8px 0;
...@@ -455,9 +471,11 @@ ...@@ -455,9 +471,11 @@
line-height: 46px; line-height: 46px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&.act{
&.act {
background: #F1F4FA; background: #F1F4FA;
position: relative; position: relative;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -467,10 +485,12 @@ ...@@ -467,10 +485,12 @@
height: 30px; height: 30px;
background: #1969F9; background: #1969F9;
} }
span{
color:#1969F9; span {
color: #1969F9;
} }
} }
&:hover { &:hover {
background: #F1F4FA; background: #F1F4FA;
} }
...@@ -491,15 +511,16 @@ ...@@ -491,15 +511,16 @@
bottom: 0px; bottom: 0px;
.meau-con { .meau-con {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
background: #fff; background: #fff;
.el-icon-arrow-down:before { .el-icon-arrow-down:before {
content: "\e790"; content: "\e790";
} }
.zankai { .zankai {
height: 26px; height: 26px;
font-size: 18px; font-size: 18px;
......
src/main.js
...@@ -6,6 +6,7 @@ import directive from './directive' ...@@ -6,6 +6,7 @@ import directive from './directive'
import {http} from './ajax/index.js'; import {http} from './ajax/index.js';
import axios from 'axios' import axios from 'axios'
import {Message} from 'element-ui'; import {Message} from 'element-ui';
import Util from "./tool";
//本地环境开启提示信息 //本地环境开启提示信息
Vue.config.productionTip = false; Vue.config.productionTip = false;
...@@ -14,6 +15,7 @@ Vue.config.productionTip = false; ...@@ -14,6 +15,7 @@ Vue.config.productionTip = false;
import '@/assets/css/public/common.min.css' import '@/assets/css/public/common.min.css'
import '@/assets/css/font/iconfont.css' import '@/assets/css/font/iconfont.css'
//加载过滤器 //加载过滤器
Object.keys(filters).forEach(key => Vue.filter(key, filters[key])); Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
...@@ -57,7 +59,6 @@ router.afterEach((to, from, next) => { ...@@ -57,7 +59,6 @@ router.afterEach((to, from, next) => {
} }
}); });
axios.interceptors.response.use(res => { axios.interceptors.response.use(res => {
return res; return res;
}, error => { }, error => {
...@@ -65,10 +66,25 @@ axios.interceptors.response.use(res => { ...@@ -65,10 +66,25 @@ axios.interceptors.response.use(res => {
return Promise.reject(new Error(error)) return Promise.reject(new Error(error))
}) })
//挂载到VUE原型上封装后的http请求 //挂载到VUE原型上封装后的http请求
Vue.prototype.$http = http; Vue.prototype.$http = http;
//路由页面回跳处理 mate里面参数 back：true 开启登录态回跳
router.beforeEach((to, from, next) => {
http('get', "/api/user/getuserinfo", {
}).then(data => {
let res = data.data;
if (res.err_code === 101) {
window.location.href = '/#/login'
}
}).catch(err => {
console.log(err.message);
})
next();
});
new Vue({ new Vue({
router, router,
render: (h) => h(App), render: (h) => h(App),
......
src/tool/index.js
export default { export default {
/**
sayHellow(){ * 设置cookie
alert("hello") * @param name
* @param value
* @param iDay
*/
setCookie: function (name, value, time, domain) {
domain = domain ? ";domain=" + domain : "";
var Days = time;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + exp.toGMTString() + ";path=/" + domain;
return true; return true;
},
/**
* 获取cookie
* @param name
* @returns {*}
*/
getCookie: function (name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (name == arr[0]) {
return arr[1];
}
}
return null;
},
/**
* 删除cookie
* @param name
*/
delCookie: function (name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = this.getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
} }
} }
src/views/Index/index.vue
...@@ -180,12 +180,11 @@ ...@@ -180,12 +180,11 @@
<li class="row rowCenter verCenter">本月</li> <li class="row rowCenter verCenter">本月</li>
<li class="row rowCenter verCenter">全年</li> <li class="row rowCenter verCenter">全年</li>
</ul> </ul>
<el-form>
<el-form-item label="更新日期"> <el-form-item label="更新日期">
<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
end-placeholder="结束日期">
</el-date-picker>
</el-form-item> </el-form-item>
</el-form>
</div> </div>
</div> </div>
<div class="wrap row"> <div class="wrap row">
...@@ -207,12 +206,13 @@ ...@@ -207,12 +206,13 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { import {
Button, Form,
FormItem,
Message, Message,
DatePicker DatePicker
} from 'element-ui'; } from 'element-ui';
Vue.use(Button).use(DatePicker); Vue.use(Form).use(FormItem).use(DatePicker);
export default { export default {
name: "index", name: "index",
...@@ -223,7 +223,6 @@ ...@@ -223,7 +223,6 @@
}, },
watch: {}, watch: {},
created() { created() {
}, },
mounted() { mounted() {
var myChart = echarts.init(document.getElementById('echarts_box')); var myChart = echarts.init(document.getElementById('echarts_box'));
......
src/views/User/login.vue
...@@ -51,6 +51,7 @@ ...@@ -51,6 +51,7 @@
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import {Loading, Message} from 'element-ui'; import {Loading, Message} from 'element-ui';
import Util from "../../tool";
export default { export default {
name: "index", name: "index",
...@@ -90,7 +91,6 @@ ...@@ -90,7 +91,6 @@
}, },
created() { created() {
this.updateCp(); this.updateCp();
Message('2121');
}, },
computed: {}, computed: {},
methods: { methods: {
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
background: 'rgba(0, 0, 0, 0)' background: 'rgba(0, 0, 0, 0)'
}); });
this.$http('post', "/auth/login1", { this.$http('post', "/auth/login", {
mobile: this.form.mobile, mobile: this.form.mobile,
password: this.form.password, password: this.form.password,
captcha: this.form.captcha, captcha: this.form.captcha,
...@@ -138,9 +138,11 @@ ...@@ -138,9 +138,11 @@
loadingInstance.close(); loadingInstance.close();
let res = data.data; let res = data.data;
if (res.err_code === 0) { if (res.err_code === 0) {
Util.setCookie("token", res.data.api_token, 1);
window.location.href = '/';
} else { } else {
Message(res.err_msg); Message(res.err_msg);
this.updateCp();
} }
}).catch(err => { }).catch(err => {
loadingInstance.close(); loadingInstance.close();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment