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%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></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: [],
      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()
      }
    }
  },
  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",
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //去详情
    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 = []
      const ids = this.multipleSelection.map(item => {
        subjectArr.push(item.subjectName)
        return item.id
      })
      subjectArr = [...new Set(subjectArr)]
      this.$router.push({
        path: "/askAnalysis",
        query: {
          id: JSON.stringify(ids),
          types: this.multipleSelection.length == 1 ? 1 : subjectArr.length == 1 ? 2 : 3,
          subjectNames: subjectArr.join(','),
          params: this.$route.query.params,
          className: this.$route.query.className,
        },
      });
    },
    //删除
    remove(obj) {
      const { data, status, info } = 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;
}
</style>