baoman / Ezquiz_Platform

  <template>

    <div ref="content" class="content-box">

      <back-box>
        <template slot="title">
          <span>{{ "创建答题卡" }}</span>
        </template>
      </back-box>
      <div class="content">
        <el-steps
          :active="step"
          finish-status="success"
          simple
          style="margin: 20px 0"
        >
          <el-step title="基础信息" icon="el-icon-edit"></el-step>
          <el-step title="题目编辑" icon="el-icon-tickets"></el-step>
          <el-step title="设置答案" icon="el-icon-edit-outline"></el-step>
        </el-steps>
        <div v-show="step == 0">
          <el-form
            ref="forms"
            :model="form"
            :rules="formRules"
            label-width="140px"
          >
            <el-form-item label="答题卡名称：" prop="title">

              <el-input
                type="text"
                placeholder="请输入答题卡名称"
                v-model.trim="form.title"
                maxlength="30"
                size="45"
                show-word-limit
              >
              </el-input>

            </el-form-item>
            <el-form-item label="测验类型：">

              <el-select v-model="form.tagId" placeholder="选择测验类型">

                <el-option
                  v-for="item in answerTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                  >{{ item.typeName }}</el-option
                >
              </el-select>
              <el-button
                class="ml-20"
                type="primary"
                round
                circle
                icon="el-icon-plus"
                @click="dialogVisible = true"
              ></el-button>
            </el-form-item>
            <el-form-item label="年级：" prop="gradeName">
              <el-select
                class="sel"
                v-model="form.gradeName"
                placeholder=""
                @change="changeGrade"
              >
                <el-option
                  v-for="item in gradeList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="科目：" prop="subjectName">
              <el-select class="sel" v-model="form.subjectName" placeholder="">

                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"

                  >{{ item.label }}

                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="考试时长：" prop="examsDuration">
              <el-input-number
                size="medium"
                :min="1"

                :max="140"
                :step-strictly="true"
                :step="1"

                v-model="form.examsDuration"
                label="考试时长"
              ></el-input-number>
            </el-form-item>

            <el-form-item label="分享范围：" prop="sharingType">
              <el-radio-group v-model="form.sharingType">

                <el-radio :label="0">任课班级分享</el-radio>
                <el-radio :label="1">全年级分享</el-radio>

              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <el-button type="danger" plain round @click="linkBack"
              >取消</el-button
            >
            <el-button type="primary" round @click="setStep1">下一步</el-button>
          </div>
          <el-dialog

            title="添加测验类型"

            :visible.sync="dialogVisible"
            width="500px"
          >
            <div class="dia-content">
              <p class="add-type">
                <el-input
                  type="text"
                  placeholder="请输入答题卡类型名称"
                  v-model.trim="answerTypeName"

                  :maxlength="10"

                >
                </el-input>
              </p>
            </div>
            <div class="" slot="footer">

              <el-button type="primary" @click="addPaperType">确 定</el-button>

              <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>
        <div v-show="step == 1">
          <div v-for="(question, index) in form.questionList" :key="index">
            <p class="question-title">
              <span>{{ setBigNum(index) }}、</span>
              <el-input
                class="ipt"
                v-model.trim="question.questionTitle"

                maxlength="30"

                placeholder="填写大题名称"
              ></el-input>
              <el-popconfirm
                title="确定删除这道大题吗？"
                @confirm="form.questionList.splice(index, 1)"
              >
                <el-button
                  slot="reference"
                  class="delete"
                  type="danger"
                  size="mini"
                  circle
                  icon="el-icon-delete"
                ></el-button>
              </el-popconfirm>
  
              <span>总分数：{{ setScore(question) }}分</span>
            </p>
            <ul class="questions-ul">
              <li class="sub-questions">
                <div class="qs-num">题号</div>
                <div class="qs-type">题型</div>
                <div class="qs-score">分数</div>

                <div class="qs-partScore">漏选得分</div>

                <div class="qs-options">选项设置</div>
                <div class="qs-set">操作</div>
              </li>
              <li
                class="sub-questions"
                v-for="(subQuestions, indexs) in question.subQuestions"
                :key="indexs"
              >
                <div class="qs-num">{{ setNum(index, indexs) }}</div>
                <div class="qs-type">
                  <el-select
                    v-model="subQuestions.questionType"

                    placeholder="选择题目类型"

                    @change="changeSubQuestions($event, subQuestions)"
                  >
                    <el-option label="单选题" :value="2"></el-option>
                    <el-option label="多选题" :value="3"></el-option>
                    <el-option label="判断题" :value="4"></el-option>
                    <el-option label="主观题" :value="5"></el-option>
                  </el-select>
                </div>
                <div class="qs-score">
                  <el-input-number
                    class="number-ipt"
                    size="medium"
                    :min="1"
                    :max="200"
                    :precision="2"
                    v-model="subQuestions.score"
                    label="单题分值"
                  ></el-input-number>
                </div>
                <div class="qs-partScore">
                  <p v-if="subQuestions.questionType != 3">--</p>
                  <el-input-number
                    class="number-ipt"
                    v-else
                    size="medium"
                    :min="0"
                    :precision="2"
                    :max="subQuestions.score"
                    :step="0.5"
                    v-model="subQuestions.partScore"

                    label="漏选得分"

                  ></el-input-number>
                </div>
                <div class="qs-options">
                  <p v-if="subQuestions.questionType == 5">--</p>
                  <p
                    v-else-if="subQuestions.questionType == 4"
                    class="answer-box"
                  >
                    <span class="answer-s">✓</span>
                    <span class="answer-s">✗</span>
                  </p>
                  <p v-else class="answer-box">
                    <span
                      class="answer-s"

                      v-for="option in subQuestions.answerOptions.split(',')"

                      :key="option"
                      >{{ option }}</span
                    >
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-plus"
                      circle
                      @click="addOptions(subQuestions)"
                    ></el-button>
                    <el-button
                      size="mini"
                      type="primary"
                      icon="el-icon-minus"
                      round
                      circle
                      @click="removeOptions(subQuestions)"
                    ></el-button>
                  </p>
                </div>
                <div class="qs-set">
                  <el-popconfirm
                    title="确定删除这道题吗？"
                    @confirm="delTabData(indexs, index)"
                  >
                    <el-button
                      slot="reference"
                      class="delete"
                      type="danger"
                      size="mini"
                      circle
                      icon="el-icon-delete"
                    ></el-button>
                  </el-popconfirm>
                </div>
              </li>
              <li class="sub-questions">
                <div class="qs-num">添加</div>
                <div class="qs-type">
                  <el-select
                    v-model="addSubQuestionsType"

                    placeholder="选择题目类型"

                    @change="changeAddSubQuestions($event, question)"
                  >
                    <el-option label="单选题" :value="2"></el-option>
                    <el-option label="多选题" :value="3"></el-option>
                    <el-option label="判断题" :value="4"></el-option>
                    <el-option label="主观题" :value="5"></el-option>
                  </el-select>
                </div>
                <div class="qs-score"></div>
                <div class="qs-partScore"></div>
                <div class="qs-options"></div>
                <div class="qs-set"></div>
              </li>
            </ul>
          </div>
          <div class="add-box">
            <p class="add-question" @click="openQuestion">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                circle
              ></el-button>
              <span class="s1">添加大题</span>
            </p>
          </div>
          <div class="btn-box">
            <el-button type="danger" plain round @click="linkBack"
              >取消</el-button
            >
            <el-button round @click="step = 0">上一步</el-button>

            <el-button
              :type="form.questionList.length == 0 ? 'info' : 'primary'"
              round
              @click="setStep2"
              >下一步</el-button
            >

          </div>
          <el-dialog
            title="添加大题"
            :visible.sync="addQuestionVisible"
            width="600px"
          >
            <div class="dia-content">
              <el-form
                ref="form"
                :model="questionForm"
                :rules="questionFormRules"
                label-width="100px"
              >
                <el-form-item label="标题：" prop="questionTitle">

                  <el-col :span="20">

                    <el-input
                      v-model.trim="questionForm.questionTitle"
                      maxlength="30"
                      placeholder="输入大题名称"
                    ></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="选择题型：">
                  <el-select v-model="questionForm.questionType" placeholder="">
                    <el-option
                      v-for="item in questionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="默认题数：">
                  <el-input-number
                    v-model="questionForm.number"
                    :min="1"

                    :max="100"
                    :step-strictly="true"
                    :step="1"

                    label="label"
                  ></el-input-number>
                </el-form-item>
              </el-form>
            </div>
            <div class="dialog-footer" slot="footer">
              <el-button type="primary" @click="addQuestion">确 定</el-button>
              <el-button @click="addQuestionVisible = false">取 消</el-button>
            </div>
          </el-dialog>
        </div>
        <div v-show="step == 2">

          <div class="answer-title">
            <p class="name">{{ form.title }}</p>
            <p class="totals">卷面总分：{{ allScore }}分</p>
          </div>

          <div v-for="(question, index) in form.questionList" :key="index">
            <p class="question-title">
              <span>{{ setBigNum(index) }}、</span>
              <span class="title-txt">{{ question.questionTitle }}</span>
              <span>共 {{ setScore(question) }} 分</span>
            </p>
            <ul class="questions-ul">
              <li class="sub-questions">

                <div class="qs-num">题号</div>

                <div class="qs-type">题型</div>

                <div class="qs-score">分数</div>

                <div class="qs-partScore">漏选得分</div>

                <div class="qs-options qs-options2">选项设置</div>
              </li>
              <li
                class="sub-questions"
                v-for="(subQuestions, indexs) in question.subQuestions"
                :key="indexs"
              >
                <div class="qs-num">{{ setNum(index, indexs) }}</div>
                <div class="qs-type">
                  {{ setSubPro(subQuestions.questionType) }}
                </div>
                <div class="qs-score">
                  <el-input-number
                    class="number-ipt"
                    size="medium"
                    :min="1"
                    :max="200"
                    :precision="2"
                    v-model="subQuestions.score"
                    label="单题分值"
                  ></el-input-number>
                </div>

                <div class="qs-partScore">
                  <p v-if="subQuestions.questionType != 3">--</p>
                  <el-input-number
                    class="number-ipt"
                    v-else
                    size="medium"
                    :min="0"
                    :precision="2"
                    :max="subQuestions.score"
                    :step="0.5"
                    v-model="subQuestions.partScore"
                    label="漏选得分"
                  ></el-input-number>
                </div>

                <div class="qs-options qs-options2">
                  <p v-if="subQuestions.questionType == 5">--</p>
                  <p v-if="subQuestions.questionType == 4" class="answer-box">
                    <span
                      class="answer-s"
                      :class="subQuestions.correctAnswer == 1 ? 'active' : ''"
                      @click="subQuestions.correctAnswer = 1"
                      >✓</span
                    >
                    <span
                      class="answer-s"
                      :class="subQuestions.correctAnswer == 2 ? 'active' : ''"
                      @click="subQuestions.correctAnswer = 2"
                      >✗</span
                    >
                  </p>
                  <p v-if="subQuestions.questionType == 3" class="answer-box">
                    <span
                      class="answer-s"

                      v-for="option in subQuestions.answerOptions.split(',')"

                      :class="
                        subQuestions.correctAnswer.includes(option)
                          ? 'active'
                          : ''
                      "
                      :key="option"
                      @click="changAnswer(subQuestions, option)"
                      >{{ option }}</span
                    >
                  </p>
                  <p v-if="subQuestions.questionType == 2" class="answer-box">
                    <span
                      class="answer-s"

                      v-for="option in subQuestions.answerOptions.split(',')"

                      :class="
                        subQuestions.correctAnswer == option ? 'active' : ''
                      "
                      :key="option"
                      @click="subQuestions.correctAnswer = option"
                      >{{ option }}</span
                    >
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div class="btn-box">
            <el-button type="danger" plain round @click="linkBack"
              >取消</el-button
            >
            <el-button round @click="step = 1">上一步</el-button>
            <el-button type="primary" round @click="save">保存</el-button>
          </div>
        </div>
      </div>
    </div>

  </template>
  
  <script>

  import { formatDate, deepClone } from "utils";

  const questionForm = {
    questionTitle: "",
    questionType: 2,
    number: 10,
  };
  const subQuesOptions = {
    questionType: 2,
    score: 1,
    partScore: 0,
    selectNum: 4,

    answerOptions: "A,B,C,D",

    correctAnswer: "",
  };

  export default {

    computed: {
      allScore: function () {
        let score = 0;
        this.form.questionList.map((item) => {
          score += item.subQuestions.reduce((a, b) => {
            return a + Number(b.score);
          }, 0);
        }, 0);
        return Number(score).toFixed(2);
      },
    },

    watch:{
      step:function(){
        this.$nextTick(function(){
          this.$refs.content.scrollTop = 0
        })
      }
    },

    data() {
      return {
        type: 1, //1-创建，2-复制答题卡
        dialogVisible: false, //测验类型设置弹窗
        addQuestionVisible: false, //添加大题弹窗
        questionForm: { ...questionForm },
        questionFormRules: {
          questionTitle: [

            { required: true, message: "请输入大题名称", trigger: "blur" },

            {
              min: 1,
              max: 30,
              message: "长度在 1 到 30 个字符",
              trigger: "blur",
            },
          ],
        },
        questionOptions: [
          { label: "单选题", value: 2 },
          { label: "多选题", value: 3 },
          { label: "判断题", value: 4 },
          { label: "主观题", value: 5 },
        ],

        rightOptions: ["A", "B", "C", "D", "E", "F", "G"],

        addSubQuestionsType: "",
        step: 0, //步骤
        gradeList: [], //年级
        subjectList: [], //科目
        answerTypeList: [], //测验类型

        answerTypeName: "", //测验类型名称

        form: {
          //答题卡详情
          title: "",

          tagId: "",

          gradeName: "",

          subjectName: "",

          examsDuration: 90,

          sharingType: 0,

          questionList: [],
        },
        formRules: {
          //答题卡验证
          title: [
            { required: true, message: "请输入答题卡名称", trigger: "blur" },
            {
              min: 1,
              max: 30,
              message: "长度在 1 到 30 个字符",
              trigger: "blur",
            },
          ],
          gradeName: [{ required: true, message: "请选择年级", trigger: "blur" }],

          subjectName: [
            { required: true, message: "请选择科目", trigger: "blur" },
          ],

          examsDuration: [
            { required: true, message: "请设置考试时长", trigger: "blur" },
          ],
        },
      };
    },

    async created() {

      this.type = this.$route.query.type ? this.$route.query.type : 1;

      await this._GradeList();
      await this._QuerySubjectList(this.gradeList[0]);
      await this._TypeList();

      if (this.type == 2) {

        this._QueryDetail();

      }
    },
    methods: {
      linkBack() {
        this.$confirm(
          (this.type == 2 ? "修改复制的" : "组建的") +
            "答题卡未保存，确认退出吗？",
          "提示",
          {
            confirmButtonText: "取消",
            cancelButtonText: "确定",
            confirmButtonClass: "el-button--danger1",
            cancelButtonClass: "el-button--primary",
            showClose: false,
            roundButton: true,
            center: true,
            type: "warning",
          }
        )
          .then(() => {})
          .catch(() => {
            this.$router.push({
              path: "/examinationPaper",
            });
          });
      },
      setSubPro(type) {
        let tit;
        switch (type) {
          case 2:
            tit = "单选题";
            break;
          case 3:
            tit = "多选题";
            break;
          case 4:
            tit = "判断题";
            break;
          case 5:
            tit = "主观题";
            break;
        }
        return tit;
      },
      setNum(index, indexs) {
        let lengths = 0;
        for (let i = 0; i < index; i++) {
          lengths += this.form.questionList[i].subQuestions.length;
        }
        return lengths + indexs + 1;
      },
      setBigNum(num) {
        let txt = "";
        let bigNum = [
          "一",
          "二",
          "三",
          "四",
          "五",
          "六",
          "七",
          "八",
          "九",
          "十",
          "十一",
          "十二",
          "十三",
          "十四",
          "十五",
          "十六",
          "十七",
          "十八",
          "十九",
          "二十",
        ];
        txt = bigNum[num];

        return txt;
      },
      setAddIndex(index) {},
      setStep1() {
        this.$refs["forms"].validate((valid) => {
          // 验证通过：保存
          if (valid) {
            this.step = 1;
          } else {
            this.$message.error("数据有误，请检查！");
            return false;
          }
        });
      },
      setStep2() {

        if (!this.form.questionList.length) {
          this.$message.warning("请添加题目！");
          return;
        }
        let valid = "";
        this.form.questionList.map((item, index) => {

          if (!item.questionTitle) {

            valid += index + 1 + "、";

          }
        });

        if (!valid) {

          this.step = 2;

          return;

        } else {

          this.$message.error(

            `大题名称不能为空，请检查第${valid.slice(0, -1)}大题！`

          );

        }
      },
      openQuestion() {
        this.questionForm = { ...questionForm };
        this.addQuestionVisible = true;
      },
      addQuestion() {
        let subQuestions = [];
        let questionsOptions = {
          ...subQuesOptions,
          questionType: this.questionForm.questionType,
        };
        switch (questionsOptions.questionType) {
          case 2:

            questionsOptions.answerOptions = this.rightOptions
              .slice(0, questionsOptions.selectNum)
              .join(",");

            break;
          case 3:

            questionsOptions.answerOptions = this.rightOptions
              .slice(0, questionsOptions.selectNum)
              .join(",");

            break;
          case 4:
          case 5:
            questionsOptions.selectNum = 0;
            break;
        }
        for (let i = 0; i < this.questionForm.number; i++) {
          subQuestions.push({ ...questionsOptions });
        }
        this.form.questionList.push({
          questionTitle: this.questionForm.questionTitle,
          number: this.questionForm.number,
          source: 10,
          subQuestions: [...subQuestions],
        });
        this.addQuestionVisible = false;
      },
      delTabData(subIndex, index) {
        //删除小题
        console.log(subIndex);
        console.log(index);
        this.form.questionList[index].subQuestions.splice(subIndex, 1);
      },
      setScore(question) {
        let score = question.subQuestions.reduce((a, b) => {
          return a + b.score;
        }, 0);

        return Number(score).toFixed(2);

      },
      changeAddSubQuestions(val, question) {
        if (val) {
          let questionsOptions = {
            ...subQuesOptions,
            questionType: val,
          };
          switch (questionsOptions.questionType) {
            case 2:

              questionsOptions.answerOptions = this.rightOptions
                .slice(0, questionsOptions.selectNum)
                .join(",");

              break;
            case 3:

              questionsOptions.answerOptions = this.rightOptions
                .slice(0, questionsOptions.selectNum)
                .join(",");

              questionsOptions.partScore = 0;

              break;
            case 4:
            case 5:
              questionsOptions.selectNum = 0;
              break;
          }
          question.subQuestions.push(questionsOptions);
          this.addSubQuestionsType = "";
        }
      },
      changeSubQuestions(val, subQuestions) {
        //切换多题型-小题题型
        const that = this;
        subQuestions.score = 1;
        subQuestions.partScore = 0;
        subQuestions.correctAnswer = "";
        subQuestions.selectNum = 4;
        switch (val) {
          case 2:

            subQuestions.answerOptions = that.rightOptions
              .slice(0, subQuestions.selectNum)
              .join(",");

            break;
          case 3:

            subQuestions.answerOptions = that.rightOptions
              .slice(0, subQuestions.selectNum)
              .join(",");

            break;
          case 4:
          case 5:
            subQuestions.selectNum = 0;
            break;
        }
      },
      addOptions(subQuestions) {
        //添加选项

        let length = subQuestions.answerOptions.split(",").length;

        if (length > 6) return;
        subQuestions.selectNum = length + 1;

        subQuestions.answerOptions = this.rightOptions
          .slice(0, subQuestions.selectNum)
          .join(",");

      },
      removeOptions(subQuestions) {
        //删除选项

        let length = subQuestions.answerOptions.split(",").length;

        if (length < 3) return;

        subQuestions.selectNum = length - 1;

        subQuestions.answerOptions = this.rightOptions
          .slice(0, subQuestions.selectNum)
          .join(",");

      },
      changAnswer(sub, option) {
        //设置多选答案
        let str = new RegExp(option, "g");
        if (sub.correctAnswer?.includes(option)) {
          sub.correctAnswer = sub.correctAnswer.replace(str, "");
        } else {
          let arrs = (sub.correctAnswer && sub.correctAnswer.split("")) || [];
          arrs.push(option);
          sub.correctAnswer = arrs.sort().join("");
        }
      },

      async addPaperType() {

        //保存测验类型
        if (!this.answerTypeName) {
          this.$message.error("请填写测验名称！");
          return;
        }

        let isRepeat = false;
        this.answerTypeList.map((item) => {
          if (item.typeName == this.answerTypeName) {
            isRepeat = true;

          }

        });
        if (isRepeat) {

          this.$message.error("类型已存在请重新填写！");
          return;
        }

        //添加测验类型

        const { data, status, info } = await this.$request.addPaperType({

          tag: this.answerTypeName,

        });

        if (status == 0) {

          await this._TypeList();
          this.form.tagId = data || "";

          this.dialogVisible = false;
          this.answerTypeName = "";
          this.$message.success("添加成功");
        } else {

          this.$message.error(info);

        }
      },
      async save() {

        if (this.saveLoading) return;
        this.saveLoading = true;

        //添加题目ID、序号
        this.form.questionList.map((item, index) => {
          item.questionId = index + 1;
          item.questionIndex = index + 1;
          item.questionType = 0;
          item.subQuestions.map((items, indexs) => {
            items.questionId = indexs + 1;
            items.questionIndex = indexs + 1;
          });
        });

        const { data, status, info } = await this.$request.addPaper({

          ...this.form,
        });

        this.saveLoading = false;

        if (status == 0) {

          this.$router.push({

            path: "/examinationPaper",
          });

        } else {

          this.$message.error(info);

        }
      },
      async changeGrade() {
        //切换年级查询科目
        this._QuerySubjectList(this.form.gradeName);
      },

      async _TypeList() {

        //测验类型查询

        const { data, status, info } = await this.$request.fetchTypeNames({
          gradeName: this.form.gradeName,
          type: 1,
        });

        if (status == 0) {

          this.answerTypeList =

            data.list?.map((item) => {

              return {
                typeName: item.tag,
                id: item.tagId,
              };
            }) || [];

          if (this.type != 2) {

            this.form.tagId = this.answerTypeList[0]?.id || "";

          }
        } else {

          this.$message.error(info);

        }
      },
      async _GradeList() {
        //查询年级列表

        const { data, status, info } = await this.$request.fetchGradeList();

        if (status == 0) {

          this.gradeList = (data.gradeNames && [...data.gradeNames]) || [];

          if (this.type != 2) {
            this.form.gradeName = this.gradeList[0];
          }

        } else {

          this.$message.error(info);

        }
      },

      async _QuerySubjectList(grade) {

        //查询科目列表

        const { data, status, info } = await this.$request.fetchSubjectList({
          gradeName: grade,
        });

        if (status === 0) {

          this.subjectList =
            data.subjectNames?.map((item) => {
              return {
                value: item,
                label: item,
              };
            }) || [];

          console.log(this.subjectList);

          if (this.subjectList.length) {
            this.form.subjectName = this.subjectList[0].value;

          }

          console.log(this.form);

        } else {

          this.$message.error(info);

        }
      },

      async _QueryDetail() {
        //查询年级列表

        const { data, status, info } = await this.$request.fetchPaperDetail({

          paperId: this.$route.query.paperId,
        });
        if (status == 0) {

          this.form.title = data.title + "_副本";

          this.form.tagId = data.tagId === 0 ? "" : data.tagId;

          this.form.subjectName = data.subjectName;

          this.form.gradeName = data.gradeName;

          this.form.examsDuration = data.examsDuration;
          this.form.sharingType = data.sharingType;
          this.form.questionList = data.questionList?.map((item) => {
            let subQuestions =
              item.subQuestions?.map((items) => {
                return {
                  questionType: items.questionType,
                  score: items.score,
                  partScore: items.partScore,

                  selectNum: items.answerOptions.split(",").length,
                  answerOptions: items.answerOptions || "A,B,C,D",

                  correctAnswer: items.correctAnswer,
                };
              }) || [];
            return {
              questionTitle: item.questionTitle,
              subQuestions: subQuestions,
            };
          });
        } else {

          this.$message.error(info);

        }
      },

    },
  };
  </script>

  <style lang="scss" scoped>
  .red {
    color: #f30;
  }

  .content-box{
    width:100%;
    height:100%;
    overflow-y: auto;
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 50px;
    .ml-20 {
      margin-left: 20px;
    }
    .btn-box {
      text-align: right;
      margin-left: 140px;
    }
  }
  .dia-content {
    .dia-tit {
      font-size: 20px;
      color: #333;
      font-weight: 700;
      text-align: center;
    }
    .add-type {
      display: flex;
    }
    .add-btn {
      margin-left: 20px;
    }
  }
  .el-message-box {
    :deep(.el-button--default) {
      color: #fff;
    }
  }
  .add-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .add-question {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bolder;
      padding: 2px;
      cursor: pointer;
      .s1 {
        margin-left: 6px;
      }
      :deep(.el-icon-plus) {
        font-size: 24px;
        font-weight: 900;
      }
      :deep(.el-button--mini.is-circle) {
        padding: 3px;
      }
    }
  }
  .dialog-footer {
    text-align: center;
    :deep(.el-button) {
      border-radius: 20px;
      padding: 8px 20px 7px;
      margin: 0 12px;
    }
  }
  .question-title {
    line-height: 40px;
    .ipt {
      width: 300px;
      margin: 0 16px 0 10px;
      :deep(.el-input__inner) {
        border-radius: 20px;
        border-color: #667ffd;
        background: rgba($color: #667ffd, $alpha: 0.05);
      }
    }
    .delete {
      margin-right: 8px;
    }
    .title-txt {
      margin-right: 20px;
      font-size: 16px;
      font-weight: 700;
    }
  }
  .el-input-number {
    width: 140px;
  }

  .answer-title {
    text-align: center;
    font-size: 20px;
    color: #333;
    font-weight: 700;
    padding-bottom: 20px;
    .totals {
      font-size: 16px;
      color: #888;
      font-weight: normal;
    }
  }

  .answer-box {
    .answer-s {
      display: inline-block;
      width: 30px;
      height: 30px;
      border: 1px solid #e2e2e2;
      border-radius: 3px;
      margin: 0 6px;
      font-size: 16px;
      color: #333;
      text-align: center;
      line-height: 30px;
      &.active {
        background: #5e78fa;
        border-color: #5e78fa;
        color: #fff;
      }
    }
  }
  .questions-ul {
    border-left: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    margin: 12px 0;
  }
  .sub-questions {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #e2e2e2;
    & > div {
      min-height: 40px;
      padding: 5px;
      flex-shrink: 0;
      border-right: 1px solid #e2e2e2;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .qs-num {
      width: 80px;
    }
    .qs-type {
      width: 160px;
    }
    .qs-score,
    .qs-partScore {
      width: 160px;
    }
    .qs-options {
      flex: 1;
    }
    .qs-set {
      width: 80px;
    }
    .qs-options2 {
      text-align: left;
      justify-content: flex-start;
      padding-left: 20px;
      .answer-s {
        cursor: pointer;
      }
    }
    :deep(.el-select) {
      .el-input__inner {
        border-radius: 20px;
        border-color: #667ffd;
        width: 150px;
        height: 32px;
        line-height: 32px;
        background: rgba($color: #667ffd, $alpha: 0.05);
      }
      .el-input__icon {
        line-height: 32px;
      }
    }
  }

  </style>