oa-system/src/components/Enroll.vue

<template>
  <div class="enroll-all">
    <div class="enroll-form-box">
      <div class="enroll-title">员工注册</div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="form-li">
          <el-form-item label="中文名称" prop="mandarinName">
            <el-input v-model="ruleForm.mandarinName"></el-input>
          </el-form-item>
          <el-form-item label="英文名称" prop="eflName">
            <el-input v-model="ruleForm.eflName"></el-input>
          </el-form-item>
        </div>
        <div class="form-li">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="form-li">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="紧急电话" prop="urgentphone">
            <el-input v-model="ruleForm.urgentphone"></el-input>
          </el-form-item>
        </div>
        <div class="form-li">
          <el-form-item label="密码" prop="pass">
            <el-input v-model="ruleForm.pass"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass"></el-input>
          </el-form-item>
        </div>
        <div class="form-li">
          <el-form-item label="身份证号" prop="IDnumber">
            <el-input v-model="ruleForm.IDnumber"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="datebirth">
            <el-input v-model="ruleForm.datebirth"></el-input>
          </el-form-item>
        </div>
        <div class="form-li">
          <el-form-item label="学历" prop="educated">
            <el-input v-model="ruleForm.educated"></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="specialized">
            <el-input v-model="ruleForm.specialized"></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" prop="school">
            <el-input v-model="ruleForm.school"></el-input>
          </el-form-item>
          <el-form-item label="统招/成教" prop="recruitment">
            <el-input v-model="ruleForm.recruitment"></el-input>
          </el-form-item>
          <el-form-item label="婚姻状况" prop="maritalstatus">
            <el-input v-model="ruleForm.maritalstatus"></el-input>
          </el-form-item>
          <el-form-item label="家庭地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
        </div>
        <div class="form-li">
          <el-form-item label="所属公司" prop="corporation">
            <el-select
              v-model="ruleForm.corporation"
              placeholder="请选择所属公司"
            >
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属部门" prop="division">
            <el-select v-model="ruleForm.division" placeholder="请选择所属部门">
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="工作经历" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <div class="enroll-btn">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即注册</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        mandarinName: "",
        eflName: "",
        sex: "",
        email: "",
        phone: "",
        urgentphone: "",
        pass: "",
        checkPass: "",
        IDnumber: "",
        educated: "",
        specialized: "",
        school: "",
        recruitment: "",
        datebirth: "",
        maritalstatus: "",
        address: "",
        corporation: "",
        division: "",
        desc: "",
      },
      rules: {
        mandarinName: [
          { required: true, message: "中文名称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        eflName: [
          { required: true, message: "英文名称", trigger: "blur" },
          { min: 0, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          { required: true, message: "手机号必填", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        urgentphone: [
          { required: true, message: "紧急号码必填", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "紧急号码格式不正确",
            trigger: "blur",
          },
        ],
        pass: [
          { required: true, validator: validatePass, trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        IDnumber: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern:
              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur",
          },
        ],
        datebirth: [
          {
            required: true,
            message: "请填写证件号码匹配出生日期",
            trigger: "blur",
          },
        ],
        educated: [{ required: true, message: "请填写学历", trigger: "blur" }],
        specialized: [
          { required: true, message: "请填写专业", trigger: "blur" },
        ],
        school: [
          { required: true, message: "请填写毕业院校", trigger: "blur" },
        ],
        recruitment: [
          { required: true, message: "请填写统招/成教", trigger: "blur" },
        ],
        maritalstatus: [
          { required: true, message: "请填写婚姻状况", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请填写家庭地址", trigger: "blur" },
        ],
        corporation: [
          { required: true, message: "请选择所属公司", trigger: "change" },
        ],
        division: [
          { required: true, message: "请选择所属部门", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写工作经历", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {},
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
.enroll-all {
  background-color: #f1f1f1;
  padding-top: 100px;
  height: 900px;
  /*background-image: url("../assets/back.png");*/
  /*background-repeat: no-repeat;*/
  /*background-size: 100% 100%;*/
}
.enroll-form-box {
  width: 800px;
  margin: 0 auto;
  box-shadow: 0 0 5px #0005;
  padding: 20px 20px 20px 0px;
  border-radius: 5px;
  background-color: #fff;
}
.enroll-title {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: #555;
  margin-bottom: 20px;
}
.form-li {
  display: flex;
  flex-wrap: wrap;
}
.form-li > div {
  width: 50%;
}
.el-select {
  width: 100%;
}
.enroll-btn {
  text-align: center;
}
</style>