模拟志愿-- 批次控制线调整, 整合mx-condition、pagination

src/components/MxCondition/condition-object/condition-location.js

@@ -0,0 +1,20 @@
+import conditionObjectBase from '../condition-object-base.js'
+import { locations } from "@/api/webApi/career-other";
+
+export default {
+  ...conditionObjectBase,
+  key: 'location',
+  title: '地域',
+  getList: function(param) {
+    return new Promise((resolve, reject) => {
+      locations().then(res => resolve(res.rows))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item
+  },
+  getLabel: function(item) {
+    return item
+  }
+}

src/components/MxCondition/condition-object/condition-year-admission.js

@@ -0,0 +1,24 @@
+import conditionObjectBase from '../condition-object-base.js'
+import { years } from "@/api/webApi/career-other";
+
+export default {
+  ...conditionObjectBase,
+  dependentKeys: ['location'],
+  key: 'yearAdmission',
+  title: '学年',
+  isDependencyReady(params) {
+    return params.location
+  },
+  getList: function(param) {
+    return new Promise((resolve, reject) => {
+      years(param).then(res => resolve(res.rows))
+        .catch(e => reject(e))
+    })
+  },
+  getCode: function(item) {
+    return item
+  },
+  getLabel: function(item) {
+    return item
+  }
+}

src/views/career/zhiyuan/batch.vue

@@ -1,200 +1,159 @@
-<template>
-  <div class="simulation">
-    <el-card ref="UniversitiesColleges" style="margin: 20px 0">
-      <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>
-        <el-row class="radioInput">
-          <div>
-            <span class="radiaTitle">地域:</span>
-          </div>
-          <el-radio-group v-model="form.location" @change="locationChange">
-            <el-radio-button label="">所有</el-radio-button>
-            <el-radio-button
-              v-for="item in locations"
-              :key="item"
-              :label="item"
-              style="margin-bottom: 10px"
-            ></el-radio-button>
-          </el-radio-group>
-        </el-row>
-        <el-row class="radioInput">
-          <div>
-            <span class="radiaTitle">录取年份:</span>
-          </div>
-          <el-radio-group v-model="form.year" @change="yearChange">
-            <el-radio-button label="">所有</el-radio-button>
-            <el-radio-button
-              v-for="item in years"
-              :key="item"
-              :label="item"
-              style="margin-bottom: 10px"
-            ></el-radio-button>
-          </el-radio-group>
-        </el-row>
-      </div>
-      <div class="content">
-        <mx-table :rows="batchData" :propDefines="propDefines"> </mx-table>
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pageForm.pageNum"
-          :page-sizes="[5, 10, 20, 40]"
-          :page-size="pageForm.pageSize"
-          layout=" prev,pager,next,jumper,total,sizes"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-import { locations, years, pckzxList } from "@/api/webApi/career-other";
-export default {
-  data() {
-    return {
-      backimg:
-        "url(" + require("@/assets/images/career/icon_colleges.png") + ")",
-      locations: [],
-      years: [],
-      form: { location: "", year: "" },
-      batchData: [],
-      pageForm: { pageNum: 1, pageSize: 10 },
-      propDefines: {
-        location: {
-          label: "地域",
-        },
-        year: {
-          label: "年份",
-        },
-        typeName: {
-          label: "批次",
-        },
-        score1: {
-          label: "文科",
-        },
-        score2: {
-          label: "理科",
-        },
-      },
-      total: 0,
-    };
-  },
-  created() {
-    this.getLocations();
-    this.getYears();
-    this.getBatchList();
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.pageForm.pageSize = val;
-      this.getBatchList();
-    },
-    handleCurrentChange(val) {
-      this.pageForm.pageNum = val;
-      this.getBatchList();
-    },
-    locationChange(e) {
-      this.getYears();
-      this.pageForm.pageNum = 1;
-      this.getBatchList();
-    },
-    yearChange(e) {
-      this.pageForm.pageNum = 1;
-      this.getBatchList();
-    },
-    getLocations() {
-      locations().then((res) => {
-        this.locations = res.rows;
-        console.log(res);
-      });
-    },
-    getYears() {
-      years({ location: this.form.location }).then((res) => {
-        this.years = res.rows;
-        console.log(res);
-      });
-    },
-    getBatchList() {
-      pckzxList({ ...this.pageForm, ...this.form }).then((res) => {
-        this.batchData = res.rows;
-        this.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>
+<template>
+  <div class="simulation">
+    <el-card ref="UniversitiesColleges" style="margin: 20px 0">
+      <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: 10, total: 0 },
+      propDefines: {
+        location: {
+          label: "地域",
+        },
+        year: {
+          label: "年份",
+        },
+        typeName: {
+          label: "批次",
+        },
+        score1: {
+          label: "文科",
+        },
+        score2: {
+          label: "理科",
+        },
+      }
+    };
+  },
+  created() {
+    this.getLocations();
+    this.getYears();
+    this.getBatchList();
+  },
+  methods: {
+    handleQuery() {
+        this.getBatchList()
+    },
+    handleInvalidQuery() {
+      console.log('query出错')
+      this.round = {}
+    },
+    onChangePage(page){
+      this.pageSize = page.limit;
+      this.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>