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

<template>
  <div class="simulation">
    <el-card   class="mt20 mb20">
      <div
        :style="{ 'background-image': backimg }"
        class="back"
      >
        <p class="f24 bold" style="color: #a6a6a6">
          BATCH CONTROL LINE
        </p>
        <p class="f24" style="color: #414141;">
          一分一段
        </p>
        <hr
          class="layui-bg-orange f24 bold mt10"
          style="width: 40px; height: 4px"
        />
      </div>
    </el-card>
    <el-card>
      <mx-condition ref="condition" :query-params="queryParams" @query="handleQuery"
                    @invalid="handleInvalidQuery"></mx-condition>
      <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 {
  yfydList,
} from "@/api/webApi/career-other";
import MxCondition from '@/components/MxCondition/mx-condition'
import Pagination from '@/components/Pagination'

export default {
  components:  {
    MxCondition,
    Pagination
  },
  data() {
    return {
      queryParams: {
        yfydLocation: '',
        yfydYear: '',
        yfydMode: '',
      },
      pageForm: { pageNum: 1, pageSize: 10, total: 0 },
      backimg:
        "url(" + require("@/assets/images/career/icon_colleges.png") + ")",
      batchData: [],
      score: '',
      propDefines: {
        location: {
          label: "地域",
        },
        year: {
          label: "年份",
        },
        mode: {
          label: "科类",
        },
        score: {
          label: "分数",
        },
        num: {
          label: "人数",
        },
        numTotal: {
          label: "累计人数",
        },
      }
    };
  },
  created() {
  },
  methods: {
    handleInvalidQuery() {

    },
    onChangePage(page){
      this.pageForm.pageSize = page.limit;
      this.pageForm.pageNum = page.page;
      this.getYfydList();
    },
    handleQuery() {
      this.pageForm.pageNum = 1
      this.getYfydList()
    },
    getYfydList() {
      yfydList({
        year: this.queryParams.yfydYear,
        location: this.queryParams.yfydLocation,
        mode: this.queryParams.yfydMode,
        score: this.score,
        ...this.pageForm}).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;
}
.back{
  padding: 30px;
  margin: 10px 0;
  background-color: white;
  background-repeat: no-repeat;
  background-position: bottom right;
}
</style>