pay/ruoyi-ui/src/views/register.vue

<template>
  <div class="register">

    <div class="register-form">

      <h3 class="title">薪资管理系统</h3>

      <el-steps :space="300" :active="activeType" align-center style="margin-bottom: 50px;margin-top: 20px;">
        <el-step title="注册公司"></el-step>
        <el-step title="注册用户"></el-step>
        <el-step title="注册成功"></el-step>
      </el-steps>

      <div style="width: 400px;margin: 0 auto;" v-if="activeType===0">
        <el-form ref="formGs" :model="formGs" :rules="rulesGs" label-width="100px">
          <el-form-item label="公司名称" prop="name">
            <el-input v-model="formGs.name" placeholder="请输入公司名称" />
          </el-form-item>
          <el-form-item label="联系手机号" prop="phone">
            <el-input v-model="formGs.phone" placeholder="请输入手机号码" maxlength="11"/>
          </el-form-item>
          <el-form-item label="公司固话" prop="fixPhone">
            <el-input v-model="formGs.fixPhone" placeholder="请输入公司固话" />
          </el-form-item>
          <el-form-item label="公司地址" prop="address">
            <el-input v-model="formGs.address" placeholder="请输入公司地址" />
          </el-form-item>
          <el-form-item label="公司网址" prop="website">
            <el-input v-model="formGs.website" placeholder="请输入公司网址" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formGs.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-button
            :loading="loadingGs"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="submitGs"
          >
            <span v-if="!loadingGs">提交</span>
            <span v-else>提 交 中...</span>
          </el-button>
        </el-form>
      </div>

      <div style="width: 400px;margin: 0 auto;" v-if="activeType===1">
        <el-form ref="formUser" :model="formUser" :rules="rulesUser" label-width="80px" label-position="right">
          <el-row>
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="formUser.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
            <el-form-item label="用户账号" prop="userName">
              <el-input v-model="formUser.userName" placeholder="请输入用户账号" maxlength="30" />
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
              <el-input v-model="formUser.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="formUser.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formUser.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-row>
          <el-button
            :loading="loadingUser"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="submitUser"
          >
            <span v-if="!loadingUser">注册</span>
            <span v-else>注 册 中...</span>
          </el-button>
        </el-form>
      </div>

      <div v-if="activeType===2" style="width: 400px;margin: 0 auto;">
        <el-result icon="success" subTitle="注册成功，请返回登录页登录">
        </el-result>
      </div>

      <div style="font-size: 14px;margin-top: 30px;">
        <div style="color: #d50000">温馨提示：注册成功前请不要关闭页面，手机号注册过一次后，不可在重复注册。</div>
      </div>
      <div style="font-size: 14px;margin-top: 10px;">
        <router-link class="link-type" :to="'/login'">返回登录页</router-link>
      </div>

    </div>

    <!--  底部  -->
    <!--    <div class="el-register-footer">
          <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
        </div>-->
  </div>
</template>

<script>
import { registerGs, registerUser } from "@/api/login";

export default {
  name: "Register",
  data() {
    return {
      codeUrl: "",
      activeType: 0,  // 0 注册公司  1 注册用户  2 注册用户
      // 公司信息提交表单参数
      formGs: {},
      // 公司信息表单校验
      rulesGs: {
        name: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "联系手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        /*fixPhone: [
          { required: true, message: "公司固话不能为空", trigger: "blur" }
        ],*/
        address: [
          { required: true, message: "公司地址不能为空", trigger: "blur" }
        ],
        /*website: [
          { required: true, message: "公司网址不能为空", trigger: "blur" }
        ],*/
        /*remark: [
          { required: true, message: "备注不能为空", trigger: "blur" }
        ]*/
      },
      loadingGs: false,
      // 表单参数
      formUser: {},
      // 表单校验
      rulesUser: {
        userType: [
          { required: true, message: "用户类型不能为空", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "用户账号不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        tenantId:[
          { required: true, message: "所属公司不能为空", trigger: "blur" },
        ]
      },
      loadingUser: false,
      loading: false
    };
  },
  created() {

  },
  methods: {
    submitGs(){
      this.$refs["formGs"].validate(valid => {
        if (valid) {
          this.loadingGs = true;
          registerGs(this.formGs).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.activeType=1;
            this.formUser.tenantId = response.data.id;
            this.formUser.tenantName = this.formGs.name;
            response.data.roles.forEach(item=>{
              if(item.roleKey==='companyAdmin'){
                this.formUser.roleIds = [item.roleId]
              }
            })
          }).finally(() => {
            this.loadingGs = false;
          });
        }
      });
    },
    submitUser(){
      this.$refs["formUser"].validate(valid => {
        if (valid) {
          this.loadingUser = true;
          this.formUser.userType = 'sys_user'
          registerUser(this.formUser).then(response => {
            this.activeType=2;
          }).finally(() => {
            this.loadingUser = false;
          });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 800px;
  padding: 30px 30px 50px 30px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>