页面修改

quasar.conf.js

@@ -142,7 +142,8 @@ module.exports = function(ctx) {
                 'QTr',
                 'QTd',
                 'QCard',
-                'QCheckbox'
+                'QCheckbox',
+                'QTree',
             ],
             // directives: [],
 

src/components/system/role-form.vue

@@ -11,11 +11,16 @@
             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 class="col-6 q-pr-lg q-pb-lg q-pt-lg">
+          <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" />
             <div class="text-grey-6 text-caption">注意：关闭后，角色将无法正常使用.</div>
           </div>
+          <div class="q-pa-md q-gutter-sm">
+            <q-tree :nodes="TreeMenuList" node-key="MenuId" label-key="MenuName" children-key="SubList"
+              tick-strategy="leaf-filtered" default-expand-all :ticked.sync="checkMenuArray" no-connectors>
+            </q-tree>
+          </div>
         </div>
       </q-card-section>
       <q-separator />
@@ -53,8 +58,10 @@
         },
         optionTitle: "",
         //菜单列表
-        MenuList: [],
+        TreeMenuList: [],
         saveLoading: false,
+        //选中的节点
+        checkMenuArray: [],
       }
     },
     mounted() {
@@ -62,17 +69,15 @@
       this.initObj()
     },
     methods: {
+
       //获取菜单列表
       queryMenuList() {
-        this.MenuList = [];
-        var qMsg = {
-
-        }
+        this.TreeMenuList = [];
+        var qMsg = {}
         queryTreeMenu(qMsg).then(res => {
-          console.log("res", res);
+          this.TreeMenuList = res.Data;
         })
       },
-
       //初始化表单
       initObj() {
         if (this.saveObj && this.saveObj.RoleId > 0) {
@@ -84,6 +89,7 @@
             this.objOption.RoleIntro = res.Data.RoleIntro;
             this.objOption.RoleAuth = res.Data.RoleAuth;
             this.objOption.Status = res.Data.Status;
+            this.checkMenuArray=res.Data.CheckMenuList;
           })
           this.optionTitle = "修改角色信息"
         } else {
@@ -102,6 +108,16 @@
       },
       //保存菜单
       saveRole() {
+        var tempKeys = "";
+        if (this.checkMenuArray && this.checkMenuArray.length > 0) {
+          this.checkMenuArray.forEach(item => {
+            tempKeys += "," + item;
+          })
+        }
+        if (tempKeys && tempKeys != '') {
+          tempKeys = tempKeys.substring(1, tempKeys.length);
+        }
+        this.objOption.RoleAuth = tempKeys;
         this.saveLoading = true
         saveRoleInfo(this.objOption).then(res => {
           this.saveLoading = false