upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

页面修改

Browse Source
1.0.0
黄崇栋 6 years ago
parent 3e47cfe093
commit 356baa8785
12 changed files with 13601 additions and 189 deletions
Show Stats Download Patch File Download Diff File

13423
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
public/index.html
Unescape Escape View File

@ -6,12 +6,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>用户中心</title> <title>垛机监控系统</title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but 用户中心 doesn't work properly without JavaScript enabled. Please enable it to <strong>We're sorry but 垛机监控系统 doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong> continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>

94
src/components/common/the-aside.vue
Unescape Escape View File

@ -1,8 +1,10 @@
<template> <template>
<div class="aside"> <div class="aside">
<div class="aside-logo" v-show="!aside_collapsed"> <transition name="slide">
<span>昆船随行式垛机监测系统</span> <div class="aside-logo" v-show="!aside_collapsed">
</div> <span>昆船随行式垛机监测系统</span>
</div>
</transition>
<a-menu <a-menu
:selectedKeys="selectedKeys" :selectedKeys="selectedKeys"
:openKeys.sync="openKeys" :openKeys.sync="openKeys"
@ -52,46 +54,42 @@ export default {
}, },
// 设置路由 // 设置路由
setRoute() { setRoute() {
console.log( let parents = [];
"this.$router.options.routes[0].children", if (this.userInfo.id) {
this.$router.options.routes[0].children parents = this.$router.options.routes[0].children.filter(
); ele => {
// 由于目前页面权限和操作权限没分登录level if (
// 所以需要先匹配出有权限的路由 this.userInfo.permissionList.some(item => {
let parents = this.$router.options.routes[0].children.filter( return (
ele => { item.rights === ele.name &&
if ( ele.name.indexOf("personal") < 0
this.userInfo.permissionList.some(item => { );
return ( })
item.rights === ele.name && ) {
ele.name.indexOf("personal") < 0 return ele;
); }
})
) {
return ele;
} }
} );
); // // 递归权限路由
// // 递归权限路由 let recursionRoute = parents => {
let recursionRoute = parents => { for (let i = 0; i < parents.length; i++) {
for (let i = 0; i < parents.length; i++) { let isAuth = this.userInfo.permissionList.some(item => {
let isAuth = this.userInfo.permissionList.some(item => { return parents[i].name === item.rights;
return parents[i].name === item.rights; });
}); parents[i].meta.auth = isAuth;
parents[i].meta.auth = isAuth; parents[i].children &&
parents[i].children && parents[i].children.length > 0 &&
parents[i].children.length > 0 && recursionRoute(parents[i].children);
recursionRoute(parents[i].children); }
} };
}; recursionRoute(parents);
recursionRoute(parents); } else {
parents = this.$router.options.routes[0].children.filter(
// 无权限测试时 item => {
// let parents = this.$router.options.routes[0].children.filter( return !item.name.startsWith("center");
// item => { }
// return !item.name.startsWith("center"); );
// } }
// );
this.routes = parents; this.routes = parents;
this.initialKeys(); this.initialKeys();
@ -134,12 +132,19 @@ export default {
position: relative; position: relative;
box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35); box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
z-index: 1000; z-index: 1000;
.slide-enter-active {
transition: all 1s;
}
.slide-enter,
.slide-leave-to {
width: 0;
opacity: 0;
}
&-logo { &-logo {
height: 65px; height: 65px;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #00284d; background-color: #00284d;
padding-left: 24px;
span { span {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
@ -149,5 +154,8 @@ export default {
.ant-menu-inline { .ant-menu-inline {
width: 256px; width: 256px;
} }
.ant-menu-inline-collapsed {
width: 80px;
}
} }
</style> </style>

114
src/router/index.js
Unescape Escape View File

@ -23,25 +23,46 @@ VueRouter.prototype.push = function push(location) {
} }
const routes = [{ const routes = [{
path: '/', path: '/',
redirect: { redirect: {
name: 'login' name: 'guide'
},
component: () => import('../views/main.vue'),
children: [
...allRouter
]
},
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
}, },
{ component: () => import('@/views/main'),
path: '*', children: [{
name: '404', path: 'realTime',
component: () => import('../views/404.vue') name: 'realTime',
} meta: {
icon: 'global',
name: '实时监控'
},
component: () => import('@/views/realTime/index')
}, {
path: 'history',
name: 'history',
meta: {
icon: 'cloud',
name: '历史监控'
},
component: () => import('@/views/history/index')
}, {
path: 'center',
name: 'center',
meta: {
name: '个人中心'
},
component: () => import('@/views/center')
}]
},
{
path: '/guide',
name: 'guide',
component: () => import('../views/guide.vue')
},
{
path: '*',
name: '404',
component: () => import('../views/404.vue')
}
] ]
const router = new VueRouter({ const router = new VueRouter({
@ -49,34 +70,35 @@ const router = new VueRouter({
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
let userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}') next()
// 校验是否登录 // let userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
if (userInfo.id) { // // 校验是否登录
// 匹配不到 404 // if (userInfo.id) {
if (!to.name) next(); // // 匹配不到 404
// 权限 // if (!to.name) next();
if (userInfo.permissionList.some((item) => { // // 权限
return item.rights === to.name // if (userInfo.permissionList.some((item) => {
})) { // return item.rights === to.name
next() // })) {
} else { // next()
if (to.name === 'login') { // } else {
next() // if (to.name === 'login') {
} else { // next()
Vue.prototype.$message.info('没有权限') // } else {
next(false) // Vue.prototype.$message.info('没有权限')
} // next(false)
} // }
} else { // }
if (to.name === 'login') { // } else {
next() // if (to.name === 'login') {
} else if (to.name !== 'login') { // next()
Vue.prototype.$message.info('请先登录') // } else if (to.name !== 'login') {
next('/login') // Vue.prototype.$message.info('请先登录')
} else { // next('/login')
next('/login') // } else {
} // next('/login')
} // }
// }
}) })
export default router export default router

5
src/style/common/layout.scss
Unescape Escape View File

@ -74,6 +74,11 @@
} }
} }
.bg {
&-white {
background-color: #ffffff;
}
}
.no-margin { .no-margin {
margin: 0 !important; margin: 0 !important;

43
src/views/guide.vue
Unescape Escape View File

@ -1,12 +1,49 @@
<template> <template>
<div class="guide"></div> <div class="guide">
<div
class="guide-box mr64"
v-for="(item, index) in list"
:key="index"
@click="go(index)"
>{{item.label}}</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "guide" name: "guide",
data() {
return {
list: [
{
label: "随行监控系统"
},
{
label: "盘点任务模式"
}
]
};
},
methods: {
go(index) {
if (index === 0) {
this.$router.push({ name: "realTime" });
} else {
this.$message.info("暂未开放");
}
}
}
}; };
</script> </script>
<style> <style lang='scss'>
.guide {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
&-box {
cursor: pointer;
}
}
</style> </style>

1
src/views/history/api/history-api.js
Unescape Escape View File

@ -0,0 +1 @@
export default {}

4
src/views/history/index.vue
Unescape Escape View File

@ -1,4 +1,6 @@
<template></template> <template>
<div class="history"></div>
</template>
<script> <script>
export default { export default {

93
src/views/login.vue
Unescape Escape View File

@ -19,70 +19,17 @@
<div class="login-cover-logo"> <div class="login-cover-logo">
<img src="@/assets/logo.png" alt="logo" /> <img src="@/assets/logo.png" alt="logo" />
</div> </div>
<div class="login-cover-title">用户中心</div> <div class="login-cover-title">垛机监控系统</div>
<a-form :form="form">
<a-form-item>
<a-input
ref="accountRef"
v-decorator="['account', { rules: [{ required: true, message: '请输入手机号' }] }]"
size="large"
autocomplete="off"
placeholder="请输入手机号"
>
<a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
type="password"
size="large"
autocomplete="off"
placeholder="请输入密码"
:style="{ display: 'none' }"
>
<a-icon slot="prefix" type="lock" />
</a-input>
<a-input
v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
type="password"
size="large"
autocomplete="off"
placeholder="请输入密码"
@keypress.enter.native="handleSubmit"
>
<a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
</a-form>
<div class="login-other">
<div class="login-forget">
<a href="javascript:;" @click="forget">忘记密码</a>
</div>
<a-button
type="primary"
@click="handleSubmit"
class="login-submit"
size="large"
:loading="isLoading"
:disabled="!(form.getFieldValue('account') && form.getFieldValue('password'))"
>登录</a-button>
</div>
</div> </div>
<!-- <div class="login-footer">Copyright © 2020 ZheHe technology CO., LTD.</div> --> <!-- <div class="login-footer">Copyright © 2020 ZheHe technology CO., LTD.</div> -->
</div> </div>
</template> </template>
<script type="text/javascript"> <script type="text/javascript">
import { mapMutations } from "vuex";
export default { export default {
name: "login", name: "login",
data() { data() {
return { return {
// form
form: this.$form.createForm(this),
// btn loading控制 // btn loading控制
isLoading: false, isLoading: false,
@ -91,7 +38,6 @@ export default {
}; };
}, },
methods: { methods: {
...mapMutations(["setState"]),
// 输入后判断手机号是否存在 // 输入后判断手机号是否存在
existsAccount() { existsAccount() {
if (!this.form.getFieldValue("account")) return; if (!this.form.getFieldValue("account")) return;
@ -128,44 +74,9 @@ export default {
.name; .name;
this.$router.push({ name: routerName }); this.$router.push({ name: routerName });
} }
},
// 登录
handleSubmit() {
this.isLoading = true;
this.form.validateFields((err, values) => {
console.log(values);
if (values.account && values.password) {
this.$api.userApi
.login({
data: {
account: values.account,
password: values.password
}
})
.then(res => {
this.permissionCheck(res.data);
this.isLoading = false;
})
.catch(err => {
console.log(err);
this.isLoading = false;
});
}
});
},
// 忘记密码
forget() {
const h = this.$createElement;
this.$info({
title: "忘记密码",
content: h("div", {}, [h("p", "如需重置密码，请联系管理员")]),
onOk() {}
});
} }
}, },
mounted() { mounted() {}
this.$refs.accountRef.focus();
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">

1
src/views/main.vue
Unescape Escape View File

@ -33,6 +33,7 @@ export default {
&-content { &-content {
background-color: #eeeeee; background-color: #eeeeee;
flex: 1; flex: 1;
padding: 24px;
} }
} }
} }

2
src/views/realTime/api/realTime-api.js
Unescape Escape View File

@ -1 +1 @@
export default {}

6
src/views/realTime/index.vue
Unescape Escape View File

@ -1,4 +1,6 @@
<template></template> <template>
<div class="realTime bg-white"></div>
</template>
<script> <script>
export default { export default {
@ -6,5 +8,5 @@ export default {
}; };
</script> </script>
<style> <style lang='scss'>
</style> </style>
Write Preview
Loading…
Cancel
Save