src/views/basic/askTestQuestion/report.vue

<template>
  <el-container class="default-body">
    <el-header>
      <div class="default-title">{{ dataType == "1" ? '随堂问报表' : '即时测报表' }}</div>
    </el-header>
    <div class="default-filter">
      <el-select @change="_changeClass" v-model="query.class" class="filter-select" placeholder="选择班级">
        <el-option v-for="item in  classList " :key="item.classId" :label="item.className" :value="item.classId" />
      </el-select>
      <el-select v-model="query.subject" v-if="role == 'ROLE_JIAOSHI'" placeholder="选择科目" class="filter-select">
        <el-option v-for="item in subjectList" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select v-model="query.subjects" multiple popper-class="select-popover-class" v-if="role == 'ROLE_BANZHUREN'"
        placeholder="选择科目" collapse-tags class="filter-select" style="width: 18%;">
        <el-checkbox :value="selectAll" @change="selectAllHandle">全部科目</el-checkbox>
        <el-option v-for="(item, index) in subjectList" :key="index" :value="item" :label="item">
          <el-checkbox :value="query.subjects.includes(item)" :label="item" />
        </el-option>
      </el-select>
      <el-date-picker class="filter-datePicker" @change="_dateChange" v-model="query.dateRange" type="daterange"
        range-separator="-" value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button type="primary" @click="_serach"> 筛选 </el-button>
      <el-radio-group v-model="dateStatus" class="default-date-radio-group">
        <el-radio-button label="onDay">今天</el-radio-button>
        <el-radio-button label="onWeek">本周</el-radio-button>
        <el-radio-button label="onMonth">本月</el-radio-button>
      </el-radio-group>
    </div>
    <el-main>
      <div style="position: relative">
        <el-tabs v-model="tabType" v-loading="queryLoading" type="card" class="default-tabs" :key="tabIndexs">
          <el-tab-pane v-if="dataType == 1 && role == 'ROLE_JIAOSHI'" :name="'0'" :label="`单课时报表`">
            <askListReport v-if="apiDatas.askReportList" :datas="apiDatas.askReportList" @opration="_serach" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 1 && role == 'ROLE_JIAOSHI'" :name="'1'" :label="`阶段报表`">
            <askSummaryReport ref="askSummaryReport" v-if="apiDatas.askReportIds" :askReportIds="apiDatas.askReportIds"
              :queryParams="query" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 1 && role == 'ROLE_BANZHUREN' && query.status == 'multi'" :name="'0'"
            :label="`多科表现`" :queryParams="query">
            <askBzrMulti v-if="apiDatas.askReportIds" :askReportIds="apiDatas.askReportIds" :queryParams="query" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 1 && role == 'ROLE_BANZHUREN' && query.status == 'single'" :name="'1'"
            :label="`单科表现`" :queryParams="query">
            <askSummaryReport :role="role" ref="askSummaryReport" v-if="apiDatas.askReportIds"
              :askReportIds="apiDatas.askReportIds" :queryParams="query" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 2 && role == 'ROLE_JIAOSHI'" :name="'0'" :label="`单卷报表`">
            <testListReport :datas="apiDatas.testReportList" @opration="_serach" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 2 && role == 'ROLE_JIAOSHI'" :name="'1'" :label="`阶段报表`">
            <testSummaryReport v-if="apiDatas.testReportIds" :testReportIds="apiDatas.testReportIds"
              @headerClick="_headerClick" :queryParams="query" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 2 && role == 'ROLE_JIAOSHI'" :name="'2'" :label="`多班对比报表`">
            <testMultiClassReport :params="query" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 2 && role == 'ROLE_BANZHUREN' && query.status == 'multi'" :name="'0'"
            :label="`多科表现`">
            <testBzrMulti v-if="apiDatas.testReportIds" :list="apiDatas.testReportList"
              :testReportIds="apiDatas.testReportIds" :queryParams="query" />
          </el-tab-pane>
          <el-tab-pane v-if="dataType == 2 && role == 'ROLE_BANZHUREN' && query.status == 'single'" :name="'1'"
            :label="`单科表现`">
            <testSummaryReport v-if="apiDatas.testReportIds" :role="role" :list="apiDatas.testReportList"
              :testReportIds="apiDatas.testReportIds" :queryParams="query" @headerClick="_headerClick" />
          </el-tab-pane>
          <div slot="tab-bar">
            <el-button type="primary" icon="el-icon-plus">新增</el-button>
          </div>
        </el-tabs>
        <!-- <el-button size='mini' v-if="role == 'ROLE_PERSONAL' || role == 'ROLE_JIAOSHI'" @click="_recycle"
          style='position: absolute;right:40px;top:5px;'>查看回收站</el-button> -->
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { setDateRules } from "@/utils";
export default {
  name: "repo",
  components: {
    askSummaryReport: () => import("./components/askSummaryReport.vue"),
    askListReport: () => import("./components/askListReport.vue"),
    testMultiClassReport: () => import("./components/testMultiClassReport.vue"),
    testListReport: () => import("./components/testListReport.vue"),
    testSummaryReport: () => import("./components/testSummaryReport.vue"),
    testBzrMulti: () => import("./components/testBzrMulti.vue"),
    askBzrMulti: () => import("./components/askBzrMulti.vue"),
  },
  data() {
    return {
      role: "",
      classList: [],
      subjectList: [],
      tabIndexs: 0,
      dataType: "1",
      tabType: null,
      checkedSubject: [],
      listPage: {
        page: 1,
        size: 20,
        total: 0,
      },
      query: {
        status: "multi",
        title: "",
        class: null,
        subject: null,
        subjects: [],
        dateRange: ["2022-03-01", "2026-05-01"],
        classIds: null,
        subjectName: null,
      },
      apiDatas: {
        askReportIds: null,
        askReportList: null,
        testReportIds: null,
        testReportList: null,
      },
      queryLoading: false,
      dateStatus: "0"
    };
  },
  watch: {
    'dateStatus' (val) {
      if (val == -1) return;
      var dateRange = setDateRules(val);
      this.query.dateRange = [dateRange.startDay, dateRange.endDay];
    },
    '$route'() {
      this.dataType = location.href.endsWith("askReport") ? "1" : "2";
      this._loadQueryDatas();
    },
    'query'(value) {
    },
    async 'query.subjects' (value) {
      if (this.role == "ROLE_BANZHUREN") {
        if (value.length == 1 && value[0] != '全部科目') {
          this.query.status = 'single';
          this.tabType = '1';
          await this._serach();
        }
        else {
          this.query.status = 'multi';
          if (this.role == 'ROLE_BANZHUREN')
            this.tabType = '0';
          else
            this.tabType = '1';
          await this._serach();
        }
      }
    }
  },
  async created() {
    this.dataType = location.href.endsWith("askReport") ? "1" : "2";
    this.code = this.$store.getters.csCode;
    this.role =
      this.$store.getters.info.showRole ||
      this.$store.getters.info.permissions[0].role;
    this.dateStatus = "onWeek";
    await this._loadQueryDatas();
  },
  computed: {
    selectAll() {
      return this.query?.subjects?.filter(f => f != '全部科目').length === this.subjectList.length;
    }
  },
  methods: {
    _dateChange() {
      this.dateStatus = -1;
    },
    selectAllHandle() {
      if (this.selectAll) this.query.subjects = [];
      else this.query.subjects = [...this.subjectList]
    },
    async _ReScore() {
      //重新记分 
      let { data, info, status } = await this.$request.reScore({
        examId: this.id,
      });
      if (status === 0) {
        this.$message.success(info);
        this._serach();
        this.paperModifyLog.modifiedTime = "";
        this.paperModifyLog.realName = "";
      } else {
        this.$message.error(info);
      }
    },
    async _changeClass() {
      await this._loadSubjectData();
    },
    async _loadSubjectData() {
      const fetchSubject =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTSubjectList
          : this.role == "ROLE_PERSONAL"
            ? this.$request.pSubjectList
            : this.$request.tSubjectList;
      const { data, status, info } = await fetchSubject({
        classId: this.query.class,
      });
      if (status != 0) {
        this.$message.error(info);
        return;
      }
      this.subjectList = data?.subjectNames ?? [];
      this.query.subject = data?.subjectNames[0] ?? "";
      this.checkedSubject = [...this.subjectList];
      this.query.subjects = this.checkedSubject;
    },
    async _loadClassData() {
      const fetchClassList =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTClassList
          : this.role == "ROLE_PERSONAL"
            ? this.$request.pClassList
            : this.$request.tClassList;
      const { data, status, info } = await fetchClassList();
      if (status != 0) {
        this.$message.error(info);
        return;
      }
      this.classList = data?.list ?? [];
      this.query.class = this.classList[0]?.classId;
    },
    async _loadQueryDatas() {
      // this.$loading.open();
      await this._loadClassData();
      await this._loadSubjectData();
      // this.$loading.close();
      await this._serach();
    },
    _recycle() { },
    async _serach() {
      this.queryLoading = true;
      var queryParams = {
        classId: "",
        classIds: [],
        startDay: "",
        endDay: "",
        subjectNames: [],
      };
      queryParams.classId = this.query.class;
      queryParams.classIds = [this.query.class];
      if (this.query.subjects && this.role == 'ROLE_BANZHUREN') {
        queryParams.subjectNames = this.query.subjects;
        queryParams.subject = queryParams.subjectNames[0];
      }
      else {
        queryParams.subjectNames = [this.query.subject];
      }
      queryParams.startDay = this.query.dateRange
        ? this.query.dateRange[0]
        : "";
      queryParams.endDay = this.query.dateRange ? this.query.dateRange[1] : "";
      if (this.dataType == "1") {
        this.apiDatas.askReportList = [];
        this.apiDatas.askReportIds = [];
        let fetchReportList =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExamReportList
            : this.$request.periodReportList;
        const askReportResponse = await fetchReportList({
          ...queryParams,
          page: this.page,
          size: 9999,
        });
        if (askReportResponse.status != 0) {
          this.$message.error(askReportResponse.info);
          return;
        }
        
        this.apiDatas.askReportList = [...askReportResponse?.data?.list ?? []];
        this.apiDatas.askReportIds = [... this.apiDatas?.askReportList?.map((item) => item.id) ?? []];
        if (this.$refs["askSummaryReport"]) {
          this.$refs["askSummaryReport"].refresh();
        }
      } else if (this.dataType == "2") {
        this.apiDatas.testReportList = [];
        this.apiDatas.testReportIds = [];
        let fetchReportList =
          this.role == "ROLE_PERSONAL"
            ? this.$request.pExamReportList
            : this.$request.examReportList;
        const testReportResponse = await fetchReportList({
          ...queryParams,
          page: this.page,
          size: 9999,
        });
        if (testReportResponse.status != 0) {
          this.$message.error(testReportResponse.info);
          return;
        }
        this.apiDatas.testReportList = [...testReportResponse?.data?.list ?? []];
        this.apiDatas.testReportIds = [...this.apiDatas.testReportList?.map((item) => item.id) ?? []];
      }
      this.tabIndexs += 1;
      this.queryLoading = false;
    },
    _detailQ(id) {
      let routerItem = {
        path: "/askPreparationQuestionsDetail",
        query: { id: id },
      };
      this.$router.push(routerItem);
    },
    _delete() { },
    _updateQ(id) {
      let routerItem = {
        path: "/askPreparationQuestionsUpdate",
        query: { paperId: id, paperType: 1 },
      };
      this.$router.push(routerItem);
    },
    _headerClick(row) {
      this.$router.push({
        path: "/testReportDetail",
        query: {
          dataType: 2,
          classIds: this.query.class,
          id: row.examId,
          title: row.title
        },
      });
    },
    async _deleteDetermineQ(id) {
      let modifyPaper =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pModifyPaper
          : this.$request.modifyPaper;
      const { data, status, info } = await modifyPaper({
        paperId: id,
        status: 2,
      });
      if (status != 0) {
        this.$message.error(info);
      }
      this.page = 1;
      this._serach();
    }
  },
};
</script>
<style lang="scss">
/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view>.el-checkbox {
  padding: 5px 20px;
}
/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view>li .el-checkbox {
  pointer-events: none;
}
/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view>li::after {
  display: none;
}
.el-tabs__content {
  padding-left: 20px !important;
  padding-right: 0px !important;
  padding-top: 20px !important;
}
.el-tabs__header {
  margin: 0px !important;
}
.card-content {
  .descption-tag {
    display: inline-block;
    background: rgba(102, 127, 253, 0.1);
    border-radius: 4px 4px 4px 4px;
    color: #667ffd;
    line-height: 32px;
    padding: 0 10px;
    height: 32px;
    margin-right: 10px;
  }
  margin-bottom: 10px;
  height: 180px;
  border: 1px solid #e6e9f4;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.08);
  margin-right: 20px;
  background: #ffffff;
  .content {
    margin-top: 15px !important;
    padding-left: 10px !important;
    font-size: 14px;
    font-weight: 400;
    .descption-tag-text {
      margin-bottom: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .descption-text {
      height: 30px;
      margin-top: 10px;
      .descption-text-block {
        margin-right: 10px;
        display: flex;
        justify-content: flex-start;
        .sharing-descption {
          flex: 1;
          color: gray;
          opacity: 0.5;
          text-align: right;
        }
        img {
          height: 20px;
          width: 20px;
          margin-right: 5px;
        }
      }
    }
    .title-text {
      font-weight: bold;
      font-size: 20px;
      color: #303133;
      line-height: 28px;
      height: 28px;
      text-transform: none;
      padding-bottom: 10px !important;
      .dropdown-button {
        .el-button {
          background-color: #667ffd !important;
          color: white;
        }
        float: right;
        margin-right: 20px;
      }
    }
  }
  .left {
    height: 180px;
    background-color: #41cc95;
    vertical-align: middle;
    border-radius: 10px 0px 0px 10px;
    .left-icon {
      margin-top: 26px;
      height: 70px;
      .icon {
        height: 100px;
        width: 100px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 61px 61px 61px 61px;
        margin: auto;
        text-align: center;
        img {
          margin-top: 24px;
          height: 52px;
          width: 52px;
        }
      }
      .text {
        width: 100%;
        text-align: center;
        margin-top: 5px;
        font-size: 20px;
        color: #ffffff;
      }
    }
  }
  .right {
    .el-button {
      background-color: #667ffd;
      line-height: 16px;
      color: #ffffff;
      margin-top: 15px;
      padding: 10px 20px !important;
    }
  }
}
.el-popconfirm__action {
  margin-top: 10px;
}
</style>