Merge remote-tracking branch 'origin/master'

zhoushihao

2 天以前 4e3b8155722b66e25df3c6fd42cc586b68dea391

 UI-Project/src/views/RegisterView.vue

@@ -4,13 +4,15 @@
  import type { FormProps,FormInstance, FormRules } from 'element-plus'
  import {ElMessage,ElMessageBox} from "element-plus";
  import request from "@/utils/request";
  import {Avatar, UserFilled} from "@element-plus/icons-vue";

  import { Lock,Avatar } from '@element-plus/icons-vue'
  // import {Avatar, UserFilled} from "@element-plus/icons-vue";
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()
  let language = ref(localStorage.getItem('lang') || 'zh')
  const router = useRouter()
  const route = useRoute()
  let loginLoadings= ref(false)
  const labelPosition = ref<FormProps['labelPosition']>('right')

  //注册用户参数
  const register = reactive({
    userName: '',
@@ -18,40 +20,36 @@
    passWord: '',
    confirmPassword:''
  })

  /*方法*/
  const checkName = (rule: any, value: any, callback: any) => {
    if (value.trim() === '') {
      callback(new Error('姓名不能为空'))
      callback(new Error(t('login.namea')))
    }else if(value.length>16){
      callback(new Error('长度不能超过16'))
      callback(new Error(t('login.len')))
    }else{
      callback()
    }
  }

  const checkPassword = (rule: any, value: any, callback: any) => {
    if (value.trim() === '') {
      callback(new Error('密码不能为空'))
      callback(new Error(t('login.passnull')))
    }else if(value.length>16 || value.length<6){
      callback(new Error('密码长度不能低于6或超过16'))
      callback(new Error(t('login.leng')))
    }else{
      callback()
    }
  }

  const checkConfirmPassword = (rule: any, value: any, callback: any) => {
    if (value.trim() === '') {
      callback(new Error('确认密码不能为空'))
      callback(new Error(t('login.spwn')))
    }else if(value !== register.passWord){
      callback(new Error('两次密码不相同'))
      callback(new Error(t('login.depass')))
    }else if(value.length>16 || value.length<6){
      callback(new Error('密码长度不能低于6或超过16'))
      callback(new Error(t('login.leng')))
    }else{
      callback()
    }
  }

  const ruleFormRef  = ref<FormInstance>()
  const rules = reactive<FormRules<typeof register>>({
    userName: [{ validator: checkName, trigger: 'blur' }],
@@ -59,7 +57,6 @@
    confirmPassword:[{ validator: checkConfirmPassword, trigger: 'blur' }],
    // loginName: [{ validator: validateString, trigger: 'blur' }]
  })

  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
@@ -68,7 +65,6 @@
        request.post('/user/register',
            register).then((res) => {
          if(res['code']==200){
            console.log(res.data)
            ElMessageBox.alert(
                `<strong>用户:<i style="color: #1890FF;">'${res.data.userName}</i>'
                 <br>账号ID:<i style="color: #1890FF;">${res.data.loginName}</i> </strong>`,
@@ -86,98 +82,138 @@
                }
              })
            })

            ElMessage.success(`注册成功`)
            ElMessage.success(t('register.registerSuccessful'))
            loginLoadings.value=false
          } else {
            ElMessage.error(res['msg'])
            return false
          }
        }).catch(error => {
          ElMessage.error("服务器连接失败")
          ElMessage.error(t('main.connectErr'))
          loginLoadings.value=false
          return false
        })
      }
    })
  }



  // console.log(route.params)
  const toLogin = () => {
              router.push({
                path:'/login',
              })
  }
</script>

<template>
  <h2 style="color: #1890FF">
    <span>
      <el-icon><UserFilled /></el-icon>
      <p>北玻ERP用户注册</p>
    </span>
  </h2>
  <div id="main-div">

    <div id="register">
      <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="register"
          ref="ruleFormRef"
          status-icon
          :rules="rules"
      >
        <el-form-item label="姓名：" prop="userName">
          <el-input v-model="register.userName" />
        </el-form-item>
<!--        <el-form-item label="登陆名：" prop="loginName">-->
<!--          <el-input v-model="register.loginName" />-->
<!--        </el-form-item>-->
        <el-form-item label="密码：" prop="passWord">
          <el-input type="password" v-model="register.passWord" />
        </el-form-item>
        <el-form-item label="确认密码：" prop="confirmPassword">
          <el-input type="password" v-model="register.confirmPassword" />
        </el-form-item>
        <el-form-item >
          <el-button
              :loading="loginLoadings"
              type="primary"
              @click="submitForm(ruleFormRef)"
          >注册
          </el-button>
        </el-form-item>
      </el-form>
  <div class="mainDiv" >
    <div id="main-login">
     <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);">
        {{ $t('northglassMESsystem') }}
      </div>
    </div>
  </div>

    <div id="div-login">
        <el-form
            @submit.native.prevent
            ref="ruleFormRef"
            :model="register"
            status-icon
            :rules="rules"
            label-width="75px"
        >
          <div id="title">{{ $t('register.newuserregister') }}</div>
        <div id="center">
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">姓名</div> -->
          <el-form-item prop="userName" :label="$t('register.name')">
            <el-input
            style="width: 200px;"
                v-model="register.userName"
                type="text"
                autocomplete="off"
                :prefix-icon="Avatar"
                :placeholder="$t('register.inputname')"
            />
          </el-form-item>
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div> -->
          <el-form-item prop="passWord" :label="$t('register.password')">
            <el-input
            style="width: 200px;"
                v-model="register.passWord"
                type="password"
                autocomplete="off"
                :prefix-icon="Lock"
                :placeholder="$t('register.pwErr')"
                show-password
            />
          </el-form-item>
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">确认密码</div> -->
          <el-form-item prop="confirmPassword" :label="$t('register.passwordation')">
            <el-input
            style="width: 200px;"
                v-model="register.confirmPassword" 
                type="password"
                :prefix-icon="Lock"
                autocomplete="off"
                show-password
                :placeholder="$t('register.pwErration')"
            />
          </el-form-item>
          <el-form-item id="submitForm">
            <el-button
            :loading="loginLoadings"
                type="primary"
                @click="submitForm(ruleFormRef)"
                plain
            >{{ $t('register.registration') }}
            </el-button>
            <el-button
                type="primary"
                @click="toLogin"
                plain
            >{{ $t('register.false') }}
            </el-button>
          </el-form-item>
        </div>
        </el-form>
      </div>
</div>
</div>
</template>

<style scoped>
#main-div{
  //overflow: hidden;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);

}
h2{
  text-align: center;
  width: 100vw;
  margin-top: 10vh;
}
#register{
  background-color: #FAFAFA;
  width: 50vw;
  height: 50vh;
  border-radius: 12px;
#div-login{
  margin-top: 5%;
  /* margin-top: 20%; */
  /* margin-left: 650px; */
  background-color: #fff;
  border-radius: 4px;
  float: right;
  width: 40%;
  height: 60%;
  min-width: 318px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 280px;
}
.el-form{
  max-width: 300px;
#center{
  margin-top: 45px;
  margin-left: 100px;
}

.mainDiv{
  overflow: hidden;
  min-width: 718px;
  background-image: url("../../src/assets/background.jpg");
}
#main-login{
  margin: 150px auto 0 auto;
  height: 70vh;
  width: 80vw;
}
#submitForm{
  margin-top: 30px;
  margin-left: -10px;
}
#title{
  font-size: 25px;
  text-align: center;
  margin-top: 10px;
}
</style>