ADD:权限配置树形菜单

src/pages/role/list.vue

@@ -17,10 +17,10 @@
                     </el-switch>
                 </template>
             </el-table-column>
-            <el-table-column label="操作" width="180" align="center">
+            <el-table-column label="操作" width="250" align="center">
                 <template #default="scope">
+                    <el-button type="primary" size="small" text @click="openSetRule(scope.row)">配置权限</el-button>
                     <el-button type="primary" size="small" text @click="handleEdit(scope.row)">修改</el-button>
-
                     <el-popconfirm title="是否删除此角色?" confirm-button-text="确认" cancel-button-text="取消"
                         @confirm="handleDelete(scope.row.id)">
                         <template #reference>
@@ -43,7 +43,7 @@
                 <el-form-item label="角色描述" prop="desc">
                     <el-input v-model="form.desc" placeholder="描述内容" type="textarea" :rows="5"></el-input>
                 </el-form-item>
-                <el-form-item label="角色状态" prop="status">
+                <el-form-item label="状态" prop="status">
                     <el-switch v-model="form.status" :active-value="1" :inactive-value="0" >
                     </el-switch>
                 </el-form-item>
@@ -52,11 +52,22 @@
 
         </FormDrawer>
 
+
+        <!-- 权限配置 -->
+        <FormDrawer ref="setRuleformDrawerRef" title="权限配置"  @submit="handleSetRuleSubmit">
+            <el-tree-v2 
+            :data="ruleList" 
+            :props="{value:'id', label: 'name', children: 'child'}"
+            show-checkbox 
+            :height="treeHeight" />
+        </FormDrawer>
+
     </el-card>
 </template>
 
 
 <script setup>
+import {ref} from "vue"
 import {
     getRoleList,
     createRole,
@@ -64,6 +75,11 @@ import {
     deleteRole,
     updateRoleStatus
 } from "@/api/role"
+
+import {
+    getRuleList,
+} from "@/api/rule"
+
 import FormDrawer from "@/components/FormDrawer.vue"
 import ListHeader from "@/components/ListHeader.vue"
 import { useInitTable, useInitForm } from "@/composables/useCommon.js"
@@ -120,6 +136,27 @@ const {
 
 
 
+const setRuleformDrawerRef = ref(null)
+const treeHeight = ref(0)
+const ruleList = ref([])
+const roleId = ref(0)
+
+const openSetRule =(row) =>{
+    roleId.value = row.id
+    treeHeight.value = window.innerHeight -170
+    getRuleList(1).then(res=>{
+        ruleList.value = res.list
+        setRuleformDrawerRef.value.open()
+
+    })
+
+    
+
+}
+const handleSetRuleSubmit =()=>{
+
+}
+