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
            v-if="!isUpload"
            title="题目编辑"
            icon="el-icon-tickets"
          ></el-step>

          <el-step title="设置答案" icon="el-icon-edit-outline"></el-step>

          <el-step
            v-if="isUpload"
            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
                class="sel2"
                type="text"
                placeholder="请输入答题卡名称"
                v-model.trim="form.title"
                maxlength="50"
                size="45"
                show-word-limit
              >

              </el-input>
            </el-form-item>
            <el-form-item label="测验类型：">
              <el-select v-model="form.tagId" placeholder="选择测验类型">
                <el-option label="--" value=""> </el-option>

                <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-edit"
                @click="openTagDia"
              ></el-button>

            </el-form-item>

            <el-form-item
              v-if="role != 'ROLE_PERSONAL'"
              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="考试时长：">

              <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
              v-if="role != 'ROLE_PERSONAL'"
              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="isUpload ? setStep2() : setStep1()"
              >下一步</el-button
            >

          </div>

          <el-dialog
            :close-on-click-modal="false"
            title="设置测验类型"
            :visible.sync="dialogVisible"
            width="500px"
          >

            <div class="dia-content">
              <p class="add-type" v-for="item in tagList" :key="item.id">
                <el-row :gutter="10">

                  <el-col :span="18"
                    ><el-input
                      v-model="item.typeName"
                      :maxlength="10"
                      placeholder="请输入答题卡类型名称"
                    ></el-input
                  ></el-col>

                  <el-col :span="6">
                    <el-tooltip effect="dark" content="保存" placement="top">

                      <el-button
                        class="js-set"
                        type="primary"
                        size="small"
                        round
                        circle
                        icon="el-icon-check"
                        @click="editTypeName(item)"
                      ></el-button>

                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="right">

                      <el-popconfirm
                        title="确定删除这道大题吗？"
                        @confirm="removeTypeName(item)"
                      >
                        <el-button
                          class="js-set"
                          type="danger"
                          size="small"
                          round
                          circle
                          icon="el-icon-delete"
                          slot="reference"
                        ></el-button>

                      </el-popconfirm>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </p>
              <p class="add-type">
                <el-row :gutter="10">
                  <el-col :span="18">

                    <el-input
                      type="text"
                      placeholder="请输入答题卡类型名称"
                      v-model.trim="answerTypeName"
                      :maxlength="10"
                    >

                    </el-input>
                  </el-col>
                  <el-col :span="6">
                    <el-tooltip effect="dark" content="添加" placement="right">

                      <el-button
                        class="js-set"
                        type="primary"
                        size="small"
                        round
                        circle
                        icon="el-icon-plus"
                        @click="addPaperType"
                      ></el-button>

                    </el-tooltip>
                  </el-col>
                </el-row>
              </p>
            </div>
            <div class="" slot="footer">
              <el-button @click="dialogVisible = false">关 闭</el-button>
            </div>
          </el-dialog>
        </div>

        <template v-if="!isUpload">
          <div v-show="step == 1">

            <div
              class="question-box"
              v-for="(question, index) in form.questionList"
              :key="index"
            >

              <p class="question-title">

                <el-tooltip
                  effect="dark"
                  :content="question.show ? '收起' : '展开'"
                  placement="left"
                >
                  <i
                    class="el-icon-caret-right"
                    :class="question.show ? 'active' : ''"
                    @click="question.show = !question.show"
                  ></i>

                </el-tooltip>
                <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 class="m20">共：{{ question.subQuestions?.length }}题</span>
                <span>共：{{ setScore(question) }}分</span>
              </p>
              <transition name="el-zoom-in-top">
                <ul v-show="question.show" 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>

                  <template

                    v-for="(subQuestions, indexs) in question.subQuestions"

                  >

                    <li
                      v-if="!subQuestions.qusType && !subQuestions.subNum"
                      class="sub-questions"
                      :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"
                          :step="1"
                          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-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>
                        <p
                          v-if="
                            subQuestions.questionType == 3 ||
                            subQuestions.questionType == 2

                          "

                          class="answer-box answer-box2"

                        >

                          <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>
                  </template>

                  <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>
              </transition>
            </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
              :close-on-click-modal="false"
              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="标题：">
                    <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=""
                      @change="setQuestionForm"
                    >
                      <el-option
                        v-for="item in questionOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >

                      </el-option>
                      <el-option label="混合题" :value="6"> </el-option>

                    </el-select>

                  </el-form-item>
                  <el-form-item label="题数：">

                    <el-input-number
                      v-model="questionForm.number"
                      @change="changeQesNum"
                      :min="1"
                      :max="100"
                      :step-strictly="true"
                      :step="1"
                      label="label"
                    ></el-input-number>

                  </el-form-item>

                  <el-form-item
                    label="选项个数："
                    v-show="
                      questionForm.questionType != 4 &&
                      questionForm.questionType != 5
                    "
                  >
                    <el-input-number
                      v-model="questionForm.selectNum"
                      :min="3"
                      :max="10"
                      :step-strictly="true"
                      :step="1"
                      label="label"
                    ></el-input-number>

                  </el-form-item>
                  <el-form-item label="单题分数：">

                    <el-input-number
                      v-model="questionForm.score"
                      :min="1"
                      :max="200"
                      :precision="2"
                      :step="1"
                      label="label"
                    ></el-input-number>

                  </el-form-item>

                  <el-form-item
                    label="漏选得分："
                    v-if="questionForm.questionType == 3"
                  >
                    <el-input-number
                      v-model="questionForm.partScore"
                      :min="0"
                      :max="questionForm.score"
                      :precision="2"
                      :step="0.5"
                      label="label"
                    ></el-input-number>

                  </el-form-item>

                  <el-form-item
                    label="设置答案："
                    v-show="
                      questionForm.questionType != 5 &&
                      questionForm.questionType != 6
                    "
                  >

                    <div class="qs-options">
                      <p class="ipt">

                        <el-input
                          v-if="
                            questionForm.questionType == 2 ||
                            questionForm.questionType == 3 ||
                            questionForm.questionType == 6
                          "
                          ref="formAnsIpt2"
                          v-model="questionForm.answerList"
                          @keydown.native="
                            keydownAnswer($event, questionForm.questionType, 1)
                          "
                          @input="
                            setAllAnswer($event, questionForm.questionType, 1)
                          "
                        ></el-input>
                        <el-input
                          v-if="questionForm.questionType == 4"
                          v-model="questionForm.answerList"
                          readonly=""
                        ></el-input>

                      </p>
                      <p class="answer-box">
                        <template v-if="questionForm.questionType == 4">

                          <span
                            class="answer-s active"
                            @click="
                              questionForm.answerList.length < questionForm.number
                                ? (questionForm.answerList += '✓')
                                : ''
                            "
                            >✓</span
                          >
                          <span
                            class="answer-s active"
                            @click="
                              questionForm.answerList.length < questionForm.number
                                ? (questionForm.answerList += '✗')
                                : ''
                            "
                            >✗</span
                          >

                        </template>
                        <template v-if="questionForm.questionType == 3">
                          <template v-for="(option, opIdx) in rightOptions">

                            <span
                              v-if="opIdx < questionForm.selectNum"
                              class="answer-s active"
                              :key="option"
                              @click="setMultiple(questionForm, option, 1)"
                              >{{ option }}</span
                            >

                          </template>

                          <span
                            class="answer-s active"
                            @click="setMultiple(questionForm, ',', 1)"
                            >,</span
                          >

                        </template>

                        <template
                          v-if="
                            questionForm.questionType == 2 ||
                            questionForm.questionType == 6
                          "
                        >

                          <template v-for="(option, opIdx) in rightOptions">

                            <span
                              v-if="opIdx < questionForm.selectNum"
                              class="answer-s active"
                              :key="option"
                              @click="
                                questionForm.answerList.length <
                                questionForm.number
                                  ? (questionForm.answerList += option)
                                  : ''
                              "
                              >{{ option }}</span
                            >

                          </template>

                        </template>

                        <span
                          class="answer-s delButton"
                          @click="
                            questionForm.answerList =
                              questionForm.answerList.slice(0, -1)
                          "
                          >x</span
                        >
                        <span
                          class="answer-s ac"
                          @click="questionForm.answerList = ''"
                          >ac</span
                        >

                      </p>
                    </div>
                  </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>
        </template>

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

          <div
            class="question-box"
            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 class="m20">共：{{ setNums(question.subQuestions) }}题</span>
              <span>共：{{ setScore(question) }} 分</span>

              <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>

            </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>

                <div class="qs-upload" v-if="isUpload">题干</div>

                <div class="qs-upload" v-if="isUpload">题目解析</div>
                <div class="qs-upload" v-if="isUpload">知识点</div>

                <div class="qs-set">操作</div>

              </li>

              <li
                v-for="(subQuestions, indexs) in question.subQuestions"
                :key="indexs"
              >
                <p
                  class="set-ans-btn"
                  v-if="
                    subQuestions.qusType &&
                    subQuestions.subNum &&
                    subQuestions.subNum > 4
                  "
                >
                  <el-button type="primary" @click="setFormAns(indexs, index)"
                    >批量设置答案</el-button
                  >

                </p>
                <div v-else class="sub-questions">
                  <div class="qs-num">
                    {{ setNum(index, indexs, subQuestions) }}
                  </div>
                  <div class="qs-type">

                    <template v-if="isUpload">

                      <el-select
                        v-model="subQuestions.questionType"
                        placeholder="选择题目类型"
                        @change="changeSubQuestions($event, subQuestions)"
                      >
                        <el-option
                          v-for="options in questionOptions"
                          :key="options.value"
                          :label="options.label"
                          :value="options.value"
                        ></el-option>

                      </el-select>
                    </template>
                    <template v-else>
                      {{ setSubPro(subQuestions.questionType) }}
                    </template>

                  </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>

                    <p
                      v-if="
                        subQuestions.questionType == 3 ||
                        subQuestions.questionType == 2
                      "
                      class="answer-box answer-box2"
                    >
                      <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>

                  <template v-if="isUpload">
                    <div class="qs-upload">

                      <el-button
                        slot="reference"
                        class="icon-tickets"
                        type="primary"
                        circle
                        size="mini"
                        icon="el-icon-tickets"
                        @click="openStem(subQuestions, index, indexs, 1)"
                      ></el-button>

                    </div>
                    <div class="qs-upload">

                      <el-button
                        slot="reference"
                        class="icon-tickets"
                        type="primary"
                        circle
                        size="mini"
                        icon="el-icon-tickets"
                        @click="openStem(subQuestions, index, indexs, 2)"
                      ></el-button>

                    </div>
                    <div class="qs-upload">

                      <el-button
                        type="primary"
                        circle
                        size="mini"
                        icon="el-icon-price-tag"
                        @click="openKnowledge(subQuestions, index, indexs)"
                      ></el-button>

                    </div>
                  </template>

                  <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>

                </div>
              </li>
            </ul>
          </div>

          <el-dialog
            :close-on-click-modal="false"
            title="批量设置答案"
            :visible.sync="diaSetAns"
            width="400"
            :modal-append-to-body="false"
          >

            <div class="qs-options">
              <p class="dia-tips">
                请点击选项按钮设置答案,多选题题目之间用“,”隔开，若添加5道题：“AC,AD,BD,AC,CD”
              </p>
              <p>{{ setSubPro(formAns.qusType) }}：</p>
              <p class="ipt">

                <el-input
                  v-if="formAns.qusType == 2 || formAns.qusType == 3"
                  ref="formAnsIpt"
                  v-model="formAns.answerList"

                  @keydown.native="keydownAnswer($event, formAns.qusType)"

                  @input="setAllAnswer($event, formAns.qusType)"
                ></el-input>
                <el-input
                  v-if="formAns.qusType == 4"
                  v-model="formAns.answerList"
                  readonly=""
                ></el-input>

              </p>
              <p class="answer-box">
                <template v-if="formAns.qusType == 4">

                  <span
                    class="answer-s active"
                    @click="
                      formAns.answerList.length < formAns.subNum
                        ? (formAns.answerList += '✓')
                        : ''
                    "
                    >✓</span
                  >
                  <span
                    class="answer-s active"
                    @click="
                      formAns.answerList.length < formAns.subNum
                        ? (formAns.answerList += '✗')
                        : ''
                    "
                    >✗</span
                  >

                </template>
                <template v-if="formAns.qusType == 3">

                  <span
                    class="answer-s active"
                    v-for="option in formAns.answerOptions.split(',')"
                    :key="option"
                    @click="setMultiple(formAns, option, 2)"
                    >{{ option }}</span
                  >
                  <span
                    class="answer-s active"
                    @click="setMultiple(formAns, ',', 2)"
                    >,</span
                  >

                </template>
                <template v-if="formAns.qusType == 2">

                  <span
                    class="answer-s active"
                    v-for="option in formAns.answerOptions.split(',')"
                    :key="option"
                    @click="
                      formAns.answerList.length < formAns.subNum
                        ? (formAns.answerList += option)
                        : ''
                    "
                    >{{ option }}</span
                  >

                </template>

                <span
                  class="answer-s delButton"
                  @click="formAns.answerList = formAns.answerList.slice(0, -1)"
                  >x</span
                >
                <span class="answer-s ac" @click="formAns.answerList = ''"
                  >ac</span
                >

              </p>
            </div>
            <div class="dialog-footer" slot="footer">
              <el-button @click="saveFormAns">确 定</el-button>
              <el-button @click="diaSetAns = false">取 消</el-button>
            </div>
          </el-dialog>
          <div class="btn-box">

            <el-button type="danger" plain round @click="linkBack"
              >取消</el-button
            >

            <template v-if="!isUpload">
              <el-button round @click="toStep(1)">上一步</el-button>
              <el-button type="primary" round @click="save">保存</el-button>
            </template>
            <template v-else>
              <el-button round @click="step = 0">上一步</el-button>

              <el-button type="primary" round @click="toStep(3)"
                >下一步</el-button
              >

            </template>
          </div>
        </div>
        <div v-show="step == 3">
          <div class="answer-title">
            <p class="name">{{ form.title }}</p>

            <p class="totals">卷面总分：{{ allScore }}分</p>

          </div>
          <div class="question-box">
            <template v-for="(question, index) in form.questionList">

              <p class="question-title">
                <span>{{ setBigNum(index) }}、</span>
                <span class="title-txt">{{ question.questionTitle }}</span>
                <span class="m20"
                  >共：{{ setNums(question.subQuestions) }}题</span
                >
                <span>共：{{ setScore(question) }} 分</span>
              </p>

              <div v-for="(subQuestions, indexs) in question.subQuestions">
                <div
                  class="screenshot-box"

                  v-if="subQuestions.screenshot"

                  :key="index + '-' + indexs"
                >
                  <iframe
                    class="screenshot"
                    :src="subQuestions.screenshot"
                  ></iframe>
                </div>

              </div>
            </template>
          </div>
          <div class="btn-box">

            <el-button type="danger" plain round @click="linkBack"
              >取消</el-button
            >

            <el-button round @click="toStep(2)">上一步</el-button>

            <el-button type="primary" round @click="save">保存</el-button>
          </div>
        </div>

        <el-dialog
          :close-on-click-modal="false"
          :title="stem.type == 1 ? '上传题干' : '上传题目解析'"
          :visible.sync="dialogStem"
          v-if="dialogStem"
          width="500"
        >

          <div class="upload-box">

            <div v-loading="iframeLoading">
              <template v-if="stem.type == 1">
                <iframe
                  ref="screenshot"
                  class="screenshot"
                  v-if="stem.screenshot"
                  :src="stem.screenshot"
                  @load="iframeLoading = false"
                ></iframe>
              </template>
              <template v-else="stem.type == 2">
                <iframe
                  ref="screenshot"
                  class="screenshot"
                  v-if="stem.answerScreenshot"
                  :src="stem.answerScreenshot"
                  @load="iframeLoading = false"
                ></iframe>
              </template>
            </div>

            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :limit="1"
              :on-success="upSuccess"
              :on-error="upError"
              accept="image/*"
            >

              <el-button size="small" type="primary">选择照片</el-button>

            </el-upload>
          </div>
          <div slot="footer">

            <el-button @click="dialogStem = false">确定</el-button>

          </div>
        </el-dialog>

        <el-dialog
          :close-on-click-modal="false"
          title="知识点"
          :visible.sync="dialogKnowledge"
          width="500"
        >

          <div>
            <el-form ref="form" :model="stem" label-width="160px">
              <el-form-item label="知识点：">

                <el-cascader
                  size="small"
                  filterable
                  :show-all-levels="false"
                  collapse
                  clearable
                  placeholder="选择知识点"
                  v-model="stem.knowledge"
                  :options="knowledgeData"
                  :props="{ expandTrigger: 'hover', multiple: true }"
                ></el-cascader>

              </el-form-item>
            </el-form>
          </div>
          <div slot="footer">
            <el-button @click="dialogKnowledge = false">取 消</el-button>
            <el-button type="primary" @click="setKnowledge">确 定</el-button>
          </div>
        </el-dialog>

      </div>
    </div>
  </template>
  
  <script>

  import { deepClone, checkAnswer, cNum } from "utils";

  const questionForm = {
    questionTitle: "",
    questionType: 2,
    number: 10,
    selectNum: 4,
    score: 1,
    partScore: 0,
    answerList: "",
  };
  const subQuesOptions = {
    questionType: 2,
    score: 1,
    partScore: 0,
    selectNum: 4,
    answerOptions: "A,B,C,D",
    correctAnswer: "",
  };

  import knowledgeList from "assets/js/knowledgeList.js";

  export default {
    computed: {
      allScore: function () {
        let score = 0;
        this.form.questionList.map((item) => {

          score += item.subQuestions?.reduce((a, b) => {

            return a + Number(b.score ? b.score : 0);
          }, 0);
        }, 0);
        return Number(score).toFixed(2);
      },

      // 知识点列表 根据学段-科目筛选
      knowledgeData: function () {

        let jsons = [];

        if (this.form.gradeName && this.form.subjectName) {

          let sectionName = "";
          this.gradeClassList.map((item) => {

            if (this.form.gradeName == item.gradeName) {

              sectionName = item.sectionName;

            }

          });
          if (
            sectionName &&
            Object.keys(this.knowledgeList).includes(sectionName)
          ) {
            if (
              Object.keys(this.knowledgeList[sectionName]).includes(
                this.form.subjectName
              )
            ) {
              jsons = this.knowledgeList[sectionName][this.form.subjectName];

            }
          }
        }

        return jsons;

      },

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

        role: "",
        step: 0, //步骤

        gradeClassList: [], //年级-班级数据

        gradeList: [], //年级
        subjectList: [], //科目
        answerTypeList: [], //测验类型
        answerTypeName: "", //测验类型名称
        form: {
          //答题卡详情
          title: "",
          tagId: "",
          subjectName: "",
          examsDuration: 90,
          questionList: [],

          gradeName: "",
          sharingType: 0,

        },
        formRules: {
          //答题卡验证
          title: [
            { required: true, message: "请输入答题卡名称", trigger: "blur" },
            {
              min: 1,

              max: 50,
              message: "长度在 1 到 50 个字符",

              trigger: "blur",
            },
          ],
          subjectName: [
            { required: true, message: "请选择科目", trigger: "blur" },
          ],
          examsDuration: [
            { required: true, message: "请设置考试时长", trigger: "blur" },
          ],
        },
        tagList: [],

        diaSetAns: false, //答案开关

        formAns: {
          listIndex: 0, //大题位置
          endIndex: 0, //相同题目最后一位题目的questionIndex
          index: 0, //相同题目最后一位题目的位置
          qusType: "", //题目类型
          subNum: 0, //数量
          answerOptions: [], //答案选项
          answerList: "", //答案列表-字符串
        },

        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", "H", "I", "J"],

        addSubQuestionsType: "",

  
        //v1.5

        knowledgeList: { ...knowledgeList },

        isUpload: false,
        dialogStem: false, //截图开关

        dialogKnowledge: false, //知识点开关

        stem: {

          type: 1,

          index: 0, //大题位置
          indexs: 0, //小题位置
          screenshot: "", //题干图片地址

          answerScreenshot: "", //题目解析图片地址
          knowledge: [], //知识点

        },

  
        //返回列表页参数记录
        listType: 1,
        listShare: 0,

        uploadUrl: "/file/uploadImgToHtml",

        iframeLoading: false,

      };
    },
    async created() {

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

      this.listShare = this.$route.query.listShare
        ? this.$route.query.listShare
        : 0;

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

      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;
      if (this.role != "ROLE_PERSONAL") {
        this.formRules.gradeName = [
          { required: true, message: "请选择年级", trigger: "blur" },
        ];
        await this._GradeList();
      }

      this.isUpload = this.$route.query.isUpload || false;

      if (this.isUpload) {

        let params =
          (this.$route.query.params && JSON.parse(this.$route.query.params)) ||
          null;
        this.form.title = params?.name;
        this.form.id = params?.id;
        this.form.examsDuration = params?.examsDuration || 90;
        this.form.sharingType = params?.sharingType || 0;
        this.formatData(params);

      }

      await this._QuerySubjectList(this.gradeList[0]);
      await this._TypeList();
      if (this.type == 2) {
        this._QueryDetail();
      }
    },
    methods: {

      // v1.5
      //上传截图

      openStem(obj, index, indexs, type) {

        this.iframeLoading = true;

        this.stem.index = index;
        this.stem.indexs = indexs;

        this.stem.type = type;
        if (type == 1) {

          if (!obj.screenshot || obj.screenshot == "") {

            this.iframeLoading = false;
          }

          this.stem.screenshot = obj.screenshot || "";
          this.stem.answerScreenshot = "";
        } else {

          if (!obj.answerScreenshot || obj.answerScreenshot == "") {

            this.iframeLoading = false;
          }

          this.stem.answerScreenshot = obj.answerScreenshot || "";
          this.stem.screenshot = "";
        }
  

        this.dialogStem = true;
      },

      // 图片上传成功
      upSuccess(res) {

        if (res && res.status == 0) {

          if (this.stem.type == 1) {
            this.stem.screenshot = res.data.url;

            this.form.questionList[this.stem.index].subQuestions[
              this.stem.indexs
            ].screenshot = this.stem.screenshot;

          } else {
            this.stem.answerScreenshot = res.data.url;

            this.form.questionList[this.stem.index].subQuestions[
              this.stem.indexs
            ].answerScreenshot = this.stem.answerScreenshot;

          }

          this.$message.success("上传成功");
        } else {
          this.$message.error(res.info);
        }
      },

      upError(res) {
        this.$message.error("上传失败");
      },

      // 打开知识点
      openKnowledge(obj, index, indexs) {
        this.stem.index = index;
        this.stem.indexs = indexs;

        this.stem.knowledge = (obj.knowledge && obj.knowledge.split("#")) || [];

        this.dialogKnowledge = true;
      },
      // 选择知识点

      setKnowledge() {

        this.form.questionList[this.stem.index].subQuestions[
          this.stem.indexs
        ].knowledge = this.stem.knowledge.join("#");

        this.dialogKnowledge = false;
      },

      //end
  

      //取消创建

      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",

              query: {
                type: this.listType,
                share: this.listShare,

              },

            });
          });
      },

      //转换题型显示方式

      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, sub) {

        let lengths = 0; //所在大题之前的所有小题数量
        let subIndex = 0; //所在大题的位置

        for (let i = 0; i < index; i++) {
          let subArr = this.form.questionList[i].subQuestions.filter((item) => {
            return !!item.questionType;
          });
          lengths += subArr.length;
        }

        for (let i = 0; i < indexs; i++) {
          if (!!this.form.questionList[index].subQuestions[i].questionType) {
            subIndex += 1;
          }
        }
        return lengths + subIndex + 1;
      },

      //统计小题数量

      setNums(ques) {
        let lengths = 0;

        let subArr =
          ques?.filter((item) => {
            return !!item.questionType;
          }) || [];

        lengths = subArr.length;
        return lengths;
      },

      //转换中文大题题号

      setBigNum(num) {
        let txt = "";

        let bigNum = [...cNum];

        txt = bigNum[num];
  
        return txt;
      },

      //切换题型清空答案

      setQuestionForm(val) {

        this.questionForm.answerList = "";
      },

      //减少题数设置答案

      changeQesNum(val) {

        if (
          this.questionForm.questionType == 2 ||
          this.questionForm.questionType == 4
        ) {
          this.questionForm.answerList = this.questionForm.answerList.substring(
            0,
            val
          );
        } else {

          this.questionForm.answerList = this.questionForm.answerList
            .split(",")
            .splice(0, val)
            .join(",");
        }
      },

      //初始化要修改的答案

      setFormAns(indexs, index) {

        this.formAns = { ...this.form.questionList[index].subQuestions[indexs] };
        this.formAns.listIndex = index;

        let answerList = "";

        let startIndex = indexs - this.formAns.subNum; //批量设置大难开始位置

        this.form.questionList[index].subQuestions.map((item, subIdx) => {

          if (subIdx >= startIndex && subIdx < indexs) {

            answerList += this.setAnswer(item.questionType, item.correctAnswer);

  
            if (item.qusType == 3) {
              answerList = answerList.slice(0, -1);

            }
          }
        });

        this.formAns.answerList = answerList;

  
        this.diaSetAns = true;
      },
      insertTxtAndSetcursor(element, answerList, str) {
        let startPos = element.selectionStart; // 获取光标开始的位置
        if (startPos === undefined) {
          // 如果没有光标位置 不操作
          return answerList;
        } else {
          return {
            text:
              answerList.substring(0, startPos) +
              str +
              answerList.substring(startPos), // 将文本插入
            startPos: startPos + str.length,
          };
        }
      },

      //多选答案设置

      setMultiple(obj, answer, type) {

        let elements =
          type == 1
            ? this.$refs["formAnsIpt2"].$el.children[0]
            : this.$refs["formAnsIpt"].$el.children[0];
        let resault = this.insertTxtAndSetcursor(
          elements,
          obj.answerList || "",
          answer
        );
        obj.answerList = resault.text;
        let str = obj.answerList;
        let str2;
        if (!!obj.answerOptions) {
          str2 = checkAnswer(
            str,
            3,
            obj.answerOptions.split(",").length,
            obj.subNum
          );
        } else {
          str2 = checkAnswer(str, 3, obj.selectNum, obj.number);
        }
        obj.answerList = str2;
        elements.focus();
        elements.selectionStart = resault.startPos;
      },

      //批量修改答案

      saveFormAns() {

        let EndIndex;
        let subNum = this.formAns.subNum - 1;
        this.form.questionList[this.formAns.listIndex].subQuestions.some(
          (item, index) => {
            if (this.formAns.endIndex == item.questionIndex) {
              EndIndex = index;

            }

            return this.formAns.endIndex == item.questionIndex;

          }
        );

        for (let i = 0; i <= subNum; i++) {
          let correctAnswer = "";
          if (this.formAns.qusType == 2) {
            correctAnswer = this.formAns.answerList[subNum - i] || "";
          } else if (this.formAns.qusType == 3) {
            correctAnswer = this.formAns.answerList.split(",")[subNum - i] || "";
          } else if (this.formAns.qusType == 4) {
            correctAnswer =
              this.formAns.answerList[subNum - i] == "✓"
                ? 1
                : this.formAns.answerList[subNum - i] == "✗"

                ? 2
                : "";

          }
          this.form.questionList[this.formAns.listIndex].subQuestions[
            EndIndex - i
          ].correctAnswer = correctAnswer;
        }
        this.diaSetAns = false;
      },
      keydownAnswer(event, type, isAddBig) {

        let answerA = "ABCDEFGHIJ";
        let answer_a = "abcdefghij";

        if (isAddBig) {
          answerA = answerA.substring(0, this.questionForm.selectNum);
          answer_a = answer_a.substring(0, this.questionForm.selectNum);
        } else {
          answerA = answerA.substring(0, this.formAns.subNum);
          answer_a = answer_a.substring(0, this.formAns.subNum);
        }
        answerA += answer_a;
        answerA = type == 2 ? answerA : answerA + ",";
        if (
          event.key == "Meta" ||
          event.key == "CapsLock" ||
          event.key == "Shift" ||
          event.key == "Enter" ||
          event.key == "Alt" ||
          event.key == "Backspace" ||
          event.key == "Delete" ||
          event.key == "ArrowUp" ||
          event.key == "ArrowDown" ||
          event.key == "ArrowLeft" ||
          event.key == "v" ||
          event.key == "V" ||
          event.key == "ArrowRight"
        )
          return;
        if (!answerA.includes(event.key)) {
          event.returnValue = "";
        }
      },
      setAllAnswer(event, type, isAddBig) {
        if (isAddBig) {
          let str = this.questionForm.answerList;
          let str2 = checkAnswer(
            str,
            type,
            this.questionForm.selectNum,
            this.questionForm.number
          );
          this.questionForm.answerList = str2;
        } else {
          let str = this.formAns.answerList;
          let str2 = checkAnswer(
            str,
            type,
            this.formAns.answerOptions.split(",").length,
            this.formAns.subNum
          );
          this.formAns.answerList = str2;
        }
      },
      setAnswer(type, ans) {
        let txt = "";
        if (type == 2) {
          txt = ans;
        } else if (type == 3) {
          txt = ans + ",";
        } else if (type == 4) {
          txt = ans == 1 ? "✓" : ans == 2 ? "✗" : "";
        }
        return txt;
      },

      toStep(step) {
        if (step == 2) {

          this.setStep2();

        } else {
          this.formatQuestionList();
          this.step = step;
        }

      },
      setStep1() {

        if (this.subjectList.length == 0) {
          this.$message.warning("暂无绑定年级信息，请先联系管理员设置。");
          return;
        }

        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;

        }
        this.formatQuestionList();

        //添加题目ID、序号
        this.form.questionList.map((item, index) => {
          item.questionType = 0;

          item.subQuestions?.map((items, indexs) => {

            items.questionId = this.setNum(index, indexs);
            items.questionIndex = this.setNum(index, indexs);
          });
        });
        //整理问题

        this.formateQuestion();

        this.step = 2;
        return;
      },
      formateQuestion() {

        this.formatQuestionList();

        this.form.questionList?.map((item) => {
          let types = [{}];
          let addndex = 0;

          item.subQuestions?.map((sub, index) => {

            if (!!sub.questionType) {
              if (
                sub.questionType == types[addndex].qusType &&
                sub.questionType != 5
              ) {
                //同类型批量答案+1
                types[addndex].subNum += 1;
                if (
                  types[addndex].answerOptions.length < sub.answerOptions.length
                ) {
                  types[addndex].answerOptions = sub.answerOptions;
                }
  
                // types[addndex].answerList += this.setAnswer(
                //   sub.questionType,
                //   sub.correctAnswer
                // );
                types[addndex].answerList = "";
                if (index == item.subQuestions.length - 1) {
                  //循环最后类型数量大于等于5，保存批量答案
                  if (types[addndex].subNum && types[addndex].subNum >= 5) {
                    types[addndex].endIndex = sub.questionIndex;
                    types[addndex].index = index;
                  }
                }
              } else {
                if (types[addndex].subNum && types[addndex].subNum >= 5) {
                  //不同类型时如果原有类型数量大于等于5，保存批量答案
                  types[addndex].endIndex =
                    item.subQuestions[index - 1].questionIndex;
                  types[addndex].index = index - 1;
                  addndex += 1;
                  types[addndex] = {};
                }
                //不同类型初始化批量答案
                types[addndex].qusType = sub.questionType;
                types[addndex].subNum = 1;
                types[addndex].answerOptions = sub.answerOptions;
                types[addndex].answerList = "";
              }
            }
          });
          for (let i = 0; i < types.length; i++) {
            if (types[i].subNum >= 5) {

              item.subQuestions?.splice(

                types[i].index + i + 1,
                0,
                deepClone(types[i])
              );
            }
          }

        });

      },

      //删除批量操作数据

      formatQuestionList() {

        for (let i = 0; i < this.form.questionList.length; i++) {
          for (
            let j = 0;

            j < this.form.questionList[i].subQuestions?.length;

            j++
          ) {

            if (this.form.questionList[i].subQuestions[j]?.qusType) {
              this.form.questionList[i].subQuestions?.splice(j, 1);

            }
          }
        }

      },
      openQuestion() {
        this.questionForm = { ...questionForm };
        this.addQuestionVisible = true;
      },

      //添加大题

      addQuestion() {

        let subQuestions = [];
        let questionsOptions = {
          ...subQuesOptions,
          selectNum: this.questionForm.selectNum,
          score: this.questionForm.score,
          partScore: this.questionForm.partScore,
          questionType:
            this.questionForm.questionType == 6
              ? 2
              : 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:
            questionsOptions.selectNum = 0;
            questionsOptions.answerOptions = "1,2";
            break;
          case 5:
            questionsOptions.selectNum = 0;
            break;
        }
        for (let i = 0; i < this.questionForm.number; i++) {
          let answer = "";
          if (questionsOptions.questionType == 4) {
            answer =
              this.questionForm.answerList[i] == "✓"
                ? 1
                : this.questionForm.answerList[i] == "✗"

                ? 2
                : "";

          } else if (questionsOptions.questionType == 3) {
            answer = this.questionForm.answerList.split(",")[i] || "";
          } else if (questionsOptions.questionType == 2) {
            answer = this.questionForm.answerList[i] || "";
          }
          questionsOptions.correctAnswer = answer;
          subQuestions.push({ ...questionsOptions });
        }
        this.form.questionList.push({
          questionTitle: this.questionForm.questionTitle,
          number: this.questionForm.number,
          source: 10,
          subQuestions: [...subQuestions],
          show: false,
        });
        this.addQuestionVisible = false;
      },

      //删除小题

      delTabData(subIndex, index) {

        this.form.questionList[index].subQuestions.splice(subIndex, 1);

        if (this.form.questionList[index].subQuestions.length == 0) {

          this.form.questionList.splice(index, 1);

        }

        this.formateQuestion();

      },
      setScore(question) {

        let score = question.subQuestions?.reduce((a, b) => {

          return a + (b.score ? b.score : 0);
        }, 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:
              questionsOptions.selectNum = 0;
              questionsOptions.answerOptions = "1,2";
              break;
            case 5:
              questionsOptions.selectNum = 0;
              break;
          }

          question.subQuestions
            ? question.subQuestions.push(questionsOptions)
            : (question.subQuestions = [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:
            subQuestions.selectNum = 0;
            subQuestions.answerOptions = "1,2";
            break;
          case 5:
            subQuestions.selectNum = 0;
            break;
        }

        this.formateQuestion();

      },

      //添加选项

      addOptions(subQuestions) {

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

        if (length > 9) 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(",");
        subQuestions.correctAnswer = subQuestions.correctAnswer.slice(
          0,
          subQuestions.selectNum
        );
      },

      //设置多选答案

      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("");
        }
      },
      openTagDia() {
        this.tagList = deepClone(this.answerTypeList);
        this.dialogVisible = true;
      },
      async editTypeName(obj) {
        let isRepeat = false;
        this.answerTypeList.map((item) => {
          if (item.typeName == obj.typeName) {
            isRepeat = true;
          }
        });
        if (isRepeat) {
          this.$message.error("类型已存在请重新填写！");
          return;
        }
        //修改测验类型

        let editPaperType =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pModifyPaperType
            : this.$request.editPaperType;
        const { data, status, info } = await editPaperType({

          tagId: obj.id,
          tag: obj.typeName,
        });
        if (status == 0) {
          await this._TypeList();
          this.tagList = deepClone(this.answerTypeList);
          this.$message.success("修改成功");
        } else {
          this.$message.error(info);
        }
      },
      async removeTypeName(obj) {
        //删除测验类型

        let delPaperType =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pDelPaperType
            : this.$request.delPaperType;
        const { data, status, info } = await delPaperType({

          tagId: obj.id,
        });
        if (status == 0) {
          await this._TypeList();
          this.tagList = deepClone(this.answerTypeList);
          this.$message.success("删除成功");
        } else {
          this.$message.error(info);
        }
      },
      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;
        }
        //添加测验类型

        let addPaperType =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pAddPaperType
            : this.$request.addPaperType;
        const { data, status, info } = await addPaperType({

          tag: this.answerTypeName,
        });
        if (status == 0) {
          await this._TypeList();
          this.tagList = deepClone(this.answerTypeList);
          this.form.tagId = data || "";
          this.answerTypeName = "";
          this.$message.success("添加成功");
        } else {
          this.$message.error(info);
        }
      },
      async save() {
        if (this.saveLoading) return;
        this.saveLoading = true;
        this.formatQuestionList();
        let formDatas = deepClone(this.form);
        for (let i = 0; i < formDatas.questionList.length; i++) {
          delete formDatas.questionList[i].show;

        }

        let addPaper =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pAddPaper
            : this.$request.addPaper;
        const { data, status, info } = await addPaper({

          ...formDatas,
        });
        this.saveLoading = false;
        if (status == 0) {
          this.$router.push({
            path: "/examinationPaper",

            query: {
              type: this.listType,
              share: this.listShare,

            },

          });
        } else {
          this.$message.error(info);
        }
      },

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

      async _TypeList() {
        //测验类型查询

        let fetchTypeNames =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pPaperTagList
            : this.$request.fetchTypeNames;
        const { data, status, info } = await fetchTypeNames({

          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();
        // 查找班级
  
        let fetchClassList =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pClassList
            : this.$request.fetchClassList;
  
        const { data, status, info } = await fetchClassList();

        if (status == 0) {

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

            if (!this.gradeList.includes(item.gradeName)) {

              this.gradeList.push(item.gradeName);

            }

            return item;
          });

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

          if (this.type != 2) {
            this.form.gradeName = this.gradeList[0];
          }
        } else {
          this.$message.error(info);
        }
      },
      async _QuerySubjectList(grade) {

        //查询科目列表

        if (!grade) {

          return;
        }

        let query = {};
        let fetchSubjectList =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pSubjectList
            : this.$request.fetchSubjectList;
        if (this.role != "ROLE_PERSONAL") {
          query.gradeName = grade;
        }
        const { data, status, info } = await fetchSubjectList({ ...query });

        if (status === 0) {

          let subjectArr = [];

          this.subjectList =
            data.subjectNames?.map((item) => {

              let subName =
                this.role == "ROLE_PERSONAL" ? item.subjectName : item;
              subjectArr.push(subName);

              return {

                value: subName,
                label: subName,

              };
            }) || [];

          if (this.subjectList.length) {

            if (subjectArr.includes(this.$route.query.subjectName)) {
              this.form.subjectName = this.$route.query.subjectName;
            } else {
              this.form.subjectName = this.subjectList[0].value;
            }

          }

        } else {
          this.$message.error(info);
        }
      },
      async _QueryDetail() {

        //查询答题卡详情

        let fetchPaperDetail =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pPaperDetail
            : this.$request.fetchPaperDetail;
        const { data, status, info } = await fetchPaperDetail({

          paperId: this.$route.query.paperId,
        });
        if (status == 0) {
          this.form.title = data.title + "_副本";