模拟志愿--一分一段--整合mxcondition和pagination

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

@@ -0,0 +1,20 @@
+import conditionObjectBase from '../condition-object-base.js'
+import { yfydLocations } from "@/api/webApi/career-other";
+
+export default {
+  ...conditionObjectBase,
+  key: 'yfydLocation',
+  title: '地域',
+  getList: function(param) {
+    return new Promise((resolve, reject) => {
+      yfydLocations().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-yfyd-mode.js

@@ -0,0 +1,25 @@
+import conditionObjectBase from '../condition-object-base.js'
+import { yfydModes } from "@/api/webApi/career-other";
+
+export default {
+  ...conditionObjectBase,
+  dependentKeys: ['yfydYear'],
+  key: 'yfydMode',
+  title: '科类',
+  isDependencyReady(params) {
+    return params.yfydYear
+  },
+  getList: function(param, $ref) {
+    console.log('',$ref)
+    return new Promise((resolve, reject) => {
+      yfydModes({ location:$ref.model.yfydLocation,year:param.yfydYear }).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-yfyd-year.js

@@ -0,0 +1,24 @@
+import conditionObjectBase from '../condition-object-base.js'
+import { yfydYears } from "@/api/webApi/career-other";
+
+export default {
+  ...conditionObjectBase,
+  dependentKeys: ['yfydLocation'],
+  key: 'yfydYear',
+  title: '学年',
+  isDependencyReady(params) {
+    return params.yfydLocation
+  },
+  getList: function(param) {
+    return new Promise((resolve, reject) => {
+      yfydYears({ location:param.yfydLocation }).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,6 +1,6 @@
 <template>
   <div class="simulation">
-    <el-card ref="UniversitiesColleges" style="margin: 20px 0">
+    <el-card  class="mt20 mb20">
       <div
         :style="{ 'background-image': backimg }"
         style="
@@ -89,8 +89,8 @@ export default {
       this.round = {}
     },
     onChangePage(page){
-      this.pageSize = page.limit;
-      this.pageNum = page.page;
+      this.pageForm.pageSize = page.limit;
+      this.pageForm.pageNum = page.page;
       this.getBatchList();
     },
     getBatchList() {

src/views/career/zhiyuan/yfyd.vue

@@ -1,236 +1,121 @@
-<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>
-        <el-row class="radioInput">
-          <div>
-            <span class="radiaTitle">科类:</span>
-          </div>
-          <el-radio-group v-model="form.mode" @change="modeChange">
-            <el-radio-button label="">所有</el-radio-button>
-            <el-radio-button
-              v-for="item in modes"
-              :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 {
-  yfydLocations,
-  yfydYears,
-  yfydModes,
-  yfydList,
-} from "@/api/webApi/career-other";
-export default {
-  data() {
-    return {
-      backimg:
-        "url(" + require("@/assets/images/career/icon_colleges.png") + ")",
-      locations: [],
-      years: [],
-      form: { location: "", year: "", mode: "", score: "" },
-      batchData: [],
-      pageForm: { pageNum: 1, pageSize: 10 },
-      propDefines: {
-        location: {
-          label: "地域",
-        },
-        year: {
-          label: "年份",
-        },
-        mode: {
-          label: "科类",
-        },
-        score: {
-          label: "分数",
-        },
-        num: {
-          label: "人数",
-        },
-        numTotal: {
-          label: "累计人数",
-        },
-      },
-      total: 0,
-      modes: [],
-    };
-  },
-  created() {
-    this.getLocations();
-    this.getYears();
-    this.getModes();
-    this.getYfydList();
-  },
-  methods: {
-    getModes() {
-      yfydModes({ location: this.form.location, year: this.form.year }).then(
-        (res) => {
-          this.modes = res.rows;
-          console.log(res);
-        }
-      );
-    },
-    handleSizeChange(val) {
-      this.pageForm.pageSize = val;
-      this.getYfydList();
-    },
-    handleCurrentChange(val) {
-      this.pageForm.pageNum = val;
-      this.getYfydList();
-    },
-    locationChange(e) {
-      this.getYears();
-      this.pageForm.pageNum = 1;
-      this.getYfydList();
-    },
-    modeChange(e) {
-      this.pageForm.pageNum = 1;
-      this.getYfydList();
-    },
-    yearChange(e) {
-      this.pageForm.pageNum = 1;
-      this.modeChange();
-    },
-    getLocations() {
-      yfydLocations().then((res) => {
-        this.locations = res.rows;
-        console.log(res);
-      });
-    },
-    getYears() {
-      yfydYears({ location: this.form.location }).then((res) => {
-        this.years = res.rows;
-        console.log(res);
-      });
-    },
-    getYfydList() {
-      yfydList({ ...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   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>