菜单权限

src/views/system/organization.vue

@@ -43,10 +43,13 @@
             </el-form>
         </HcDialog>
 
-        <HcDialog bgColor="#ffffff" isToBody isTable :show="authModal" title="权限配置" @save="authModalSave" @close="authModalClose" widths="60rem">
+        <HcDialog bgColor="#ffffff" isToBody isTable :show="authModal" title="权限配置" @save="authModalSave" @close="authModalClose" widths="40rem">
             <el-scrollbar>
-                <HcDataTree :h-props="treeProps" :datas="treeMenuNode" showCheckbox>
-                    <template #default="{node}">{{ node.label }}</template>
+                <HcDataTree treeKey="id" :h-props="treeProps" :datas="treeMenuNode" :defaultCheckedKeys="treeMenuKeys" showCheckbox @check="treeMenuNodeCheck">
+                    <template #default="{node, data}">
+                        <span class="hc-tree-menu-label">{{node.label}}</span>
+                        <span class="hc-tree-menu-remark">{{data.remark}}</span>
+                    </template>
                 </HcDataTree>
             </el-scrollbar>
         </HcDialog>
@@ -209,6 +212,15 @@ const getMenuData = async () => {
     }
 }
 
+//默认勾选的节点
+const treeMenuKeys = ref([])
+
+//树节点被选择
+const treeMenuNodeCheck = (data, {checkedKeys, halfCheckedKeys}) => {
+    console.log(checkedKeys) //全选
+    console.log(halfCheckedKeys) //半选
+}
+
 //权限配置弹窗保存
 const authModalSave = () => {
 
@@ -222,4 +234,11 @@ const authModalClose = () => {
 
 <style lang="scss" scoped>
 @import "~src/styles/system/organization.scss";
+.hc-tree-menu-label {
+    font-size: 16px;
+}
+.hc-tree-menu-remark {
+    color: #858585;
+    margin-left: 10px;
+}
 </style>