wip: Table改版中
This commit is contained in:
kailong321200875
@@ -1,6 +1,6 @@
|
||||
import { Table, TableExpose, TableProps, TableSetProps } from '@/components/Table'
|
||||
import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { ref, reactive, watch, computed, unref, nextTick } from 'vue'
|
||||
import { ref, reactive, watch, computed, unref, nextTick, onMounted } from 'vue'
|
||||
import { get } from 'lodash-es'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
@@ -13,17 +13,28 @@ interface TableResponse<T = any> {
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
interface UseTableConfig<T = any> {
|
||||
getListApi: (option: any) => Promise<IResponse<TableResponse<T>>>
|
||||
delListApi?: (option: any) => Promise<IResponse>
|
||||
// 返回数据格式配置
|
||||
response: {
|
||||
list: string
|
||||
interface UseTableConfig {
|
||||
// 是否初始化请求一次
|
||||
immediate?: boolean
|
||||
// 获取数据字段映射
|
||||
props?: {
|
||||
list?: string
|
||||
total?: string
|
||||
}
|
||||
fetchDataApi: () => Promise<{
|
||||
list: any[]
|
||||
total: number
|
||||
}>
|
||||
// getListApi: (option: any) => Promise<IResponse<TableResponse<T>>>
|
||||
// delListApi?: (option: any) => Promise<IResponse>
|
||||
// 返回数据格式配置
|
||||
// response: {
|
||||
// list: string
|
||||
// total?: string
|
||||
// }
|
||||
// 默认传递的参数
|
||||
defaultParams?: Recordable
|
||||
props?: TableProps
|
||||
// defaultParams?: Recordable
|
||||
// props?: TableProps
|
||||
}
|
||||
|
||||
interface TableObject<T = any> {
|
||||
@@ -36,8 +47,16 @@ interface TableObject<T = any> {
|
||||
currentRow: Nullable<T>
|
||||
}
|
||||
|
||||
export const useTable = <T = any>(config?: UseTableConfig<T>) => {
|
||||
const tableObject = reactive<TableObject<T>>({
|
||||
export const useTable = (config: UseTableConfig) => {
|
||||
const { immediate = true } = config
|
||||
|
||||
const loading = ref(false)
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const dataList = ref<any[]>([])
|
||||
|
||||
const tableObject = reactive<TableObject>({
|
||||
// 页数
|
||||
pageSize: 10,
|
||||
// 当前页
|
||||
@@ -48,7 +67,7 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
|
||||
list: [],
|
||||
// AxiosConfig 配置
|
||||
params: {
|
||||
...(config?.defaultParams || {})
|
||||
// ...(config?.defaultParams || {})
|
||||
},
|
||||
// 加载中
|
||||
loading: true,
|
||||
@@ -64,25 +83,31 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => tableObject.currentPage,
|
||||
() => {
|
||||
// watch(
|
||||
// () => tableObject.currentPage,
|
||||
// () => {
|
||||
// methods.getList()
|
||||
// }
|
||||
// )
|
||||
|
||||
// watch(
|
||||
// () => tableObject.pageSize,
|
||||
// () => {
|
||||
// // 当前页不为1时，修改页数后会导致多次调用getList方法
|
||||
// if (tableObject.currentPage === 1) {
|
||||
// methods.getList()
|
||||
// } else {
|
||||
// tableObject.currentPage = 1
|
||||
// methods.getList()
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
|
||||
onMounted(() => {
|
||||
if (immediate) {
|
||||
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>()
|
||||
@@ -104,91 +129,108 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
|
||||
return table
|
||||
}
|
||||
|
||||
const delData = async (ids: string[] | number[]) => {
|
||||
const res = await (config?.delListApi && config?.delListApi(ids))
|
||||
if (res) {
|
||||
ElMessage.success(t('common.delSuccess'))
|
||||
// const delData = async (ids: string[] | number[]) => {
|
||||
// const res = await (config?.delListApi && config?.delListApi(ids))
|
||||
// if (res) {
|
||||
// ElMessage.success(t('common.delSuccess'))
|
||||
|
||||
// 计算出临界点
|
||||
const currentPage =
|
||||
tableObject.total % tableObject.pageSize === ids.length || tableObject.pageSize === 1
|
||||
? tableObject.currentPage > 1
|
||||
? tableObject.currentPage - 1
|
||||
: tableObject.currentPage
|
||||
: tableObject.currentPage
|
||||
// // 计算出临界点
|
||||
// const currentPage =
|
||||
// tableObject.total % tableObject.pageSize === ids.length || tableObject.pageSize === 1
|
||||
// ? tableObject.currentPage > 1
|
||||
// ? tableObject.currentPage - 1
|
||||
// : tableObject.currentPage
|
||||
// : tableObject.currentPage
|
||||
|
||||
tableObject.currentPage = currentPage
|
||||
methods.getList()
|
||||
}
|
||||
}
|
||||
// tableObject.currentPage = currentPage
|
||||
// methods.getList()
|
||||
// }
|
||||
// }
|
||||
|
||||
const methods = {
|
||||
getList: async () => {
|
||||
tableObject.loading = true
|
||||
const res = await config?.getListApi(unref(paramsObj)).finally(() => {
|
||||
tableObject.loading = false
|
||||
})
|
||||
if (res) {
|
||||
tableObject.list = get(res.data || {}, config?.response.list as string)
|
||||
tableObject.total = get(res.data || {}, config?.response?.total as string) || 0
|
||||
}
|
||||
},
|
||||
setProps: async (props: TableProps = {}) => {
|
||||
const table = await getTable()
|
||||
table?.setProps(props)
|
||||
},
|
||||
setColumn: async (columnProps: TableSetProps[]) => {
|
||||
const table = await getTable()
|
||||
table?.setColumn(columnProps)
|
||||
},
|
||||
getSelections: async () => {
|
||||
const table = await getTable()
|
||||
return (table?.selections || []) as T[]
|
||||
},
|
||||
// 与Search组件结合
|
||||
setSearchParams: (data: Recordable) => {
|
||||
tableObject.currentPage = 1
|
||||
tableObject.params = Object.assign(tableObject.params, {
|
||||
pageSize: tableObject.pageSize,
|
||||
pageIndex: tableObject.currentPage,
|
||||
...data
|
||||
})
|
||||
methods.getList()
|
||||
},
|
||||
// 删除数据
|
||||
delList: async (ids: string[] | number[], multiple: boolean, message = true) => {
|
||||
const tableRef = await getTable()
|
||||
if (multiple) {
|
||||
if (!tableRef?.selections.length) {
|
||||
ElMessage.warning(t('common.delNoData'))
|
||||
return
|
||||
}
|
||||
} else {
|
||||
if (!tableObject.currentRow) {
|
||||
ElMessage.warning(t('common.delNoData'))
|
||||
return
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await config?.fetchDataApi()
|
||||
console.log('fetchDataApi res', res)
|
||||
if (res) {
|
||||
dataList.value = res.list
|
||||
total.value = res.total
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('fetchDataApi error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
if (message) {
|
||||
ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
|
||||
confirmButtonText: t('common.delOk'),
|
||||
cancelButtonText: t('common.delCancel'),
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
await delData(ids)
|
||||
})
|
||||
} else {
|
||||
await delData(ids)
|
||||
}
|
||||
// const res = await config?.getListApi(unref(paramsObj)).finally(() => {
|
||||
// tableObject.loading = false
|
||||
// })
|
||||
// if (res) {
|
||||
// tableObject.list = get(res.data || {}, config?.response.list as string)
|
||||
// tableObject.total = get(res.data || {}, config?.response?.total as string) || 0
|
||||
// }
|
||||
}
|
||||
// setProps: async (props: TableProps = {}) => {
|
||||
// const table = await getTable()
|
||||
// table?.setProps(props)
|
||||
// },
|
||||
// setColumn: async (columnProps: TableSetProps[]) => {
|
||||
// const table = await getTable()
|
||||
// table?.setColumn(columnProps)
|
||||
// },
|
||||
// getSelections: async () => {
|
||||
// const table = await getTable()
|
||||
// return (table?.selections || []) as T[]
|
||||
// },
|
||||
// // 与Search组件结合
|
||||
// setSearchParams: (data: Recordable) => {
|
||||
// tableObject.currentPage = 1
|
||||
// tableObject.params = Object.assign(tableObject.params, {
|
||||
// pageSize: tableObject.pageSize,
|
||||
// pageIndex: tableObject.currentPage,
|
||||
// ...data
|
||||
// })
|
||||
// methods.getList()
|
||||
// },
|
||||
// // 删除数据
|
||||
// delList: async (ids: string[] | number[], multiple: boolean, message = true) => {
|
||||
// const tableRef = await getTable()
|
||||
// if (multiple) {
|
||||
// if (!tableRef?.selections.length) {
|
||||
// ElMessage.warning(t('common.delNoData'))
|
||||
// return
|
||||
// }
|
||||
// } else {
|
||||
// if (!tableObject.currentRow) {
|
||||
// ElMessage.warning(t('common.delNoData'))
|
||||
// return
|
||||
// }
|
||||
// }
|
||||
// if (message) {
|
||||
// ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
|
||||
// confirmButtonText: t('common.delOk'),
|
||||
// cancelButtonText: t('common.delCancel'),
|
||||
// type: 'warning'
|
||||
// }).then(async () => {
|
||||
// await delData(ids)
|
||||
// })
|
||||
// } else {
|
||||
// await delData(ids)
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
config?.props && methods.setProps(config.props)
|
||||
|
||||
return {
|
||||
register,
|
||||
tableRegister: register,
|
||||
elTableRef,
|
||||
tableObject,
|
||||
methods
|
||||
methods,
|
||||
tableState: {
|
||||
pageIndex,
|
||||
pageSize,
|
||||
total,
|
||||
dataList,
|
||||
loading
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user