diff --git a/src/api/role.ts b/src/api/role.ts
index 0c70ab8abb7d466136fce2df711ceae057ab97b9..c253c89d37573630209b03eac091d2ee6113d917 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<User>>> => {
+  return request<QuickResponseData<Array<User>>>({
+    url: Api.userList,
+    method: 'GET',
+    params: {
+      id: roleId,
+    },
+  })
+}
 
 export const getRoleList = (): Promise<QuickResponseData<Array<Role>>> => {
   return request<QuickResponseData<Array<Role>>>({
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 92cd07a5854cc116ed465fb08e8222a6c302ef8f..cf5fbdc71910d51e93c3da063821e68edb6c0704 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -159,6 +159,7 @@ const emits = defineEmits([
   'onSizeChange',
   'onCurrentChange',
   'onSelectionChange',
+  'onTableRef',
 ])
 /**
  * 常规属性
@@ -377,6 +378,7 @@ const handleCustomToolbarClick = (done: any) => {
 const handleSelectionChange = (userList: Array<any>) => {
   checkDataList.length = 0
   checkDataList.push(...userList)
+  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()
@@ -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/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/views/assignUser/index.vue b/src/views/assignUser/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f22dfe1b5fadcee87f3bd2e89ee941f0a5609ce
--- /dev/null
+++ b/src/views/assignUser/index.vue
@@ -0,0 +1,221 @@
+<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, Actionbar, Toolbar } from '@/types/table'
+import { User } from '@/types/user'
+import { FormItem } from '@/types/form'
+import { Options } from '@/types/options'
+import { Tree, LeftTree } from '@/types/tree'
+import { Page } from '@/types/page'
+import { getRoleList, assignUser } from '@/api/role'
+import { getUserPageList } from '@/api/user'
+
+/**
+ * 常规属性
+ */
+const dicTypeList = reactive<Array<Options>>([])
+const treeDataList = reactive<Array<Tree>>([])
+const dataList = reactive<Array<User>>([])
+const userList = reactive<Array<User>>([])
+const currentTreeData = ref<Tree>({
+  id: '',
+  label: '',
+  children: [],
+})
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const checkDataList = ref<Array<User>>([])
+
+/**
+ * 工具栏
+ */
+const handleAssign = (data: any, done: any) => {
+  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,
+  btns: [
+    {
+      name: '分配',
+      position: 'left',
+      type: 'primary',
+      click(data: any, done: any) {
+        handleAssign(data, done)
+      },
+    },
+  ],
+})
+
+const handleSelectionChange = (selectDataList: Array<User>) => {
+  checkDataList.value = selectDataList
+}
+/**
+ * 表格
+ */
+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 tableActionbar = reactive<Actionbar>({
+  width: 300,
+  hiddenDetailButton: true,
+})
+/**
+ * 加载数据
+ */
+const load = (parmas: object) => {
+  const { id } = currentTreeData.value
+  getUserPageList(parmas).then((res) => {
+    const { data: userDataList } = res
+    userList.length = 0
+    userList.push(...userDataList)
+    console.log(`userList`, userList)
+  })
+}
+/**
+ * 左树
+ */
+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 hanleTableRef = (tableRef: any) => {
+  multipleTableRef.value = tableRef
+}
+const toggleSelection = (rows?: User[]) => {
+  if (rows) {
+    rows.forEach((row) => {
+      multipleTableRef.value!.toggleRowSelection(row, true)
+    })
+  } else {
+    multipleTableRef.value!.clearSelection()
+  }
+}
+const handleTreeClick = (data: Tree, done: any) => {
+  debugger
+  console.log('userList1', userList)
+  currentTreeData.value = data
+  dataList.length = 0
+  dataList.push(...userList)
+  // const roleId = '1'
+  // getUserPermission(roleId).then((res) => {
+  //   const { data: userPermissionList } = res
+  //   const arr = []
+  //   userPermissionList.forEach((userId) => {
+  //     console.log('userId', userId)
+  //     const user = userList.filter((x) => {
+  //       console.log('xxxxx', x)
+  //       return x.id == userId
+  //     })
+  //     console.log(user, `user`)
+  //     arr.push(user)
+  //   })
+  //   toggleSelection(userPermissionList)
+  // })
+  done()
+}
+
+/**
+ * 分页
+ */
+const page = reactive<Page>({
+  current: 1,
+  size: 100,
+  sizes: [10, 20, 30, 40, 50],
+  total: 100,
+})
+</script>
+<template>
+  <quick-crud
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-toolbar="tableToolbar"
+    dialog-titles="dialogTitles"
+    :left-tree="leftTree"
+    :page="page"
+    @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..c6739c38468c76fc79e5aaf506949a1383cb5af6 100644
--- a/src/views/rolePermission/index.vue
+++ b/src/views/rolePermission/index.vue
@@ -51,10 +51,15 @@ const roleTreeLoad = () => {
     roleTreeData.push(...roleTree)
   })
 }
-const roleId = ref('')
+const currentTreeData = ref<Tree>({
+  id: '',
+  label: '',
+  children: [],
+})
 const handleNodeClick = (data: any) => {
-  roleId.value = data.id
-  getMenuPermission(roleId.value).then((res) => {
+  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
@@ -70,14 +75,15 @@ 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',
@@ -86,13 +92,10 @@ const handleGrant = () => {
       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,
+        roleId: id,
         menuIds,
       }).then(() => {
         ElMessage({
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 3a8e47b846b2ab9400599793b6b486f1e0870c62..32e4bf58af819991c0d8dce4856d641392057965 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -174,6 +174,7 @@ const formItems = reactive<Array<FormItem>>([
     type: 'textarea',
   },
 ])
+
 const handleFormSubmit = (form: User, done: any) => {
   console.log('handleFormSubmit', form)
   if (form.id) {