src/views/standard/test/index.vue

<template>
  <div ref="main" class="page-container">
    <back-box>
      <template slot="title">
        <span>即时测-数据报表</span>
      </template>
      <template slot="btns">
        <el-tooltip
          v-if="!code && gdClass"
          effect="dark"
          content="已归档试卷"
          placement="bottom"
        >
          <el-button
            type="primary"
            icon="fa fa-archive"
            size="mini"
            plain
            circle
            @click="toArchiving"
          ></el-button>
        </el-tooltip>
      </template>
    </back-box>
    <div class="answer-header">
      <div class="sel-box">
        <el-select
          class="sel"
          v-model="query.classIds"
          placeholder="选择班级"
          @change="changeclass"
          multiple
          collapse-tags
        >
          <el-checkbox v-model="classAll" @change="selectAll" class="select-all"
            >全选</el-checkbox
          >
          <el-option
            :disabled="
              query.classIds.length == 1 && query.classIds[0] == item.value
            "
            v-for="item in classList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-if="role == 'ROLE_BANZHUREN'"
          class="sel sel2"
          multiple
          v-model="query.subjectNames"
          placeholder="选择科目"
          @change="changeSub"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-else
          class="sel sel2"
          v-model="query.subjectNames"
          placeholder="选择科目"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="d1">
          <el-date-picker
            v-model="query.startDay"
            type="date"
            @change="handleChangeTimeStart"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="query.endDay"
            type="date"
            placeholder="选择日期时间"
            @change="handleChangeTimeEnd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <p class="p1">
          <span @click="setDate(1)" :class="[date == 1 ? 'active' : '', 's1']"
            >今天</span
          >
          <span @click="setDate(2)" :class="[date == 2 ? 'active' : '', 's1']"
            >本周</span
          >
          <span @click="setDate(3)" :class="[date == 3 ? 'active' : '', 's1']"
            >本月</span
          >
          <span @click="setDate(4)" :class="[date == 4 ? 'active' : '', 's1']"
            >本季度</span
          >
        </p>
        <el-button type="primary" round @click="_QueryData()">筛选</el-button>
      </div>
    </div>
    <div v-show="query.classIds.length == 1" class="table-box">
      <el-radio-group
        v-model="tabIndex"
        @change="changeTab"
        style="margin-bottom: 20px"
      >
        <template v-for="(item, index) in tabList">
          <el-radio-button
            v-if="index == 0 || query.startDay != query.endDay"
            :key="index"
            :label="index + 1"
            >{{ item }}</el-radio-button
          >
        </template>
      </el-radio-group>
      <div v-show="tabIndex == 1" v-loading="loading">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="subjectName"
            label="科目"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="title"
            label="试卷名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="className"
            label="考试班级"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="examPaperScore"
            label="卷面分"
            align="center"
            width="68"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="answeredNum"
            label="测验人数"
            align="center"
            ><template slot-scope="scoped">{{
              `${scoped.row.answeredNum}/${scoped.row.classPersonNum}`
            }}</template></el-table-column
          >
          <el-table-column
            prop="examStartTime"
            label="测验开始时间"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="examEndTime"
            label="测验结束时间"
            width="160"
            align="center"
          ></el-table-column>
          <!-- 添加对比删除 -->
          <!-- <el-table-column prop="avgScore" label="班平均分" align="center"
            ><template slot-scope="scoped">{{
              (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                scoped.row.answerNum == 0) &&
              scoped.row.recordStatus == 0
                ? "-"
                : scoped.row.avgScore
            }}</template></el-table-column
          >
          <el-table-column prop="highestScore" label="班最高分" align="center"
            ><template slot-scope="scoped">{{
              (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                scoped.row.answerNum == 0) &&
              scoped.row.recordStatus == 0
                ? "-"
                : scoped.row.highestScore
            }}</template></el-table-column
          >
          <el-table-column prop="lowestScore" label="班最低分" align="center"
            ><template slot-scope="scoped">{{
              (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                scoped.row.answerNum == 0) &&
              scoped.row.recordStatus == 0
                ? "-"
                : scoped.row.lowestScore
            }}</template></el-table-column
          >
          <el-table-column
            prop="excellenRate"
            label="优秀数(率)"
            sortable
            align="center"
            width="110"
            class-name="p0"
            ><template slot-scope="scoped">
              <p
                v-if="
                  (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                    scoped.row.answerNum == 0) &&
                  scoped.row.arecordStatus == 0
                "
              >
                "-"
              </p>
              <template v-else>
                <p>{{ scoped.row.excellenNum }}</p>
                <p v-if="scoped.row.excellenNum">
                  {{ `（${scoped.row.excellenRate}%）` }}
                </p>
              </template>
            </template></el-table-column
          >
          <el-table-column
            prop="goodRate"
            label="良好数(率)"
            sortable
            align="center"
            width="110"
            class-name="p0"
            ><template slot-scope="scoped">
              <p
                v-if="
                  (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                    scoped.row.answerNum == 0) &&
                  scoped.row.arecordStatus == 0
                "
              >
                "-"
              </p>
              <template v-else>
                <p>{{ scoped.row.goodNum }}</p>
                <p v-if="scoped.row.goodNum">
                  {{ `（${scoped.row.goodRate}%）` }}
                </p>
              </template>
            </template></el-table-column
          >
          <el-table-column
            prop="passRate"
            label="及格数(率)"
            sortable
            align="center"
            width="110"
            class-name="p0"
            ><template slot-scope="scoped">
              <p
                v-if="
                  (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                    scoped.row.answerNum == 0) &&
                  scoped.row.arecordStatus == 0
                "
              >
                "-"
              </p>
              <template v-else>
                <p>{{ scoped.row.passNum }}</p>
                <p v-if="scoped.row.passNum">
                  {{ `（${scoped.row.passRate}%）` }}
                </p>
              </template>
            </template></el-table-column
          >
          <el-table-column
            prop="failedRate"
            label="不及格数(率)"
            sortable
            align="center"
            width="130"
            class-name="p0"
            ><template slot-scope="scoped">
              <p
                v-if="
                  (scoped.row.subjectiveScore == scoped.row.examPaperScore ||
                    scoped.row.answerNum == 0) &&
                  scoped.row.arecordStatus == 0
                "
              >
                "-"
              </p>
              <template v-else>
                <p>{{ scoped.row.failedNum }}</p>
                <p v-if="scoped.row.failedNum">
                  {{ `（${scoped.row.failedRate}%）` }}
                </p>
              </template>
            </template></el-table-column
          > -->
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scoped">
              <el-tooltip
                v-if="
                  scoped.row.answerNum != 0 ||
                  (scoped.row.recordStatus != 0 &&
                    scoped.row.subjectiveScore == scoped.row.examPaperScore)
                "
                effect="dark"
                content="详情"
                placement="top"
              >
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  icon="fa fa-arrow-right"
                  @click="linkTo(scoped.row)"
                ></el-button>
              </el-tooltip>
              <template
                v-if="
                  scoped.row.answerNum == 0 &&
                  scoped.row.subjectiveScore != scoped.row.examPaperScore
                "
              >
                <el-tooltip
                  v-if="role == 'ROLE_JIAOSHI'"
                  effect="dark"
                  content="设置答案"
                  placement="top"
                >
                  <el-button
                    type="primary"
                    circle
                    size="mini"
                    icon="fa fa-file-text"
                    @click="edit(scoped.row)"
                  ></el-button>
                </el-tooltip>
                <template v-else>未设置答案</template>
              </template>
              <el-tooltip
                v-if="
                  scoped.row.subjectiveScore == scoped.row.examPaperScore &&
                  scoped.row.recordStatus == 0
                "
                effect="dark"
                content="导入主观题"
                placement="top"
              >
                <el-button
                  type="primary"
                  circle
                  size="mini"
                  icon="fa fa-cloud"
                  @click="uploadSJ(scoped.row)"
                ></el-button>
              </el-tooltip>
              <el-popconfirm
                title="确定删除吗？"
                @confirm="removeReport(scoped.row, scoped.$index)"
              >
                <el-button
                  class="remove-test"
                  slot="reference"
                  type="danger"
                  circle
                  size="mini"
                  icon="el-icon-delete"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-box">
          <el-pagination
            small=""
            layout="total,prev, pager, next"
            :hide-on-single-page="true"
            :total="total"
            @current-change="changePage"
            :current-page="page"
            :page-size="size"
          >
          </el-pagination>
        </div>
      </div>
      <div v-show="tabIndex == 2" v-loading="loading">
        <el-empty
          :image-size="100"
          v-if="!tableData.length && loading == false"
          description="没有更多数据"
        ></el-empty>
        <template v-if="tableData.length && loading == false">
          <div id="print-content">
            <el-table
              :max-height="tableMaxHeight"
              v-if="role == 'ROLE_JIAOSHI'"
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="studentCode"
                label="学号"
                align="center"
                fixed
              ></el-table-column>
              <el-table-column
                prop="studentName"
                label="姓名"
                fixed
                align="center"
              >
                <template slot-scope="scoped"
                  ><span class="click-b" @click="toPortrait(scoped.row)">
                    {{ scoped.row.studentName }}
                  </span></template
                ></el-table-column
              >
              <el-table-column
                align="center"
                v-for="(item, index) in answerList"
                :key="index"
                :label="item.title"
              >
                <el-table-column
                  :prop="'score' + index"
                  :label="index == 0 ? '总分' : '成绩'"
                  align="center"
                  :class-name="index % 2 == 0 ? 'bg' : ''"
                >
                  <template slot-scope="scoped">
                    {{ Number(scoped.row["score" + index]) }}
                  </template></el-table-column
                >
                <el-table-column
                  :prop="'classRank' + index"
                  label="班名"
                  align="center"
                  :class-name="index % 2 == 0 ? 'bg' : ''"
                ></el-table-column>
              </el-table-column>
            </el-table>
            <el-table
              v-else
              :data="tableData"
              :max-height="tableMaxHeight"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="studentCode"
                label="学号"
                align="center"
                fixed
              ></el-table-column>
              <el-table-column
                prop="studentName"
                label="姓名"
                fixed
                align="center"
              >
                <template slot-scope="scoped"
                  ><span class="click-b" @click="toPortrait(scoped.row)">
                    {{ scoped.row.studentName }}
                  </span></template
                >
              </el-table-column>
              <el-table-column
                align="center"
                v-for="(item, index) in answerList"
                :key="index"
                :label="item"
              >
                <el-table-column
                  :prop="'examCount' + item"
                  label="测练数"
                  align="center"
                  :class-name="index % 2 == 0 ? 'bg' : ''"
                ></el-table-column>
                <el-table-column
                  :prop="'participationCount' + item"
                  label="参与数"
                  align="center"
                  :class-name="index % 2 == 0 ? 'bg' : ''"
                ></el-table-column>
                <el-table-column
                  :prop="'score' + item"
                  label="总分"
                  align="center"
                  :class-name="index % 2 == 0 ? 'bg' : ''"
                ></el-table-column>
                <el-table-column
                  :prop="'classRank' + item"
                  label="班名"
                  align="center"
                  :class-name="index % 2 == 0 ? 'bg' : ''"
                ></el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </div>
      <p class="down" v-if="tabIndex == 2 && tableData.length">
        <el-button
          type="primary"
          plain
          round
          icon="fa fa-cloud-download"
          @click="downExl"
          >导出报表</el-button
        >
        <el-button
          v-if="!this.$store.getters.code"
          @click="print"
          type="primary"
          plain
          round
          icon="el-icon-printer"
          >打印</el-button
        >
      </p>
    </div>
    <div v-show="query.classIds.length > 1" class="table-box">
      <div class="head-box">
        <div class="tit">
          <p class="txt">已考试卷信息</p>
          <p>
            共筛选出{{ classTableLen }}个班级的已考试卷，<em class="red"
              >不同班级请选择同一份试卷进行对比</em
            >
          </p>
        </div>
        <el-input
          placeholder="输入试卷名称"
          v-model="examReportName"
          class="input-with-select"
          @keyup.enter.native="examReportList(examReportName)"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="examReportList(examReportName)"
          ></el-button>
        </el-input>
      </div>
      <el-empty
        :imag-size="48"
        v-if="!classTableLen && !loading"
        description="暂无数据"
      ></el-empty>
      <ul class="tab-ul" v-if="classTableLen">
        <template v-for="(item, index) in classTable">
          <li class="tab-li">
            <p class="tab-tit">
              {{
                `${item[0].className} ${
                  item.length ? "(" + item.length + "份已考试卷)" : ""
                }`
              }}
            </p>
            <el-table
              :data="item"
              border
              style="width: 100%"
              v-if="item.length"
            >
              <el-table-column label="选择" align="center" width="60">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="multipleSelection"
                    :label="scope.row.id"
                    :disabled="checkboxDisabled(scope.row)"
                  >
                    {{ ` ` }}</el-checkbox
                  >
                </template>
              </el-table-column>
              <el-table-column
                prop="title"
                label="报表名称"
                align="center"
              ></el-table-column>
              <el-table-column label="测验人数" align="center" width="80">
                <template slot-scope="scope">{{
                  `${scope.row.answeredNum}/${scope.row.classPersonNum}`
                }}</template>
              </el-table-column>
              <el-table-column
                prop="examStartTime"
                label="测验开始时间"
                width="120"
                align="center"
              ></el-table-column>
              <el-table-column label="测验时长" align="center" width="80">
                <template slot-scope="scope">{{
                  `${Math.floor(scope.row.duration / 60)}分${
                    scope.row.duration % 60
                  }`
                }}</template>
              </el-table-column>
            </el-table>
            <el-empty v-else :imag-size="32" description="暂无数据"></el-empty>
          </li>
        </template>
      </ul>
      <p class="btn-box" v-if="classTableLen">
        <el-button @click="linkToContrast">生成对比报表</el-button>
      </p>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="导入主观题分数"
      :visible.sync="diaUp"
      width="600"
    >
      <up-load
        :url="url"
        :examId="examId"
        @upSuccess="upSuccess"
        fileName="主观题分数"
        v-loading="loadingDown"
      >
        <template slot="down">
          <p class="down-txt">
            第一步：下载模板并编辑完成学生分数
            <el-link type="danger" @click="downExcel">模板下载</el-link> 。
          </p>
          <p class="down-txt">第二步：上传完成编辑的模板文件并导入。</p>
        </template>
      </up-load>
      <div class="dialog-footer" slot="footer">
        <el-button @click="diaUp = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { formatDate, downloadFile, tablePrint } from "utils";
import BusEvent from "@/utils/busEvent";
export default {
  data() {
    return {
      code: "",
      gdClass: 0, //已归档班级数量
      exportLoading: false,
      tableMaxHeight: 300,
      role: "",
      loading: false,
      diaUp: false,
      loadingDown: false,
      url: "/api_html/teaching/importSubjectiveScore",
      examId: "",
      form: {
        id: "",
        title: "",
        examPaperScore: "",
      },
      date: "", //今天-昨天-本周
      query: {
        //搜索条件
        classIds: [],
        subjectNames: "",
        startDay: "",
        endDay: "",
        day: "",
      },
      examReportName: "", //试卷名称
      tabList: ["已考试卷信息", "阶段测练报表"],
      classList: [], //班级
      subjectList: [], //科目
      tabIndex: 1, //选项卡
      tableData: [],
      answerList: [], //设置多卷内容供tableStage表格数据用
      page: 1,
      size: 20,
      total: 0,
      multipleSelection: [], //选中的试卷ID
      classTable: [], //多班级数据
      classAll: false, //搜索条件多班全选
    };
  },
  computed: {
    classTableLen: function () {
      let len = 0;
      this.classTable?.map((item) => {
        item.length ? (len += 1) : "";
      });
      return len;
    },
  },
  async created() {
    this.code = localStorage.getItem("csCode") || "";
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this._QueryClassList2();
    await this._QueryClassList();
    if (!this.query.classIds.length) {
      return;
    }
    await this._QuerySubjectList();
    await this.setDate(1);
    let startDay = this.query?.startDay;
    if (!startDay) {
      this.query.startDay = new Date();
      this.query.endDay = new Date();
    }
  },
  activated() {
    const that = this;
    BusEvent.$on("keepAlive", async function () {
      // if (that.$route.path == "/test") {
      that.query.subjectNames = that.role == "ROLE_BANZHUREN" ? [] : "";
      that._QueryClassList2();
      await that._QueryClassList();
      if (!that.query.classIds.length) {
        return;
      }
      await that._QuerySubjectList();
      await that.setDate(1);
      let startDay = that.query?.startDay;
      if (!startDay) {
        that.query.startDay = new Date();
        that.query.endDay = new Date();
      }
      // }
    });
  },
  methods: {
    //搜索条件多班全选
    selectAll(val) {
      this.query.classIds = [];
      if (val) {
        this.classList.forEach((item) => {
          this.query.classIds.push(item.value);
        });
      } else {
        this.query.classIds.push(this.classList[0].value);
      }
    },
    // 多班级选择同一试卷
    checkboxDisabled(obj) {
      let id = this.multipleSelection[0] || "";
      if (id) {
        let examPaperId;
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].id == id) {
            examPaperId = this.tableData[i].examPaperId;
            break;
          }
        }
        return obj.examPaperId == examPaperId ? false : true;
      } else {
        return false;
      }
    },
    print() {
      tablePrint("print-content", "即时测-" + this.tabList[this.tabIndex - 1]);
    },
    //科目改变触发事件
    changeSub(val) {
      let sub;
      if (val && val.length) {
        let leng = val.length - 1;
        sub = val[leng];
      }
      console.log(val);
      this.query.subjectNames = val.filter((item) => {
        return sub != "全部" ? item != "全部" : item == "全部";
      });
    },
    toArchiving() {
      this.$router.push({
        path: "/testArchiving",
      });
    },
    //去详情
    linkTo(obj) {
      this.$router.push({
        path: "/testAnalysis",
        query: {
          id: obj.id,
          title: obj.title,
          score: obj.examPaperScore,
          classId: obj.classId,
          subjectName: obj.subjectName,
        },
      });
    },
    //去报表对比
    linkToContrast() {
      if (this.multipleSelection.length < 2) {
        this.$message.warning("请选择同一份试卷多个班级进行对比！");
        return;
      }
      this.$router.push({
        path: "/testContrast",
        query: {
          ids: this.multipleSelection,
          subjectNames: this.query.subjectNames,
        },
      });
    },
    //暂时不上线
    toPortrait(obj) {
      return;
      if (this.$store.getters.code) {
        return;
      }
      let subjectNames = [];
      subjectNames =
        this.role == "ROLE_BANZHUREN"
          ? [...this.query["subjectNames"]]
          : [this.query["subjectNames"]];
      if (
        this.query["subjectNames"] &&
        this.query["subjectNames"]?.length == 1 &&
        this.query["subjectNames"][0] == "全部"
      ) {
        subjectNames = this.subjectList.map((item) => {
          return item.value;
        });
        subjectNames?.shift();
      }
      //去学生画像
      this.$router.push({
        path: "/portraitDetail",
        query: {
          id: obj.studentId,
          classId: this.query.classId,
          subjectNames: subjectNames.join(","),
          studentName: obj.studentName,
          studentCode: obj.studentCode,
          startDay: this.query.startDay,
          endDay: this.query.endDay,
          date: this.date,
        },
      });
    },
    //导入开关
    uploadSJ(obj) {
      this.examId = obj.id;
      this.diaUp = true;
    },
    //删除即时测考试
    async removeReport(obj, index) {
      const { data, status, info } = await this.$request.deleteReport({
        id: obj.id,
      });
      if (status == 200) {
        this.$message.success("删除成功！");
        this.tableData.splice(index, 1);
      } else {
        this.$message.error(info);
      }
    },
    setDate(index) {
      const that = this;
      this.date = index == this.date ? "" : index;
      let aYear = new Date().getFullYear();
      let aMonth = new Date().getMonth() + 1;
      that.query.day = "";
      that.query.startDay = "";
      that.query.endDay = "";
      switch (index) {
        case 1:
          that.query.day = formatDate(new Date(), "yyyy-MM-dd");
          that.query.startDay = that.query.day;
          that.query.endDay = that.query.day;
          that.tabIndex = 1;
          break;
        case 2:
          let day = new Date().getDay();
          if (day == 0) {
            //中国式星期天是一周的最后一天
            day = 7;
          }
          day--;
          let aTime = new Date().getTime() - 24 * 60 * 60 * 1000 * day;
          that.query.startDay = formatDate(new Date(aTime), "yyyy-MM-dd");
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 3:
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
        case 4:
          if (aMonth > 0 && aMonth < 4) {
            aMonth = "1";
          } else if (aMonth > 3 && aMonth < 7) {
            aMonth = "4";
          } else if (aMonth > 6 && aMonth < 10) {
            aMonth = "7";
          } else {
            aMonth = "10";
          }
          aMonth = aMonth < 10 ? "0" + aMonth : aMonth;
          that.query.startDay = `${aYear}-${aMonth}-01`;
          that.query.endDay = formatDate(new Date(), "yyyy-MM-dd");
          break;
      }
      this.page = 1;
      this._QueryData();
    },
    handleChangeTimeStart(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.endDay) {
        if (new Date(val).getTime() > new Date(this.query.endDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.startDay = "";
        }
      }
    },
    handleChangeTimeEnd(val) {
      this.query.day = "";
      this.date = "";
      if (this.query.startDay) {
        if (new Date(val).getTime() < new Date(this.query.startDay).getTime()) {
          this.$message.error("任务结束时间不能任务开始时间前面，请重新设置");
          this.query.endDay = "";
        }
      }
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    edit(item) {
      this.$router.push({
        path: "/examinationPaperEdit",
        query: {
          paperId: item.id,
          title: item.title,
          type: 2,
        },
      });
    },
    changeTab() {
      this.tableMaxHeight = this.$refs.main.offsetHeight;
      this.page = 1;
      this._QueryData();
    },
    //导入成功
    upSuccess(res) {
      this.$message.success("导入成功");
      this.diaUp = false;
      this._QueryData();
    },
    //切换班级
    async changeclass(list) {
      if (list.length == this.classList.length) {
        this.classAll = true;
      } else {
        this.classAll = false;
      }
      if (this.query.classIds.length == 0) {
        this.$message.warning("请至少选择一个班级！");
      }
      if (this.query.classIds != 1) {
        this.tabIndex = 1;
      }
      await this._QuerySubjectList();
      this.page = 1;
      this._QueryData();
    },
    async _QueryClassList2() {
      if (this.code) return;
      const fetchClassList =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTClassList
          : this.$request.tClassList;
      const { data, status, info } = await fetchClassList({ status: 1 });
      if (status === 0) {
        this.gdClass = data?.list?.length || 0;
      } else {
        this.$message.error(info);
      }
    },
    async _QueryClassList() {
      const fetchClassList =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTClassList
          : this.$request.tClassList;
      const { data, status, info } = await fetchClassList();
      this.query.classIds = [];
      if (status === 0) {
        this.classList = data.list.map((item) => {
          return {
            value: item.classId,
            label: item.className,
          };
        });
        this.query.classIds.push(this.classList[0]?.value);
      } else {
        this.$message.error(info);
      }
    },
    async _QuerySubjectList() {
      let query = {};
      if (!this.query.classIds.length) return;
      if (this.query.classIds.length == 1) {
        query.classId = this.query.classIds[0];
      } else {
        query.classIds = this.query.classIds;
      }
      const fetchSubjectList =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTSubjectList
          : this.$request.tSubjectList;
      const { data, status, info } = await fetchSubjectList({ ...query });
      if (status === 0) {
        this.subjectList =
          data.subjectNames?.map((item) => {
            return {
              value: item,
              label: item,
            };
          }) || [];
        if (this.role == "ROLE_BANZHUREN") {
          this.subjectList.unshift({
            value: "全部",
            label: "全部",
          });
          this.query.subjectNames.push(this.subjectList[0]?.value);
        } else {
          this.query.subjectNames = this.subjectList[0]?.value;
        }
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      this.examReportName = "";
      if (!this.query.classIds.length) return;
      this.tableData = [];
      if (this.tabIndex == 1) {
        this.examReportList();
      } else {
        this.phaseExamReport();
      }
    },
    //单卷测练
    async examReportList(msg) {
      this.multipleSelection = [];
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          query[key] = this.query[key];
        }
      }
      if (this.role != "ROLE_BANZHUREN") {
        query.subjectNames = [query.subjectNames];
      } else {
        if (
          query["subjectNames"] &&
          query["subjectNames"].length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"].shift();
        }
        if (!query["subjectNames"]) {
          this.$message.warning("请选择科目");
          return;
        }
      }
      if (this.query.classIds.length == 1) {
        query.classId = query.classIds[0];
        query.page = this.page;
        query.size = this.size;
        delete query.classIds;
      }
      if (msg) {
        query.title = msg;
      }
      const { data, status, info } = await this.$request.examReportList({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = (data?.list && [...data?.list]) || [];
        this.total = data?.count || 0;
        if (!query.classId) {
          //多班级
          this.classTable = [];
          let classIds = [];
          let tableData = [];
          data?.list?.map((item) => {
            if (!classIds.includes(item.classId)) {
              classIds.push(item.classId);
            }
            let idx = classIds.indexOf(item.classId);
            if (tableData[idx]) {
              tableData[idx].push(item);
            } else {
              tableData[idx] = [item];
            }
          });
          this.classTable = [...tableData];
        }
      } else {
        this.$message.error(info);
      }
    },
    //多卷测练
    async phaseExamReport() {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "subjectNames" && this.role != "ROLE_BANZHUREN") {
            query["subjectName"] = this.query[key];
          } else {
            query[key] = this.query[key];
          }
        }
      }
      if (this.role == "ROLE_BANZHUREN") {
        if (
          query["subjectNames"] &&
          query["subjectNames"]?.length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"]?.shift();
        }
      }
      if (this.query.classIds.length == 1) {
        query.classId = query.classIds[0];
        delete query.classIds;
      }
      const phaseExamReport =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTPhaseExamReport
          : this.$request.phaseExamReport;
      const { data, status, info } = await phaseExamReport({
        ...query,
      });
      this.loading = false;
      if (status === 0) {
        this.total = data.count;
        if (this.role == "ROLE_BANZHUREN") {
          let subjectName = [];
          this.tableData = data?.list.map((item) => {
            let params = {};
            item.dataList.map((items, index) => {
              if (!subjectName.includes(items.subjectName)) {
                subjectName.push(items.subjectName);
              }
              params["examCount" + items.subjectName] = items.examCount;
              params["participationCount" + items.subjectName] =
                items.participationCount;
              params["score" + items.subjectName] = items.score;
              params["classRank" + items.subjectName] = items.classRank;
            });
            return {
              ...item,
              ...params,
            };
          });
          this.answerList = [...subjectName];
        } else {
          let dataIdsList = [],
            dataList = [];
          data?.list.map((item) => {
            item.examList.map((items) => {
              if (!dataIdsList.includes(items.title)) {
                dataIdsList.push(items.title);
                dataList.push(items);
              }
            });
          });
          console.log(dataList);
          this.tableData = data?.list.map((item) => {
            let params = {};
            dataIdsList.map((ids, index) => {
              params["score" + index] = "--";
              params["classRank" + index] = "--";
              item.examList.map((items) => {
                if (items.title == ids) {
                  params["score" + index] = items.score;
                  params["classRank" + index] = items.classRank;
                }
              });
            });
            return {
              ...item,
              ...params,
            };
          });
          this.answerList = dataList;
        }
      } else {
        this.$message.error(info);
      }
    },
    //报表导出
    async downExl() {
      if (this.exportLoading == true) return;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "") {
          if (key == "subjectNames" && this.role != "ROLE_BANZHUREN") {
            query["subjectName"] = this.query[key];
          } else {
            query[key] = this.query[key];
          }
        }
      }
      if (this.role == "ROLE_BANZHUREN") {
        if (
          query["subjectNames"] &&
          query["subjectNames"].length == 1 &&
          query["subjectNames"][0] == "全部"
        ) {
          query["subjectNames"] = this.subjectList.map((item) => {
            return item.value;
          });
          query["subjectNames"].shift();
        }
        if (!query["subjectNames"]) {
          this.$message.warning("请选择科目");
          return;
        }
      }
      query.classId = query.classIds[0];
      delete query.classIds;
      const exportPhaseExamReport =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTExportPhaseExamReport
          : this.$request.exportPhaseExamReport;
      this.exportLoading = true;
      const data = await exportPhaseExamReport({ ...query });
      this.exportLoading = false;
      if (data && !data.code) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile("即时测-阶段测练报表.xlsx", blob);
      } else {
        this.$message.error(data.info);
      }
    },
    //模板下载
    async downExcel() {
      this.loadingDown = true;
      let data = await this.$request.subjectiveScoreTemplate({
        examId: this.examId,
      });
      this.loadingDown = false;
      if (data && !data.code) {
        let blob = new Blob([data], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        downloadFile(`主观题模版.xlsx`, blob);
      } else {
        this.$message.error(data.info);
      }
    },
  },
};
</script>
<style>
div::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}
div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}
</style>
<style lang="scss" scoped>
.page-container {
  position: relative;
  height: 100%;
  &.active {
    overflow: hidden;
  }
}
.table-box {
  margin: 0 20px;
  padding: 16px;
  background: #f8f8f8;
  border-radius: 5px;
  :deep(.fa-arrow-right) {
    padding-left: 2px;
  }
  :deep(.fa-file-text) {
    padding-left: 2px;
  }
}
.down {
  padding-top: 16px;
}
.click-b {
  cursor: pointer;
  color: #409eff;
  text-decoration: underline;
}
.head-box {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  .txt {
    font-size: 16px;
    color: #333;
    line-height: 20px;
    position: relative;
    margin-bottom: 6px;
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: -16px;
      width: 4px;
      height: 100%;
      background: #409eff;
    }
  }
  .red {
    font-style: normal;
    color: #f30;
  }
  .sel {
    width: 200px;
    :deep(.el-input__inner) {
      border-radius: 20px;
    }
  }
}
.tab-ul {
  display: flex;
  flex-wrap: wrap;
  .tab-li {
    width: calc(50% - 12px);
    margin: 0 12px 12px 0;
    &:nth-child(2n) {
      margin-right: 0;
    }
    .tab-tit {
      font-size: 15px;
      line-height: 40px;
      border: 1px solid #ebeef5;
      padding-left: 12px;
    }
  }
}
.btn-box {
  padding-top: 12px;
  text-align: right;
}
.remove-test {
  margin-left: 10px;
}
.input-with-select {
  width: 200px;
  height: 36px;
  margin-right: 50px;
  border-radius: 20px;
  border: 1px solid #e2e2e2;
  box-sizing: border-box;
  background: #fff;
  :deep(.el-input__inner) {
    border-radius: 20px;
    border: none;
    height: 34px;
    line-height: 34px;
    padding-right: 0;
  }
  :deep(.el-button) {
    padding: 12px;
  }
  :deep(.el-input-group__append),
  :deep(.el-input-group__prepend) {
    border: none;
    background: transparent;
  }
}
.select-all {
  padding-left: 16px;
}
</style>