diff --git a/src/api/menu.ts b/src/api/menu.ts
index 6a950d92d5abc65a15c00483d1e76793c2367f84..2feffcd7fdbc2f71562f9f6c1676582bf82ad9f4 100644
--- a/src/api/menu.ts
+++ b/src/api/menu.ts
@@ -2,13 +2,25 @@ import { Menu } from '../types/menu'
 import request, { QuickResponseData } from '../utils/request'
 
 const Api = {
+  roleMenuLsit: '/api/menu/getRoleMenuLsit',
   permissionMenuList: '/api/menu/getPermission',
   list: '/api/menu/getList',
   add: '/api/menu/add',
   update: '/api/menu/update',
   delete: '/api/menu/delete',
+  assign: '/api/menu/assignPermission',
+}
+export const getRoleMenuLsit = (
+  roleId: string
+): Promise<QuickResponseData<Array<Menu>>> => {
+  return request<QuickResponseData<Array<Menu>>>({
+    url: Api.roleMenuLsit,
+    method: 'GET',
+    params: {
+      id: roleId,
+    },
+  })
 }
-
 export const getPermissionMenuList = (
   userId: string
 ): Promise<QuickResponseData<Array<Menu>>> => {
@@ -49,3 +61,11 @@ export const deleteMenu = (id: string) => {
     },
   })
 }
+
+export const assignPermission = (data: any) => {
+  return request({
+    url: Api.assign,
+    method: 'POST',
+    data,
+  })
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index b6e0223aa86263bc06bcab4413f10bb7bd11544e..7e785b9f8d7547d091df2fd435289ca4603905cb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -73,5 +73,16 @@ export const router = createRouter({
         },
       ],
     },
+    {
+      path: '/permission',
+      component: layout,
+      redirect: 'rolePermission',
+      children: [
+        {
+          path: 'rolePermission',
+          component: () => import('../views/rolePermission/index.vue'),
+        },
+      ],
+    },
   ],
 })
diff --git a/src/store/modules/menu.ts b/src/store/modules/menu.ts
index aef2163611f761588c9920b9705244b3e6bcf332..88b4f71444850a5a36ee09ede55985fa5d0a2476 100644
--- a/src/store/modules/menu.ts
+++ b/src/store/modules/menu.ts
@@ -1,13 +1,14 @@
 import { defineStore } from 'pinia'
 import { menuFormat } from '@/utils/index'
 import { QuickResponseData } from '@/utils/request'
-import { Menu, MenuBar } from '@/types/menu'
+import { Menu, MenuBar, MenuTree } from '@/types/menu'
 import { getPermissionMenuList } from '../../api/menu'
 
 interface MenuState {
   activeMenuId: string
   menuList: Array<MenuBar>
   permissionMenuList: Array<Menu>
+  permissionMenuTreeList: Array<MenuTree>
 }
 export const useMenuStore = defineStore('menuStore', {
   state: (): MenuState => {
@@ -15,6 +16,7 @@ export const useMenuStore = defineStore('menuStore', {
       activeMenuId: 'home',
       menuList: [],
       permissionMenuList: [],
+      permissionMenuTreeList: [],
     }
   },
   getters: {
@@ -24,6 +26,12 @@ export const useMenuStore = defineStore('menuStore', {
     getMenuList(): Array<MenuBar> {
       return this.menuList
     },
+    getPermissionMenuList(): Array<Menu> {
+      return this.permissionMenuList
+    },
+    getPermissionMenuTreeList(): Array<MenuTree> {
+      return this.permissionMenuTreeList
+    },
   },
   actions: {
     setActiveMenuId(activeMenuId: string) {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 40d135615bd606da02e8d1fcf1c8e71393396372..1677cbef97cd5e70dac221fb9a5aa014a407a2fc 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -71,6 +71,32 @@ export const tableTreeFormat = (data: any) => {
   return forderArr
 }
 
+export const menuTreeFormat = (data: any) => {
+  const forderArr = []
+  const menuArr = []
+  const btnArr = []
+  data.forEach((element) => {
+    if (element.menuType === 0) {
+      forderArr.push(element)
+    }
+    if (element.menuType === 1) {
+      menuArr.push(element)
+    }
+    if (element.menuType === 2) {
+      btnArr.push(element)
+    }
+  })
+  menuArr.forEach((element, index) => {
+    const children = btnArr.filter((x) => x.pid === element.id)
+    menuArr[index].children = children
+  })
+  forderArr.forEach((element, index) => {
+    const children = menuArr.filter((x) => x.pid === element.id)
+    forderArr[index].children = children
+  })
+  return forderArr
+}
+
 export const menuFormat = (data: any) => {
   const forderArr = []
   const menuArr = []
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index f876ed8198b732a7c80da713441907498afac8c4..27d252c626bf1228a441f999efb7cc9902d10344 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -110,14 +110,20 @@ const formItems = reactive<Array<FormItem>>([
     editReadonly: true,
     prop: 'sort',
   },
+  // {
+  //   label: '父级菜单',
+  //   labelWidth: '80px',
+  //   vModel: 'pid',
+  //   placeholder: '父级菜单',
+  //   prop: 'pid',
+  //   type: 'select',
+  //   options: [],
+  // },
   {
     label: '父级菜单',
     labelWidth: '80px',
     vModel: 'pid',
     placeholder: '父级菜单',
-    prop: 'pid',
-    type: 'select',
-    options: [],
   },
   {
     label: '外链',
diff --git a/src/views/rolePermission/index.vue b/src/views/rolePermission/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b5f513290cac7da2f5ad746e5e3d8b2ca8286f04
--- /dev/null
+++ b/src/views/rolePermission/index.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref, nextTick } from 'vue'
+import { ElTree, ElMessage, ElMessageBox } from 'element-plus'
+import { getRoleList } from '@/api/role'
+import { getRoleMenuLsit, getMenuList, assignPermission } from '@/api/menu'
+import { menuTreeFormat } from '../../utils'
+import { MenuTree } from '../../types/menu'
+import { Toolbar } from '@/types/table'
+import QuickToolbar from '@/components/QuickToolbar/index.vue'
+
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+const defaultProps = reactive({
+  id: 'roleId',
+  label: 'roleName',
+  children: 'children',
+})
+const menuProps = reactive({
+  id: 'menuId',
+  label: 'menuName',
+  children: 'children',
+})
+const roleTreeData = reactive<Array<MenuTree>>([])
+const treeLoad = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    roleTreeData.length = 0
+    roleTreeData.push(...roleList)
+  })
+}
+
+const menuTreeData = reactive<Array<MenuTree>>([])
+const menuLoad = () => {
+  getMenuList().then((res) => {
+    const { data: menuList } = res
+    const menuTree = menuTreeFormat(menuList)
+    menuTreeData.length = 0
+    menuTreeData.push(...menuTree)
+  })
+}
+
+const setCheckedKeys = (val: any) => {
+  nextTick(() => {
+    treeRef.value!.setCheckedKeys(val, false)
+  })
+}
+const roleId = ref('')
+const handleNodeClick = (data: any) => {
+  roleId.value = data.id
+  getRoleMenuLsit(roleId.value).then((res) => {
+    console.log(`menuLIst`, res)
+    const { data: menuList } = res
+    const value = menuList.map((x) => x.id)
+    setCheckedKeys(value)
+    // const menuTree = menuTreeFormat(menuList)
+    // menuTreeData.length = 0
+    // menuTreeData.push(...menuTree)
+  })
+}
+const handleGrant = (data: any, done: any) => {
+  if (!roleId.value) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择一个角色',
+    })
+    return
+  }
+  ElMessageBox.confirm(`你真的要给${roleId.value}角色分配权限吗？`, {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning',
+  })
+    .then(() => {
+      const menuIdArr = treeRef.value!.getCheckedKeys(false)
+      console.log(`menuIdArr`, menuIdArr)
+      const menuIds = menuIdArr.join(',')
+      assignPermission({
+        roleId: roleId.value,
+        menuIds,
+      }).then((res) => {
+        ElMessage({
+          type: 'success',
+          message: '分配权限成功',
+        })
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '您已取消分配权限',
+      })
+    })
+}
+const tableToolbar = reactive<Toolbar>({
+  btns: [
+    {
+      name: '分配权限',
+      position: 'left',
+      type: 'primary',
+      size: 'small',
+      click(data: any, done: any) {
+        handleGrant(data, done)
+      },
+    },
+  ],
+})
+
+onMounted(() => {
+  treeLoad()
+  menuLoad()
+})
+</script>
+
+<template>
+  <el-row>
+    <el-col :span="4">
+      <el-tree
+        :data="roleTreeData"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
+      />
+    </el-col>
+    <el-col :span="20">
+      <quick-toolbar
+        :table-toolbar="tableToolbar"
+        :hidden-add-button="true"
+        :hidden-batch-delete-button="true"
+        :hidden-import-button="true"
+        :hidden-export-button="true"
+        :hidden-print-button="true"
+        :hidden-refresh-button="true"
+      ></quick-toolbar>
+      <!-- :default-checked-keys="" -->
+      <el-tree
+        ref="treeRef"
+        :data="menuTreeData"
+        :props="menuProps"
+        show-checkbox
+        node-key="id"
+        highlight-current
+      />
+    </el-col>
+  </el-row>
+</template>