vue3-help/dist/hooks/usePagination.js

Vue3 帮助工程

import{computed,ref}from"vue";import utils from"../utils";const defaultOptions={api:()=>new Promise(e=>{e(!0)}),initParams:{},pageSizeParam:"size",pageSize:10,pageNumParam:"page",dataListName:"data",dataItemDeal:e=>e,dataFilter:e=>e,primaryKey:"id",autoCacheNextPage:!0,cacheNextPageAtFirst:!0,autoCacheImg:!0},usePagination=e=>{const a=Object.assign({},defaultOptions,e),t=ref([]);let i=1;const n=ref(!1),u=ref(!1),r=computed(()=>u.value?"loading":n.value?"no-more":"more");let l={};const o=(e,a)=>{l[e]=a},s=e=>l[e];let m=ref(0);const c=e=>{e.length>0&&e[0][a.primaryKey]&&(e=e.filter((t,i)=>e.findIndex(e=>e[a.primaryKey]===t[a.primaryKey])===i)),t.value=e},p=(e={})=>{if(!a.autoCacheNextPage)return;const t=i;o(t,null),m.value=0;const n=Object.assign({},a.initParams,e);n[a.pageSizeParam]=a.pageSize,n[a.pageNumParam]=t,a.api(n).then(e=>{o(t,g(e)),e?.total&&(m.value=Number(e?.total)),e?.count&&(m.value=Number(e?.count))})};a.cacheNextPageAtFirst&&p();const g=e=>{let t="self"===a.dataListName?e:e[a.dataListName];return t?(t=t.map(e=>a.dataItemDeal(e)),t=t.filter(e=>a.dataFilter(e)),t):(console.error("数据列表字段名错误",e,a),!1)};return{totalNum:m,joinHead:(e={})=>{const i=Object.assign({},a.initParams,e);return i[a.pageSizeParam]=a.pageSize,i[a.pageNumParam]=1,a.api(i).then(e=>{const a=g(e);!1!==a&&c(a.concat(t.value))}),Object.assign({},a.initParams,i)},nextPage:(e=!1,r=null)=>(e&&(i=1,o(i,null),n.value=!1,p(r)),new Promise((l,o)=>{if(n.value||u.value)return l(!1);const f=Object.assign({},a.initParams,r);f[a.pageSizeParam]=a.pageSize,f[a.pageNumParam]=i,u.value=!0,(e=>new Promise(async(t,n)=>{if(a.autoCacheNextPage){const e=i;if(await utils.waitAlive(()=>s(e),.5))return t(s(e))}a.api(e).then(e=>{t(g(e))}).catch(e=>{n(e)})}))(f).then(u=>{if(!1===u)return o(!1);u?.total&&(m.value=Number(u?.total)),u?.count&&(m.value=Number(u?.count)),u.length<a.pageSize?n.value=!0:(i++,p(r)),c(e?u:t.value.concat(u)),l(!0)}).finally(()=>{u.value=!1})})),updateItem:(e,i=!1)=>{if(!e)return!1;const n={fetchFun:e?.fetchFun?e?.fetchFun:t=>t[a.primaryKey]===e[a.primaryKey],updateFun:e?.updateFun?e?.updateFun:()=>e},u=t.value.findIndex(e=>n.fetchFun(e));if(-1!==u){const e=i?null:n.updateFun(t.value[u]);e?t.value.splice(u,1,e):t.value.splice(u,1)}return!0},fullList:t,isComplete:n,loadStatus:r}};export default usePagination;