diff --git a/src/api/role.ts b/src/api/role.ts
index 0c70ab8abb7d466136fce2df711ceae057ab97b9..b885836e6f1fe69e94ce40e02cd610eb5a1034f8 100644
--- a/src/api/role.ts
+++ b/src/api/role.ts
@@ -1,4 +1,5 @@
 import { Menu } from '@/types/menu'
+import { User } from '@/types/user'
 import { Role } from '../types/role'
 import request, { QuickResponseData } from '../utils/request'
 
@@ -23,6 +24,17 @@ export const getMenuPermission = (
     },
   })
 }
+export const getUserPermission = (
+  roleId: string
+): Promise<QuickResponseData<Array<string>>> => {
+  return request<QuickResponseData<Array<string>>>({
+    url: Api.userList,
+    method: 'GET',
+    params: {
+      id: roleId,
+    },
+  })
+}
 
 export const getRoleList = (): Promise<QuickResponseData<Array<Role>>> => {
   return request<QuickResponseData<Array<Role>>>({
diff --git a/src/api/user.ts b/src/api/user.ts
index 9b6fab333fe7367483d8fb325b0cf8783ab0484b..944fe78138375341c86a9fc650545fde57b0300b 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -7,6 +7,7 @@ const Api = {
   getUserInfo: '/api/getUserInfo',
   changePassword: '/api/changePassword',
   pageList: '/api/user/getPageList',
+  list: '/api/user/getList',
   info: '/api/user/getInfo',
   add: '/api/user/add',
   update: '/api/user/update',
@@ -44,6 +45,12 @@ export const getUserPageList = (
     params,
   })
 }
+export const getUserList = (): Promise<QuickResponseData<Array<User>>> => {
+  return request<QuickResponseData<Array<User>>>({
+    url: Api.list,
+    method: 'GET',
+  })
+}
 export const getUserInfo = (
   userName: string
 ): Promise<QuickResponseData<User>> => {
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 92cd07a5854cc116ed465fb08e8222a6c302ef8f..5e5444f6905d34a874cb6a1216dff0dfdb4ce914 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -159,6 +159,7 @@ const emits = defineEmits([
   'onSizeChange',
   'onCurrentChange',
   'onSelectionChange',
+  'onTableRef',
 ])
 /**
  * 常规属性
@@ -374,9 +375,10 @@ const handleCustomToolbarClick = (done: any) => {
 /**
  * 选中
  */
-const handleSelectionChange = (userList: Array<any>) => {
+const handleSelectionChange = (selectList: Array<any>) => {
   checkDataList.length = 0
-  checkDataList.push(...userList)
+  checkDataList.push(...selectList)
+  emits('onSelectionChange', checkDataList)
 }
 /**
  * 分页
@@ -394,6 +396,9 @@ const handleCurrentChange = (val: number) => {
 const handleDone = () => {
   load()
 }
+const handleTbaleRef = (tableRef: any): void => {
+  emits('onTableRef', tableRef)
+}
 onMounted(() => {
   if (leftTree.value) {
     treeLoad()
@@ -449,7 +454,7 @@ onActivated(() => {
           :hidden-import-button="toolbar?.hiddenImportButton"
           :hidden-export-button="toolbar?.hiddenExportButton"
           :hidden-print-button="toolbar?.hiddenPrintButton"
-          :hidden-refres-hbutton="toolbar?.hiddenRefreshButton"
+          :hidden-refresh-button="toolbar?.hiddenRefreshButton"
           @on-add="handleAdd"
           @on-batch-delete="handleBatchDelete"
           @on-import="handleImport"
@@ -473,6 +478,7 @@ onActivated(() => {
           @on-row-detail="handleDetail"
           @on-selection-change="handleSelectionChange"
           @on-done="handleDone"
+          @on-table-ref="handleTbaleRef"
         >
         </quick-table>
         <el-pagination
diff --git a/src/components/QuickTable/index.vue b/src/components/QuickTable/index.vue
index 5751cafbdc867eef007bbf3129df354efbd2a2c6..cbb078278504d32424a56d7a996ad38c186e81de 100644
--- a/src/components/QuickTable/index.vue
+++ b/src/components/QuickTable/index.vue
@@ -1,5 +1,14 @@
 <script lang="ts" setup>
-import { defineProps, defineEmits, toRefs, Ref } from 'vue'
+import { ElTable } from 'element-plus'
+import {
+  defineProps,
+  defineEmits,
+  toRefs,
+  Ref,
+  ref,
+  onMounted,
+  nextTick,
+} from 'vue'
 import { Column, Actionbar } from '../../types/table'
 /**
  * props
@@ -86,6 +95,7 @@ const {
  * 类型转换
  */
 const actionbar = tableActionbar.value as Actionbar
+const tableRef = ref<InstanceType<typeof ElTable>>()
 /**
  * emits
  */
@@ -95,6 +105,7 @@ const emits = defineEmits([
   'onRowDelete',
   'onRowDetail',
   'onDone',
+  'onTableRef',
 ])
 /**
  *函数
@@ -108,9 +119,15 @@ const getActionbarWidth = () => {
 const handleSelectionChange = (val: any) => {
   emits('onSelectionChange', val)
 }
+onMounted(() => {
+  nextTick(() => {
+    emits('onTableRef', tableRef)
+  })
+})
 </script>
 <template>
   <el-table
+    ref="tableRef"
     :data="data"
     style="width: 100%"
     :height="height"
diff --git a/src/main.ts b/src/main.ts
index 4a36dc96ae85672b3346c9b19b41739002898023..bc43ae3adceef3733b53426c668e7ad60e7816e6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,28 +3,23 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import en from 'element-plus/es/locale/lang/en'
-// import QuickUI from 'quick-vue3-ui'
 import 'quick-vue3-ui/dist/style.css'
 import * as echarts from 'echarts'
 import App from './App.vue'
 import { router } from './router'
 import { pinia } from './store'
 import i18n from './i18n'
-
 import { useAppStore } from './store/modules/app'
 
-console.log('ElementPlus', ElementPlus)
-// console.log('QuickUI', QuickUI)
-
 const app = createApp(App)
-
 const appStore = useAppStore(pinia)
+
 app.use(ElementPlus, {
   locale: appStore.getLanguage === 'zh' ? zhCn : en,
 })
 app.use(router)
 app.use(pinia)
 app.use(i18n)
-// app.use(QuickUI)
 app.config.globalProperties.$echarts = echarts
+
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index 7e785b9f8d7547d091df2fd435289ca4603905cb..6d8e8808fca0d1b5d8f4f98359d180a4345a7f1c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -82,6 +82,10 @@ export const router = createRouter({
           path: 'rolePermission',
           component: () => import('../views/rolePermission/index.vue'),
         },
+        {
+          path: 'assignUser',
+          component: () => import('../views/assignUser/index.vue'),
+        },
       ],
     },
   ],
diff --git a/src/types/options.ts b/src/types/options.ts
index ca2afc365c068d6c4b62704ca81a98d85c7fdbf0..8681745567b9218eb0a8581520be1a018b054217 100644
--- a/src/types/options.ts
+++ b/src/types/options.ts
@@ -3,7 +3,7 @@ export interface Options {
   value: string
 }
 export interface TreeOptions {
-  id: string
-  label: string
+  id?: string
+  label?: string
   children?: string
 }
diff --git a/src/types/table.ts b/src/types/table.ts
index df4c70d8451f1c0530bf8f49a316f41930d2a2aa..1a9544f3804790ef63b7a35908d606234be58fde 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -28,5 +28,17 @@ export interface Actionbar {
   btns?: Array<Btns>
 }
 export interface Toolbar {
+  importButtonName?: string
+  exportButtonName?: string
+  addButtonName?: string
+  batchDeleteButtonName?: string
+  printButtonName?: string
+  refreshButtonName?: string
+  hiddenImportButton?: boolean
+  hiddenExportButton?: boolean
+  hiddenAddButton?: boolean
+  hiddenBatchDeleteButton?: boolean
+  hiddenPrintButton?: boolean
+  hiddenRefreshButton?: boolean
   btns: Array<Btns>
 }
diff --git a/src/views/assignUser/index.vue b/src/views/assignUser/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0c9a0295ec61a9235882c1f94e241db29418835a
--- /dev/null
+++ b/src/views/assignUser/index.vue
@@ -0,0 +1,199 @@
+<script lang="ts" setup>
+import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
+import { reactive, ref } from 'vue'
+import { treeFormat } from '@/utils'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Toolbar } from '@/types/table'
+import { User } from '@/types/user'
+import { Tree, LeftTree } from '@/types/tree'
+import { getRoleList, getUserPermission, assignUser } from '@/api/role'
+import { getUserList } from '@/api/user'
+
+/**
+ * 常规属性
+ */
+const currentTreeData = ref<Tree>({
+  id: '',
+  label: '',
+  children: [],
+})
+/**
+ * 工具栏
+ */
+const handleAssign = () => {
+  const { id, label } = currentTreeData.value
+  if (!id) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择一个角色',
+    })
+    return
+  }
+  ElMessageBox.confirm(`你真的要给【${label}】角色分配用户吗？`, {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning',
+  })
+    .then(() => {
+      const userIds = checkDataList.value
+        .map((x) => {
+          return x.id
+        })
+        .join(',')
+      assignUser({
+        roleId: id,
+        userIds,
+      }).then(() => {
+        ElMessage({
+          type: 'success',
+          message: '分配用户成功',
+        })
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '您已取消分配用户',
+      })
+    })
+}
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: true,
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+  hiddenAddButton: true,
+  hiddenRefreshButton: true,
+  btns: [
+    {
+      name: '分配用户',
+      position: 'left',
+      type: 'primary',
+      click(data: any, done: any) {
+        handleAssign(data, done)
+      },
+    },
+  ],
+})
+/**
+ * 表格
+ */
+const dataList = reactive<Array<User>>([])
+const userList = reactive<Array<User>>([])
+const checkDataList = ref<Array<User>>([])
+const handleSelectionChange = (selectDataList: Array<User>) => {
+  checkDataList.value = selectDataList
+}
+const load = () => {
+  getUserList().then((res) => {
+    const { data: userDataList } = res
+    userList.length = 0
+    userList.push(...userDataList)
+  })
+}
+const tabRef = ref<InstanceType<typeof ElTable>>()
+const hanleTableRef = (instance: any) => {
+  tabRef.value = instance.value
+}
+const toggleRowSelection = (rows: Array<User>) => {
+  rows.forEach((row) => {
+    if (tabRef.value) {
+      tabRef.value.toggleRowSelection(row, true)
+    }
+  })
+}
+const clearSelection = () => {
+  if (tabRef.value) {
+    tabRef.value.clearSelection()
+  }
+}
+const getRows = (data: string[]) => {
+  const arr: User[] = []
+  data.forEach((element: string) => {
+    const user = userList.find((x) => x.id === element)
+    if (user) {
+      arr.push(user)
+    }
+  })
+  return arr
+}
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '用户编号',
+    prop: 'userId',
+    width: '200',
+  },
+  {
+    label: '用户名',
+    prop: 'userName',
+  },
+  {
+    label: '姓名',
+    prop: 'fullName',
+  },
+  {
+    label: '手机号',
+    prop: 'phone',
+  },
+  {
+    label: '邮箱',
+    prop: 'email',
+    width: '200',
+  },
+])
+/**
+ * 左树
+ */
+const treeDataList = reactive<Array<Tree>>([])
+const leftTree = reactive<LeftTree>({
+  treeData: [],
+  treeSpan: 6,
+})
+const treeLoad = (done: any) => {
+  getRoleList().then((res) => {
+    const { data: roleList } = res
+    const data = treeFormat(roleList, {
+      label: 'roleName',
+      children: 'children',
+    })
+    treeDataList.length = 0
+    treeDataList.push(...data)
+    leftTree.treeData.length = 0
+    leftTree.treeData.push(...treeDataList)
+    currentTreeData.value.id = treeDataList[0].id
+    done(currentTreeData.value.id)
+  })
+}
+const handleTreeClick = (data: Tree, done: any) => {
+  clearSelection()
+  currentTreeData.value = data
+  const { id } = currentTreeData.value
+  const roleId = id
+  getUserPermission(roleId).then((res) => {
+    const { data: userPermissionList } = res
+    dataList.length = 0
+    dataList.push(...userList)
+    const rows = getRows(userPermissionList)
+    toggleRowSelection(rows)
+  })
+  done()
+}
+</script>
+<template>
+  <quick-crud
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-toolbar="tableToolbar"
+    dialog-titles="dialogTitles"
+    :left-tree="leftTree"
+    @on-selection-change="handleSelectionChange"
+    @on-load="load"
+    @on-tree-load="treeLoad"
+    @on-tree-click="handleTreeClick"
+    @on-table-ref="hanleTableRef"
+  ></quick-crud>
+</template>
diff --git a/src/views/rolePermission/index.vue b/src/views/rolePermission/index.vue
index 4f7ba4548c7af85b6869f2989720ffa846e0ac54..adc8f8f347387b88af099d2f1c3ad45d931aef59 100644
--- a/src/views/rolePermission/index.vue
+++ b/src/views/rolePermission/index.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, reactive, ref } from 'vue'
 import { ElTree, ElMessage, ElMessageBox } from 'element-plus'
-import { TreeKey } from 'element-plus/es/components/tree/src/tree.type'
+import { nextTick, onMounted, reactive, ref } from 'vue'
 import { menuTreeFormat, treeFormat } from '@/utils'
 import { MenuTree } from '@/types/menu'
 import { Toolbar } from '@/types/table'
@@ -10,11 +9,10 @@ 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>>()
-
 /**
  * 菜单tree
  */
+const menuTreeRef = ref<InstanceType<typeof ElTree>>()
 const menuProps = reactive({
   id: 'menuId',
   label: 'menuName',
@@ -33,12 +31,33 @@ const menuLoad = () => {
 /**
  * 角色tree
  */
+const roleTreeRef = ref<InstanceType<typeof ElTree>>()
 const roleProps = reactive({
   id: 'id',
   label: 'label',
   children: 'children',
 })
 const roleTreeData = reactive<Array<Tree>>([])
+const currentTreeData = ref<Tree>({
+  id: '',
+  label: '',
+  children: [],
+})
+const handleNodeClick = (data: any) => {
+  currentTreeData.value = data
+  const { id } = currentTreeData.value
+  getMenuPermission(id).then((res) => {
+    const { data: menuList } = res
+    const value = menuList.map((x) => x.id)
+    menuTreeData.length = 0
+    menuTreeData.push(...menuTreeList)
+    nextTick(() => {
+      if (menuTreeRef.value) {
+        menuTreeRef.value.setCheckedKeys(value, false)
+      }
+    })
+  })
+}
 const roleTreeLoad = () => {
   getRoleList().then((res) => {
     const { data: roleList } = res
@@ -49,20 +68,11 @@ const roleTreeLoad = () => {
     })
     roleTreeData.length = 0
     roleTreeData.push(...roleTree)
-  })
-}
-const roleId = ref('')
-const handleNodeClick = (data: any) => {
-  roleId.value = data.id
-  getMenuPermission(roleId.value).then((res) => {
-    const { data: menuList } = res
-    const value = menuList.map((x) => x.id)
-    menuTreeData.length = 0
-    menuTreeData.push(...menuTreeList)
     nextTick(() => {
-      if (treeRef.value) {
-        treeRef.value.setCheckedKeys(value, false)
-      }
+      const key = roleTree[0].id
+      roleTreeRef.value?.setCurrentKey(key)
+      const node = roleTreeRef.value?.getCurrentNode() as Tree
+      handleNodeClick(node)
     })
   })
 }
@@ -70,29 +80,27 @@ const handleNodeClick = (data: any) => {
  * 工具栏
  */
 const handleGrant = () => {
-  if (!roleId.value) {
+  const { id, label } = currentTreeData.value
+  if (!id) {
     ElMessage({
       type: 'warning',
       message: '请选择一个角色',
     })
     return
   }
-  ElMessageBox.confirm(`你真的要给${roleId.value}角色分配权限吗？`, {
+  ElMessageBox.confirm(`你真的要给【${label}】角色分配权限吗？`, {
     confirmButtonText: 'OK',
     cancelButtonText: 'Cancel',
     type: 'warning',
   })
     .then(() => {
-      if (!treeRef.value) {
+      if (!menuTreeRef.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 menuIdArr = menuTreeRef.value.getCheckedKeys(false)
       const menuIds = menuIdArr.join(',')
       assignPermission({
-        roleId: roleId.value,
+        roleId: id,
         menuIds,
       }).then(() => {
         ElMessage({
@@ -133,8 +141,11 @@ onMounted(() => {
       <el-col :span="4">
         <el-card shadow="never">
           <el-tree
+            ref="roleTreeRef"
             :data="roleTreeData"
             :props="roleProps"
+            node-key="id"
+            :highlight-current="true"
             @node-click="handleNodeClick"
           />
         </el-card>
@@ -152,7 +163,7 @@ onMounted(() => {
           ></quick-toolbar>
           <!-- :default-checked-keys="" -->
           <el-tree
-            ref="treeRef"
+            ref="menuTreeRef"
             :data="menuTreeData"
             :props="menuProps"
             show-checkbox
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 3a8e47b846b2ab9400599793b6b486f1e0870c62..1866cc5b8c71d41d5fcbc851e08ee77ccf7723b1 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -18,7 +18,6 @@ import {
   disableUser,
 } from '@/api/user'
 
-const userStore = useUserStore()
 const dataList = reactive<Array<User>>([])
 /**
  * 表单
@@ -174,6 +173,7 @@ const formItems = reactive<Array<FormItem>>([
     type: 'textarea',
   },
 ])
+
 const handleFormSubmit = (form: User, done: any) => {
   console.log('handleFormSubmit', form)
   if (form.id) {
diff --git a/vite.config.ts b/vite.config.ts
index 2ce270c6c3ac694f6b5223dc21a125223cb6ff9f..3d09b3db365ed066f281ff8dcbebc65443893992 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,8 +6,6 @@ import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default ({ command, mode }) => {
-  console.log(command)
-  console.log(mode)
   const root = process.cwd()
   const env = loadEnv(mode, root)
   const { VITE_APP_TITLE, VITE_PORT, VITE_APP_BASE_URL } = env