From 1c84f4cedd6137bfa0141ec9ac89a20f14c56946 Mon Sep 17 00:00:00 2001
From: zhanglp <zlp_15229380174@163.com>
Date: Sat, 23 Jul 2022 16:21:14 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=A7=92=E8=89=B2=E5=92=8C=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/QuickForm/index.vue    |   3 +
 src/components/QuickToolbar/index.vue |   6 +-
 src/types/table.ts                    |   2 +-
 src/views/menu/index.vue              | 115 +++++++++++++++++++++++---
 tsconfig.json                         |   6 +-
 5 files changed, 115 insertions(+), 17 deletions(-)

diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index 45e41f7..29f9373 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -171,6 +171,9 @@ defineExpose({ handleSubmit })
             "
           />
         </template>
+        <template v-else-if="item.type === 'switch'">
+          <el-switch v-model="model[item.vModel]" />
+        </template>
         <template v-else>
           <el-input
             v-model="model[item.vModel]"
diff --git a/src/components/QuickToolbar/index.vue b/src/components/QuickToolbar/index.vue
index b924ee4..4df432e 100644
--- a/src/components/QuickToolbar/index.vue
+++ b/src/components/QuickToolbar/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineProps, defineEmits, toRefs, Ref } from 'vue'
-import { ToolBar } from '../../types/table'
+import { Toolbar } from '../../types/table'
 
 /**
  * props
@@ -89,12 +89,12 @@ const {
   hiddenExportButton: Ref<boolean>
   hiddenPrintButton: Ref<boolean>
   hiddenRefreshButton: Ref<boolean>
-  tableToolbar: Ref<boolean | ToolBar>
+  tableToolbar: Ref<boolean | Toolbar>
 }
 /**
  * 类型转换
  */
-const toolbar = tableToolbar.value as ToolBar
+const toolbar = tableToolbar.value as Toolbar
 /**
  * emits
  */
diff --git a/src/types/table.ts b/src/types/table.ts
index 83b3710..205587d 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -27,6 +27,6 @@ export interface Actionbar {
   hiddenDetailButton: boolean
   btns: Array<Btns>
 }
-export interface ToolBar {
+export interface Toolbar {
   btns: Array<Btns>
 }
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index 4eeaefd..f876ed8 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -19,39 +19,130 @@ const dialogTitle = reactive({
 })
 const formModel = reactive<Menu>({
   id: '',
-  dicTypeId: '',
-  name: '',
+  menuId: '',
+  menuName: '',
+  path: '',
+  menuType: '',
+  icon: '',
+  sort: 0,
+  pid: '',
+  link: 0,
+  enabled: 0,
+  status: 0,
 })
 const formItems = reactive<Array<FormItem>>([
   {
-    label: '分类编号',
+    label: '菜单编号',
     labelWidth: '80px',
-    vModel: 'dicTypeId',
-    placeholder: '分类编号',
+    vModel: 'menuId',
+    placeholder: '菜单编号',
     editReadonly: true,
-    prop: 'dicTypeId',
+    prop: 'menuId',
+    rules: [
+      {
+        required: true,
+        message: '菜单编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '菜单名称',
+    labelWidth: '80px',
+    vModel: 'menuName',
+    placeholder: '菜单名称',
+    prop: 'menuName',
     rules: [
       {
         required: true,
-        message: '分类编号不能为空',
+        message: '菜单名称不能为空',
         trigger: 'blur',
       },
     ],
   },
   {
-    label: '分类名称',
+    label: '路由',
     labelWidth: '80px',
-    vModel: 'name',
-    placeholder: '分类名称',
-    prop: 'name',
+    vModel: 'path',
+    placeholder: '路由',
+  },
+  {
+    label: '菜单类型',
+    labelWidth: '80px',
+    vModel: 'menuType',
+    placeholder: '菜单类型',
+    prop: 'menuType',
+    type: 'select',
+    options: [
+      {
+        label: '目录',
+        value: '0',
+      },
+      {
+        label: '菜单',
+        value: '1',
+      },
+      {
+        label: '按钮',
+        value: '2',
+      },
+    ],
     rules: [
       {
         required: true,
-        message: '分类名称不能为空',
+        message: '菜单类型不能为空',
         trigger: 'blur',
       },
     ],
   },
+  {
+    label: '菜单图标',
+    labelWidth: '80px',
+    vModel: 'icon',
+    placeholder: '菜单图标',
+    prop: 'icon',
+  },
+  {
+    label: '排序',
+    labelWidth: '80px',
+    vModel: 'sort',
+    placeholder: '排序',
+    editReadonly: true,
+    prop: 'sort',
+  },
+  {
+    label: '父级菜单',
+    labelWidth: '80px',
+    vModel: 'pid',
+    placeholder: '父级菜单',
+    prop: 'pid',
+    type: 'select',
+    options: [],
+  },
+  {
+    label: '外链',
+    labelWidth: '80px',
+    vModel: 'link',
+    placeholder: '外链',
+    prop: 'link',
+    type: 'switch',
+  },
+  {
+    label: '是否启用',
+    labelWidth: '80px',
+    vModel: 'enabled',
+    placeholder: '是否启用',
+    prop: 'enabled',
+    type: 'switch',
+  },
+  {
+    label: '是否显示',
+    labelWidth: '80px',
+    vModel: 'status',
+    placeholder: '是否显示',
+    prop: 'status',
+    type: 'switch',
+  },
 ])
 const handleFormSubmit = (form: Menu, done: any) => {
   console.log('handleFormSubmit', form)
diff --git a/tsconfig.json b/tsconfig.json
index e086b5f..01461d5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,11 @@
     "lib": ["esnext", "dom"],
     "skipLibCheck": true,
     "types": ["element-plus/global"],
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]
-- 
Gitee


From 5fea2bf1e6989be28eb2c14857596910a913f166 Mon Sep 17 00:00:00 2001
From: 91zhangliying <1663782157@qq.com>
Date: Sat, 23 Jul 2022 22:50:28 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=A7=92=E8=89=B2=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/menu.ts                    |  22 ++++-
 src/router/index.ts                |  11 +++
 src/store/modules/menu.ts          |  10 +-
 src/utils/index.ts                 |  26 ++++++
 src/views/menu/index.vue           |  12 ++-
 src/views/rolePermission/index.vue | 144 +++++++++++++++++++++++++++++
 6 files changed, 220 insertions(+), 5 deletions(-)
 create mode 100644 src/views/rolePermission/index.vue

diff --git a/src/api/menu.ts b/src/api/menu.ts
index 6a950d9..2feffcd 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 b6e0223..7e785b9 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 aef2163..88b4f71 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 40d1356..1677cbe 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 f876ed8..27d252c 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 0000000..b5f5132
--- /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>
-- 
Gitee


From 12e777866982ed73e1f3cbab0a24f2eea1462066 Mon Sep 17 00:00:00 2001
From: zhanglp <zlp_15229380174@163.com>
Date: Sun, 24 Jul 2022 12:30:35 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E5=92=8C=E8=A7=92=E8=89=B2=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/menu.ts                              |  33 ---
 src/api/role.ts                              |  31 +++
 src/api/user.ts                              |   9 +-
 src/components/QuickCrud/index.vue           | 217 ++++++++++---------
 src/layout/components/AiniMenu/index.vue     |  43 ++--
 src/layout/components/AiniMenuItem/index.vue |  35 +--
 src/layout/components/AiniSidebar/index.vue  |  15 +-
 src/layout/index.vue                         |  73 +++----
 src/pages/login/index.vue                    |  14 +-
 src/store/modules/menu.ts                    |  25 +--
 src/store/modules/tab.ts                     |   1 -
 src/store/modules/user.ts                    |  32 ++-
 src/types/menu.ts                            |   4 +-
 src/types/tab.ts                             |   6 +-
 src/types/table.ts                           |  14 +-
 src/views/role/index.vue                     |   2 +-
 src/views/rolePermission/index.vue           | 165 ++++++++------
 src/views/user/index.vue                     |   6 +-
 18 files changed, 368 insertions(+), 357 deletions(-)

diff --git a/src/api/menu.ts b/src/api/menu.ts
index 2feffcd..c612318 100644
--- a/src/api/menu.ts
+++ b/src/api/menu.ts
@@ -2,35 +2,10 @@ 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>>> => {
-  return request<QuickResponseData<Array<Menu>>>({
-    url: Api.permissionMenuList,
-    method: 'GET',
-    params: {
-      id: userId,
-    },
-  })
 }
 export const getMenuList = (): Promise<QuickResponseData<Array<Menu>>> => {
   return request<QuickResponseData<Array<Menu>>>({
@@ -61,11 +36,3 @@ export const deleteMenu = (id: string) => {
     },
   })
 }
-
-export const assignPermission = (data: any) => {
-  return request({
-    url: Api.assign,
-    method: 'POST',
-    data,
-  })
-}
diff --git a/src/api/role.ts b/src/api/role.ts
index 64b7e7a..0c70ab8 100644
--- a/src/api/role.ts
+++ b/src/api/role.ts
@@ -1,12 +1,29 @@
+import { Menu } from '@/types/menu'
 import { Role } from '../types/role'
 import request, { QuickResponseData } from '../utils/request'
 
 const Api = {
+  menuList: '/api/role/getMenuPermission',
+  userList: '/api/role/getUserPermission',
   list: '/api/role/getList',
   add: '/api/role/add',
   update: '/api/role/update',
   delete: '/api/role/delete',
+  assignPermission: '/api/role/assignPermission',
+  assignUser: '/api/role/assignUser',
 }
+export const getMenuPermission = (
+  roleId: string
+): Promise<QuickResponseData<Array<Menu>>> => {
+  return request<QuickResponseData<Array<Menu>>>({
+    url: Api.menuList,
+    method: 'GET',
+    params: {
+      id: roleId,
+    },
+  })
+}
+
 export const getRoleList = (): Promise<QuickResponseData<Array<Role>>> => {
   return request<QuickResponseData<Array<Role>>>({
     url: Api.list,
@@ -37,3 +54,17 @@ export const deleteRole = (id: string) => {
     },
   })
 }
+export const assignPermission = (data: any) => {
+  return request({
+    url: Api.assignPermission,
+    method: 'POST',
+    data,
+  })
+}
+export const assignUser = (data: any) => {
+  return request({
+    url: Api.assignUser,
+    method: 'POST',
+    data,
+  })
+}
diff --git a/src/api/user.ts b/src/api/user.ts
index 96692d9..9b6fab3 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,3 +1,4 @@
+import { Menu } from '@/types/menu'
 import { ChangePassword, User } from '../types/user'
 import request, { QuickResponseData } from '../utils/request'
 
@@ -15,12 +16,14 @@ const Api = {
   enabled: '/api/user/enabled',
   disable: '/api/user/disable',
 }
-export const getPermission = (userId: string) => {
+export const getPermission = (
+  userId: string
+): Promise<QuickResponseData<Array<Menu>>> => {
   return request({
     url: Api.permission,
     method: 'GET',
-    data: {
-      userId,
+    params: {
+      id: userId,
     },
   })
 }
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 6dc6f2a..92cd07a 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -411,107 +411,120 @@ onActivated(() => {
 })
 </script>
 <template>
-  <el-row :gutter="40">
-    <el-col :span="leftTree ? treeSpan : 0">
-      <el-tree
-        v-if="leftTree"
-        ref="treeRef"
-        :data="treeData"
-        :props="defaultTreeProps"
-        node-key="id"
-        :highlight-current="true"
-        @node-click="handleTreeNodeClick"
-      >
-      </el-tree>
-    </el-col>
-    <el-col :span="leftTree ? 24 - treeSpan : 24">
-      <quick-search
-        v-if="searchFormModel"
-        :model="searchFormModel"
-        :items="searchFormItems"
-        @on-search="handleSearchSubmit"
-        @on-clear="handleSearchClear"
-      >
-      </quick-search>
-      <quick-toolbar
-        :table-toolbar="tableToolbar"
-        :add-button-name="toolbar?.addButtonName"
-        :batch-delete-button-name="toolbar?.batchDeleteButtonName"
-        :import-button-name="toolbar?.importButtonName"
-        :export-button-name="toolbar?.exportButtonName"
-        :print-button-name="toolbar?.printButtonName"
-        :refresh-button-name="toolbar?.refreshButtonName"
-        :hidden-add-button="toolbar?.hiddenAddButton"
-        :hidden-batch-delete-button="toolbar?.hiddenBatchDeleteButton"
-        :hidden-import-button="toolbar?.hiddenImportButton"
-        :hidden-export-button="toolbar?.hiddenExportButton"
-        :hidden-print-button="toolbar?.hiddenPrintButton"
-        :hidden-refres-hbutton="toolbar?.hiddenRefreshButton"
-        @on-add="handleAdd"
-        @on-batch-delete="handleBatchDelete"
-        @on-import="handleImport"
-        @on-export="handleExport"
-        @on-print="handlePrint"
-        @on-refresh="handleRefresh"
-        @on-custom-toolbar-click="handleCustomToolbarClick"
-      ></quick-toolbar>
-      <quick-table
-        :data="tableData"
-        :columns="tableColumns"
-        :table-actionbar="tableActionbar"
-        :edit-button-name="actionbar?.editButtonName"
-        :delete-button-name="actionbar?.deleteButtonName"
-        :detail-button-name="actionbar?.detailButtonName"
-        :hidden-edit-button="actionbar?.hiddenEditButton"
-        :hidden-delete-button="actionbar?.hiddenDeleteButton"
-        :hidden-detail-button="actionbar?.hiddenDetailButton"
-        @on-row-edit="handleEdit"
-        @on-row-delete="handleDelete"
-        @on-row-detail="handleDetail"
-        @on-selection-change="handleSelectionChange"
-        @on-done="handleDone"
-      >
-      </quick-table>
-      <el-pagination
-        v-if="page"
-        v-model:currentPage="page.current"
-        v-model:page-size="page.size"
-        :page-sizes="page.sizes"
-        :small="false"
-        :disabled="false"
-        :background="false"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="page.total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-      <el-dialog
-        v-model="dialogFormVisible"
-        :title="title"
-        width="35%"
-        @close="handleCancel()"
-      >
-        <quick-form
-          ref="quickFormRef"
-          :model="formModel"
-          :form-items="formItems"
-          :form-type="dialogFormType"
-          :hidden-action="true"
-          @submit="handleSubmit"
+  <div class="quick-crud">
+    <el-row :gutter="40">
+      <el-col :span="leftTree ? treeSpan : 0">
+        <el-card shadow="never">
+          <el-tree
+            v-if="leftTree"
+            ref="treeRef"
+            :data="treeData"
+            :props="defaultTreeProps"
+            node-key="id"
+            :highlight-current="true"
+            @node-click="handleTreeNodeClick"
+          >
+          </el-tree>
+        </el-card>
+      </el-col>
+      <el-col :span="leftTree ? 24 - treeSpan : 24">
+        <quick-search
+          v-if="searchFormModel"
+          :model="searchFormModel"
+          :items="searchFormItems"
+          @on-search="handleSearchSubmit"
+          @on-clear="handleSearchClear"
         >
-        </quick-form>
-        <template #footer>
-          <span class="dialog-footer">
-            <template v-if="dialogFormType === 'detail'">
-              <el-button type="primary" @click="handleCancel()">关闭</el-button>
-            </template>
-            <template v-else>
-              <el-button @click="handleCancel()">取消</el-button>
-              <el-button type="primary" @click="handleOk()">确定</el-button>
-            </template>
-          </span>
-        </template>
-      </el-dialog>
-    </el-col>
-  </el-row>
+        </quick-search>
+        <quick-toolbar
+          :table-toolbar="tableToolbar"
+          :add-button-name="toolbar?.addButtonName"
+          :batch-delete-button-name="toolbar?.batchDeleteButtonName"
+          :import-button-name="toolbar?.importButtonName"
+          :export-button-name="toolbar?.exportButtonName"
+          :print-button-name="toolbar?.printButtonName"
+          :refresh-button-name="toolbar?.refreshButtonName"
+          :hidden-add-button="toolbar?.hiddenAddButton"
+          :hidden-batch-delete-button="toolbar?.hiddenBatchDeleteButton"
+          :hidden-import-button="toolbar?.hiddenImportButton"
+          :hidden-export-button="toolbar?.hiddenExportButton"
+          :hidden-print-button="toolbar?.hiddenPrintButton"
+          :hidden-refres-hbutton="toolbar?.hiddenRefreshButton"
+          @on-add="handleAdd"
+          @on-batch-delete="handleBatchDelete"
+          @on-import="handleImport"
+          @on-export="handleExport"
+          @on-print="handlePrint"
+          @on-refresh="handleRefresh"
+          @on-custom-toolbar-click="handleCustomToolbarClick"
+        ></quick-toolbar>
+        <quick-table
+          :data="tableData"
+          :columns="tableColumns"
+          :table-actionbar="tableActionbar"
+          :edit-button-name="actionbar?.editButtonName"
+          :delete-button-name="actionbar?.deleteButtonName"
+          :detail-button-name="actionbar?.detailButtonName"
+          :hidden-edit-button="actionbar?.hiddenEditButton"
+          :hidden-delete-button="actionbar?.hiddenDeleteButton"
+          :hidden-detail-button="actionbar?.hiddenDetailButton"
+          @on-row-edit="handleEdit"
+          @on-row-delete="handleDelete"
+          @on-row-detail="handleDetail"
+          @on-selection-change="handleSelectionChange"
+          @on-done="handleDone"
+        >
+        </quick-table>
+        <el-pagination
+          v-if="page"
+          v-model:currentPage="page.current"
+          v-model:page-size="page.size"
+          :page-sizes="page.sizes"
+          :small="false"
+          :disabled="false"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+        <el-dialog
+          v-model="dialogFormVisible"
+          :title="title"
+          width="35%"
+          @close="handleCancel()"
+        >
+          <quick-form
+            ref="quickFormRef"
+            :model="formModel"
+            :form-items="formItems"
+            :form-type="dialogFormType"
+            :hidden-action="true"
+            @submit="handleSubmit"
+          >
+          </quick-form>
+          <template #footer>
+            <span class="dialog-footer">
+              <template v-if="dialogFormType === 'detail'">
+                <el-button type="primary" @click="handleCancel()"
+                  >关闭</el-button
+                >
+              </template>
+              <template v-else>
+                <el-button @click="handleCancel()">取消</el-button>
+                <el-button type="primary" @click="handleOk()">确定</el-button>
+              </template>
+            </span>
+          </template>
+        </el-dialog>
+      </el-col>
+    </el-row>
+  </div>
 </template>
+<style lang="scss" scoped>
+.quick-crud {
+  .el-card {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/layout/components/AiniMenu/index.vue b/src/layout/components/AiniMenu/index.vue
index e6fb2c4..4dafee5 100644
--- a/src/layout/components/AiniMenu/index.vue
+++ b/src/layout/components/AiniMenu/index.vue
@@ -1,56 +1,57 @@
 <script lang="ts" setup>
-import {
-  HomeFilled,
-  // Document,
-  Menu as IconMenu,
-  // Location,
-  Setting,
-} from '@element-plus/icons-vue'
-import { computed, reactive, watch, ref } from 'vue'
-import { router } from '@/router'
+import { HomeFilled, Setting } from '@element-plus/icons-vue'
+import { computed, watch, ref } from 'vue'
 import { useAppStore } from '@/store/modules/app'
+import { useUserStore } from '@/store/modules/user'
 import { useMenuStore } from '@/store/modules/menu'
 import { useTabStore } from '@/store/modules/tab'
-import { MenuBar } from '@/types/menu'
-
-import AiniMenuItem from '../AiniMenuItem/index.vue'
-import { Tab } from '../../../types/tab'
+import { Menubar } from '@/types/menu'
+import { Tab } from '@/types/tab'
+import AiniMenuItem from '@/layout/components/AiniMenuItem/index.vue'
 
 const appStore = useAppStore()
+const userStore = useUserStore()
 const menuStore = useMenuStore()
 const tabStore = useTabStore()
-const defaultActive = ref('home')
-const menuNewList = reactive<Array<MenuBar>>([])
+
 const isCollapse = computed(() => appStore.getCollapse)
+
+const defaultActive = ref('home')
 const activeMenuId = computed(() => menuStore.getAciveMenuId)
-const menuList = computed(() => menuStore.getMenuList)
+const menuList = computed(() => userStore.getMenuList)
 const handleOpen = (key: string, keyPath: string[]) => {
   console.log(key, keyPath)
 }
 const handleClose = (key: string, keyPath: string[]) => {
   console.log(key, keyPath)
 }
-
-const menuClick = (menu: MenuBar) => {
+const menuClick = (menu: Menubar) => {
   const { id, menuName, path } = menu
   const tab: Tab = {
     id,
     name: menuName,
     path,
   }
-  // menuStore.setActiveMenu(menu)
   tabStore.setActiveTab(tab)
 }
 const homeMenuClick = () => {
-  const menu: MenuBar = {
+  const menu: Menubar = {
     id: 'home',
+    menuId: 'home',
     menuName: '首页',
+    menuType: '0',
+    icon: '',
+    sort: 0,
+    pid: '0',
+    link: 0,
+    enabled: 0,
+    status: 0,
     path: '/home',
+    children: [],
   }
   menuClick(menu)
 }
 watch(activeMenuId, (val: string) => {
-  debugger
   defaultActive.value = val
 })
 </script>
diff --git a/src/layout/components/AiniMenuItem/index.vue b/src/layout/components/AiniMenuItem/index.vue
index 61e3845..97673da 100644
--- a/src/layout/components/AiniMenuItem/index.vue
+++ b/src/layout/components/AiniMenuItem/index.vue
@@ -1,19 +1,13 @@
 <script lang="ts" setup>
-import {
-  HomeFilled,
-  // Document,
-  Menu as IconMenu,
-  // Location,
-  Setting,
-} from '@element-plus/icons-vue'
-import { Ref, computed, defineProps, toRefs } from 'vue'
-import { router } from '@/router'
-import { useAppStore } from '@/store/modules/app'
-import { useMenuStore } from '@/store/modules/menu'
+import { Ref, defineProps, toRefs } from 'vue'
 import { useTabStore } from '@/store/modules/tab'
 import { Menubar } from '@/types/menu'
 import { Tab } from '@/types/tab'
 
+const tabStore = useTabStore()
+/**
+ * props
+ */
 const props = defineProps({
   menu: {
     type: Object,
@@ -28,24 +22,14 @@ const props = defineProps({
     },
   },
 })
-
+/**
+ * props toRefs
+ */
 const { menu, parent } = toRefs(props) as {
   menu: Ref<Menubar>
   parent: Ref<Menubar>
 }
-
-const appStore = useAppStore()
-const menuStore = useMenuStore()
-const tabStore = useTabStore()
-const isCollapse = computed(() => appStore.getCollapse)
-const tabList = computed(() => tabStore.getMenuList)
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const menuClick = (item: any) => {
+const menuClick = () => {
   const { id, menuName, path } = menu.value
   const routerPath = `${parent.value.path}/${path}`
   const tab: Tab = {
@@ -54,7 +38,6 @@ const menuClick = (item: any) => {
     path: routerPath,
   }
   tabStore.addTab(tab)
-  // menuStore.setActiveMenu(menu.value)
 }
 </script>
 <template>
diff --git a/src/layout/components/AiniSidebar/index.vue b/src/layout/components/AiniSidebar/index.vue
index 1352b13..6e1d9ca 100644
--- a/src/layout/components/AiniSidebar/index.vue
+++ b/src/layout/components/AiniSidebar/index.vue
@@ -1,23 +1,10 @@
 <script lang="ts" setup>
-import {
-  HomeFilled,
-  // Document,
-  Menu as IconMenu,
-  // Location,
-  Setting,
-} from '@element-plus/icons-vue'
 import { computed } from 'vue'
 import { useAppStore } from '../../../store/modules/app'
-import AiniMenu from '../AiniMenu/index.vue'
+import AiniMenu from '@/layout/components/AiniMenu/index.vue'
 
 const appStore = useAppStore()
 const isCollapse = computed(() => appStore.getCollapse)
-const handleOpen = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
-const handleClose = (key: string, keyPath: string[]) => {
-  console.log(key, keyPath)
-}
 </script>
 
 <template>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2c6d48d..29c3a6c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,41 +1,35 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import { computed, watch, ref } from 'vue'
-// import AiniBottom from './components/AiniBottom/index.vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
-import AiniTop from './components/AiniTop/index.vue'
-import AiniSidebar from './components/AiniSidebar/index.vue'
 import { useAppStore } from '../store/modules/app'
 import { useMenuStore } from '../store/modules/menu'
 import { useTabStore } from '../store/modules/tab'
-import { Tab } from '../types/tab'
+import { Tab } from '@/types/tab'
+import AiniTop from './components/AiniTop/index.vue'
+import AiniSidebar from './components/AiniSidebar/index.vue'
 
 const route = useRoute()
 const router = useRouter()
 const appStore = useAppStore()
 const menuStore = useMenuStore()
-const tabStore = useTabStore()
-const isCollapse = computed(() => appStore.getCollapse)
-const activeTab = computed(() => tabStore.getActiveTab)
-const menuList = computed(() => menuStore.getMenuList)
-const tabList = computed(() => tabStore.getTabList)
 
+/**
+ * 国际化
+ */
 const { t } = useI18n()
 console.log('i18n', t('title'))
-const editableTabsValue = ref('home')
-router.push('/home')
-const editableTabs = ref([])
-watch(activeTab, (val) => {
-  if (val) {
-    const { id, path } = val
-    editableTabsValue.value = id
-    router.push(path)
-  }
-})
-watch(tabList, (val) => {
-  editableTabs.value = val
-})
 
+const isCollapse = computed(() => appStore.getCollapse)
+router.push('/home')
+/**
+ * 选项卡
+ */
+const tabStore = useTabStore()
+const editableTabsValue = ref('home')
+const editableTabs = ref<Array<Tab>>([])
+const activeTab = computed(() => tabStore.getActiveTab)
+const tabList = computed(() => tabStore.getTabList)
 const handleTabsEdit = (targetName: string, action: 'remove' | 'add'): void => {
   if (action === 'remove') {
     tabStore.deleteTab(targetName)
@@ -48,6 +42,20 @@ const handleClick = (activeName: string) => {
     menuStore.setActiveMenuId(activeName)
   }
 }
+watch(activeTab, (val) => {
+  if (val) {
+    const { id, path } = val
+    if (id) {
+      editableTabsValue.value = id
+    }
+    if (path) {
+      router.push(path)
+    }
+  }
+})
+watch(tabList, (val) => {
+  editableTabs.value = val
+})
 </script>
 
 <template>
@@ -62,7 +70,7 @@ const handleClick = (activeName: string) => {
             <aini-top></aini-top>
           </el-card>
         </el-header>
-        <el-main>
+        <el-main class="content">
           <el-card shadow="always" :body-style="{ padding: 10 }">
             <el-tabs
               v-model="editableTabsValue"
@@ -78,7 +86,6 @@ const handleClick = (activeName: string) => {
                 :label="item.name"
                 :name="item.id"
               >
-                <!-- <router-view></router-view> -->
                 <router-view :key="route.fullPath" />
               </el-tab-pane>
             </el-tabs>
@@ -90,24 +97,16 @@ const handleClick = (activeName: string) => {
       </el-container>
     </el-container>
   </div>
-
-  <!-- <div class="aini-layout">
-    <aini-sidebar></aini-sidebar>
-    <aini-top></aini-top>
-    <div class="aini-layout-content">
-      <el-main>
-        <router-view></router-view>
-      </el-main>
-    </div>
-    <aini-bottom></aini-bottom>
-  </div> -->
 </template>
 
 <style lang="scss" scoped>
 .aini-layout {
   background: #f0f2f5;
   height: 100%;
-  .aini-layout-content {
+  .content {
+    .el-card {
+      height: 100%;
+    }
   }
 }
 </style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index d64949f..8fb8e03 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,19 +1,17 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import { router } from '../../router'
-import { FormItem } from '../../types/form'
+import { router } from '@/router'
+import { FormItem } from '@/types/form'
 import { LoginParams } from '@/types/login'
-import { useLoginStore } from '../../store/modules/login'
-import { useUserStore } from '../../store/modules/user'
-import { useMenuStore } from '../../store/modules/menu'
+import { useLoginStore } from '@/store/modules/login'
+import { useUserStore } from '@/store/modules/user'
 
-import QuickForm from '../../components/QuickForm/index.vue'
+import QuickForm from '@/components/QuickForm/index.vue'
 /**
  * 属性
  */
 const loginStore = useLoginStore()
 const userStore = useUserStore()
-const menuStore = useMenuStore()
 const form = reactive<LoginParams>({
   tenant: '',
   userName: '',
@@ -51,7 +49,7 @@ const handleLogin = async (): Promise<void> => {
   const user = await userStore.getUserInfo(userName)
   if (user) {
     const { id } = user
-    await menuStore.getMenuListByUserId(id.toString())
+    userStore.getPermission(id.toString())
     router.push('/')
   }
 }
diff --git a/src/store/modules/menu.ts b/src/store/modules/menu.ts
index 88b4f71..939ff2b 100644
--- a/src/store/modules/menu.ts
+++ b/src/store/modules/menu.ts
@@ -1,21 +1,17 @@
 import { defineStore } from 'pinia'
 import { menuFormat } from '@/utils/index'
 import { QuickResponseData } from '@/utils/request'
-import { Menu, MenuBar, MenuTree } 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 => {
     return {
       activeMenuId: 'home',
-      menuList: [],
-      permissionMenuList: [],
       permissionMenuTreeList: [],
     }
   },
@@ -23,12 +19,6 @@ export const useMenuStore = defineStore('menuStore', {
     getAciveMenuId(): string {
       return this.activeMenuId
     },
-    getMenuList(): Array<MenuBar> {
-      return this.menuList
-    },
-    getPermissionMenuList(): Array<Menu> {
-      return this.permissionMenuList
-    },
     getPermissionMenuTreeList(): Array<MenuTree> {
       return this.permissionMenuTreeList
     },
@@ -37,19 +27,6 @@ export const useMenuStore = defineStore('menuStore', {
     setActiveMenuId(activeMenuId: string) {
       this.activeMenuId = activeMenuId
     },
-    getMenuListByUserId(
-      userId: string
-    ): Promise<QuickResponseData<Array<Menu>>> {
-      return new Promise((resolve) => {
-        getPermissionMenuList(userId).then((res) => {
-          const { data: permissionMenuList } = res
-          this.permissionMenuList = permissionMenuList
-          const menuList = menuFormat(permissionMenuList)
-          this.menuList = menuList
-          resolve(res)
-        })
-      })
-    },
   },
   persist: {
     enabled: true,
diff --git a/src/store/modules/tab.ts b/src/store/modules/tab.ts
index d86a7f3..56c1aa3 100644
--- a/src/store/modules/tab.ts
+++ b/src/store/modules/tab.ts
@@ -43,7 +43,6 @@ export const useTabStore = defineStore('tabStore', {
     },
     deleteTab(id: string) {
       if (id !== 'home') {
-        debugger
         const index = this.tabList.findIndex((x) => x.id === id)
         const activeTab = this.tabList[index + 1] || this.tabList[index - 1]
         this.setActiveTab(activeTab)
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 8b0d5ed..70bd681 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,17 +1,20 @@
 import { defineStore } from 'pinia'
-import { getUserInfo, getUserPageList } from '@/api/user'
+import { menuFormat } from '@/utils/index'
 import { User } from '@/types/user'
 import { QuickResponseData } from '@/utils/request'
+import { Menu, Menubar } from '@/types/menu'
+import { getUserInfo, getUserPageList, getPermission } from '@/api/user'
 
 interface UserState {
-  userList: Array<User>
   user: User
+  permissionMenuList: Array<Menu>
+  menuList: Array<Menubar>
 }
 export const useUserStore = defineStore('userStore', {
   state: (): UserState => {
     return {
-      userList: [],
       user: {
+        id: '',
         userId: '',
         userName: '',
         fullName: '',
@@ -21,10 +24,31 @@ export const useUserStore = defineStore('userStore', {
         address: '',
         createTime: '',
       },
+      permissionMenuList: [],
+      menuList: [],
     }
   },
-  getters: {},
+  getters: {
+    getMenuList(): Array<Menubar> {
+      return this.menuList
+    },
+    getPermissionMenuList(): Array<Menu> {
+      return this.permissionMenuList
+    },
+  },
   actions: {
+    getPermission(id: string): Promise<QuickResponseData<Array<Menu>>> {
+      return new Promise((resolve) => {
+        const userId = id
+        getPermission(userId).then((res) => {
+          const { data: userPermissionMenuList } = res
+          this.permissionMenuList = userPermissionMenuList
+          const userMenuList = menuFormat(userPermissionMenuList)
+          this.menuList = userMenuList
+          resolve(res)
+        })
+      })
+    },
     getUserPageList(parmas: object): Promise<QuickResponseData<Array<User>>> {
       return new Promise((resolve) => {
         getUserPageList(parmas).then((res) => {
diff --git a/src/types/menu.ts b/src/types/menu.ts
index 4c8cb1a..56ab84d 100644
--- a/src/types/menu.ts
+++ b/src/types/menu.ts
@@ -14,6 +14,6 @@ export interface Menu {
 export interface MenuTree extends Menu {
   children: MenuTree[]
 }
-export interface MenuBar extends Menu {
-  children: MenuBar[]
+export interface Menubar extends Menu {
+  children: Menubar[]
 }
diff --git a/src/types/tab.ts b/src/types/tab.ts
index 6f446e8..f83008a 100644
--- a/src/types/tab.ts
+++ b/src/types/tab.ts
@@ -1,5 +1,5 @@
 export interface Tab {
-  id: string
-  name: string
-  path: string
+  id?: string
+  name?: string
+  path?: string
 }
diff --git a/src/types/table.ts b/src/types/table.ts
index 205587d..df4c70d 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -19,13 +19,13 @@ export interface Btns {
 }
 export interface Actionbar {
   width: number
-  editButtonName: string
-  deleteButtonName: string
-  detailButtonName: string
-  hiddenEditButton: boolean
-  hiddenDeleteButton: boolean
-  hiddenDetailButton: boolean
-  btns: Array<Btns>
+  editButtonName?: string
+  deleteButtonName?: string
+  detailButtonName?: string
+  hiddenEditButton?: boolean
+  hiddenDeleteButton?: boolean
+  hiddenDetailButton?: boolean
+  btns?: Array<Btns>
 }
 export interface Toolbar {
   btns: Array<Btns>
diff --git a/src/views/role/index.vue b/src/views/role/index.vue
index 8fa746d..a269961 100644
--- a/src/views/role/index.vue
+++ b/src/views/role/index.vue
@@ -120,7 +120,7 @@ const tableActionbar = reactive<Actionbar>({
 /**
  * 加载数据
  */
-const load = (parmas: object) => {
+const load = () => {
   getRoleList().then((res) => {
     const { data: roleList } = res
     dataList.length = 0
diff --git a/src/views/rolePermission/index.vue b/src/views/rolePermission/index.vue
index b5f5132..4f7ba45 100644
--- a/src/views/rolePermission/index.vue
+++ b/src/views/rolePermission/index.vue
@@ -1,63 +1,75 @@
 <script lang="ts" setup>
-import { computed, onMounted, reactive, ref, nextTick } from 'vue'
+import { nextTick, onMounted, reactive, ref } 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 { TreeKey } from 'element-plus/es/components/tree/src/tree.type'
+import { menuTreeFormat, treeFormat } from '@/utils'
+import { MenuTree } from '@/types/menu'
 import { Toolbar } from '@/types/table'
+import { Tree } from '@/types/tree'
+import { getRoleList, getMenuPermission, assignPermission } from '@/api/role'
+import { getMenuList } from '@/api/menu'
 import QuickToolbar from '@/components/QuickToolbar/index.vue'
 
 const treeRef = ref<InstanceType<typeof ElTree>>()
 
-const defaultProps = reactive({
-  id: 'roleId',
-  label: 'roleName',
-  children: 'children',
-})
+/**
+ * 菜单tree
+ */
 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 menuTreeList = reactive<Array<MenuTree>>([])
 const menuLoad = () => {
   getMenuList().then((res) => {
     const { data: menuList } = res
     const menuTree = menuTreeFormat(menuList)
-    menuTreeData.length = 0
-    menuTreeData.push(...menuTree)
+    menuTreeList.length = 0
+    menuTreeList.push(...menuTree)
   })
 }
-
-const setCheckedKeys = (val: any) => {
-  nextTick(() => {
-    treeRef.value!.setCheckedKeys(val, false)
+/**
+ * 角色tree
+ */
+const roleProps = reactive({
+  id: 'id',
+  label: 'label',
+  children: 'children',
+})
+const roleTreeData = reactive<Array<Tree>>([])
+const roleTreeLoad = () => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    const roleTree = treeFormat(roleList, {
+      id: 'id',
+      label: 'roleName',
+      children: 'children',
+    })
+    roleTreeData.length = 0
+    roleTreeData.push(...roleTree)
   })
 }
 const roleId = ref('')
 const handleNodeClick = (data: any) => {
   roleId.value = data.id
-  getRoleMenuLsit(roleId.value).then((res) => {
-    console.log(`menuLIst`, res)
+  getMenuPermission(roleId.value).then((res) => {
     const { data: menuList } = res
     const value = menuList.map((x) => x.id)
-    setCheckedKeys(value)
-    // const menuTree = menuTreeFormat(menuList)
-    // menuTreeData.length = 0
-    // menuTreeData.push(...menuTree)
+    menuTreeData.length = 0
+    menuTreeData.push(...menuTreeList)
+    nextTick(() => {
+      if (treeRef.value) {
+        treeRef.value.setCheckedKeys(value, false)
+      }
+    })
   })
 }
-const handleGrant = (data: any, done: any) => {
+/**
+ * 工具栏
+ */
+const handleGrant = () => {
   if (!roleId.value) {
     ElMessage({
       type: 'warning',
@@ -71,13 +83,18 @@ const handleGrant = (data: any, done: any) => {
     type: 'warning',
   })
     .then(() => {
-      const menuIdArr = treeRef.value!.getCheckedKeys(false)
-      console.log(`menuIdArr`, menuIdArr)
+      if (!treeRef.value) {
+        return
+      }
+      // const checkMenuIdArr: TreeKey[] = treeRef.value.getCheckedKeys(false)
+      // const parentMenuIdArr: TreeKey[] = treeRef.value.getHalfCheckedKeys()
+      // const menuIdArr = [...parentMenuIdArr, ...checkMenuIdArr]
+      const menuIdArr = treeRef.value.getCheckedKeys(false)
       const menuIds = menuIdArr.join(',')
       assignPermission({
         roleId: roleId.value,
         menuIds,
-      }).then((res) => {
+      }).then(() => {
         ElMessage({
           type: 'success',
           message: '分配权限成功',
@@ -98,47 +115,59 @@ const tableToolbar = reactive<Toolbar>({
       position: 'left',
       type: 'primary',
       size: 'small',
-      click(data: any, done: any) {
-        handleGrant(data, done)
+      click() {
+        handleGrant()
       },
     },
   ],
 })
-
 onMounted(() => {
-  treeLoad()
+  roleTreeLoad()
   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>
+  <div clas="content">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card shadow="never">
+          <el-tree
+            :data="roleTreeData"
+            :props="roleProps"
+            @node-click="handleNodeClick"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card shadow="never">
+          <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-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
+<style lang="scss" scoped>
+.content {
+  .el-card {
+    height: 575px;
+  }
+}
+</style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index efa8bac..3a8e47b 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -8,6 +8,7 @@ import { FormItem } from '@/types/form'
 import { Page } from '@/types/page'
 import { useUserStore } from '@/store/modules/user'
 import {
+  getUserPageList,
   addUser,
   updateUser,
   deleteUser,
@@ -396,9 +397,8 @@ const page = reactive<Page>({
  * 加载数据
  */
 const load = (parmas: object) => {
-  userStore.getUserPageList(parmas).then((res: any) => {
-    const { page: pagination } = res
-    const { userList } = userStore.$state
+  getUserPageList(parmas).then((res: any) => {
+    const { data: userList, page: pagination } = res
     if (userList) {
       dataList.length = 0
       dataList.push(...userList)
-- 
Gitee