EnterInformation.vue

<template>
  <div style="padding:10px 0 0 20px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <h3>个人信息录入</h3>
      <el-form-item label="单位" prop="beyondUnit">
        <el-input
          style="width: 70%"
          placeholder="请输入单位"
          v-model="form.beyondUnit"
          maxlength="30"
          clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input
          style="width: 70%"
          placeholder="请输入姓名"
          v-model="form.name"
          maxlength="11"
          clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="form.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input
          style="width: 70%"
          placeholder="手机号"
          v-model="form.phoneNum"
          type="number"
          maxlength="11"
          clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="onSubmit" type="primary">下一步</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "EnterInformation",
  data() {
    return {
      form: {
        beyondUnit: null,
        name: null,
        sex: null,
        phoneNum: null,
        testBeginTime: null,
      },
    };
  },
  methods: {
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      var strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
      //此处可以拿外部的变量接收  strDate:2022-05-01 13:25:30
      //this.date = strDate;
      this.form.testBeginTime = strDate;
    },

    onSubmit() {
      this.currentTime();
      // let params = this.form;
      let params = JSON.stringify(this.form);
      console.log(this.form.beyondUnit);
      if (!this.form.beyondUnit) {
        console.log(params.beyondUnit);
        this.$message("请输入单位");
      } else if (!this.form.name) {
        this.$message("请输入姓名");
      } else if (!this.form.sex) {
        this.$message("请选择性别");
      } else if (!this.form.phoneNum) {
        this.$message("请输入手机号");
      } else if (this.form.phoneNum.length > 11) {
        this.$message("长度超出11位");
      } else {
        const routeData = this.$router.resolve({
          path: "/trainingMaterials", //跳转目标窗口的地址
          query: {
            params, //括号内是要传递给新窗口的参数
          },
        });
        window.open(routeData.href, "_search");
      }
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>

<style>
</style>