修改

src/App.vue

@@ -12,7 +12,7 @@ export default {
 
 <style>
 @import url('~assets/css/font.css');
-@import url('//at.alicdn.com/t/font_2077629_48r8joof2tp.css');
+@import url('//at.alicdn.com/t/font_2077629_q3ogqen6wec.css');
 
 html,
 body,

src/components/system/role-form.vue

+<style>
+  .role-form .role_Line {
+    width: 2px;
+    height: 11px;
+    margin-right: 10px;
+    background-color: #3FC4FF;
+    display: inline-block;
+  }
+
+  .role-form .role_MenuList {
+    width: 100%;
+    height: 40px;
+    border-radius: 3px;
+    border: 1px solid #2961FE;
+    color: #2961FE;
+    align-items: center;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+  .role-form .role_TreeList{
+    height:250px;
+    overflow: auto;
+  }
+  .role-form .role_TreeList::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+    background-color: #F5F5F5;
+  }
+
+  /*定义滚动条轨道 内阴影+圆角*/
+  .role-form .role_TreeList::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+
+  /*定义滑块 内阴影+圆角*/
+  .role-form .role_TreeList::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
+    background-color: #0ae;
+  }
+
+
+  .role-form .role_MenuList span {
+    width: 80px;
+    display: inline-block;
+    text-align: center;
+    height: 100%;
+    line-height: 38px;
+    cursor: pointer;
+  }
+
+  .role-form .checkedRole {
+    background-color: #2961FE;
+    color: #fff;
+  }
+
+  .role-form .role_ItemList {
+    width: 200px;
+    height: 300px;
+    background-color: #F1F1F1;
+    margin-right: 10px;
+    display: inline-block;
+    border-radius: 4px;
+    overflow: auto;
+  }
+  .role-form .role_ItemList::-webkit-scrollbar {
+    width: 3px;
+    height: 6px;
+    background-color: #F5F5F5;
+  }
+
+  /*定义滚动条轨道 内阴影+圆角*/
+  .role-form .role_ItemList::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+
+  /*定义滑块 内阴影+圆角*/
+  .role-form .role_ItemList::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
+    background-color: #0ae;
+  }
+
+
+  .role-form .Item_Main::-webkit-scrollbar {
+    width: 3px;
+    height: 6px;
+    background-color: #F5F5F5;
+  }
+
+  /*定义滚动条轨道 内阴影+圆角*/
+  .role-form .Item_Main::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+
+  /*定义滑块 内阴影+圆角*/
+  .role-form .Item_Main::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
+    background-color: #0ae;
+  }
+
+
+  .role-form .role_SecondItem {
+    width: 100%;
+    height: 40px;
+    background-color: #3fc4ff;
+    padding:0 10px 0 20px;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    justify-content: space-between;
+  }
+
+  .role-form .Item_Main {
+    margin: 20px 0;
+    white-space: nowrap;
+    overflow: auto;
+    padding-bottom:20px;
+  }
+  .role-form .role_textarea .q-field__control-container{
+    height:85px;
+  }
+</style>
 <template>
-  <q-dialog v-model="persistent" persistent transition-show="scale" transition-hide="scale">
-    <q-card style="width: 800px;max-width:900px;">
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 800px;max-width:900px;" class="role-form">
       <q-card-section>
         <div class="text-h6">{{objOption.RoleId==0?'新增角色信息':'修改角色信息'}}</div>
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
-        <div class="text-caption q-mb-lg q-px-md text-grey-6">角色信息</div>
+        <div class="text-caption q-mb-lg text-dark-6">
+          <span class="role_Line"></span>角色信息</div>
         <div class="row wrap">
           <q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.RoleName" ref="RoleName"
             class="col-6 q-pr-lg q-pb-lg" label="角色名称" :rules="[val => !!val || '请填写角色名称']" />
-          <q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.RoleIntro" ref="RoleIntro"
-            class="col-6 q-pr-lg q-pb-lg" label="角色介绍" />
+        </div>
+        </div>
+        <div class="row wrap role_textarea">
+          <q-input filled v-model="objOption.RoleIntro" class="col-12 row-2" maxlength="100" label="角色介绍" type="textarea" />
           <div class="col-12 q-pr-lg q-pb-lg q-pt-lg">
             <q-toggle size="md" label="状态" color="primary" :false-value="1" :true-value="0" v-model="objOption.Status"
               title="注意：关闭后，角色将无法正常使用." />
           </div>
         </div>
         <div class="text-caption q-mb-lg q-px-md text-grey-6">权限设置</div>
-        <q-card>
+        <div class="role_MenuList">
+          <span @click="getItem(item,index)" :class="{'checkedRole':index==checkedIndex}"
+            v-for="(item,index) in AuthMenuList" :key="index">{{item.MenuName}}</span>
+        </div>
+        <div class="Item_Main">
+          <div class="role_ItemList" v-for="(subItem,subIndex) in SubMenuList">
+            <div class="role_SecondItem">
+              <span>{{subItem.MenuName}}</span>
+              <q-checkbox v-model="subItem.IsChecked" />
+            </div>
+            <div class="role_TreeList">
+              <q-tree v-if="subItem.SubList.length>0" :nodes="subItem.SubList" node-key="MenuId"
+                label-key="MenuName" children-key="SubList" tick-strategy="strict" :default-expand-all="true"
+                no-connectors :ticked.sync="chooseCategroyArray">
+              </q-tree>
+            </div>
+          </div>
+        </div>
+        <!-- <q-card>
           <template v-for="(item,index) in AuthMenuList">
-            <q-checkbox v-model="item.IsChecked" :false-value="item.IsChecked" :label="item.MenuName"
+            <q-checkbox v-model="item.IsChecked" :label="item.MenuName"
               @input="menuChange(item)" />
           </template>
           <div class="row wrap">
@@ -42,7 +193,7 @@
               </q-card>
             </template>
           </div>
-        </q-card>
+        </q-card> -->
       </q-card-section>
       <q-separator />
       <q-card-actions align="right" class="bg-white">
@@ -86,6 +237,8 @@
         AuthMenuList: [], //权限列表
         SubMenuList: [], //下级菜单权限
         group: [],
+        checkedIndex: 0, //默认选中
+        chooseCategroyArray:[],
       }
     },
     computed: {
@@ -98,8 +251,26 @@
     methods: {
       //菜单切换
       menuChange(item) {
+        console.log(item, 'item111');
         this.SubMenuList = [];
-        this.SubMenuList = item.SubList;
+        if (item.IsChecked) {
+          this.SubMenuList = item.SubList;
+        }
+        console.log(this.SubMenuList, 'submenuList');
+      },
+      //点击选中
+      getItem(item, index) {
+        if(this.checkedIndex != index){
+          this.checkedIndex = index;
+          this.SubMenuList = [];
+          this.SubMenuList = item.SubList;
+        }else{
+          this.checkedIndex=-1;
+          this.SubMenuList = [];
+        }
+        // this.checkedIndex = index;
+        // this.SubMenuList = [];
+        // this.SubMenuList = item.SubList;
       },
       //获取权限
       queryRolePermission() {
@@ -110,6 +281,9 @@
           console.log("res", res.Data)
           if (res.Code == 1) {
             this.AuthMenuList = res.Data;
+            if(this.AuthMenuList.length>0){
+              this.SubMenuList=this.AuthMenuList[0].SubList;
+            }
           }
         }).catch(() => {})
       },