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 @blur="emailpj" v-model="ruleForm.mandarinName"></el-input>
          </el-form-item>
          <el-form-item label="英文名称" prop="eflName">
            <el-input @blur="emailpj" 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">
              <template slot="append">@pan-american-intl.com</template>
            </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" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" show-password></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-date-picker type="date" placeholder="选择日期" v-model="ruleForm.datebirth" style="width: 100%;"></el-date-picker>
            <!-- <el-input v-model="ruleForm.datebirth"></el-input> -->
          </el-form-item>
        </div>
        <div class="form-li">
          <el-form-item label="学历" prop="educated">
            <el-select v-model="ruleForm.educated" placeholder="请选择学历">
              <el-option label="小学" value="1"></el-option>
              <el-option label="初中" value="2"></el-option>
              <el-option label="高中" value="3"></el-option>
              <el-option label="专科" value="4"></el-option>
              <el-option label="本科" value="5"></el-option>
              <el-option label="研究生" value="6"></el-option>
            </el-select>
          </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-select v-model="ruleForm.recruitment" placeholder="请选择教育类型">
              <el-option label="统招" value="0"></el-option>
              <el-option label="成教" value="1"></el-option>
            </el-select>
          </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="homeAddress">
            <el-input v-model="ruleForm.homeAddress"></el-input>
          </el-form-item>
          <el-form-item label="所属公司" prop="corporation">
            <el-select v-model="ruleForm.corporation" value-key="id" @change="changeCorporation" placeholder="请选择所属公司">
              <el-option
              v-for="item in CorporationOption"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属部门" prop="division">
            <el-select v-model="ruleForm.division" value-key="id" @change="changeDivision" placeholder="请选择所属部门">
              <el-option
              v-for="item in DivisionOption"
              :key="item.depId"
              :label="item.depName"
              :value="item.depId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位" prop="posts">
            <el-select v-model="ruleForm.posts" placeholder="请选择职位">
              <el-option
              v-for="item in PostsOption"
              :key="item.jobId"
              :label="item.jobName"
              :value="item.jobId">
              </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>
          <el-button @click="houtui()">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { pinyin } from 'pinyin-pro';
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();
      }
    };
    var phonePass = (rule, value, callback) => {
      console.log(value)
      console.log(this.ruleForm.phone)
      if (value === "") {
        callback(new Error("请输入紧急电话"));
      }else if (value === this.ruleForm.phone) {
        callback(new Error("紧急电话与联系电话不能一致!"));
      }else {
        callback();
      }
    };
    return {
      CorporationOption:[],//公司
      DivisionOption:[],//部门
      PostsOption:[],//职位
      ruleForm: {
        mandarinName: "",//中文名称
        eflName: "",//英文名称
        sex: "",//性别
        email: "",//邮箱
        phone: "",//手机号
        urgentphone: "",//紧急电话
        pass: "",//密码
        checkPass: "",//确认密码
        IDnumber: "",//身份证号
        educated: "",//学历
        specialized: "",//专业
        school: "",//毕业院校
        recruitment: "",//统招/成教
        datebirth: "",//入职时间
        homeAddress:"",//家庭地址
        maritalstatus: "",//婚姻状况
        address: "",//现在居住住址
        corporation: "",//所属公司
        division: "",//所属部门
        posts:"",//职位
        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: "长度在 0 到 10 个字符", 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,validator: phonePass, 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: "change",
          },
        ],
        educated: [{ required: true, message: "请选择学历", trigger: "change" }],
        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" },
        ],
        homeAddress: [
          { required: true, message: "请填写家庭地址", trigger: "blur" },
        ],
        corporation: [
          { required: true, message: "请选择所属公司", trigger: "change" },
        ],
        division: [
          { required: true, message: "请选择所属部门", trigger: "blur" },
        ],
        posts: [
          { required: true, message: "请选择职位", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请填写工作经历", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.register()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //邮箱拼接
    emailpj(){
      let emailall;
      let surname=pinyin(this.ruleForm.mandarinName[0], {toneType: 'none'})
      this.ruleForm.email=this.ruleForm.eflName+'.'+surname
      emailall=this.ruleForm.eflName+'.'+surname+'@pan-american-intl.com'
      console.log(emailall)
    },
    //获取公司
    daraSource(){
      var url = "/api/register/daraSource"
      var that = this
      this.$axios({
          method: 'post',
          url: url,
          headers: {
              Authorization: 'Bearer ' + this.token
          }
      }).then(function (res) {
          if(res.data.code==200){
              console.log(res)
              that.CorporationOption=res.data.data;
          }else{
              that.$message({
                  message: '加载失败！原因：'+res.data.msg,
                  type: 'warning'
              });
          }
      })
    },
    //处理性别
    sxechuli(val){
      if(val=='男'){
        return 0
      }else if(val=='女'){
        return 1
      }
    },
    //日期处理（日）
    TimeProcessingri(val){
      if(val instanceof Date){
          let newsyear=val.getFullYear();
          let newsMonth=val.getMonth() + 1;
          let newsday=val.getDate();
          if((val.getMonth() + 1)<10){
              newsMonth='0'+newsMonth
          }else{
              newsMonth=val.getMonth() + 1
          }
          return newsyear+ '-' +newsMonth+ '-' + newsday;
      }else{
          return val
      }
    },
    //切换公司
    changeCorporation(item){
      console.log(item);
      this.ruleForm.division='';
      this.ruleForm.posts='';
      for(let i=0;i<this.CorporationOption.length;i++){
        if(this.CorporationOption[i].companyId==item){
          this.DivisionOption=this.CorporationOption[i].subDep
        }
      }
      // console.log(this.DivisionOption)
    },
    //切换部门
    changeDivision(item){
      this.ruleForm.posts='';
      for(let j=0;j<this.DivisionOption.length;j++){
        if(this.DivisionOption[j].depId==item){
          this.PostsOption=this.DivisionOption[j].subJob
        }
      }
      // console.log(this.PostsOption)
    },
    //注册
    register(){
      var url = "/api/register"
      var that = this

      let data={
        createUserId:0,
        cnName:that.ruleForm.mandarinName,
        enName:that.ruleForm.eflName,
        email:that.ruleForm.email+'@pan-american-intl.com',
        sex:that.sxechuli(that.ruleForm.sex),
        phone:that.ruleForm.phone,
        urgencyPhone:that.ruleForm.urgentphone,
        password:that.ruleForm.pass,
        address:that.ruleForm.address,
        idCrad:that.ruleForm.IDnumber,
        education:that.ruleForm.educated,
        major:that.ruleForm.specialized,
        graduationSchhol:that.ruleForm.school,
        educationType:that.ruleForm.recruitment,
        maritalStatus:that.ruleForm.maritalstatus,
        homeAddress:that.ruleForm.homeAddress,
        companyId:that.ruleForm.corporation,
        depId:that.ruleForm.division,
        jobPostId:that.ruleForm.posts,
        workExperience:that.ruleForm.desc,
        edate:that.TimeProcessingri(that.ruleForm.datebirth),
      }
      console.log(data)
      this.$axios({
          method: 'post',
          url: url,
          headers: {
              Authorization: 'Bearer ' + this.token
          },
          data:{
            createUserId:0,
            cnName:that.ruleForm.mandarinName,
            enName:that.ruleForm.eflName,
            email:that.ruleForm.email+'@pan-american-intl.com',
            sex:that.sxechuli(that.ruleForm.sex),
            phone:that.ruleForm.phone,
            urgencyPhone:that.ruleForm.urgentphone,
            password:that.ruleForm.pass,
            address:that.ruleForm.address,
            idCrad:that.ruleForm.IDnumber,
            education:that.ruleForm.educated,
            major:that.ruleForm.specialized,
            graduationSchhol:that.ruleForm.school,
            educationType:that.ruleForm.recruitment,
            maritalStatus:that.ruleForm.maritalstatus,
            homeAddress:that.ruleForm.homeAddress,
            companyId:that.ruleForm.corporation,
            depId:that.ruleForm.division,
            jobPostId:that.ruleForm.posts,
            workExperience:that.ruleForm.desc,
            edate:that.TimeProcessingri(that.ruleForm.datebirth),
          }
      }).then(function (res) {
          if(res.data.code==200){
              console.log(res)
              that.ruleForm= {
                mandarinName: "",//中文名称
                eflName: "",//英文名称
                sex: "",//性别
                email: "",//邮箱
                phone: "",//手机号
                urgentphone: "",//紧急电话
                pass: "",//密码
                checkPass: "",//确认密码
                IDnumber: "",//身份证号
                educated: "",//学历
                specialized: "",//专业
                school: "",//毕业院校
                recruitment: "",//统招/成教
                datebirth: "",//入职时间
                homeAddress:"",//家庭地址
                maritalstatus: "",//婚姻状况
                address: "",//现在居住住址
                corporation: "",//所属公司
                division: "",//所属部门
                posts:"",//职位
                desc: "",//工作经历
            },
              that.$notify({
                title: '注册成功',
                message: res.data.msg,
                type: 'success',
                duration: 0
              });
          }else{
              that.$message({
                  message: '注册失败！原因：'+res.data.msg,
                  type: 'warning'
              });
          }
      })
    },
    //返回
    houtui(){
      this.$router.go(-1)
    }
  },
  mounted(){
    this.daraSource()
  },
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
}
.enroll-all {
  background-color: #f1f1f1;
  padding-top: 63px;
  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;
}
.form-li .el-input-group__append, .el-input-group__prepend{
  padding: 0 1px;
}
</style>