<template>
|
<div class="login-form-compontent">
|
<div class="title">本体机智能立体存储库系统</div>
|
<div class="form-row">
|
<el-input v-model="form.name">
|
<template #prefix>
|
<el-icon><avatar /></el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="form-row">
|
<form style="display:none;"><input type="password" /></form>
|
<input type="password" style="width:0;height:0;visibility:hidden;" />
|
<el-input :type="pwdVisiblity?'text':'password'" v-model="form.pass" @keyup.enter="onLogin">
|
<template #prefix>
|
<el-icon><lock /></el-icon>
|
</template>
|
<template #suffix>
|
<div class="pwd-trigger-target" @click.stop="onTriggerPwdVisiblity">
|
<span class="iconfont" :class="[pwdVisiblity?'icon-eye-open':'icon-eye-close']"></span>
|
</div>
|
</template>
|
</el-input>
|
</div>
|
<el-button class="block-btn" type="primary" @click="onLogin">登 录</el-button>
|
</div>
|
</template>
|
|
<script>
|
import {Lock,Avatar} from '@element-plus/icons'
|
import md5 from 'js-md5'
|
export default {
|
name:'loginFormCompontent',
|
components:{lock:Lock,avatar:Avatar},
|
data(){
|
return {
|
pwdVisiblity:false,
|
forgetVisible:false,
|
form:{
|
name:'',
|
pass:''
|
}
|
}
|
},
|
methods:{
|
onTriggerPwdVisiblity(){
|
this.pwdVisiblity = !this.pwdVisiblity;
|
},
|
onLogin(){
|
if (!this.form.name || !this.form.pass) {
|
this.$message({message: '请输入账号或密码！',type: 'warning'});
|
return false;
|
}
|
this.$loading();
|
let _params = {...this.form}
|
_params.pass = md5(_params.pass).toLocaleUpperCase()
|
this.$api.get('JWTToken3.0',_params,{block:'login',needToken:false}).then((d)=>{
|
this.$store.commit('user/setToken',d.token)
|
this.$store.commit('user/setUserInfo',{
|
'user_id':d['user_id'],
|
'user_name':d['user_name']
|
})
|
this.$api.get('GetNavigationBar_V2',{uid:d['user_id']},{block:'permission'}).then((d1)=>{
|
let menusTree = d1.children || [];
|
menusTree = menusTree.map((currentItem)=>{
|
currentItem.id = currentItem.id.toString()
|
currentItem.pid = currentItem.pid.toString()
|
return currentItem
|
})
|
let menus = this.$utils.treeToList(menusTree,{parentId:'pid'})
|
this.$store.commit('user/setMenusTree',menusTree)
|
this.$store.commit('user/setMenusList',menus)
|
this.$router.push('/sub-home')
|
}).catch(err1=>{
|
this.$loading().close();
|
})
|
}).catch((err)=>{
|
this.$loading().close();
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.login-form-compontent{
|
width: 400px;
|
background-color: #FFFFFF;
|
box-shadow: 0 0 4px #efefef;
|
margin-right: 10%;
|
opacity: .7;
|
border-radius: 8px;
|
padding: 30px;
|
.title{
|
text-align: center;
|
font-size: 26px;
|
font-weight: bold;
|
margin-bottom: 40px;
|
}
|
.form-row{
|
margin-bottom: 20px;
|
&.fr{
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
.pwd-trigger-target{
|
cursor: pointer;
|
}
|
.forget-modal-content{
|
padding: 16px 0;
|
text-align: center;
|
line-height: 150%;
|
font-size: 18px;
|
color: #000;
|
}
|
}
|
</style>
|
