safetyEducationExamination/src/views/safetyEducationExaminationNew/examManagement/examinationArrange/addPage.vue

<!-- 新建考试 -->
<template>
  <div class="page-container examinationArrange-addPage">
    <div class="page-container-top-max-big-box">
      <p class="top-1-p">{{newData.id ? '编辑考试' : '新建考试'}}</p>
      <p class="top-2-p" @click="backPage()">返回</p>
      <p class="top-3-p" v-if="newData.id&&!showType" @click="resetButton()">重置</p>
      <p class="top-4-p" v-if="!showType" @click="submitButton()">保存</p>
    </div>
    <div class="content-box">
      <div class="layout-box">
        <!-- 左侧导航 -->
        <div class="side-nav">
          <div
            v-for="tab in tabs"
            :key="tab.key"
            class="nav-item"
            :class="{ active: activeTab === tab.key }"
            @click="activeTab = tab.key"
          >{{ tab.label }}
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="tab-content scrollbar-box">
          <el-form :model="newData" ref="basicForm" label-width="120px" :rules="rules">
            <!-- ==================== 基本设置 ==================== -->
            <div v-show="activeTab === 'basic'">
              <div class="section-block">
                <div class="flex-row-box">
                  <el-form-item label="考试类型" prop="examTypeId">
                    <el-select :disabled="showType" v-model="newData.examTypeId" placeholder="考试类型" @change="examChange" style="width:200px;">
                      <el-option v-for="item in optionExamType" :key="item.id" :label="item.examTypeName"
                                 :value="item.id"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="安全分类" v-if="!placementTest" :prop="placementTest?'disciplineTypeId':''">
                    <el-select :disabled="showType" v-model="newData.disciplineTypeId" placeholder="安全分类" style="width:200px;">
                      <el-option v-for="item in tableList" :key="item.id"
                                 :label="item.disciplineName"
                                 :value="item.id"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="安全分类" v-if="placementTest" :prop="placementTest?'disciplineTypeId':''">
                    <el-select :disabled="showType" v-model="newData.disciplineTypeId" placeholder="安全分类" style="width:200px;">
                      <el-option v-for="item in tableList2" :key="item.id"
                                 :label="item.disciplineName"
                                 :value="item.id"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="风险等级" prop="riskLevelId" v-if="placementTest">
                    <el-select :disabled="showType" v-model="newData.riskLevelId" placeholder="请选择" style="width:200px;">
                      <el-option v-for="item in optionRiskLevel" :key="item.levelId" :label="item.titleName"
                                 :value="item.levelId"/>
                    </el-select>
                  </el-form-item>
                </div>

                <el-form-item label="考试名称" prop="examName">
                  <el-input :disabled="showType" v-model="newData.examName" placeholder="请输入课程名称" style="width:600px;"/>
                </el-form-item>

                <el-form-item label="答卷次数" prop="attemptLimit">
                  <div class="stepper-row">
                    <div class="number-stepper">
                      <el-input-number
                        :disabled="answerUnlimited||showType"
                        class="form-input-number"
                        style="width:160px"
                        :min="1"
                        :max="9999"
                        :step="1" :precision="0" step-strictly
                        v-model="newData.attemptLimit"
                      >
                      </el-input-number>
                    </div>
                    <span class="unit-text">次</span>
                    <el-checkbox :disabled="showType" v-model="answerUnlimited" :label="true" style="margin-left:20px;">无限制</el-checkbox>
                  </div>
                </el-form-item>

                <el-form-item label="是否共享">
                  <div class="switch-row">
                    <el-switch :disabled="showType" v-model="newData.shareStatus" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA"
                    />
                    <p class="tip-text" style="margin:2px 0 0 10px;">共享开启，全校所有学院单位都可见</p>

                  </div>
                </el-form-item>

                <el-form-item label="启用" prop="enableStatus">
                  <el-switch :disabled="showType" v-model="newData.enableStatus" :active-value="1" :inactive-value="0"
                             active-color="#0183FB" inactive-color="#AAAAAA"
                  />
                </el-form-item>

                <el-form-item label="考卷" prop="paperId">
                  <div class="paper-select-row">
                    <p class="checkButton-p" @click="openPaperDrawer" v-if="!showType">选择试卷</p>
                    <div class="selected-tag" v-if="newData.paperName">
                      <span>{{ newData.paperName }}</span>
                      <!--<i class="el-icon-close" @click="newData.paperId = null; newData.paperName = ''"></i>-->
                    </div>
                  </div>
                </el-form-item>
              </div>
              <div class="section-divider"></div>
              <div class="section-block">
                <div class="flex-row-box">
                  <el-form-item label="考试时间" prop="examTimeRange">
                    <el-date-picker
                      :disabled="showType"
                      popper-class="examinationArrange-addPage-date-picker"
                      v-model="newData.examTimeRange"
                      type="datetimerange"
                      range-separator="至"
                      format="yyyy-MM-dd HH:mm"
                      value-format="yyyy-MM-dd HH:mm"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    />
                  </el-form-item>
                  <el-form-item label="考试时长" prop="answerDuration">
                    <div class="stepper-row">
                      <div class="number-stepper">
                        <div class="number-stepper">
                          <el-input-number
                            :disabled="showType"
                            class="form-input-number"
                            style="width:160px"
                            :min="0"
                            :max="9999"
                            :step="1" :precision="0" step-strictly
                            v-model="newData.answerDuration"
                          >
                          </el-input-number>
                        </div>
                      </div>
                      <span class="unit-text">分钟</span>
                      <span class="tip-text" style="margin-left:12px;">限制答卷最大时长</span>
                    </div>
                  </el-form-item>
                </div>

                <el-form-item label="考试范围" prop="scopeType" v-if="!yzyhTest">
                  <div class="scope-btn-group">
                    <button
                      v-for="item in scopeOptions"
                      :key="item.value"
                      class="scope-btn"
                      v-show="!showType || newData.scopeType === item.value"
                      :class="{ active: newData.scopeType === item.value }"
                      @click.prevent="newData.scopeType = item.value"
                    >
                      <i v-if="newData.scopeType === item.value" class="el-icon-check"
                         style="color:#0183fa;margin-right:4px;"
                      ></i>
                      {{ item.label }}
                    </button>
                    <p class="checkButton-p" @click="openExamScopeDrawer"
                       v-if="(newData.scopeType == '2' || newData.scopeType == '3')&&!showType"
                    >选择</p>
                  </div>
                  <!-- 考试范围表格（非全校时显示） -->
                  <div v-if="newData.scopeType != '1'" class="scope-table-box">
                    <div class="scope-table-header" v-if="newData.scopeType == '2'">已选取：{{ scopeList.length }}组</div>
                    <div class="scope-table-header" v-if="newData.scopeType == '3'">已选取：{{ userList.length }}人</div>
                    <el-table v-if="newData.scopeType == '2'" border class="table-box" :data="scopeList" size="small"
                              style="width:100%;">
                      <el-table-column label="学院" prop="deptName">
                        <template slot-scope="scope">
                          {{scope.row.deptName?scope.row.deptName:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="专业" prop="disciplineName" width="200">
                        <template slot-scope="scope">
                          {{scope.row.disciplineName?scope.row.disciplineName:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="角色" prop="roleName" width="180">
                        <template slot-scope="scope">
                          {{scope.row.roleName?scope.row.roleName:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="学年" prop="academicYear" width="180">
                        <template slot-scope="scope">
                          {{scope.row.academicYear?scope.row.academicYear:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="140" align="center" v-if="!showType">
                        <template slot-scope="{ $index }">
                          <div class="table-button-box">
                            <p class="table-button-null"></p>
                            <p class="table-button-p"
                               @click="scopeList.splice($index, 1)"
                            >移除</p>
                            <p class="table-button-null"></p>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-table v-if="newData.scopeType == '3'" border class="table-box" :data="userList" size="small"
                              style="width:100%;">
                      <el-table-column label="姓名" prop="userName" width="200">
                        <template slot-scope="scope">
                          {{scope.row.userName?scope.row.userName:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="学工号" prop="account">
                        <template slot-scope="scope">
                          {{scope.row.account?scope.row.account:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="专业" prop="majorName" width="200">
                        <template slot-scope="scope">
                          {{scope.row.majorName?scope.row.majorName:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="学院" prop="deptName" width="180">
                        <template slot-scope="scope">
                          {{scope.row.deptName?scope.row.deptName:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="学年" prop="gradeNumber" width="180">
                        <template slot-scope="scope">
                          {{scope.row.gradeNumber?scope.row.gradeNumber:'-'}}
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="140" align="center">
                        <template slot-scope="{ $index }">
                          <div class="table-button-box">
                            <p class="table-button-null"></p>
                            <p class="table-button-p" v-if="!showType"
                               @click="userList.splice($index, 1)"
                            >移除</p>
                            <p class="table-button-null"></p>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-form-item>
                <el-form-item label="考试范围" prop="targetUserType" v-if="yzyhTest">
                  <div class="scope-btn-group">
                    <button
                      v-for="item in scopeOptionsB"
                      :key="item.value"
                      class="scope-btn"
                      v-show="!showType || newData.targetUserType === item.value"
                      :class="{ active: newData.targetUserType === item.value }"
                      @click.prevent="newData.targetUserType = item.value"
                    >
                      <i v-if="newData.targetUserType === item.value" class="el-icon-check"
                         style="color:#0183fa;margin-right:4px;"
                      ></i>
                      {{ item.label }}
                    </button>
                  </div>
                </el-form-item>
              </div>
            </div>
            <!-- ==================== 考前配置 ==================== -->
            <div v-show="activeTab === 'preExam'">
              <div class="section-block">
                <el-form-item label="学时要求" prop="studyHoursRequirementEnabled">
                  <div class="switch-row" style="display: flex">
                    <el-switch :disabled="showType" v-model="newData.studyHoursRequirementEnabled" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA"
                    />
                    <div class="number-stepper" v-if="(!yzyhTest&&!placementTest)&&newData.studyHoursRequirementEnabled == 1" style="margin-left:12px;height:40px;">
                      <el-input-number
                        :disabled="showType"
                        class="form-input-number"
                        style="width:160px;margin-left:8px;"
                        :min="0"
                        :max="9999"
                        :step="1" :precision="1" step-strictly
                        v-model="newData.studyHoursRequirement"
                      >
                      </el-input-number>
                    </div>
                    <span v-if="(!yzyhTest&&!placementTest)&&newData.studyHoursRequirementEnabled == 1" class="unit-text" style="margin-top:2px;"
                    >学时</span>
                    <span class="tip-text" style="margin-left:12px;">开启后，需完成相应学时才能参加考试</span>
                    <el-cascader
                      :disabled="showType"
                      v-if="(!yzyhTest&&!placementTest)&&newData.studyHoursRequirementEnabled == 1"
                      style="width: 600px;margin-left:20px;"
                      v-model="newData.knowledgePointIds"
                      :options="optionListC"
                      :props="{
                        multiple:true,
                        emitPath:false,
                        checkStrictly: true,
                        value: 'id',
                        label: 'knowledgePointName',
                        children: 'children',
                      }"
                      :show-all-levels="false"
                      filterable
                      placeholder="知识点"
                    ></el-cascader>
                  </div>
                  <!--应知应会 学时要求-->
                  <div class="yzyh-max-big-box" v-if="yzyhTest&&newData.studyHoursRequirementEnabled == 1">
                    <div class="yzyh-title-box">
                      <p>用户类别</p>
                      <p>学时要求配置</p>
                    </div>
                    <div v-if="this.newData.targetUserType == 2" class="yzyh-input-max-box">
                      <p class="yzyh-title-p">研究生</p>
                      <div class="yzyh-text-box">
                        <p>新生（无需进入实验室的）</p>
                        <p>非新生</p>
                      </div>
                      <div class="yzyh-input-big-box">
                        <div class="yzyh-input-box">
                          <el-input-number
                            :disabled="showType"
                            class="form-input-number"
                            style="width:200px;margin-top:20px;"
                            :min="0"
                            :max="9999"
                            :step="1" :precision="0" step-strictly
                            v-model="newData.mandatoryStudyHoursConfig.freshmanNoLabHours"
                          >
                          </el-input-number>
                        </div>
                        <div class="yzyh-input-box">
                          <p class="yzyh-text-p">Ⅰ级{{hourData.level1Hour}}学时 / Ⅱ级{{hourData.level2Hour}}学时 / Ⅲ级{{hourData.level3Hour}}学时 / Ⅳ级{{hourData.level4Hour}}学时</p>
                        </div>
                      </div>
                    </div>
                    <div v-if="this.newData.targetUserType == 2" class="yzyh-input-max-box">
                      <p class="yzyh-title-p">本科生</p>
                      <div class="yzyh-text-box">
                        <p>非新生</p>
                      </div>
                      <div class="yzyh-input-big-box">
                        <div class="yzyh-input-box">
                          <el-input-number
                            :disabled="showType"
                            class="form-input-number"
                            style="width:200px;margin-top:20px;"
                            :min="0"
                            :max="9999"
                            :step="1" :precision="0" step-strictly
                            v-model="newData.mandatoryStudyHoursConfig.undergraduateHours"
                          >
                          </el-input-number>
                        </div>
                      </div>
                    </div>
                    <div v-if="this.newData.targetUserType == 1" class="yzyh-input-max-box">
                      <p class="yzyh-title-p">教职工</p>
                      <div class="yzyh-text-box">
                        <p>新入职</p>
                        <p>非新入职</p>
                      </div>
                      <div class="yzyh-input-big-box">
                        <div class="yzyh-input-box">
                          <el-input-number
                            :disabled="showType"
                            class="form-input-number"
                            style="width:200px;margin-top:20px;"
                            :min="0"
                            :max="9999"
                            :step="1" :precision="0" step-strictly
                            v-model="newData.mandatoryStudyHoursConfig.staffNewHours"
                          >
                          </el-input-number>
                        </div>
                        <div class="yzyh-input-box">
                          <el-input-number
                            :disabled="showType"
                            class="form-input-number"
                            style="width:200px;margin-top:20px;"
                            :min="0"
                            :max="9999"
                            :step="1" :precision="0" step-strictly
                            v-model="newData.mandatoryStudyHoursConfig.staffNonNewHours"
                          >
                          </el-input-number>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="考前学习" prop="preCourseEnabled">
                  <div class="switch-row">
                    <el-switch :disabled="showType" v-model="newData.preCourseEnabled" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA"
                    />
                    <p class="checkButton-p" style="margin-left:20px;" v-if="newData.preCourseEnabled == 1&&!showType"
                       @click="openCourseDrawer"
                    >选择课程</p>
                    <div class="tip-text" style="margin-left:20px;">开启后，需完成学习才能参加考试</div>
                  </div>
                  <div class="selected-tag" v-if="newData.preCourseEnabled==1&&newData.preCourseId"
                       style="margin-top:8px;max-width:400px;"
                  >
                    <span>{{ newData.courseName }}</span>
                    <!--<i class="el-icon-close" @click="newData.preCourseId = null; newData.courseName = ''"></i>-->
                  </div>
                </el-form-item>
                <el-form-item label="模拟练习" prop="mockEnabled">
                  <div class="switch-row">
                    <el-switch :disabled="showType" v-model="newData.mockEnabled" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA"
                    />
                    <el-checkbox
                      :disabled="showType"
                      v-if="newData.mockEnabled == 1"
                      v-model="newData.mockMode"
                      true-label="1"
                      false-label="2"
                      style="margin-left:20px;">
                      复用试卷
                    </el-checkbox>
                    <p class="checkButton-p" v-if="newData.mockEnabled == 1&&newData.mockMode == 2&&!showType"
                       style="margin-left:20px;" @click="openMockPaperDrawer"
                    >选择试卷</p>
                    <span class="tip-text" style="margin-left:20px;">开启后，需完成模拟练习任务才能参加考试</span>
                  </div>
                  <div class="mock-stat-bar"
                       v-if="newData.mockPaperId&&newData.mockEnabled == 1&&newData.mockMode == 2"
                  >
                    <span style="margin-right:20px;"><b>{{ newData.mockPaperName}}</b></span>
                    <span>总题目数：<b>{{ newData.mockTotalCount || 0 }}</b></span>
                    <span style="margin-left:20px;">总分：<b>{{ newData.mockTotalScore || 0 }}</b></span>
                    <span style="margin-left:20px;">及格分：<b>{{ newData.mockPassScore || 0 }}</b></span>
                    <!--<i class="el-icon-close" @click="newData.mockPaperId = null;newData.mockPaperName = '';newData.mockTotalCount = 0;newData.mockTotalScore = 0;newData.mockPassScore = 0"></i>-->
                  </div>
                </el-form-item>
                <el-form-item label="考试承诺书" prop="commitmentEnabled">
                  <div class="switch-row">
                    <el-switch :disabled="showType" v-model="newData.commitmentEnabled" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA"
                    />
                    <span class="tip-text" style="margin-left:20px;">开启后，考生需要阅读考试承诺内容并做出承诺才可开始考试</span>
                    <span style="margin-left:30px;font-weight:600;color:#333;">承诺书打印</span>
                    <el-switch :disabled="showType" v-model="newData.commitmentPrintEnabled" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA" style="margin-left:12px;"
                    />
                  </div>
                  <div class="editor-box" v-if="newData.commitmentEnabled == 1" style="margin-top:12px;">
                    <tinymce-text
                      :disabled="showType"
                      v-model="newData.commitmentContent"
                      :height="500"
                      :max-length="1000"
                      :upload-url="editorUploadUrl"
                      :upload-headers="editorUploadHeaders"
                    />
                  </div>
                </el-form-item>
              </div>
            </div>
            <!-- ==================== 防作弊 ==================== -->
            <div v-show="activeTab === 'antiCheat'">
              <div class="section-block">
                <!--<el-form-item label="图形弹窗校验" prop="popupVerifyEnabled">-->
                  <!--<div class="switch-row">-->
                    <!--<el-switch :disabled="showType" v-model="newData.popupVerifyEnabled" :active-value="1" :inactive-value="0"-->
                               <!--active-color="#0183FB" inactive-color="#AAAAAA"-->
                    <!--/>-->
                    <!--<template v-if="newData.popupVerifyEnabled==1">-->
                      <!--<p class="tip-text" style="margin-left:12px;">开启后，每隔</p>-->
                      <!--<div class="number-stepper" style="margin-left:8px;">-->
                        <!--<el-input-number-->
                          <!--:disabled="showType"-->
                          <!--class="form-input-number"-->
                          <!--style="width:160px;"-->
                          <!--:min="0"-->
                          <!--:max="9999"-->
                          <!--:step="1" :precision="0" step-strictly-->
                          <!--v-model="newData.popupIntervalMinutes"-->
                        <!--&gt;-->
                        <!--</el-input-number>-->
                      <!--</div>-->
                      <!--<span class="tip-text" style="margin-left:8px;">分钟，提醒弹窗验证</span>-->
                    <!--</template>-->
                    <!--<span class="tip-text" style="margin-left:12px;" v-else>开启后，每隔 N 分钟，提醒弹窗验证</span>-->
                  <!--</div>-->
                <!--</el-form-item>-->

                <el-form-item label="人脸识别校验">
                  <div class="anti-cheat-group">
                    <div class="switch-row" style="margin-bottom:12px;">
                      <el-switch :disabled="showType" v-model="newData.preFaceVerifyEnabled" :active-value="1" :inactive-value="0"
                                 active-color="#0183FB" inactive-color="#AAAAAA"
                      />
                      <span class="tip-text" style="margin-left:12px;">开启后，考试前需要进行人脸识别（仅学习考试一体机）</span>
                    </div>
                    <div class="switch-row">
                      <el-switch :disabled="showType" v-model="newData.postFaceVerifyEnabled" :active-value="1" :inactive-value="0"
                                 active-color="#0183FB" inactive-color="#AAAAAA"
                      />
                      <span class="tip-text" style="margin-left:12px;">开启后，考试后需要进行人脸识别（仅学习考试一体机）</span>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="摄像头抓拍">
                  <div class="switch-row">
                    <el-switch :disabled="showType" v-model="newData.cameraCaptureEnabled" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA"
                    />
                    <span class="tip-text" style="margin-left:12px;">开启后，考试过程中摄像头随机抓拍（仅学习考试一体机）</span>
                  </div>
                </el-form-item>
              </div>
            </div>
            <!-- ==================== 获得证书 ==================== -->
            <div v-show="activeTab === 'certificate'">
              <div class="section-block">
                <el-form-item label="获得证书" prop="certificateEnabled">
                  <div class="switch-row">
                    <el-switch :disabled="showType" v-model="newData.certificateEnabled" :active-value="1" :inactive-value="0"
                               active-color="#0183FB" inactive-color="#AAAAAA"
                    />
                    <p v-if="newData.certificateEnabled==1&&!showType" class="checkButton-p" style="margin-left:20px;"
                       @click="openCertTemplateDrawer"
                    >选择模板</p>
                  </div>
                  <div class="mock-stat-bar" style="padding:0 20px;"
                       v-if="newData.certificateTemplateId&&newData.certificateEnabled == 1">
                    <span style="margin-right:20px;"><b>{{ newData.certificateTemplateName}}</b></span>
                    <!--<i class="el-icon-close" @click="newData.certificateTemplateId = null;newData.certificateTemplateName = '';"></i>-->
                  </div>
                </el-form-item>

                <el-form-item label="证书打印" v-if="newData.certificateEnabled == 1">
                  <el-switch :disabled="showType" v-model="newData.certificatePrintEnabled" :active-value="1" :inactive-value="0"
                             active-color="#0183FB" inactive-color="#AAAAAA"
                  />
                </el-form-item>

                <el-form-item label="证书有效期" prop="certificateValidMonths" v-if="newData.certificateEnabled == 1">
                  <div class="stepper-row">
                    <div class="number-stepper">
                      <el-input-number
                        :disabled="showType"
                        class="form-input-number"
                        style="width:160px;"
                        :min="0"
                        :max="9999"
                        :step="1" :precision="0" step-strictly
                        v-model="newData.certificateValidMonths"
                      >
                      </el-input-number>
                    </div>
                    <span class="unit-text">个月</span>
                  </div>
                </el-form-item>

                <el-form-item label="证书复审周期" prop="certificateReviewMonths" v-if="newData.certificateEnabled == 1">
                  <div class="stepper-row">
                    <div class="number-stepper">
                      <el-input-number
                        :disabled="showType"
                        class="form-input-number"
                        style="width:160px;"
                        :min="0"
                        :max="9999"
                        :step="1" :precision="0" step-strictly
                        v-model="newData.certificateReviewMonths"
                      >
                      </el-input-number>
                    </div>
                    <span class="unit-text">个月</span>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <el-drawer
      size="100%"
      custom-class="examinationArrange-addPage-drawer"
      :append-to-body="true"
      :title="drawerTitle"
      ref="drawer"
      :visible.sync="drawer"
      direction="rtl"
    >
      <!--选择试卷/选择试题-->
      <selectTestPaper v-if="(drawerType === 1 || drawerType === 5)&&drawer"></selectTestPaper>
      <!--选择课程-->
      <selectCourse v-if="drawerType === 2&&drawer"></selectCourse>
      <!--选择用户-->
      <selectUser v-if="drawerType === 3&&drawer"></selectUser>
      <!--选择范围-->
      <selectScope v-if="drawerType === 4&&drawer"></selectScope>
      <!--选择证书-->
      <selectCertificate v-if="drawerType === 6&&drawer"></selectCertificate>
    </el-drawer>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import tinymceText from '@/components/tinymceContainer/tinymceText.vue'
  import selectTestPaper from './selectTestPaper.vue'
  import selectCourse from './selectCourse.vue'
  import selectUser from './selectUser.vue'
  import selectScope from './selectScope.vue'
  import selectCertificate from './selectCertificate.vue'
  import {
    examElExamAdd,examElExamEdit,examElExamDetail,examElKnowledgePointTreeList,examElDisciplineTypeList,
    examElExamTypeList, laboratoryLevelConfigGetLevelTitleList,examElConfigMasterInitMinHour
  } from '@/api/safetyEducationExaminationNew/index'

  export default {
    name: 'addPage',
    components: {
      tinymceText,
      selectTestPaper,
      selectCourse,
      selectUser,
      selectScope,
      selectCertificate
    },
    props: {
      propsData: {}
    },
    data() {
      const validateData0 = (rule, value, callback) => {
        if (this.newData.scopeType == 2 && !this.scopeList[0]) {
          callback(new Error('请添加考试范围-范围组'))
        }else if(this.newData.scopeType == 3 && !this.userList[0]){
          callback(new Error('请添加考试范围-考生'))
        } else {
          callback()
        }
      }
      const validateData = (rule, value, callback) => {
        if (value == 0) {
          callback(new Error('总分数不能为0'))
        } else {
          callback()
        }
      }
      const validateData1 = (rule, value, callback) => {
        if(this.newData.targetUserType==2){
          if (this.newData.studyHoursRequirementEnabled == 1 && !this.yzyhTest && !this.placementTest && this.newData.studyHoursRequirement == 0) {
            callback(new Error('学时要求不能为0'))
          }else if (this.newData.studyHoursRequirementEnabled == 1 && this.yzyhTest && this.newData.mandatoryStudyHoursConfig.freshmanNoLabHours == 0) {
            callback(new Error('研究生-新生的学时要求不能为0'))
          } else {
            callback()
          }
        }else if(this.newData.targetUserType==1){
          if (this.newData.studyHoursRequirementEnabled == 1 && this.yzyhTest && this.newData.mandatoryStudyHoursConfig.staffNewHours == 0) {
            callback(new Error('教职工-新入职的学时要求不能为0'))
          } else {
            callback()
          }
        }
      }
      const validateData2 = (rule, value, callback) => {
        if (this.newData.preCourseEnabled == 1 && !this.newData.preCourseId) {
          callback(new Error('请选择考前学习课程'))
        } else {
          callback()
        }
      }
      const validateData3 = (rule, value, callback) => {
        if (this.newData.mockEnabled == 1 && this.newData.mockMode == 2 && !this.newData.mockPaperId) {
          callback(new Error('请选择模拟练习试卷'))
        } else {
          callback()
        }
      }
      const validateData4 = (rule, value, callback) => {
        if (this.newData.commitmentEnabled == 1 && !this.newData.commitmentContent) {
          callback(new Error('请输入考试承诺书内容'))
        } else {
          callback()
        }
      }
      // const validateData5 = (rule, value, callback) => {
      //   if (this.newData.popupVerifyEnabled == 1 && this.newData.popupIntervalMinutes == 0) {
      //     callback(new Error('图形弹窗校验间隔不能为0'))
      //   } else {
      //     callback()
      //   }
      // }
      const validateData6 = (rule, value, callback) => {
        if (this.newData.certificateEnabled == 1 && !this.newData.certificateTemplateId) {
          callback(new Error('请选择证书'))
        } else {
          callback()
        }
      }
      const validateData7 = (rule, value, callback) => {
        if (this.newData.certificateEnabled == 1 && this.newData.certificateValidMonths == 0) {
          callback(new Error('证书有效期不能为0'))
        } else {
          callback()
        }
      }
      const validateData8 = (rule, value, callback) => {
        if (this.newData.certificateEnabled == 1 && this.newData.certificateReviewMonths == 0) {
          callback(new Error('证书复审周期不能为0'))
        } else {
          callback()
        }
      }
      return {
        //日期选择范围限制
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        editorUploadUrl: this.uploadUrl(),
        editorUploadHeaders: {
          Authorization: getToken()
        },
        activeTab: 'basic',
        tabs: [
          { key: 'basic', label: '基本设置' },
          { key: 'preExam', label: '考前配置' },
          { key: 'antiCheat', label: '防作弊' },
          { key: 'certificate', label: '获得证书' }
        ],
        scopeOptions: [
          { label: '全校', value: 1 },
          { label: '考试范围', value: 2 },
          { label: '指定考生', value: 3 }
        ],
        scopeOptionsB: [
          { label: '学生', value: 2 },
          { label: '教职工', value: 1 },
        ],
        optionListC:[],
        optionExamType: [],
        tableList: [],
        tableList2: [],
        optionRiskLevel: [],
        scopeList: [],
        userList: [],
        //是否是分级考试
        placementTest: false,
        //是否是应知应会考试
        yzyhTest:false,
        //答卷次数限制
        answerUnlimited: false,
        //应知应会学时要求数据
        hourData:{
          level1Hour:0,
          level2Hour:0,
          level3Hour:0,
          level4Hour:0,
        },
        newData: {
          examTypeId: null,
          disciplineTypeId: null,
          riskLevelId: null,
          examName: '',
          attemptLimit: 1,
          shareStatus: 0,
          enableStatus: 0,
          paperId: null,
          paperName: '',
          examTimeRange: null,
          answerDuration: 0,
          scopeType: 1,
          targetUserType: 2,
          studyHoursRequirementEnabled: 0,
          studyHoursRequirement: 0,
          knowledgePointIds:[],
          preCourseEnabled: 0,
          preCourseId: null,
          courseName: '',
          mockEnabled: 0,
          mockMode: 2,
          mockPaperId: null,
          mockPaperName: '',
          mockTotalCount: 0,
          mockTotalScore: 0,
          mockPassScore: 0,
          commitmentEnabled: 0,
          commitmentPrintEnabled: 0,
          commitmentContent: '',
          // popupVerifyEnabled: 0,
          // popupIntervalMinutes: 0,
          preFaceVerifyEnabled: 0,
          postFaceVerifyEnabled: 0,
          cameraCaptureEnabled: 0,
          certificateEnabled: 0,
          certificateTemplateId: null,
          certificateTemplateName: '',
          certificatePrintEnabled: 0,
          certificateValidMonths: 0,
          certificateReviewMonths: 0,
          mandatoryStudyHoursConfig:{
            freshmanNoLabHours:0,
            undergraduateHours:0,
            staffNewHours:0,
            staffNonNewHours:0,
          }
        },
        rules: {
          examTypeId: [
            { required: true, message: '请选择考试类型', trigger: 'change' }
          ],
          disciplineTypeId: [
            { required: true, message: '请选择安全分类', trigger: 'change' }
          ],
          riskLevelId: [
            { required: true, message: '请选择风险等级', trigger: 'change' }
          ],
          examName: [
            { required: true, message: '请输入考试名称', trigger: 'change' }
          ],
          attemptLimit: [
            { required: true, message: '请输入答卷次数', trigger: 'change' }
          ],
          paperId: [
            { required: true, message: '请选择考卷', trigger: 'change' }
          ],
          enableStatus: [
            { required: true, message: '请选择启用停用', trigger: 'change' }
          ],
          answerDuration: [
            { required: true, message: '请选择考试时长', trigger: 'change' },
            { validator: validateData, trigger: 'blur' }
          ],
          scopeType: [
            { required: true, message: '请选择考试范围', trigger: 'change' },
            { validator: validateData0, trigger: 'blur' }
          ],
          targetUserType: [
            { required: true, message: '请选择考试范围', trigger: 'change' },
            { validator: validateData0, trigger: 'blur' }
          ],
          examTimeRange: [
            { required: true, message: '请选择考试时间', trigger: 'change' }
          ],
          studyHoursRequirementEnabled: [
            { required: true, message: '请输入学时要求', trigger: 'change' },
            { validator: validateData1, trigger: 'blur' }
          ],
          preCourseEnabled: [
            { required: true, message: '请选择考前学习课程', trigger: 'change' },
            { validator: validateData2, trigger: 'blur' }
          ],
          mockEnabled: [
            { required: true, message: '请选择模拟练习试卷', trigger: 'change' },
            { validator: validateData3, trigger: 'blur' }
          ],
          commitmentEnabled: [
            { required: true, message: '请输入考试承诺书内容', trigger: 'change' },
            { validator: validateData4, trigger: 'blur' }
          ],
          // popupVerifyEnabled: [
          //   { required: true, message: '请输入图形弹窗校验间隔', trigger: 'change' },
          //   { validator: validateData5, trigger: 'blur' }
          // ],
          certificateEnabled: [
            { required: true, message: '请选择证书', trigger: 'change' },
            { validator: validateData6, trigger: 'blur' }
          ],
          certificateValidMonths: [
            { required: true, message: '证书有效期不能为0', trigger: 'change' },
            { validator: validateData7, trigger: 'blur' }
          ],
          certificateReviewMonths: [
            { required: true, message: '证书复审周期不能为0', trigger: 'change' },
            { validator: validateData8, trigger: 'blur' }
          ],
        },
        //弹窗相关
        drawerTitle: '',
        drawerType: '',
        drawer: false,
        showType:false,
      }
    },
    watch: {
      'newData.knowledgePointIds': {
        handler(newVal, oldVal) {
          // 假设最多只能选 2 个
          if (newVal && newVal.length > 10) {
            this.msgError('最多选择10个知识点')
            this.$nextTick(() => {
              // 将值回退到上一次的状态
              this.newData.knowledgePointIds = oldVal;
            });
          }
        },
        deep: true, // 关键：必须开启深度监听
        immediate: false // 初始化时不触发，防止默认值超限误报
      }
    },
    mounted() {
      this.initialize();
      this.examElExamTypeList();
      this.laboratoryLevelConfigGetLevelTitleList();
      this.examElConfigMasterInitMinHour();
      this.examElKnowledgePointTreeList();
      this.examElDisciplineTypeList();
    },
    methods: {
      initialize() {
        if (this.propsData.id) {
          if(this.propsData.showType){
            this.$set(this,'showType',true);
          }
          examElExamDetail({id:this.propsData.id}).then(response => {
            if(response.data.attemptLimit == 0){
              this.$set(this,'answerUnlimited',true);
            }
            let obj = {
              id:this.propsData.id,
              examTypeId: response.data.examTypeId,
              disciplineTypeId: response.data.disciplineTypeId,
              riskLevelId: response.data.riskLevelId,
              examName: response.data.examName,
              attemptLimit: response.data.attemptLimit,
              shareStatus: response.data.shareStatus,
              enableStatus: response.data.enableStatus,
              paperId: response.data.paperId,
              paperName: response.data.paperName,
              examTimeRange: [response.data.startTime.replace("T", "0"),response.data.endTime.replace("T", "0")],
              answerDuration: response.data.answerDuration,
              scopeType:response.data.scopeType,
              targetUserType:response.data.targetUserType?response.data.targetUserType:2,
              studyHoursRequirementEnabled: response.data.studyHoursRequirementEnabled,
              studyHoursRequirement: response.data.studyHoursRequirement,
              knowledgePointIds: response.data.knowledgePointIds,
              preCourseEnabled: response.data.preCourseEnabled,
              preCourseId: response.data.preCourseEnabled?response.data.preCourseId:null,
              courseName: response.data.preCourseEnabled?response.data.courseName:'',
              mockEnabled: response.data.mockEnabled,
              mockMode: response.data.mockMode,
              mockPaperId: response.data.mockEnabled==1&&response.data.mockMode==2?response.data.mockPaperId:null,
              mockPaperName: response.data.mockEnabled==1&&response.data.mockMode==2?response.data.mockPaperName:'',
              mockTotalCount: response.data.mockEnabled==1&&response.data.mockMode==2?response.data.mockQuestionCount:0,
              mockTotalScore: response.data.mockEnabled==1&&response.data.mockMode==2?response.data.mockTotalScore:0,
              mockPassScore: response.data.mockEnabled==1&&response.data.mockMode==2?response.data.mockPassScore:0,
              commitmentEnabled: response.data.commitmentEnabled,
              commitmentPrintEnabled: response.data.commitmentPrintEnabled,
              commitmentContent: response.data.commitmentEnabled==1?response.data.commitmentContent:'',
              // popupVerifyEnabled: response.data.popupVerifyEnabled,
              // popupIntervalMinutes: response.data.popupIntervalMinutes,
              preFaceVerifyEnabled: response.data.preFaceVerifyEnabled,
              postFaceVerifyEnabled: response.data.postFaceVerifyEnabled,
              cameraCaptureEnabled: response.data.cameraCaptureEnabled,
              certificateEnabled: response.data.certificateEnabled,
              certificateTemplateId: response.data.certificateEnabled==1?response.data.certificateTemplateId:null,
              certificateTemplateName: response.data.certificateEnabled==1?response.data.certificateTemplateName:'',
              certificatePrintEnabled: response.data.certificateEnabled==1?response.data.certificatePrintEnabled:0,
              certificateValidMonths: response.data.certificateEnabled==1?response.data.certificateValidMonths:0,
              certificateReviewMonths: response.data.certificateEnabled==1?response.data.certificateReviewMonths:0,
              mandatoryStudyHoursConfig: response.data.mandatoryStudyHoursConfig,
            };
            this.$set(this,'scopeList',response.data.ruleScopeItems?response.data.ruleScopeItems:[]);
            this.$set(this,'userList',response.data.designatedCandidates?response.data.designatedCandidates:[]);
            this.$set(this,'newData',obj);
            this.examChange();
          })
        }
      },
      backPage() {
        this.$parent.tableButton(6)
      },
      resetButton() {
        this.initialize();
      },
      submitButton() {
        let self = this;
        this.$refs.basicForm.validate((valid, fields) => {
          if (!valid) {
            const firstErrorField = Object.keys(fields)[0]
            const tabFieldMap = [
              { tab: 'basic', list: ['examTypeId','disciplineTypeId','riskLevelId','examName','attemptLimit','paperId','enableStatus','answerDuration','scopeType','examTimeRange'] },
              { tab: 'preExam', list: ['studyHoursRequirementEnabled','preCourseEnabled','mockEnabled','commitmentEnabled'] },
              // { tab: 'antiCheat', list: ['popupVerifyEnabled'] },
              { tab: 'certificate', list: ['certificateEnabled','certificateValidMonths','certificateReviewMonths'] }
            ]
            const matchedTab = tabFieldMap.find(item => item.list.includes(firstErrorField))
            this.activeTab = matchedTab ? matchedTab.tab : 'basic'
          } else {
            this.$confirm('是否确认保存?', "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              self.dataIntegration();
            }).catch(() => {});
          }
        })
      },
      //提交
      dataIntegration(){
        let self = this;
        let obj = {
          examTypeId:this.newData.examTypeId,
          disciplineTypeId:this.newData.disciplineTypeId,
          riskLevelId:this.placementTest?this.newData.riskLevelId:'',
          examName:this.newData.examName,
          attemptLimit:this.answerUnlimited?0:this.newData.attemptLimit,
          shareStatus:this.newData.shareStatus,
          enableStatus:this.newData.enableStatus,
          paperId:this.newData.paperId,
          startTime:this.newData.examTimeRange[0].replace(" ", "T"),
          endTime:this.newData.examTimeRange[1].replace(" ", "T"),
          answerDuration:this.newData.answerDuration,
          scopeType:this.newData.scopeType,
          targetUserType:this.yzyhTest?this.newData.targetUserType:'',
          ruleScopeItems:this.newData.scopeType==2?this.scopeList:[],
          designatedCandidates:this.newData.scopeType==3?this.userList:[],
          studyHoursRequirementEnabled:this.newData.studyHoursRequirementEnabled,
          studyHoursRequirement:this.newData.studyHoursRequirementEnabled == 1&&(!this.yzyhTest&&!this.placementTest)?this.newData.studyHoursRequirement:0,
          mandatoryStudyHoursConfig:this.newData.studyHoursRequirementEnabled == 1&&this.yzyhTest?{
            freshmanNoLabHours:this.newData.targetUserType==2?this.newData.mandatoryStudyHoursConfig.freshmanNoLabHours:0,
            undergraduateHours:this.newData.targetUserType==2?this.newData.mandatoryStudyHoursConfig.undergraduateHours:0,
            staffNewHours:this.newData.targetUserType==1?this.newData.mandatoryStudyHoursConfig.staffNewHours:0,
            staffNonNewHours:this.newData.targetUserType==1?this.newData.mandatoryStudyHoursConfig.staffNonNewHours:0,
          }:{
            freshmanNoLabHours:0,
            undergraduateHours:0,
            staffNewHours:0,
            staffNonNewHours:0,
          },
          knowledgePointIds:this.newData.studyHoursRequirementEnabled == 1&&(!this.yzyhTest&&!this.placementTest)?this.newData.knowledgePointIds:[],
          preCourseEnabled:this.newData.preCourseEnabled,
          preCourseId:this.newData.preCourseEnabled == 1?this.newData.preCourseId:'',
          mockEnabled:this.newData.mockEnabled,
          mockMode:this.newData.mockEnabled == 1&&this.newData.mockMode == 1?this.newData.mockMode:2,
          mockPaperId:this.newData.mockEnabled == 1&&this.newData.mockMode == 2?this.newData.mockPaperId:'',
          commitmentEnabled:this.newData.commitmentEnabled,
          commitmentPrintEnabled:this.newData.commitmentPrintEnabled,
          commitmentContent:this.newData.commitmentEnabled == 1 ? this.newData.commitmentContent:'',
          // popupVerifyEnabled:this.newData.popupVerifyEnabled,
          // popupIntervalMinutes:this.newData.popupVerifyEnabled == 1?this.newData.popupIntervalMinutes:0,
          preFaceVerifyEnabled:this.newData.preFaceVerifyEnabled,
          postFaceVerifyEnabled:this.newData.postFaceVerifyEnabled,
          cameraCaptureEnabled:this.newData.cameraCaptureEnabled,
          certificateEnabled:this.newData.certificateEnabled,
          certificateTemplateId:this.newData.certificateEnabled == 1?this.newData.certificateTemplateId:'',
          certificatePrintEnabled:this.newData.certificateEnabled == 1?this.newData.certificatePrintEnabled:0,
          certificateValidMonths:this.newData.certificateEnabled == 1?this.newData.certificateValidMonths:0,
          certificateReviewMonths:this.newData.certificateEnabled == 1?this.newData.certificateReviewMonths:0,
        };
        if(this.newData.id){
          obj.id = this.newData.id;
          this.examElExamEdit(obj);
        }else{
          this.examElExamAdd(obj);
        }
      },
      examElExamAdd(obj){
        examElExamAdd(obj).then(response => {
          this.msgSuccess(response.message);
          this.$parent.tableButton(6);
        })
      },
      examElExamEdit(obj){
        examElExamEdit(obj).then(response => {
          this.msgSuccess(response.message);
          this.$parent.tableButton(6);
        })
      },
      openPaperDrawer() {
        // TODO: 打开选择试卷弹窗
        this.$set(this, 'drawerTitle', '选择试卷')
        this.$set(this, 'drawerType', 1)
        this.$set(this, 'drawer', true)
      },
      openCourseDrawer() {
        // TODO: 打开选择课程弹窗
        this.$set(this, 'drawerTitle', '选择课程')
        this.$set(this, 'drawerType', 2)
        this.$set(this, 'drawer', true)
      },
      openExamScopeDrawer() {
        if (this.newData.scopeType == '2') {
          // TODO: 打开选择范围弹窗
          this.$set(this, 'drawerTitle', '选择范围')
          this.$set(this, 'drawerType', 4)
          this.$set(this, 'drawer', true)
        } else if (this.newData.scopeType == '3') {
          // TODO: 打开选择用户弹窗
          this.$set(this, 'drawerTitle', '选择用户')
          this.$set(this, 'drawerType', 3)
          this.$set(this, 'drawer', true)
        }
      },
      openMockPaperDrawer() {
        // TODO: 打开选择试题弹窗
        this.$set(this, 'drawerTitle', '选择试卷')
        this.$set(this, 'drawerType', 5)
        this.$set(this, 'drawer', true)
      },
      openCertTemplateDrawer() {
        // TODO: 打开选择证书模板弹窗
        this.$set(this, 'drawerTitle', '选择证书')
        this.$set(this, 'drawerType', 6)
        this.$set(this, 'drawer', true)
      },
      //弹窗关闭
      drawerOffButton(data) {
        if (this.drawerType == 1) {
          //选择试卷
          this.$set(this.newData, 'paperId', data.id)
          this.$set(this.newData, 'paperName', data.name)
        }else if(this.drawerType == 2){
          //选择课程
          this.$set(this.newData, 'preCourseId', data.id)
          this.$set(this.newData, 'courseName', data.name)
        }else if(this.drawerType == 3){
          //选择用户
          let obj = this.mergeAndDeduplicate(this.userList,data);
          if(obj.filteredCount>0){
            this.msgSuccess('已过滤 '+obj.filteredCount+' 条相同数据');
          }
          this.$set(this,'userList',obj.data);

        }else if(this.drawerType == 4){
          //选择范围
          let obj = this.mergeAndDeduplicate(this.scopeList,data);
          if(obj.filteredCount>0){
            this.msgSuccess('已过滤 '+obj.filteredCount+' 条相同数据');
          }
          this.$set(this,'scopeList',obj.data);
        }else if(this.drawerType == 5){
          //选择模拟试卷
          this.$set(this.newData, 'mockPaperId', data.id)
          this.$set(this.newData, 'mockPaperName', data.name)
          this.$set(this.newData, 'mockTotalCount', data.totalScore)
          this.$set(this.newData, 'mockTotalScore', data.passScore)
          this.$set(this.newData, 'mockPassScore', data.questionCount)
        }else if(this.drawerType == 6){
          //选择证书
          this.$set(this.newData, 'certificateTemplateId', data.id)
          this.$set(this.newData, 'certificateTemplateName', data.name)
        }
        this.$refs.drawer.closeDrawer()
      },
      //数据拼接过滤
      mergeAndDeduplicate(arr1, arr2) {
        const combinedArr = [...arr1, ...arr2];
        const totalLength = combinedArr.length;
        const uniqueArr = combinedArr.filter((item, index, self) => {
          const firstIndex = self.findIndex(otherItem => {
            return JSON.stringify(item) === JSON.stringify(otherItem);
          });
          return index === firstIndex;
        });
        const filteredCount = totalLength - uniqueArr.length;
        return {
          data: uniqueArr,
          filteredCount: filteredCount
        };
      },
      //考试类型选中
      examChange() {
        let self = this
        for (let i = 0; i < self.optionExamType.length; i++) {
          if (self.optionExamType[i].id == self.newData.examTypeId) {
            if (self.optionExamType[i].examTypeCode == 'CLASSIFIED') {
              self.$set(this, 'placementTest', true)
              let num = 0;
              for(let o=0;o<self.tableList2.length;o++){
                if(self.newData.disciplineTypeId == self.tableList2[o].id){
                  num++
                }
              }
              if(num == 0){
                self.$set(self.newData,'disciplineTypeId',null);
              }
            } else {
              self.$set(this, 'placementTest', false)
              let num = 0;
              for(let o=0;o<self.tableList.length;o++){
                if(self.newData.disciplineTypeId == self.tableList[o].id){
                  num++
                }
              }
              if(num == 0){
                self.$set(self.newData,'disciplineTypeId',null);
              }
            }
            if (self.optionExamType[i].examTypeCode == 'yzyh') {
              self.$set(this.newData, 'scopeType', 1)
              if(!this.newData.targetUserType){
                self.$set(this.newData, 'targetUserType', 2)
              }
              self.$set(this, 'yzyhTest', true)
            } else {
              self.$set(this, 'yzyhTest', false)
            }
          }
        }
      },
      //查询全部考试类型
      examElExamTypeList() {
        examElExamTypeList({}).then(response => {
          let userInfo = JSON.parse(localStorage.getItem('user'));
          let schoolId = process.env.VUE_APP_SCHOOL_ID;
          if(userInfo.position == schoolId ){
            this.$set(this, 'optionExamType', response.data)
          } else {
            let list = [];
            for(let i=0;i<response.data.length;i++){
              if(response.data[i].examTypeCode != 'CLASSIFIED' && response.data[i].examTypeCode != 'yzyh' && response.data[i].examTypeCode != 'STUDENT'){
                list.push(response.data[i])
              }
            }
            this.$set(this, 'optionExamType', list)
          }
        })
      },
      //查询全部考试类型
      examElConfigMasterInitMinHour() {
        examElConfigMasterInitMinHour({}).then(response => {
          this.$set(this, 'hourData', response.data)
        })
      },
      //查询全部考试类型
      laboratoryLevelConfigGetLevelTitleList() {
        laboratoryLevelConfigGetLevelTitleList({}).then(response => {
          this.$set(this, 'optionRiskLevel', response.data)
        })
      },
      //知识点
      examElKnowledgePointTreeList(){
        examElKnowledgePointTreeList({}).then(response => {
          const list = response.data || [];
          this.formatTreeData(list);
          this.$set(this, 'optionListC', list);
        });
      },
      //类型选项卡数据
      examElDisciplineTypeList(){
        examElDisciplineTypeList({}).then(response => {
          const validCodes = ['CHEMISTRY', 'BIOLOGY', 'RADIATION', 'MECHANICAL_ELECTRICAL', 'OTHER'];
          let list = response.data.filter(item => validCodes.includes(item.disciplineTypeCode));
          this.$set(this, 'tableList', response.data)
          this.$set(this, 'tableList2', list)
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .examinationArrange-addPage {

    .content-box {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    .layout-box {
      display: flex;
      width: 100%;
      height: 100%;
    }

    .side-nav {
      width: 140px;
      flex-shrink: 0;
      border-right: 1px solid #e8e8e8;
      padding: 24px 0;
      background: #fff;

      .nav-item {
        padding: 14px 24px;
        font-size: 14px;
        color: #555;
        cursor: pointer;
        transition: all 0.15s;

        &:hover {
          color: #0183fa;
        }

        &.active {
          color: #0183fa;
          font-weight: 600;
          background: #f0f7ff;
          border-right: 3px solid #0183fa;
        }
      }
    }

    .tab-content {
      flex: 1;
      overflow-y: auto;
      padding: 24px 32px;
    }

    .section-block {
      padding-bottom: 8px;
    }
    .yzyh-max-big-box{
      width:720px;
      margin-top:20px;
      .yzyh-title-box{
        display: flex;
        background-color: #F2F2F2;
        border:1px solid #D7D7D7;
        p{
          line-height:40px;
          padding:0 20px;
        }
        p:nth-child(1){
          width:500px;
        }
        p:nth-child(2){
          width:220px;
        }
      }
      .yzyh-input-max-box:nth-child(2){
        .yzyh-title-p{
          line-height:160px;
        }
      }
      .yzyh-input-max-box:nth-child(3){
        .yzyh-title-p{
          line-height:80px;
        }
      }
      .yzyh-input-max-box:nth-child(4){
        .yzyh-title-p{
          line-height:160px;
        }
      }
      .yzyh-input-max-box{
        display: flex;
        border-bottom:1px solid #D7D7D7;
        .yzyh-title-p{
          width:200px;
          padding:0 20px;
          border-left:1px solid #D7D7D7;
        }
        .yzyh-text-box{
          width:300px;
          p{
            padding:0 20px;
            line-height:80px;
            border-left:1px solid #D7D7D7;
          }
          p:nth-child(1){
          }
          p:nth-child(2){
            border-top:1px solid #D7D7D7;
          }
        }
        .yzyh-input-big-box{
          width:220px;
          border-right:1px solid #D7D7D7;
          .yzyh-input-box{
            height:80px;
            .yzyh-text-p{
              color:#666;
              line-height:40px;
              background-color:#F4F6FA;
              margin:20px 20px 20px 0;
              padding:0 10px;
              border-radius:4px;
              margin-left:-180px;
              text-align: center;
            }
          }
          .yzyh-input-box:nth-child(2){
            border-top:1px solid #D7D7D7;
          }
        }
      }
    }
    .section-divider {
      height: 1px;
      background: #e8e8e8;
      margin: 16px 0 24px;
    }

    .flex-row-box {
      display: flex;
      flex-wrap: wrap;
      gap: 0 60px;
    }

    .stepper-row {
      display: flex;
      align-items: center;
    }

    .number-stepper {
      display: inline-flex;
      align-items: center;
      border-radius: 4px;
      overflow: hidden;

      .stepper-btn {
        width: 32px;
        height: 32px;
        background: #f5f7fa;
        border: none;
        cursor: pointer;
        font-size: 16px;
        color: #333;

        &:hover {
          background: #e6f0fe;
        }
      }

      .stepper-val {
        min-width: 44px;
        text-align: center;
        font-size: 14px;
        padding: 0 4px;
      }
    }

    .unit-text {
      margin-left: 8px;
      color: #333;
      white-space: nowrap;
      font-size: 14px;
    }

    .tip-text {
      color: #999;
      font-size: 13px;
    }

    .paper-select-row {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .checkButton-p {
      background-color: #0183fa;
      color: #ffffff;
      line-height: 40px;
      border-radius: 4px;
      text-align: center;
      width: 80px;
      cursor: pointer;
    }

    .selected-tag {
      display: inline-flex;
      align-items: center;
      background: #e6f4ff;
      border: 1px solid #91caff;
      border-radius: 4px;
      padding: 2px 12px;
      color: #0183fa;
      font-size: 13px;
      min-width: 200px;
      max-width: 500px;

      span {
        flex: 1;
      }

      i {
        margin-left: 8px;
        cursor: pointer;

        &:hover {
          color: #e74c3c;
        }
      }
    }

    .scope-btn-group {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;

      .scope-btn {
        padding: 7px 20px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        font-size: 14px;
        color: #333;
        display: flex;
        align-items: center;
        transition: all 0.15s;

        &:hover {
          border-color: #0183fa;
          color: #0183fa;
        }

        &.active {
          border-color: #0183fa;
          color: #0183fa;
          background: #f0f7ff;
        }
      }
    }

    .scope-table-box {
      /*border: 1px solid #e8e8e8;*/
      border-radius: 4px;
      overflow: hidden;
      height: 400px;
      display: flex;
      flex-direction: column;

      .scope-table-header {
        background: #f5f5f5;
        padding: 4px 16px;
        font-size: 13px;
        color: #555;
        border: 1px solid #e8e8e8;
        border-bottom: none;
      }
    }

    .switch-row {
      display: flex;
      /*align-items: center;*/
      /*flex-wrap: wrap;*/
      .el-switch {
        margin-top: 10px;
      }

      .tip-text {
        margin-top: 2px;
      }
    }

    .anti-cheat-group {
      display: flex;
      flex-direction: column;
    }

    .mock-stat-bar {
      background: #e6f4ff;
      border: 1px solid #91caff;
      border-radius: 4px;
      padding: 10px 16px;
      margin-top: 10px;
      font-size: 13px;
      color: #333;
      display: inline-block;

      b {
        color: #0183fa;
        font-weight: 600;
      }
    }

    .editor-box {
      max-width: 1030px;
    }
  }
</style>
<style lang="scss">
  .examinationArrange-addPage-date-picker {
    .el-input--small {
      width: 144px !important;
    }
    .el-time-panel__content::after, .el-time-panel__content::before{
      top:45%!important;
    }
  }

  .examinationArrange-addPage-drawer {
    .el-drawer__body {
      padding: 0;
    }

    .el-drawer__header {
      margin: 0;
    }
  }
</style>