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

@@ -3,67 +3,67 @@
     <div class="title">缩短码查询</div>
     <div class="body">
       <div style="padding-top:20px">
-            <el-radio-group v-model="company">
-              <el-radio :label="CODE">EAN/UCC-8缩短码</el-radio>
-              <el-radio :label="NAME">根据厂商名称查询</el-radio>
-              <el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
-            </el-radio-group>
-            <el-form
-                label-position="left"
-                label-width="120px"
-                style="margin-top:40px"
-                :model="companySearch"
-            >
-              <el-form-item label="缩短码查询：">
-                <el-input
-                    v-show="company === CODE"
-                    v-model="companySearch.code"
-                    placeholder="请输入正确的8位商品条码！"
-                    class="w240"
-                ></el-input>
-                <el-input
-                    v-show="company === NAME"
-                    v-model="companySearch.name"
-                    placeholder="请输入正确的厂商名称！"
-                    class="w240"
-                ></el-input>
-                <el-input
-                    v-show="company === ADDRESS"
-                    v-model="companySearch.address"
-                    placeholder="请输入正确的厂商地址！"
-                    class="w240"
-                ></el-input>
-              </el-form-item>
+        <el-radio-group v-model="company">
+          <el-radio :label="CODE">EAN/UCC-8缩短码</el-radio>
+          <el-radio :label="NAME">根据厂商名称查询</el-radio>
+          <el-radio :label="ADDRESS">根据厂商地址查询</el-radio>
+        </el-radio-group>
+        <el-form
+            label-position="left"
+            label-width="120px"
+            style="margin-top:40px"
+            :model="companySearch"
+        >
+          <el-form-item label="缩短码查询：">
+            <el-input
+                v-show="company === CODE"
+                v-model="companySearch.code"
+                placeholder="请输入正确的8位商品条码！"
+                class="w240"
+            ></el-input>
+            <el-input
+                v-show="company === NAME"
+                v-model="companySearch.name"
+                placeholder="请输入正确的厂商名称！"
+                class="w240"
+            ></el-input>
+            <el-input
+                v-show="company === ADDRESS"
+                v-model="companySearch.address"
+                placeholder="请输入正确的厂商地址！"
+                class="w240"
+            ></el-input>
+          </el-form-item>
 
-              <el-form-item label="验证码：">
-                <div class="y-center">
-                  <el-input
-                      v-model="captcha"
-                      placeholder="请输入验证码"
-                      class="w160"
-                  ></el-input>
+          <el-form-item label="验证码：">
+            <div class="y-center">
+              <el-input
+                  v-model="captcha"
+                  placeholder="请输入验证码"
+                  class="w160"
+              ></el-input>
 
-                  <div class="validate-code">
-                    <img :src="captchaPath" @click="getCaptcha()" alt=""/>
-                  </div>
+              <div class="validate-code">
+                <img :src="captchaPath" @click="getCaptcha()" alt=""/>
+              </div>
 
-                  <el-button
-                      style="margin-left:40px"
-                      type="primary"
-                      @click="handleSearchCompany"
-                  >查询
-                  </el-button
-                  >
-                </div>
-              </el-form-item>
-            </el-form>
-          </div>
+              <el-button
+                  style="margin-left:40px"
+                  type="primary"
+                  @click="handleSearchCompany"
+              >查询
+              </el-button
+              >
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
       <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%"
             >
@@ -76,9 +76,11 @@
               </el-table-column>
               <el-table-column prop="brandName" label="商标"></el-table-column>
               <el-table-column prop="produceStyle" label=规格 width="80px"></el-table-column>
-              <el-table-column prop="producePack" label="包装"  width="100px"></el-table-column>
+              <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 ||

src/views/comps/pages2.vue

@@ -60,7 +60,7 @@ export default {
       pages: {
         size: 10,
       },
- 
+
     };
   },
   mounted(){
@@ -191,4 +191,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file