front/src/views/career/zhiyuan/batch.vue

<template>
  <div class="simulation">
    <el-card  class="mt20 mb20">
      <div
        :style="{ 'background-image': backimg }"
        style="
          padding: 30px;
          margin: 10px 0;
          background-color: white;
          background-repeat: no-repeat;
          background-position: bottom right;
        "
      >
        <p style="color: #a6a6a6; font-size: 24px; font-weight: bold">
          BATCH CONTROL LINE
        </p>
        <p style="color: #414141; font-size: 24px; font-weight: bold">
          批次控制线
        </p>
        <hr
          class="layui-bg-orange"
          style="width: 40px; height: 4px; margin-top: 10px"
        />
      </div>
    </el-card>
    <el-card>
      <div>
        <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields" :invisible-fields="invisibleFields"
                      use-alias-mapping @query="handleQuery" />
      </div>
      <div class="content">
        <mx-table :rows="batchData" :propDefines="propDefines"> </mx-table>
        <pagination :total="pageForm.total" :autoScroll="false" @pagination="onChangePage" :page.sync="pageForm.pageNum"
                    :limit.sync="pageForm.pageSize"></pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {  pckzxList } from "@/api/webApi/career-other";
import MxCondition from '@/components/MxCondition/mx-condition'
import Pagination from '@/components/Pagination/index'
import { mapGetters } from 'vuex'
export default {
  components:  {
    MxCondition,
    Pagination
  },
  data() {
    return {
      queryParams: {
        location: '',
        yearAdmission: '',
      },
      firedParams: null,
      requireFields:['location', 'yearAdmission'],
      invisibleFields: ['location'],
      backimg:
        "url(" + require("@/assets/images/career/icon_colleges.png") + ")",
      batchData: [],
      pageForm: { pageNum: 1, pageSize: 20, total: 0 },
      propDefines: {
        year: {
          label: "年份",
        },
        location: {
          label: "省市",
        },

        typeName: {
          label: "批次/段",
        },
        course: {
          label: "科目",
        },
        score: {
          label: "控制分数线",
        },
//        pressureRange: {
//          label: "压线分区间",
//        },
      }
    };
  },
  computed:{
    ...mapGetters(['currentUser']),
  },
  created() {
    this.queryParams.location = this.currentUser.provinceName
  },
  methods: {
    handleQuery(model) {
      this.firedParams = model
      this.pageForm.pageNum = 1;
      this.getBatchList()
    },
    onChangePage(){
      this.getBatchList();
    },
    getBatchList() {
      pckzxList({
        ...this.firedParams,
        ...this.pageForm
      }).then((res) => {
        this.batchData = res.rows;
        this.pageForm.total = res.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: #47c6a2;
  margin-left: 0;
}
</style>