FE-V2-PC/src/views/safetyEducationExam/securityExam/qu/addTopic.vue

<!--新增题目-->
<template>
  <div class="addTopic">
    <p class="title-p">
      {{title}}-{{pageType == 1? "单选题": pageType == 2? "多选题": pageType == 3? "判断题": ""}}
    </p>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <!--      <el-form-item label="学科类别:" prop="code">
              <el-select v-model="form.code" @change="subClassChange" placeholder="请选择学科类别">
                <el-option
                  v-for="item in subClassOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>-->

      <el-form-item label="题目分类:" prop="classifyIds">
        <el-select
          v-model="form.classifyIds"
          placeholder="请选择题目分类"
        >
          <el-option
            v-for="item in classifys"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="难度级别:" prop="level">
        <el-select v-model="form.level" placeholder="请选择难度级别">
          <el-option
            v-for="item in levels"
            :key="item.type"
            :label="item.value"
            :value="item.type"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!--      <el-form-item label="归属题库:" prop="repoIds">
              <el-select
                v-model="form.repoIds"
                multiple
                placeholder="请选择归属题库"
              >
                <el-option
                  v-for="item in repoOption"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>-->
<!--      <el-form-item label="专业:" prop="majorIds">
        <el-select
          v-model="form.majorIds"
          multiple
          placeholder="请选择专业"
        >
          <el-option
            v-for="item in majors"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>-->
      <!--<el-form-item label="适用范围:" prop="repoIds">-->
        <!--<el-select-->
          <!--v-model="form.scopeType"-->
          <!--placeholder="请选择适用范围"-->
        <!--&gt;-->
          <!--<el-option-->
            <!--v-for="item in scopeTypes"-->
            <!--:key="item.id"-->
            <!--:label="item.value"-->
            <!--:value="item.type"-->
          <!--&gt;-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="题目名称:" prop="content">
        <el-input
          v-model="form.content"
          placeholder="请输入题目名称"
          clearable
          size="small"
          maxLength="1500"
        />
      </el-form-item>
      <el-form-item
        label="选项设置:"
        class="options-box"
        v-if="pageType == 1 || pageType == 2"
      >
        <el-form-item
          :label="
            index == 0
              ? '选项A'
              : index == 1
              ? '选项B'
              : index == 2
              ? '选项C'
              : index == 3
              ? '选项D'
              : index == 4
              ? '选项E'
              : index == 5
              ? '选项F'
              : index == 6
              ? '选项G'
              : index == 7
              ? '选项H'
              : ''
          "
          v-for="(item, index) in form.answerList"
          :key="index"
          class="options-min-box"
        >
          <el-input
            v-model="item.content"
            placeholder="请输入选项内容"
            clearable
            size="small"
            maxLength="1500"
          />
          <i class="el-icon-remove del-i-box" @click="delOptions(index)"></i>
        </el-form-item>
        <p class="add-button" @click="addOptions">
          <i class="el-icon-plus"></i>添加
        </p>
      </el-form-item>
      <el-form-item label="正确答案:">
        <template>
          <el-radio
            v-model="radio"
            :label="index"
            v-for="(item, index) in form.answerList"
            :key="index"
            v-if="pageType == 1"
          >{{
              index == 0
                ? "选项A"
                : index == 1
                  ? "选项B"
                  : index == 2
                    ? "选项C"
                    : index == 3
                      ? "选项D"
                      : index == 4
                        ? "选项E"
                        : index == 5
                          ? "选项F"
                          : index == 6
                            ? "选项G"
                            : index == 7
                              ? "选项H"
                              : ""
            }}</el-radio
          >
          <el-checkbox
            v-model="radioList"
            :label="index"
            v-for="(item, index) in form.answerList"
            :key="index"
            v-if="pageType == 2"
          >{{
              index == 0
                ? "选项A"
                : index == 1
                  ? "选项B"
                  : index == 2
                    ? "选项C"
                    : index == 3
                      ? "选项D"
                      : index == 4
                        ? "选项E"
                        : index == 5
                          ? "选项F"
                          : index == 6
                            ? "选项G"
                            : index == 7
                              ? "选项H"
                              : ""
            }}</el-checkbox
          >
          <el-radio v-model="radio" :label="index" v-if="pageType == 3" v-for="(item,index) in form.answerList" :key="index"
          >{{item.content}}</el-radio
          >
        </template>
      </el-form-item>
      <el-form-item label="答案解析:" prop="analysis">
        <el-input
          v-model="form.analysis"
          placeholder="请输入答案解析"
          clearable
          size="small"
          maxLength="1500"
        />
      </el-form-item>
    </el-form>
    <div class="button-box">
      <el-button @click="leftButtonClick">取 消</el-button>
      <el-button type="primary" @click="rightButtonClick">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { optionRepo } from "@/api/exam/repo";
import { list_option } from "@/api/exam/el_classify";
import { getQu,updateQu,addQu } from "@/api/exam/qu";
export default {
  props: {
    pageType: {},
    quId:{},
    title:"",
  },
  name: "addTopic",
  data() {
    return {
      scopeTypes: [
        {
          type: 1,
          value: "安全准入考试",
        },
        {
          type: 2,
          value: "负面清单考试",
        },
        {
          type: 3,
          value: "黑名单考试",
        },
        {
          type: 4,
          value: "模拟考试",
        },
      ],
      levels: [
        {
          type: 1,
          value: "中等",
        },
        {
          type: 2,
          value: "较难",
        },
        {
          type: 3,
          value: "难",
        },
      ],
      quTypes: [
        {
          type: 1,
          value: "单选题",
        },
        {
          type: 2,
          value: "多选题",
        },
        {
          type: 3,
          value: "判断题",
        },
      ],
      form: {
        code: "",//学科类别
        level: "",//难度级别
        repoIds:[],//归属题库
        content: "",//名称
        answerList:[],//选项
        analysis:"",//解析
        classifyIds: "",//题目分类
        majorIds: "",//专业
      },
      radio:"",
      radioList:[],
      rules: {
        classifyIds: [
          { required: true, trigger: "blur", message: "请选择题目分类" },
        ],
        level: [
          { required: true, trigger: "blur", message: "请选择难度级别" },
        ],
        // repoIds: [
        //   { required: true, trigger: "blur", message: "请选择归属题库" },
        // ],
        content: [
          { required: true, trigger: "blur", message: "请输入题目名称" },
          { required: true, message: "请输入题目名称", validator: this.spaceJudgment, trigger: "blur" }
          // { min: 2, max: 60, message: '题目名称长度必须介于 2 和 60 之间', trigger: 'blur' }
        ],
        // analysis: [
        //   { required: true, trigger: "blur", message: "请输入答案解析" },
        //   { min: 2, max: 200, message: '答案解析长度必须介于 2 和 200 之间', trigger: 'blur' }
        // ],
      },
      // 学科字典
      subClassOptions: [],
      // 归属题库
      repoOption: [],
      // 题目分类
      classifys: [],
      //专业
      majors: []
    };
  },
  created() {
    if(this.quId){
      // this.form = {...this.quData};
      this.getInfo(this.quId);
      this.title = '编辑题目'
    }else{
      this.title = '新增题目'
    }
    if(this.pageType==3){
      this.form.answerList=[
        {
          content:"正确",
          isRight:0
        },
        {
          content:"错误",
          isRight:0
        },
      ]
    }
    // this.getDicts("subject_class").then((response) => {
    //   this.subClassOptions = response.data;
    // });
    // this.getRepoOption();
    this.getClassifys();
    this.getMajors();
  },
  methods: {
    subClassChange(e){
      this.getRepoOption(e);
    },
    getInfo(id){
      let self = this;
      getQu(id).then(response => {
        this.form = response.data;
        this.form.code = String(response.data.code);
        this.form.classifyIds = Number(this.form.classifyIds);
        // let ids = [];
        /* if(this.form.majorIds){
          this.form.majorIds = this.form.majorIds.split(",")
          for (let i = 0; i < this.form.majorIds.length; i++) {
            ids.push(parseInt(this.form.majorIds[i]))
          }
          this.form.majorIds = ids;
        } */


        // ids = [];
        // if(this.form.classifyIds){
        //   this.form.classifyIds = this.form.classifyIds.split(",")
        //   for (let i = 0; i < this.form.classifyIds.length; i++) {
        //     ids.push(parseInt(this.form.classifyIds[i]))
        //   }
        //   this.form.classifyIds = ids;
        // }

        // self.getRepoOption(this.form.code)
        //判断题
        if(this.pageType==3||this.pageType==1){
          for(let i=0;i<response.data.answerList.length;i++){
            if(response.data.answerList[i].isRight==1){
              self.radio = i;
            }
          }
        }else if(this.pageType==2){
          for(let i=0;i<response.data.answerList.length;i++){
            if(response.data.answerList[i].isRight==1){
              self.radioList.push(i);
            }
          }
        }
        // this.form.level = String(response.data.level);
      });
    },
    /** 查询题目分类 */
    getClassifys(){
      list_option({}).then(response => {
        this.classifys = response.data;
      });
    },
    /** 查询专业分类 */
    getMajors(){
      // TODO 等专业接口 出来替换
      //list_option({}).then(response => {
      this.majors = [
        {
          id: 1,
          title: "化学类"
        },
        {
          id: 2,
          title: "物理类"
        }
      ]
      //});
    },
    /** 查询题库 */
    getRepoOption(code) {
      optionRepo({"code": code}).then(response => {
        this.repoOption = response.data;
      });
    },
    StringFuncition(index) {
      let text = String(index);
      return String(index + 1);
    },
    //添加选项
    addOptions() {
      if (this.form.answerList.length > 7) {
        Message({
          message: "无法添加更多选项",
          type: "warning",
        });
        return;
      }
      let obj = {
        content: "",
      };
      if (this.pageType == 2) {
        obj.checked = false;
      }
      this.form.answerList.push(obj);
    },
    //删除选项
    delOptions(index) {
      let self = this;
      this.form.answerList.splice(index, 1);
      if (this.pageType==2){
        for (let i=0;i<self.radioList.length;i++){
          if(!self.form.answerList[self.radioList[i]]){
            self.radioList.splice(i, 1);
          }
        }
      } else if(this.pageType==1){
        if(!self.form.answerList[self.radio]){
          self.radio="";
        }
      }
    },
    leftButtonClick() {
      this.$parent.offAddTopic();
    },
    rightButtonClick() {
      let self = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          // 数组转换
          // this.form.majorIds = this.form.majorIds.join(",")
          // this.form.classifyIds = this.form.classifyIds.join(",")
          if(this.form.id){
            //修改
            let newData = {...this.form};
            if(this.pageType==1||this.pageType==3){
              if(!self.radio){
                if (self.radio!==0){
                  Message({
                    message: "请选择答案",
                    type: "warning",
                  });
                  return
                }
              }
              for(let i=0;i<newData.answerList.length;i++){
                if(i==this.radio){
                  newData.answerList[i].isRight = 1;
                }else{
                  newData.answerList[i].isRight = 0;
                }
              }
            }else if(this.pageType==2){
              if(!newData.answerList[0]){
                Message({
                  message: "请添加选项",
                  type: "warning",
                });
                return
              }
              if(!self.radioList[0]){
                if(self.radioList[0]!==0){
                  Message({
                    message: "请选择答案",
                    type: "warning",
                  });
                  return
                }
              }
              let num = 0 ;
              for(let i=0;i<newData.answerList.length;i++){
                if(!newData.answerList[i].content){
                  num++
                }
                newData.answerList[i].isRight = 0;
              }
              if(num>0){
                Message({
                  message: "请填写选项内容",
                  type: "warning",
                });
                return
              }
              for(let i=0;i<self.radioList.length;i++){
                newData.answerList[self.radioList[i]].isRight = 1;
              }
            }
            updateQu(newData).then(response => {
              this.loading = false;
              Message({
                message: "编辑成功",
                type: "success",
              });
              this.$parent.refreshData();
            });
          }else{
            //新建
            let newData = {...this.form};
            newData.quType = Number(this.pageType);
            if(this.pageType==1||this.pageType==3){
              //单选-判断
              if(!self.radio){
                if (self.radio!==0){
                  Message({
                    message: "请选择答案",
                    type: "warning",
                  });
                  return
                }
              }
              for(let i=0;i<newData.answerList.length;i++){
                if(i==this.radio){
                  newData.answerList[i].isRight = 1;
                }else{
                  newData.answerList[i].isRight = 0;
                }
              }
            }else if(this.pageType==2){
              //多选
              if(!newData.answerList[0]){
                Message({
                  message: "请添加选项",
                  type: "warning",
                });
                return
              }
              if(!self.radioList[0]){
                if(self.radioList[0]!==0){
                  Message({
                    message: "请选择答案",
                    type: "warning",
                  });
                  return
                }
              }
              let num = 0 ;
              for(let i=0;i<newData.answerList.length;i++){
                if(!newData.answerList[i].content){
                  num++
                }
                newData.answerList[i].isRight = 0;
              }
              if(num>0){
                Message({
                  message: "请填写选项内容",
                  type: "warning",
                });
                return
              }
              for(let i=0;i<self.radioList.length;i++){
                newData.answerList[self.radioList[i]].isRight = 1;
              }
            }
            addQu(newData).then(response => {
              this.loading = false;
              Message({
                message: "新增成功",
                type: "success",
              });
              this.$parent.refreshData();
            });
          }
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.addTopic {
  height: 100%;
  width: 100%;
  padding: 0 15px;
  .title-p {
    line-height: 60px;
    color: #0045af;
    font-size: 18px;
    margin: -20px 0 20px;
    border-bottom: 1px solid #e0e0e0;
  }
  .del-i-box {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    margin-left: 10px;
  }
  .options-box {
    .options-min-box {
      margin-top: 20px;
    }
    .options-min-box:nth-child(1) {
      margin-top: 0;
    }
  }
  .add-button {
    margin-top: 20px;
    width: 365px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-left: 100px;
    cursor: pointer;
    i {
      margin-right: 10px;
    }
  }
  .button-box {
    width: 220px;
    display: flex;
    margin-left: 196px;
    p {
      cursor: pointer;
      width: 100px;
      height: 40px;
      line-height: 40px;
      border-radius: 6px;
      font-size: 14px;
      text-align: center;
    }
    p:nth-child(1) {
      background: #e0e0e0;
      color: #333333;
      margin-right: 20px;
    }
    p:nth-child(2) {
      background: #0045af;
      color: #ffffff;
    }
  }
}
</style>