reactor: 重构 XTable

yudao-ui-admin-vue3/src/views/system/user/index.vue

@@ -27,7 +27,7 @@
         </div>
       </template>
       <!-- 列表 -->
-      <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
+      <XTable @register="registerTable">
         <template #toolbar_buttons>
           <!-- 操作：新增 -->
           <XButton
@@ -119,7 +119,7 @@
             </template>
           </el-dropdown>
         </template>
-      </vxe-grid>
+      </XTable>
     </el-card>
   </div>
   <XModal v-model="dialogVisible" :title="dialogTitle">
@@ -283,14 +283,13 @@ import {
   UploadRawFile
 } from 'element-plus'
 import { useRouter } from 'vue-router'
-import { VxeGridInstance } from 'vxe-table'
 import { handleTree, defaultProps } from '@/utils/tree'
 import download from '@/utils/download'
 import { CommonStatusEnum } from '@/utils/constants'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
-import { useVxeGrid } from '@/hooks/web/useVxeGrid'
+import { useXTable } from '@/hooks/web/useXTable'
 import { FormExpose } from '@/components/Form'
 import { rules, allSchemas } from './user.data'
 import * as UserApi from '@/api/system/user'
@@ -312,10 +311,9 @@ const queryParams = reactive({
 // ========== 列表相关 ==========
 const tableTitle = ref('用户列表')
 // 列表相关的变量
-const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions, getList, deleteData, exportList } = useVxeGrid<UserApi.UserVO>({
+const [registerTable, { reload, deleteData, exportList }] = useXTable({
   allSchemas: allSchemas,
-  queryParams: queryParams,
+  params: queryParams,
   getListApi: UserApi.getUserPageApi,
   deleteApi: UserApi.deleteUserApi,
   exportListApi: UserApi.exportUserApi
@@ -334,7 +332,7 @@ const filterNode = (value: string, data: Tree) => {
 }
 const handleDeptNodeClick = async (row: { [key: string]: any }) => {
   queryParams.deptId = row.id
-  await getList(xGrid)
+  await reload()
 }
 const { push } = useRouter()
 const handleDeptEdit = () => {
@@ -409,7 +407,7 @@ const handleDetail = async (rowId: number) => {
 }
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  await deleteData(xGrid, rowId)
+  await deleteData(rowId)
 }
 // 提交按钮
 const submitForm = async () => {
@@ -428,7 +426,7 @@ const submitForm = async () => {
   } finally {
     // unref(formRef)?.setSchema(allSchemas.formSchema)
     // 刷新列表
-    await getList(xGrid)
+    await reload()
     loading.value = false
   }
 }
@@ -443,7 +441,7 @@ const handleStatusChange = async (row: UserApi.UserVO) => {
       await UserApi.updateUserStatusApi(row.id, row.status)
       message.success(text + '成功')
       // 刷新列表
-      await getList(xGrid)
+      await reload()
     })
     .catch(() => {
       row.status =
@@ -544,7 +542,7 @@ const handleFileSuccess = async (response: any): Promise<void> => {
     text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
   }
   message.alert(text)
-  await getList(xGrid)
+  await reload()
 }
 // 文件数超出提示
 const handleExceed = (): void => {