baoman / Ezquiz_Platform

  <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="linkToAsk">筛选</el-button>

            <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> -->

                  <el-checkbox v-model="multipleSelection" :label="scope.row.id"><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-popconfirm v-if="role != 'ROLE_BANZHUREN'" title="确定删除吗？" @confirm="remove(scoped.row)">
                    <el-button class="remove-test" slot="reference" type="danger" circle size="mini" icon="el-icon-delete"
                      :loading="scoped.row.loading"></el-button>

                  </el-popconfirm>

                </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;

        }

      },

      //去筛选
      linkToAsk() {
        this.$router.push({
          path: "/ask",
        });
      },

      //去详情
      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 classIds = [];

        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);

            classIds.push(item.classId);

          }
        });
        subjectArr = [...new Set(subjectArr)];

        classIds = [...new Set(classIds)];

        if (this.multipleSelection.length == 1) {
          this.$router.push({
            path: "/askAnalysis",
            query: {
              id: JSON.stringify(this.multipleSelection),
              types: 1,
              subjectNames: subjectArr[0],

              classIds: classIds,

              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,
              classIds: classIds,

            },
          });
        }

      },

      //删除

      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%;
  }

  .remove-test {
    margin-left: 10px;
  }

  .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 {

    display: flex;
    justify-content: space-between;
    padding: 0 12px 16px 0;

    position: sticky;
    top: 4px;
    z-index: 10;

  }

  </style>