角色管理滚动

src/styles/index.scss

@@ -1,8 +1,8 @@
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "./transition.scss";
-@import "./element-ui.scss";
-@import "./sidebar.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
 
 body {
   height: 100%;
@@ -23,7 +23,8 @@ label {
   font-weight: 700;
 }
 
-html {
+html,
+.scrollbar {
   height: 100%;
   box-sizing: border-box;
   &::-webkit-scrollbar {
@@ -69,7 +70,7 @@ li {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: " ";
+    content: ' ';
     clear: both;
     height: 0;
   }

src/views/authorityManagement/components/authorityRoleAdd.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 16:31:31
- * @LastEditTime: 2022-01-05 14:11:54
+ * @LastEditTime: 2022-02-08 11:06:26
  * @LastEditors: Please set LastEditors
  * @Description: 新增/编辑角色
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
@@ -17,61 +17,26 @@
         </div>
       </div>
       <div class="addApp-form-content dialog-public-background">
-        <el-form
-          :inline="true"
-          :rules="rules"
-          ref="form"
-          class="form"
-          :model="form"
-        >
+        <el-form :inline="true" :rules="rules" ref="form" class="form" :model="form">
           <el-form-item prop="name" label="角色名称">
-            <el-input
-              placeholder="请输入角色名称"
-              maxlength="32"
-              v-model="form.name"
-            ></el-input>
+            <el-input placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
           </el-form-item>
           <el-form-item label="描述">
-            <el-input
-              style="width: 640px"
-              maxlength="200"
-              placeholder="请输入描述"
-              v-model="form.app"
-            ></el-input>
+            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
           </el-form-item>
         </el-form>
       </div>
     </div>
     <div class="power-content flex-wrap">
       <div class="r24 flex1 part">
-        <Permissiontree
-          @nodeClick="nodeClick"
-          @getTreeData="getTreeData"
-          title="权限树"
-        />
+        <Permissiontree @nodeClick="nodeClick" @getTreeData="getTreeData" title="权限树" />
       </div>
       <div class="r24 flex1 part">
         <Rulesofcompetency @getData="getData" title="权限规则" />
       </div>
       <div class="flex1 part">
-        <Rolelist
-          @checkChange="checkChange"
-          @checkClick="checkClick"
-          :dataList="arrs"
-          :active="true"
-          class="hucRole"
-          :number="8"
-          style="height: 280px; overflow: hidden"
-          title="互斥角色"
-        />
-        <Permissionlist
-          v-loading="permission"
-          :RoleList="RoleList"
-          :check="true"
-          class="hucPower"
-          style="margin-top: 24px"
-          title="互斥角色已有权限列表"
-        />
+        <Rolelist @checkChange="checkChange" @checkClick="checkClick" :dataList="arrs" :active="true" class="hucRole" :number="8" style="height: 280px; overflow: hidden" title="互斥角色" />
+        <Permissionlist v-loading="permission" :RoleList="RoleList" :check="true" class="hucPower" style="margin-top: 24px" title="互斥角色已有权限列表" />
       </div>
     </div>
   </div>
@@ -88,7 +53,7 @@ export default {
   name: "AuthorityRoleAdd",
   components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
   mixins: [roleData],
-  data() {
+  data () {
     return {
       radio: 1,
       form: {
@@ -114,7 +79,7 @@ export default {
   },
   watch: {
     arrs: {
-      handler(arr) {
+      handler (arr) {
         arr.forEach((item) => {
           item.name = item.RoleName;
         });
@@ -123,20 +88,20 @@ export default {
       deep: true,
     },
   },
-  created() {
-    this.getAuthTree();
+  created () {
+    //this.getAuthTree();
   },
   methods: {
     //获取权限树回调
-    getTreeData(arr) {
+    getTreeData (arr) {
       this.treeData = arr;
     },
     //获取权限规则回调
-    getData(obj) {
+    getData (obj) {
       this.AuthObj = obj;
     },
     //互斥角色选中回调
-    checkChange(arr) {
+    checkChange (arr) {
       const datas = [];
       const arrs = [];
       this.arrs.forEach((item, index) => {
@@ -157,11 +122,11 @@ export default {
       this.checkedBoxs = arrs;
     },
     //互斥角色点击回调
-    checkClick(item) {
+    checkClick (item) {
       this.roleAuths(item.RoleId);
     },
     //互斥角色回调
-    async roleAuths(id) {
+    async roleAuths (id) {
       try {
         this.permission = true;
         let params = {
@@ -181,13 +146,13 @@ export default {
       }
     },
     //权限树点击
-    nodeClick(obj) {
+    nodeClick (obj) {
       const arr = this.$store.getters.authArrs;
       arr.push(obj);
       this.$store.dispatch("auth/changeAuthArrs", arr);
     },
     //新增
-    saveBtn(formName) {
+    saveBtn (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.saveRole();
@@ -198,7 +163,7 @@ export default {
       });
     },
     //新增保存
-    async saveRole() {
+    async saveRole () {
       try {
         const datas = [];
         this.treeData.forEach((item) => {

src/views/authorityManagement/components/authorityRoleEdit.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 16:31:31
- * @LastEditTime: 2022-01-04 14:52:07
+ * @LastEditTime: 2022-02-08 11:06:41
  * @LastEditors: Please set LastEditors
  * @Description: 新增/编辑角色
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
@@ -25,73 +25,26 @@
         </div>
       </div>
       <div class="addApp-form-content dialog-public-background">
-        <el-form
-          :inline="true"
-          ref="form"
-          :rules="rules"
-          class="form"
-          :model="form"
-        >
+        <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
           <el-form-item prop="name" label="角色名称">
-            <el-input
-              placeholder="请输入角色名称"
-              maxlength="32"
-              v-model="form.name"
-            ></el-input>
+            <el-input placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
           </el-form-item>
           <el-form-item label="描述">
-            <el-input
-              style="width: 640px"
-              maxlength="200"
-              placeholder="请输入描述"
-              v-model="form.app"
-            ></el-input>
+            <el-input style="width: 640px" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
           </el-form-item>
         </el-form>
       </div>
     </div>
     <div class="power-content flex-wrap">
       <div class="r24 flex1 part">
-        <Permissiontree
-          v-loading="loading"
-          element-loading-text="数据加载中"
-          @getTreeData="getTreeData"
-          :checkedKeys="checkedKeys"
-          title="权限树"
-        />
+        <Permissiontree v-loading="loading" element-loading-text="数据加载中" @getTreeData="getTreeData" :checkedKeys="checkedKeys" title="权限树" />
       </div>
       <div class="r24 flex1 part">
-        <Rulesofcompetency
-          v-loading="loading"
-          element-loading-text="数据加载中"
-          :authList="authList"
-          :authTo="authTo"
-          title="权限规则"
-        />
+        <Rulesofcompetency v-loading="loading" element-loading-text="数据加载中" :authList="authList" :authTo="authTo" title="权限规则" />
       </div>
       <div class="flex1 part">
-        <Rolelist
-          v-loading="loading"
-          element-loading-text="数据加载中"
-          @checkChange="checkChange"
-          @checkClick="checkClick"
-          :dataList="arrs"
-          :checkBoxList="radioCheck"
-          :active="true"
-          class="hucRole"
-          :number="8"
-          style="height: 280px; overflow: hidden"
-          title="互斥角色"
-        />
-        <Permissionlist
-          v-loading="permission"
-          element-loading-text="数据加载中"
-          :check="true"
-          :RoleList="RoleList"
-          class="hucPower"
-          style="margin-top: 24px"
-          title="互斥角色已有权限列表"
-        />
+        <Rolelist v-loading="loading" element-loading-text="数据加载中" @checkChange="checkChange" @checkClick="checkClick" :dataList="arrs" :checkBoxList="radioCheck" :active="true" class="hucRole" :number="8" style="height: 280px; overflow: hidden" title="互斥角色" />
+        <Permissionlist v-loading="permission" element-loading-text="数据加载中" :check="true" :RoleList="RoleList" class="hucPower" style="margin-top: 24px" title="互斥角色已有权限列表" />
       </div>
     </div>
   </div>
@@ -108,7 +61,7 @@ export default {
   name: "AuthorityRoleEdit",
   components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
   mixins: [roleData],
-  data() {
+  data () {
     return {
       radio: 1,
       form: {
@@ -140,7 +93,7 @@ export default {
   },
   watch: {
     arrs: {
-      handler(arr) {
+      handler (arr) {
         arr.forEach((item) => {
           item.name = item.RoleName;
         });
@@ -151,7 +104,7 @@ export default {
       deep: true,
     },
     defRoleId: {
-      handler(arr) {
+      handler (arr) {
         const datas = [];
         const arrs = [];
         this.arrs.forEach((item, index) => {
@@ -173,8 +126,8 @@ export default {
       deep: true,
     },
   },
-  created() {
-    this.getAuthTree();
+  created () {
+    //this.getAuthTree();
     const { RoleId, Status } = this.$route.query;
     this.roleId = RoleId;
     this.Status = Status;
@@ -182,7 +135,7 @@ export default {
   },
   methods: {
     //角色明细
-    async roleDetails(id) {
+    async roleDetails (id) {
       try {
         this.loading = true;
         const res = await RoleDetails({
@@ -216,19 +169,19 @@ export default {
       }
     },
     //删除
-    removeRole() {
+    removeRole () {
       this.deleteRole(this.roleId);
     },
     //获取权限树回调
-    getTreeData(arr) {
+    getTreeData (arr) {
       this.treeData = arr;
     },
     //获取权限规则回调
-    getData(obj) {
+    getData (obj) {
       this.authTo = obj;
     },
     //互斥角色选中回调
-    checkChange(arr) {
+    checkChange (arr) {
       const datas = [];
       const arrs = [];
       this.arrs.forEach((item, index) => {
@@ -249,10 +202,10 @@ export default {
       this.checkedBoxs = arrs;
     },
     //互斥角色点击回调
-    checkClick(item) {
+    checkClick (item) {
       this.roleAuths(item.RoleId);
     },
-    async roleAuths(id) {
+    async roleAuths (id) {
       try {
         let params = {
           RoleId: id,
@@ -272,7 +225,7 @@ export default {
       }
     },
     //保存
-    saveBtn(formName) {
+    saveBtn (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           this.editRole();
@@ -283,7 +236,7 @@ export default {
       });
     },
     //确认保存
-    async editRole() {
+    async editRole () {
       try {
         const datas = [];
         this.treeData.forEach((item) => {

src/views/authorityManagement/components/authorityRoleHome.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 14:37:54
- * @LastEditTime: 2021-12-31 16:44:46
+ * @LastEditTime: 2022-02-08 11:03:58
  * @LastEditors: Please set LastEditors
  * @Description: 角色管理
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRole.vue
@@ -19,9 +19,9 @@
       </Search>
     </div>
     <!--列表-->
-    <div class="role-content">
+    <div class="role-content scrollbar infinite-list-wrapper">
       <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 v-for="(item,index) in arrs" class="account-left-content-teams" :lg="{ span:'5-5' }" :key="index">
             <div class="team">
               <div :class="'status'+ item.IsDef" class="bg"></div>
@@ -58,6 +58,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>
@@ -89,18 +91,37 @@ export default {
   data () {
     return {
       arrs: [], //卡片数据
+      arr: [],
       arrsCopy: [],
       flag: false,
       title: '',
-      index: null
+      index: null,
+      pageNum: 1,
+      PageSize: 20,
+      loading: false,
+      keyWords: '',
+      total: null
     }
   },
-  created:function(){
+  created () {
     let keyWords = ""
-    if(this.$route.query.keyWords){
-      keyWords = this.$route.query.keyWords;
+    if (this.$route.query.keyWords) {
+      keyWords = this.$route.query.keyWords
+      this.keyWords = keyWords
+    }
+    this.gueryRole({
+      QueryName: keyWords,
+      PageSize: this.PageSize,
+      PageIndex: this.pageNum
+    });
+  },
+  computed: {
+    noMore () {
+      return this.pageNum >= this.total
+    },
+    disabled () {
+      return this.loading || this.noMore
     }
-    this.gueryRole(keyWords);
   },
   methods: {
     //删除
@@ -147,6 +168,15 @@ export default {
       } catch (error) {
         console.log('出错了', error)
       }
+    },
+    //滚动加载数据
+    load () {
+      this.pageNum += 1
+      this.gueryRole({
+        QueryName: this.keyWords,
+        PageSize: this.PageSize,
+        PageIndex: this.pageNum
+      });
     }
   }
 }
@@ -186,6 +216,9 @@ export default {
 }
 .role-content {
   margin-top: 32px;
+  height: 72vh;
+  overflow-y: auto;
+  overflow-x: hidden;
   .el-col-lg-5-5 {
     width: 20%;
   }

src/views/authorityManagement/minixs/roleData.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-24 11:36:07
- * @LastEditTime: 2021-12-24 16:28:29
+ * @LastEditTime: 2022-02-08 10:47:11
  * @LastEditors: Please set LastEditors
  * @Description: 权限公用
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\roleData.js
@@ -11,7 +11,7 @@ import { QueryRole, DeleteRole } from '@/api/apiAuthority'
 export default {
   data () {
     return {
-      dataList: {}
+      dataList: []
     }
   },
   created () {
@@ -19,22 +19,28 @@ export default {
   },
   methods: {
     //获取列表数据
-    async gueryRole (name = '') {
+    async gueryRole (obj) {
       try {
-        const res = await QueryRole({
-          QueryName: name
-        })
+        this.loading = true
+        const res = await QueryRole(obj)
         if (res.code === 0) {
-          const datas = res.returnData
+          const datas = res.returnData.records
           datas.forEach(item => {
             item.isauto = item.Status == 1 ? true : false
-          });
-          this.arrs = datas
+          })
+          const num = Math.ceil(res.returnData.total / 20)
+          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
       }
     },
     //删除角色