解润东

20220517
执行巡查分页

src/views/danger/dangerPatrol/implement/index.vue

@@ -6,15 +6,22 @@
         <!-- tab标签 -->
         <van-tabs
             v-model="active"
-             @click="onClick"
             color="#2980f7"
             animated
+            @change="tabChange"
             :sticky="true"
             offset-top="1.5rem"
         >
-            <van-tab v-for="(item, key) in tabs" :key="key" :title="item.title">
+            <van-tab v-for="(i, key) in tabs" :key="key" :title="i.title">
                 <!-- 内容列表 -->
                 <div class="con-list">
+                    <van-pull-refresh v-model="i.refreshing" @refresh="onRefresh">
+             <van-list
+                v-model="i.loading"
+                :finished="i.finished"
+                finished-text="没有更多了"
+                @load="onLoad()"
+            >
                     <van-cell-group inset v-for="(item, index) in messageList" :key="index">
                         <van-row gutter>
                             <!-- <van-col span="18">
@@ -61,6 +68,8 @@
                             </van-col>
                         </van-row>
                     </van-cell-group>
+                    </van-list>
+        </van-pull-refresh>
                 </div>
                 <!-- 暂无数据 -->
                 <div
@@ -73,6 +82,7 @@
                     "
                     v-if="messageList.length == 0"
                 >暂无数据</div>
+                
             </van-tab>
         </van-tabs>
 
@@ -85,6 +95,7 @@
                 @click="finish"
             >结束巡查</van-button>
         </div>
+        
     </div>
 </template>
 
@@ -105,6 +116,10 @@ export default {
             messageList: [],
             active: 0,
             hdType:'',
+            total:0,//总条数
+            page:1,//页码
+            psize:5,//页数量
+            refreshing:false,
             cycle:'',
             tabs: [
                 // {
@@ -138,9 +153,17 @@ export default {
         this.loadingTabs()
     },
     methods: {
-        onClick(name,title){
+        tabChange(name,title){
+            this.page=1
             this.hdType=title
-            this.postList()
+            this.messageList=[]
+            this.tabs.forEach((i)=>{
+                if(i.title==this.hdType){
+                    i.loading=true
+                    i.finished=false
+                }
+            })
+            this.onLoad();
         },
         loadingTabs(){
              postWork("patrol/running/hdType?cycle="+this.id).then(res => {
@@ -148,10 +171,12 @@ export default {
                 res.data.forEach((i)=>{
                     this.tabs.push({
                         title:i.hdType,
-                        api:i.id
+                        api:i.id,
+                        loading: false,
+                        finished: false,
+                        refreshing:false,
                     })
                 })
-                this.postList();
                 this.$toast.clear();
             })
             .catch(err => {
@@ -159,11 +184,7 @@ export default {
                 this.$toast.fail("加载失败,请稍后再试");
             });
         },
-        onChange() {
-            console.log(this.active);
-        },
         postList(val) {
-            this.messageList=[]
             this.$toast.loading({
                 message: "加载中...",
                 forbidClick: true,
@@ -172,12 +193,30 @@ export default {
             });
             let obj = {
                 cycle: this.id,
-                hdType:this.hdType
+                hdType:this.hdType,
+                page:this.page,
+                psize:this.psize,
             };
-            postFun("patrol/running/list?cycle="+this.id+'&hdType='+this.hdType)
+            postFun("patrol/running/list?cycle="+this.id+'&hdType='+this.hdType+'&page='+this.page+'&psize='+this.psize)
                 .then(res => {
-                    this.messageList = res.data;
+                    res.rows.forEach((item)=>{
+                        this.messageList.push(item)
+                    })
                     this.$toast.clear();
+                    this.total=res.total
+                    this.page++;
+                    this.tabs.forEach((i)=>{
+                        if(i.title==this.hdType){
+                            if (this.messageList.length>=this.total) {
+                                i.finished = true;
+                            }
+                            i.loading = false;
+                        }
+                    })
+                    //防止分页超出操作
+                    // if(!(this.page*5-this.total>=0)){
+                    //      this.page++;
+                    // }
                 })
                 .catch(err => {
                     this.$toast.clear();
@@ -246,7 +285,31 @@ export default {
                 .catch(() => {
                     
                 });
-        }
+        },
+         //下拉页面刷新
+        onRefresh() {
+            // 清空列表数据
+            this.page=1
+            this.tabs.forEach((i)=>{
+                if(i.title==this.hdType){
+                    i.loading=true
+                    i.finished=false
+                }
+            })
+            this.onLoad();
+        },
+        //上拉页面加载数据
+        onLoad(value) {
+            this.tabs.forEach((i)=>{
+                if(i.title==this.hdType){
+                    if (i.refreshing) {
+                       this.messageList=[]
+                        i.refreshing = false;
+                    }
+                }
+            })
+            this.postList()
+        },
     }
 };
 </script>