src/views/basic/ask/list.vue

<template>
  <div class="main" ref="main">
    <back-box v-show="!isDetail">
      <template slot="title">
        <span>随堂问-数据报表</span>
      </template>
      <template slot="btns">
        <el-tooltip
          v-if="this.role != 'ROLE_PERSONAL' && !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 v-show="!isDetail" class="table-box">
      <div class="table-cont" v-loading="loading">
        <p class="btn-box" v-if="tableData.length">
          <el-button type="primary" round @click="linkToDetail2"
            >查看汇总报表</el-button
          >
        </p>
        <div>
          <el-table
            :data="tableData"
            border
            :show-header="total > 0"
            style="width: 100%"
          >
            <el-table-column align="center" width="48">
              <template slot-scope="scope">
                <el-checkbox
                  v-model="multipleSelection"
                  :label="scope.row.id"
                  :disabled="checkboxDisabled(scope.row)"
                  ><span></span
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="subjectName"
              label="科目"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="title"
              label="课时名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="participationRate"
              label="总参与度"
              align="center"
            >
              <template slot-scope="scoped"
                >{{ scoped.row.participationRate }}%</template
              ></el-table-column
            >
            <el-table-column
              prop="answerCorrectRate"
              label="已答总正确率"
              align="center"
              ><template slot-scope="scoped"
                >{{ scoped.row.answerCorrectRate }}%</template
              >
            </el-table-column>
            <el-table-column
              prop="classCorrectRate"
              label="班级总正确率"
              align="center"
              ><template slot-scope="scoped"
                >{{ scoped.row.classCorrectRate }}%</template
              ></el-table-column
            >
            <el-table-column
              prop="questionNum"
              label="题目总数"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="startTime"
              label="上课时间"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scoped">
                <template v-if="scoped.row.answerNum == 0">
                  <el-tooltip
                    v-if="role != 'ROLE_BANZHUREN'"
                    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-else effect="dark" content="详情" placement="top">
                  <el-button
                    type="primary"
                    circle
                    size="mini"
                    icon="fa fa-arrow-right"
                    @click="linkToDetail(scoped.row, 1)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  v-if="role != 'ROLE_BANZHUREN'"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    type="primary"
                    circle
                    size="mini"
                    icon="el-icon-delete"
                    @click="remove(scoped.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <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>
    <router-view v-show="isDetail"></router-view>
  </div>
</template>
<script>
import { downloadFile } from "utils";
export default {
  data() {
    return {
      gdClass: 0, //已归档班级数量
      code: "",
      role: "",
      loading: false,
      query: {
        //搜索条件
        classId: "",
        subjectNames: [],
        startDay: "",
        endDay: "",
      },
      tableData: [],
      multipleSelection: [],
      multipleSelectionObj: {},
      page: 1,
      size: 20,
      total: 0,
    };
  },
  computed: {
    isDetail: function () {
      let bol = this.$route.name == "随堂问报表分析" ? true : false;
      return bol;
    },
  },
  async created() {
    this.code = this.$store.getters.csCode;
    this.init();
  },
  watch: {
    "$route.query.params": function (nVal) {
      let isFromAskDetail = sessionStorage.getItem("isFromAskDetail");
      if (!isFromAskDetail && nVal) {
        this.init();
      }
    },
    multipleSelection: {
      handler: function (nVal) {
        this.multipleSelectionObj[this.page] = this.tableData.filter((item) =>
          nVal.includes(item.id)
        );
      },
      deep: true,
    },
  },
  methods: {
    //初始化
    init() {
      const queryData = this.$route.query.params;
      queryData
        ? (this.query = { ...this.query, ...JSON.parse(queryData) })
        : "";
      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;
      if (this.role != "ROLE_PERSONAL") {
        this._QueryGdClass();
      }
      this.$store.commit("setClasses", this.query.classId);
      this.page = 1;
      this.total = 0;
      this.tableData = [];
      this._QueryData();
    },
    //归档
    toArchiving() {
      this.$router.push({
        path: "/askArchiving",
      });
    },
    // 班主任教学班不能与行政班汇总
    checkboxDisabled(obj) {
      if (this.role == "ROLE_BANZHUREN") {
        let classId =
          (this.multipleSelectionObj[1] &&
            this.multipleSelectionObj[1][0]?.classId) ||
          "";
        if (classId) {
          return obj.classId == classId ? false : true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    //去详情
    linkToDetail(obj, types) {
      this.$router.push({
        path: "/askAnalysis",
        query: {
          id: JSON.stringify([obj.id]),
          types: types,
          subjectNames: obj.subjectName,
          params: this.$route.query.params,
          className: this.$route.query.className,
        },
      });
    },
    //去详情
    linkToDetail2() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("未选择课时，请选择～");
        return;
      }
      let subjectArr = [];
      let classId = "";
      let multipleData = [];
      let multipleSelectionData = [];
      Object.keys(this.multipleSelectionObj).map((keys) => {
        multipleSelectionData = multipleSelectionData.concat(
          this.multipleSelectionObj[keys]
        );
      });
      multipleSelectionData.map((item) => {
        if (this.multipleSelection.includes(item.id)) {
          subjectArr.push(item.subjectName);
          multipleData.push(item);
          classId = item.classId;
        }
      });
      subjectArr = [...new Set(subjectArr)];
      if (this.multipleSelection.length == 1) {
        this.$router.push({
          path: "/askAnalysis",
          query: {
            id: JSON.stringify(this.multipleSelection),
            types: 1,
            subjectNames: subjectArr[0],
            params: this.$route.query.params,
          },
        });
      } else {
        this.$router.push({
          path: "/askAnalysis",
          query: {
            id: JSON.stringify(this.multipleSelection),
            types:
              this.multipleSelection.length == 1
                ? 1
                : subjectArr.length == 1
                ? 2
                : 3,
            subjectNames: subjectArr.join(","),
            params: this.$route.query.params,
            classId: classId,
          },
        });
      }
    },
    //删除
    async remove(obj) {
      const { data, status, info } = await this.$request.deletePaperReport({
        id: obj.id,
      });
      if (status === 0) {
        this.$message.success(info);
        this._QueryData();
      } else {
        this.$message.error(info);
      }
    },
    //修改答案
    async edit(item) {
      this.$router.push({
        path: "/examinationPaperEdit",
        query: {
          paperId: item.id,
          title: item.title,
          type: 3,
        },
      });
    },
    changePage(page) {
      this.page = page;
      this._QueryData();
    },
    async _QueryGdClass() {
      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 _QueryData() {
      this.loading = true;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "" || this.query[key].length != 0) {
          query[key] = this.query[key];
        }
      }
      const periodReportList =
        this.role == "ROLE_PERSONAL"
          ? this.$request.pPhaseInteractiveReport
          : this.$request.periodReportList;
      const { data, status, info } = await periodReportList({
        ...query,
        page: this.page,
        size: this.size,
      });
      this.loading = false;
      if (status === 0) {
        this.tableData = (data?.list && [...data?.list]) || [];
        this.total = data?.count || 0;
      } else {
        this.$message.error(info);
      }
    },
    //导出
    async exportData() {
      if (this.exportLoading == true) return;
      let query = {};
      for (let key in this.query) {
        if (this.query[key] != "" || this.query[key].length != 0) {
          query[key] = this.query[key];
        }
      }
      this.exportLoading = true;
      let exportData =
        this.role == "ROLE_BANZHUREN"
          ? this.$request.cTExportPhaseInteractiveReport
          : this.role == "ROLE_PERSONAL"
          ? this.$request.pExportPhaseReport
          : this.$request.exportPhaseInteractiveReport;
      const data = await exportData({ ...query });
      this.exportLoading = false;
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile("随堂问-数据报表.xlsx", blob);
      } else {
        this.$message.error("下载失败");
      }
    },
  },
};
</script>
<style>
div::-webkit-scrollbar {
  width: 3px;
  height: 10px;
}
div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}
</style>
<style lang="scss" scoped>
.main {
  height: 100%;
}
.table-box {
  padding: 16px;
  border-radius: 5px;
  .table-cont {
    min-height: 300px;
  }
  :deep(.fa-arrow-right) {
    padding-left: 2px;
  }
  :deep(.fa-file-text) {
    padding-left: 2px;
  }
}
.btn-box {
  text-align: right;
  padding: 0 12px 16px;
  position: sticky;
  top: 4px;
  z-index: 10;
}
</style>