From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/hooks/web/useTable.ts | 223 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 223 insertions(+), 0 deletions(-)
diff --git a/src/hooks/web/useTable.ts b/src/hooks/web/useTable.ts
new file mode 100644
index 0000000..361dd67
--- /dev/null
+++ b/src/hooks/web/useTable.ts
@@ -0,0 +1,223 @@
+import download from '@/utils/download'
+import { Table, TableExpose } from '@/components/Table'
+import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
+import { computed, nextTick, reactive, ref, unref, watch } from 'vue'
+import type { TableProps } from '@/components/Table/src/types'
+
+import { TableSetPropsType } from '@/types/table'
+
+const { t } = useI18n()
+interface ResponseType<T = any> {
+ list: T[]
+ total?: number
+}
+
+interface UseTableConfig<T = any> {
+ getListApi: (option: any) => Promise<T>
+ delListApi?: (option: any) => Promise<T>
+ exportListApi?: (option: any) => Promise<T>
+ // 杩斿洖鏁版嵁鏍煎紡閰嶇疆
+ response?: ResponseType
+ // 榛樿浼犻�掔殑鍙傛暟
+ defaultParams?: Recordable
+ props?: TableProps
+}
+
+interface TableObject<T = any> {
+ pageSize: number
+ currentPage: number
+ total: number
+ tableList: T[]
+ params: any
+ loading: boolean
+ exportLoading: boolean
+ currentRow: Nullable<T>
+}
+
+export const useTable = <T = any>(config?: UseTableConfig<T>) => {
+ const tableObject = reactive<TableObject<T>>({
+ // 椤垫暟
+ pageSize: 10,
+ // 褰撳墠椤�
+ currentPage: 1,
+ // 鎬绘潯鏁�
+ total: 10,
+ // 琛ㄦ牸鏁版嵁
+ tableList: [],
+ // AxiosConfig 閰嶇疆
+ params: {
+ ...(config?.defaultParams || {})
+ },
+ // 鍔犺浇涓�
+ loading: true,
+ // 瀵煎嚭鍔犺浇涓�
+ exportLoading: false,
+ // 褰撳墠琛岀殑鏁版嵁
+ currentRow: null
+ })
+
+ const paramsObj = computed(() => {
+ return {
+ ...tableObject.params,
+ pageSize: tableObject.pageSize,
+ pageNo: tableObject.currentPage
+ }
+ })
+
+ watch(
+ () => tableObject.currentPage,
+ () => {
+ methods.getList()
+ }
+ )
+
+ watch(
+ () => tableObject.pageSize,
+ () => {
+ // 褰撳墠椤典笉涓�1鏃讹紝淇敼椤垫暟鍚庝細瀵艰嚧澶氭璋冪敤getList鏂规硶
+ if (tableObject.currentPage === 1) {
+ methods.getList()
+ } else {
+ tableObject.currentPage = 1
+ methods.getList()
+ }
+ }
+ )
+
+ // Table瀹炰緥
+ const tableRef = ref<typeof Table & TableExpose>()
+
+ // ElTable瀹炰緥
+ const elTableRef = ref<ComponentRef<typeof ElTable>>()
+
+ const register = (ref: typeof Table & TableExpose, elRef: ComponentRef<typeof ElTable>) => {
+ tableRef.value = ref
+ elTableRef.value = elRef
+ }
+
+ const getTable = async () => {
+ await nextTick()
+ const table = unref(tableRef)
+ if (!table) {
+ console.error('The table is not registered. Please use the register method to register')
+ }
+ return table
+ }
+
+ const delData = async (ids: string | number | string[] | number[]) => {
+ let idsLength = 1
+ if (ids instanceof Array) {
+ idsLength = ids.length
+ await Promise.all(
+ ids.map(async (id: string | number) => {
+ await (config?.delListApi && config?.delListApi(id))
+ })
+ )
+ } else {
+ await (config?.delListApi && config?.delListApi(ids))
+ }
+ ElMessage.success(t('common.delSuccess'))
+
+ // 璁＄畻鍑轰复鐣岀偣
+ tableObject.currentPage =
+ tableObject.total % tableObject.pageSize === idsLength || tableObject.pageSize === 1
+ ? tableObject.currentPage > 1
+ ? tableObject.currentPage - 1
+ : tableObject.currentPage
+ : tableObject.currentPage
+ await methods.getList()
+ }
+
+ const methods = {
+ getList: async () => {
+ tableObject.loading = true
+ const res = await config?.getListApi(unref(paramsObj)).finally(() => {
+ tableObject.loading = false
+ })
+ if (res) {
+ tableObject.tableList = (res as unknown as ResponseType).list
+ tableObject.total = (res as unknown as ResponseType).total ?? 0
+ }
+ },
+ setProps: async (props: TableProps = {}) => {
+ const table = await getTable()
+ table?.setProps(props)
+ },
+ setColumn: async (columnProps: TableSetPropsType[]) => {
+ const table = await getTable()
+ table?.setColumn(columnProps)
+ },
+ getSelections: async () => {
+ const table = await getTable()
+ return (table?.selections || []) as T[]
+ },
+ // 涓嶴earch缁勪欢缁撳悎
+ setSearchParams: (data: Recordable) => {
+ tableObject.params = Object.assign(tableObject.params, {
+ pageSize: tableObject.pageSize,
+ pageNo: 1,
+ ...data
+ })
+ // 椤电爜涓嶇瓑浜�1鏃舵洿鏂伴〉鐮侀噸鏂拌幏鍙栨暟鎹紝椤电爜绛変簬1鏃堕噸鏂拌幏鍙栨暟鎹�
+ if (tableObject.currentPage !== 1) {
+ tableObject.currentPage = 1
+ } else {
+ methods.getList()
+ }
+ },
+ // 鍒犻櫎鏁版嵁
+ delList: async (
+ ids: string | number | string[] | number[],
+ multiple: boolean,
+ message = true
+ ) => {
+ const tableRef = await getTable()
+ if (multiple) {
+ if (!tableRef?.selections.length) {
+ ElMessage.warning(t('common.delNoData'))
+ return
+ }
+ }
+ if (message) {
+ ElMessageBox.confirm(t('common.delMessage'), t('common.confirmTitle'), {
+ confirmButtonText: t('common.ok'),
+ cancelButtonText: t('common.cancel'),
+ type: 'warning'
+ }).then(async () => {
+ await delData(ids)
+ })
+ } else {
+ await delData(ids)
+ }
+ },
+ // 瀵煎嚭鍒楄〃
+ exportList: async (fileName: string) => {
+ tableObject.exportLoading = true
+ ElMessageBox.confirm(t('common.exportMessage'), t('common.confirmTitle'), {
+ confirmButtonText: t('common.ok'),
+ cancelButtonText: t('common.cancel'),
+ type: 'warning'
+ })
+ .then(async () => {
+ const res = await config?.exportListApi?.(unref(paramsObj) as unknown as T)
+ if (res) {
+ download.excel(res as unknown as Blob, fileName)
+ }
+ })
+ .finally(() => {
+ tableObject.exportLoading = false
+ })
+ }
+ }
+
+ config?.props && methods.setProps(config.props)
+
+ return {
+ register,
+ elTableRef,
+ tableObject,
+ methods,
+ // add by 鑺嬭壙锛氳繑鍥� tableMethods 灞炴�э紝鍜� tableObject 鏇寸粺涓�
+ tableMethods: methods
+ }
+}
--
Gitblit v1.8.0