diff --git a/frontend/src/views/Role/Role.vue b/frontend/src/views/Role/Role.vue
index 4eefb022e0990e078f75ed54188b26b76bd20435..a6dae06ac8f6f882fee1e5946b89e359b990381d 100644
--- a/frontend/src/views/Role/Role.vue
+++ b/frontend/src/views/Role/Role.vue
@@ -13,8 +13,10 @@
                 </el-table-column>
                 <el-table-column label="权限">
                     <template #default="scope">
-                        <el-button name="default_all" type="primary" size="small" @click="showRoleDetail">查看</el-button>
-                        <el-button name="role_modify" type="primary" size="small" @click="onEditRoleDetail">变更</el-button>
+                        <el-button name="default_all" type="primary" size="small"
+                            @click="showRoleDetail(scope.row)">查看</el-button>
+                        <el-button name="role_modify" type="primary" size="small"
+                            @click="onEditRoleDetail(scope.row)">变更</el-button>
                     </template>
                 </el-table-column>
                 <el-table-column label="操作" fixed="right">
@@ -40,7 +42,7 @@
         </el-dialog>
 
         <el-drawer :title="roleDetailTitle" v-model="showDetail" direction="rtl">
-            <RoleDetail :showEdit="showDetailEdit" />
+            <RoleDetail :showEdit="showDetailEdit" :role="editedRole" />
         </el-drawer>
     </div>
 </template>
@@ -84,12 +86,14 @@ const roleDetailTitle = ref("权限详情")
 const showDetail = ref(false)
 const showDetailEdit = ref(false)
 
-function showRoleDetail() {
+function showRoleDetail(role: any) {
     showDetailEdit.value = false
     showDetail.value = true
 }
 
-function onEditRoleDetail() {
+const editedRole = ref("")
+function onEditRoleDetail(role: any) {
+    editedRole.value = role.role
     showDetailEdit.value = true
     showDetail.value = true
 }
diff --git a/frontend/src/views/Role/components/RoleDetail.vue b/frontend/src/views/Role/components/RoleDetail.vue
index af58b7f69c9865fd79464807a3a75ba5d76ec536..d7083c164b7d986e0dab3ee699ebf1086588ce80 100644
--- a/frontend/src/views/Role/components/RoleDetail.vue
+++ b/frontend/src/views/Role/components/RoleDetail.vue
@@ -1,22 +1,32 @@
 <template>
     <div>
-        <el-tree ref="tree" :data="authData" :show-checkbox="showEdit" node-key="menuName" :check-strictly="strictly"
+        <el-tree ref="treeRef" :data="authData" :show-checkbox="showEdit" node-key="menuName" :check-strictly="strictly"
             :default-expanded-keys="[2, 3]" :default-checked-keys="checkedKeys">
         </el-tree>
 
         <div class="footer" v-if="showEdit">
             <el-button>取 消</el-button>
-            <el-button type="primary">确 定</el-button>
+            <el-button type="primary" @click="onChangePermission">确 定</el-button>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+
+import { RespCodeOK } from "@/request/request";
+import { changeRolePermission } from "@/request/role";
 
 import { authData } from "./authData";
 
+const treeRef = ref()
+
 const props = defineProps({
+    role: {
+        type: String,
+        default: "",
+    },
     showEdit: {
         type: Boolean,
         default: true,
@@ -31,6 +41,34 @@ const roleData = ref([])
 const checkedKeys = ref<string[]>([])
 const strictly = ref(true)
 
+function onChangePermission() {
+    let menus: string[] = []
+    let buttons: string[] = []
+    let checkedNodes = treeRef.value.getCheckedNodes();
+    checkedNodes.filter((item: any) => item.isMenu).forEach((item: any) => {
+        menus.push(item.menuName)
+    });
+    checkedNodes.filter((item: any) => item.btnId).forEach((item: any) => {
+        buttons.push(item.menuName)
+    });
+
+    changeRolePermission({
+        role: props.role,
+        buttonId: buttons,
+        menus: menus,
+    }).then((resp: any) => {
+        if (resp.code === RespCodeOK) {
+            // TODO:
+
+            ElMessage.success("change role permission success", resp.msg)
+        } else {
+            ElMessage.error("failed to change role permission:" + resp.msg)
+        }
+    }).catch((err: any) => {
+        ElMessage.error("failed to change role permission:" + err.msg)
+    })
+}
+
 </script>
 
 <style lang="scss" scoped>