角色的静态页面 新增和删除

src/views/SystemManage/RoleManage.vue

@@ -16,7 +16,7 @@
               style="height: .9375rem;width: .9375rem;margin-left:.0625rem ;margin-top: .25rem"
             />
           </div>
-          <div class="img-btn" @click="del">
+          <div class="img-btn" @click="del(diyRoleItemIndex)">
             <img
               src="../../assets/img/role/delete.png"
               style="height: .9375rem;width: .9375rem;margin-left:.0625rem ;margin-top: .25rem"
@@ -29,10 +29,24 @@
             v-for="(item, index) in defaultRoleBtns"
             :key="index"
             :class="{ active: item.flag }"
+            @click="chooseDefaultRoleItem(index)"
           >
             {{ item.name }}
           </div>
         </div>
+        <div class="diy-roles">
+          <div
+            class="diy-role-item"
+            v-for="(item, index) in diyRoleList"
+            :key="index"
+            :class="{ active: item.flag === true }"
+            @click="chooseDiyRoleItem(index)"
+          >
+            {{ item.name }}
+            <!--            <div class="diy-edit-title">{{ item.name }}</div>-->
+            <!--            <div class="diy-edit-btn"></div>-->
+          </div>
+        </div>
       </div>
       <div class="main">
         <div class="header">
@@ -308,8 +322,11 @@ export default {
         { name: "本地重卡反馈", code: 14, flag: false },
         { name: "本地涉案反馈", code: 15, flag: false }
       ],
-      // 角色权限选项
-      roleMenusSelection: []
+      // 保存的角色选项
+      roleMenusSelection: [],
+      // 自定义的角色组
+      diyRoleList: [],
+      diyRoleItemIndex: -1
     };
   },
   methods: {
@@ -335,32 +352,39 @@ export default {
         .catch(failResponse => {});
     },
     // 删除
-    del() {
-      console.info("删除数据");
-      var sysRole = new URLSearchParams();
-      sysRole.append("roleId", "16");
-      this.$axios
-        .post("/login/role/deleteRoleById", sysRole)
-        .then(res => {})
-        .catch(failResponse => {});
+    del(id) {
+      console.info("删除数据", id);
+      this.diyRoleList.splice(id, 1);
+      // var sysRole = new URLSearchParams();
+      // sysRole.append("roleId", "16");
+      // this.$axios
+      //   .post("/login/role/deleteRoleById", sysRole)
+      //   .then(res => {})
+      //   .catch(failResponse => {});
     },
     // 新增
     add() {
+      var roleitem = {
+        name: "自定义" + (this.diyRoleList.length + 1),
+        flag: false,
+        code: this.diyRoleList.length
+      };
+      this.diyRoleList.push(roleitem);
       console.info("新增数据");
-      var role = new URLSearchParams();
-      role.append("roleName", "角色名");
-      role.append("description", "角色描述");
+      // var role = new URLSearchParams();
+      // role.append("roleName", "角色名");
+      // role.append("description", "角色描述");
       // sffb; //(是否发布:0:未发布,1:已发布),
       // pid; // (父级角色的id),
       // isparent; //(是否是父级：0：父级，1：子级),
       // type角色类型;
-      this.$axios
-        .post("/login/role/add", role)
-        .then(res => {
-          console.log(res);
-          this.$message.success(res.message);
-        })
-        .catch(failResponse => {});
+      // this.$axios
+      //   .post("/login/role/add", role)
+      //   .then(res => {
+      //     console.log(res);
+      //     this.$message.success(res.message);
+      //   })
+      //   .catch(failResponse => {});
     },
     // 编辑
     edit() {
@@ -382,6 +406,28 @@ export default {
         .then(res => {})
         .catch(failResponse => {});
     },
+    // 选中默认权限
+    chooseDefaultRoleItem(index) {
+      this.defaultRoleBtns.forEach((roleitem, idx) => {
+        if (idx === index) {
+          roleitem.flag = true;
+        } else {
+          roleitem.flag = false;
+        }
+      });
+    },
+    // 选中自定义某个权限
+    chooseDiyRoleItem(index) {
+      this.diyRoleItemIndex = index;
+      this.diyRoleList.forEach((roleitem, idx) => {
+        if (idx === index) {
+          roleitem.flag = true;
+        } else {
+          roleitem.flag = false;
+        }
+      });
+      // this.diyRoleList[index].flag = true;
+    },
     funAuth() {
       this.funFlag = true;
       this.dataFlag = false;

src/views/SystemManage/scss/role.scss

@@ -77,6 +77,48 @@
         }
       }
     }
+    .diy-roles{
+      //border: saddlebrown 1px solid;
+      width: 215px;
+      height: 366px;
+      display: flex;
+      flex-direction: column;
+      padding-top: 10px;
+      overflow:scroll;
+      .diy-role-item{
+        width: 190px;
+        height: 40px;
+        border-radius: 4px;
+        border: 1px solid #AEB5C2;
+        font-size: 14px;
+        color: #333333;
+        line-height: 40px;
+        margin-bottom: 10px;
+        cursor: pointer;
+
+        &.active{
+          border: 1px solid #055FE7;
+          color: #055FE7;
+        }
+        //.diy-edit-title{
+        //  //border: saddlebrown 1px solid;
+        //  height: 19px;
+        //  font-size: 14px;
+        //  color: #333333;
+        //  line-height: 19px;
+        //}
+        //.diy-edit-btn{
+        //  width: 28px;
+        //  height: 20px;
+        //  background: #DDEBFF;
+        //  box-shadow: 0px 0px 4px 0px rgba(5, 95, 231, 0.3);
+        //  border-bottom-left-radius:250px;
+        //  position: relative;
+        //  right: -55px;
+        //  top: -3px;
+        //}
+      }
+    }
   }
   .main {
     width: 100%;