Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web
Showing
12 changed files
with
280 additions
and
59 deletions
src/api/login.js
0 → 100644
1 | import request from "@/utils/request"; | ||
2 | import SERVER from "./config"; | ||
3 | |||
4 | export function loginIn(username, password) { | ||
5 | return request({ | ||
6 | url: `${SERVER.MANAGEMENTAPI}/login?username=${username}&password=${password}`, | ||
7 | method: "post", | ||
8 | }); | ||
9 | } | ||
10 | export function loginOut() { | ||
11 | return request({ | ||
12 | url: `${SERVER.MANAGEMENTAPI}/logout`, | ||
13 | method: "post", | ||
14 | }); | ||
15 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/image/loginInnerBg.png
0 → 100644
32.5 KB
1 | <template> | 1 | <template> |
2 | <div class="navbar-con"> | 2 | <div class="navbar-con"> |
3 | <div class="navbar"> | 3 | <div class="navbar"> |
4 | <div class="title">{{ dicData['sysCode'] && dicData['sysCode'][0].DNAME }}</div> | 4 | <div class="title"> |
5 | <div class="user">欢迎进入系统 {{ name }} <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />退出系统</div> | 5 | {{ dicData["sysCode"] && dicData["sysCode"][0].DNAME }} |
6 | </div> | ||
7 | <div class="user"> | ||
8 | 欢迎进入系统 {{ name }} | ||
9 | <span @click="onCancel"> | ||
10 | <svg-icon icon-class="close" class="closeStyle" />退出系统</span | ||
11 | > | ||
12 | </div> | ||
6 | <div class="sidebarLeft"> | 13 | <div class="sidebarLeft"> |
7 | <sidebarLeft /> | 14 | <sidebarLeft /> |
8 | </div> | 15 | </div> |
... | @@ -13,22 +20,31 @@ | ... | @@ -13,22 +20,31 @@ |
13 | </div> | 20 | </div> |
14 | </template> | 21 | </template> |
15 | <script> | 22 | <script> |
16 | import sidebarLeft from './Sidebar/sidebarLeft' | 23 | import sidebarLeft from "./Sidebar/sidebarLeft"; |
17 | import sidebarRight from './Sidebar/sidebarRight' | 24 | import sidebarRight from "./Sidebar/sidebarRight"; |
18 | import { mapGetters } from 'vuex' | 25 | import { loginOut } from "@/api/login.js"; |
26 | import { mapGetters } from "vuex"; | ||
19 | export default { | 27 | export default { |
20 | components: { | 28 | components: { |
21 | sidebarLeft, | 29 | sidebarLeft, |
22 | sidebarRight | 30 | sidebarRight, |
23 | }, | 31 | }, |
24 | computed: { | 32 | computed: { |
25 | ...mapGetters(['sidebar', 'dicData', 'name']) | 33 | ...mapGetters(["sidebar", "dicData", "name"]), |
26 | }, | 34 | }, |
27 | methods: { | 35 | methods: { |
28 | onCancel () { | 36 | onCancel() { |
29 | } | 37 | loginOut() |
30 | } | 38 | .then((res) => { |
31 | } | 39 | sessionStorage.removeItem("token"); |
40 | this.$router.push("/login"); | ||
41 | }) | ||
42 | .catch((error) => { | ||
43 | // console.dir(error); | ||
44 | }); | ||
45 | }, | ||
46 | }, | ||
47 | }; | ||
32 | </script> | 48 | </script> |
33 | <style lang="scss" scoped> | 49 | <style lang="scss" scoped> |
34 | /deep/.el-menu--horizontal { | 50 | /deep/.el-menu--horizontal { |
... | @@ -40,9 +56,9 @@ export default { | ... | @@ -40,9 +56,9 @@ export default { |
40 | height: 34px; | 56 | height: 34px; |
41 | width: 130px; | 57 | width: 130px; |
42 | text-align: center; | 58 | text-align: center; |
43 | color: #FFFFFF; | 59 | color: #ffffff; |
44 | margin-right: 20px; | 60 | margin-right: 20px; |
45 | background: url('~@/image/navbar.png') no-repeat; | 61 | background: url("~@/image/navbar.png") no-repeat; |
46 | background-size: 100% 100%; | 62 | background-size: 100% 100%; |
47 | } | 63 | } |
48 | 64 | ||
... | @@ -56,7 +72,7 @@ export default { | ... | @@ -56,7 +72,7 @@ export default { |
56 | 72 | ||
57 | /deep/.el-submenu__title { | 73 | /deep/.el-submenu__title { |
58 | height: 34px; | 74 | height: 34px; |
59 | color: #FFFFFF; | 75 | color: #ffffff; |
60 | } | 76 | } |
61 | 77 | ||
62 | /deep/.el-submenu__title span { | 78 | /deep/.el-submenu__title span { |
... | @@ -88,9 +104,9 @@ export default { | ... | @@ -88,9 +104,9 @@ export default { |
88 | 104 | ||
89 | // 导航选中背景色 | 105 | // 导航选中背景色 |
90 | .xuanzhong { | 106 | .xuanzhong { |
91 | background: url('~@/image/selNavbar.png') no-repeat; | 107 | background: url("~@/image/selNavbar.png") no-repeat; |
92 | background-size: 100% 100%; | 108 | background-size: 100% 100%; |
93 | color: #FFFFFF !important; | 109 | color: #ffffff !important; |
94 | font-weight: 700; | 110 | font-weight: 700; |
95 | } | 111 | } |
96 | 112 | ||
... | @@ -110,7 +126,6 @@ export default { | ... | @@ -110,7 +126,6 @@ export default { |
110 | @extend .xuanzhong; | 126 | @extend .xuanzhong; |
111 | } | 127 | } |
112 | 128 | ||
113 | |||
114 | .navbar { | 129 | .navbar { |
115 | height: $headerHeight; | 130 | height: $headerHeight; |
116 | overflow: hidden; | 131 | overflow: hidden; |
... | @@ -119,12 +134,12 @@ export default { | ... | @@ -119,12 +134,12 @@ export default { |
119 | align-items: center; | 134 | align-items: center; |
120 | padding: 0 20px; | 135 | padding: 0 20px; |
121 | justify-content: space-between; | 136 | justify-content: space-between; |
122 | background: url('~@/image/header.png') no-repeat; | 137 | background: url("~@/image/header.png") no-repeat; |
123 | background-size: 100% 100%; | 138 | background-size: 100% 100%; |
124 | 139 | ||
125 | .user { | 140 | .user { |
126 | font-size: 12px; | 141 | font-size: 12px; |
127 | color: #FFFFFF; | 142 | color: #ffffff; |
128 | position: absolute; | 143 | position: absolute; |
129 | right: 20px; | 144 | right: 20px; |
130 | top: 0; | 145 | top: 0; |
... | @@ -143,10 +158,9 @@ export default { | ... | @@ -143,10 +158,9 @@ export default { |
143 | right: 0; | 158 | right: 0; |
144 | margin: 0 auto; | 159 | margin: 0 auto; |
145 | font-size: 32px; | 160 | font-size: 32px; |
146 | color: #FFFFFF; | 161 | color: #ffffff; |
147 | font-weight: 700; | 162 | font-weight: 700; |
148 | text-align: center; | 163 | text-align: center; |
149 | |||
150 | } | 164 | } |
151 | 165 | ||
152 | .right-menu { | 166 | .right-menu { | ... | ... |
1 | <template> | 1 | <template> |
2 | <el-menu router :default-active="activeMenu" mode="horizontal"> | 2 | <el-menu router :default-active="activeMenu" mode="horizontal"> |
3 | <!-- 权限菜单 --> | 3 | <!-- 权限菜单 --> |
4 | <sidebar-item v-for="route in permission_routes.slice(1, 4)" :key="route.path" :item="route" | 4 | <sidebar-item v-for="route in permission_routes.slice(2, 5)" :key="route.path" :item="route" |
5 | :base-path="route.path" /> | 5 | :base-path="route.path" /> |
6 | <!-- 菜单全部展示 --> | 6 | <!-- 菜单全部展示 --> |
7 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> | 7 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> | ... | ... |
1 | <template> | 1 | <template> |
2 | <el-menu router :default-active="activeMenu" mode="horizontal"> | 2 | <el-menu router :default-active="activeMenu" mode="horizontal"> |
3 | <!-- 权限菜单 --> | 3 | <!-- 权限菜单 --> |
4 | <sidebar-item v-for="route in permission_routes.slice(4, 7)" :key="route.path" :item="route" | 4 | <sidebar-item v-for="route in permission_routes.slice(5, 8)" :key="route.path" :item="route" |
5 | :base-path="route.path" /> | 5 | :base-path="route.path" /> |
6 | <!-- 菜单全部展示 --> | 6 | <!-- 菜单全部展示 --> |
7 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> | 7 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> | ... | ... |
1 | import router from './router' | 1 | import router from "./router"; |
2 | import store from './store' | 2 | import store from "./store"; |
3 | import { getMenuInfo } from '@/api/user' | 3 | import { getMenuInfo } from "@/api/user"; |
4 | import NProgress from 'nprogress' // progress bar | 4 | import NProgress from "nprogress"; // progress bar |
5 | import 'nprogress/nprogress.css' // progress bar style | 5 | import "nprogress/nprogress.css"; // progress bar style |
6 | import getPageTitle from '@/utils/get-page-title' | 6 | import getPageTitle from "@/utils/get-page-title"; |
7 | import Cookies from 'js-cookie' | 7 | import Cookies from "js-cookie"; |
8 | NProgress.configure({ showSpinner: false }) // NProgress Configuration | 8 | NProgress.configure({ showSpinner: false }); // NProgress Configuration |
9 | 9 | ||
10 | router.beforeEach(async (to, from, next) => { | 10 | router.beforeEach(async (to, from, next) => { |
11 | NProgress.start() | 11 | NProgress.start(); |
12 | document.title = getPageTitle(to.meta.title) | 12 | document.title = getPageTitle(to.meta.title); |
13 | let hasAddDict = store.state.dict.addDict | 13 | let hasAddDict = store.state.dict.addDict; |
14 | let hasAddRoute = store.state.permission.addRoutes | 14 | let hasAddRoute = store.state.permission.addRoutes; |
15 | if (to.path == "/login") { | ||
16 | sessionStorage.removeItem("token"); | ||
17 | next(); | ||
18 | } else { | ||
19 | //判断token是否存在 | ||
20 | const hasToken = sessionStorage.getItem("token"); | ||
21 | if (hasToken) { | ||
22 | //加载字典 | ||
15 | if (!hasAddDict) { | 23 | if (!hasAddDict) { |
16 | store.dispatch('dict/generateDic') | 24 | store.dispatch("dict/generateDic"); |
17 | } | 25 | } |
18 | if (hasAddRoute) { | 26 | if (hasAddRoute) { |
19 | next() | 27 | next(); |
20 | } else { | 28 | } else { |
21 | const { result: getMenuData } = await getMenuInfo() | 29 | //请求菜单 |
22 | const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData) | 30 | const { result: getMenuData } = await getMenuInfo() || []; |
31 | const accessRoutes = await store.dispatch( | ||
32 | "permission/generateRoutes", | ||
33 | getMenuData | ||
34 | ); | ||
23 | // 获取用户信息 | 35 | // 获取用户信息 |
24 | await store.dispatch('user/getUserInfo') | 36 | await store.dispatch("user/getUserInfo"); |
25 | router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }]) | 37 | router.addRoutes([ |
26 | const routeTo = Cookies.get('routerTo') | 38 | ...accessRoutes, |
27 | if (routeTo && routeTo !== '/') { | 39 | { path: "*", redirect: "/404", hidden: true }, |
28 | next({ ...to, replace: true }) | 40 | ]); |
41 | const routeTo = Cookies.get("routerTo"); | ||
42 | if (routeTo && routeTo !== "/") { | ||
43 | next({ ...to, replace: true }); | ||
44 | } else { | ||
45 | next("/home"); | ||
46 | } | ||
47 | } | ||
29 | } else { | 48 | } else { |
30 | next('/home') | 49 | next("/login"); |
31 | } | 50 | } |
32 | } | 51 | } |
33 | NProgress.done() | 52 | NProgress.done(); |
34 | }) | 53 | }); |
35 | router.afterEach(to => { | 54 | router.afterEach((to) => { |
36 | // 解决刷新页面报404问题 | 55 | // 解决刷新页面报404问题 |
37 | Cookies.set("routerTo", to.fullPath) | 56 | Cookies.set("routerTo", to.fullPath); |
38 | NProgress.done() | 57 | NProgress.done(); |
39 | }) | 58 | }); | ... | ... |
... | @@ -20,6 +20,12 @@ export const constantRoutes = [ | ... | @@ -20,6 +20,12 @@ export const constantRoutes = [ |
20 | } | 20 | } |
21 | ] | 21 | ] |
22 | }, | 22 | }, |
23 | //登录 | ||
24 | { | ||
25 | path: "/login", | ||
26 | name: "login", | ||
27 | component: () => import("@/views/login/index.vue"), | ||
28 | }, | ||
23 | // 监管首页 | 29 | // 监管首页 |
24 | { | 30 | { |
25 | path: '/', | 31 | path: '/', |
... | @@ -240,7 +246,7 @@ export const asyncRoutes = [ | ... | @@ -240,7 +246,7 @@ export const asyncRoutes = [ |
240 | meta: { title: '角色管理' } | 246 | meta: { title: '角色管理' } |
241 | } | 247 | } |
242 | ] | 248 | ] |
243 | } | 249 | }, |
244 | ] | 250 | ] |
245 | 251 | ||
246 | const createRouter = () => | 252 | const createRouter = () => | ... | ... |
... | @@ -10,8 +10,7 @@ const service = axios.create({ | ... | @@ -10,8 +10,7 @@ const service = axios.create({ |
10 | baseURL: process.env.VUE_APP_BASE_API, | 10 | baseURL: process.env.VUE_APP_BASE_API, |
11 | withCredentials: true, //是否允许跨域 | 11 | withCredentials: true, //是否允许跨域 |
12 | headers: { | 12 | headers: { |
13 | 'Content-Type': 'application/json; charset=utf-8', | 13 | 'Content-Type': 'application/json; charset=utf-8' |
14 | 'Authorization': 'bearer AT-4-MxSrO29Coe7VTazx8uuixtqqgO-hvCB6' | ||
15 | }, | 14 | }, |
16 | timeout: 15000 | 15 | timeout: 15000 |
17 | }) | 16 | }) |
... | @@ -19,8 +18,8 @@ const service = axios.create({ | ... | @@ -19,8 +18,8 @@ const service = axios.create({ |
19 | // request interceptor | 18 | // request interceptor |
20 | service.interceptors.request.use( | 19 | service.interceptors.request.use( |
21 | config => { | 20 | config => { |
22 | config.headers.Authorization = | 21 | //调用登录接口时无token,也不需要传token,其他接口都传入token |
23 | 'bearer AT-4-MxSrO29Coe7VTazx8uuixtqqgO-hvCB6' | 22 | config.headers.Authorization = sessionStorage.getItem("token") || ""; |
24 | config.headers.Accept = 'application/json' | 23 | config.headers.Accept = 'application/json' |
25 | return config | 24 | return config |
26 | }, | 25 | }, |
... | @@ -70,7 +69,8 @@ function handleErrorData (errMes) { | ... | @@ -70,7 +69,8 @@ function handleErrorData (errMes) { |
70 | } else { | 69 | } else { |
71 | switch (errMes.code) { | 70 | switch (errMes.code) { |
72 | case 401: | 71 | case 401: |
73 | Message.error("未授权,请重新登录!"); | 72 | Message.error("由于长时间未操作,请重新登录!"); |
73 | window.location.href = `http://${window.location.host}` | ||
74 | break; | 74 | break; |
75 | case 403: | 75 | case 403: |
76 | Message.error("拒绝访问"); | 76 | Message.error("拒绝访问"); | ... | ... |
src/views/login/index.vue
0 → 100644
1 | <template> | ||
2 | <div class="bg"> | ||
3 | <div class="login-inner-bg login"> | ||
4 | <div class="user_style"> | ||
5 | <el-form | ||
6 | :model="user" | ||
7 | :rules="rules" | ||
8 | ref="user" | ||
9 | id="loginform" | ||
10 | class="demo-ruleForm" | ||
11 | > | ||
12 | <el-form-item prop="account"> | ||
13 | <el-input v-model="user.account" placeholder="用户名"></el-input> | ||
14 | </el-form-item> | ||
15 | <el-form-item prop="password"> | ||
16 | <el-input | ||
17 | type="password" | ||
18 | v-model="user.password" | ||
19 | placeholder="登录密码" | ||
20 | ></el-input> | ||
21 | </el-form-item> | ||
22 | <el-form-item> | ||
23 | <el-checkbox | ||
24 | label="记住用户名" | ||
25 | @change="checkUserName" | ||
26 | ></el-checkbox> | ||
27 | </el-form-item> | ||
28 | <el-form-item id="login"> | ||
29 | <el-button type="primary" style="width: 100%" @click="login('user')" | ||
30 | >登录</el-button | ||
31 | > | ||
32 | </el-form-item> | ||
33 | </el-form> | ||
34 | </div> | ||
35 | </div> | ||
36 | </div> | ||
37 | </template> | ||
38 | |||
39 | <script> | ||
40 | import { loginIn } from "@/api/login.js"; | ||
41 | export default { | ||
42 | name: "Login", | ||
43 | data: function () { | ||
44 | return { | ||
45 | user: { | ||
46 | account: "", | ||
47 | password: "", | ||
48 | checkStatus: false, | ||
49 | }, | ||
50 | rules: { | ||
51 | account: [{ required: true, message: "请填写帐号", trigger: "blur" }], | ||
52 | password: [{ required: true, message: "请填写密码", trigger: "blur" }], | ||
53 | }, | ||
54 | }; | ||
55 | }, | ||
56 | mounted: function () { | ||
57 | // this.checkUserName(); | ||
58 | }, | ||
59 | methods: { | ||
60 | //记住用户名 | ||
61 | checkUserName: function (flag) { | ||
62 | this.user.checkStatus = flag; | ||
63 | if (this.user.checkStatus) { | ||
64 | localStorage.setItem("accountId", this.user.account); | ||
65 | let name = localStorage.getItem("accountId"); | ||
66 | if (name === "") { | ||
67 | return; | ||
68 | } else { | ||
69 | this.user.account = name; | ||
70 | } | ||
71 | } else { | ||
72 | this.user.account = localStorage.getItem("accountId"); | ||
73 | } | ||
74 | }, | ||
75 | login(user) { | ||
76 | var self = this; | ||
77 | this.$refs[user].validate((valid) => { | ||
78 | if (valid) { | ||
79 | loginIn(self.user.account, self.user.password) | ||
80 | .then((res) => { | ||
81 | if (res.status === 1) { | ||
82 | sessionStorage.setItem("token", `Bearer ${res.content}`); | ||
83 | this.$router.push('/'); | ||
84 | } else { | ||
85 | alert(res.message); | ||
86 | } | ||
87 | }) | ||
88 | .catch((error) => { | ||
89 | // console.dir(error); | ||
90 | }); | ||
91 | } | ||
92 | }); | ||
93 | }, | ||
94 | }, | ||
95 | components: {}, | ||
96 | }; | ||
97 | </script> | ||
98 | <style scoped> | ||
99 | .bg { | ||
100 | width: 100%; | ||
101 | height: 100%; | ||
102 | background: url(../../image/bg.png) no-repeat; | ||
103 | background-size: 100% 100%; | ||
104 | overflow: hidden; | ||
105 | } | ||
106 | |||
107 | .login-inner-bg { | ||
108 | background: url(../../image/loginInnerBg.png) no-repeat; | ||
109 | width: 393px; | ||
110 | height: 348px; | ||
111 | margin: 35vh auto 0; | ||
112 | overflow: hidden; | ||
113 | } | ||
114 | |||
115 | .login .user_style { | ||
116 | margin: 90px 20px 0; | ||
117 | } | ||
118 | |||
119 | .login .btn { | ||
120 | width: 100%; | ||
121 | height: 6vh; | ||
122 | background-color: #00c2de; | ||
123 | border-radius: 5px; | ||
124 | font-size: 1.4vw; | ||
125 | color: #ffffff; | ||
126 | } | ||
127 | |||
128 | .login .btn:hover { | ||
129 | cursor: pointer; | ||
130 | background-color: #2d8cf0; | ||
131 | } | ||
132 | |||
133 | #loginform .el-button { | ||
134 | background: #409eff !important; | ||
135 | color: #ffffff !important; | ||
136 | } | ||
137 | |||
138 | #loginform .el-button:hover { | ||
139 | cursor: pointer !important; | ||
140 | background-color: #2d8cf0 !important; | ||
141 | } | ||
142 | </style> | ||
143 | <style> | ||
144 | .inputUser .ivu-input { | ||
145 | padding: 6px 24px !important; | ||
146 | border: 1px solid #9f9f9f !important; | ||
147 | } | ||
148 | |||
149 | #loginform .el-input__inner { | ||
150 | width: 100% !important; | ||
151 | caret-color: #000 !important; | ||
152 | color: #606266 !important; | ||
153 | border-radius: 4px !important; | ||
154 | border: 1px solid #67c23a !important; | ||
155 | background: #fff !important; | ||
156 | opacity: 1 !important; | ||
157 | } | ||
158 | |||
159 | #loginform .el-input__inner::-webkit-input-placeholder { | ||
160 | /* WebKit browsers */ | ||
161 | color: #80807f !important; | ||
162 | } | ||
163 | .el-checkbox__label { | ||
164 | color: #fff; | ||
165 | } | ||
166 | </style> |
... | @@ -286,6 +286,7 @@ export default { | ... | @@ -286,6 +286,7 @@ export default { |
286 | handleMinus (index, row) { | 286 | handleMinus (index, row) { |
287 | removeTreeListItem(this.tableData, row.dictid, 'dictid'); | 287 | removeTreeListItem(this.tableData, row.dictid, 'dictid'); |
288 | this.tableData = judgeSort(this.tableData) | 288 | this.tableData = judgeSort(this.tableData) |
289 | this.key++; | ||
289 | }, | 290 | }, |
290 | handleSubmit () { | 291 | handleSubmit () { |
291 | editDictNode({ | 292 | editDictNode({ | ... | ... |
... | @@ -96,7 +96,7 @@ export default { | ... | @@ -96,7 +96,7 @@ export default { |
96 | ], | 96 | ], |
97 | telephone: [ | 97 | telephone: [ |
98 | { | 98 | { |
99 | pattern: /^((d{3,4})|d{3,4}-|s)?d{7,14}$/, | 99 | pattern: /\d{3}-\d{8}|\d{4}-\d{7}/, |
100 | message: "办公电话格式有误", | 100 | message: "办公电话格式有误", |
101 | trigger: "blur", | 101 | trigger: "blur", |
102 | }, | 102 | }, | ... | ... |
-
Please register or sign in to post a comment