front/src/views/questioncenter/generating.vue

<template>
  <div class="generating_container">
    <el-card>
      <div class="header_top">
        <div :class="tabActive == 0 ? 'active' : ''" @click="switchTab(0)">
          手动组卷
        </div>
        <div :class="tabActive == 1 ? 'active' : ''" @click="switchTab(1)">
          智能组卷
        </div>
        <div :class="tabActive == 2 ? 'active' : ''" @click="switchTab(2)">
          组卷记录
        </div>
      </div>
      <div class="radio_contianer">
        <div v-if="tabActive != 2">
          <span>选题</span>
          <el-radio-group v-model="selectQueId" size="mini" @change="toggleSelect">
            <el-radio-button :label="index" v-for="(item, index) in selectQue" :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </div>
        <div v-show="tabActive == 2">
          <span>科目</span>
          <el-radio-group v-model="zujuanSubjectId" size="mini" @change="toggleZujuanSubject">
            <el-radio-button :label="null"> 所有 </el-radio-button>
            <el-radio-button :label="item.subjectid" v-for="(item, index) in subjectList" :key="index">
              {{ item.subjectname }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <div v-show="tabActive != 2">
          <span>科目</span>
          <el-radio-group v-model="form.subjectId" size="mini" @change="toggleSub">
            <el-radio-button :label="item.subjectid" v-for="(item, index) in subjectList" :key="index">
              {{ item.subjectname }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <div v-show="selectQueId == 0 && tabActive != 2">
          <span>版本</span>
          <el-radio-group v-model="form.editionId" size="mini" @change="toggleEdi">>
            <el-radio-button :label="key" v-for="(value, key) in editionList" :key="key">
              {{ value }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <div v-show="selectQueId == 0 && tabActive != 2">
          <span>学册</span>
          <el-radio-group v-model="form.gradeId" size="mini" @change="toggleGrade">>
            <el-radio-button :label="item.gradeid" v-for="item in gradeList" :key="item.gradeid">
              {{ item.gradename }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <div v-show="tabActive == 0 && tabActive != 2">
          <span>题型</span>
          <el-radio-group v-model="form.queTypeName" size="mini" @change="toggleType">
            <el-radio-button :label="item" v-for="(item, index) in queTypeList" :key="index">{{ item }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-card>

    <!-- 主体 -->
    <el-container v-show="tabActive != 2">
      <el-aside width="284px" style="
          padding-bottom: 104px;
          background: #fff;
          margin-right: 24px;
          height: 600px;
          overflow: scroll;
          overflow-x: hidden;
        ">
        <div class="aside_header">
          <span>CONTACT</span>
          <span>{{selectQueId == 0?'章节目录':'知识点目录'}}</span>
        </div>
        <div class="aside_content" v-show="selectQueId == 0">
          <el-tree highlight-current :expand-on-click-node="false" :data="treeList" :props="defaultProps" node-key="$treeNodeId" @node-click="clickChapterNode" ref="chapterTree"></el-tree>
        </div>
        <div class="aside_content" v-show="selectQueId == 1">
          <el-tree highlight-current :expand-on-click-node="false" :data="knowledgeTree" :props="knowledgeProps" node-key="$treeNodeId" @node-click="clickKonwNode" ref="knowTree"></el-tree>
        </div>
      </el-aside>
      <!-- 手动组卷 -->
      <el-main style="background: #fff" v-show="tabActive == 0">
        <!-- 头部 -->
        <div class="main_header">
          <div class="left">
            <div class="main_tit">{{ title }}</div>
            <!-- 暂不支持 -->
            <div class="filter" style="display: flex; align-items: center" v-if="false">
              <input type="checkbox" /><span>过滤已做题</span>
            </div>
          </div>
          <div class="search_box">
            <input v-model="searchText" placeholder="请输入内容" />
            <img src="@/assets/images/icon_search2.png" alt="" @click="toggleType(form.queTypeName)" />
          </div>
        </div>
        <!-- 主题内容 -->
        <div class="main_con">
          <!-- 题目 -->
          <div class="paper_questions" id="question_list">
            <div class="que_item" v-for="(item, index) in queList" :key="item.id">
              <div class="que_content">
                <div class="que-content-title">
                  <div class="index">{{ (pageSize*(pageNum-1)+index+1) }}.</div>
                  <div v-html="item.title"></div>
                </div>
                <div class="que-option">
                  <div v-if="item.optionA">
                    <span>A</span>
                    <span v-html="item.optionA"></span>
                  </div>
                  <div v-if="item.optionB">
                    <span>B</span>
                    <span v-html="item.optionB"></span>
                  </div>
                  <div v-if="item.optionC">
                    <span>C</span>
                    <span v-html="item.optionC"></span>
                  </div>
                  <div v-if="item.optionD">
                    <span>D</span>
                    <span v-html="item.optionD"></span>
                  </div>
                </div>
              </div>
              <div class="que_footer">
                <div class="spans">
                  <span class="id">ID: {{ item.id }}</span>
                  <span>题型： {{ item.qtpye }}</span>
                  <span>难度： 一般</span>
                </div>
                <div class="operation">
                  <div class="shoucan">
                    <div v-show="item.collect" @click="toCancelCollectQue(item)" style="display: flex; align-items: center">
                      <img src="@/assets/images/icon_shoucang_s.png" alt="" style="margin-right: 8px" />
                      <span>已收藏</span>
                    </div>
                    <div v-show="!item.collect" @click="toCollectQue(item)" style="display: flex; align-items: center">
                      <img src="@/assets/images/icon_shoucang_n.png" style="margin-right: 8px" alt="" />
                      <span>收藏</span>
                    </div>
                  </div>
                  <div class="jiucuo" @click="$refs.correct.open(item.id)">
                    <img src="@/assets/images/icon_jiucuo.png" alt="" />
                    <span>纠错</span>
                  </div>
                  <div class="detail" @click="viewDetail(index)">
                    <img src="@/assets/images/icon_chakan.png" alt="" />
                    <span>查看详情>></span>
                  </div>
                  <div class="addQue">
                    <el-button @click="addQueCard(item)" icon="el-icon-shopping-cart-2" type="success" plain :disabled="
                        queCardForm.queList.some((q) => q.id == item.id)
                      ">加入选题</el-button>
                  </div>
                </div>
              </div>
              <div class="parse" v-show="item.createTime" v-html="item.answer2"></div>
            </div>
            <div v-if="queList.length == 0" class="empty-text">
              暂时没有内容
            </div>
          </div>
        </div>
        <pagination v-if="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="handleSizeChange" />
      </el-main>
      <!-- 智能组卷 -->
      <el-main v-show="tabActive == 1" style="background: #fff">
        <div class="knowPoints">
          <div class="tit">
            <span>已选知识点（{{ tags.length }}）</span>
            <div class="clear">
              <img src="@/assets/images/icon_qingkong.png" alt="" />
              <span>清空</span>
            </div>
          </div>
          <el-divider></el-divider>
          <!--  tags -->
          <div class="tags">
            <el-tag v-for="tag in tags" :key="tag.id" closable style="margin-right: 24px; margin-bottom: 24px" @close="handleClose(tag)">
              {{ tag.name }}
            </el-tag>
          </div>
        </div>
        <div class="que">
          <div class="tit">
            <span>题型/题量</span>
            <div class="clear">
              <img src="@/assets/images/icon_qingkong.png" alt="" />
              <span>清空</span>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 计数器 -->
          <div class="computer">
            <div class="computer_item" v-for="(item, index) in queCount" :key="index">
              <span class="tit">{{ item.name }}</span>
              <el-input-number controls-position="right" @change="handleChange" v-model="item.count" :min="0" :max="item.num" style="margin: 0 8px"></el-input-number>
              <span class="select">可选{{ item.num }}道</span>
            </div>
          </div>
        </div>
        <!-- 生成试卷 -->
        <div style="
            display: flex;
            justify-content: center;
            margin-top: 90px;
            margin-bottom: 90px;
          ">
          <span class="generateExam" @click="getQuestionsByQTypeAndNum">生成试卷</span>
        </div>
      </el-main>
    </el-container>
    <!-- 组卷记录 -->
    <el-container style="background: #fff; min-height: 500px; display: block" v-show="tabActive == 2">
      <el-table :data="examRecord" style="width: 100%" v-loading="tableLoading">
        <el-table-column type="index" label="序号" width="50px">
        </el-table-column>
        <el-table-column prop="subjectName" label="科目"> </el-table-column>
        <el-table-column prop="name" label="试卷标题">
          <template slot-scope="scope">
            <el-link @click="clickEditPaperName(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="试卷概要"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="createdTime" label="组卷时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <span style="color: #47c6a2; margin-right: 16px; cursor: pointer" @click="clickEditPaper(scope.row)">编辑</span>
              <span style="color: #ff4e00; margin-right: 16px; cursor: pointer" @click="clickDownloadPaper(scope.row.paperId)">下载</span>
              <i class="el-icon-delete table-delete-icon" @click="clickDeletePopup(scope.$index, examRecord)"></i>
            </div>
            <div v-hasPermi="['front:generatingPaperCenter:saveToPersonResources']" style="color: #608edf; margin-right: 16px; cursor: pointer" @click="clickSendToResource(scope.row.paperId)">
              发送至个人资源库
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <img src="@/assets/images/icon_data.png" />
          <span>没有信息</span>
        </template>
      </el-table>
      <el-pagination :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="prev,pager,next,jumper,total,sizes" :total="examRecordTotal">
      </el-pagination>
    </el-container>

    <!-- 试题篮 -->
    <div class="queBoxer" v-show="tabActive == 0">
      <div class="left">
        <div class="tit">
          <i class="el-icon-shopping-cart-2" style="margin-bottom: 10px"></i>
          <div style="width: 17px; margin-bottom: 10px">试题篮</div>
          <span class="count" style="background: #ff4e00; padding: 2px 5px; margin-bottom: 15px">{{ queCardForm.queList.length }}</span>
        </div>
        <div style="cursor: pointer" @click="show = !show">
          <i :class="show ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
        </div>
      </div>
      <div class="main">
        <el-collapse-transition>
          <div v-show="show">
            <div style="margin-bottom: 30px">
              <div style="margin-bottom: 10px">
                共（{{ queCardForm.queList.length }}）道题
              </div>
              <div v-for="(value, key) in groupedCardQueList" :key="key + value.length" style="margin-top: 3px; color: #666666">
                <span>{{ key }}</span><span> {{ value.length }} </span>道
              </div>
            </div>
            <div>
              <p style="
                  color: #ff4e00;
                  text-align: right;
                  border-bottom: 1px solid #dedede;
                ">
                <span @click="clearQueCard" style="cursor: pointer"> 清空</span>
              </p>
            </div>
            <div class="btn" @click="createdPaper">生成试卷</div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <!-- 弹出警告 -->
    <el-dialog title="警告" :visible.sync="dialogVisible" width="30%">
      <span>科目不一致，请清空试题篮或选择同一科目</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改试卷标题" :visible.sync="dialogPaperNameVisible" width="400px">
      <el-input v-model="dialogPaperName" placeholder="请输入试卷标题"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savePaperName">确 定</el-button>
      </span>
    </el-dialog>
    <correct-question ref="correct"></correct-question>
  </div>
</template>
<script>
import {
  smartSubjectList,
  smartGradeList,
  editionList,
  qtBySubject,
  treeList,
  listByChapter,
  knowledgeTree,
  listByKnowledge,
  countByChapter,
  queCollect,
  queCancelCollect,
  countByKnowledge,
  paperRecords,
  getQuestionCardList,
  deleteQuestionCard,
  addToQuestionCard,
  listBottoms,
  savePaperInfo,
  knowByChapter,
  deletePaper,
  getQuestionsByQTypeAndNum,
  getQuestionsByIds,
  download,
  listCustomerPaperQeustions,
  saveToPersonResources,
  updateNameById,
} from "@/api/webApi/webQue.js";
import { mapGetters } from "vuex"
import correctQuestion from '../../components/MxPaper/plus/correct-question-dialog.vue';
export default {
  components: { correctQuestion },
  data() {
    return {
      dialogVisible: false,
      tableLoading: false,
      examRecord: [],
      tabActive: 0,
      searchText: '',
      form: {
        subjectId: 0,
        editionId: 0,
        gradeId: 0,
        queTypeName: "",
        chapterId: 0,
        knowledgeId: 0,
        knowledgeIds: [],
        listBottoms: [],
      },
      show: false,
      // 知识点标签
      tags: [],
      // 题型/选题数据
      queCount: [],
      knowledgeProps: {
        label: "name",
        children: "children",
      },
      defaultProps: {
        label: "name",
        children: "children",
      },
      selectQueId: 0,
      selectQue: ["按章节选题", "按知识点选题"],
      subjectList: [],
      gradeList: [],
      editionList: [],
      queTypeList: [],
      allQueType: "所有",
      treeList: [],
      queList: [],
      title: "",
      knowledgeTree: [],
      queCardForm: {
        queList: [],
      },
      total: 0,
      pageNum: 0,
      pageSize: 10,
      examRecordTotal: 0,
      // 在选题栏里面的题目id集合
      topicblueIds: [],
      // 修改试卷标题
      dialogPaperNameVisible: false,
      dialogPager: {},
      dialogPaperName: "",
      zujuanSubjectId: null,
    };
  },
  computed: {
    formQueTypeName() {
      return this.form.queTypeName == this.allQueType
        ? ""
        : this.form.queTypeName;
    },
    groupedCardQueList() {
      let groupedCard = {};
      this.queCardForm.queList.forEach((que) => {
        if (!groupedCard[que.qtpye]) groupedCard[que.qtpye] = [];
        let groupedQueByType = groupedCard[que.qtpye];
        groupedQueByType.push(que);
      });
      return groupedCard;
    },
    ...mapGetters(["period"])
  },
  created() {
    let query = this.$route.query;
    if (query.hasOwnProperty("tabActive")) {
      this.switchTab(query.tabActive);
    }
    this.getSubjectList();
    getQuestionCardList().then((res) => {
      this.queCardForm.queList = res.data;
      this.topicblueIds = res.data.map((item) => {
        return item.id;
      });
    });
  },
  methods: {
    getQuestionsByQTypeAndNum() {
      // 智能组卷的生成试卷
      if (this.tabActive == 1) {
        let queCount = this.queCount;
        let req = [];
        let allQue = 0;
        queCount.forEach((item) => {
          if (item.count > 0) {
            allQue = allQue + item.count;
            req.push({
              subjectid: this.form.subjectId,
              qtpye: item.name,
              diff: 1,
              number: item.count,
              chapterid: this.form.chapterId,
              gradeid: this.form.gradeId,
              editionid: this.form.editionId,
              knowledgeIds: this.form.knowledgeIds,
            });
          }
        });
        if (allQue > 100) {
          this.msgError("选题上限是100题哦");
          return;
        } else if (allQue == 0) {
          this.msgError("你还未选择题目");
          return;
        }
        getQuestionsByQTypeAndNum(req).then((res) => {
          console.log(res);
          localStorage.setItem(
            "paperData",
            JSON.stringify({
              paperTitle: null,
              subjectId: this.form.subjectId,
            })
          );
          localStorage.setItem("questionList", JSON.stringify(res.data));
          this.$router.push({
            path: "/question-center/generatingPaperCenter/paper",
          });
        });
      } else if (this.tabActive == 0) {
        localStorage.setItem(
          "paperData",
          JSON.stringify({
            paperTitle: null,
            subjectId: this.form.subjectId,
          })
        );
        localStorage.setItem(
          "questionList",
          JSON.stringify(this.queCardForm.queList)
        );
        this.$router.push({
          path: "/question-center/generatingPaperCenter/paper",
        });
      }
    },
    createdPaper() {
      if (this.queCardForm.queList && this.queCardForm.queList.length > 0) {
        localStorage.setItem(
          "paperData",
          JSON.stringify({
            paperTitle: null,
            subjectId: this.form.subjectId,
          })
        );
        localStorage.setItem(
          "questionList",
          JSON.stringify(this.queCardForm.queList)
        );
        this.$router.push({
          path: "/question-center/generatingPaperCenter/paper",
        });
      }
    },
    toSavePaperInfo() {
      let req = [
        {
          subjectid: 1,
          qtpye: "选择题",
          diff: 1,
          number: 1,
          chapterid: 1,
          knowledgeIds: [1, 2, 3],
        },
      ];
      savePaperInfo(req).then((res) => {
        console.log(res);
      });
    },
    switchTab(index) {
      this.tabActive = index;
      if (this.tabActive == 2) {
        this.getPaperRecords();
      }
    },
    clearQueCard() {
      if (this.queCardForm.queList.length > 0) {
        deleteQuestionCard().then((res) => {
          console.log(res);
          this.queCardForm.queList = [];
          this.msgSuccess("清空成功");
        });
      }
    },
    // 查询组卷记录
    getPaperRecords() {
      paperRecords({
        subjectId: this.zujuanSubjectId,
      }).then((res) => {
        this.examRecordTotal = res.total;
        this.examRecord = res.rows;
      });
    },
    /**
     * 删除试卷
     */
    httpDeletePaper(id) {
      deletePaper({
        paperId: id,
      }).then((res) => {
        this.getPaperRecords();
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    clickDeletePopup(index, data) {
      let self = this;
      if (data[index] && data[index]["paperId"]) {
        this.$confirm("是否删除该试卷?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          self.httpDeletePaper(data[index]["paperId"]);
        });
      }
    },
    clickEditPaper(paper) {
      listCustomerPaperQeustions(paper.paperId).then((res) => {
        localStorage.setItem(
          "paperData",
          JSON.stringify({
            paperId: paper.paperId,
            paperTitle: paper.name,
            subjectId: paper.subjectid,
          })
        );
        localStorage.setItem("questionList", JSON.stringify(res.rows));
        this.$router.push({
          path: "/question-center/generatingPaperCenter/paper",
        });
      });
    },
    clickDownloadPaper(paperId) {
      download(paperId, this.period);
    },
    clickSendToResource(paperId) {
      this.tableLoading = true;
      saveToPersonResources(paperId).then((res) => {
        this.tableLoading = false;
        this.msgSuccess("发送成功");
      });
    },
    clickEditPaperName(paper) {
      this.dialogPager = paper;
      this.dialogPaperName = paper.name;
      this.dialogPaperNameVisible = true;
    },
    savePaperName() {
      const paperName = this.dialogPaperName?.trim();
      if (!paperName) {
        this.msgError("试卷标题不能为空");
        return;
      }

      updateNameById(this.dialogPager.paperId, paperName).then((res) => {
        this.dialogPager.name = paperName;
        this.dialogPaperNameVisible = false;
        this.msgSuccess("修改成功");
      });
    },
    // 添加试题
    addQueCard(item) {
      if (this.queCardForm.queList.length == 0) {
        console.log("直接添加");
        // 为0直接添加
        addToQuestionCard({
          questionId: item.id,
        }).then((res) => {
          this.queCardForm.queList.push(item);
          console.log(res);
        });
      } else {
        console.log(this.queCardForm.queList[0]);
        // 判断是否是同一个科目下的题目
        if (item.subjectid == this.queCardForm.queList[0].subjectid) {
          // 是，则添加
          addToQuestionCard({
            questionId: item.id,
          }).then((res) => {
            this.queCardForm.queList.push(item);
            console.log(res);
            console.log("this.queCardForm.queList", this.queCardForm.queList);
          });
        } else {
          // 不是，弹出警告
          this.dialogVisible = true;
        }
      }
    },
    clickChapterNode(item) {
      console.log(item);
      this.form.chapterId = item.id;
      if (this.tabActive == 0) {
        this.title = item.name;
        this.getQueBychapter();
      } else if (this.tabActive == 1) {
        this.getKnowByChapter();
        /*     this.getCountByChapter(); */
      }
    },
    clickKonwNode(item) {
      console.log(item);
      this.form.knowledgeId = item.id;
      if (this.tabActive == 0) {
        this.title = item.name;
        this.getQueByKnowleged();
      } else if (this.tabActive == 1) {
        this.getListBottoms();
      }
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
      console.log(tag);
      if (this.selectQueId == 0) {
        let index = this.form.knowledgeIds.findIndex((item) => item == tag.id);
        this.form.knowledgeIds.splice(index, 1);
        this.getCountByChapter();
      } else if (this.selectQueId == 1) {
        console.log(1111);
        let index = this.form.listBottoms.findIndex((item) => item == tag.id);
        this.form.listBottoms.splice(index, 1);
        this.getCountByKnowledged();
      }
    },
    handleChange(e) { },
    // 课程
    getSubjectList() {
      smartSubjectList().then((res) => {
        this.form.subjectId = res.rows[0].subjectid;
        this.subjectList = res.rows;
        this.getEidtion();
      });
    },
    getQueType() {
      qtBySubject({
        subjectId: this.form.subjectId,
        gradeId: this.form.gradeId,
        editionId: this.form.editionId,
      }).then((res) => {
        const qTypes = [this.allQueType, ...res.data];
        this.form.queTypeName = qTypes[0];
        this.queTypeList = qTypes;
        console.log(res);
      });
    },
    // 获取所有版本
    getEidtion() {
      editionList({
        subjectId: this.form.subjectId,
      }).then((res) => {
        this.form.editionId = Object.keys(res.data)[0];
        this.editionList = res.data;
        this.getGrade();
      });
    },
    // 获取所有的学册
    getGrade() {
      smartGradeList({
        subjectId: this.form.subjectId,
        editionId: this.form.editionId,
      }).then((res) => {
        console.log(res);
        if (res.data.length > 0) {
          this.form.gradeId = res.data[0].gradeid;
        }

        this.gradeList = res.data;
        this.getTree();
        this.getQueType();
      });
    },
    // 获取章节树
    getTree() {
      treeList({
        ...this.form,
      }).then((res) => {
        console.log(res);
        this.treeList = res.data;
        this.clickChapterNode(this.treeList[0]);
        this.$nextTick(() => {
          if (!this.$refs.chapterTree) {
            return;
          }
          this.$refs.chapterTree.$el.children[0].classList.add("is_current");
          this.$refs.chapterTree.setCurrentKey(this.treeList[0].$treeNodeId);
          let d = this.$refs.chapterTree.getCheckedNodes();
        });
      });
    },
    // 根据知识点获取题库列表
    getQueByKnowleged() {
      listByKnowledge({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        qtpye: this.formQueTypeName,
        knowledgeId: this.form.knowledgeId,
        subjectId: this.form.subjectId,
        searchTerm: this.searchText
      }).then((res) => {
        console.log(res);
        this.total = res.total;
        this.queList = res.rows;
        this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
      });
    },
    handleSizeChange(data) {
      this.pageNum = data.page || 1;
      this.pageSize = data.limit || 10;
      this.getQueBychapter();
    },
    // 根据章节获取题库列表
    getQueBychapter() {
      listByChapter({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        qtpye: this.formQueTypeName,
        chapterId: this.form.chapterId,
        subjectId: this.form.subjectId,
        searchTerm: this.searchText
      }).then((res) => {
        console.log(res);
        this.total = res.total;
        this.queList = res.rows;
        this.$nextTick((_) => this.mxGlobal.MathQueue("question_list"));
        console.log(this.queList);
      });
    },
    // 根据章节获取题库类型和数量
    getCountByChapter() {
      countByChapter({
        chapterId: this.form.chapterId,
        subjectId: this.form.subjectId,
        editionId: this.form.editionId,
        gradeId: this.form.gradeId,
        knowledgeIds: this.form.knowledgeIds.join(","),
      }).then((res) => {
        console.log(res);
        this.queCount = res.data;
      });
    },
    // 根据知识点获取题库类型和数量
    getCountByKnowledged() {
      console.log(this.form.listBottoms);
      countByKnowledge({
        knowledgeIds: this.form.listBottoms.join(","),
        subjectId: this.form.subjectId,
      }).then((res) => {
        console.log(res);
        this.queCount = res.data;
      });
    },
    toggleZujuanSubject(e) {
      this.zujuanSubjectId = e;
      if (this.tabActive == 2) {
        this.getPaperRecords();
        return;
      }
    },
    toggleSub(e) {
      this.form.subjectId = e;

      if (this.selectQueId == 1) {
        this.getKnowledges();
        return;
      }
      this.getEidtion();
    },
    toggleEdi(e) {
      this.form.editionId = e;
      this.getGrade();
    },
    toggleGrade(e) {
      this.form.gradeId = e;
      this.getTree();
      this.getQueType();
    },
    viewDetail(index) {
      if (this.queList[index].createTime) {
        this.queList[index].createTime = false;
      } else {
        this.queList[index].createTime = true;
      }
    },
    getKnowledges() {
      knowledgeTree({
        subjectId: this.form.subjectId,
        pharseId: 3,
      }).then((res) => {
        this.knowledgeTree = res.data;
        this.clickKonwNode(res.data[0]);
      });
    },
    toggleSelect(e) {
      this.selectQueId = e;
      if (e == 1) {
        this.getKnowledges();
      }
    },
    toggleType(e) {
      this.form.queTypeName = e;
      this.pageNum = 1
      if (this.selectQueId == 0) {
        if (this.tabActive == 0) {
          this.getQueBychapter();
        } else {
          this.getCountByChapter();
        }
      } else if (this.selectQueId == 1) {
        if (this.tabActive == 0) {
          this.getQueByKnowleged();
        } else {
          this.getCountByKnowledged();
        }
      }
    },
    // 获取底层知识
    getListBottoms() {
      listBottoms({
        knowledgeId: this.form.knowledgeId,
      }).then((res) => {
        this.form.listBottoms = res.data.map((item) => {
          return item.id;
        });
        this.tags = res.data;
        this.getCountByKnowledged();
      });
    },
    // 根据章节查找知识点
    getKnowByChapter() {
      knowByChapter({
        chapterId: this.form.chapterId,
        gradeId: this.form.gradeId,
        subjectId: this.form.subjectId,
      }).then((res) => {
        let arr = [];
        for (let item of res.data) {
          arr.push(item.id);
        }
        this.form.knowledgeIds = arr;
        this.tags = res.data;
        this.getCountByChapter();
      });
    },
    toCollectQue(item) {
      queCollect({
        questionId: item.id,
      }).then((res) => {
        item.collect = !item.collect;
        this.msgSuccess("收藏成功");
        console.log(res);
      });
    },
    toCancelCollectQue(item) {
      queCancelCollect({
        questionId: item.id,
      }).then((res) => {
        item.collect = !item.collect;
        this.msgSuccess("取消收藏成功");
        console.log(res);
      });
    },
  },
};
</script>
<style scoped>
.generating_container {
  padding: 20px;
  background: #f7f7f7;
}

.active {
  color: #47c6a2;
}

.active::after {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  background: #47c6a2;
  left: 0;
  transform: translateY(50%);
  bottom: 0;
}

.header_top {
  display: flex;
  border-bottom: 1px solid #b7b7b7;
  margin-bottom: 20px;
}

.header_top > div {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 30px 0;
}

.header_top > div:hover {
  color: #47c6a2;
}

.header_top > div:hover::after {
  content: "";
  width: 100%;
  height: 4px;
  position: absolute;
  background: #47c6a2;
  left: 0;
  transform: translateY(50%);
  bottom: 0;
}

.radio_contianer .el-radio-button {
  margin-right: 8px;
}

.radio_contianer > div {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.radio_contianer > div > span {
  flex-shrink: 0;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #232323;
  line-height: 20px;
  height: 20px;
  width: 50px;
}

.el-card {
  margin-bottom: 20px;
}

.el-aside {
  margin-bottom: 0;
  padding: 24px 0 0 16px;
}

.aside_header {
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.aside_header > span:first-child {
  width: 173px;
  height: 27px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffffff),
    to(#47c6a2)
  );
  background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
  opacity: 0.5;
}

.aside_header > span:last-child {
  margin-bottom: 20px;
}

.aside_header > span {
  margin-top: 5px;
  width: 84px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
  line-height: 22px;
}

.el-main {
  padding: 37px 28px 0 28px;
}

.main_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.main_header .main_tit {
  font-size: 16px;
  font-weight: 500;
  color: #47c6a2;
  line-height: 22px;
  margin-right: 64px;
}

.main_header .filter {
  font-weight: 400;
  color: #4c4c4c;
  line-height: 20px;
}

.main_header .left {
  display: flex;
}

.search_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  margin-right: 20px;
}

.search_box img {
  position: absolute;
  right: 20px;
  cursor: pointer;
  top: 6px;
}

.search_box input {
  background: #f7f7ff;
  border-radius: 20px;
  border: 1px solid #c6cbf5;
  outline: none;
  width: 340px;
  height: 32px;
  padding-left: 24px;
}

.que_item {
  border-radius: 1px;
  border: 1px solid #dedede;
  margin-bottom: 8px;
}

.que_content {
  padding: 12px 24px 0 33px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #4c4c4c;
  line-height: 27px;
  margin-bottom: 40px;
}

.que-content-title {
  font-size: 14px;
  display: flex;
}


.que-option {
  line-height: 40px;
}

.que-option span {
  margin-right: 5px;
}

.que_footer {
  border-top: 1px solid #dedede;
  padding-left: 33px;
  overflow: hidden;
  padding-bottom: 23px;
  padding-top: 21px;
}

.que_footer .spans {
  float: left;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #979797;
  line-height: 20px;
}

.que_footer .spans > span {
  margin-right: 20px;
}

.operation {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #47c6a2;
  line-height: 20px;
  float: right;
}

.operation > div {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.operation .shoucan {
  margin-right: 46px;
}

.operation .jiucuo {
  color: #ff4e00;
  margin-right: 32px;
}

.operation .detail span {
  border-radius: 1px;
  border-bottom: 1px solid #47c6a2;
}

.operation .detail {
  margin-right: 32px;
}

.operation > div > img {
  margin-right: 10px;
}

.knowPoints .tags {
  margin-top: 24px;
  margin-bottom: 72px;
}

.knowPoints .tit {
  margin-bottom: 16px;
  overflow: hidden;
  color: #47c6a2;
}

.knowPoints .clear {
  float: right;
  margin-right: 40px;
}

.knowPoints .clear img {
  margin-right: 16px;
}

.que .tit {
  margin-bottom: 16px;
  overflow: hidden;
  color: #47c6a2;
}

.que .clear {
  float: right;
  margin-right: 40px;
}

.que .clear img {
  margin-right: 16px;
}

.el-divider {
  margin: 0;
  background: #47c6a2;
}

.computer {
  margin-top: 24px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.computer .computer_item {
  flex: 33% 0 0;
  margin-bottom: 32px;
}

.computer .computer_item .tit {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #343434;
  line-height: 20px;
}

.computer .computer_item .select {
  width: 58px;
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #969696;
  line-height: 17px;
}

.parse {
  padding: 20px;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
  background-color: rgb(238, 241, 245);
}

.queBoxer {
  display: flex;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.queBoxer .main {
  border-top: 2px solid #47c6a2;
  padding: 10px 0;
  border-bottom: 2px solid #47c6a2;
  background: #fff;
}

.queBoxer > div > div {
  padding: 0 10px;
}

.queBoxer .left {
  padding: 10px;
  background: #47c6a2;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.queBoxer .main .btn {
  background: #47c6a2;
  color: white;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  margin: 5px 10px;
  text-align: center;
}

.queBoxer .left .tit {
  display: flex;
  writing-mode: lr-tb;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}

.generateExam {
  padding: 14px 29px;
  background: #47c6a2;
  border-radius: 4px;
  cursor: pointer;
  color: white;
}

/deep/.el-button--success.is-plain.is-disabled {
  background-color: #ffffff;
  border-color: #e6ebf5;
  color: #c0c4cc;
}
/deep/ .el-tree-node__content {
  padding-top: 6px;
  padding-bottom: 6px;
  height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #343434;
  line-height: 20px;
}

.generating_container >>> .el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
}

.generating_container >>> .radio_contianer .el-radio-button .el-radio-button__inner {
  border-radius: 16px;
  border-bottom: 5px;
}

.generating_container >>> .split_page .el-pager > li {
  border-radius: 50%;
}
.generating_container >>> .el-tree-node {
  padding-left: 16px;
}
.generating_container >>> .el-tree-node__expand-icon.expanded {
  content: "";
}

.generating_container >>> .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 6px;
  /* position: absolute; */
  right: 16px;
}
.generating_container >>> .radio_contianer .is-active .el-radio-button__inner{
  border-left: none;
}
.empty-text {
  margin-top: 150px;
  text-align: center;
  color: #ccc;
}

.generating_container >>>.el-input-number.is-controls-right .el-input-number__decrease {
  width: 16px;
}

.generating_container >>>.el-input-number.is-controls-right[class*="medium"] [class*="increase"],
.generating_container >>>.el-input-number.is-controls-right[class*="medium"] [class*="decrease"] {
  width: 16px;
}

.generating_container >>>.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: #47c6a2;
  background: #ffffff;
}

.generating_container >>>.table-delete-icon {
  cursor: pointer;
}
</style>