Merge branch 'master' of http://bore.pub:10439/r/ERP_override

廖井涛

2024-09-06 10a26b9b670efef0a2adba675c794c539846aa3c

 north-glass-erp/northglass-erp/src/views/RegisterView.vue

New file
@@ -0,0 +1,185 @@
<script setup lang="ts">
  import {useRouter,useRoute} from 'vue-router'
  import { reactive, ref } from 'vue'
  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";

  const router = useRouter()
  const route = useRoute()
  let loginLoadings= ref(false)
  const labelPosition = ref<FormProps['labelPosition']>('right')

  //注册用户参数
  const register = reactive({
    userName: '',
    // loginName: '',
    password: '',
    confirmPassword:''
  })

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

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

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

  const ruleFormRef  = ref<FormInstance>()
  const rules = reactive<FormRules<typeof register>>({
    userName: [{ validator: checkName, trigger: 'blur' }],
    password:[{ validator: checkPassword, trigger: 'blur' }],
    confirmPassword:[{ validator: checkConfirmPassword, trigger: 'blur' }],
    // loginName: [{ validator: validateString, trigger: 'blur' }]
  })

  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        loginLoadings.value=true
        register.password = btoa(register.password)
        request.post('/user/register',
            register).then((res) => {
          if(res['code']==200){
            ElMessageBox.alert(
                `<strong>用户:<i style="color: #1890FF;">'${res.data.userName}</i>'
                 <br>账号ID:<i style="color: #1890FF;">${res.data.loginName}</i> </strong>`,
                '注册提示：',
                {
                  dangerouslyUseHTMLString: true,
                  confirmButtonText: '登陆',
                  center: true,
                }
            ).then(()=>{
              router.push({
                path:'/login',
                query: {
                  id: res.data.loginName
                }
              })
            })

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



  // console.log(route.params)
</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>
  </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;
  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;
}

</style>