feat: 添加分頁顯示

src/views/Search/internal.vue

@@ -99,10 +99,10 @@
       <div class="result-box" v-show="showResult && resultType === 'company'">
         <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
         <div class="result-box-body">
-          <template v-if="result">
+          <template v-if="currentData">
             <!--结果表格-->
             <el-table
-                :data="result"
+                :data="currentData"
                 header-cell-class-name="search-table-hc"
                 style="width: 100%"
             >
@@ -139,6 +139,8 @@
                 </template>
               </el-table-column>
             </el-table>
+            <pages2 :total="pagination.total" :currPage="pagination.currPage" :pageSize="pagination.pageSize"
+                    @getLimit='handlePageChange'></pages2>
           </template>
           <span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
         </div>
@@ -146,10 +148,10 @@
       <div class="result-box" v-show="showResult && resultType === 'product'">
         <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
         <div class="result-box-body">
-          <template v-if="result">
+          <template v-if="currentData">
             <!--结果表格-->
             <el-table
-                :data="result"
+                :data="currentData"
                 header-cell-class-name="search-table-hc"
                 style="width: 100%"
             >
@@ -167,6 +169,8 @@
               </el-table-column>
               <el-table-column prop="status" label="状态"></el-table-column>
             </el-table>
+            <pages2 :total="pagination.total" :currPage="pagination.currPage" :pageSize="pagination.pageSize"
+                    @getLimit='handlePageChange'></pages2>
           </template>
           <span style="color: rgb(255, 59, 48)" v-else>{{ errorMsg }}</span>
         </div>
@@ -265,14 +269,16 @@
 <script>
 import Vcode from "vue-puzzle-vcode";
 import validation from "@/views/Search/validation";
+import pagination from "@/views/Search/pagination";
 import moment from "moment";
+import Pages2 from "@/views/comps/pages2";
 
 const CODE = '1';
 const NAME = '2';
 const ADDRESS = '3';
 
 export default {
-  mixins: [validation],
+  mixins: [validation, pagination],
   data() {
     return {
       CODE,
@@ -306,6 +312,7 @@ export default {
     };
   },
   components: {
+    Pages2,
     Vcode,
   },
   created() {
@@ -390,7 +397,11 @@ export default {
       const searchGlnRes = await this.$api.search.searchInternal(params);
       const {returnCode, data} = searchGlnRes;
       if (returnCode === "0" || returnCode === 0) {
-        this.result = data.hits.hits;
+        // this.result = data.hits.hits;
+        this.dataTotal = data.hits.hits;
+        this.pagination.total = data.hits.hits.length;
+        this.pagination.totalPage = Math.floor(data.hits.hits.length / this.pagination.pageSize) + 1;
+        this.handlePageChange(1);
       } else {
         this.errorMsg =
             searchGlnRes.returnMsg ||

src/views/Search/pagination.js

+export default {
+    data() {
+        return {
+            dataTotal: [],
+            currentData: null,
+            pagination: {
+                total: 0,
+                totalPage: 1,
+                pageSize: 10,
+                page: 1
+            },
+        }
+    },
+    methods: {
+        handlePageChange(page) {
+            const start = (page - 1) * this.pagination.pageSize
+            if (page === this.pagination.totalPage) {
+                this.currentData = this.dataTotal.slice(start, this.dataTotal.length)
+            } else {
+                this.currentData = this.dataTotal.slice(start, start + this.pagination.pageSize)
+            }
+            console.log(this)
+            console.log(this.currentData)
+        }
+    },
+}

src/views/Search/shortcode.vue

@@ -61,9 +61,9 @@
       <div class="result-box" v-if="showResult">
         <div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
         <div class="result-box-body">
-          <template v-if="result">
+          <template v-if="currentData">
             <el-table
-                :data="result"
+                :data="currentData"
                 header-cell-class-name="search-table-hc"
                 style="width: 100%"
             >
@@ -79,6 +79,8 @@
               <el-table-column prop="producePack" label="包装" width="100px"></el-table-column>
               <el-table-column prop="firmName" label="厂商名称" width="210px"></el-table-column>
             </el-table>
+            <pages2 :total="pagination.total" :currPage="pagination.currPage" :pageSize="pagination.pageSize"
+                    @getLimit='handlePageChange'></pages2>
           </template>
           <span class="error-msg" v-else>{{ errorMsg }}</span>
         </div>
@@ -98,12 +100,15 @@
 
 <script>
 import validation from "@/views/Search/validation";
+import pagination from "@/views/Search/pagination";
+import pages2 from "@/views/comps/pages2";
 
 const CODE = 0;
 const NAME = 1;
 const ADDRESS = 2;
 export default {
-  mixins: [validation],
+  mixins: [validation, pagination],
+  components: {pages2},
   data() {
     return {
       CODE,
@@ -142,7 +147,11 @@ export default {
       const searchGlnRes = await this.$api.search.searchGetList(params);
       const {returnCode, data} = searchGlnRes;
       if (returnCode === "0") {
-        this.result = data;
+        // this.result = data;
+        this.dataTotal = data;
+        this.pagination.total = data.length;
+        this.pagination.totalPage = Math.floor(data.length / this.pagination.pageSize) + 1;
+        this.handlePageChange(1);
       } else {
         this.errorMsg =
             searchGlnRes.returnMsg ||