fix:仓库可视化查看库存列表增加分页

src/views/component/weiZhiChangGui.vue

@@ -3,7 +3,7 @@
     <div @click="clickBtn" style="cursor: pointer;">
       <div>点击视图选择位置</div>
     </div>
-    <el-dialog title="仓库可视化" :visible.sync="ifshow" width="100%" append-to-body fullscreen center>
+    <el-dialog title="仓库可视化" :visible.sync="ifshow" width="100%" :append-to-body="true" fullscreen center :lock-scroll="false"> 
       <div class="selectArea">
         <div @click="close" class="close-content">
           <i class="el-icon-close"></i>
@@ -62,7 +62,7 @@
                             <p>存放数量：{{ it.num || '/'}}</p>
                             <p>存放位置：{{ it.wei_zhi_ || it.cun_fang_wei_zhi_ }}</p>
                             <div style="text-align: left;">
-                              <div slot="footer" class="dialog-footer" style="width:100px;display: inline-block;vertical-align: top;" @click="chakan($event,it)">详细信息查看</div>
+                              <div slot="footer" class="dialog-footer" style="width:100px;display: inline-block;vertical-align: top;" @click="chakan($event,it,)">详细信息查看</div>
                               <!-- <span style="width: 115px; display: inline-block; white-space: break-spaces;text-align: left;">{{ it.huo_hao_ || "空" }} </span> -->
                             </div>
                           </div>
@@ -76,10 +76,10 @@
           </div>
         </div>
       </div>
-      <el-dialog width="70%" :title="innertitle" :visible.sync="innerVisible" append-to-body>
-        <div style="height: 70vh;padding: 20px;">
+      <el-dialog width="70%" :title="innertitle" :visible.sync="innerVisible"  :append-to-body="true"  @close="clossBack">
+        <div class="inner-dialog-content">
           <template>
-            <el-table :data="tableData" border style="width: 100%">
+            <el-table :data="tableData" border style="width: 100%;height: 70vh;overflow: hidden;" :show-overflow-tooltip="true">
               <el-table-column prop="wu_liao_ming_chen" label="名称">
               </el-table-column>
               <el-table-column prop="wu_liao_bian_ma_" label="编码" width="180">
@@ -105,6 +105,19 @@
               </el-table-column>
             </el-table>
           </template>
+          <template>
+            <div class="block">
+              <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[10, 15, 20]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+        </template>
         </div>
     </el-dialog>
   </el-dialog>
@@ -146,7 +159,12 @@ export default {
       showValue: "",
       value: "",
       tableData: [],
-      innertitle:''
+      innertitle: '',
+      currentPage: 1,
+      total: 0,
+      pageSize: 10,
+      currenEvent:'',
+      currentValue:''
     };
   },
   props: {
@@ -215,6 +233,10 @@ export default {
     close() {
       this.ifshow = false;
     },
+    clossBack(){
+      this.pageSize = 10;
+      this.currentPage =1;
+    },
     async firstLoadQuyu(cang_ku) {
       let sqlString = `select distinct qu_yu_,cun_chu_tiao_jian from t_ck where cang_ku_ming_chen = '${cang_ku}' order by qu_yu_ asc`;
       var this_ = this;
@@ -387,8 +409,8 @@ export default {
       //     });
     },
     async chakan(event, value) {
-      // event.preventDefault();
       event.stopPropagation();
+      this.tableData =[]
       if(value.num == 0 || !value.num){
         this.$message({
           message: '该位置暂无物料',
@@ -396,14 +418,18 @@ export default {
         });
         return
       }
+      this.currenEvent = event;
+      this.currentValue = value;
       this.innerVisible = true;
       let cang_ku_ming_chen = this.formInline.cang_ku_ming_chen_value;
       this.innertitle = `${cang_ku_ming_chen} ${value.cun_fang_wei_zhi_}明细`
-      let sql = `select * from t_mjwlgl where cang_ku_ming_chen = '${cang_ku_ming_chen}'and cun_fang_wei_zhi_ = '${value.cun_fang_wei_zhi_}' and ku_cun_liang_ != '0'`;
+      let sql = `select * from t_mjwlgl where cang_ku_ming_chen = '${cang_ku_ming_chen}'and cun_fang_wei_zhi_ = '${value.cun_fang_wei_zhi_}' and ku_cun_liang_ != '0' limit ${(this.currentPage -1) * this.pageSize},${this.pageSize}`;
       let data = [];
       await curdPost("sql", sql).then((res) => {
         data = res.variables.data;
       });
+      this.total = value.num
+      console.log(this.tableData,'this.tableData');
       this.tableData = data
     },
     qu_yu_Event(e) {
@@ -432,6 +458,18 @@ export default {
       this.firstLoadQuyu("试剂库1");
       this.ifshow = true;
     },
+    handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+        this.pageSize = val;
+        this.currentPage = 1;
+        this.chakan(this.currenEvent,this.currentValue)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      // this.pageSize = val;
+      this.currentPage = val;
+      this.chakan(this.currenEvent,this.currentValue)
+    }
   },
   watch: {
     //监控仓库名称变化 触发第一次加载数据
@@ -448,6 +486,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// .inner-dialog-content {
+//   max-height: 500px; /* 根据需要设置最大高度 */
+//   overflow: hidden;
+// }
 ul {
   margin: 0;
 }