bonus
/
ahdevicemgt-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录接口调试，项目正常运行，基础管理菜单基本分配

This commit is contained in:
BianLzhaoMin 2024-08-08 17:36:55 +08:00
parent e23954a9de
commit eb4e8c8c13
13 changed files with 800 additions and 626 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/api/base/contun.js → src/api/base/customer.js
View File

4
src/api/base/project.js
View File

@ -5,11 +5,11 @@ import request from '@/utils/request'
/** 新增工程 */ /** 新增工程 */
export const addProjectApi = (data) => { export const addProjectApi = (data) => {
return request.post('/xxx/xx', data) return request.post('/base/project/add', data)
} }
/** 删除工程 */ /** 删除工程 */
export const deleteProjectApi = (id) => { export const deleteProjectApi = (id) => {
return request.delete('/xxx/xx', id) return request.delete('/base/project/deleteProById', id)
} }
/** 修改工程 */ /** 修改工程 */
export const editProjectApi = (data) => { export const editProjectApi = (data) => {

2
src/api/base/unitType.js
View File

@ -13,7 +13,7 @@ export const deleteUnitTypeApi = (id) => {
} }
/** 修改单位类型*/ /** 修改单位类型*/
export const editUnitTypeApi = (data) => { export const editUnitTypeApi = (data) => {
return request.post('/xxx/xx', data) return request.post('/base/unittype/update', data)
} }
/** 单位类型列表查询 */ /** 单位类型列表查询 */
export const queryUnitTypeListApi = (data) => { export const queryUnitTypeListApi = (data) => {

81
src/permission.js
View File

@ -12,47 +12,46 @@ const whiteList = ['/login', '/register']
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start()
next() if (getToken()) {
// if (getToken()) { console.log(getToken())
// console.log(getToken()) to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
// to.meta.title && store.dispatch('settings/setTitle', to.meta.title) /* has token*/
// /* has token*/ if (to.path === '/login') {
// if (to.path === '/login') { next({ path: '/' })
// next({ path: '/' }) NProgress.done()
// NProgress.done() } else if (whiteList.indexOf(to.path) !== -1) {
// } else if (whiteList.indexOf(to.path) !== -1) { next()
// next() } else {
// } else { if (store.getters.roles.length === 0) {
// if (store.getters.roles.length === 0) { isRelogin.show = true
// isRelogin.show = true // 判断当前用户是否已拉取完user_info信息
// // 判断当前用户是否已拉取完user_info信息 store.dispatch('GetInfo').then(() => {
// store.dispatch('GetInfo').then(() => { isRelogin.show = false
// isRelogin.show = false store.dispatch('GenerateRoutes').then(accessRoutes => {
// store.dispatch('GenerateRoutes').then(accessRoutes => { // 根据roles权限生成可访问的路由表
// // 根据roles权限生成可访问的路由表 router.addRoutes(accessRoutes) // 动态添加可访问路由表
// router.addRoutes(accessRoutes) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
// next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 })
// }) }).catch(err => {
// }).catch(err => { store.dispatch('LogOut').then(() => {
// store.dispatch('LogOut').then(() => { Message.error(err)
// Message.error(err) next({ path: '/' })
// next({ path: '/' }) })
// }) })
// }) } else {
// } else { next()
// next() }
// } }
// } } else {
// } else { // 没有token
// // 没有token if (whiteList.indexOf(to.path) !== -1) {
// if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
// // 在免登录白名单，直接进入 next()
// next() } else {
// } else { next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
// next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页 NProgress.done()
// NProgress.done() }
// } }
// }
}) })
router.afterEach(() => { router.afterEach(() => {

48
src/router/index.js
View File

@ -72,30 +72,30 @@ export const constantRoutes = [
name: 'Index', name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true } meta: { title: '首页', icon: 'dashboard', affix: true }
}, },
{ // {
path: 'ProjectManage', // path: 'ProjectManage',
component: () => import('@/views/base/project'), // component: () => import('@/views/base/project'),
name: 'ProjectManage', // name: 'ProjectManage',
meta: { title: '工程管理', icon: 'dashboard', affix: true } // meta: { title: '工程管理', icon: 'dashboard', affix: true }
}, // },
{ // {
path: 'ContactUnits', // path: 'ContactUnits',
component: () => import('@/views/base/contun'), // component: () => import('@/views/base/contun'),
name: 'ContactUnits', // name: 'ContactUnits',
meta: { title: '往来单位', icon: 'dashboard', affix: true } // meta: { title: '往来单位', icon: 'dashboard', affix: true }
}, // },
{ // {
path: 'UnitType', // path: 'UnitType',
component: () => import('@/views/base/unitType'), // component: () => import('@/views/base/unitType'),
name: 'UnitType', // name: 'UnitType',
meta: { title: '单位类型', icon: 'dashboard', affix: true } // meta: { title: '单位类型', icon: 'dashboard', affix: true }
}, // },
{ // {
path: 'ProtocolManage', // path: 'ProtocolManage',
component: () => import('@/views/base/agreement'), // component: () => import('@/views/base/agreement'),
name: 'ProtocolManage', // name: 'ProtocolManage',
meta: { title: '协议管理', icon: 'dashboard', affix: true } // meta: { title: '协议管理', icon: 'dashboard', affix: true }
} // }
] ]
}, },
{ {

2
src/store/modules/user.js
View File

@ -92,6 +92,8 @@ const user = {
commit('SET_TOKEN', data.access_token) commit('SET_TOKEN', data.access_token)
setExpiresIn(data.expires_in) setExpiresIn(data.expires_in)
commit('SET_EXPIRES_IN', data.expires_in) commit('SET_EXPIRES_IN', data.expires_in)
console.log(res, '登录成功')
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)

0
src/views/base/contun/components/form-contact-units.vue → src/views/base/customer/components/form-contact-units.vue
View File

0
src/views/base/contun/config.js → src/views/base/customer/config.js
View File

0
src/views/base/contun/index.vue → src/views/base/customer/index.vue
View File

17
src/views/base/project/components/form-project.vue
View File

@ -10,13 +10,13 @@
> >
<el-row type="flex" justify="space-between" :gutter="24"> <el-row type="flex" justify="space-between" :gutter="24">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="工程名称" prop="scrapNum"> <el-form-item label="工程名称" prop="projectName">
<el-input v-model="projectParams.scrapNum" /> <el-input v-model="projectParams.projectName" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="工程编号" prop="pro_code"> <el-form-item label="工程编号" prop="pcNo">
<el-input v-model="projectParams.pro_code" /> <el-input v-model="projectParams.pcNo" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -110,6 +110,7 @@
</template> </template>
<script> <script>
import { addProjectApi } from '@/api/base/project.js'
export default { export default {
name: 'FormProject', name: 'FormProject',
props: { props: {
@ -126,8 +127,8 @@ export default {
data() { data() {
return { return {
projectParams: { projectParams: {
scrapNum: '', projectName: '', // 工程名称
pro_code: '', pcNo: '', // 工程编号
pro_unit: '', pro_unit: '',
pro_type_of: '', pro_type_of: '',
pro_type: '', pro_type: '',
@ -137,7 +138,7 @@ export default {
}, },
// 校验规则 // 校验规则
projectParamsRules: { projectParamsRules: {
scrapNum: [ projectName: [
{ {
required: true, required: true,
message: '请输入工程名称', message: '请输入工程名称',
@ -178,7 +179,7 @@ export default {
methods: { methods: {
/** 确认按钮 */ /** 确认按钮 */
onSubmit() { onSubmit() {
this.$refs.projectParamsRef.validate((valid) => { this.$refs.projectParamsRef.validate(valid => {
if (valid) { if (valid) {
console.log('校验通过') console.log('校验通过')
// 1. 表单校验通过后调后台 Api // 1. 表单校验通过后调后台 Api

430
src/views/login.vue
View File

@ -1,219 +1,279 @@
<template> <template>
<div class="login"> <div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form
<h3 class="title">博诺思后台管理系统</h3> ref="loginForm"
<el-form-item prop="username"> :model="loginForm"
<el-input :rules="loginRules"
v-model="loginForm.username" class="login-form"
type="text"
auto-complete="off"
placeholder="账号"
> >
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <h3 class="title">博诺思后台管理系统</h3>
</el-input> <el-form-item prop="username">
</el-form-item> <el-input
<el-form-item prop="password"> v-model="loginForm.username"
<el-input type="text"
v-model="loginForm.password" auto-complete="off"
type="password" placeholder="账号"
auto-complete="off" >
placeholder="密码" <svg-icon
@keyup.enter.native="handleLogin" slot="prefix"
> icon-class="user"
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> class="el-input__icon input-icon"
</el-input> />
</el-form-item> </el-input>
<el-form-item prop="code" v-if="captchaEnabled"> </el-form-item>
<el-input <el-form-item prop="password">
v-model="loginForm.code" <el-input
auto-complete="off" v-model="loginForm.password"
placeholder="验证码" type="password"
style="width: 63%" auto-complete="off"
@keyup.enter.native="handleLogin" placeholder="密码"
> @keyup.enter.native="handleLogin"
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> >
</el-input> <svg-icon
<div class="login-code"> slot="prefix"
<img :src="codeUrl" @click="getCode" class="login-code-img"/> icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<img
:src="codeUrl"
@click="getCode"
class="login-code-img"
/>
</div>
</el-form-item>
<el-checkbox
v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-form-item style="width: 100%">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2024 bonus.vip All Rights Reserved.</span>
</div> </div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2024 bonus.vip All Rights Reserved.</span>
</div> </div>
</div>
</template> </template>
<script> <script>
import { getCodeImg } from "@/api/login"; import { getCodeImg } from '@/api/login'
import Cookies from "js-cookie"; import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from '@/utils/jsencrypt'
export default { export default {
name: "Login", name: 'Login',
data() { data() {
return { return {
codeUrl: "", codeUrl: '',
loginForm: { loginForm: {
username: "admin", username: 'admin',
password: "admin123", password: 'admin123',
rememberMe: false, rememberMe: false,
code: "", code: '',
uuid: "" uuid: '',
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" } {
], required: true,
password: [ trigger: 'blur',
{ required: true, trigger: "blur", message: "请输入您的密码" } message: '请输入您的账号',
], },
code: [{ required: true, trigger: "change", message: "请输入验证码" }] ],
}, password: [
loading: false, {
// 验证码开关 required: true,
captchaEnabled: true, trigger: 'blur',
// 注册开关 message: '请输入您的密码',
register: false, },
redirect: undefined ],
}; code: [
}, {
watch: { required: true,
$route: { trigger: 'change',
handler: function(route) { message: '请输入验证码',
this.redirect = route.query && route.query.redirect; },
}, ],
immediate: true },
} loading: false,
}, // 验证码开关
created() { captchaEnabled: true,
this.getCode(); // 注册开关
this.getCookie(); register: false,
}, redirect: undefined,
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
} }
});
}, },
getCookie() { watch: {
const username = Cookies.get("username"); $route: {
const password = Cookies.get("password"); handler: function (route) {
const rememberMe = Cookies.get('rememberMe') this.redirect = route.query && route.query.redirect
this.loginForm = { },
username: username === undefined ? this.loginForm.username : username, immediate: true,
password: password === undefined ? this.loginForm.password : decrypt(password), },
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
}, },
handleLogin() { created() {
this.$refs.loginForm.validate(valid => { this.getCode()
if (valid) { this.getCookie()
this.loading = true; },
if (this.loginForm.rememberMe) { methods: {
Cookies.set("username", this.loginForm.username, { expires: 30 }); getCode() {
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }); getCodeImg().then(res => {
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }); this.captchaEnabled =
} else { res.captchaEnabled === undefined ? true : res.captchaEnabled
Cookies.remove("username"); if (this.captchaEnabled) {
Cookies.remove("password"); this.codeUrl = 'data:image/gif;base64,' + res.img
Cookies.remove('rememberMe'); this.loginForm.uuid = res.uuid
} }
this.$store.dispatch("Login", this.loginForm).then(() => { })
this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); },
}).catch(() => { getCookie() {
this.loading = false; const username = Cookies.get('username')
if (this.captchaEnabled) { const password = Cookies.get('password')
this.getCode(); const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username:
username === undefined ? this.loginForm.username : username,
password:
password === undefined
? this.loginForm.password
: decrypt(password),
rememberMe:
rememberMe === undefined ? false : Boolean(rememberMe),
} }
}); },
} handleLogin() {
}); this.$refs.loginForm.validate(valid => {
} if (valid) {
} this.loading = true
}; if (this.loginForm.rememberMe) {
Cookies.set('username', this.loginForm.username, {
expires: 30,
})
Cookies.set(
'password',
encrypt(this.loginForm.password),
{ expires: 30 },
)
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30,
})
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
this.$store
.dispatch('Login', this.loginForm)
.then(() => {
this.$router
.push({ path: this.redirect || '/' })
.catch(() => {})
})
.catch(() => {
this.loading = false
if (this.captchaEnabled) {
this.getCode()
}
})
}
})
},
},
}
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
.login { .login {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/login-background.jpg"); background-image: url('../assets/images/login-background.jpg');
background-size: cover; background-size: cover;
} }
.title { .title {
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: center;
color: #707070; color: #707070;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
height: 38px; height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
} }
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
height: 38px; height: 38px;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-login-footer { .el-login-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-family: Arial; font-family: Arial;
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.login-code-img { .login-code-img {
height: 38px; height: 38px;
} }
</style> </style>

840
src/views/login1.vue
View File

@ -1,124 +1,174 @@
<template> <template>
<div class="container"> <div class="container">
<div class="login"> <div class="login">
<div class="login-form"> <div class="login-form">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form
<h3 class="title">博诺思后台管理系统</h3> ref="loginForm"
<template v-if="loginMethod === 'password'"> :model="loginForm"
<el-form-item prop="username"> :rules="loginRules"
<el-input class="login-form"
v-model="loginForm.username" >
type="text" <h3 class="title">博诺思后台管理系统</h3>
auto-complete="off" <template v-if="loginMethod === 'password'">
placeholder="手机号/用户名/邮箱" <el-form-item prop="username">
> <el-input
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/> v-model="loginForm.username"
</el-input> type="text"
</el-form-item> auto-complete="off"
<el-form-item prop="password"> placeholder="手机号/用户名/邮箱"
<el-input >
v-model="loginForm.password" <svg-icon
type="password" slot="prefix"
auto-complete="off" icon-class="user"
placeholder="密码" class="el-input__icon input-icon"
@keyup.enter.native="handleLogin" />
> </el-input>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/> </el-form-item>
</el-input> <el-form-item prop="password">
</el-form-item> <el-input
<el-form-item prop="code" v-if="captchaEnabled"> v-model="loginForm.password"
<el-input type="password"
v-model="loginForm.code" auto-complete="off"
auto-complete="off" placeholder="密码"
placeholder="验证码" @keyup.enter.native="handleLogin"
style="width: 63%" >
@keyup.enter.native="handleLogin" <svg-icon
> slot="prefix"
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/> icon-class="password"
</el-input> class="el-input__icon input-icon"
<div class="login-code"> />
<img :src="codeUrl" @click="getCode" class="login-code-img"/> </el-input>
</div> </el-form-item>
</el-form-item> <el-form-item prop="code" v-if="captchaEnabled">
</template> <el-input
<template v-else> v-model="loginForm.code"
<el-form-item prop="mobile"> auto-complete="off"
<el-input placeholder="验证码"
v-model="loginForm.mobile" style="width: 63%"
type="text" @keyup.enter.native="handleLogin"
auto-complete="off" >
placeholder="手机号/邮箱" <svg-icon
> slot="prefix"
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/> icon-class="validCode"
</el-input> class="el-input__icon input-icon"
</el-form-item> />
<el-form-item prop="code" v-if="captchaEnabled"> </el-input>
<el-input <div class="login-code">
v-model="loginForm.code" <img
auto-complete="off" :src="codeUrl"
placeholder="验证码" @click="getCode"
style="width: 63%" class="login-code-img"
@keyup.enter.native="handleLogin" />
> </div>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/> </el-form-item>
</el-input> </template>
<div class="login-code"> <template v-else>
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <el-form-item prop="mobile">
</div> <el-input
</el-form-item> v-model="loginForm.mobile"
<el-form-item prop="verificationCode"> type="text"
<el-input v-model="loginForm.verificationCode" placeholder="请输入验证码"> auto-complete="off"
<template slot="append"> placeholder="手机号/邮箱"
<el-button >
type="primary" <svg-icon
@click="sendCode" slot="prefix"
:disabled="isSendingCode || !loginForm.code" icon-class="user"
class="send-code-button" class="el-input__icon input-icon"
> />
{{ countdown === 0 ? '获取验证码' : `${countdown}s` }} </el-input>
</el-button> </el-form-item>
</template> <el-form-item prop="code" v-if="captchaEnabled">
<svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon"/> <el-input
</el-input> v-model="loginForm.code"
</el-form-item> auto-complete="off"
</template> placeholder="验证码"
<div class="login-form-center"> style="width: 63%"
<el-link @click="toggleLoginMethod">{{ loginMethod === 'password' ? '短信登录' : '密码登录' }}</el-link> @keyup.enter.native="handleLogin"
<router-link to="/register"> >
<el-link>注册账号</el-link> <svg-icon
</router-link> slot="prefix"
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> icon-class="validCode"
</div> class="el-input__icon input-icon"
<el-form-item style="width: 100%;"> />
<el-button </el-input>
:loading="loading" <div class="login-code">
size="medium" <img
type="primary" :src="codeUrl"
style="width: 100%;" @click="getCode"
@click.native.prevent="isLogin" class="login-code-img"
> />
<span v-if="!loading">登 录</span> </div>
<span v-else>登 录 中...</span> </el-form-item>
</el-button> <el-form-item prop="verificationCode">
</el-form-item> <el-input
<el-form-item> v-model="loginForm.verificationCode"
<div class="login-divider">第三方登录</div> placeholder="请输入验证码"
<div class="login-icons"> >
<div class="login-icon"> <template slot="append">
<img :src="dingding" alt="Weibo"> <el-button
</div> type="primary"
<div class="login-icon"> @click="sendCode"
<img :src="wx" alt="WeChat"> :disabled="
</div> isSendingCode || !loginForm.code
<div class="login-icon"> "
<img :src="qq" alt="QQ"> class="send-code-button"
</div> >
{{
countdown === 0
? '获取验证码'
: `${countdown}s`
}}
</el-button>
</template>
<svg-icon
slot="prefix"
icon-class="message"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
</template>
<div class="login-form-center">
<el-link @click="toggleLoginMethod">{{
loginMethod === 'password' ? '短信登录' : '密码登录'
}}</el-link>
<router-link to="/register">
<el-link>注册账号</el-link>
</router-link>
<el-checkbox v-model="loginForm.rememberMe"
>记住密码</el-checkbox
>
</div>
<el-form-item style="width: 100%">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
<el-form-item>
<div class="login-divider">第三方登录</div>
<div class="login-icons">
<div class="login-icon">
<img :src="dingding" alt="Weibo" />
</div>
<div class="login-icon">
<img :src="wx" alt="WeChat" />
</div>
<div class="login-icon">
<img :src="qq" alt="QQ" />
</div>
</div>
</el-form-item>
</el-form>
</div> </div>
</el-form-item> </div>
</el-form>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -130,315 +180,377 @@ import wx from '@/assets/images/wx.svg'
import qq from '@/assets/images/QQ.svg' import qq from '@/assets/images/QQ.svg'
export default { export default {
name: 'Login', name: 'Login',
data() { data() {
return { return {
dingding: dingding, dingding: dingding,
wx: wx, wx: wx,
qq: qq, qq: qq,
codeUrl: '', codeUrl: '',
loginForm: { loginForm: {
username: '', username: '',
password: '', password: '',
rememberMe: false, rememberMe: false,
code: '', code: '',
mobile: '', mobile: '',
verificationCode: '', verificationCode: '',
uuid: '', uuid: '',
loginType: '', loginType: '',
mobileCodeType: 'login' mobileCodeType: 'login',
}, },
passwordLoginRules: { passwordLoginRules: {
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }], username: [
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }], {
code: [{ required: true, trigger: 'change', message: '请输入验证码' }] required: true,
}, trigger: 'blur',
mobileLoginRules: { message: '请输入您的账号',
mobile: [{ required: true, trigger: 'blur', message: '请输入您的手机号' }], },
verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }] ],
}, password: [
loading: false, {
captchaEnabled: true, required: true,
redirect: undefined, trigger: 'blur',
isSendingCode: false, message: '请输入您的密码',
countdown: 0, },
loginMethod: 'password', // 'password' or 'mobile' ],
supportsPhoneLogin: false, code: [
supportsEmailLogin: false {
} required: true,
}, trigger: 'change',
computed: { message: '请输入验证码',
loginRules() { },
return this.loginMethod === 'password' ? this.passwordLoginRules : this.mobileLoginRules ],
} },
}, mobileLoginRules: {
watch: { mobile: [
$route: { {
handler(route) { required: true,
this.redirect = route.query && route.query.redirect trigger: 'blur',
}, message: '请输入您的手机号',
immediate: true },
} ],
}, verificationCode: [
created() { {
this.getCode() required: true,
this.getCookie() trigger: 'blur',
}, message: '请输入验证码',
methods: { },
getCode() { ],
getCodeImg().then(res => { },
this.captchaEnabled = res.captchaEnabled !== undefined ? res.captchaEnabled : true loading: false,
if (this.captchaEnabled) { captchaEnabled: true,
this.codeUrl = 'data:image/gif;base64,' + res.img redirect: undefined,
this.loginForm.uuid = res.uuid isSendingCode: false,
countdown: 0,
loginMethod: 'password', // 'password' or 'mobile'
supportsPhoneLogin: false,
supportsEmailLogin: false,
} }
})
}, },
getCookie() { computed: {
const username = Cookies.get('username') loginRules() {
const password = Cookies.get('password') return this.loginMethod === 'password'
const rememberMe = Cookies.get('rememberMe') ? this.passwordLoginRules
this.loginForm.username = username || '' : this.mobileLoginRules
this.loginForm.password = password ? decrypt(password) : '' },
this.loginForm.rememberMe = rememberMe === 'true'
}, },
handleLogin() { watch: {
this.$refs.loginForm.validate(valid => { $route: {
if (valid) { handler(route) {
this.loading = true this.redirect = route.query && route.query.redirect
if (this.loginForm.rememberMe) { },
Cookies.set('username', this.loginForm.username, { expires: 30 }) immediate: true,
Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 }) },
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }) },
} else { created() {
Cookies.remove('username') this.getCode()
Cookies.remove('password') this.getCookie()
Cookies.remove('rememberMe') },
} methods: {
this.loginForm.loginType = this.loginMethod getCode() {
this.$store.dispatch('Login', this.loginForm) getCodeImg().then(res => {
.then(() => this.$router.push({ path: this.redirect || '/' })) this.captchaEnabled =
.catch(() => { res.captchaEnabled !== undefined ? res.captchaEnabled : true
this.loading = false if (this.captchaEnabled) {
if (this.captchaEnabled) this.getCode() this.codeUrl = 'data:image/gif;base64,' + res.img
this.loginForm.uuid = res.uuid
}
}) })
} },
}) getCookie() {
}, const username = Cookies.get('username')
isLogin() { const password = Cookies.get('password')
this.$refs.loginForm.validate(valid => { const rememberMe = Cookies.get('rememberMe')
if (valid) { this.loginForm.username = username || ''
this.loading = true this.loginForm.password = password ? decrypt(password) : ''
if (this.loginForm.rememberMe) { this.loginForm.rememberMe = rememberMe === 'true'
Cookies.set('username', this.loginForm.username, { expires: 30 }) },
Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 }) handleLogin() {
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }) this.$refs.loginForm.validate(valid => {
} else { if (valid) {
Cookies.remove('username') this.loading = true
Cookies.remove('password') if (this.loginForm.rememberMe) {
Cookies.remove('rememberMe') Cookies.set('username', this.loginForm.username, {
} expires: 30,
let that = this })
this.loginForm.loginType = this.loginMethod Cookies.set(
this.$store.dispatch('IsLogin', this.loginForm) 'password',
.then(res => { encrypt(this.loginForm.password),
if (res.data) { { expires: 30 },
this.$modal.confirm('账号已在其他地方登录是否继续登录！！！！').then(function() { )
return that.handleLogin() Cookies.set('rememberMe', this.loginForm.rememberMe, {
}).then(() => { expires: 30,
this.loading = false; })
}).catch(() => { } else {
this.loading = false; Cookies.remove('username')
}) Cookies.remove('password')
} else { Cookies.remove('rememberMe')
that.handleLogin() }
} this.loginForm.loginType = this.loginMethod
})
.catch(() => {
this.loading = false
if (this.captchaEnabled) this.getCode()
})
}
})
},
sendCode() {
if (!this.loginForm.code) {
this.$message.error('请先填写验证码')
return
}
if (!this.loginForm.mobile) { this.$store
this.$message.error('请先填写手机号') .dispatch('Login', this.loginForm)
return .then(() => {
} console.log(this.redirect, '重定向的地址')
this.$store.dispatch('GetPhoneCode', this.loginForm) this.$router.push({ path: this.redirect || '/' })
.then(() => { })
this.isSendingCode = true .catch(() => {
this.countdown = 60 this.loading = false
const timer = setInterval(() => { if (this.captchaEnabled) this.getCode()
this.countdown -= 1 })
if (this.countdown <= 0) { }
clearInterval(timer) })
this.isSendingCode = false },
isLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
if (this.loginForm.rememberMe) {
Cookies.set('username', this.loginForm.username, {
expires: 30,
})
Cookies.set(
'password',
encrypt(this.loginForm.password),
{ expires: 30 },
)
Cookies.set('rememberMe', this.loginForm.rememberMe, {
expires: 30,
})
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
let that = this
this.loginForm.loginType = this.loginMethod
this.$store
.dispatch('Login', this.loginForm)
.then(res => {
if (res.data) {
this.$modal
.confirm(
'账号已在其他地方登录是否继续登录！！！！',
)
.then(function () {
return that.handleLogin()
})
.then(() => {
this.loading = false
})
.catch(() => {
this.loading = false
})
} else {
that.handleLogin()
}
})
.catch(() => {
this.loading = false
if (this.captchaEnabled) this.getCode()
})
}
})
},
sendCode() {
if (!this.loginForm.code) {
this.$message.error('请先填写验证码')
return
} }
}, 1000)
}) if (!this.loginForm.mobile) {
.catch(() => { this.$message.error('请先填写手机号')
this.loading = false return
// 如果启用了验证码，则重新获取验证码 }
if (this.captchaEnabled) { this.$store
.dispatch('GetPhoneCode', this.loginForm)
.then(() => {
this.isSendingCode = true
this.countdown = 60
const timer = setInterval(() => {
this.countdown -= 1
if (this.countdown <= 0) {
clearInterval(timer)
this.isSendingCode = false
}
}, 1000)
})
.catch(() => {
this.loading = false
// 如果启用了验证码，则重新获取验证码
if (this.captchaEnabled) {
this.getCode()
}
// 其他失败处理逻辑
this.isSendingCode = false
this.countdown = 0
})
},
toggleLoginMethod() {
this.loginMethod =
this.loginMethod === 'password' ? 'mobile' : 'password'
this.loginForm.username = ''
this.loginForm.password = ''
this.loginForm.code = ''
this.loginForm.verificationCode = ''
this.loginForm.loginMethod = ''
this.getCode() this.getCode()
} },
// 其他失败处理逻辑 },
this.isSendingCode = false
this.countdown = 0
})
}
,
toggleLoginMethod() {
this.loginMethod = this.loginMethod === 'password' ? 'mobile' : 'password'
this.loginForm.username = ''
this.loginForm.password = ''
this.loginForm.code = ''
this.loginForm.verificationCode = ''
this.loginForm.loginMethod = ''
this.getCode()
}
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.container { .container {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-image: url("../assets/images/bg.png"); background-image: url('../assets/images/bg.png');
background-size: cover; background-size: cover;
} }
.login { .login {
width: 42%; width: 42%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
} }
.title { .title {
margin: 0 auto 30px; margin: 0 auto 30px;
text-align: center; text-align: center;
color: #707070; color: #707070;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;
background: #ffffff; background: #ffffff;
width: 400px; width: 400px;
padding: 25px; padding: 25px;
.el-input { .el-input {
height: 38px; height: 38px;
input { input {
height: 38px; height: 38px;
}
} }
}
.input-icon { .input-icon {
height: 39px; height: 39px;
width: 14px; width: 14px;
margin-left: 2px; margin-left: 2px;
} }
.login-form-center { .login-form-center {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
padding: 1%; padding: 1%;
margin-bottom: 5%; margin-bottom: 5%;
} }
} }
.login-tip { .login-tip {
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.login-code { .login-code {
width: 33%; width: 33%;
float: right; float: right;
img { img {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }
} }
.el-login-footer { .el-login-footer {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
color: #fff; color: #fff;
font-family: Arial; font-family: Arial;
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.login-code-img { .login-code-img {
height: 38px; height: 38px;
} }
.login-container { .login-container {
text-align: center; text-align: center;
margin-top: 50px; margin-top: 50px;
} }
.login-divider { .login-divider {
display: flex; display: flex;
align-items: center; align-items: center;
text-align: center; text-align: center;
margin: 20px 0; margin: 20px 0;
} }
.login-divider::before, .login-divider::before,
.login-divider::after { .login-divider::after {
content: ''; content: '';
flex: 1; flex: 1;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.login-divider:not(:empty)::before { .login-divider:not(:empty)::before {
margin-right: .25em; margin-right: 0.25em;
} }
.login-divider:not(:empty)::after { .login-divider:not(:empty)::after {
margin-left: .25em; margin-left: 0.25em;
} }
.login-icons { .login-icons {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
} }
.login-icon { .login-icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
} }
.login-icon img { .login-icon img {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
</style> </style>

2
vue.config.js
View File

@ -35,7 +35,7 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://192.168.2.130:18080`, target: `http://192.168.2.39:18080`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''