diff --git a/src/App.vue b/src/App.vue index 28c9f49..ba1d04c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -58,4 +58,13 @@ watch( - + diff --git a/src/hooks/usePaging.ts b/src/hooks/usePaging.ts index 421f40c..faea5b3 100644 --- a/src/hooks/usePaging.ts +++ b/src/hooks/usePaging.ts @@ -1,72 +1,86 @@ -import { reactive, toRaw } from 'vue' +import { reactive, toRaw } from "vue"; // 分页钩子函数 interface Options { - page?: number - size?: number - fetchFun: (_arg: any) => Promise - params?: Record - firstLoading?: boolean + page?: number; + size?: number; + fetchFun: (_arg: any) => Promise; + params?: Record; + firstLoading?: boolean; +} + +interface Icolumn { + column: { label: String; width: Number; property: string }; } export function usePaging(options: Options) { - const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options - // 记录分页初始参数 - const paramsInit: Record = Object.assign({}, toRaw(params)) - // 分页数据 - const pager = reactive({ - page, - size, - loading: firstLoading, - count: 0, - lists: [] as any[], - extend: {} as Record, - calcWidth:(value:string)=>{ - let list = pager.lists.map(item => item[value]) - const maxLength = list.reduce((max, str) => { - return Math.max(max, str.length); - }, 0); - - return (maxLength*14+24) - } + const { + page = 1, + size = 15, + fetchFun, + params = {}, + firstLoading = false, + } = options; + // 记录分页初始参数 + const paramsInit: Record = Object.assign({}, toRaw(params)); + // 分页数据 + const pager = reactive({ + page, + size, + loading: firstLoading, + count: 0, + lists: [] as any[], + extend: {} as Record, + calcWidth: ({ column }: Icolumn) => { + let propWidth = column.label.length * 14 + 24; + let list = pager.lists.map( + (item: Object) => (item as any)[column.property] + ); + const maxLength = list.reduce((max, str) => { + return Math.max(max, str.length); + }, 0); + const columnWidth = maxLength * 14 + 24; + column.width = Math.max(columnWidth, propWidth); + return column.label; + }, + }); + // 请求分页接口 + const getLists = () => { + pager.loading = true; + return fetchFun({ + page_no: pager.page, + page_size: pager.size, + ...params, }) - // 请求分页接口 - const getLists = () => { - pager.loading = true - return fetchFun({ - page_no: pager.page, - page_size: pager.size, - ...params - }) - .then((res: any) => { - pager.count = res?.count - pager.lists = res?.lists - pager.extend = res?.extend - return Promise.resolve(res) - }) - .catch((err: any) => { - return Promise.reject(err) - }) - .finally(() => { - pager.loading = false - }) - } - // 重置为第一页 - const resetPage = () => { - pager.page = 1 - getLists() - } - // 重置参数 - const resetParams = () => { - Object.keys(paramsInit).forEach((item) => { - params[item] = paramsInit[item] - }) - getLists() - } - return { - pager, - getLists, - resetParams, - resetPage - } + .then((res: any) => { + pager.count = res?.count; + pager.lists = res?.lists; + pager.extend = res?.extend; + return Promise.resolve(res); + }) + .catch((err: any) => { + return Promise.reject(err); + }) + .finally(() => { + pager.loading = false; + }); + }; + // 重置为第一页 + const resetPage = () => { + pager.page = 1; + getLists(); + }; + // 重置参数 + const resetParams = () => { + Object.keys(paramsInit).forEach((item) => { + params[item] = paramsInit[item]; + }); + getLists(); + }; + return { + pager, + getLists, + resetParams, + resetPage, + }; } diff --git a/src/views/account/login.vue b/src/views/account/login.vue index 74b1aeb..f665ef7 100644 --- a/src/views/account/login.vue +++ b/src/views/account/login.vue @@ -6,29 +6,19 @@