zc_saas_admin/src/views/resource/bankManagement/testPaperManagement/addPaper/baseAddPaper/index.vue

<template>
  <div id="baseAddPaper">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="试卷基本信息" name="first"></el-tab-pane>
      <el-tab-pane label="试卷题目内容" name="second" disabled></el-tab-pane>
    </el-tabs>
    <div class="boxWidth" v-show="page === 1">
      <el-form
        label-position="right"
        label-width="120px"
        :model="listDataIns"
        :rules="rules"
        ref="listDataIns"
      >
        <el-form-item label="适用业务层级" :required="true">
          <el-select
            v-model="eduType"
            placeholder="请选择教育类型"
            @change="changeEduType"
          >
            <el-option
              v-for="(item, index) in eduTypeOptions"
              :key="index"
              :label="item.educationName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="courType"
            placeholder="请选择业务层次"
            @change="changecourseType"
          >
            <el-option
              v-for="(item, index) in newCourTypeOptions"
              :key="index"
              :label="item.projectName + '-' + item.businessName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-popover
            ref="popovers"
            placement="bottom"
            trigger="click"
            @show="showHandle"
            @hide="hideHandle"
            :disabled="courType && newSujectOption.length ? false : true"
          >
            <el-radio-group v-model="sujectApis" class="dis_flexbox">
              <el-radio
                v-for="(item, index) in newSujectOption"
                :label="item.newId"
                :key="index"
                >{{ item.subjectName }}</el-radio
              >
            </el-radio-group>
            <div style="display: block; text-align: center; margin-top: 10px">
              <el-button size="mini" type="primary" @click="submitSujectArray"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              style="margin-left: 12px"
              @click="getMessage"
              >请选择科目</el-button
            >
          </el-popover>
        </el-form-item>
        <el-form-item label="">
          <!-- <span v-if="Object.keys(newSujectApis).length == 0"
            >未选项目类型</span
          > -->
          <div
            v-if="Object.keys(newSujectApis).length !== 0"
            style="display: flex"
          >
            <div class="listBoxStys">
              {{
                newSujectApis.educationName +
                " - " +
                newSujectApis.projectName +
                " - " +
                newSujectApis.businessName +
                " - " +
                newSujectApis.subjectName
              }}
              <i class="el-icon-error closeIcons" @click="closeType"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="试卷类型" prop="examPaperId">
          <el-select
            v-model="listDataIns.examPaperId"
            placeholder="请选择试卷类型"
          >
            <el-option
              v-for="item in paperexam"
              :key="item.paperId"
              :label="item.paperName"
              :value="item.paperId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地域（省）" prop="provinceId">
          <el-select
            v-model="listDataIns.provinceId"
            placeholder="请选择省"
            @change="changeCity"
          >
            <el-option
              v-for="item in areas"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="地域（市）"
          prop="cityId"
          v-if="listDataIns.provinceId"
        >
          <el-select v-model="listDataIns.cityId" placeholder="请选择市">
            <el-option
              v-for="item in optionsCity"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年份" prop="year">
          <el-date-picker
            v-model="listDataIns.year"
            type="year"
            value-format="yyyy"
            placeholder="请选择年份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="标题前缀" prop="prefixName">
          <el-input v-model="listDataIns.prefixName"></el-input>
        </el-form-item>
        <el-form-item label="试卷名称" prop="examName">
          <el-input v-model="listDataIns.examName"></el-input>
        </el-form-item>
        <el-form-item label="是否发布" prop="publishStatus">
          <el-radio-group v-model="listDataIns.publishStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="backPage">取消</el-button>
          <el-button type="primary" @click="submitIns('listDataIns')"
            >下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div v-show="page === 2">
      <table-list
        :tableSets="tableSet"
        :tableData="tableData"
        :navText="navText"
        @addClick="openActiveBox"
        :loading="loading"
        @editInfo="editInfo"
        @emitData="emitData"
      >
        <template slot="btn" slot-scope="props">
          <el-button
            type="text"
            @click="addClick(props.scope.row, 0, props.scope.$index)"
            >修改</el-button
          >
          <el-button
            type="text"
            @click="del(props.scope.row, props.scope.$index)"
            >删除</el-button
          >
        </template>
      </table-list>
      <div class="centerStys">
        <el-button size="small" type="warning" @click="page = 1"
          >上一步</el-button
        >
        <el-button size="small" @click="backPage">取消</el-button>
        <el-button size="small" type="primary" @click="submitTableAllInfos"
          >确定</el-button
        >
      </div>
      <el-dialog
        width="1080px"
        :visible.sync="innerVisiblePaperTopic"
        append-to-body
        :show-close="false"
        :fullscreen="fullscreenChildPaperTopic"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">
            {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
          </div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Max@2x.png"
              alt=""
              @click="fullscreenChildPaperTopic = !fullscreenChildPaperTopic"
            />
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBefore"
            />
          </div>
        </div>
        <busIns
          @amdis="changeAmdis"
          ref="sujects"
          :typeBus="typeBus"
          :sujectApisTable="sujectApisTable"
          :newSujectApisTable="newSujectApisTable"
        />
        <el-form
          label-position="right"
          label-width="110px"
          :model="listData"
          ref="listData"
          :rules="rulesTest"
        >
          <el-form-item
            v-for="(items, indexs) in listitem"
            :key="indexs"
            :label="items.label"
            :prop="items.prop"
          >
            <div v-if="items.scope === 'bussing'">
              <div v-if="!activeExam.length">请在下面输入框添加知识点</div>
              <ul v-else class="BusBoxs">
                <li
                  class="fot_Le"
                  v-for="(item, index) in activeExam"
                  :key="index"
                >
                  {{ item.knowledgeName }}
                  <i
                    class="el-icon-error icon_clear"
                    @click="clearBusName(index)"
                  ></i>
                </li>
                <div style="clear: both"></div>
              </ul>
              <el-select
                v-model="value"
                placeholder="请选择知识点"
                @change="changeKnow"
              >
                <el-option
                  v-for="item in options"
                  :key="item.knowledgeId"
                  :label="item.knowledgeName"
                  :value="item.knowledgeId"
                  :disabled="comLs(item)"
                >
                </el-option>
              </el-select>
              <el-button @click="addExam">自定义添加</el-button>
            </div>

            <el-radio-group
              v-else-if="items.scope === 'radio'"
              v-model="listData[items.prop]"
            >
              <el-radio :label="1">发布</el-radio>
              <el-radio :label="0">未发布</el-radio>
            </el-radio-group>
            <el-input
              v-model="listData[items.prop]"
              v-else
            ></el-input> </el-form-item
        ></el-form>
        <questionBank :dingFormInfo="listNums" :nums="1" ref="child" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBefore">关 闭</el-button>
          <el-button
            @click="submitForm('listData')"
            v-if="statusPop === 1 || statusPop === 0"
            >完成</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="780px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">添加</div>
          <div class="rightBoxs">
            <img src="@/assets/images/Close@2x.png" alt="" @click="closeBoxs" />
          </div>
        </div>
        <div>
          <el-form label-position="right" label-width="110px">
            <el-form-item label="知识点">
              <div>
                <div v-if="!BusNameList.length">请在下面输入框添加知识点</div>
                <ul v-else class="BusBoxs">
                  <li
                    class="fot_Le"
                    v-for="(item, index) in BusNameList"
                    :key="index"
                  >
                    {{ item }}
                    <i
                      class="el-icon-error icon_clear"
                      @click="clearBus(index)"
                    ></i>
                  </li>
                  <div style="clear: both"></div>
                </ul>
                <el-input
                  style="width: 40%; margin-right: 10px"
                  v-model="BusName"
                ></el-input
                ><el-button @click="addBusName">添加</el-button>
              </div></el-form-item
            ></el-form
          >
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxs">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleActive"
        width="420px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">操作类型</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsActive"
            />
          </div>
        </div>
        <div>
          <el-radio-group v-model="radioActive">
            <el-radio :label="1">自定义</el-radio>
            <el-radio :label="2">已有数据池</el-radio>
          </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsActive">取 消</el-button>
          <el-button type="primary" @click="submitActive">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleTable"
        width="960px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">题库数据池</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsTable"
            />
          </div>
        </div>
        <div>
          <el-table
            ref="multipleTable"
            :data="boxtableData"
            border
            @select-all="selectAll"
            @select="select"
            :row-key="getRowKeys"
            :header-cell-style="{
              'background-color': '#eee',
              padding: '8px',
              color: '#333',
            }"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
              header-align="center"
              :selectable="checkboxT"
              :reserve-selection="true"
            >
            </el-table-column>
            <template v-for="(item, index) in tableSetTables">
              <el-table-column
                v-if="item.scope !== 'inputs'"
                :width="item.width"
                :key="index"
                :label="item.label"
                align="center"
                :show-overflow-tooltip="true"
                header-align="center"
              >
                <template slot-scope="scope">
                  <span v-if="item.scope === 'Status'">
                    {{
                      scope.row[item.prop] === 1
                        ? "发布"
                        : scope.row[item.prop] === 0
                        ? "未发布"
                        : "未知"
                    }}
                  </span>
                  <span v-else-if="item.scope === 'topic'">{{
                    scope.row[item.prop] === 1
                      ? "单选题"
                      : scope.row[item.prop] === 2
                      ? "多选题"
                      : scope.row[item.prop] === 3
                      ? "判断题"
                      : scope.row[item.prop] === 4
                      ? "案例题"
                      : scope.row[item.prop] === 5
                      ? "简答题"
                      : "未知"
                  }}</span>
                  <div
                    class="editInfoSty"
                    v-else-if="item.scope === 'editInfoHTML'"
                  >
                    {{ getSimpleText(scope.row[item.prop]) }}
                  </div>
                  <div v-else-if="item.scope === 'knowledge'">
                    <el-button
                      type="success"
                      size="small"
                      v-for="(items, ks) in scope.row[item.prop]"
                      :key="ks"
                    >
                      {{ items.knowledgeName }}
                    </el-button>
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span></template
                >
              </el-table-column></template
            >
          </el-table>
          <!-- <pagination
        :total="total"
        :pageSize="pageSize"
        :currentPage="currentPage"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      /> -->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsTable">取 消</el-button>
          <el-button type="primary" @click="submitTable">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="diansBoxStatus"
        width="960px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">分值设置</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closePagsInfos"
            />
          </div>
        </div>
        <div>
          <div class="dis_fos">
            <div>
              <div class="margin_bs">当前总分：{{ getAllpocis }}</div>
              <div class="margin_bs">
                及格分数：<el-input-number
                  style="margin: 0px 6px; width: 100px !important"
                  v-model="passScore"
                  controls-position="right"
                  :min="0"
                  size="mini"
                ></el-input-number>
              </div>
              <div class="margin_bs">
                答卷时长：
                <el-radio-group v-model="djTimeType">
                  <el-radio :label="0">无限时长</el-radio>
                  <el-radio :label="1">有限时长</el-radio>
                </el-radio-group>
                <el-input-number
                  v-if="djTimeType === 1"
                  style="margin: 0px 6px; width: 100px !important"
                  v-model="djTime"
                  controls-position="right"
                  :min="0"
                  size="mini"
                ></el-input-number>
              </div>
              <div class="margin_bs">
                答卷次数：
                <el-radio-group v-model="djNumType">
                  <el-radio :label="0">无限次</el-radio>
                  <el-radio :label="1">有限次</el-radio>
                </el-radio-group>
                <el-input-number
                  v-if="djNumType === 1"
                  style="margin: 0px 6px; width: 100px !important"
                  v-model="djNum"
                  controls-position="right"
                  :min="0"
                  size="mini"
                ></el-input-number>
              </div>
            </div>
            <div class="margin_bs">
              <el-button size="mini" @click="activeOpens"
                >按选中设置分数</el-button
              ><el-button size="mini" @click="activePicis"
                >按题型设置分数</el-button
              >
            </div>
          </div>
          <el-table
            ref="multipleTables"
            :data="boxtableDataPags"
            border
            @select-all="selectAllPags"
            @select="selectPags"
            :row-key="getRowKeysPags"
            :header-cell-style="{
              'background-color': '#eee',
              padding: '8px',
              color: '#333',
            }"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
              header-align="center"
              :reserve-selection="true"
            >
            </el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="80"
              align="center"
            ></el-table-column>
            <template v-for="(item, index) in tableSetTablesPags">
              <el-table-column
                v-if="item.scope !== 'inputs'"
                :width="item.width"
                :key="index"
                :label="item.label"
                :align="item.scope === 'inputS' ? 'left' : 'center'"
                :show-overflow-tooltip="true"
                header-align="center"
              >
                <template slot-scope="scope">
                  <span v-if="item.scope === 'Status'">
                    {{
                      scope.row[item.prop] === 1
                        ? "发布"
                        : scope.row[item.prop] === 0
                        ? "未发布"
                        : "未知"
                    }}
                  </span>
                  <span v-else-if="item.scope === 'topic'">{{
                    scope.row[item.prop] === 1
                      ? "单选题"
                      : scope.row[item.prop] === 2
                      ? "多选题"
                      : scope.row[item.prop] === 3
                      ? "判断题"
                      : scope.row[item.prop] === 4
                      ? "案例题"
                      : scope.row[item.prop] === 5
                      ? "简答题"
                      : "未知"
                  }}</span>
                  <div
                    class="editInfoSty"
                    v-else-if="item.scope === 'editInfoHTML'"
                  >
                    {{ getSimpleText(scope.row[item.prop]) }}
                  </div>
                  <div v-else-if="item.scope === 'inputS'">
                    <el-input-number
                      style="width: 100px !important"
                      v-model="scope.row[item.prop]"
                      controls-position="right"
                      :min="0"
                    ></el-input-number>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="右侧输入框为多选题漏选给分"
                      placement="top-start"
                    >
                      <i
                        v-if="scope.row['type'] === 2"
                        class="el-icon-question"
                      ></i>
                    </el-tooltip>

                    <el-input-number
                      v-if="scope.row['type'] === 2"
                      style="width: 100px !important"
                      v-model="scope.row['partScore']"
                      controls-position="right"
                      :min="0"
                    ></el-input-number>
                  </div>
                  <div v-else-if="item.scope === 'knowledge'">
                    <el-button
                      type="success"
                      size="small"
                      v-for="(items, ks) in scope.row[item.prop]"
                      :key="ks"
                    >
                      {{ items.knowledgeName }}
                    </el-button>
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span></template
                >
              </el-table-column></template
            >
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closePagsInfos">取 消</el-button>
          <el-button type="primary" @click="submitPagsInfos">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleActivePocis"
        width="420px"
        append-to-body
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">分值设置</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsActivePocis"
            />
          </div>
        </div>
        <div>
          一共选择了{{ activeListsPags.length }}道题目，一键设置
          <el-input-number
            style="width: 100px !important"
            v-model="Pocis"
            controls-position="right"
            :min="0"
          ></el-input-number>
          分
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsActivePocis">取 消</el-button>
          <el-button type="primary" @click="submitActivePocis">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleActivePLPoics"
        width="580px"
        append-to-body
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">分值设置</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsActivePLPoics"
            />
          </div>
        </div>
        <div>
          <div class="margin_bs" v-if="pocisArray.danx">
            单选题：共{{ pocisArray.danx }}道，共
            {{ pocisArray.danx * Pocis1 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis1"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
          <div class="margin_bs" v-if="pocisArray.duox">
            多选题：共{{ pocisArray.duox }}道，共
            {{ pocisArray.duox * Pocis2 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis2"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
            <el-tooltip
              class="item"
              effect="dark"
              content="右侧输入框为多选题漏选给分"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>

            <el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis2s"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number>
          </div>
          <div class="margin_bs" v-if="pocisArray.pand">
            判断题：共{{ pocisArray.pand }}道，共
            {{ pocisArray.pand * Pocis3 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis3"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
          <div class="margin_bs" v-if="pocisArray.anli">
            案例题：共{{ pocisArray.anli }}道，共
            {{ pocisArray.anli * Pocis4 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis4"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
          <div class="margin_bs" v-if="pocisArray.jiand">
            简答题：共{{ pocisArray.jiand }}道，共
            {{ pocisArray.jiand * Pocis5 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis5"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsActivePLPoics" size="small"
            >取 消</el-button
          >
          <el-button type="primary" size="small" @click="submitActivePLPoics"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import tableList from "@/components/tableList";
import busIns from "@/components/busIns";
import questionBank from "@/components/questionBank";
import { mapGetters } from "vuex";
export default {
  components: { tableList, busIns, questionBank },
  name: "AddPaper",
  data() {
    return {
      activeName: "first",
      data1: {},
      page: 1,
      listDataIns: {
        provinceId: "",
        cityId: "",
        publishStatus: 1,
      }, //   弹窗数据
      eduTypeOptions: [], //教育类型数据
      projectTypeOptions: [], //项目类型数据
      courTypeOptions: [], //业务层次数据
      newCourTypeOptions: [], //当前业务层次数据
      sujectOption: [], //科目数据
      newSujectOption: [], //当前科目数据数据
      eduType: "", //当前选中教育类型
      courType: "", //当前选中业务层次

      newSujectApis: {},
      sujectApis: "", //当前存在的科目 例如'19-2'
      optionsCity: [],
      //表单验证
      rules: {
        examPaperId: [
          {
            required: true,
            message: "请选择试卷类型",
            trigger: ["change", "blur"],
          },
        ],
        // prefixName: [
        //   { required: true, message: "请输入标题前缀", trigger: "blur" },
        // ],
        examName: [
          { required: true, message: "请输入试卷名称", trigger: "blur" },
        ],
        publishStatus: [
          { required: true, message: "请选择是否发布", trigger: "change" },
        ],
      },
      rulesTest: {
        // prefixName: [
        //   { required: true, message: "请输入标签前缀", trigger: "blur" },
        // ],
      },
      // --------------------------分割线-------------------------------------
      tableSet: [
        {
          label: "排序",
          prop: "sort",
          scope: "inputs",
          width: "100px",
          hidden: true,
        },
        {
          label: "题型",
          prop: "type",
          hidden: true,
          scope: "topic",
        },
        {
          label: "题目编码",
          prop: "code",
          hidden: true,
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          hidden: true,
        },
        {
          label: "知识点",
          prop: "knowledgeList",
          hidden: true,
          scope: "knowledge",
          width: "180px",
        },
        {
          label: "题目内容",
          prop: "content",
          hidden: true,
          scope: "editInfoHTML",
        },
      ],
      tableData: [],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "题目管理",
        index: 0,
        ch: "条",
        num: false,
        choice: false,
        addHide: false,
        backFatherBtn: {
          status: true,
          title: "分值设置",
        },
      },
      dialogVisible: false,
      innerVisiblePaperTopic: false,
      fullscreenChildPaperTopic: false,
      statusPop: 1,
      dingForm: {},
      questionId: "",
      queryData: {},
      allOptions: [], //知识点列表
      options: [], //当前知识点列表
      activeExam: [], // 已选知识点列表
      value: "",
      BusName: "", //弹窗新增知识点输入框
      BusNameList: [],
      listNums: {},
      typeBus: 1,
      indexZB: "",
      listData: {
        publishStatus: "",
        prefixName: "",
      },
      int: "",
      listitem: [
        {
          label: "标题前缀",
          prop: "prefixName",
        },
        {
          label: "知识点",
          scope: "bussing",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "radio",
        },
      ],
      radioActive: "",
      dialogVisibleActive: false,
      dialogVisibleTable: false,
      boxtableData: [],
      tableSetTables: [
        {
          label: "题目类型",
          prop: "type",
          hidden: true,
          scope: "topic",
        },
        {
          label: "题目编码",
          prop: "code",
          hidden: true,
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          hidden: true,
        },
        {
          label: "知识点",
          prop: "knowledgeList",
          hidden: true,
          scope: "knowledge",
          width: "180px",
        },
        {
          label: "题目标题",
          prop: "content",
          hidden: true,
          scope: "editInfoHTML",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          hidden: true,
          scope: "Status",
        },
      ],
      activeLists: [],
      disCheckList: [],
      sujectApisTable: [],
      newSujectApisTable: [],
      // -------------------------------------
      diansBoxStatus: false,
      boxtableDataPags: [],
      tableSetTablesPags: [
        {
          label: "排序",
          prop: "sort",
          hidden: true,
          width: "80px",
        },
        {
          label: "题型",
          prop: "type",
          hidden: true,
          scope: "topic",
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          hidden: true,
        },
        {
          label: "题目标题",
          prop: "content",
          hidden: true,
          scope: "editInfoHTML",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          hidden: true,
          scope: "Status",
        },
        {
          label: "分值",
          prop: "score",
          hidden: true,
          scope: "inputS",
          width: "250px",
        },
      ],
      activeListsPags: [],
      dialogVisibleActivePocis: false,
      Pocis: "",
      dialogVisibleActivePLPoics: false,
      Pocis1: "",
      Pocis2: "",
      Pocis2s: "",
      Pocis3: "",
      Pocis4: "",
      Pocis5: "",
      pocisArray: {
        danx: 0,
        duox: 0,
        pand: 0,
        anli: 0,
        jiand: 0,
      },
      passScore: "", //及格分数
      djTimeType: 0, //0无限1有限
      djTime: 0, //答卷时长
      djNumType: 0, //0无限1有限
      djNum: 0, //答卷次数
    };
  },
  computed: {
    ...mapGetters(["paperexam", "areas", "cityList"]),
    getAllpocis() {
      var num = 0;
      this.boxtableDataPags.map((item) => {
        num += item.score;
      });
      return num;
    },
  },
  mounted() {
    console.log(this.cityList);
    this.getDict();
    this.getFns();
  },
  watch: {
    // "listDataIns.provinceId": {
    //   handler(newVal, oldVal) {
    //     this.changeCity(newVal);
    //   },
    //   // 立即处理 进入页面就触发
    //   immediate: true,
    // },
    djTime: {
      handler(newVal, oldVal) {
        if (newVal === 0) {
          this.djTimeType = 0;
        } else {
          this.djTimeType = 1;
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
    djNum: {
      handler(newVal, oldVal) {
        if (newVal === 0) {
          this.djNumType = 0;
        } else {
          this.djNumType = 1;
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
    tableData: {
      handler(newVal, oldVal) {
        this.navText.index = newVal.length;
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
  },
  methods: {
    getMessage() {
      if (!this.courType) {
        this.$message.warning("请先选择业务层级");
      } else if (!this.newSujectOption.length) {
        this.$message.warning("该业务层级暂无关联科目");
      }
    },
    getSimpleText(html) {
      var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      var msg = html.replace(re1, ""); //执行替换成空字符
      return msg;
    },
    changeCity(newVal) {
      this.optionsCity = this.cityList.filter((item) => {
        return item.parentId === newVal;
      });
      this.listDataIns.cityId = "";
    },
    clearImgs() {
      this.listDataIns.coverUrl = "";
    },
    changeTypes() {
      var self = this;
      if (!this.sujectApis) {
        self.newSujectApis = {};
        return;
      }
      this.courTypeOptions.map((items) => {
        if (items.id === this.sujectApis.split("-").map(Number)[0]) {
          var obj = {
            type: 2,
            educationTypeId: items.educationId,
            educationName: items.educationName,
            projectId: items.projectId,
            projectName: items.projectName,
            businessId: items.id,
            businessName: items.businessName,
          };
          self.sujectOption.map((i) => {
            if (
              i.id === self.sujectApis.split("-").map(Number)[1] &&
              i.courseArrays.indexOf(items.projectId) !== -1
            ) {
              obj.subjectName = i.subjectName;
              obj.subjectId = i.id;
            }
          });
          self.newSujectApis = obj;
        }
      });
    },
    submitSujectArray() {
      this.changeTypes();
      this.$refs.popovers.doClose();
    },
    showHandle() {
      this.sujectApis = "";
      this.newSujectOption.map((item) => {
        item.newId = this.courType + "-" + item.id;
        if (item.newId === this.sujectApis) {
          console.log("成功");
        }
      });
      this.sujectApis =
        this.newSujectApis.businessId + "-" + this.newSujectApis.subjectId;
    },
    hideHandle() {},
    getDict() {
      this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
        this.eduTypeOptions = res.rows;
      });
      this.$api.inquireCourseProjectType({ status: 1 }).then((res) => {
        this.projectTypeOptions = res.rows;
      });
      this.$api.inquirebusinessList({ status: 1 }).then((res) => {
        this.courTypeOptions = res.rows;
        this.newCourTypeOptions = res.rows;
      });
      this.$api.inquireCourseSubject({ status: 1 }).then((res) => {
        res.rows.map((item, index) => {
          var array = [];
          item.courseProjectTypes.map((items, indexs) => {
            array.push(items.id);
          });
          item.courseArrays = array;
        });
        this.sujectOption = res.rows;
      });
    },
    changeEduType() {
      if (!(this.courType === undefined || this.courType === "")) {
        this.courType = "";
      }
      var arrays = [];
      this.courTypeOptions.map((item) => {
        if (item.educationId === this.eduType) {
          arrays.push(item);
        }
      });
      this.newCourTypeOptions = arrays;
    },
    changecourseType() {
      this.newCourTypeOptions.map((item, index) => {
        if (item.id === this.courType) {
          this.eduType = item.educationId;
          var array = [];
          this.sujectOption.map((items, indexs) => {
            if (items.courseArrays.indexOf(item.projectId) !== -1) {
              array.push(items);
            }
          });
          this.newSujectOption = array;
        }
      });
      var arrays = [];
      this.courTypeOptions.map((item) => {
        if (item.educationId === this.eduType) {
          arrays.push(item);
        }
      });
      this.newCourTypeOptions = arrays;
      this.$refs.popovers.doClose();
    },
    submitIns(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (JSON.stringify(this.newSujectApis) === "{}") {
            this.$message.error("请选择适用业务层级");
            return;
          }
          this.rulesTableSumbit();
        } else {
          return false;
        }
      });
    },
    async rulesTableSumbit() {
      var data1 = {
        examPaperId: this.listDataIns.examPaperId,
        examName: this.listDataIns.examName,
        publishStatus: this.listDataIns.publishStatus,
        prefixName: this.listDataIns.prefixName,
        businessList: [this.newSujectApis],
        provinceId: this.listDataIns.provinceId,
        cityId: this.listDataIns.cityId,
        year: this.listDataIns.year,
        status: 1,
      };
      this.$api.addbankexam(data1).then((res) => {
        this.$message.success("新增成功");
        this.$store.dispatch("tagsView/exitView", this.$route).then(() => {
          this.$router.push({
            path: "topicAddPaper",
            query: {
              id: res.data.examId,
              code: res.data.code,
            },
          });
        });
      });
    },
    backPage() {
      this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
        this.$router.push({
          path: "testPaperManagement",
        });
      });
    },
    closeType() {
      this.sujectApis = "";
      this.changeTypes();
    },
    // --------------------------分割线---------------------------
    editInfo(v) {
      this.addClick(v, 0);
    },
    search(v) {
      this.loading = true;
      var data = {
        status: 1,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
      };
      this.$api
        .inquirebankquestionList(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search();
    },
    del(v, index) {
      this.$alert(
        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
        "提示",
        {
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openActiveBox() {
      this.radioActive = "";
      this.dialogVisibleActive = true;
    },
    submitActive() {
      if (!this.radioActive) {
        this.$message.warning("请选择操作类型");
        return;
      }
      this.dialogVisibleActive = false;
      if (this.radioActive === 1) {
        this.addClick();
      } else {
        var self = this;
        this.$api
          .inquirebankquestionList({
            status: 1,
            pageNum: 1,
            pageSize: 10,
          })
          .then((res) => {
            var aList = [];
            this.tableData.map((item) => {
              if (item.questionId) {
                aList.push(item.questionId);
              }
            });
            this.disCheckList = aList;
            this.boxtableData = res.rows;
            this.dialogVisibleTable = true;
            this.$nextTick(function () {
              self.$refs.multipleTable.clearSelection();
            });
          });
      }
    },
    closeBoxsActive() {
      this.dialogVisibleActive = false;
    },
    submitTable() {
      if (this.activeLists.length === 0) {
        this.dialogVisibleTable = false;
        return;
      }
      this.activeLists.map((item) => {
        item.optionsList = JSON.parse(item.jsonStr);
        item.sort = 0;
        (item.partScore = 0), (item.score = "");
      });
      this.tableData = this.tableData.concat(this.activeLists);
      this.dialogVisibleTable = false;
      this.$message.success("添加成功");
      this.activeLists = [];
    },
    closeBoxsTable() {
      this.dialogVisibleTable = false;
    },
    selectAll(value) {
      this.activeLists = value;
    },
    select(value) {
      this.activeLists = value;
    },
    checkboxT(row, index) {
      if (this.disCheckList.indexOf(row.questionId) !== -1) {
        return false;
      } else {
        return true;
      }
    },
    getRowKeys(row) {
      return row.questionId;
    },
    addClick(v, int, indexZB) {
      var self = this;
      if (v === undefined) {
        self.statusPop = 1;
        self.innerVisiblePaperTopic = true;
        self.$nextTick(() => {
          (self.listNums = {
            type: 1,
            optionsList: [],
            answerQuestionList: [],
            content: "",
            status: "",
            analysisContent: "",
            answerQuestion: "",
          }),
            (self.$refs.sujects.eduType = "");
          self.$refs.sujects.courType = "";
          self.$refs.sujects.sujectApis = [];
          self.$refs.sujects.newSujectApis = [];
          self.listData = {
            publishStatus: 1,
            prefixName: "",
          };
          self.activeExam = [];
        });
      } else {
        self.innerVisiblePaperTopic = true;
        self.statusPop = int;
        var vres = JSON.parse(JSON.stringify(v));
        self.indexZB = indexZB;
        if (vres.knowledgeIds) {
          var a = [];
          vres.knowledgeIds
            .split(",")
            .map(Number)
            .map((items) => {
              self.allOptions.map((item) => {
                if (item.knowledgeId === items) {
                  a.push(item);
                }
              });
            });
          self.activeExam = a;
        }
        if (vres.type === 2) {
          if (vres.answerQuestion) {
            vres.answerQuestionList = vres.answerQuestion
              .split(",")
              .map(Number);
          }
        } else if (vres.type === 4) {
          vres.optionsList.map((item) => {
            if (item.type === 2) {
              if (item.answerQuestion) {
                item.answerQuestionList = item.answerQuestion
                  .split(",")
                  .map(Number);
              }
            } else {
              item.answerQuestionList = [];
            }
          });
        } else {
          vres.answerQuestionList = [];
        }
        self.listData.prefixName = vres.prefixName;
        self.listData.publishStatus = vres.publishStatus;
        self.listNums = vres;
        var arrays = [];
        vres.businessList.map((item) => {
          arrays.push(item.businessId + "-" + item.subjectId);
        });
        self.sujectApisTable = arrays;
        self.newSujectApisTable = vres.businessList;
      }
    },
    //-----------------------------------------------
    comLs(item) {
      var os = this.activeExam.some((items) => {
        return items.knowledgeId === item.knowledgeId;
      });
      if (os) {
        return true;
      } else {
        return false;
      }
    },
    getFns() {
      return new Promise((resolve, reject) => {
        this.$api.inquireKnowledgeExamListS({ status: 1 }).then((res) => {
          this.allOptions = res.rows;
          resolve();
        });
      });
    },
    addBusName() {
      if (this.BusName.trim()) {
        var as = this.allOptions.some((item) => {
          return item.knowledgeName == this.BusName;
        });
        if (as) {
          this.$message.warning("当前知识点名称已存在");
          return;
        }
        this.BusNameList.push(this.BusName);
        this.BusName = "";
      } else {
        this.$message({
          message: "请输入知识点内容",
          type: "warning",
          duration: 1200,
        });
        this.BusName = "";
      }
    },
    submit() {
      var data = {
        examKnowledgeBusinessAddBoList: this.$refs.sujects.newSujectApis,
        knowledgeName: this.BusNameList,
        status: 1,
      };
      this.$api.addKnowledgeExam(data).then(async (res) => {
        this.$message.success("添加成功");
        this.dialogVisible = false;
        await this.getFns();
        this.changeAmdis();
      });
    },
    closeBoxs() {
      this.dialogVisible = false;
    },
    addExam() {
      if (!this.$refs.sujects.courType) {
        this.$message.warning("请选择业务层级");
        return;
      }
      this.BusNameList = [];
      this.BusName = "";
      this.dialogVisible = true;
    },
    clearBus() {
      this.BusNameList.splice(index, 1);
    },
    //子组件回调 业务层及变换-知识点重新筛选
    changeAmdis() {
      var int = this.$refs.sujects.courType;
      var ao = [];
      this.allOptions.map((item, index) => {
        let acts = item.courseBusinessList.every((items) => {
          return items.businessId === int;
        });
        if (acts) {
          ao.push(item);
        }
      });
      this.options = ao;
    },
    clearBusName(index) {
      this.activeExam.splice(index, 1);
    },
    changeKnow(item) {
      this.allOptions.map((items) => {
        if (items.knowledgeId === item) {
          this.activeExam.push(items);
        }
      });
      this.value = "";
    },
    addListNums() {
      this.listNums.push({
        type: 1,
        optionsList: [],
        answerQuestionList: [],
        content: "",
        status: "",
        analysisContent: "",
        answerQuestion: "",
      });
    },
    closeBefore() {
      this.innerVisiblePaperTopic = false;
    },
    async submitForm(formName, int) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var self = this;
          if (!this.$refs.sujects.newSujectApis.length) {
            this.$message.error("请选择科目");
            return;
          }
          var data = this.$refs.child.getInfosPage();
          if (!data.content || data.content == "<p><br></p>") {
            self.$message.error("请填写题目内容");
            return;
          }
          if (data.type != 3 && data.type != 5 && !data.optionsList.length) {
            self.$message.error("请添加选项");
            return;
          }
          if (data.type != 3 && data.type != 4 && data.optionsList.length) {
            var ast = data.optionsList.some((item) => {
              return !item.content && !item.imgUrl;
            });
            if (ast) {
              self.$message.error("请完善选项内容");
              return;
            }
          }
          if (data.type != 5 && data.type != 4) {
            if (data.type === 2 && !data.answerQuestionList.length) {
              self.$message.error("请选择正确答案");
              return;
            }
            if (data.type !== 2 && !data.answerQuestion) {
              self.$message.error("请选择正确答案");
              return;
            }
          }
          if (data.type == 4 && data.optionsList.length) {
            for (let i = 0; i < data.optionsList.length; i++) {
              if (
                !data.optionsList[i].content ||
                data.optionsList[i].content == "<p><br></p>"
              ) {
                self.$message.error("请填写题目内容");
                return;
              }
              if (
                data.optionsList[i].type != 3 &&
                data.optionsList[i].type != 5 &&
                !data.optionsList[i].optionsList.length
              ) {
                self.$message.error("请添加选项");
                return;
              }
              if (
                data.optionsList[i].type != 3 &&
                data.optionsList[i].optionsList.length
              ) {
                var ast = data.optionsList[i].optionsList.some((item) => {
                  return !item.content && !item.imgUrl;
                });
                if (ast) {
                  self.$message.error("请完善选项内容");
                  return;
                }
              }
              if (data.optionsList[i].type != 5) {
                if (
                  data.optionsList[i].type === 2 &&
                  !data.optionsList[i].answerQuestionList.length
                ) {
                  self.$message.error("请选择正确答案");
                  return;
                }
                if (
                  data.optionsList[i].type !== 2 &&
                  !data.optionsList[i].answerQuestion
                ) {
                  self.$message.error("请选择正确答案");
                  return;
                }
              }
            }
          }
          var numList = [];
          this.activeExam.map((item) => {
            numList.push(item.knowledgeId);
          });
          data.knowledgeList = this.activeExam;
          data.prefixName = this.listData.prefixName;
          data.knowledgeIds = numList.toString();
          data.publishStatus = this.listData.publishStatus;
          data.businessList = this.$refs.sujects.newSujectApis;
          if (data.type === 2) {
            if (data.answerQuestionList.length) {
              data.answerQuestion = data.answerQuestionList.toString();
            }
          }
          if (data.type === 4) {
            data.optionsList.map((item) => {
              if (item.type === 2) {
                if (item.answerQuestionList.length) {
                  item.answerQuestion = item.answerQuestionList.toString();
                }
              }
            });
          }
          if (this.statusPop === 1) {
            data.sort = 0;
            data.partScore = 0;
            data.score = "";
            this.tableData.push(data);
            // this.$api.addbankquestion(data).then((res) => {
            self.$message.success("添加成功");
            self.innerVisiblePaperTopic = false;
            // self.search();
            // });
          }
          if (this.statusPop === 0) {
            this.tableData.splice(this.indexZB, 1, data);
            // this.$api.editbankquestion(data).then((res) => {
            self.$message.success("修改成功");
            self.innerVisiblePaperTopic = false;
            // self.search();
            // });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    uploadApis(item) {
      return new Promise((resolve, reject) => {
        this.$api.editbankquestion(item).then((res) => {
          resolve();
        });
      });
    },
    addbankquestion(item) {
      return new Promise((resolve, reject) => {
        this.$api.addbankquestion(item).then((res) => {
          resolve(res.data);
        });
      });
    },
    async submitTableAllInfos() {
      var self = this;
      var arrs = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (self.tableData[i].questionId) {
          await self.uploadApis(self.tableData[i]);
        } else {
          var ids = await self.addbankquestion(self.tableData[i]);
          self.tableData[i].questionId = ids;
        }
        arrs.push({
          questionId: self.tableData[i].questionId,
          sort: self.tableData[i].sort,
          score: self.tableData[i].score,
          partScore: self.tableData[i].partScore,
        });
      }
      (this.data1.questionList = arrs), (this.data1.status = 1);
      this.data1.passScore = this.passScore;
      if (this.djTimeType === 0) {
        this.data1.answerTime = 0;
      } else {
        this.data1.answerTime = this.djTime;
      }
      if (this.djNumType === 0) {
        this.data1.answerNum = 0;
      } else {
        this.data1.answerNum = this.djNum;
      }
      this.$api.addbankexam(this.data1).then((res) => {
        this.$message.success("新增成功");
        setTimeout(() => {
          this.$router.push({
            path: "testPaperManagement",
          });
        }, 500);
      });
    },
    emitData() {
      if (!this.tableData.length) {
        this.$message.warning("请添加题目");
        return;
      }
      this.boxtableDataPags = JSON.parse(JSON.stringify(this.tableData));
      this.diansBoxStatus = true;
    },
    closePagsInfos() {
      this.diansBoxStatus = false;
    },
    submitPagsInfos() {
      this.tableData = this.boxtableDataPags;
      this.diansBoxStatus = false;
    },
    selectAllPags(value) {
      this.activeListsPags = value;
    },
    selectPags(value) {
      this.activeListsPags = value;
    },
    getRowKeysPags(row) {
      return row.questionId;
    },
    activeOpens() {
      if (!this.activeListsPags.length) {
        this.$message.warning("请选择需要设置分值的题目");
        return;
      }
      this.Pocis = "";
      this.dialogVisibleActivePocis = true;
    },
    closeBoxsActivePocis() {
      this.dialogVisibleActivePocis = false;
    },
    submitActivePocis() {
      this.activeListsPags.map((item) => {
        item.score = this.Pocis;
      });
      this.dialogVisibleActivePocis = false;
      this.activeListsPags = [];
      this.$refs.multipleTables.clearSelection();
    },
    activePicis() {
      if (!this.activeListsPags.length) {
        this.$message.warning("请选择需要设置分值的题目");
        return;
      }
      this.pocisArray = {
        danx: 0,
        duox: 0,
        pand: 0,
        anli: 0,
        jiand: 0,
      };
      for (let i = 0; i < this.activeListsPags.length; i++) {
        if (this.activeListsPags[i].type === 1) {
          this.pocisArray.danx++;
        }
        if (this.activeListsPags[i].type === 2) {
          this.pocisArray.duox++;
        }
        if (this.activeListsPags[i].type === 3) {
          this.pocisArray.pand++;
        }
        if (this.activeListsPags[i].type === 4) {
          this.pocisArray.anli++;
        }
        if (this.activeListsPags[i].type === 5) {
          this.pocisArray.jiand++;
        }
      }
      this.Pocis1 = "";
      this.Pocis2 = "";
      this.Pocis2s = "";
      this.Pocis3 = "";
      this.Pocis4 = "";
      this.Pocis5 = "";
      this.dialogVisibleActivePLPoics = true;
    },
    closeBoxsActivePLPoics() {
      this.dialogVisibleActivePLPoics = false;
    },
    submitActivePLPoics() {
      this.activeListsPags.map((item) => {
        if (item.type === 1) {
          item.score = this.Pocis1;
        }
        if (item.type === 2) {
          item.score = this.Pocis2;
          item.partScore = this.Pocis2s;
        }
        if (item.type === 3) {
          item.score = this.Pocis3;
        }
        if (item.type === 4) {
          item.score = this.Pocis4;
        }
        if (item.type === 5) {
          item.score = this.Pocis5;
        }
      });
      this.dialogVisibleActivePLPoics = false;
      this.activeListsPags = [];
      this.$refs.multipleTables.clearSelection();
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flexbox {
  display: flex;
  flex-direction: column;
}
.boxWidth {
  width: 700px;
}
.numInputs {
  width: 150px;
}
.checkboxSty {
  max-height: 210px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.listBoxStys {
  flex-shrink: 0;
  padding: 0px 10px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 6px;
}
.closeIcons {
  color: red;
  cursor: pointer;
  margin-left: 6px;
}
.ach {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.clh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.imgBoxins {
  width: 375px;
  height: 220px;
  text-align: center;
  img {
    height: 100%;
  }
}
.iconStsz {
  font-size: 40px;
  color: #67c23a;
  cursor: pointer;
}
.BusBoxs {
  min-height: 100px;
  border: 1px solid #a4a4a4;
  margin-bottom: 10px;
  border-radius: 8px;
  max-height: 280px;
  padding: 10px;
  overflow-y: auto;
  .fot_Le {
    border-radius: 12px;
    border: 1px solid yellowgreen;
    padding: 0px 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
    margin-right: 6px;
    margin-bottom: 6px;
    .icon_clear {
      margin-left: 2px;
      font-size: 15px;
      color: #f56c6c;
      cursor: pointer;
    }
  }
}
.marg_play {
  display: flex;
  margin-bottom: 15px;
  .spans {
    text-align: right;
    width: 80px;
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.centerStys {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}
.dis_fos {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}
.margin_bs {
  margin-bottom: 6px;
}
</style>