222

src/views/SystemManage/RoleManage.vue

@@ -14,7 +14,7 @@
           />
           新增角色
         </div>
-        <div class="img-btn" @click="copy">
+        <div class="img-btn" @click="copy" title="复制">
           <img
             src="../../assets/img/role/copy.png"
             style="
@@ -22,6 +22,7 @@
               width: 0.9375rem;
               margin-left: 0.0625rem;
               margin-top: 0.25rem;
+              cursor: pointer;
             "
           />
         </div>
@@ -123,43 +124,70 @@
           <!--            角色权限菜单列-->
           <div class="menus">
             <div class="div3">
-              <el-checkbox :label="permissionDataList[0].id">
+              <el-checkbox
+                v-if="permissionDataList[0]"
+                :label="permissionDataList[0].id"
+              >
                 {{ permissionDataList[0].name }}
               </el-checkbox>
-              <el-checkbox :label="permissionDataList[1].id">
+              <el-checkbox
+                :label="permissionDataList[1].id"
+                v-if="permissionDataList[1]"
+              >
                 {{ permissionDataList[1].name }}
               </el-checkbox>
-              <el-checkbox :label="permissionDataList[2].id">
+              <el-checkbox
+                :label="permissionDataList[2].id"
+                v-if="permissionDataList[2]"
+              >
                 {{ permissionDataList[2].name }}
               </el-checkbox>
             </div>
             <div class="div3">
-              <el-checkbox :label="permissionDataList[3].id">
+              <el-checkbox
+                :label="permissionDataList[3].id"
+                v-if="permissionDataList[3]"
+              >
                 {{ permissionDataList[3].name }}
               </el-checkbox>
             </div>
             <div class="div1">
-              <el-checkbox :label="permissionDataList[4].id">
+              <el-checkbox
+                :label="permissionDataList[4].id"
+                v-if="permissionDataList[4]"
+              >
                 {{ permissionDataList[4].name }}
               </el-checkbox>
             </div>
             <div class="div1">
-              <el-checkbox :label="permissionDataList[5].id">
+              <el-checkbox
+                :label="permissionDataList[5].id"
+                v-if="permissionDataList[5]"
+              >
                 {{ permissionDataList[5].name }}
               </el-checkbox>
             </div>
             <div class="div1">
-              <el-checkbox :label="permissionDataList[6].id">
+              <el-checkbox
+                :label="permissionDataList[6].id"
+                v-if="permissionDataList[6]"
+              >
                 {{ permissionDataList[6].name }}
               </el-checkbox>
             </div>
             <div class="div2">
-              <el-checkbox :label="permissionDataList[7].id">
+              <el-checkbox
+                :label="permissionDataList[7].id"
+                v-if="permissionDataList[7]"
+              >
                 {{ permissionDataList[7].name }}
               </el-checkbox>
             </div>
             <div class="div3">
-              <el-checkbox :label="permissionDataList[8].id">
+              <el-checkbox
+                :label="permissionDataList[8].id"
+                v-if="permissionDataList[8]"
+              >
                 {{ permissionDataList[8].name }}
               </el-checkbox>
             </div>
@@ -168,7 +196,8 @@
             <div class="div3">
               <div
                 class="line"
-                v-for="item in permissionDataList[0].children"
+                v-for="item in permissionDataList[0] &&
+                permissionDataList[0].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -176,7 +205,8 @@
               <br />
               <div
                 class="line"
-                v-for="item in permissionDataList[1].children"
+                v-for="item in permissionDataList[1] &&
+                permissionDataList[1].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -184,7 +214,8 @@
               <br />
               <div
                 class="line"
-                v-for="item in permissionDataList[2].children"
+                v-for="item in permissionDataList[2] &&
+                permissionDataList[2].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -193,7 +224,8 @@
             <div class="div3">
               <div
                 class="line"
-                v-for="item in permissionDataList[3].children"
+                v-for="item in permissionDataList[3] &&
+                permissionDataList[3].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -202,7 +234,8 @@
             <div class="div1">
               <div
                 class="line"
-                v-for="item in permissionDataList[4].children"
+                v-for="item in permissionDataList[4] &&
+                permissionDataList[4].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -211,7 +244,8 @@
             <div class="div1">
               <div
                 class="line"
-                v-for="item in permissionDataList[5].children"
+                v-for="item in permissionDataList[5] &&
+                permissionDataList[5].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -220,7 +254,8 @@
             <div class="div1">
               <div
                 class="line"
-                v-for="item in permissionDataList[6].children"
+                v-for="item in permissionDataList[6] &&
+                permissionDataList[6].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -229,7 +264,8 @@
             <div class="div2">
               <div
                 class="line"
-                v-for="item in permissionDataList[7].children"
+                v-for="item in permissionDataList[7] &&
+                permissionDataList[7].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -238,7 +274,8 @@
             <div class="div3">
               <div
                 class="line"
-                v-for="item in permissionDataList[8].children"
+                v-for="item in permissionDataList[8] &&
+                permissionDataList[8].children"
                 :key="item.id"
               >
                 <el-checkbox :label="item.id"> {{ item.name }}</el-checkbox>
@@ -280,6 +317,7 @@ export default {
       editurl: require("@/assets/img/edit.png"),
       funFlag: true,
       dataFlag: false,
+      //选择权限框
       checkList: [],
       roles: [],
       addRoleParams: [],
@@ -291,12 +329,18 @@ export default {
       roleMenusSelection: [],
       // 自定义的角色组
       diyRoleList: [],
+      //正在选择的角色框样式
       diyRoleItemIndex: 2,
-      defaultRoleItemIndex: 2,
+      //现在点击的按钮是默认人员还是自加人员
       btnType: "default",
+      //权限是否不可编辑
       disabled: true,
+      //删除图标变化开关
       delimgBoo: false,
+      //删除自己添加的用户时的数组
       btnCheckList: [],
+      //手动新添加的用户集合
+      customAddUser: [],
     };
   },
   methods: {
@@ -334,12 +378,82 @@ export default {
     },
     // 复制
     copy() {
-      console.info("复制数据");
+      if (this.customAddUser.length > 0) {
+        this.$message.warning("请先保存后再进行复制!");
+        return;
+      }
+      this.resetEdit();
+      let arr = [...this.defaultRoleBtns, ...this.diyRoleList];
+      let item = arr.find((i) => i.id == this.diyRoleItemIndex);
+      if (item) {
+        let id = this.diyRoleList.length + 20 + "copy";
+        var roleitem = {
+          name: item.name + "_copy",
+          flag: false,
+          code: this.diyRoleList.length,
+          edit: true,
+          id,
+          permissions: item.permissions,
+        };
+        this.diyRoleItemIndex = id;
+        //加列表
+        this.diyRoleList.push(roleitem);
+        //加添加的人员
+        this.customAddUser.push(roleitem);
+        //加权限
+        this.checkList = item?.permissions?.map((i) => i.id) || [];
+        this.btnType = "custom";
+        setTimeout(() => {
+          this.$refs.diyRoles.scrollTop = this.$refs.diyRoles.scrollHeight;
+        }, 20);
+      }
+      //defaultRoleBtns
+      // diyRoleList
+      // this.diyRoleItemIndex
+      console.info(item);
     },
     // 保存
     save() {
-      this.roleMenusSelection = this.roleMenus;
-      console.info("roleMenusSelection====", this.roleMenusSelection);
+      let self = this;
+      if (this.customAddUser.length > 0) {
+        let name = this.customAddUser[0].name;
+        let checkArr = this.checkList;
+        let params = {
+          name,
+          permissionIds: checkArr,
+        };
+        let index = this.diyRoleList.findIndex((i) => i.name == name);
+        if (checkArr.length > 0) {
+          let diyRolePermissions = checkArr.map((i) => {
+            return {
+              id: i,
+            };
+          });
+          this.$set(this.diyRoleList[index], "permissions", diyRolePermissions);
+        }
+        this.$axios({
+          method: "post",
+          url: "/system/roles",
+          headers: {
+            "Content-Type": "application/json;charset=UTF-8",
+          },
+          data: JSON.stringify(params),
+        }).then((res) => {
+          if (res.data) {
+            self.customAddUser = [];
+            self.resetEdit();
+            setTimeout(() => {
+              this.$message.success("新增角色成功!");
+            }, 1500);
+          } else {
+            setTimeout(() => {
+              this.$message.success("新增角色失败!");
+            }, 1500);
+          }
+        });
+      } else {
+        this.$message.warning("请添加用户后保存");
+      }
     },
     // 获取角色列表 和 角色权限列表
     search() {
@@ -393,14 +507,24 @@ export default {
     },
     // 新增
     add() {
+      if (this.customAddUser.length > 0) {
+        this.$message.warning("请先保存后再进行添加!");
+        return;
+      }
       this.resetEdit();
+      let id = this.diyRoleList.length + 20 + "l";
       var roleitem = {
         name: "自定义" + (this.diyRoleList.length + 1),
         flag: false,
         code: this.diyRoleList.length,
         edit: true,
+        id,
       };
+      this.diyRoleItemIndex = id;
       this.diyRoleList.push(roleitem);
+      this.customAddUser.push(roleitem);
+      this.checkList = [];
+      this.btnType = "custom";
       setTimeout(() => {
         this.$refs.diyRoles.scrollTop = this.$refs.diyRoles.scrollHeight;
       }, 20);
@@ -466,9 +590,6 @@ export default {
     this.getPermissionDataLists();
   },
   mounted() {
-    setTimeout(() => {
-      console.log(66666666, this.permissionDataList);
-    }, 2000);
     this.funFlag = true;
   },
 };
@@ -511,7 +632,6 @@ export default {
   color: #333333 !important;
 }
 .diy-roles {
-
   position: relative;
   padding-top: 25px;
   padding-left: 0 !important;
@@ -531,10 +651,10 @@ export default {
     height: 10px;
   }
   &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2)
+    background: rgba(0, 0, 0, 0.2);
   }
   &::-webkit-scrollbar-track {
-    background: #F5F5F5;
+    background: #f5f5f5;
   }
 }
 .chooseItem {
@@ -553,4 +673,12 @@ export default {
 .delWidth {
   width: 170px !important;
 }
+.el-checkbox /deep/ {
+  .is-checked {
+    .el-checkbox__inner {
+      background-color: #055fe7 !important;
+      border-color: #055fe7 !important;
+    }
+  }
+}
 </style>

src/views/SystemManage/scss/role.scss

@@ -107,10 +107,9 @@
         }
         .diy-edit-title {
           width: 146px;
-          height: 19px;
+          height: 100%;
           font-size: 14px;
           color: #333333;
-          line-height: 19px;
         }
         .diy-edit-btn {
           width: 40px;