角色管理

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

@@ -16,20 +16,66 @@
     /deep/.ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
         color: #2d8cf0;
     }
+    /deep/.system-role-div {
+        height: 39px;
+        padding: 10px;
+    }
+    /deep/.system-role-img {
+        height: 12px;
+        width: 12px;
+        display: inline-block;
+        margin-right: 9px;
+    }
+    /deep/.system-role-name-selected {
+        font-size: 14px;
+        display: inline-block;
+        color: #2074E2;
+    }
+    /deep/.system-role-name-un-select {
+        font-size: 14px;
+        display: inline-block;
+        color: #535353;
+    }
+    /deep/.system-role-number-selected {
+        font-size: 13px;
+        display: inline-block;
+        color: #2074E2;
+        float: right;
+        margin-right: 11px;
+    }
+    /deep/.system-role-number-un-select {
+        font-size: 13px;
+        display: inline-block;
+        color: #535353;
+        float: right;
+        margin-right: 11px;
+    }
 </style>
 <template>
     <div>
         <Row>
-            <Col span="6">
+            <i-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>
+                        <span style="color: #697882;font-size: 12px;font-weight: 700">系统角色</span>
                     </div>
                 </div>
-            </col>
+                <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>
+                    </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>
 
             <!--权限多选-->
-            <Col span="18">
+            <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"
@@ -39,22 +85,41 @@
                         <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>
+            </i-col>
         </Row>
     </div>
 </template>
 <script>
-    import roleManager from '../../services/user/RoleManager'
+    // import RoleManager from '../../services/user/RoleManager'
     export default {
         data() {
             return {
-                name: "roleManager",
-                //角色选择
-                roleSelect: null,
+                name: "RoleManager",
+                //当前选中角色id
+                roleSelectId: 1,
                 //角色集合
-                roleList:[],
-                //保存权限
-
+                roleList:[
+                    {
+                        id: 1,
+                        name: "系统管理员",
+                        number: 6
+                    },
+                    {
+                        id: 2,
+                        name: "运营人员",
+                        number: 18
+                    },
+                    {
+                        id: 3,
+                        name: "店长",
+                        number: 123
+                    },
+                    {
+                        id: 4,
+                        name: "导购",
+                        number: 423
+                    },
+                ],
                 //权限集合
                 permissionList: [
                     {
@@ -99,8 +164,6 @@
                     ]},
                 ]
 
-
-
             }
         },
         mounted: function () {
@@ -149,6 +212,10 @@
             },
             removeRoleModalShow: function () {
 
+            },
+            //点击角色数字跳转到账号管理页面 todo
+            goToAccManagerPage: function () {
+                this.$Message.info("进入账号管理！");
             }
         }