2

src/views/SystemManage/RoleManage.vue

@@ -75,7 +75,7 @@
                 :class="{
                   'diy-role-item': true,
                   active: item.id === diyRoleItemIndex,
-                  delWidth: delimgBoo
+                  delWidth: delimgBoo,
                 }"
               >
                 <div
@@ -257,10 +257,10 @@ import Confirmation from "@/components/Confirmation.vue";
 export default {
   name: "RoleManage",
   components: {
-    Confirmation
+    Confirmation,
   },
   watch: {
-    roleMenusSelection: function(val) {
+    roleMenusSelection: function (val) {
       console.info(val);
     },
     btnType: {
@@ -271,8 +271,8 @@ export default {
         } else {
           this.disabled = false;
         }
-      }
-    }
+      },
+    },
   },
   data() {
     return {
@@ -296,13 +296,13 @@ export default {
       btnType: "default",
       disabled: true,
       delimgBoo: false,
-      btnCheckList: []
+      btnCheckList: [],
     };
   },
   methods: {
     // 获取权限列表
     getPermissionDataLists() {
-      this.$axios.get("/system/permissions").then(res => {
+      this.$axios.get("/system/permissions").then((res) => {
         if (res.data.length > 0) {
           var arr = [];
           for (let i = 0; i < res.data.length; i++) {
@@ -326,9 +326,9 @@ export default {
     addrole() {
       var role = {
         name: "测试角色",
-        permissionIds: [11, 12]
+        permissionIds: [11, 12],
       };
-      this.$axios.post("/system/roles", role).then(res => {
+      this.$axios.post("/system/roles", role).then((res) => {
         console.info(res);
       });
     },
@@ -345,7 +345,7 @@ export default {
     search() {
       this.$axios
         .get("/system/roles")
-        .then(res => {
+        .then((res) => {
           if (res.data !== null) {
             res.data.forEach((item, index) => {
               var arr = [];
@@ -371,7 +371,7 @@ export default {
               }
 
               if (res.data.length > 0) {
-                this.checkList = res.data[0].permissions.map(i => i.id);
+                this.checkList = res.data[0].permissions.map((i) => i.id);
               } else {
                 this.checkList = [];
               }
@@ -383,7 +383,7 @@ export default {
             this.$message.error("获取角色信息失败！");
           }
         })
-        .catch(failResponse => {});
+        .catch((failResponse) => {});
     },
     // 删除
     del(id) {
@@ -398,7 +398,7 @@ export default {
         name: "自定义" + (this.diyRoleList.length + 1),
         flag: false,
         code: this.diyRoleList.length,
-        edit: true
+        edit: true,
       };
       this.diyRoleList.push(roleitem);
       setTimeout(() => {
@@ -417,7 +417,7 @@ export default {
     },
     viewSelect(item) {
       this.checkList =
-        (item.permissions && item.permissions.map(i => i.id)) || [];
+        (item.permissions && item.permissions.map((i) => i.id)) || [];
     },
     // 选中自定义某个权限
     chooseDiyRoleItem(item) {
@@ -431,7 +431,7 @@ export default {
     // 编辑
     editDiyRoleItem(item) {
       let edit = item.edit;
-      let index = this.diyRoleList.findIndex(i => i.id == item.id);
+      let index = this.diyRoleList.findIndex((i) => i.id == item.id);
       if (!edit && typeof edit != Boolean) edit = false;
       edit = !edit;
       this.$set(this.diyRoleList[index], "edit", edit);
@@ -444,7 +444,7 @@ export default {
     },
     //重置编辑状态
     resetEdit() {
-      let newArr = this.diyRoleList.map(i => {
+      let newArr = this.diyRoleList.map((i) => {
         i.edit = false;
         return i;
       });
@@ -459,7 +459,7 @@ export default {
       this.funFlag = false;
       this.dataFlag = true;
       console.info("数据权限");
-    }
+    },
   },
   created() {
     this.search();
@@ -470,7 +470,7 @@ export default {
       console.log(66666666, this.permissionDataList);
     }, 2000);
     this.funFlag = true;
-  }
+  },
 };
 </script>
 
@@ -511,6 +511,7 @@ export default {
   color: #333333 !important;
 }
 .diy-roles {
+
   position: relative;
   padding-top: 25px;
   padding-left: 0 !important;
@@ -525,6 +526,16 @@ export default {
   padding-right: 15px;
   padding-left: 20px;
   overflow: auto;
+  &::-webkit-scrollbar {
+    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+    height: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2)
+  }
+  &::-webkit-scrollbar-track {
+    background: #F5F5F5;
+  }
 }
 .chooseItem {
   position: relative;