perf: vxe demo

yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts

@@ -1,6 +1,19 @@
 import { computed, reactive } from 'vue'
 import { VxeGridProps } from 'vxe-table'
 import { useAppStore } from '@/store/modules/app'
+import { VxeAllSchemas } from './useVxeCrudSchemas'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+
+const { t } = useI18n()
+const message = useMessage() // 消息弹窗
+
+interface UseVxeGridConfig<T = any> {
+  allSchemas: VxeAllSchemas
+  getListApi: (option: any) => Promise<T>
+  delListApi?: (option: any) => Promise<T>
+  exportListApi?: (option: any) => Promise<T>
+}
 
 const appStore = useAppStore()
 
@@ -14,36 +27,40 @@ const currentSize = computed(() => {
   }
 })
 
-export const useVxeGrid = (allSchemas, getPageApi) => {
+export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
   const gridOptions = reactive<VxeGridProps>({
-    loading: false,
+    loading: true,
     size: currentSize.value,
     height: 800,
     rowConfig: {
-      keyField: 'id',
-      isCurrent: true,
-      isHover: true
+      isCurrent: true, // 当鼠标点击行时，是否要高亮当前行
+      isHover: true // 当鼠标移到行时，是否要高亮当前行
+    },
+    showOverflow: 'tooltip', // 当内容溢出时显示为省略号
+    tooltipConfig: {
+      showAll: true // 开启全表工具提示
     },
     toolbarConfig: {
       custom: true,
       slots: { buttons: 'toolbar_buttons' }
     },
     printConfig: {
-      columns: allSchemas.printSchema
+      columns: config?.allSchemas.printSchema
     },
     formConfig: {
       titleWidth: 100,
       titleAlign: 'right',
-      items: allSchemas.searchSchema
+      items: config?.allSchemas.searchSchema
     },
-    columns: allSchemas.tableSchema,
+    columns: config?.allSchemas.tableSchema,
     pagerConfig: {
-      border: false,
-      background: false,
-      perfect: true,
-      pageSize: 10,
-      pagerCount: 7,
-      pageSizes: [5, 10, 15, 20, 50, 100, 200, 500],
+      border: false, // 带边框
+      background: true, // 带背景颜色
+      perfect: true, // 配套的样式
+      pageSize: 10, // 每页大小
+      pagerCount: 7, // 显示页码按钮的数量
+      autoHidden: true, // 当只有一页时自动隐藏
+      pageSizes: [5, 10, 15, 20, 50, 100, 200, 500], // 每页大小选项列表
       layouts: [
         'PrevJump',
         'PrevPage',
@@ -61,17 +78,25 @@ export const useVxeGrid = (allSchemas, getPageApi) => {
       props: { result: 'list', total: 'total' },
       ajax: {
         query: ({ page, form }) => {
-          gridOptions.loading = true
           const queryParams = Object.assign({}, form)
           queryParams.pageSize = page.pageSize
           queryParams.pageNo = page.currentPage
           gridOptions.loading = false
           return new Promise(async (resolve) => {
-            resolve(await getPageApi(queryParams))
+            resolve(await config?.getListApi(queryParams))
           })
         }
       }
     }
   })
-  return gridOptions
+  const delList = (ids: string | number | string[] | number[]) => {
+    message.delConfirm().then(() => {
+      config?.delListApi && config?.delListApi(ids)
+      message.success(t('common.delSuccess'))
+    })
+  }
+  return {
+    gridOptions,
+    delList
+  }
 }