严智鑫
2024-07-05 c7093edbf1fb3c91107c457ea13935305e1a9458
UI-Project/src/views/LoginView.vue
@@ -5,12 +5,17 @@
import {ElMessage} from 'element-plus'
import request from '@/utils/request'
import userInfo from '@/stores/userInfo'
import { useI18n } from 'vue-i18n'
const store = userInfo()
let ruleFormRef = ref<FormInstance>()
const router = useRouter()
const route = useRoute()
const { t } = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
const changeLanguage = () =>{
  localStorage.setItem('lang',language.value)
  location.reload()
}
const userForm = reactive({
  userName: '',
  password: '',
@@ -22,7 +27,7 @@
 
const validateUser = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入你的账号'))
    callback(new Error(t('login.userErr')))
  } else {
    callback()
  }
@@ -30,7 +35,7 @@
 
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入你的密码'))
    callback(new Error(t('login.pwErr')))
  } else {
    callback()
  }
@@ -56,7 +61,7 @@
              console.log(res.data)
 
              router.push('/main')
              ElMessage.success(`登录成功`)
              ElMessage.success(t('login.loginSuccessful'))
            } else {
              ElMessage.error(res['msg'])
              store.$patch({
@@ -67,7 +72,7 @@
            }
          })
          .catch((error) => {
            ElMessage.error('服务器连接失败')
            ElMessage.error(t('main.connectErr'))
            store.$patch({
              user: null,
              })
@@ -113,26 +118,35 @@
          <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系统
          {{ $t('northglassMESsystem') }}
        </div>
      </div>
      <div id="div-login">
        <!--语言切换按钮-->
        <el-select
            @change="changeLanguage"
            v-model="language"
            placeholder=" "
            style="float: right;width: 9rem">
          <el-option value="zh"  label="中文" />
          <el-option value="en"  label="Русский язык" />
        </el-select>
        <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>
            <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">{{ $t('login.user') }}</div>
            <el-form-item prop="userId">
              <el-input style="width: 340px;"
                        v-model="userForm.userName"
                        type="text"
                        autocomplete="off"
                        :prefix-icon="Avatar"
                        placeholder="请输入账号"/>
                        :placeholder="$t('login.userErr')"/>
            </el-form-item>
            <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div>
            <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">{{ $t('login.password') }}</div>
            <el-form-item prop="pass">
              <el-input style="width: 340px;"
                        v-model="userForm.password"
@@ -140,7 +154,8 @@
                        autocomplete="off"
                        :prefix-icon="Lock"
                        show-password
                        placeholder="请输入密码"/>
                        :placeholder="$t('login.pwErr')"
                       />
            </el-form-item>
            <el-form-item id="submitForm">
              <el-button :loading="loginLoadings"
@@ -148,12 +163,12 @@
                         native-type="submit"
                         @click="submitForm(ruleFormRef)"
                         @keyup.enter.native="keyDown(e)"
                         plain>登录
                         plain>{{ $t('login.login') }}
              </el-button>
              <el-button :loading="registerLoadings"
                         type="primary"
                         @click="register"
                         plain>注册
                         plain>{{ $t('login.register') }}
              </el-button>
 
            </el-form-item>