<script lang="ts" setup>
|
import {onMounted, onUnmounted, reactive, ref} from "vue"
|
import {useRouter,useRoute } from 'vue-router'
|
import type {FormInstance, FormRules} from 'element-plus'
|
import { ElMessage } from "element-plus";
|
import { Lock,Avatar } from '@element-plus/icons-vue'
|
import request from '@/utils/request'
|
import userInfo from '@/stores/userInfo'
|
|
|
const store=userInfo()
|
let ruleFormRef = ref<FormInstance>()
|
const router = useRouter()
|
const route = useRoute()
|
|
const userForm = reactive({
|
userId: '',
|
pass: ''
|
})
|
|
if (typeof(route.query.id) != "undefined"){
|
userForm.userId = <string>route.query.id
|
}
|
|
const validateUser = (rule: any, value: any, callback: any) => {
|
if (value === '') {
|
callback(new Error('请输入你的账号'))
|
} else {
|
callback()
|
}
|
}
|
|
const validatePass = (rule: any, value: any, callback: any) => {
|
if (value === '') {
|
callback(new Error('请输入你的密码'))
|
} else {
|
callback()
|
}
|
}
|
|
const rules = reactive<FormRules<typeof userForm>>({
|
userId: [{ validator: validateUser, trigger: 'blur' }],
|
pass: [{ validator: validatePass, trigger: 'blur' }]
|
})
|
|
//登陆方法
|
const submitForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate((valid) => {
|
if (valid) {
|
loginLoadings.value=true
|
request.post('/user/login',
|
userForm).then((res) => {
|
if(res['code']==200){
|
store.$patch({user:res.data})
|
|
router.push('/main')
|
ElMessage.success(`登录成功`)
|
} else {
|
ElMessage.error(res['msg'])
|
loginLoadings.value=false
|
return false
|
}
|
}).catch(error => {
|
ElMessage.error("服务器连接失败")
|
loginLoadings.value=false
|
return false
|
})
|
}
|
})
|
}
|
|
function register() {
|
|
router.push({
|
path:'/register',
|
})
|
}
|
|
let loginLoadings= ref(false)
|
let registerLoadings= ref(false)
|
|
const keyDown = (e) => {
|
// 回车则执行登录方法 enter键的ASCII是13
|
if (e.keyCode == 13 || e.keyCode == 100) {
|
submitForm(ruleFormRef.value)
|
}
|
}
|
onMounted(()=>{
|
window.addEventListener('keydown', keyDown)
|
})
|
onUnmounted(() => {
|
window.removeEventListener('keydown', keyDown)
|
})
|
|
</script>
|
|
<template>
|
<div class="mainDiv" >
|
<div id="main-login">
|
<!-- <img
|
style="width: 100%; height: 99vh"
|
src="../../src/assets/background.jpg"
|
/> -->
|
<div>
|
<div style="position: absolute; left: 8vw; top: 6vw; ">
|
<img src="../../src/assets/3.png">
|
</div>
|
<div style="position: absolute; left: 15vw; top: 22vw; font-size: 55px;color: rgba(29, 33, 41, 1);">
|
北玻MES系统
|
</div>
|
</div>
|
<div id="div-login">
|
<el-form
|
@submit.native.prevent
|
ref="ruleFormRef"
|
:model="userForm"
|
status-icon
|
:rules="rules"
|
>
|
<div id="center">
|
<div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">账号</div>
|
<el-form-item prop="userId">
|
<el-input
|
style="width: 340px;"
|
v-model="userForm.userId"
|
type="text"
|
autocomplete="off"
|
:prefix-icon="Avatar"
|
placeholder="请输入账号"
|
/>
|
</el-form-item>
|
<div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div>
|
<el-form-item prop="pass">
|
<el-input
|
style="width: 340px;"
|
v-model="userForm.pass"
|
type="password"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
show-password
|
placeholder="请输入密码"
|
/>
|
</el-form-item>
|
<el-form-item id="submitForm">
|
<el-button
|
:loading="loginLoadings"
|
type="primary"
|
native-type="submit"
|
@click="submitForm(ruleFormRef)"
|
@keyup.enter.native="keyDown(e)"
|
plain
|
>登录
|
</el-button>
|
<el-button
|
:loading="registerLoadings"
|
type="primary"
|
@click="register"
|
plain
|
>注册
|
</el-button>
|
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<style scoped>
|
.mainDiv{
|
overflow: hidden;
|
min-width: 718px;
|
background-image: url("../../src/assets/background.jpg");
|
|
}
|
#main-login{
|
margin: 150px auto 0 auto;
|
height: 70vh;
|
width: 80vw;
|
}
|
#img-div{
|
width: 55%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
float: left;
|
}
|
#img-pic{
|
max-height: 90%;
|
max-width: 100%;
|
}
|
#div-login{
|
margin-top: 5%;
|
/* margin-top: 20%; */
|
/* margin-left: 650px; */
|
background-color: #fff;
|
float: right;
|
width: 40%;
|
height: 60%;
|
min-width: 318px;
|
border-radius: 4px;
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
|
}
|
#center{
|
margin-top: -30px;
|
}
|
.el-form{
|
width: 60%;
|
margin: 20% auto auto;
|
}
|
#submitForm {
|
display: flex;
|
justify-content: space-evenly;
|
margin-top: 2rem;
|
}
|
:deep(.el-form-item__content){
|
flex: unset
|
|
}
|
</style>
|
