前段时间项目要求添加一个答题功能，所以答题之前，要求创建答题题库。网上找了许多关于答题功能，最终，形成如下图所示答题要求，但适用于单选题和多选题，填空题不适用。
1.点击【新增答题类型】，创建答题选项，此处答题选项个数做了限制，不能超过8个。
2.根据正确答案选项个数决定该道题是否为多选题，若正确答案只有一个即为单选题，否则是多选题
3.可以根据需要删除对应的答题选项，添加新答题类型

本次答题选项的删除添加是个人最初比较头疼的地方。比如ABCD四个选项，删除c选项后，点击【新增答题类型】选项按钮，则默认创建是E选项。再或者就是ABCD四个选项位置删除任意一个后，顺序被打乱等，不过，好在最后解决了，就是多写好几行代码，有点繁琐。

具体代码如下

<template>
  <div class="addquestion">
    <div class="question-title">
      <span>{{title}}</span>
      <span class="back" style="font-size: 18px;" @click="back()">返回</span>
    </div>
    <div class="question_body">
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
      >
        <el-form-item
          prop="content"
          label="题目内容"
          :rules="[{ required: true, message: '请输入题目内容', trigger: 'blur' }]"
        >
          <span v-if="keyword=='show'">{{dynamicValidateForm.content}}</span>
          <el-input type="textarea" v-if="keyword!='show'" v-model="dynamicValidateForm.content"></el-input>
        </el-form-item>
        <div class="domains_fileds">
          <div class="domain_title">
            <span>答题选项：</span>
            <el-button
              @click="addDomain"
              v-if="keyword!='show'"
              style="background:#409EFF;color:white"
            >新增答题类型</el-button>
          </div>
          <el-form-item
            v-for="(domain,index) in dynamicValidateForm.domains"
            :label="domain.id"
            :key="domain.id"
            :prop="'domains.' + index + '.value'"
            :rules="{required: true, message: '答题选项不能为空', trigger: 'blur'}"
          >
            <el-input v-model="domain.value" v-if="keyword!='show'"></el-input>
            <span v-if="keyword=='show'">{{domain.value}}</span>
            <span
              class="linkDel"
              v-if="keyword!='show'"
              @click.prevent="removeDomain(domain,index)"
            >删除</span>
          </el-form-item>
        </div>


        <el-form-item
          label="正确答案"
          prop="answer_right"
          :rules="{required: true, message: '正确答案不能为空', trigger: 'blur'}"
        >
          <span v-if="keyword=='show'">{{dynamicValidateForm.answer_right.toString()}}</span>
          <el-select
            v-if="keyword!='show'"
            v-model="dynamicValidateForm.answer_right"
            multiple
            placeholder="请选择正确答案"
          >
            <el-option
              v-for="item in dynamicValidateForm.domains "
              :key="item.id"
              :label="item.id"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="answer_parse"
          label="答案解析"
          :rules="[{ required: true, message: '请输入答案解析', trigger: 'blur' }]"
        >
          <span v-if="keyword=='show'">{{dynamicValidateForm.answer_parse}}</span>
          <el-input
            v-if="keyword!='show'"
            type="textarea"
            v-model="dynamicValidateForm.answer_parse"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="keyword!='show'">
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
import { Message } from "element-ui";
import {
  addQuestion,
  findByIdQuestion,
  randomQuestion,
  deleteQuestion,
  getQuestionList
} from "../../api/api";


export default {
  data() {
    return {
      alpha: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N"
      ],
      title: "添加题目",
      keyword: "add",
      domainsSum: 0,
      removeList: [],
      dynamicValidateForm: {
        type: "",
        domains: [
          {
            value: "",
            id: "A"
            // key: Date.now()
          }
        ],
        content: "",
        answer_parse: "",
        answer_right: ""
      }
    };
  },
  methods: {
    submitForm(formName) {
      if (this.dynamicValidateForm.domains.length <= 1) {
        Message.info("答题选项至少要两个才行");
        return;
      }


      this.$refs[formName].validate(valid => {
        if (valid) {
          let tempdata = [];
          this.dynamicValidateForm.domains.map(res => {
            tempdata.push(res.id + ":" + res.value);
          });
          let data = {
            type:
              this.dynamicValidateForm.answer_right.length > 1
                ? "多选题"
                : "单选题",
            content: this.dynamicValidateForm.content,
            answer_options: tempdata,
            answer_right: this.dynamicValidateForm.answer_right,
            answer_parse: this.dynamicValidateForm.answer_parse
          };
          if (this.$route.query.paramId) {
            data.question_id = this.$route.query.paramId;
          }
          addQuestion(data).then(res => {
            if (res.ret == "OK") {
              Message.info("添加成功");
            } else {
              Message.info("添加失败");
            }
            this.$router.push({ path: "answer" });
          });
        } else {
          return false;
        }
      });
    },


    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item, index) {
      this.removeList.push(index);
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
      if (this.dynamicValidateForm.answer_right.length > 0) {
        this.dynamicValidateForm.answer_right.forEach((res, index) => {
          if (res == item.id) {
            this.dynamicValidateForm.answer_right.splice(index, 1);
          }
        });
      }
    },


    getArrayIndex(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return i;
        }
      }
      return -1;
    },


    /**
     * 去除数组中arr1及arr2中数组不同的数
     * let aa = ["a", "b","k", "c", "d"];
     * let bb = ["e", "f","g", "c", "d"];
     * let kk = getArrDifference(aa, bb);
     * console.log(kk)
     * console.log(aa.indexOf("k"))//2  获取数组下标
     *  打印结果kk: ["a", "b", "k", "c", "d", "e", "f", "g", "c", "d"]
     */
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function(v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    /**
     * 获取到a,b两个数组中的交集部分
     * let aa = ["a", "b","k", "c", "d"];
     * let bb = ["e", "f","g", "c", "d"];
     * 交集cc:[ "c", "d"];
     *
     */
    array_intersection(a, b) {
      // 交集
      var result = [];
      for (var i = 0; i < b.length; i++) {
        var temp = b[i];
        for (var j = 0; j < a.length; j++) {
          if (temp === a[j]) {
            result.push(temp);
            break;
          }
        }
      }
      return result;
    },
    /**
     * 本地解题思路
     * 涉及splice，slice,filter,
     */
    addDomain() {
      let temAlpha = [];
      if (this.dynamicValidateForm.domains.length > 8) {
        Message.info("抱歉，答题选项已经上限了");
        return;
      }
      let domainObj = []; //添加的答题选项的abc值保存
      let domainLen = this.dynamicValidateForm.domains.length; //答题选项长度获取
      let alphaObj = this.alpha.slice(0, domainLen); //截取alpha字符串长度作为数组
      this.dynamicValidateForm.domains.map(res => {
        domainObj.push(res.id);
      });
      let unqualList = this.getArrDifference(alphaObj, domainObj); //获取字符串中不相等的内容
      if (unqualList.length > 0) {
        let interList = this.array_intersection(unqualList, alphaObj); //交集的数组
        let alphaIndex = alphaObj.indexOf(interList[0]);
        this.dynamicValidateForm.domains.splice(alphaIndex, 0, {
          value: "",
          id: this.alpha[alphaIndex]
        });
      } else {
        this.dynamicValidateForm.domains.push({
          value: "",
          id: this.alpha[this.dynamicValidateForm.domains.length]
        });
      }
    },


    back() {
      this.$router.push({ path: "answer" });
    },


    getQuestion(id) {
      this.dynamicValidateForm.domains = [];
      findByIdQuestion(id).then(res => {
        if (res.ret == "OK") {
          this.dynamicValidateForm.content = res.content.content;
          this.dynamicValidateForm.answer_parse = res.content.answer_parse;
          this.dynamicValidateForm.type = res.content.type;
          this.dynamicValidateForm.answer_right = res.content.answer_right;
          this.domainsSum = res.content.answer_options.length;
          res.content.answer_options.forEach((item, index) => {
            this.dynamicValidateForm.domains.push({
              value: item.substring(2),
              id: this.alpha[index]
            });
          });
        }
      });
    }
  },

  activated() {
    if (this.$route.query.paramId) {
      let paramId = this.$route.query.paramId;
      this.keyword = this.$route.query.keyword;
      this.title =
        this.keyword == "edit"
          ? "编辑题目"
          : this.keyword == "show"
          ? "查看题目"
          : "添加题目";
      this.domainsSum = this.keyword == "edit" ? 0 : 0;
      this.getQuestion(paramId);
    } else {
      this.dynamicValidateForm = {
        type: "",
        domains: [
          {
            value: "",
            id: "A"
          }
        ],
        content: "",
        answer_parse: "",
        answer_right: ""
      };
    }
  },
  deactivated() {
    this.keyword = "add";
  }
};
</script>


<style lang="scss" scoped>
.addquestion {
  .domain_title {
    margin: 10px;
    justify-content: space-between;
    display: flex;
    span {
      color: #606266;
      font-size: 14px;
      align-items: center;
      display: flex;
    }
    el-button {
      background: #3a8ee6;
    }
  }
  .linkDel {
    color: #3a8ee6;
    width: 70px;
    text-align: center;
  }
  /deep/ .el-form-item__content {
    display: flex;
  }
  form {
    width: 520px;
  }
  .question-title {
    font-size: 22px;
    color: #88909c;
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>