| 提交 | 用户 | 时间 | ||
| 314507 | 1 | import download from '@/utils/download' |
| H | 2 | import { Table, TableExpose } from '@/components/Table' |
| 3 | import { ElMessage, ElMessageBox, ElTable } from 'element-plus' | |
| 4 | import { computed, nextTick, reactive, ref, unref, watch } from 'vue' | |
| 5 | import type { TableProps } from '@/components/Table/src/types' | |
| 6 | ||
| 7 | import { TableSetPropsType } from '@/types/table' | |
| 8 | ||
| 9 | const { t } = useI18n() | |
| 10 | interface ResponseType<T = any> { | |
| 11 | list: T[] | |
| 12 | total?: number | |
| 13 | } | |
| 14 | ||
| 15 | interface UseTableConfig<T = any> { | |
| 16 | getListApi: (option: any) => Promise<T> | |
| 17 | delListApi?: (option: any) => Promise<T> | |
| 18 | exportListApi?: (option: any) => Promise<T> | |
| 19 | // 返回数据格式配置 | |
| 20 | response?: ResponseType | |
| 21 | // 默认传递的参数 | |
| 22 | defaultParams?: Recordable | |
| 23 | props?: TableProps | |
| 24 | } | |
| 25 | ||
| 26 | interface TableObject<T = any> { | |
| 27 | pageSize: number | |
| 28 | currentPage: number | |
| 29 | total: number | |
| 30 | tableList: T[] | |
| 31 | params: any | |
| 32 | loading: boolean | |
| 33 | exportLoading: boolean | |
| 34 | currentRow: Nullable<T> | |
| 35 | } | |
| 36 | ||
| 37 | export const useTable = <T = any>(config?: UseTableConfig<T>) => { | |
| 38 | const tableObject = reactive<TableObject<T>>({ | |
| 39 | // 页数 | |
| 40 | pageSize: 10, | |
| 41 | // 当前页 | |
| 42 | currentPage: 1, | |
| 43 | // 总条数 | |
| 44 | total: 10, | |
| 45 | // 表格数据 | |
| 46 | tableList: [], | |
| 47 | // AxiosConfig 配置 | |
| 48 | params: { | |
| 49 | ...(config?.defaultParams || {}) | |
| 50 | }, | |
| 51 | // 加载中 | |
| 52 | loading: true, | |
| 53 | // 导出加载中 | |
| 54 | exportLoading: false, | |
| 55 | // 当前行的数据 | |
| 56 | currentRow: null | |
| 57 | }) | |
| 58 | ||
| 59 | const paramsObj = computed(() => { | |
| 60 | return { | |
| 61 | ...tableObject.params, | |
| 62 | pageSize: tableObject.pageSize, | |
| 63 | pageNo: tableObject.currentPage | |
| 64 | } | |
| 65 | }) | |
| 66 | ||
| 67 | watch( | |
| 68 | () => tableObject.currentPage, | |
| 69 | () => { | |
| 70 | methods.getList() | |
| 71 | } | |
| 72 | ) | |
| 73 | ||
| 74 | watch( | |
| 75 | () => tableObject.pageSize, | |
| 76 | () => { | |
| 77 | // 当前页不为1时，修改页数后会导致多次调用getList方法 | |
| 78 | if (tableObject.currentPage === 1) { | |
| 79 | methods.getList() | |
| 80 | } else { | |
| 81 | tableObject.currentPage = 1 | |
| 82 | methods.getList() | |
| 83 | } | |
| 84 | } | |
| 85 | ) | |
| 86 | ||
| 87 | // Table实例 | |
| 88 | const tableRef = ref<typeof Table & TableExpose>() | |
| 89 | ||
| 90 | // ElTable实例 | |
| 91 | const elTableRef = ref<ComponentRef<typeof ElTable>>() | |
| 92 | ||
| 93 | const register = (ref: typeof Table & TableExpose, elRef: ComponentRef<typeof ElTable>) => { | |
| 94 | tableRef.value = ref | |
| 95 | elTableRef.value = elRef | |
| 96 | } | |
| 97 | ||
| 98 | const getTable = async () => { | |
| 99 | await nextTick() | |
| 100 | const table = unref(tableRef) | |
| 101 | if (!table) { | |
| 102 | console.error('The table is not registered. Please use the register method to register') | |
| 103 | } | |
| 104 | return table | |
| 105 | } | |
| 106 | ||
| 107 | const delData = async (ids: string | number | string[] | number[]) => { | |
| 108 | let idsLength = 1 | |
| 109 | if (ids instanceof Array) { | |
| 110 | idsLength = ids.length | |
| 111 | await Promise.all( | |
| 112 | ids.map(async (id: string | number) => { | |
| 113 | await (config?.delListApi && config?.delListApi(id)) | |
| 114 | }) | |
| 115 | ) | |
| 116 | } else { | |
| 117 | await (config?.delListApi && config?.delListApi(ids)) | |
| 118 | } | |
| 119 | ElMessage.success(t('common.delSuccess')) | |
| 120 | ||
| 121 | // 计算出临界点 | |
| 122 | tableObject.currentPage = | |
| 123 | tableObject.total % tableObject.pageSize === idsLength || tableObject.pageSize === 1 | |
| 124 | ? tableObject.currentPage > 1 | |
| 125 | ? tableObject.currentPage - 1 | |
| 126 | : tableObject.currentPage | |
| 127 | : tableObject.currentPage | |
| 128 | await methods.getList() | |
| 129 | } | |
| 130 | ||
| 131 | const methods = { | |
| 132 | getList: async () => { | |
| 133 | tableObject.loading = true | |
| 134 | const res = await config?.getListApi(unref(paramsObj)).finally(() => { | |
| 135 | tableObject.loading = false | |
| 136 | }) | |
| 137 | if (res) { | |
| 138 | tableObject.tableList = (res as unknown as ResponseType).list | |
| 139 | tableObject.total = (res as unknown as ResponseType).total ?? 0 | |
| 140 | } | |
| 141 | }, | |
| 142 | setProps: async (props: TableProps = {}) => { | |
| 143 | const table = await getTable() | |
| 144 | table?.setProps(props) | |
| 145 | }, | |
| 146 | setColumn: async (columnProps: TableSetPropsType[]) => { | |
| 147 | const table = await getTable() | |
| 148 | table?.setColumn(columnProps) | |
| 149 | }, | |
| 150 | getSelections: async () => { | |
| 151 | const table = await getTable() | |
| 152 | return (table?.selections || []) as T[] | |
| 153 | }, | |
| 154 | // 与Search组件结合 | |
| 155 | setSearchParams: (data: Recordable) => { | |
| 156 | tableObject.params = Object.assign(tableObject.params, { | |
| 157 | pageSize: tableObject.pageSize, | |
| 158 | pageNo: 1, | |
| 159 | ...data | |
| 160 | }) | |
| 161 | // 页码不等于1时更新页码重新获取数据，页码等于1时重新获取数据 | |
| 162 | if (tableObject.currentPage !== 1) { | |
| 163 | tableObject.currentPage = 1 | |
| 164 | } else { | |
| 165 | methods.getList() | |
| 166 | } | |
| 167 | }, | |
| 168 | // 删除数据 | |
| 169 | delList: async ( | |
| 170 | ids: string | number | string[] | number[], | |
| 171 | multiple: boolean, | |
| 172 | message = true | |
| 173 | ) => { | |
| 174 | const tableRef = await getTable() | |
| 175 | if (multiple) { | |
| 176 | if (!tableRef?.selections.length) { | |
| 177 | ElMessage.warning(t('common.delNoData')) | |
| 178 | return | |
| 179 | } | |
| 180 | } | |
| 181 | if (message) { | |
| 182 | ElMessageBox.confirm(t('common.delMessage'), t('common.confirmTitle'), { | |
| 183 | confirmButtonText: t('common.ok'), | |
| 184 | cancelButtonText: t('common.cancel'), | |
| 185 | type: 'warning' | |
| 186 | }).then(async () => { | |
| 187 | await delData(ids) | |
| 188 | }) | |
| 189 | } else { | |
| 190 | await delData(ids) | |
| 191 | } | |
| 192 | }, | |
| 193 | // 导出列表 | |
| 194 | exportList: async (fileName: string) => { | |
| 195 | tableObject.exportLoading = true | |
| 196 | ElMessageBox.confirm(t('common.exportMessage'), t('common.confirmTitle'), { | |
| 197 | confirmButtonText: t('common.ok'), | |
| 198 | cancelButtonText: t('common.cancel'), | |
| 199 | type: 'warning' | |
| 200 | }) | |
| 201 | .then(async () => { | |
| 202 | const res = await config?.exportListApi?.(unref(paramsObj) as unknown as T) | |
| 203 | if (res) { | |
| 204 | download.excel(res as unknown as Blob, fileName) | |
| 205 | } | |
| 206 | }) | |
| 207 | .finally(() => { | |
| 208 | tableObject.exportLoading = false | |
| 209 | }) | |
| 210 | } | |
| 211 | } | |
| 212 | ||
| 213 | config?.props && methods.setProps(config.props) | |
| 214 | ||
| 215 | return { | |
| 216 | register, | |
| 217 | elTableRef, | |
| 218 | tableObject, | |
| 219 | methods, | |
| 220 | // add by 芋艿：返回 tableMethods 属性，和 tableObject 更统一 | |
| 221 | tableMethods: methods | |
| 222 | } | |
| 223 | } | |
