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 name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>用户中心</title>
<title>垛机监控系统</title>
</head>
<body>
<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>
</noscript>
<div id="app"></div>

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

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

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

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

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

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

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

@ -1,12 +1,49 @@
<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>
<script>
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>
<style>
<style lang='scss'>
.guide {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
&-box {
cursor: pointer;
}
}
</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>
export default {

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

@ -19,70 +19,17 @@
<div class="login-cover-logo">
<img src="@/assets/logo.png" alt="logo" />
</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 class="login-cover-title">垛机监控系统</div>
</div>
<!-- <div class="login-footer">Copyright © 2020 ZheHe technology CO., LTD.</div> -->
</div>
</template>
<script type="text/javascript">
import { mapMutations } from "vuex";
export default {
name: "login",
data() {
return {
// form
form: this.$form.createForm(this),
// btn loading控制
isLoading: false,
@ -91,7 +38,6 @@ export default {
};
},
methods: {
...mapMutations(["setState"]),
// 输入后判断手机号是否存在
existsAccount() {
if (!this.form.getFieldValue("account")) return;
@ -128,44 +74,9 @@ export default {
.name;
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() {
this.$refs.accountRef.focus();
}
mounted() {}
};
</script>
<style lang="scss">

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

@ -33,6 +33,7 @@ export default {
&-content {
background-color: #eeeeee;
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>
export default {
@ -6,5 +8,5 @@ export default {
};
</script>
<style>
<style lang='scss'>
</style>
Write Preview
Loading…
Cancel
Save