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" @query="handleQuery"
                      @invalid="handleInvalidQuery"></mx-condition>
      </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'
export default {
  components:  {
    MxCondition,
    Pagination
  },
  data() {
    return {
      queryParams: {
        location: '',
        yearAdmission: '',
      },
      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: "压线分区间",
        },
      }
    };
  },
  created() {
    this.getYears();
    this.getBatchList();
  },
  methods: {
    handleQuery() {
        this.getBatchList()
    },
    handleInvalidQuery() {
      console.log('query出错')
      this.round = {}
    },
    onChangePage(page){
      this.pageForm.pageSize = page.limit;
      this.pageForm.pageNum = page.page;
      this.getBatchList();
    },
    getBatchList() {
      pckzxList({
        ...this.pageForm,
        location: this.queryParams.location,
        year: this.queryParams.yearAdmission,
      }).then((res) => {
        this.batchData = res.rows;
        this.pageForm.total = res.total;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: #47c6a2;
  margin-left: 0;
}
</style>
<style lang="scss">
.radioInput {
  .el-radio {
    .el-radio__input {
      display: none;
    }
  }
}
.radioInput {
  display: flex;
  .el-radio-button .el-radio-button__inner {
    border-radius: 4px !important;
    border: none;
    padding: 5px 10px !important;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: none;
  }
  .radiaTitle {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    text-align: right;
    margin-top: 2px;
  }
}
.radioInput02 {
  display: flex;
  align-items: center;
  .radiaTitle {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    text-align: right;
    margin-top: 2px;
  }
  .el-input--medium .el-input__inner {
    border-radius: 50px;
  }
}
</style>