renguanyu111
4 years ago
24 changed files with 1896 additions and 202 deletions
@ -0,0 +1,89 @@ |
|||||
|
import request from '@/utils/request1' |
||||
|
//添加职位（岗位）
|
||||
|
export const stafflist = (data) => { |
||||
|
return request({ |
||||
|
url: '/staff/stafflist', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//添加职位（岗位）
|
||||
|
export const addpositioncont = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/addpositioncont', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//获取职位（岗位）详情
|
||||
|
export const getpositioncont = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/getpositioncont', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//编辑职位（岗位）状态或删除
|
||||
|
export const eitepositionstateordel = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/eitepositionstateordel', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//职位（岗位）列表
|
||||
|
export const positionlist = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/positionlist', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//编辑职位（岗位）
|
||||
|
export const eitepositioncont = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/eitepositioncont', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//职务列表
|
||||
|
export const dutieslist = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/dutieslist', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//行政组织列表
|
||||
|
export const govlist = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/govlist', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//行政组织树
|
||||
|
export const govthree = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/govthree', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//岗位（职位）配权
|
||||
|
export const getpositionrole = (data) => { |
||||
|
return request({ |
||||
|
url: '/org/getpositionrole', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
|
//岗位（职位）配权
|
||||
|
export const positionallotment = (data) => { |
||||
|
return request({ |
||||
|
url: '/permit/positionallotment', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
import axios from 'axios' |
||||
|
import { MessageBox, Message } from 'element-ui' |
||||
|
import store from '@/store' |
||||
|
import { getToken,getKey } from '@/utils/auth' |
||||
|
|
||||
|
// create an axios instance
|
||||
|
const service = axios.create({ |
||||
|
baseURL: process.env.VUE_APP_BASE_API1, // url = base url + request url
|
||||
|
// withCredentials: true, // send cookies when cross-domain requests
|
||||
|
timeout: 180000 // request timeout
|
||||
|
}) |
||||
|
|
||||
|
// request interceptor
|
||||
|
service.interceptors.request.use( |
||||
|
config => { |
||||
|
// do something before request is sent
|
||||
|
|
||||
|
if (store.getters.token) { |
||||
|
// let each request carry token
|
||||
|
// ['X-Token'] is a custom headers key
|
||||
|
// please modify it according to the actual situation
|
||||
|
config.headers['user-token'] = getToken() |
||||
|
config.headers['user-key'] = getKey() |
||||
|
} |
||||
|
return config |
||||
|
}, |
||||
|
error => { |
||||
|
// do something with request error
|
||||
|
console.log(error) // for debug
|
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
// response interceptor
|
||||
|
service.interceptors.response.use( |
||||
|
/** |
||||
|
* If you want to get http information such as headers or status |
||||
|
* Please return response => response |
||||
|
*/ |
||||
|
|
||||
|
/** |
||||
|
* Determine the request status by custom code |
||||
|
* Here is just an example |
||||
|
* You can also judge the status by HTTP Status Code |
||||
|
*/ |
||||
|
response => { |
||||
|
const res = response.data |
||||
|
|
||||
|
// if the custom code is not 20000, it is judged as an error.
|
||||
|
if (res.code !== 0) { |
||||
|
if(res.code === 7){ |
||||
|
store.commit('user/loginOut') |
||||
|
} |
||||
|
Message({ |
||||
|
message: res.msg || 'Error', |
||||
|
type: 'error', |
||||
|
duration: 5 * 1000 |
||||
|
}) |
||||
|
|
||||
|
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
|
if (res.code === 50008 || res.code === 50012 || res.code === 50014) { |
||||
|
// to re-login
|
||||
|
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', { |
||||
|
confirmButtonText: 'Re-Login', |
||||
|
cancelButtonText: 'Cancel', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
store.dispatch('user/resetToken').then(() => { |
||||
|
location.reload() |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
return Promise.reject(new Error(res.msg || 'Error')) |
||||
|
} else { |
||||
|
return res |
||||
|
} |
||||
|
}, |
||||
|
error => { |
||||
|
console.log('err' + error) // for debug
|
||||
|
Message({ |
||||
|
message: error.msg, |
||||
|
type: 'error', |
||||
|
duration: 5 * 1000 |
||||
|
}) |
||||
|
return Promise.reject(error) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
export default service |
||||
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { getToken, setToken, removeToken,setKey } from '@/utils/auth' |
||||
|
import { scancode } from '@/api/user' |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
async created () { |
||||
|
console.log(this.$route.query) |
||||
|
setToken(this.$route.query.token) |
||||
|
setKey(this.$route.query.key) |
||||
|
this.$store.commit('user/setToken', this.$route.query.token) |
||||
|
this.$store.commit('user/setKey', this.$route.query.key) |
||||
|
const from = { |
||||
|
userkey: this.$route.query.key.toString(), |
||||
|
usertoken:this.$route.query.token.toString() |
||||
|
} |
||||
|
const res = await scancode(from) |
||||
|
if (res.code === 0) { |
||||
|
console.log("scancode_res") |
||||
|
console.log(res) |
||||
|
setToken(res.data.token) |
||||
|
setKey(res.data.key) |
||||
|
console.log("getToken") |
||||
|
console.log(getToken) |
||||
|
sessionStorage.setItem('userinfo',JSON.stringify(res.data.userinfo)); |
||||
|
this.$store.commit('user/setUserInfo', res.data.userinfo) |
||||
|
this.$store.commit('user/setToken', res.data.token) |
||||
|
this.$store.commit('user/setKey', res.data.key) |
||||
|
console.log(JSON.parse(sessionStorage.getItem('userinfo'))) |
||||
|
// this.$store.state.变量名 |
||||
|
this.$router.push('/') |
||||
|
// this.$router.push('/') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,378 @@ |
|||||
|
<template> |
||||
|
<div id="userLayout"> |
||||
|
<div class="login_panle"> |
||||
|
<div class="login_panle_form" v-show="loginCard==1"> |
||||
|
<div class="login_panle_form_title"> |
||||
|
<!-- <img |
||||
|
class="login_panle_form_title_logo" |
||||
|
:src="$GIN_VUE_ADMIN.appLogo" |
||||
|
alt |
||||
|
/> --> |
||||
|
<p class="login_panle_form_title_p">恒信高科后台管理系统</p> |
||||
|
</div> |
||||
|
<el-form |
||||
|
ref="loginForm" |
||||
|
:model="loginForm" |
||||
|
:rules="rules" |
||||
|
@keyup.native.enter="submitForm" |
||||
|
> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input v-model="loginForm.username" placeholder="请输入工号"> |
||||
|
<template #suffix> |
||||
|
<i class="el-input__icon el-icon-user" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="loginForm.password" |
||||
|
:type="lock === 'lock' ? 'password' : 'text'" |
||||
|
placeholder="请输入密码" |
||||
|
> |
||||
|
<template #suffix> |
||||
|
<i |
||||
|
:class="'el-input__icon el-icon-' + lock" |
||||
|
@click="changeLock" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="position: relative" prop="captcha"> |
||||
|
<el-input |
||||
|
v-model="loginForm.captcha" |
||||
|
name="logVerify" |
||||
|
placeholder="请输入验证码" |
||||
|
style="width: 60%" |
||||
|
/> |
||||
|
<div class="vPic"> |
||||
|
<img |
||||
|
v-if="picPath" |
||||
|
:src="picPath" |
||||
|
alt="请输入验证码" |
||||
|
@click="loginVerify()" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
style="width: 46%; margin-left: 25%" |
||||
|
@click="submitForm" |
||||
|
>登 录</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(1)"> |
||||
|
账号登录 |
||||
|
</el-col> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(2)"> |
||||
|
扫码登录 |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="login_panle_form" v-show="loginCard==2"> |
||||
|
<div class="login_panle_form_title"> |
||||
|
<!-- <img |
||||
|
class="login_panle_form_title_logo" |
||||
|
:src="$GIN_VUE_ADMIN.appLogo" |
||||
|
alt |
||||
|
/> --> |
||||
|
<p class="login_panle_form_title_p">恒信高科后台管理系统</p> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div id="weChat" style="margin-left: 13px;"></div> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(1)"> |
||||
|
账号登录 |
||||
|
</el-col> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(2)"> |
||||
|
扫码登录 |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div class="login_panle_right" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getToken, setToken, removeToken,setKey } from '@/utils/auth' |
||||
|
import { mapActions } from 'vuex' |
||||
|
import { captcha,mylogin,mysystemlogin,scancodelogin } from '@/api/user' |
||||
|
export default { |
||||
|
name: 'Login', |
||||
|
data() { |
||||
|
const checkUsername = (rule, value, callback) => { |
||||
|
if (value.length < 5) { |
||||
|
return callback(new Error('请输入正确的用户名')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const checkPassword = (rule, value, callback) => { |
||||
|
if (value.length < 6) { |
||||
|
return callback(new Error('请输入正确的密码')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
loginCard:2, |
||||
|
redirect: undefined, |
||||
|
curYear: 0, |
||||
|
lock: 'lock', |
||||
|
loginForm: { |
||||
|
username: '', |
||||
|
password: '', |
||||
|
captcha: '', |
||||
|
captchaId: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
username: [{ required: true, message: '请输入工号',trigger: 'blur' }], |
||||
|
password: [{ validator: checkPassword, trigger: 'blur' }], |
||||
|
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }, |
||||
|
{ |
||||
|
min: 5, |
||||
|
max: 6, |
||||
|
message: '验证码格式不正确', |
||||
|
trigger: 'blur', |
||||
|
}] |
||||
|
}, |
||||
|
logVerify: '', |
||||
|
picPath: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getWeChat() |
||||
|
this.loginVerify() |
||||
|
this.curYear = new Date().getFullYear() |
||||
|
}, |
||||
|
watch: { |
||||
|
$route: { |
||||
|
handler: function(route) { |
||||
|
const query = route.query |
||||
|
if (query) { |
||||
|
this.redirect = query.redirect |
||||
|
this.otherQuery = this.getOtherQuery(query) |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapActions('user', ['myLoginIn']), |
||||
|
getWeChat () { |
||||
|
// 动态引入企业微信js文件 |
||||
|
const s = document.createElement('script') |
||||
|
s.type = 'text/javascript' |
||||
|
s.src = 'http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js' |
||||
|
const wxElement = document.body.appendChild(s) |
||||
|
// 调用企业微信二维码方法 |
||||
|
wxElement.onload = function () { |
||||
|
window.WwLogin({ |
||||
|
id: 'weChat', // 需要显示的容器id |
||||
|
appid: 'ww02f310301953277a', // 公众号appid wx******* |
||||
|
agentid: '1000008', // 公众号agentid wx******* |
||||
|
scope: 'snsapi_login', // 网页默认即可 |
||||
|
redirect_uri: 'https%3A%2F%2Fwww.hxgk.group%2Fjumpapiurl%2Fscancode', // 授权成功后回调的url，需要在企业微信配置，我的方法是回调到自己的weChatBack页面 |
||||
|
state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验 |
||||
|
style: 'black', // 提供"black"、"white"可选。二维码的样式 |
||||
|
href: '' // 外部css文件url，需要https |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
loginType(a){ |
||||
|
console.log("aaa") |
||||
|
if (a==1) { |
||||
|
this.loginCard=1 |
||||
|
} |
||||
|
if (a==2) { |
||||
|
this.loginCard=2 |
||||
|
} |
||||
|
}, |
||||
|
async checkInit() { |
||||
|
const res = await checkDB() |
||||
|
if (res.code === 0) { |
||||
|
if (res.data?.needInit) { |
||||
|
this.$store.commit('user/NeedInit') |
||||
|
this.$router.push({ name: 'Init' }) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已配置数据库信息，无法初始化' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// async login() { |
||||
|
// return await this.myLoginIn(this.loginForm) |
||||
|
// }, |
||||
|
async submitForm() { |
||||
|
this.$refs.loginForm.validate(async(v) => { |
||||
|
if (v) { |
||||
|
// const flag = await this.login() |
||||
|
const res = await scancodelogin(this.loginForm) |
||||
|
if (res.code === 0) { |
||||
|
setToken(res.data.token) |
||||
|
setKey(res.data.key) |
||||
|
console.log("res.data.userinfo") |
||||
|
console.log(res.data.userinfo) |
||||
|
// this.$store.commit('saveCurrDbSource',this.db) |
||||
|
sessionStorage.setItem('userinfo',JSON.stringify(res.data.userinfo)); |
||||
|
this.$store.commit('user/setUserInfo', res.data.userinfo) |
||||
|
this.$store.commit('user/setToken', res.data.token) |
||||
|
this.$store.commit('user/setKey', res.data.key) |
||||
|
console.log("this.$store.state.user.token") |
||||
|
console.log(this.$store.state.user.token) |
||||
|
console.log("this.$store.state.user.userInfo") |
||||
|
console.log(this.$store.state.user.userInfo) |
||||
|
console.log("this.$store.state.user.key") |
||||
|
console.log(this.$store.state.user.key) |
||||
|
// this.$store.state.变量名 |
||||
|
this.$router.push('/') |
||||
|
// this.$router.push('/') |
||||
|
this.loading = false |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '请正确填写登录信息', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.loginVerify() |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getOtherQuery(query) { |
||||
|
return Object.keys(query).reduce((acc, cur) => { |
||||
|
if (cur !== 'redirect') { |
||||
|
acc[cur] = query[cur] |
||||
|
} |
||||
|
return acc |
||||
|
}, {}) |
||||
|
}, |
||||
|
changeLock() { |
||||
|
this.lock = this.lock === 'lock' ? 'unlock' : 'lock' |
||||
|
}, |
||||
|
loginVerify() { |
||||
|
|
||||
|
captcha({}).then((ele) => { |
||||
|
this.picPath = ele.data.picPath |
||||
|
this.loginForm.captchaId = ele.data.captchaId |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#userLayout { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
//background-image: url("@/assets/login_background.jpg"); |
||||
|
// background-image: url("../assets/login_background.jpg"); |
||||
|
background-image: url("../../assets/404_images/login_background.jpg"); |
||||
|
background-size: cover; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
.login_panle { |
||||
|
position: absolute; |
||||
|
top: 3vh; |
||||
|
left: 2vw; |
||||
|
width: 96vw; |
||||
|
height: 94vh; |
||||
|
background-color: rgba(255, 255, 255, .8); |
||||
|
backdrop-filter: blur(5px); |
||||
|
border-radius: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-evenly; |
||||
|
.login_panle_right { |
||||
|
// background-image: url("../assets/login_left.svg"); |
||||
|
background-image: url("../../assets/404_images/login_left.svg"); |
||||
|
background-size: cover; |
||||
|
width: 40%; |
||||
|
height: 60%; |
||||
|
float: right !important; |
||||
|
} |
||||
|
.login_panle_form { |
||||
|
width: 420px; |
||||
|
background-color: #fff; |
||||
|
padding: 40px 40px 40px 40px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 2px 3px 7px rgba(0, 0, 0, .2); |
||||
|
.login_panle_form_title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 30px 0; |
||||
|
.login_panle_form_title_logo { |
||||
|
width: 90px; |
||||
|
height: 72px; |
||||
|
} |
||||
|
.login_panle_form_title_p { |
||||
|
font-size: 30px; |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.vPic { |
||||
|
width: 33%; |
||||
|
height: 38px; |
||||
|
float: right !important; |
||||
|
background: #ccc; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
cursor: pointer; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.login_panle_foot { |
||||
|
position: absolute; |
||||
|
bottom: 20px; |
||||
|
.links { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.link-icon { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
} |
||||
|
.copyright { |
||||
|
color: #777777; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//小屏幕不显示右侧，将登陆框居中 |
||||
|
@media (max-width: 750px) { |
||||
|
.login_panle_right { |
||||
|
display: none; |
||||
|
} |
||||
|
.login_panle { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.login_panle_form { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* |
||||
|
powerBy : bypanghu@163.com |
||||
|
*/ |
||||
|
</style> |
||||
@ -0,0 +1,323 @@ |
|||||
|
<template> |
||||
|
<div id="userLayout"> |
||||
|
<div class="login_panle"> |
||||
|
<div class="login_panle_form"> |
||||
|
<div class="login_panle_form_title"> |
||||
|
<!-- <img |
||||
|
class="login_panle_form_title_logo" |
||||
|
:src="$GIN_VUE_ADMIN.appLogo" |
||||
|
alt |
||||
|
/> --> |
||||
|
<p class="login_panle_form_title_p">绩效考核用户端登录</p> |
||||
|
</div> |
||||
|
<el-form |
||||
|
ref="loginForm" |
||||
|
:model="loginForm" |
||||
|
:rules="rules" |
||||
|
@keyup.enter="submitForm" |
||||
|
> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input v-model="loginForm.username" placeholder="请输入工号"> |
||||
|
<template #suffix> |
||||
|
<i class="el-input__icon el-icon-user" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="loginForm.password" |
||||
|
:type="lock === 'lock' ? 'password' : 'text'" |
||||
|
placeholder="请输入密码" |
||||
|
> |
||||
|
<template #suffix> |
||||
|
<i |
||||
|
:class="'el-input__icon el-icon-' + lock" |
||||
|
@click="changeLock" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="position: relative" prop="captcha"> |
||||
|
<el-input |
||||
|
v-model="loginForm.captcha" |
||||
|
name="logVerify" |
||||
|
placeholder="请输入验证码" |
||||
|
style="width: 60%" |
||||
|
/> |
||||
|
<div class="vPic"> |
||||
|
<img |
||||
|
v-if="picPath" |
||||
|
:src="picPath" |
||||
|
alt="请输入验证码" |
||||
|
@click="loginVerify()" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
style="width: 46%; margin-left: 25%" |
||||
|
@click="submitForm" |
||||
|
>登 录</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="login_panle_right" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getToken, setToken, removeToken,setKey } from '@/utils/auth' |
||||
|
import { mapActions } from 'vuex' |
||||
|
import { captcha,mylogin } from '@/api/user' |
||||
|
export default { |
||||
|
name: 'Login', |
||||
|
data() { |
||||
|
const checkUsername = (rule, value, callback) => { |
||||
|
if (value.length < 5) { |
||||
|
return callback(new Error('请输入正确的用户名')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const checkPassword = (rule, value, callback) => { |
||||
|
if (value.length < 6) { |
||||
|
return callback(new Error('请输入正确的密码')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
redirect: undefined, |
||||
|
curYear: 0, |
||||
|
lock: 'lock', |
||||
|
zeren:{ |
||||
|
id:'' |
||||
|
}, |
||||
|
loginForm: { |
||||
|
username: '', |
||||
|
password: '', |
||||
|
captcha: '', |
||||
|
captchaId: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
username: [{ required: true, message: '请输入工号',trigger: 'blur' }], |
||||
|
password: [{ validator: checkPassword, trigger: 'blur' }], |
||||
|
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }, |
||||
|
{ |
||||
|
min: 5, |
||||
|
max: 6, |
||||
|
message: '验证码格式不正确', |
||||
|
trigger: 'blur', |
||||
|
}] |
||||
|
}, |
||||
|
logVerify: '', |
||||
|
picPath: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.zeren.id=this.$route.query.id |
||||
|
this.loginVerify() |
||||
|
this.curYear = new Date().getFullYear() |
||||
|
}, |
||||
|
watch: { |
||||
|
$route: { |
||||
|
handler: function(route) { |
||||
|
const query = route.query |
||||
|
if (query) { |
||||
|
this.redirect = query.redirect |
||||
|
this.otherQuery = this.getOtherQuery(query) |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapActions('user', ['myLoginIn']), |
||||
|
async checkInit() { |
||||
|
const res = await checkDB() |
||||
|
if (res.code === 0) { |
||||
|
if (res.data?.needInit) { |
||||
|
this.$store.commit('user/NeedInit') |
||||
|
this.$router.push({ name: 'Init' }) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已配置数据库信息，无法初始化' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// async login() { |
||||
|
// return await this.myLoginIn(this.loginForm) |
||||
|
// }, |
||||
|
async submitForm() { |
||||
|
this.$refs.loginForm.validate(async(v) => { |
||||
|
if (v) { |
||||
|
// const flag = await this.login() |
||||
|
const res = await mylogin(this.loginForm) |
||||
|
if (res.code === 0) { |
||||
|
setToken(res.data.token) |
||||
|
setKey(res.data.key) |
||||
|
console.log("res.data.userinfo") |
||||
|
console.log(res.data.userinfo) |
||||
|
// this.$store.commit('saveCurrDbSource',this.db) |
||||
|
sessionStorage.setItem('userinfo',JSON.stringify(res.data.userinfo)); |
||||
|
this.$store.commit('user/setUserInfo', res.data.userinfo) |
||||
|
this.$store.commit('user/setToken', res.data.token) |
||||
|
this.$store.commit('user/setKey', res.data.key) |
||||
|
console.log("this.$store.state.user.token") |
||||
|
console.log(this.$store.state.user.token) |
||||
|
console.log("this.$store.state.user.userInfo") |
||||
|
console.log(this.$store.state.user.userInfo) |
||||
|
console.log("this.$store.state.user.key") |
||||
|
console.log(this.$store.state.user.key) |
||||
|
// this.$store.state.变量名 |
||||
|
|
||||
|
this.$router.push('/responsible?id='+this.zeren.id) |
||||
|
// this.$router.push('/') |
||||
|
this.loading = false |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '请正确填写登录信息', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.loginVerify() |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getOtherQuery(query) { |
||||
|
return Object.keys(query).reduce((acc, cur) => { |
||||
|
if (cur !== 'redirect') { |
||||
|
acc[cur] = query[cur] |
||||
|
} |
||||
|
return acc |
||||
|
}, {}) |
||||
|
}, |
||||
|
changeLock() { |
||||
|
this.lock = this.lock === 'lock' ? 'unlock' : 'lock' |
||||
|
}, |
||||
|
loginVerify() { |
||||
|
|
||||
|
captcha({}).then((ele) => { |
||||
|
this.picPath = ele.data.picPath |
||||
|
this.loginForm.captchaId = ele.data.captchaId |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#userLayout { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
//background-image: url("@/assets/login_background.jpg"); |
||||
|
// background-image: url("../assets/login_background.jpg"); |
||||
|
background-image: url("../../assets/404_images/login_background.jpg"); |
||||
|
background-size: cover; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
.login_panle { |
||||
|
position: absolute; |
||||
|
top: 3vh; |
||||
|
left: 2vw; |
||||
|
width: 96vw; |
||||
|
height: 94vh; |
||||
|
background-color: rgba(255, 255, 255, .8); |
||||
|
backdrop-filter: blur(5px); |
||||
|
border-radius: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-evenly; |
||||
|
.login_panle_right { |
||||
|
// background-image: url("../assets/login_left.svg"); |
||||
|
background-image: url("../../assets/404_images/login_left.svg"); |
||||
|
background-size: cover; |
||||
|
width: 40%; |
||||
|
height: 60%; |
||||
|
float: right !important; |
||||
|
} |
||||
|
.login_panle_form { |
||||
|
width: 420px; |
||||
|
background-color: #fff; |
||||
|
padding: 40px 40px 40px 40px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 2px 3px 7px rgba(0, 0, 0, .2); |
||||
|
.login_panle_form_title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 30px 0; |
||||
|
.login_panle_form_title_logo { |
||||
|
width: 90px; |
||||
|
height: 72px; |
||||
|
} |
||||
|
.login_panle_form_title_p { |
||||
|
font-size: 30px; |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.vPic { |
||||
|
width: 33%; |
||||
|
height: 38px; |
||||
|
float: right !important; |
||||
|
background: #ccc; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
cursor: pointer; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.login_panle_foot { |
||||
|
position: absolute; |
||||
|
bottom: 20px; |
||||
|
.links { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.link-icon { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
} |
||||
|
.copyright { |
||||
|
color: #777777; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//小屏幕不显示右侧，将登陆框居中 |
||||
|
@media (max-width: 750px) { |
||||
|
.login_panle_right { |
||||
|
display: none; |
||||
|
} |
||||
|
.login_panle { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.login_panle_form { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* |
||||
|
powerBy : bypanghu@163.com |
||||
|
*/ |
||||
|
</style> |
||||
Loading…
Reference in new issue