添加滚动加载

src/views/authorityManagement/components/authorityRoleEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 16:31:31
- * @LastEditTime: 2022-02-08 11:06:41
+ * @LastEditTime: 2022-02-08 14:18:46
  * @LastEditors: Please set LastEditors
  * @Description: 新增/编辑角色
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
@@ -151,6 +151,7 @@ export default {
             AuthList.forEach((item) => {
               this.authId.push(item.AuthId);
             });
+            this.checkedKeys = this.authId;
             this.authList = _.cloneDeep(AuthList);
             this.authTo = AuthList[0];
           }

src/views/jobsManagement/list.vue

@@ -2,32 +2,22 @@
   <div class="pageBody">
     <div class="titleBox">
       <div class="status flex-wrap">
-        <el-radio
-          v-model="radio"
-          :label="item.id"
-          v-for="(item, index) in option"
-          :key="index"
-          >{{ item.label }}</el-radio
-        >
+        <el-radio v-model="radio" :label="item.id" v-for="(item, index) in option" :key="index">{{ item.label }}</el-radio>
       </div>
-      <Search
-        @getSearchData="getSearchData"
-        @clearSearchData="clearSearchData"
-        :isSlot="false"
-      >
+      <Search @getSearchData="getSearchData" @clearSearchData="clearSearchData" :isSlot="false">
       </Search>
     </div>
-    <div class="contantBox">
+    <div v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" class="contantBox scrollbar">
       <div class="itemBox" v-for="(item, index) in listData" :key="index">
         <div class="del" @click="delate(item.JobId)">
           <i class="el-icon-close"></i>
         </div>
         <div>
           <el-row>
-            <el-col :span="24" class="nameBox"
-              ><div class="name">{{ item.JobName }}</div>
-              <div class="loger" @click="toEdit(item.JobId)"></div
-            ></el-col>
+            <el-col :span="24" class="nameBox">
+              <div class="name">{{ item.JobName }}</div>
+              <div class="loger" @click="toEdit(item.JobId)"></div>
+            </el-col>
           </el-row>
 
           <el-row>
@@ -35,22 +25,14 @@
           </el-row>
 
           <el-row class="conntent" v-if="radio == 1">
-            <el-col :span="12"
-              >上级组织：<span>{{ item.OrganName }}</span></el-col
-            >
-            <el-col :span="12" class="flexLeft"
-              >权限项数：<span>{{ item.AuthCount }}</span></el-col
-            >
+            <el-col :span="12">上级组织：<span>{{ item.OrganName }}</span></el-col>
+            <el-col :span="12" class="flexLeft">权限项数：<span>{{ item.AuthCount }}</span></el-col>
           </el-row>
           <el-row class="conntent" v-if="radio == 1">
-            <el-col :span="24"
-              >拥有职员：<span>{{ item.OfficerCount }}</span></el-col
-            >
+            <el-col :span="24">拥有职员：<span>{{ item.OfficerCount }}</span></el-col>
           </el-row>
           <el-row class="conntent2" v-if="radio == 2">
-            <el-col :span="24"
-              ><span>{{ item.UpLink }}</span></el-col
-            >
+            <el-col :span="24"><span>{{ item.UpLink }}</span></el-col>
           </el-row>
           <el-row class="conntent">
             <el-col :span="12">
@@ -58,44 +40,35 @@
               <span class="unUsed" v-else-if="item.Status == 0">停用</span>
             </el-col>
             <el-col :span="12" class="flexLeft">
-              <el-switch
-                @change="isUsedChange(item, index)"
-                v-model="item.Flag"
-                :active-value="true"
-                :inactive-value="false"
-                active-color="#6F81BC"
-                inactive-color="#CFD6E2"
-              >
+              <el-switch @change="isUsedChange(item, index)" v-model="item.Flag" :active-value="true" :inactive-value="false" active-color="#6F81BC" inactive-color="#CFD6E2">
               </el-switch>
             </el-col>
           </el-row>
         </div>
       </div>
-      <Dialog :flag="dialogVisible">
-        <div class="closeDialog">
-          <div class="title">删除岗位</div>
-          <div class="content">是否确定要删除该岗位？</div>
-          <div class="foot right t30">
-            <el-button size="medium" type="danger" class="r24" @click="del()"
-              >删除</el-button
-            >
+    </div>
+    <p class="center" v-if="loading">加载中...</p>
+    <p class="center" v-if="noMore && !loading">没有更多数据了~</p>
+    <Dialog :flag="dialogVisible">
+      <div class="closeDialog">
+        <div class="title">删除岗位</div>
+        <div class="content">是否确定要删除该岗位？</div>
+        <div class="foot right t30">
+          <el-button size="medium" type="danger" class="r24" @click="del()">删除</el-button>
 
-            <el-button size="medium" @click="dialogVisible = false"
-              >取消</el-button
-            >
-          </div>
+          <el-button size="medium" @click="dialogVisible = false">取消</el-button>
         </div>
-      </Dialog>
-    </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
 <script>
 import Search from "@/layout/components/Search";
 import Dialog from "@/layout/components/Dialog";
-import { GetJobList, ChangeJobStatus ,DeleteJob} from "@/api/jobApi";
+import { GetJobList, ChangeJobStatus, DeleteJob } from "@/api/jobApi";
 export default {
-  data() {
+  data () {
     return {
       dialogVisible: false,
       GroupUpid: "",
@@ -113,28 +86,56 @@ export default {
           id: 2,
         },
       ],
+      pageSize: 20,
+      pageNum: 1,
+      total: '',
+      loading: false,
+      dataList: []
     };
   },
   components: { Search, Dialog },
-  created() {
-    if(this.$route.query.keyWords){
+  created () {
+    if (this.$route.query.keyWords) {
       this.serachinfo = this.$route.query.keyWords;
     }
-    this.AccountList(this.serachinfo);
+    this.AccountList({
+      QueryName: this.serachinfo,
+      PageSize: this.pageSize,
+      PageIndex: this.pageNum
+    });
+  },
+  computed: {
+    noMore () {
+      return this.pageNum >= this.total
+    },
+    disabled () {
+      return this.loading || this.noMore
+    }
   },
   methods: {
     //查询
-    getSearchData(val) {
+    getSearchData (val) {
+      this.pageNum = 1;
       this.serachinfo = val;
-      this.AccountList(val);
+      this.AccountList({
+        QueryName: this.serachinfo,
+        PageSize: this.pageSize,
+        PageIndex: this.pageNum
+      }, true);
     },
 
     //清除查询
-    clearSearchData() {
-      this.AccountList();
+    clearSearchData () {
+      this.pageNum = 1;
+      this.serachinfo = '';
+      this.AccountList({
+        QueryName: this.serachinfo,
+        PageSize: this.pageSize,
+        PageIndex: this.pageNum
+      }, true);
     },
     //修改状态
-    async isUsedChange(value, index) {
+    async isUsedChange (value, index) {
       let item = _.cloneDeep(value);
       try {
         let data = null;
@@ -155,7 +156,11 @@ export default {
         ChangeJobStatus(data).then((result) => {
           if (result.code == 0) {
             this.$message.success(str);
-            this.AccountList();
+            this.AccountList({
+              QueryName: this.serachinfo,
+              PageSize: this.pageSize,
+              PageIndex: this.pageNum
+            });
           }
         });
       } catch (error) {
@@ -166,60 +171,79 @@ export default {
       }
     },
 
-    delate: function (id) {
+    delate (id) {
       this.dialogVisible = true;
       this.delId = id;
     },
 
-    toEdit(id) {
+    toEdit (id) {
       this.$router.push({
         path: "jobs/edit",
         query: { JobId: id },
       });
     },
     //获取列表
-    async AccountList() {
+    async AccountList (obj, type = '') {
       try {
-        const result = await GetJobList({
-          QueryName: this.serachinfo,
-        });
+        this.loading = true;
+        const result = await GetJobList(obj);
         if (result.code === 0) {
-          const { returnData } = result;
-          returnData.forEach((element, index) => {
+          const datas = result.returnData.records;
+          datas.forEach((element, index) => {
             if (element.Status == 1) {
               element["Flag"] = true;
             } else {
               element["Flag"] = false;
             }
-            returnData[index] = element;
+            datas[index] = element;
           });
-          this.listData = result.returnData;
+          let arrs = [];
+          if (type) {
+            arrs = datas;
+          } else {
+            this.dataList.push(datas);
+            arrs = this.dataList.flat();
+          }
+          this.listData = arrs;
+          this.total = result.returnData.pages;
+          this.loading = false;
         } else {
           this.$message.error(result.message);
+          this.loading = false;
         }
       } catch (error) {
         console.log("出错了", error);
+        this.loading = false;
       }
     },
 
     //删除接口
-    async del() {
+    async del () {
       try {
         const result = await DeleteJob({
-        JobId: this.delId,
-      });
-      if (result.code === 0) {
-        this.dialogVisible = false;
-        this.$message.success(result.message);
-        this.AccountList();
-      }
+          JobId: this.delId,
+        });
+        if (result.code === 0) {
+          this.dialogVisible = false;
+          this.$message.success(result.message);
+          this.AccountList();
+        }
       } catch (error) {
-         this.dialogVisible = false;
+        this.dialogVisible = false;
         // this.$message.error("删除失败");
         console.log("出错了", error);
       }
 
     },
+    //滚动加载数据
+    load () {
+      this.pageNum += 1;
+      this.AccountList({
+        QueryName: this.serachinfo,
+        PageSize: this.pageSize,
+        PageIndex: this.pageNum
+      });
+    }
   },
 };
 </script>
@@ -290,6 +314,9 @@ export default {
     flex-wrap: wrap;
     justify-content: flex-start;
     width: calc(100% + 10px);
+    height: 79vh;
+    overflow-y: auto;
+    overflow-x: hidden;
     .itemBox {
       width: calc(25% - 20px);
       margin: 10px;
@@ -299,6 +326,7 @@ export default {
       box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
       border-radius: 16px;
       overflow: hidden;
+      max-height: 200px;
       .headLine {
         width: 100%;
         height: 4px;

src/views/staffManagement/compontents/staffHome.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 14:37:54
- * @LastEditTime: 2022-01-12 17:24:55
+ * @LastEditTime: 2022-02-08 17:29:40
  * @LastEditors: Please set LastEditors
  * @Description: 角色管理
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRole.vue
@@ -15,9 +15,9 @@
       </Search>
     </div>
     <!--列表-->
-    <div class="role-content">
+    <div class="role-content scrollbar">
       <template v-if="arrs.length">
-        <el-row :gutter="24">
+        <el-row v-infinite-scroll="load" :infinite-scroll-distance="20" infinite-scroll-disabled="disabled" :gutter="24">
           <el-col :span="6" v-for="(item,index) in arrs" class="account-left-content-teams" :key="index">
             <div class="team">
               <div class="list">
@@ -54,6 +54,8 @@
             </div>
           </el-col>
         </el-row>
+        <p class="center" v-if="loading">加载中...</p>
+        <p class="center" v-if="noMore">没有更多数据了~</p>
       </template>
       <template v-else>
         <el-empty description="暂无数据"></el-empty>
@@ -88,15 +90,33 @@ export default {
       arrsCopy: [],
       flag: false,
       title: '',
-      index: null
+      index: null,
+      keyWords: '',
+      pageNum: 1,
+      PageSize: 20,
+      loading: false,
+      keyWords: '',
+      total: null,
+      search: null
     }
   },
-  created: function () {
-    let keyWords = ""
+  created () {
     if (this.$route.query.keyWords) {
-      keyWords = this.$route.query.keyWords;
+      this.keyWords = this.$route.query.keyWords;
+    }
+    this.gueryRole({
+      QueryName: this.keyWords,
+      PageSize: this.PageSize,
+      PageIndex: this.pageNum
+    });
+  },
+  computed: {
+    noMore () {
+      return this.pageNum >= this.total
+    },
+    disabled () {
+      return this.loading || this.noMore
     }
-    this.gueryRole(keyWords);
   },
   methods: {
     //删除
@@ -119,11 +139,28 @@ export default {
     },
     //查询
     getSearchData (val) {
-      this.gueryRole(val)
+      this.arrs = []
+      this.listData = []
+      this.pageNum = 1
+      this.search = val
+      this.gueryRole({
+        QueryName: val,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      }, true)
     },
     //清除查询
     clearSearchData () {
-      this.gueryRole()
+      this.list = []
+      this.arrs = []
+      this.search = ''
+      this.pageNum = 1
+      this.keyWords = ''
+      this.gueryRole({
+        QueryName: this.keyWords,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      })
     },
     //状态变更
     async handleChange (item) {
@@ -136,13 +173,34 @@ export default {
         })
         if (res.code === 0) {
           this.$message.success(res.message)
-          this.gueryRole()
+          this.gueryRole({
+            QueryName: '',
+            PageSize: this.PageSize,
+            PageIndex: this.pageNum
+          })
         } else {
           this.$message.error(res.message)
         }
       } catch (error) {
         console.log('出错了', error)
       }
+    },
+    //滚动加载数据
+    load () {
+      this.pageNum += 1
+      if (this.search) {
+        this.gueryRole({
+          QueryName: this.search,
+          PageSize: this.PageSize,
+          PageIndex: this.pageNum
+        });
+      } else {
+        this.gueryRole({
+          QueryName: this.keyWords,
+          PageSize: this.PageSize,
+          PageIndex: this.pageNum
+        });
+      }
     }
   }
 }
@@ -191,6 +249,9 @@ export default {
 }
 .role-content {
   padding-top: 115px;
+  height: 84vh;
+  overflow-y: auto;
+  overflow-x: hidden;
   .el-col-lg-5-5 {
     width: 20%;
   }

src/views/staffManagement/minixs/roleData.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-24 11:36:07
- * @LastEditTime: 2022-01-07 16:22:27
+ * @LastEditTime: 2022-02-08 17:29:47
  * @LastEditors: Please set LastEditors
  * @Description: 权限公用
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\roleData.js
@@ -11,7 +11,8 @@ import { staffList, staffListele } from '@/api/postInterface'
 export default {
   data () {
     return {
-      dataList: {}
+      dataList: [],
+      list: []
     }
   },
   created () {
@@ -19,22 +20,34 @@ export default {
   },
   methods: {
     //获取列表数据
-    async gueryRole (name = '') {
+    async gueryRole (obj, type = '') {
       try {
-        const res = await staffList({
-          QueryName: name
-        })
+        this.loading = true
+        const res = await staffList(obj)
         if (res.code === 0) {
-          const datas = res.returnData
+          const datas = res.returnData.records
+          const num = res.returnData.pages
           datas.forEach(item => {
             item.isauto = item.Status == 1 ? true : false
-          });
-          this.arrs = datas
+          })
+          if (type) {
+            this.list.push(datas)
+            const arrs = this.list.flat()
+            this.arrs = arrs
+          } else {
+            this.dataList.push(datas)
+            const arrs = this.dataList.flat()
+            this.arrs = arrs
+          }
+          this.total = num
+          this.loading = false
         } else {
           this.$message.error(res.message)
+          this.loading = false
         }
       } catch (error) {
         console.log('出错了', error)
+        this.loading = false
       }
     },
     //删除职员