baoman / Ezquiz_Platform

<template>
  <div ref="main" class="page-container">
    <div class="page-content">
      <div class="content-header">
        <div class="tab-box">
          <span v-for="(item, index) in tabList" :key="item" class="tab-item" :class="type == index ? 'active' : ''"
            @click="setType(index)">{{ item }}</span>
        </div>
        <el-button class="setMinScore" @click="openDia" round size="small">对比成绩等级设置</el-button>
      </div>
      <div id="print-content" class="table-box" v-loading="loading">
        <el-table :max-height="tableMaxHeight" v-show="type == 0" :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" fixed align="center" width="60"></el-table-column>
          <el-table-column prop="className" label="班级" align="center" fixed></el-table-column>
          <el-table-column label="测验人数/班级人数" align="center" width="84">
            <template slot-scope="scope">
              <p v-for="(item, index) in scope.row.count.split('/')" :key="index">
                {{ item }}{{ index == 0 ? "/" : "" }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="percent" label="参与度" align="center"></el-table-column>
          <el-table-column prop="avg" label="班平均分" align="center"></el-table-column>
          <el-table-column prop="max" label="班最高分" sortable align="center"></el-table-column>
          <el-table-column prop="min" label="班最低分" sortable align="center"></el-table-column>

          <el-table-column v-for="(item, index) in defaultLevels.levels" :key="index" :label="item[0] + '数(率)'"
            align="center"><template slot-scope="scoped">
              <p class="p1">{{ scoped.row.levels[index].people }}</p>
              <p class="p1">({{ scoped.row.levels[index].percent }})</p>
            </template></el-table-column>
        </el-table>
        <el-table v-show="type == 1" :max-height="tableMaxHeight" :data="tableData2" border style="width: 100%">
          <el-table-column prop="rank" label="排名" sortable align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="className" label="班级" align="center"></el-table-column>
          <el-table-column prop="score" label="总分" sortable align="center"></el-table-column>
          <el-table-column prop="levelName" label="成绩等级" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="down">
        <div>
          <el-button v-loading="exportLoading" @click="exportData" type="primary" plain round
            icon="fa fa-cloud-download">导出报表</el-button>
          <el-button v-if="!this.$store.getters.code" @click="print" type="primary" plain round
            icon="el-icon-printer">打印</el-button>
        </div>
      </div>

      <el-dialog :append-to-body="true" :close-on-click-modal="false" title="等级设置" :visible.sync="diaLogBox"
        width="800px" @closed="closeDia">
        <el-form class="use-form">
          <el-form-item class="use-form-item-box">
            <el-form-item label="等级名称：" class="use-form-item">
              <el-select size="small" v-model="fromData.type" @change="changeType">
                <el-option label="优良合格不合格" :value="0"></el-option>
                <el-option label="ABCD" :value="1"></el-option>
                <el-option label="自定义" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="等级设置模式：" class="use-form-item">
              <el-select size="small" v-model="fromData.levelType">
                <el-option label="按分数比例" :value="0"></el-option>
                <el-option label="按已考人数比例" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <div class="dia-tab-box">
              <p class="dia-tab-tit">
                <span class="item1">编号</span>
                <span class="item2"><i>*</i>等级名称</span>
                <span class="item3"><i>*</i>等级最高</span>
                <span class="item3"><i>*</i>等级最低</span>
                <span class="item"></span>
              </p>
              <div class="dia-tab-item" v-for="(item, index) in fromData.levels" :key="index">
                <span class="item1">{{ index + 1 }}</span>
                <p class="item2">
                  <el-input class="score-ipt" v-model="item[0]" :maxlength="12"
                    @keydown.native="keydownRange($event)"></el-input>
                </p>
                <p class="item3">
                  <el-input class="score-ipt" type="number" v-model="item[1]" :min="item[2]"
                    :max="index == 0 ? 100 : fromData.levels[index - 1][2]"
                    @keydown.native="keydownRange($event)"></el-input>
                  %
                  <template v-if="fromData.levelType == 0">
                    ({{ index != 0 ? "不含" : ""
                    }}{{
            Number(((item[1] / 100) * examPaperScore).toFixed(1))
          }}分)
                  </template>
                  <template v-else>{{ index != 0 ? "不含" : "" }}</template>
                </p>
                <p>~</p>
                <p class="item3">
                  <el-input class="score-ipt" type="number" v-model="item[2]" :min="0" :max="item[1]"
                    @keydown.native="keydownRange($event)"></el-input>
                  %
                  <template v-if="fromData.levelType == 0">
                    ({{
            Number(((item[2] / 100) * examPaperScore).toFixed(1))
          }}分)
                  </template>
                </p>
                <p class="item">
                  <el-link type="danger" :underline="false" @click="fromData.levels.splice(index, 1)">删除</el-link>
                </p>
              </div>
              <div class="add">
                <p @click="fromData.levels.push(['', '', ''])">
                  <el-button size="mini" icon="el-icon-plus" circle type="primary"></el-button>添加一行
                </p>
              </div>
            </div>
          </el-form-item>
        </el-form>

        <div class="dialog-footer" slot="footer" align="center">
          <el-button type="danger" @click="savefrom">保存</el-button>
          <el-button @click="diaLogBox = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { downloadFile, tablePrint } from "@/utils";
export default {
  props: {
    role: "",
    ids: Array,
    subjectName: String,
    title: String,
  },
  data() {
    return {
      tabList: ["班级对比情况", "学生成绩排名"],
      type: 0,
      loading: false,
      exportLoading: false,
      diaLogBox: false,
      fromData: {
        type: 0,
        levelType: 0,
        levels: [
          ["优秀", 100, 90],
          ["良好", 89.9, 70],
          ["合格", 69.9, 60],
          ["不合格", 59.9, 0],
        ],
      },
      defaultLevels: {
        levelType: 0,
        levels: [],
      },
      tableMaxHeight: 600,
      tableData: [],
      tableData2: [],
      examPaperScore: 100, //卷面最高分
    };
  },
  async created() {
    this.examPaperScore = Number(this.$route.query.examPaperScore || 100)
    await this._QueryDefaultLevels();
    await this._QueryData();
  },
  destroyed() {
    sessionStorage.setItem("levelFromData", "");
  },
  methods: {
    // 禁止输入负数
    keydownRange(event) {
      if (event.key == "-" || event.key == "e") {
        event.returnValue = "";
      }
    },
    print() {
      tablePrint({
        id: "print-content",
        title: `多班_${this.subjectName}_${this.title}_测练成绩对比分析`
      }) 
    },
    setType(type) {
      this.tableMaxHeight = this.$refs.main.offsetHeight;
      this.type = type;
    },
    openDia() {
      this.diaLogBox = true;
    },
    closeDia() {
      let levelFromData = sessionStorage.getItem("levelFromData");
      if (levelFromData) {
        levelFromData = JSON.parse(levelFromData);
        this.fromData.type = levelFromData.type;
        this.fromData.levelType = levelFromData.levelType;
        this.fromData.levels = [...levelFromData.levels];
      } else {
        this.fromData.type = 0;
        this.fromData.levelType = this.defaultLevels.levelType;
        this.fromData.levels = [...this.defaultLevels.levels];
      }
    },
    changeType(val) {
      if (val == this.defaultLevels.type) {
        this.fromData.levels = [...this.defaultLevels.levels];
      } else {
        this.fromData.levels = this.fromData.levels.splice(0, 4);
        if (val == 0) {
          this.fromData.levels = this.fromData.levels.map((item, index) => {
            let arrTxt = ["优秀", "良好", "合格", "不合格"];
            return [arrTxt[index], item[1], item[2]];
          });
        } else if (val == 1) {
          this.fromData.levels = this.fromData.levels.map((item, index) => {
            let arrTxt = ["A", "B", "C", "D"];
            return [arrTxt[index], item[1], item[2]];
          });
        } else {
          this.fromData.levels = this.fromData.levels.map((item, index) => {
            return ["", item[1], item[2]];
          });
        }
      }
    },
    savefrom() {
      for (let i = 0; i < this.fromData.levels.length; i++) {
        if (this.fromData.levels[i].includes("")) {
          this.$message.warning("请补全编号" + (i + 1) + "设置信息！");
          return;
        }
      }
      if (this.fromData.levels.length == 0) {
        this.$message.warning("请添加等级设置！");
        return;
      }
      let nums = [];
      let ERR_OK = false;
      this.fromData.levels.map((item) => {
        nums.push(Number(item[1]));
        nums.push(Number(item[2]));
      });
      for (let i = 0; i < nums.length; i++) {
        if (nums[i + 1] && nums[i + 1] > nums[i]) {
          ERR_OK = true;
          this.$message.warning("高等级比例不能低于低等级比例！请检查");
          break;
        }
      }
      if (ERR_OK) return;
      this.tableData = [];
      this.tableData2 = [];
      this.defaultLevels.type = this.fromData.type;
      this.defaultLevels.levelType = this.fromData.levelType;
      this.defaultLevels.levels = [...this.fromData.levels];
      sessionStorage.setItem("levelFromData", JSON.stringify(this.fromData));
      this.diaLogBox = false;
      this._QueryData();
    },

    async _QueryDefaultLevels() {
      const { data, info, status } = await this.$request.defaultLevels();
      if (status === 0) {
        this.defaultLevels = { ...data } || {
          levelType: 0,
          levels: [
            ["优秀", 100, 90],
            ["良好", 89.9, 70],
            ["合格", 69.9, 60],
            ["不合格", 59.9, 0],
          ],
        };
        this.defaultLevels.type = 0
        this.fromData.levelType = this.defaultLevels.levelType;
        this.fromData.levels = [...this.defaultLevels.levels];
        sessionStorage.setItem(
          "levelFromData",
          JSON.stringify(this.defaultLevels)
        );
      } else {
        this.$message.error(info);
      }
    },
    async _QueryData() {
      let paramObj = JSON.parse(JSON.stringify(this.fromData))
      if (paramObj.levelType == 0) {
        paramObj.levels = paramObj.levels.map((item) => {
          item[1] = ((item[1] / 100) * this.examPaperScore).toFixed(1);
          item[2] = ((item[2] / 100) * this.examPaperScore).toFixed(1);
          return item;
        });
      }
      const { data, info, status } = await this.$request.examMultiClassReport({
        examIds: this.ids,
        ...paramObj,
      });
      if (status === 0) {
        this.examPaperScore = data.examPaperScore || 100;
        this.tableData = data.classes || [];
        this.tableData2 =
          data.students.map((item) => {
            item.score = Number(item.score);
            return item;
          }) || [];
      } else {
        this.$message.error(info);
      }
    },

    //导出
    async exportData() {
      if (this.exportLoading == true) return;
      this.exportLoading = true;
      let params = { ...this.fromData };
      if (params.levelType == 0) {
        params.levels = params.levels.map((item) => {
          let jsons = [...item]
          jsons[1] = ((jsons[1] / 100) * this.examPaperScore).toFixed(1);
          jsons[2] = ((jsons[2] / 100) * this.examPaperScore).toFixed(1);
          return jsons;
        });
      }
      const data = await this.$request.exportExamMultiReport({
        examIds: this.ids,
        levels: params.levels,
        levelType: params.levelType,
      });
      this.exportLoading = false;
      if (data) {
        let blob = new Blob([data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        downloadFile(
          `多班_${this.subjectName}_${this.title}_测练成绩对比分析.xlsx`,
          blob
        );
      } else {
        this.$message.error("下载失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  position: relative;
  height: 100%;

  .table-box {
    min-height: 100%;
  }

  &.active {
    overflow: hidden;
  }

  .content-header {
    width: 100%;
    position: relative;

    .setMinScore {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }

  .page-content {
    padding: 20px 20px 0;
  }
}

.tab-box {
  width: 400px;
  margin: 0 auto 12px;
  background: #f8f8f8;
  border-radius: 20px;
  display: flex;
  user-select: none;

  .tab-item {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    background: transparent;
    border-radius: 20px;
    cursor: pointer;

    &.active {
      background: #667ffd;
      color: #fff;
    }
  }
}

.down {
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.use-form {
  padding: 0 12px;

  .use-form-item-box {
    :deep(.el-form-item__content) {
      display: flex;
    }

    .use-form-item {
      width: 40%;
      margin-right: 20px;
    }
  }
}

.dia-tab-box {

  .dia-tab-tit,
  .dia-tab-item {
    margin-bottom: 10px;

    i {
      color: #f30;
      padding-right: 5px;
    }

    display: flex;

    .item {
      width: 40px;
    }

    .item1 {
      padding-left: 10px;
      width: 10%;
    }

    .item2 {
      width: 18%;
    }

    .item3 {
      padding-left: 12px;
      flex: 1;
    }

    .score-ipt {
      width: 100px;
    }
  }

  .dia-tab-tit {
    background: rgba(243, 243, 243, 1);
  }

  .add {
    display: flex;
    justify-content: center;
    margin: 0 auto;

    p {
      cursor: pointer;
    }

    .el-button {
      margin-right: 6px;
    }
  }
}

.p1 {
  line-height: 18px;
}
</style>