From 7129cf3b56edf1c1f524b9a3ebe3ef09b3df3d73 Mon Sep 17 00:00:00 2001
From: 91zhangliying <1663782157@qq.com>
Date: Sun, 24 Jul 2022 20:04:03 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=A7=92=E8=89=B2=E5=88=86=E9=85=8D?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/role.ts                     |  12 ++
 src/components/QuickCrud/index.vue  |   6 +
 src/components/QuickTable/index.vue |  19 ++-
 src/router/index.ts                 |   4 +
 src/types/options.ts                |   4 +-
 src/views/assignUser/index.vue      | 221 ++++++++++++++++++++++++++++
 src/views/rolePermission/index.vue  |  21 +--
 src/views/user/index.vue            |   1 +
 8 files changed, 276 insertions(+), 12 deletions(-)
 create mode 100644 src/views/assignUser/index.vue

diff --git a/src/api/role.ts b/src/api/role.ts
index 0c70ab8..c253c89 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 92cd07a..cf5fbdc 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 5751caf..cbb0782 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 7e785b9..6d8e880 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 ca2afc3..8681745 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 0000000..1f22dfe
--- /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 4f7ba45..c6739c3 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 3a8e47b..32e4bf5 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) {
-- 
Gitee


From 16f0884a54da6af15ccc74d3f2162734e4babe75 Mon Sep 17 00:00:00 2001
From: zhanglp <zlp_15229380174@163.com>
Date: Mon, 25 Jul 2022 19:44:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E6=9D=83=E9=99=90=E5=92=8C=E5=88=86=E9=85=8D=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/role.ts                    |   4 +-
 src/api/user.ts                    |   7 ++
 src/components/QuickCrud/index.vue |   6 +-
 src/main.ts                        |   9 +-
 src/types/table.ts                 |  12 +++
 src/views/assignUser/index.vue     | 134 ++++++++++++-----------------
 src/views/rolePermission/index.vue |  50 ++++++-----
 src/views/user/index.vue           |   1 -
 vite.config.ts                     |   2 -
 9 files changed, 111 insertions(+), 114 deletions(-)

diff --git a/src/api/role.ts b/src/api/role.ts
index c253c89..b885836 100644
--- a/src/api/role.ts
+++ b/src/api/role.ts
@@ -26,8 +26,8 @@ export const getMenuPermission = (
 }
 export const getUserPermission = (
   roleId: string
-): Promise<QuickResponseData<Array<User>>> => {
-  return request<QuickResponseData<Array<User>>>({
+): Promise<QuickResponseData<Array<string>>> => {
+  return request<QuickResponseData<Array<string>>>({
     url: Api.userList,
     method: 'GET',
     params: {
diff --git a/src/api/user.ts b/src/api/user.ts
index 9b6fab3..944fe78 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 cf5fbdc..5e5444f 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -375,9 +375,9 @@ 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)
 }
 /**
@@ -454,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"
diff --git a/src/main.ts b/src/main.ts
index 4a36dc9..bc43ae3 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/types/table.ts b/src/types/table.ts
index df4c70d..1a9544f 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
index 1f22dfe..0c9a029 100644
--- a/src/views/assignUser/index.vue
+++ b/src/views/assignUser/index.vue
@@ -3,34 +3,24 @@ 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 { Column, 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'
+import { getRoleList, getUserPermission, assignUser } from '@/api/role'
+import { getUserList } 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 handleAssign = () => {
   const { id, label } = currentTreeData.value
   if (!id) {
     ElMessage({
@@ -73,9 +63,10 @@ const tableToolbar = reactive<Toolbar>({
   hiddenExportButton: true,
   hiddenPrintButton: true,
   hiddenAddButton: true,
+  hiddenRefreshButton: true,
   btns: [
     {
-      name: '分配',
+      name: '分配用户',
       position: 'left',
       type: 'primary',
       click(data: any, done: any) {
@@ -84,13 +75,48 @@ const tableToolbar = reactive<Toolbar>({
     },
   ],
 })
-
-const handleSelectionChange = (selectDataList: Array<User>) => {
-  checkDataList.value = selectDataList
-}
 /**
  * 表格
  */
+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',
@@ -119,25 +145,10 @@ const tableColumns = reactive<Array<Column>>([
     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 treeDataList = reactive<Array<Tree>>([])
 const leftTree = reactive<LeftTree>({
   treeData: [],
   treeSpan: 6,
@@ -157,52 +168,20 @@ const treeLoad = (done: any) => {
     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)
+  clearSelection()
   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)
-  // })
+  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()
 }
-
-/**
- * 分页
- */
-const page = reactive<Page>({
-  current: 1,
-  size: 100,
-  sizes: [10, 20, 30, 40, 50],
-  total: 100,
-})
 </script>
 <template>
   <quick-crud
@@ -211,7 +190,6 @@ const page = reactive<Page>({
     :table-toolbar="tableToolbar"
     dialog-titles="dialogTitles"
     :left-tree="leftTree"
-    :page="page"
     @on-selection-change="handleSelectionChange"
     @on-load="load"
     @on-tree-load="treeLoad"
diff --git a/src/views/rolePermission/index.vue b/src/views/rolePermission/index.vue
index c6739c3..adc8f8f 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,24 +31,13 @@ const menuLoad = () => {
 /**
  * 角色tree
  */
+const roleTreeRef = ref<InstanceType<typeof ElTree>>()
 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 currentTreeData = ref<Tree>({
   id: '',
   label: '',
@@ -65,12 +52,30 @@ const handleNodeClick = (data: any) => {
     menuTreeData.length = 0
     menuTreeData.push(...menuTreeList)
     nextTick(() => {
-      if (treeRef.value) {
-        treeRef.value.setCheckedKeys(value, false)
+      if (menuTreeRef.value) {
+        menuTreeRef.value.setCheckedKeys(value, false)
       }
     })
   })
 }
+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)
+    nextTick(() => {
+      const key = roleTree[0].id
+      roleTreeRef.value?.setCurrentKey(key)
+      const node = roleTreeRef.value?.getCurrentNode() as Tree
+      handleNodeClick(node)
+    })
+  })
+}
 /**
  * 工具栏
  */
@@ -89,10 +94,10 @@ const handleGrant = () => {
     type: 'warning',
   })
     .then(() => {
-      if (!treeRef.value) {
+      if (!menuTreeRef.value) {
         return
       }
-      const menuIdArr = treeRef.value.getCheckedKeys(false)
+      const menuIdArr = menuTreeRef.value.getCheckedKeys(false)
       const menuIds = menuIdArr.join(',')
       assignPermission({
         roleId: id,
@@ -136,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>
@@ -155,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 32e4bf5..1866cc5 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>>([])
 /**
  * 表单
diff --git a/vite.config.ts b/vite.config.ts
index 2ce270c..3d09b3d 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
-- 
Gitee