From 6800039a5fa8080d50185ff8bf2010a2a4a9cf99 Mon Sep 17 00:00:00 2001
From: jiangyunjie <woainiduoduo999@163.com>
Date: Fri, 10 Apr 2020 09:56:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kiisoo-ic-ui/src/pages/user/RoleManager.vue | 368 +++++++++++++++-----
 1 file changed, 285 insertions(+), 83 deletions(-)

diff --git a/kiisoo-ic-ui/src/pages/user/RoleManager.vue b/kiisoo-ic-ui/src/pages/user/RoleManager.vue
index 57db6e5..4909ed3 100644
--- a/kiisoo-ic-ui/src/pages/user/RoleManager.vue
+++ b/kiisoo-ic-ui/src/pages/user/RoleManager.vue
@@ -25,16 +25,22 @@
         width: 12px;
         display: inline-block;
         margin-right: 9px;
+        margin-left: 7px;
     }
     /deep/.system-role-name-selected {
         font-size: 14px;
         display: inline-block;
         color: #2074E2;
+        cursor: default;
     }
     /deep/.system-role-name-un-select {
         font-size: 14px;
         display: inline-block;
         color: #535353;
+        cursor: default;
+    }
+    /deep/.system-role-name-un-select:hover {
+        color: #2074E2;
     }
     /deep/.system-role-number-selected {
         font-size: 13px;
@@ -42,6 +48,7 @@
         color: #2074E2;
         float: right;
         margin-right: 11px;
+        cursor: pointer;
     }
     /deep/.system-role-number-un-select {
         font-size: 13px;
@@ -49,12 +56,24 @@
         color: #535353;
         float: right;
         margin-right: 11px;
+        cursor: pointer;
+    }
+    /deep/.ivu-checkbox {
+        margin-right: 13px;
+    }
+    /deep/.ivu-checkbox-checked .ivu-checkbox-inner {
+        border-color: #2074E2;
+        background-color: #2074E2;
+    }
+    /deep/.ivu-checkbox-indeterminate .ivu-checkbox-inner {
+        border-color: #2074E2;
+        background-color: #2074E2;
     }
 </style>
 <template>
-    <div>
-        <Row>
-            <i-col span="6">
+    <div style="height: 100%;">
+        <Row style="height: 100%;">
+            <i-col span="6" style="height: 100%;">
                 <div style="border: 1px solid #EDEFF1">
                     <div style="margin: 15px 0 15px 15px">
                         <span style="color: #697882;font-size: 12px;font-weight: 700">系统角色</span>
@@ -62,28 +81,58 @@
                 </div>
                 <div>
                     <div class="system-role-div" v-for="item in roleList" :value="item.index" :key="item.id">
-                        <img :src="roleSelectId === item.id ? '../../../static/img/role-selected.png' : '../../../static/img/role-un-select.png'" class="system-role-img"/>
-                        <span :class="roleSelectId === item.id ? 'system-role-name-selected' : 'system-role-name-un-select'">{{item.name}}</span>
-                        <span :class="roleSelectId === item.id ? 'system-role-number-selected' : 'system-role-number-un-select'" @click="goToAccManagerPage">{{item.number}}</span>
+                        <img :src="item.imgUrl" class="system-role-img"/>
+                        <span :class="item.selectFlag === 'selected' ? 'system-role-name-selected' : 'system-role-name-un-select'"
+                              @click="selectRole(item.id)" :value="item.id">{{item.name}}</span>
+                        <span :class="item.selectFlag === 'selected' ? 'system-role-number-selected' : 'system-role-number-un-select'"
+                              @click="goToAccManagerPage">{{item.number}}</span>
                     </div>
-                    <!--<div class="system-role-div">
-                        <img src="../../../static/img/role-un-select.png" class="system-role-img"/>
-                        <span class="system-role-name-un-select">运营人员</span>
-                        <span class="system-role-number-un-select">18</span>
-                    </div>-->
                 </div>
             </i-col>
 
             <!--权限多选-->
-            <i-col span="18">
-                <div v-for="(item,index) in permissionList" :key="item.id" style="margin-top: 25px">
-                    <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
-                        <Checkbox :indeterminate="item.indeterminate" :value="item.check"
-                                  @click.prevent.native="handleCheckAll(index)"  style="color:#697882">{{item.name}}</Checkbox>
+            <i-col span="18" style="height: 100%;">
+                <div style="border: 1px solid #EDEFF1">
+                    <div style="margin: 15px 0 15px 15px">
+                        <span style="color: #697882;font-size: 12px;font-weight: 700">角色权限</span>
                     </div>
-                    <CheckboxGroup v-model="item.checkArr" @on-change="checkAllGroupChange(item)">
-                        <Checkbox  v-for="itemSon in item.sonPermissionList" :key="itemSon.id"  style="margin-left: 30px;color:#697882" :label="itemSon.id"  >{{itemSon.name}}</Checkbox>
-                    </CheckboxGroup>
+                </div>
+                <div style="padding-left: 15px;">
+                    <!--1-->
+                    <div v-for="item in permissionList" :key="item.id">
+                        <div style="border-bottom: 1px solid #e9e9e9;height: 49px;line-height: 49px;">
+                            <Checkbox :indeterminate="item.indeterminate" :value="item.check"
+                                      @click.prevent.native="handleCheckAll(item)"  style="color:#697882;margin-right: 20px;">{{item.name}}</Checkbox>
+                        </div>
+                        <!--2-->
+                        <CheckboxGroup v-model="item.checkArr">
+                            <div v-for="itemSon in item.sonPermissionList" :key="itemSon.id" style="height: 49px;">
+                                <div style="float: left;width: 20%;border-right: 1px solid #E4E9F1;border-bottom: 1px solid #E4E9F1;height: 49px;line-height: 49px;">
+                                    <Checkbox style="margin-left: 30px;color:#697882" :label="itemSon.id"
+                                              @click.prevent.native="handleSonCheckAll(itemSon, item)" :key="itemSon.id"
+                                              :indeterminate="itemSon.indeterminate" :value="itemSon.check">
+                                        {{itemSon.name}}
+                                    </Checkbox>
+                                </div>
+                                <!--3-->
+                                <div style="float: left;width: 80%;height: 49px;line-height: 49px;border-bottom: 1px solid #E4E9F1;">
+                                    <CheckboxGroup v-model="itemSon.checkArr"
+                                                   @on-change="handleGrandSonCheckChange(itemSon, item)">
+                                        <Checkbox v-for="itemGrandson in itemSon.sonPermissionList"
+                                                  :key="itemGrandson.id"
+                                                  style="margin-left: 30px;color:#697882" :label="itemGrandson.id" :value="itemGrandson.check">
+                                            {{itemGrandson.name}}
+                                        </Checkbox>
+                                    </CheckboxGroup>
+                                </div>
+                            </div>
+
+                        </CheckboxGroup>
+                    </div>
+                </div>
+                <div style="top: 76%;border-top: 1px solid #E4E9F1;width: 100%;padding-top: 20px;position: absolute;text-align: center;">
+                    <Button  type="text" style="width: 70px;border: 1px solid #BBBBBB;height: 32px;color: #333333;margin-right: 35px;line-height: 32px;" @click="cancelEdit()">取消</Button>
+                    <Button type="primary" style="width: 70px;height: 32px;line-height: 32px;background-color: #2074E2;" @click="savePermission()">确定</Button>
                 </div>
             </i-col>
         </Row>
@@ -91,6 +140,8 @@
 </template>
 <script>
     // import RoleManager from '../../services/user/RoleManager'
+    import roleSelectedImg from '../../../static/img/role-selected.png'
+    import roleUnSelectImg from '../../../static/img/role-un-select.png'
     export default {
         data() {
             return {
@@ -102,66 +153,138 @@
                     {
                         id: 1,
                         name: "系统管理员",
-                        number: 6
+                        number: 6,
+                        imgUrl: roleSelectedImg,
+                        selectFlag: 'selected'
                     },
                     {
                         id: 2,
                         name: "运营人员",
-                        number: 18
+                        number: 18,
+                        imgUrl: roleUnSelectImg,
+                        selectFlag: "unSelect"
                     },
                     {
                         id: 3,
                         name: "店长",
-                        number: 123
+                        number: 123,
+                        imgUrl: roleUnSelectImg,
+                        selectFlag: "unSelect"
                     },
                     {
                         id: 4,
                         name: "导购",
-                        number: 423
+                        number: 423,
+                        imgUrl: roleUnSelectImg,
+                        selectFlag: "unSelect"
                     },
                 ],
                 //权限集合
                 permissionList: [
                     {
-                      id: 1,
-                      name: '大权限',
-                      level: 1,
-                      //选中1个：false，全部选中：true，全未选：false
-                      check: false,
-                      //选中1个：true，全部选中：true，全未选：false
-                      indeterminate: false,
-                      //选中的子权限
-                      checkArr:[2, 3],
-                      sonPermissionList:[
-                        {
-                          id: 2,
-                          name: '小权限1',
-                          level: 2,
-                        },
-                        {
-                          id: 3,
-                          name: '小权限2',
-                          level: 2,
-                        }
-                      ]},{
-                    id: 4,
-                    name: '大权限',
-                    level: 1,
-                    check: false,
-                    checkArr:[],
-                    indeterminate: false,
-                    sonPermissionList:[
-                      {
-                        id: 5,
-                        name: '小权限3',
-                        level: 2,
-                      },
-                      {
-                        id: 6,
-                        name: '小权限4',
-                        level: 2,
-                      }
-                    ]},
+                        id: 1,
+                        name: '一级权限a',
+                        level: 1,
+                        //选中1个：false，全部选中：true，全未选：false
+                        check: false,
+                        //选中1个：true，全部选中：true，全未选：false
+                        indeterminate: false,
+                        //选中的子权限
+                        checkArr:[],
+                        sonPermissionList:[
+                            {
+                                id: 2,
+                                name: '二级权限a',
+                                level: 2,
+                                //选中1个：false，全部选中：true，全未选：false
+                                check: false,
+                                //选中1个：true，全部选中：true，全未选：false
+                                indeterminate: false,
+                                checkArr:[],
+                                sonPermissionList:[
+                                    {
+                                        id: 7,
+                                        name: '三级权限a',
+                                        level: 3,
+                                    },
+                                    {
+                                        id: 8,
+                                        name: '三级权限b',
+                                        level: 3,
+                                    }
+                                ]
+                            },
+                            {
+                                id: 3,
+                                name: '二级权限b',
+                                level: 2,
+                                //选中1个：false，全部选中：true，全未选：false
+                                check: false,
+                                //选中1个：true，全部选中：true，全未选：false
+                                indeterminate: false,
+                                checkArr:[],
+                                sonPermissionList:[
+                                    {
+                                        id: 9,
+                                        name: '三级权限c',
+                                        level: 3,
+                                    },
+                                    {
+                                        id: 10,
+                                        name: '三级权限d',
+                                        level: 3,
+                                    }
+                                ]
+                            }
+                        ]},{
+                        id: 4,
+                        name: '一级权限b',
+                        level: 1,
+                        check: false,
+                        checkArr:[],
+                        indeterminate: false,
+                        sonPermissionList:[
+                            {
+                                id: 5,
+                                name: '二级权限c',
+                                level: 2,
+                                check: false,
+                                checkArr:[],
+                                indeterminate: false,
+                                sonPermissionList:[
+                                    {
+                                        id: 11,
+                                        name: '三级权限e',
+                                        level: 3,
+                                    },
+                                    {
+                                        id: 12,
+                                        name: '三级权限f',
+                                        level: 3,
+                                    }
+                                ]
+                            },
+                            {
+                                id: 6,
+                                name: '二级权限d',
+                                level: 2,
+                                check: false,
+                                checkArr:[],
+                                indeterminate: false,
+                                sonPermissionList:[
+                                    {
+                                        id: 13,
+                                        name: '三级权限g',
+                                        level: 3,
+                                    },
+                                    {
+                                        id: 14,
+                                        name: '三级权限h',
+                                        level: 3,
+                                    }
+                                ]
+                            }
+                        ]},
                 ]
 
             }
@@ -170,16 +293,15 @@
 
         },
         methods: {
-            //父权限-点击
-            handleCheckAll (index) {
-                let item = this.permissionList[index];
-                item.indeterminate = false;
+            //一级权限-点击事件
+            handleCheckAll (item) {
                 if (item.indeterminate) {
                     item.check = false;
                 } else {
                     item.check = !item.check;
                 }
                 item.indeterminate = false;
+                //二级权限全选
                 if (item.check) {
                     //全选
                     item.checkArr = [];
@@ -190,32 +312,112 @@
                     //取消全部选择
                     item.checkArr = [];
                 }
+                //三级权限全选
+                let sonPermission = item.sonPermissionList;
+                if (item.check) {
+                    //全选
+                    sonPermission.forEach(function (sonItem) {
+                        let grandsonPermissionList = sonItem.sonPermissionList;
+                        grandsonPermissionList.forEach(function (grandsonItem) {
+                            sonItem.checkArr.push(grandsonItem.id);
+                        })
+                    })
+                } else {
+                    //取消全部选择
+                    sonPermission.checkArr = [];
+                }
                 // this.saveRolePermissionApi();
             },
-            //子全选点击
-            checkAllGroupChange (data) {
-                let sonPermissionCount = data.sonPermissionList.length;
-                if (data.checkArr.length === sonPermissionCount) {
-                    data.indeterminate = false;
-                    data.check = true;
-                } else if (data.checkArr.length > 0) {
-                    data.indeterminate = true;
-                    data.check = false;
+            //二级权限-点击事件
+            handleSonCheckAll(itemSon, item) {
+                if (itemSon.indeterminate) {
+                    itemSon.check = false;
                 } else {
-                    data.indeterminate = false;
-                    data.check = false;
+                    itemSon.check = !itemSon.check;
+                }
+                itemSon.indeterminate = false;
+                //三级权限全选
+                let sonPermission = itemSon.sonPermissionList;
+                if (itemSon.check) {
+                    //全选
+                    itemSon.checkArr = [];
+                    sonPermission.forEach(function (sonItem) {
+                        if (itemSon.checkArr.indexOf(sonItem.id) < 0) {
+                            itemSon.checkArr.push(sonItem.id);
+                        }
+                    });
+                    if (item.checkArr.indexOf(itemSon.id) < 0) {
+                        item.checkArr.push(itemSon.id);
+                    }
+                } else {
+                    //取消全部选择
+                    itemSon.checkArr = [];
+                }
+                //处理一级权限勾选
+                let sonPermissionCount = this.permissionList.length;
+                if (item.checkArr.length === sonPermissionCount) {
+                    item.indeterminate = false;
+                    item.check = true;
+                } else if (item.checkArr.length > 0) {
+                    item.indeterminate = true;
+                    item.check = false;
+                } else {
+                    item.indeterminate = false;
+                    item.check = false;
+                }
+            },
+            //三级权限-点击事件
+            handleGrandSonCheckChange (itemSon, item) {
+                debugger
+                let sonPermissionCount = itemSon.sonPermissionList.length;
+                if (itemSon.checkArr.length === sonPermissionCount) {
+                    itemSon.indeterminate = false;
+                    itemSon.check = true;
+                } else if (itemSon.checkArr.length > 0) {
+                    itemSon.indeterminate = true;
+                    itemSon.check = false;
+                } else {
+                    itemSon.indeterminate = false;
+                    itemSon.check = false;
+                }
+                let parentPermissionCount = item.sonPermissionList.length;
+                if (item.checkArr.length === parentPermissionCount) {
+                    item.indeterminate = false;
+                    item.check = true;
+                } else if (item.checkArr.length > 0) {
+                    item.indeterminate = true;
+                    item.check = false;
+                } else {
+                    item.indeterminate = false;
+                    item.check = false;
                 }
-                // this.saveRolePermissionApi();
             },
-            addRoleModalShow: function() {
+            //点击角色数字跳转到账号管理页面
+            goToAccManagerPage: function () {
 
             },
-            removeRoleModalShow: function () {
+            //选中角色
+            selectRole: function (id) {
+                let curId = id;
+                let that = this;
+                that.roleList.forEach(function (item) {
+                    if (item.id === curId) {
+                        item.imgUrl = roleSelectedImg;
+                        item.selectFlag = "selected";
+                    } else {
+                        item.imgUrl = roleUnSelectImg;
+                        item.selectFlag = "unSelect";
+                    }
+                });
 
             },
-            //点击角色数字跳转到账号管理页面 todo
-            goToAccManagerPage: function () {
-                this.$Message.info("进入账号管理！");
+            //取消选中
+            cancelEdit: function () {
+
+            },
+            //保存
+            savePermission: function () {
+
             }
         }
 

From a9bacb5e27489d33907f4ab9266ef342e225be2a Mon Sep 17 00:00:00 2001
From: jiangyunjie <woainiduoduo999@163.com>
Date: Fri, 10 Apr 2020 09:58:22 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kiisoo-ic-ui/src/pages/user/RoleManager.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/kiisoo-ic-ui/src/pages/user/RoleManager.vue b/kiisoo-ic-ui/src/pages/user/RoleManager.vue
index 4909ed3..a3d0a15 100644
--- a/kiisoo-ic-ui/src/pages/user/RoleManager.vue
+++ b/kiisoo-ic-ui/src/pages/user/RoleManager.vue
@@ -368,7 +368,6 @@
             },
             //三级权限-点击事件
             handleGrandSonCheckChange (itemSon, item) {
-                debugger
                 let sonPermissionCount = itemSon.sonPermissionList.length;
                 if (itemSon.checkArr.length === sonPermissionCount) {
                     itemSon.indeterminate = false;