生涯助手--生涯测评报--整合pagination

src/views/career/components/careerTestReport.vue

@@ -1,206 +1,187 @@
-<template>
-  <div>
-    <!-- banner -->
-    <div class="banner">
-      <img style="width: 100%" src="@/assets/images/career/banner.png" alt="" />
-      <p>生涯测评报告</p>
-    </div>
-
-    <el-card>
-      <!-- 专业兴趣测评（HOLLAND） -->
-      <div>
-        <div style="padding: 24px 0; color: #ffa400">
-          专业兴趣测评（HOLLAND）
-        </div>
-        <mx-table :rows="hollData" :propDefines="propDefines">
-          <template #time="{ value }">
-            {{ value.split(" ")[0] }}
-          </template>
-          <template #nav="{ value }">
-            <a href="#" style="color: #47c6a2">{{ value }}</a>
-          </template>
-        </mx-table>
-        <!-- 分页 -->
-        <div>
-          <el-pagination
-            @size-change="hollHandleSizeChange"
-            @current-change="hollHandleCurrentChange"
-            :current-page="hollPageForm.pageNum"
-            :page-sizes="[5, 10, 20, 40]"
-            :page-size="hollPageForm.pageSize"
-            layout=" prev,pager,next,jumper,total,sizes"
-            :total="hollTotal"
-          >
-          </el-pagination>
-        </div>
-      </div>
-      <!-- 职业性格测评（MBTI） -->
-      <div>
-        <div style="padding: 24px 0; color: #1a74d3">职业性格测评（MBTI）</div>
-        <mx-table :rows="mbtiData" :propDefines="mbtiPropDefines">
-          <template #time="{ value }">
-            {{ value.split(" ")[0] }}
-          </template>
-          <template #nav="{ value }">
-            <a href="#" style="color: #47c6a2">{{ value }}</a>
-          </template>
-        </mx-table>
-      </div>
-         <!-- 分页 -->
-        <div>
-          <el-pagination
-            @size-change="mbtiHandleSizeChange"
-            @current-change="mbtiHandleCurrentChange"
-            :current-page="mbtiPageForm.pageNum"
-            :page-sizes="[5, 10, 20, 40]"
-            :page-size="mbtiPageForm.pageSize"
-            layout=" prev,pager,next,jumper,total,sizes"
-            :total="mbtiTotal"
-          >
-          </el-pagination>
-        </div>
-    </el-card>
-  </div>
-</template>
-<script>
-import { hollandRecord, mbtiRecord } from "@/api/webApi/career-other";
-export default {
-  data() {
-    return {
-      hollData: [],
-      hollTotal: 0,
-      hollPageForm: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-      mbtiData: [],
-      mbtiTotal: 0,
-      mbtiPageForm: {
-        pageNum: 1,
-        pageSize: 10,
-      },
-      propDefines: {
-        id: {
-          label: "ID",
-        },
-        createTime: {
-          label: "测评时间",
-          slot: "time",
-        },
-        scorer: {
-          label: "现实型",
-        },
-        scorea: {
-          label: "艺术型",
-        },
-        scorei: {
-          label: "研究型",
-        },
-        scores: {
-          label: "社会型",
-        },
-        scoree: {
-          label: "企业型",
-        },
-        scorec: {
-          label: "传统型",
-        },
-        ruleCode: {
-          label: "测评结果",
-          slot: "nav",
-        },
-      },
-      mbtiPropDefines: {
-        id: {
-          label: "ID",
-        },
-        createTime: {
-          label: "测评时间",
-          slot: "time",
-        },
-        scoreE: {
-          label: "外向",
-        },
-        scoreI: {
-          label: "内向",
-        },
-        scoreS: {
-          label: "实感",
-        },
-        scoreN: {
-          label: "直觉",
-        },
-        scoreT: {
-          label: "思考",
-        },
-        scoreF: {
-          label: "情感",
-        },
-        scoreJ: {
-          label: "判断",
-        },
-        scoreP: {
-          label: "认知",
-        },
-        ruleCode: {
-          label: "测评结果",
-          slot: "nav",
-        },
-      },
-    };
-  },
-  created() {
-    this.getHollandRecord();
-    this.getMbtiRecord()
-  },
-  methods: {
-    getHollandRecord() {
-      hollandRecord(this.hollPageForm).then((res) => {
-        this.hollData = res.rows;
-        this.hollTotal = res.total;
-        console.log(res);
-      });
-    },
-    getMbtiRecord() {
-      mbtiRecord(this.mbtiPageForm).then((res) => {
-        this.mbtiData = res.rows;
-        this.mbtiTotal = res.total;
-        console.log(res);
-      });
-    },
-    mbtiHandleSizeChange(val) {
-      this.mbtiPageForm.pageSize = val;
-      this.getMbtiRecord();
-    },
-    mbtiHandleCurrentChange(val) {
-      this.mbtiPageForm.pageNum = val;
-      this.getMbtiRecord();
-    },
-    hollHandleSizeChange(val) {
-      this.hollPageForm.pageSize = val;
-      this.getHollandRecord();
-      console.log(this.hollPageForm.pageSize);
-    },
-    hollHandleCurrentChange(val) {
-      this.hollPageForm.pageNum = val;
-      this.getHollandRecord();
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.banner {
-  position: relative;
-}
-.banner p {
-  bottom: 10%;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 24px;
-  font-family: PingFangSC-Semibold, PingFang SC;
-  font-weight: 600;
-  color: #525252;
-  line-height: 33px;
-  position: absolute;
-}
-</style>
+<template>
+  <div>
+    <!-- banner -->
+    <div class="banner">
+      <img style="width: 100%" src="@/assets/images/career/banner.png" alt="" />
+      <p>生涯测评报告</p>
+    </div>
+
+    <el-card>
+      <!-- 专业兴趣测评（HOLLAND） -->
+      <div>
+        <div style="padding: 24px 0; color: #ffa400">
+          专业兴趣测评（HOLLAND）
+        </div>
+        <mx-table :rows="hollData" :propDefines="propDefines">
+          <template #time="{ value }">
+            {{ value.split(" ")[0] }}
+          </template>
+          <template #nav="{ value }">
+            <a href="#" style="color: #47c6a2">{{ value }}</a>
+          </template>
+        </mx-table>
+        <!-- 分页 -->
+        <div>
+          <pagination :total="hollTotal" :autoScroll="false" @pagination="onHollChangePage" :page.sync="hollPageForm.pageNum"
+                      :limit.sync="hollPageForm.pageSize"></pagination>
+        </div>
+      </div>
+      <!-- 职业性格测评（MBTI） -->
+      <div>
+        <div style="padding: 24px 0; color: #1a74d3">职业性格测评（MBTI）</div>
+        <mx-table :rows="mbtiData" :propDefines="mbtiPropDefines">
+          <template #time="{ value }">
+            {{ value.split(" ")[0] }}
+          </template>
+          <template #nav="{ value }">
+            <a href="#" style="color: #47c6a2">{{ value }}</a>
+          </template>
+        </mx-table>
+      </div>
+         <!-- 分页 -->
+        <div>
+          <pagination :total="mbtiTotal" :autoScroll="false" @pagination="onMbtiChangePage" :page.sync="mbtiPageForm.pageNum"
+                      :limit.sync="mbtiPageForm.pageSize"></pagination>
+        </div>
+    </el-card>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination/index'
+import { hollandRecord, mbtiRecord } from "@/api/webApi/career-other";
+export default {
+  components: {
+    Pagination
+  },
+  data() {
+    return {
+      hollData: [],
+      hollTotal: 0,
+      hollPageForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      mbtiData: [],
+      mbtiTotal: 0,
+      mbtiPageForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      propDefines: {
+        id: {
+          label: "ID",
+        },
+        createTime: {
+          label: "测评时间",
+          slot: "time",
+        },
+        scorer: {
+          label: "现实型",
+        },
+        scorea: {
+          label: "艺术型",
+        },
+        scorei: {
+          label: "研究型",
+        },
+        scores: {
+          label: "社会型",
+        },
+        scoree: {
+          label: "企业型",
+        },
+        scorec: {
+          label: "传统型",
+        },
+        ruleCode: {
+          label: "测评结果",
+          slot: "nav",
+        },
+      },
+      mbtiPropDefines: {
+        id: {
+          label: "ID",
+        },
+        createTime: {
+          label: "测评时间",
+          slot: "time",
+        },
+        scoreE: {
+          label: "外向",
+        },
+        scoreI: {
+          label: "内向",
+        },
+        scoreS: {
+          label: "实感",
+        },
+        scoreN: {
+          label: "直觉",
+        },
+        scoreT: {
+          label: "思考",
+        },
+        scoreF: {
+          label: "情感",
+        },
+        scoreJ: {
+          label: "判断",
+        },
+        scoreP: {
+          label: "认知",
+        },
+        ruleCode: {
+          label: "测评结果",
+          slot: "nav",
+        },
+      },
+    };
+  },
+  created() {
+    this.getHollandRecord();
+    this.getMbtiRecord()
+  },
+  methods: {
+    getHollandRecord() {
+      hollandRecord(this.hollPageForm).then((res) => {
+        this.hollData = res.rows;
+        this.hollTotal = res.total;
+        console.log(res);
+      });
+    },
+    onHollChangePage(page){
+      this.hollPageForm.pageSize = page.limit;
+      this.hollPageForm.pageNum = page.page;
+      this.getHollandRecord();
+    },
+    onMbtiChangePage(page){
+      this.mbtiPageForm.pageSize = page.limit;
+      this.mbtiPageForm.pageNum = page.page;
+      this.getMbtiRecord();
+    },
+    getMbtiRecord() {
+      mbtiRecord(this.mbtiPageForm).then((res) => {
+        this.mbtiData = res.rows;
+        this.mbtiTotal = res.total;
+        console.log(res);
+      });
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.banner {
+  position: relative;
+}
+.banner p {
+  bottom: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 24px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #525252;
+  line-height: 33px;
+  position: absolute;
+}
+</style>

src/views/career/zhiyuan/ShiftLine.vue

@@ -14,7 +14,7 @@
   import UniversitiesLine from '@/views/career/components/UniversitiesLine'
   import CollegesLine from '@/views/career/components/CollegesLine'
     export default {
-        name: "ShiftLine",
+      name: "ShiftLine",
       components:{UniversitiesLine,CollegesLine},
       data(){
           return {