saas_entrepot_admin/src/views/resource/bankManagement/topicManagement/index.vue

<template>
  <div id="topicManagement">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <table-list
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      @addClick="addClick"
      :loading="loading"
      @editInfo="editInfo"
      ref="tableList"
      rowKey="questionId"
    >
      <template slot="customize">
        <el-button size="medium" @click="dialogDRword = true" type="success"
          >Word批量导入</el-button
        ><el-button size="medium" @click="dialogDRexcel = true" type="success"
          >Excel批量导入</el-button
        >
        <el-button size="medium" @click="batchDel" type="warning"
          >批量删除</el-button
        >
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="addClick(props.scope.row, 0)"
          >修改</el-button
        >
        <el-button type="text" @click="del(props.scope.row)">删除</el-button>
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!-- ------------------- -->
    <el-dialog
      @closed="clearData"
      :visible.sync="dialogDRword"
      :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="dialogDRword = false"
          />
        </div>
      </div>
      <word-pop @search="search" ref="wordpop" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDRword = false">取 消</el-button>
      </span>
    </el-dialog>
    <batch-import-dialoga
      :dialogVisible.sync="dialogDRexcel"
      temUrl="/oss/images/file/20220307/1646623385198.xlsx"
      apiKey="importDatabankquestion"
      :isCheck="false"
      :isShowTip="false"
      :isSuccessBack="true"
      @success="success"
    ></batch-import-dialoga>
    <el-dialog
      @closed="loadingClose"
      width="1180px"
      :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>
      <div v-if="statusHide">
        <busIns
          @amdis="changeAmdis"
          ref="sujects"
          :sujectApisTable="sujectApis"
          :newSujectApisTable="newSujectApis"
          :typeBus="typeBus"
        />
        <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
          v-for="(item, index) in listNums"
          :key="index"
          :dingFormInfo="item"
          :nums="index"
          ref="child"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeBefore">关 闭</el-button>
        <el-button
          @click="submitForm('listData')"
          :loading="disabledBtn"
          v-if="statusPop === 1 || statusPop === 0"
          >完成</el-button
        >
        <el-button
          type="primary"
          v-if="statusPop === 1"
          :loading="disabledBtn"
          @click="submitForm('listData', 1)"
          >完成，并继续添加</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>
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
import busIns from "@/components/busIns";
import questionBank from "@/components/questionBank";
import batchImportDialoga from "@/components/Comon/batchImportDialog.vue";
import wordPop from "./wordPop.vue";
import { questionBatchDel } from "@/api/resource/volumeManagement";
export default {
  components: {
    questionBank,
    busIns,
    tableList,
    pagination,
    searchBoxNew,
    wordPop,
    batchImportDialoga,
  },
  name: "TopicManagement",
  data() {
    return {
      dialogDRword: false,
      dialogDRexcel: false,
      disabledBtn: false,
      statusHide: false,
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "题目管理",
        index: 0,
        ch: "条",
        num: false,
        border: true,
        choice: true,
        addHide: false,
        openCheckMore: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      //搜索
      formList: [
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "subjectId",
          placeholder: "科目",
          scope: "sujectType",
          edu: "educationTypeId",
        },
        {
          prop: "prefixName",
          placeholder: "请输入标题前缀",
        },
        {
          prop: "type",
          placeholder: "题目类型",
          scope: "selectBank",
        },
        {
          prop: "publishStatus",
          placeholder: "发布状态",
          scope: "select",
          options: [
            {
              label: "已发布",
              value: 1,
            },
            {
              label: "未发布",
              value: 0,
            },
          ],
        },
        {
          prop: "key",
          placeholder: "题目编码/标题前缀/题目标题",
        },
      ],
      formData: {
        status: "0,1",
        pageSize: 10,
        pageNum: 1,
      },
      // 表单
      tableSet: [
        {
          label: "题目编码",
          prop: "code",
          hidden: false,
        },
        {
          label: "题目类型",
          prop: "type",
          hidden: true,
          scope: "topic",
          width: "140px",
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          hidden: false,
        },
        {
          label: "题目详细",
          prop: "content",
          hidden: true,
          scope: "htmlInfo",
          width: "600px",
          dontCenter: true,
        },
        {
          label: "知识点",
          prop: "knowledgeList",
          hidden: false,
          scope: "knowledge",
          showTooltip: true,
        },
        {
          label: "适用业务层级",
          prop: "businessList",
          hidden: false,
          scope: "mapTypesMores",
        },
        {
          label: "最后编辑时间",
          prop: "updateTime",
          scope: "aTimeList",
          hidden: false,
        },
        {
          label: "创建时间",
          prop: "createTime",
          scope: "aTimeList",
          hidden: false,
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          hidden: true,
          scope: "isOptions",
          options: [
            {
              label: "已发布",
              value: 1,
            },
            {
              label: "未发布",
              value: 0,
            },
          ],
        },
        {
          label: "关联试卷",
          prop: "examList",
          prop1: "examName",
          hidden: false,
          scope: "aboutChapter",
          int: 5,
        },
      ],
      sujectApis: [],
      newSujectApis: [],
      tableData: [], //表单数据
      total: 0, //一共多少条
      //-----------------------------------------------
      dialogVisible: false,
      innerVisiblePaperTopic: false,
      fullscreenChildPaperTopic: false,
      statusPop: 1,
      dingForm: {},
      questionId: "",
      queryData: {},
      allOptions: [], //知识点列表
      options: [], //当前知识点列表
      activeExam: [], // 已选知识点列表
      value: "",
      BusName: "", //弹窗新增知识点输入框
      BusNameList: [],
      listNums: [],
      typeBus: 1,
      listData: {
        publishStatus: "",
        prefixName: "",
      },
      int: "",
      listitem: [
        {
          label: "标题前缀",
          prop: "prefixName",
        },
        {
          label: "知识点",
          scope: "bussing",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "radio",
        },
      ],
      rulesTest: {
        publishStatus: [
          { required: true, message: "请选择发布状态", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getFns();
    this.search();
  },
  activated() {
    this.getFns();
    this.search();
  },
  methods: {
    batchDel() {
      if (!this.$refs.tableList.allCheckData.length) {
        this.$message.warning("请勾选需要删除的题目");
        return;
      }
      this.$confirm(
        `此操作将永久删除所勾选的${this.$refs.tableList.allCheckData.length}条题目, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          const ids = this.$refs.tableList.allCheckData.map((item) => {
            return item.questionId;
          });
          questionBatchDel({
            status: -1,
            ids,
          }).then((res) => {
            this.$message.success("批量删除成功");
            this.$refs.tableList.clearMoreActive();
            this.search(1);
          });
        })
        .catch(() => {});
      // console.log(this.$refs.tableList.)
    },
    clearData() {
      this.$refs.wordpop.formData = {
        eduId: "",
        businessId: "",
        subjectId: "",
        projectId: "",
      };
    },
    loadingClose() {
      this.disabledBtn = false;
    },
    editInfo(v) {
      this.addClick(v, 0);
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          status: "0,1",
          pageSize: 10,
          pageNum: 1,
        };
        this.$refs.tableList.clearMoreActive();
      }
      this.$api
        .inquirebankquestionList(this.formData)
        .then((res) => {
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].knowledgeList) {
              for (let j = 0; j < res.rows[i].knowledgeList.length; j++) {
                res.rows[i].knowledgeList[j].knowledgeName =
                  res.rows[i].knowledgeList[j].knowledgeName + " ";
              }
            }
          }
          // res.rows.forEach(item => {
          //   item.knowledgeList.forEach(items => {
          //     items.knowledgeName = items.knowledgeName + ' '
          //   })
          // })
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    success({ msg }) {
      if (msg == "操作成功") {
        this.$message.success("导入成功");
      } else {
        let url = baseUrls.baseURL + "common/download?fileName=" + msg;
        let link = document.createElement("a");
        let fileName = "导入模板" + ".xlsx";
        document.body.appendChild(link);
        link.href = url;
        link.dowmload = fileName;
        link.click();
        link.remove();
        this.$message.warning("导入有误，请打开文档查看错误原因");
      }
      this.search(2);
    },
    init() {
      this.search(2);
    },
    del(v) {
      this.$alert(
        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
        "提示",
        {
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          var data = {
            questionId: v.questionId,
            status: -1,
          };
          this.$api.editbankquestion(data).then((res) => {
            this.$message.success("删除成功");
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addClick(v, int) {
      this.disabledBtn = false;
      var self = this;
      self.listNums = [];
      if (v === undefined) {
        self.statusPop = 1;
        self.innerVisiblePaperTopic = true;
        self.statusHide = true;
        self.$nextTick(() => {
          var datas = {
            type: 1,
            optionsList: [],
            answerQuestionList: [],
            content: "",
            status: "",
            analysisContent: "",
            answerQuestion: "",
          };
          for (let i = 0; i < 4; i++) {
            datas.optionsList.push({
              content: "",
              imgUrl: null,
              optionsId: i + 1,
            });
          }
          self.listNums = [datas];
          self.$refs.sujects.eduType = "";
          self.$refs.sujects.courType = "";
          self.options = [];
          self.sujectApis = [];
          self.newSujectApis = [];
          self.listData = {
            publishStatus: 1,
          };
          self.activeExam = [];
        });
      } else {
        self.statusPop = int;
        self.$api.obtainbankquestion(v.questionId).then((res) => {
          self.questionId = v.questionId;
          res.data.optionsList = JSON.parse(res.data.jsonStr);
          if (res.data.knowledgeIds) {
            var a = [];
            res.data.knowledgeIds
              .split(",")
              .map(Number)
              .map((items) => {
                self.allOptions.map((item) => {
                  if (item.knowledgeId === items) {
                    a.push(item);
                  }
                });
              });
            self.activeExam = a;
          } else {
            self.activeExam = [];
          }
          if (res.data.type === 2) {
            if (res.data.answerQuestion) {
              res.data.answerQuestionList = res.data.answerQuestion
                .split(",")
                .map(Number);
            }
          } else if (res.data.type === 4) {
            res.data.optionsList.map((item) => {
              if (item.type === 2) {
                if (item.answerQuestion) {
                  item.answerQuestionList = item.answerQuestion
                    .split(",")
                    .map(Number);
                }
              } else {
                item.answerQuestionList = [];
              }
            });
          } else {
            res.data.answerQuestionList = [];
          }
          self.$refs.sujects.eduType = "";
          self.$refs.sujects.courType = "";
          self.listData.prefixName = res.data.prefixName;
          self.listData.publishStatus = res.data.publishStatus;
          self.listNums.push(res.data);
        });
        this.$api
          .inquirebankquestionListbusiness({ majorId: v.questionId, type: 1 })
          .then((res) => {
            var arrays = [];
            res.rows.map((item) => {
              arrays.push(item.businessId + "-" + item.subjectId);
            });
            self.sujectApis = arrays;
            self.newSujectApis = res.rows;
          });
        this.innerVisiblePaperTopic = true;
        this.statusHide = true;
      }
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      document.documentElement.scrollTop = 0;
      this.formData.pageNum = v;
      this.search();
    },
    //-----------------------------------------------
    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.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 = [];
      for (let i = 0; i < this.allOptions.length; i++) {
        let acts = this.allOptions[i].courseBusinessList.some((items) => {
          return items.businessId === int;
        });
        if (acts) {
          ao.push(this.allOptions[i]);
        }
      }
      // this.allOptions.map((item, index) => {

      // });
      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;
      this.statusHide = 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[0].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;
                }
              }
            }
          }
          this.disabledBtn = true;
          var numList = [];
          this.activeExam.map((item) => {
            numList.push(item.knowledgeId);
          });
          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.status = 1;
            this.$api
              .addbankquestion(data)
              .then((res) => {
                self.$methodsTools.cacheBusinessList(
                  self.$refs.sujects.newSujectApis
                );
                self.$refs.sujects.UPDates();
                self.$message.success("添加成功");
                self.innerVisiblePaperTopic = false;
                self.statusHide = true;
                self.search();
                if (int === 1) {
                  self.addClick();
                }
              })
              .catch(() => {
                this.disabledBtn = false;
              });
          }
          if (this.statusPop === 0) {
            data.questionId = self.questionId;
            this.$api
              .editbankquestion(data)
              .then((res) => {
                self.$message.success("修改成功");
                self.innerVisiblePaperTopic = false;
                self.statusHide = true;
                self.search();
              })
              .catch(() => {
                this.disabledBtn = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //保存且添加下一题
    async submitAndNext() {
      var data = JSON.parse(JSON.stringify(this.dingForm));
      data.parentType = Number(this.queryData.typeId);
      data.examId = Number(this.queryData.examId) || 0;
      data.bankSectionId = Number(this.queryData.bankSectionId) || 0;
      this.$message.success("添加成功");
      this.innerVisiblePaperTopic = false;
      this.statusHide = true;
      // this.search();
      this.dingForm = {
        jsonStr: [],
      };
    },
  },
};
</script>

<style lang="less" scoped>
.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;
    }
  }
}
</style>