baoman / Ezquiz_Platform

  <template>
    <div ref="main" class="page-container">
      <back-box v-show="!isDetail">
        <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 v-show="!isDetail" class="table-box" v-loading="loading">
        <div v-if="!isMultipleClass">
          <p class="btn-box">
            <el-button type="primary" round @click="linkToDetail2">查看汇总报表</el-button>
          </p>
          <el-table :data="tableData" :max-height="tableMaxHeight" border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="subjectName" label="科目" align="center"></el-table-column>
            <el-table-column prop="className" label="班级" align="center"></el-table-column>
            <el-table-column prop="title" label="试卷名称" align="center"></el-table-column>

            <el-table-column prop="examPaperScore" label="卷面分" align="center"></el-table-column>

            <el-table-column label="测验人数/班级人数" align="center">
              <template slot-scope="scoped">{{ `${scoped.row.answeredNum}/${scoped.row.classPersonNum}` }}</template>
            </el-table-column>
            <el-table-column prop="examStartTime" label="测验开始时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scoped">
                <el-tooltip v-if="scoped.row.answerNum != 0 || scoped.row.recordStatus != 0
                  " 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">
                  <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" @click="openScoreSet(scoped.row)">分</el-button>
                </el-tooltip> -->

                <el-tooltip v-else effect="dark" content="答卷录分" placement="top">

                  <el-button type="primary" circle size="mini" @click="openScoreSet(scoped.row)">分</el-button>
                </el-tooltip>

                <el-popconfirm v-if="role != 'ROLE_BANZHUREN'" title="确定删除吗？"
                  @confirm="removeReport(scoped.row, scoped.$index)">
                  <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 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>

          <ScoreSet v-show="diaScoreSet" :diaScoreSet="diaScoreSet" :role="role" :id="examId" :title="examTitlt"
            :examScore="examScore" @closeScoreSet="closeScoreSet" />

        </div>
        <div v-else>
          <el-table :data="tableData" :max-height="tableMaxHeight" border style="width: 100%">
            <el-table-column prop="subjectName" label="科目" align="center"></el-table-column>
            <el-table-column prop="classList" label="班级" align="center">

              <template slot-scope="scoped">

                <span v-for="(item, index) in scoped.row.classNames">{{ `${index == 0 ? '' : '/'}` + item }}</span>

              </template>

            </el-table-column>
            <el-table-column prop="title" label="试卷名称" align="center"></el-table-column>

            <el-table-column prop="examPaperScore" label="卷面分" align="center"></el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scoped">
                <el-button type="primary" circle size="mini" icon="el-icon-arrow-right"
                  @click="linkContrast(scoped.row)"></el-button>
              </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>
      <router-view v-show="isDetail"></router-view>
    </div>
  </template>
  
  <script>
  import ScoreSet from "./components/scoreSet.vue"
  export default {
    components: {
      ScoreSet
    },
    data() {
      return {
        code: "",
        gdClass: 0, //已归档班级数量
        tableMaxHeight: null,
        role: "",
        loading: false,
        diaScoreSet: false,
        examId: "",//当前操作试卷
        examTitlt: "",//当前操作试卷名称
        examScore: 0,//当前操作试卷卷面总分
        query: {
          //搜索条件
          classId: [],
          subjectNames: [],
          startDay: "",
          endDay: "",
        },
        multipleSelection: [],
        tableData: [],
        page: 1,
        size: 20,
        total: 0,
        isMultipleClass: false,
      };
    },
    computed: {
      isDetail: function () {
        let bol = (this.$route.name == "即时测报表分析") ? true : false
        return bol
      }
    },
    async created() {

      this.code = this.$store.getters.csCode;

      this.init()
    },
    mounted() {
      this.tableMaxHeight = this.$refs.main.offsetHeight;
    },
    watch: {
      "$route.query.params": function (nVal) {
        let isFromTestDetail = sessionStorage.getItem("isFromTestDetail");
        if (!isFromTestDetail && nVal) {
          this.init()
        }
      }
    },
    methods: {
      //初始化
      init() {
        const queryData = this.$route.query.params
        queryData ? this.query = { ...this.query, ...JSON.parse(queryData) } : ''
        console.log(this.query)

        this.$store.commit('setClasses', this.query.classId.join(','))

        if (this.query.classId.length > 1) {
          this.isMultipleClass = true
        }
        this.role =
          this.$store.getters.info.showRole ||
          this.$store.getters.info.permissions[0].role;
        if (this.role != "ROLE_PERSONAL") {
          this._QueryGdClass()
        }
        this.page = 1
        this.total = 0
        this.tableData = []
        this._QueryData()
      },
      //归档列表
      toArchiving() {
        this.$router.push({
          path: "/testArchiving",
        });
      },
      //跳转单卷分析
      linkTo(obj) {
        //去详情
        this.$router.push({
          path: "/testAnalysis",
          query: {
            id: obj.id,
            title: obj.title,
            score: obj.examPaperScore || 0,
            type: 1,

            subjectName: obj.subjectName,
            classId: this.query.classId[0],
            params: this.$route.query.params

          },
        });
      },
      //汇总跳转-多卷
      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)]
        console.log(subjectArr)
        if (ids.length == 1) {
          this.$router.push({
            path: "/testAnalysis",
            query: {
              id: ids[0],
              title: this.multipleSelection[0].title,
              score: this.multipleSelection[0].examPaperScore || 0,
              type: 1,

              subjectName: subjectArr.join(),
              classId: this.query.classId[0],
              params: this.$route.query.params

            },
          });
        } else {
          //去详情
          this.$router.push({
            path: "/testAnalysis",
            query: {
              ids: ids.join(),
              classId: this.query.classId[0],
              type: subjectArr.length == 1 ? 2 : 3,

              subjectName: subjectArr.join(),
              params: this.$route.query.params

            },
          });
        }
      },
      // 多班对比
      linkContrast(obj) {

        console.log(obj)

        this.$router.push({
          path: "/testAnalysis",
          query: {

            ids: obj.ids.join(','),
            classId: obj.classIds.join(','),

            subjectName: obj.subjectName,
            title: obj.title,

            type: 4,

            examPaperScore: obj.examPaperScore,

            params: this.$route.query.params

          },
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //打开答卷录分
      openScoreSet(obj) {

        console.log(obj)

        this.examId = String(obj.id);

        this.examTitlt = obj.title;

        this.examScore = obj.examPaperScore;

        this.diaScoreSet = true;
      },
      //关闭设置分数
      closeScoreSet() {
        this.diaScoreSet = false
      },
      //修改答案
      edit(item) {
        this.$router.push({
          path: "/examinationPaperEdit",
          query: {
            paperId: item.id,
            title: item.title,
            type: 2,
          },
        });
      },

      //删除即时测考试
      async removeReport(obj, index) {
        this.tableData[index].loading = true;
        const { data, status, info } = await this.$request.deleteReport({
          id: obj.id,
        });
        if (status === 0) {
          this.$message.success("删除成功！");
          this.tableData.splice(index, 1);
        } else {
          this.$message.error(info);
        }
      },

  
      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);
        }
      },
      changePage(page) {
        this.page = page;
        this._QueryData();
      },
      async _QueryData() {
        this.loading = true;
        let query = {};
        for (let key in this.query) {
          if (this.query[key] != "") {

            if (key == 'classId') {

              if (this.query.classId?.length == 1) {

                query.classId = this.query[key][0]
              } else {
                query.classIds = [...this.query[key]]
              }
            } else {
              query[key] = this.query[key];
            }

          }
        }
        const examReportList = this.role == "ROLE_PERSONAL" ?
          this.$request.pExamReportList : this.$request.examReportList
        const { data, status, info } = await examReportList({
          ...query,
          page: this.page,
          size: this.size,
        });
        this.loading = false;
        if (status === 0) {

          if (this.query.classId.length > 1) {
            //多班级
            let tableObj = {};
            data?.list?.map((item) => {
              if (tableObj[item.examPaperId]) {

                // 没有班级考试的添加
                if (!tableObj[item.examPaperId].classIds.includes(item.classId)) {
                  tableObj[item.examPaperId].ids.push(item.id)
                  tableObj[item.examPaperId].classIds.push(item.classId)
                  tableObj[item.examPaperId].classNames.push(item.className)
                } else {
                  //已经考过班级的新的替换老的
                  let idx = tableObj[item.examPaperId].classIds.indexOf(item.classId)
                  if (tableObj[item.examPaperId].ids[idx] < item.id) {
                    tableObj[item.examPaperId].ids[idx] = [item.id]
                    tableObj[item.examPaperId].title = item.title
                  }
                }

              } else {
                tableObj[item.examPaperId] = {
                  ids: [item.id],
                  examPaperId: item.examPaperId,
                  classIds: [item.classId],
                  classNames: [item.className],
                  title: item.title,
                  examPaperScore: item.examPaperScore,
                  subjectName: item.subjectName
                }
              }
            });
            Object.keys(tableObj).map(keys => {
              if (tableObj[keys].classIds.length > 1) {
                this.tableData.push(tableObj[keys])
              }
            })
          } else {
            this.tableData = (data?.list && [...data?.list]) || [];
            this.total = data?.count || 0;
          }

        } else {
          this.$message.error(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>

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

  .page-container {
    position: relative;
    height: 100%;
  
    &.active {
      overflow: hidden;
    }
  }
  
  .table-box {
    margin: 20px;
    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;
  }
  
  .btn-box {
    text-align: right;
    padding: 0 12px 16px;
  }
  </style>