角色管理

kiisoo-ic-ui/src/iview.js

@@ -18,7 +18,10 @@ import {
     Col,
     Select,
     Option,
-    DatePicker
+    DatePicker,
+    CheckboxGroup,
+    Checkbox,
+    RadioGroup
 } from "view-design";
 import 'view-design/dist/styles/iview.css';
 
@@ -43,3 +46,6 @@ Vue.component('i-col', Col);
 Vue.component('Select', Select);
 Vue.component('Option', Option);
 Vue.component('DatePicker', DatePicker);
+Vue.component('CheckboxGroup', CheckboxGroup);
+Vue.component('Checkbox', Checkbox);
+Vue.component('RadioGroup', RadioGroup);

kiisoo-ic-ui/src/pages/Home.vue

@@ -12,7 +12,7 @@
           <Submenu name="1">
             <template slot="title">
               <Icon type="ios-paper" />
-              用户管理
+              设置管理
             </template>
             <MenuItem name="1-1" to="/account/manager">账号管理</MenuItem>
             <MenuItem name="1-2" to="/role/manager">角色管理</MenuItem>

kiisoo-ic-ui/src/pages/user/RoleManager.vue

@@ -1,10 +1,157 @@
+<style scoped>
+    /deep/.addButton {
+        background: #3496EB;
+    }
+    /deep/.deleteButton {
+        border:1px solid #3496EB;
+        color: #3496EB;
+        background: white;
+    }
+    /deep/.role-select-radio-group {
+        height: 24px;
+        line-height: 24px;
+        color: #637182;
+        border: 1px solid #EDEFF1;
+    }
+    /deep/.ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
+        color: #2d8cf0;
+    }
+</style>
 <template>
-    <p>RoleManager</p>
-</template>
+    <div>
+        <Row>
+            <Col span="6">
+                <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>
+                </div>
+            </col>
 
+            <!--权限多选-->
+            <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>
+                    </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>
+            </Col>
+        </Row>
+    </div>
+</template>
 <script>
+    import roleManager from '../../services/user/RoleManager'
     export default {
-        name: "RoleManager"
+        data() {
+            return {
+                name: "roleManager",
+                //角色选择
+                roleSelect: null,
+                //角色集合
+                roleList:[],
+                //保存权限
+
+                //权限集合
+                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,
+                      }
+                    ]},
+                ]
+
+
+
+            }
+        },
+        mounted: function () {
+
+        },
+        methods: {
+            //父权限-点击
+            handleCheckAll (index) {
+                let item = this.permissionList[index];
+                item.indeterminate = false;
+                if (item.indeterminate) {
+                    item.check = false;
+                } else {
+                    item.check = !item.check;
+                }
+                item.indeterminate = false;
+                if (item.check) {
+                    //全选
+                    item.checkArr = [];
+                    for(let i = 0; i < item.sonPermissionList.length; i++) {
+                        item.checkArr.push(item.sonPermissionList[i].id);
+                    }
+                } else {
+                    //取消全部选择
+                    item.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;
+                } else {
+                    data.indeterminate = false;
+                    data.check = false;
+                }
+                // this.saveRolePermissionApi();
+            },
+            addRoleModalShow: function() {
+
+            },
+            removeRoleModalShow: function () {
+
+            }
+        }
+
     }
 </script>
 

kiisoo-ic-ui/src/services/user/RoleManager.js

@@ -0,0 +1,21 @@
+/**
+ * 角色管理
+ * @author jinchaofan
+ * @date 2020/2/18
+ */
+import http from '../CommonHttp'
+
+/**
+ * 查询角色
+ * @param params
+ * @param call
+ * @returns {Promise<any | never>}
+ */
+/*export function listRoleInfoApi(params, call) {
+    return http.post('', params).then(call);
+}*/
+
+export default {
+    // listRoleInfoApi
+
+}