分公司列表

src/views/baseInfo/campsite/campsite.vue

@@ -358,7 +358,7 @@
             }
             res.data.data.forEach(function (item) {
               allList.push(item);
-            });debugger
+            });
             if(res.data.data.length< this.listQuery.limit && this.list.length>0){
               //已加载全部
               this.nomore = true;

src/views/baseInfo/companyInfo/index.vue

@@ -22,25 +22,27 @@
       </div>
       <!--分公司分布图-->
       <company-map v-on:headCallBack="headCall"  v-if="toList" :toSonData="list" :provinceName="provinceName"></company-map>
-      <!--地图-->
-      <!--<china-map v-on:headCallBack="headCall" :list="list" :provinceName="provinceName"></china-map>-->
       <!--分公司数据-->
-      <div class="shoppings company-list"
-           v-for="item in list"
-           :key="item.key"
-      >
-        <div class="item-right-p company-item">
-          <div class="ellipsis company-name">{{item.name}}</div>
-          <p class="ellipsis">负责人：{{item.leader}}</p>
-          <p>地址： {{item.address + item.addrDetail}}</p>
-          <p class="ellipsis">电话：{{item.leaderContactInfo}}</p>
+      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
+        <div class="shoppings company-list"
+             v-for="item in list"
+             :key="item.key"
+        >
+          <div class="item-right-p company-item">
+            <div class="ellipsis company-name">{{item.name}}</div>
+            <p class="ellipsis">负责人：{{item.leader}}</p>
+            <p>地址： {{item.address + item.addrDetail}}</p>
+            <p class="ellipsis">电话：{{item.leaderContactInfo}}</p>
+          </div>
+        </div>
+        <infinite-loading v-show="loading" spinner="spiral" style="margin-top:2em" ref="sroller">
+        </infinite-loading>
+        <div v-if="nomore && !loading" style="text-align: center;color: #999;padding: 10px;">
+          ---暂无更多数据---
+        </div>
+        <div v-if="toList && !loading && list.length == 0" style="text-align: center;color: #999;padding: 10px;">
+          ---暂无数据---
         </div>
-      </div>
-      <div class="tip-css" v-if="nodata">
-        暂无数据
-      </div>
-      <div v-else-if="nomore" class="tip-css">
-        已加载全部
       </div>
     </div>
   </div>
@@ -88,18 +90,24 @@
   import {mapGetters} from 'vuex';
   import BmMap from "../../../../node_modules/vue-baidu-map/components/map/Map.vue";
 
+  import infiniteScroll from 'vue-infinite-scroll'
+  import InfiniteLoading from 'vue-infinite-loading'
 
   export default {
     name: 'branchCompany',
+    directives: {
+      infiniteScroll
+    },
     components: {
       BmMap,
-      chinaMap,
+      InfiniteLoading,
       companyMap},
     data() {
       return {
         toList: false,
         nodata: false,
         nomore:false,
+        loading: false,
         form: {
           id: undefined,
           name: undefined,
@@ -209,11 +217,11 @@
             }
           ]
         },
-        list: null,
+        list: [],
         total: null,
         listLoading: true,
+        page: 1,
         listQuery: {
-          page: 1,
           limit: 10,
           addrProvince: undefined,
           addrCity: undefined,
@@ -232,10 +240,10 @@
         provinceName: "",
         tableKey: 0,
         send: !1,//是否已发送请求
+        nomore: false
       }
     },
     created() {
-      this.getList();
       this.branchCompany_btn_edit = this.elements['branchCompany:btn_edit'];
       this.branchCompany_btn_del = this.elements['branchCompany:btn_del'];
       this.branchCompany_btn_add = this.elements['branchCompany:btn_add'];
@@ -307,24 +315,40 @@
         }
         return this.companyStatusAndCode[code].val;
       },
-      getList(reachBottom) {
-        if(this.send){
+      getList(){
+        this.page = 1;
+        this.list = [];
+        this.nomore = false;
+        this.loadMore();
+      },
+      /**
+       * 深拷贝
+       */
+      objDeepCopy (source) {
+        var sourceCopy = source instanceof Array ? [] : {};
+        for (var item in source) {
+          sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
+        }
+        return sourceCopy;
+      },
+      loadMore: function() {
+        let that = this;
+        if(this.nomore){
           return;
         }
-        if(!reachBottom){
-          this.list = [];
-          this.listQuery.page = 1;
-          this.nodata = false;
-          this.nomore = false;
-        } else if(reachBottom) {
-          if(this.nomore){
-            return false
-          }
+        if(this.send){
+          return;
         }
+        this.busy = true;
+        this.loading = true;
+        let params = this.objDeepCopy(this.listQuery);//深拷贝
+        params.page = this.page++;
         this.send = !0;
-        allPage(this.listQuery)
-          .then(response => {
-            let listTemp = response.data.data;
+        page(params)
+          .then(res => {
+            this.loading = false;
+            let allList = [];
+            let listTemp = res.data.data;
             //一次读入所有涉及地区，防止多次读取
             if (!this.$utils.isEmpty(listTemp)) {
               let allRegions = new Set();
@@ -337,160 +361,25 @@
               }
               getRegionByCodes([...allRegions]);
             }
-            let arr = this.list;
-//            if(this.listQuery.page >1){
-            listTemp.map(function(item){
-              arr.push(item);
+            res.data.data.forEach(function (item) {
+              allList.push(item);
             });
-//            }
-            this.list = arr;
-            this.total = response.data.totalCount;
-            this.listLoading = false;
-            if(arr.length == this.listQuery.page*this.listQuery.limit){
-              this.listQuery.page++;
-            }else if(arr.length == 0){
-              this.nodata = true;
-            }else if(arr.length < this.listQuery.page*this.listQuery.limit){
+            if(res.data.data.length< this.listQuery.limit && this.list.length>0){
+              //已加载全部
               this.nomore = true;
             }
+            this.list = [...this.list, ...allList];
             this.send = !1;
             this.toList = true;
-          })
+          });
+        this.busy = false;
       },
       getAddrStr(branchCompany) {
         let regions = getRegionByCodes([branchCompany.addrProvince, branchCompany.addrCity, branchCompany.addrTown]);
         return regions[0].name + ' ' + regions[1].name + ' ' + regions[2].name + ' ';
       },
-      handleFilter() {
-        this.$refs.queryForm.validate(valid => {
-
-          if (valid) {
-            this.getList();
-          } else {
-            return false;
-          }
-        });
-      },
-      handleSizeChange(val) {
-        this.listQuery.limit = val;
-        this.getList();
-      },
-      handleCurrentChange(val) {
-        this.listQuery.page = val;
-        this.getList();
-      },
-      handleCreate() {
-        this.resetTemp();
-        this.dialogStatus = 'create';
-        this.dialogFormVisible = true;
-      },
-      handleUpdate(row) {
-        getObj(row.id)
-          .then(response => {
-            this.form = response.data;
-            this.dialogFormVisible = true;
-            this.dialogStatus = 'update';
-            this.selectedProvince = response.data.addrProvince;
-            this.selectedCity = response.data.addrCity;
-          });
-      },
-      scroll() {
-        let isLoading = false
-        window.onscroll = () => {
-          // 距离底部20px时加载一次
-          let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 0;
-          if (bottomOfWindow && isLoading == false) {
-            this.getList(true);
-            setTimeout(function(){
-              isLoading = true;
-            });
-          }
-        }
-      },
-      handleDelete(row) {
-        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-          .then(() => {
-            delObj(row.id)
-              .then(() => {
-                this.$notify({
-                  title: '成功',
-                  message: '删除成功',
-                  type: 'success',
-                  duration: 2000
-                });
-                const index = this.list.indexOf(row);
-                this.list.splice(index, 1);
-              });
-          });
-      },
-      create(formName) {
-        const set = this.$refs;
-        set[formName].validate(valid => {
-          if (valid) {
-            addObj(this.form)
-              .then(() => {
-                this.dialogFormVisible = false;
-                this.getList();
-                this.$notify({
-                  title: '成功',
-                  message: '创建成功',
-                  type: 'success',
-                  duration: 2000
-                });
-              })
-          } else {
-            return false;
-          }
-        });
-      },
-      cancel(formName) {
-        this.dialogFormVisible = false;
-        this.$refs[formName].resetFields();
-      },
-      update(formName) {
-        const set = this.$refs;
-        set[formName].validate(valid => {
-          if (valid) {
-            this.dialogFormVisible = false;
-            putObj(this.form).then(() => {
-              this.dialogFormVisible = false;
-              this.getList();
-              this.$notify({
-                title: '成功',
-                message: '创建成功',
-                type: 'success',
-                duration: 2000
-              });
-            });
-          } else {
-            return false;
-          }
-        });
-      },
-      resetTemp() {
-        this.form = {
-          id: undefined,
-          name: undefined,
-          status: undefined,
-          addrProvince: undefined,
-          addrCity: undefined,
-          addrTown: undefined,
-          addrDetail: undefined,
-          leader: undefined,
-          leaderContactInfo: undefined,
-          updateTime: undefined
-        };
-      }
     },
-    mounted() {    // 滚动加载更多 
-      const _this = this;
-      this.$nextTick(() => {
-        window.addEventListener('scroll', this.scroll)
-      })
+    mounted() {
     },
   }
 </script>