| | |
| | | <script lang="ts" setup> |
| | | import {reactive, ref} from "vue" |
| | | 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 request from '@/utils/request' |
| | | import userInfo from '@/stores/userInfo' |
| | | import { sendSock, createWebSocket, closeSock,global_callback1 } from "@/utils/webSocket" |
| | | |
| | | import userOrderInfo from '@/stores/sd/order/orderInfo' |
| | | import { useI18n } from 'vue-i18n' |
| | | import i18n from "@/lang/index" |
| | | import { VxeUI } from 'vxe-table' |
| | | //语言获取 |
| | | const { t } = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh-CN') |
| | | const store=userInfo() |
| | | const ruleFormRef = ref<FormInstance>() |
| | | let ruleFormRef = ref<FormInstance>() |
| | | const router = useRouter() |
| | | const route = useRoute() |
| | | const orderInfo = userOrderInfo() |
| | | |
| | | |
| | | const userForm = reactive({ |
| | | userId: '', |
| | | pass: '' |
| | | }) |
| | | |
| | | let registerState = ref(true) |
| | | |
| | | 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('请输入你的账号')) |
| | | callback(new Error(t('login.userErr'))) |
| | | } else { |
| | | callback() |
| | | } |
| | |
| | | |
| | | const validatePass = (rule: any, value: any, callback: any) => { |
| | | if (value === '') { |
| | | callback(new Error('请输入你的密码')) |
| | | callback(new Error( t('login.pwErr') )) |
| | | } else { |
| | | callback() |
| | | } |
| | |
| | | formEl.validate((valid) => { |
| | | if (valid) { |
| | | loginLoadings.value=true |
| | | request.post('/user/login', |
| | | userForm.pass = btoa(userForm.pass) |
| | | request.post('/userInfo/login', |
| | | userForm).then((res) => { |
| | | if(res['code']==200){ |
| | | if(res['code']==200 && res['data']){ |
| | | store.$patch({user:res.data}) |
| | | |
| | | localStorage.setItem('saToken', store.user.token) |
| | | orderInfo.clearSelectDate() |
| | | router.push('/main') |
| | | ElMessage.success(`登录成功`) |
| | | ElMessage.success(t('login.loginSuccessful')) |
| | | } else { |
| | | ElMessage.error(res['msg']) |
| | | ElMessage.error(t('login.loginErr')) |
| | | loginLoadings.value=false |
| | | return false |
| | | } |
| | | }).catch(error => { |
| | | ElMessage.error("服务器连接失败") |
| | | ElMessage.error(t('login.connectErr')) |
| | | loginLoadings.value=false |
| | | return false |
| | | }).then(() => { |
| | | userForm.pass = atob(userForm.pass) |
| | | }) |
| | | } |
| | | }) |
| | |
| | | let loginLoadings= ref(false) |
| | | let registerLoadings= ref(false) |
| | | |
| | | const keyDown = (e) => { |
| | | // 回车则执行登录方法 enter键的ASCII是13 |
| | | if (e.keyCode == 13 ) { |
| | | submitForm(ruleFormRef.value) |
| | | } |
| | | } |
| | | onMounted(()=>{ |
| | | window.addEventListener('keydown', keyDown) |
| | | }) |
| | | onUnmounted(() => { |
| | | window.removeEventListener('keydown', keyDown) |
| | | }) |
| | | const changeLanguage = () =>{ |
| | | localStorage.setItem('lang',language.value) |
| | | location.reload() |
| | | } |
| | | |
| | | //注册按钮的显示 |
| | | const changeRegister = ()=>{ |
| | | if(userForm.pass=='admin'){ |
| | | registerState.value =false |
| | | }else { |
| | | registerState.value =true |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div class="mainDiv"> |
| | | <div class="mainDiv1" > |
| | | <div id="main-login"> |
| | | <div id="img-div"> |
| | | <img id="img-pic" src="@/assets/img.png" alt=""> |
| | | </div> |
| | | <div id="div-login"> |
| | | <h2>北玻自动化ERP管理系统</h2> |
| | | <el-select |
| | | @change="changeLanguage" |
| | | v-model="language" |
| | | placeholder=" " |
| | | style="float: right;width: 6rem"> |
| | | <el-option value="zh-CN" label="中文" /> |
| | | <el-option value="en-US" label="English" /> |
| | | <el-option value="ru" label="Русский язык" /> |
| | | <el-option value="ar" label="بالعربية" /> |
| | | <el-option value="ko-KR" label="한국어" /> |
| | | </el-select> |
| | | <h2>{{$t('login.SysName')}}</h2> |
| | | <el-form |
| | | @submit.native.prevent |
| | | ref="ruleFormRef" |
| | | :model="userForm" |
| | | status-icon |
| | | :rules="rules" |
| | | > |
| | | <el-form-item label="用户:" prop="userId"> |
| | | <el-form-item :label="$t('login.user')+':'" prop="userId"> |
| | | <el-input |
| | | v-model="userForm.userId" |
| | | type="text" |
| | | autocomplete="off" |
| | | :prefix-icon="Avatar" |
| | | placeholder="请输入你的账号" |
| | | :placeholder="$t('login.userErr')" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="密码:" prop="pass"> |
| | | <el-form-item :label="$t('login.password')+':'" prop="pass"> |
| | | <el-input |
| | | v-model="userForm.pass" |
| | | @blur="changeRegister" |
| | | type="password" |
| | | autocomplete="off" |
| | | :prefix-icon="Lock" |
| | | placeholder="请输入你的密码" |
| | | :placeholder="$t('login.pwErr')" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item id="submitForm"> |
| | | <el-button |
| | | :loading="registerLoadings" |
| | | :disabled="registerState" |
| | | type="primary" |
| | | @click="register" |
| | | >注册 |
| | | >{{$t('login.register')}} |
| | | </el-button> |
| | | <el-button |
| | | :loading="loginLoadings" |
| | | type="primary" |
| | | native-type="submit" |
| | | @click="submitForm(ruleFormRef)" |
| | | >登录 |
| | | @keyup.enter.native="keyDown(e)" |
| | | >{{$t('login.login')}} |
| | | </el-button> |
| | | |
| | | </el-form-item> |
| | |
| | | </template> |
| | | |
| | | <style scoped> |
| | | .mainDiv{ |
| | | //background-color: #1890FF; |
| | | overflow: hidden; |
| | | min-width: 718px; |
| | | |
| | | .mainDiv1{ |
| | | //background-color: #1890FF; |
| | | //overflow: hidden; |
| | | width: 100vw; |
| | | height: 100vh; |
| | | |
| | | display: grid; |
| | | place-items: center; /* 同时水平和垂直居中 */ |
| | | } |
| | | #main-login{ |
| | | margin: 150px auto 0 auto; |
| | | height: 60vh; |
| | | width: 70vw; |
| | | height: 60%; |
| | | width: 70%; |
| | | |
| | | //background-color: #f2f2f2; |
| | | //background-color: #f2f2f2; |
| | | } |
| | | #img-div{ |
| | | width: 55%; |
| | |
| | | max-height: 90%; |
| | | max-width: 100%; |
| | | } |
| | | |
| | | @media (max-width: 1030px) { |
| | | #img-div { |
| | | display: none; |
| | | } |
| | | #main-login{ |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | } |
| | | |
| | | #div-login{ |
| | | margin-top: 5%; |
| | | background-color: #fff; |
| | |
| | | height: 80%; |
| | | border-radius: 12px; |
| | | min-width: 318px; |
| | | min-height: 300px; |
| | | box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); |
| | | } |
| | | h2{ |