front/src/views/idc/reviewHistory/index.vue

<template>
  <div class="app-container">
    <form-search :searchformShow="searchFormShow" :validateRules="rules" @handleQuery="handleQuery" ref="formSearch">
    </form-search>
    <mx-table v-loading="loading" :rows="dataList" :propDefines="propDefines">
      <template #template-index={$index}>
        <span>{{(queryParams.pageNum-1)*queryParams.pageSize+$index+1}}</span>
      </template>
      <template #template-ranking-adjustment="{value}">
        <ranking-adjust :value="value"></ranking-adjust>
      </template>
      <template #template-action-detail="{row}">
        <el-button type="text" icon="el-icon-view" @click="detail(row)">查看详情</el-button>
      </template>
    </mx-table>
    <pagination v-show="false" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="50" @pagination="getList" />
  </div>
</template>

<script>
import {
  getStudentHistory,
  getClassHistory
} from "@/api/webApi/front";
import RankingAdjust from "@/components/RankingAdjust";
import {
  mapGetters
} from "vuex";

export default {
  components: {
    RankingAdjust
  },
  data() {
    return {
      total: 0,
      // 遮罩层
      loading: false,
      searchFormShow: {},
      rules: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        catalogId: "1",
        classId: "",
        customerCode: "",
        gradeId: "",
        subjectId: "",
        termId: "",
        typeId: "",
      },
      dataList: [],
      propDefines: {}
    };
  },
  computed: {
    isSimulateTeacher: function () {
      this.queryParams.classId = this.$route.query.classId
      return this.$route.query.isSimulateTeacher
    },
    isGradeMode: function () {
      return this.isFrontMaster && this.$route.name.includes('/grade-')
    },
    ...mapGetters(["isFrontStudent", "isFrontMaster"]),
  },
  created() {
    // 2021.7.20 hht 按需求删除searchFormShow.exam
    const prefix = this.isGradeMode ? { studentGradeId: '' }
      : !this.isFrontStudent && !this.isSimulateTeacher ? { class: "", clbum: "" } : {}
    this.searchFormShow = {
      ...prefix,
      userSubject: "",
      gradeid: "",
      semester: ""
    };
    // reset rules
    this.rules = {}
    const excludeKeys = ['class']
    Object.keys(this.searchFormShow).forEach(key => {
      if (!excludeKeys.includes(key))
        this.rules[key] = [{
          required: true,
          message: " ",
          trigger: "blur"
        }]
    })

    this.propDefines = this.isFrontStudent ? {
      index: {
        label: "序号",
        slot: "template-index"
      },
      evaluationName: {
        label: "考试名称"
      },
      gradeScoreRate: {
        label: "年级平均得分率"
      },
      classScoreRate: {
        label: "班级平均得分率"
      },
      scoreRate: {
        label: "个人得分率"
      },
      gradeRanking: {
        label: "年级排名"
      },
      ranking: {
        label: "班级排名"
      },
      rankingAdjust: {
        label: "浮动情况",
        slot: "template-ranking-adjustment"
      },
      actions: {
        label: "操作",
        slot: "template-action-detail"
      }
    } : {
      index: {
        label: "序号",
        slot: "template-index"
      },
      evaluationName: {
        label: "考试名称"
      },
      gradeScoreRate: {
        label: "年级平均得分率"
      },
      classScoreRate: {
        label: "班级平均得分率"
      },
      belowRate: {
        label: "低分率"
      },
      passRate: {
        label: "合格率"
      },
      aboveRate: {
        label: "优秀率"
      },
      gradeRanking: {
        label: "年级排名",
      },
      rankingAdjust: {
        label: "浮动情况",
        slot: "template-ranking-adjustment"
      },
      actions: {
        label: "操作",
        slot: "template-action-detail"
      }
    }
    this.$nextTick(() => {
      this.$refs.formSearch.validate((valid) => {
        if (valid) this.handleQuery();
      });
    });
  },
  methods: {
    detail(nextItem) {
      if (this.isGradeMode) {
        const transferParams = {
          catalogId: this.queryParams.catalogId,
          evaluationId: nextItem.evaluationId,
          evaluationName: nextItem.evaluationName,
        };
        this.$router.push({
          path: "/idc/reviewHistory/classList",
          query: transferParams,
        });
        return
      }

      const nextParams = {
        evaluationId: nextItem.evaluationId,
        evaluationClassId: nextItem.evaluationClassId,
        evaluationName: nextItem.evaluationName,
      };
      this.$router.push({
        path: "/idc/reviewHistory/userList",
        query: nextParams,
      });
    },
    // 选择图标
    selected(name) {
      this.form.icon = name;
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      var method = this.isFrontStudent ? getStudentHistory : getClassHistory;
      var methodName = this.isFrontStudent ?
        "getStudentHistory" :
        "getClassHistory";
      method(this.queryParams).then((rep) => {
        console.log(methodName + " rep=", rep);
        if (rep.code == 200 || rep.code == 0) {
          this.dataList = rep.rows || rep.data;
          this.total = rep.total || 0;
        } else {
          this.msgError(rep.msg || methodName + "请求异常");
        }
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery(ctrlParams = {}) {
      this.queryParams.pageNum = 1;
      this.queryParams.isSimulateTeacher = this.isSimulateTeacher;
      this.queryParams.studentGradeId = ctrlParams.studentGradeId;

      this.queryParams.termId = ctrlParams.semester || this.searchFormShow.semester || "";
      this.queryParams.typeId = ctrlParams.exam || this.searchFormShow.exam || "";
      this.queryParams.gradeId = ctrlParams.gradeid || this.searchFormShow.gradeid || "";
      this.queryParams.subjectId = ctrlParams.userSubject || this.searchFormShow.userSubject || "";
      this.queryParams.classId = this.queryParams.classId || ctrlParams.clbum || this.searchFormShow.clbum || "";
      this.getList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>