teachcloud-print-web/src/modules/analysis/components/baseConfig/DiagnoseConfig.vue

<template>
  <div class="diagnose-config">
    <el-form
      ref="modalFormComp"
      :model="modalForm"
      :rules="rules"
      label-width="180px"
    >
      <el-form-item prop="knowledgeTitle" label="知识：">
        <el-input
          v-model.trim="modalForm.knowledgeTitle"
          placeholder="知识"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="rateSet" label="二级维度的精熟度定义：">
        <div class="part-box part-box-pad part-box-border-bold">
          <proficiency-edit
            :rates="modalForm.rateSet"
            @data-change="rateSetChange"
          ></proficiency-edit>
        </div>
      </el-form-item>
      <el-form-item prop="abilityTitle" label="能力：">
        <el-input
          v-model.trim="modalForm.abilityTitle"
          placeholder="能力"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="isfuf" label="是否呈现赋分：">
        <el-radio-group v-model="modalForm.isfuf">
          <el-radio
            v-for="(val, key) in BOOLEAN_TYPE"
            :key="key"
            :label="key * 1"
            >{{ val }}</el-radio
          >
        </el-radio-group>
        <p class="tips-info">
          说明：若选择“是”，则考后需提供学生的赋分成绩（学号、总分），报告中的分值显示赋分后的成绩分数；若选择“否”，则报告中的分值显示卷面原始分。
        </p>
      </el-form-item>
      <el-form-item prop="fullScore" label="满分：">
        <el-input-number
          v-model="modalForm.fullScore"
          placeholder="请输入满分，如100"
          :min="1"
          :max="9999"
          :step="1"
          step-strictly
          :controls="false"
        ></el-input-number>
        <p class="tips-info">
          说明：若显示赋分，则填写赋分满分分值，否则填写卷面原始分满分分值。
        </p>
      </el-form-item>
      <el-form-item prop="passScore" label="及格分：">
        <el-input-number
          v-model="modalForm.passScore"
          placeholder="请输入及格分，如60"
          :min="1"
          :max="9999"
          :step="1"
          step-strictly
          :controls="false"
        ></el-input-number>
        <p class="tips-info">
          说明：成绩分数≥及格分数线，报告中的结果显示“通过”，否则为“不通过”。
        </p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { BOOLEAN_TYPE } from "@/constants/enumerate";
import ProficiencyEdit from "./ProficiencyEdit.vue";

const initModalForm = {
  id: "",
  knowledgeTitle: "课程标准规定的学科内容",
  abilityTitle: "经学习与训练内化而成的心理结构",
  isfuf: 0,
  fullScore: 100,
  passScore: 100,
  rateSet: []
};

export default {
  name: "diagnose-config",
  components: { ProficiencyEdit },
  data() {
    const isEmpty = num => !num && num !== 0;

    const rateSetValidator = (rule, value, callback) => {
      if (
        value.some(item => isEmpty(item.startRate) || isEmpty(item.endRate))
      ) {
        return callback(new Error("请完成精熟度定义"));
      }

      for (let i = 0; i < value.length; i++) {
        const item = value[i];
        if (i) {
          const prevItem = value[i - 1];
          if (prevItem.startRate - 1 !== item.endRate)
            return callback(new Error("请保证区间连续"));
        }
      }

      callback();
    };
    return {
      modalForm: { ...initModalForm },
      BOOLEAN_TYPE,
      rules: {
        knowledgeTitle: [
          {
            required: true,
            message: "请输入知识",
            trigger: "change"
          },
          {
            max: 100,
            message: "知识字数不能超过100",
            trigger: "change"
          }
        ],
        abilityTitle: [
          {
            required: true,
            message: "请输入能力",
            trigger: "change"
          },
          {
            max: 100,
            message: "能力字数不能超过100",
            trigger: "change"
          }
        ],
        fullScore: [
          {
            required: true,
            message: "请输入满分",
            trigger: "change"
          }
        ],
        passScore: [
          {
            required: true,
            message: "请输入及格分",
            trigger: "change"
          }
        ],
        rateSet: [
          {
            validator: rateSetValidator,
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    getList() {},
    rateSetChange(data) {
      this.modalForm.rateSet = data;
      this.$refs.modalFormComp.validateField("rateSet");
    },
    async submit() {}
  }
};
</script>