front/src/views/career/zhiyuan/components/score.vue

<template>
  <div class="form">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="您的总分" prop="score">
          <el-input  v-model="form.score" placeholder="请输入分数"></el-input>
        </el-form-item>
      <el-form-item label="您的首选科目" prop="firstSubject">
        <el-radio-group v-model="form.firstSubject" >
          <el-radio label="物理"></el-radio>
          <el-radio label="历史"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="您的次选科目" prop="lastSubject">
        <el-checkbox-group v-model="form.lastSubject" :max="2">
          <el-checkbox label="化学" name="type"></el-checkbox>
          <el-checkbox label="生物" name="type"></el-checkbox>
          <el-checkbox label="政治" name="type"></el-checkbox>
          <el-checkbox label="地理" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="您的位次">
        <el-input   disabled placeholder="当前为估分模拟，不需填写位次"></el-input>
        <span class="f12 f-666 ml10">当前为估分模拟，不需填写排名</span>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" class="btn" @click="next" >下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

export default {
  data() {
    var coustomValid = (rule, value, callback) => {
      if (rule.field == 'score' &&  value > 750) {
        return callback(new Error('成绩超出当前省份满分'));
      }

      if (rule.field == 'lastSubject' &&  value.length < 2) {
        return callback(new Error('请选择两项次选科目'));
      }
      callback();
    };
    return {
      form: {
        score: '',
        firstSubject: '',
        lastSubject: []
      },
      list: [],
      rules: {
        score:  [
          { required: true, message: '请输入你的总分', trigger: 'blur' },
          { validator: coustomValid, trigger: 'blur'  }
        ],
        firstSubject: [
          { required: true, message: '请选择首选科目', trigger: 'change' }
        ],
        lastSubject:[
          { required: true, message: '请选择次选科目', trigger: 'change' },
          { validator: coustomValid, trigger: 'change'  }
        ]
      }
    }
  },
  methods: {
    next() {
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$router.push({ path:'/zhiyuan/phase', query:{...this.form} })
          console.log('success submit!!');
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.form{
  position: relative;
  padding: 40px 280px 10px 280px;
}
.form {
  ::v-deep {
    .el-form-item__label {
      padding-right: 25px;
    }
    .el-input {
       width: 300px;
     }
  }
}
.btn{
  width: 120px;
  margin-left: 83px;
  margin-top: 30px;
}

</style>