resource-admin/src/components/pagination/index.tsx

import { Searchs } from '@/utils/searchs'
import { NDataTable, NPagination } from 'naive-ui'
import {
  PropType,
  computed,
  defineComponent,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch
} from 'vue'
import { useRoute } from 'vue-router'
import styles from './index.module.less'

export default defineComponent({
  name: 'table-container',
  props: {
    page: {
      type: Number,
      default: 1,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageTotal: {
      type: Number,
      default: 0
    },
    saveKey: {
      type: String,
      default: ''
    },
    sync: {
      type: Boolean,
      default: false
    },
    checkedRowKeysRef: {
      type: Object
    },
    pageSizes: {
      type: Array as PropType<any>,
      default: () => [10, 20, 30, 40]
    },
    pageSlot: {
      type: Number,
      default: 9
    }
  },
  emits: ['update:page', 'update:pageSize', 'list'],
  setup(props, { slots, attrs, emit }) {
    const route = useRoute()
    const state = reactive({
      pageInformation: null as any
    })

    const pageCount = ref(0)

    pageCount.value = Math.ceil(props.pageTotal / props.pageSize)

    // 当前页发生改变时的回调函数
    const onUpdatePage = (page: number) => {
      emit('update:page', page)
      emit('list')

      syncStore()
    }
    // 当前分页大小发生改变时的回调函数
    const onUpdatePageSize = (pageSize: number) => {
      emit('update:page', 1)
      emit('update:pageSize', pageSize)
      emit('list')

      syncStore()
    }

    onMounted(() => {
      if (props.sync) {
        const searchs = new Searchs(props.saveKey || route.path)
        const active = searchs.get(props.saveKey || route.path)
        state.pageInformation = active
        if (active && active.page) {
          for (const key in active.page) {
            if (active.page.hasOwnProperty(key) && ['page', 'pageSize'].includes(key)) {
              const item = active.page[key]
              const tempKey = `update:${key}` as any
              emit(tempKey, item)
            }
          }
        }
        if (props.saveKey) {
          searchs.update(route.path, undefined, 'bind')
        }
      }
      window.addEventListener('watchStorage', watchStorage)
    })

    onUnmounted(() => {
      window.removeEventListener('watchStorage', watchStorage)
    })

    watch(
      () => props.pageSize,
      () => {
        pageCount.value = Math.ceil(props.pageTotal / props.pageSize)
        syncStore()
      }
    )
    watch(
      () => props.page,
      () => {
        syncStore()
      }
    )
    watch(
      () => props.pageTotal,
      () => {
        pageCount.value = Math.ceil(props.pageTotal / props.pageSize)
        syncStore()
      }
    )

    let currentPage = computed({
      get() {
        return props.page
      },
      set(val) {
        emit('update:page', val)
      }
    })

    const syncStore = () => {
      if (props.sync) {
        const searchs = new Searchs(props.saveKey || route.path)
        searchs.update(
          {
            page: props.page,
            pageCount: pageCount.value,
            pageSize: props.pageSize,
            saveKey: props.saveKey
          },
          undefined,
          'page'
        )
      }
    }

    const watchStorage = () => {
      let page =
        state.pageInformation && state.pageInformation.page ? state.pageInformation.page : null
      currentPage = page && page.page ? page.page : 1
    }

    return () => (
      <NPagination
        style={{
          marginTop: '12px',
          justifyContent: 'flex-end'
        }}
        v-model:page={props.page}
        displayOrder={['quick-jumper', 'pages', 'size-picker']}
        pageCount={pageCount.value}
        showQuickJumper
        showSizePicker
        pageSize={props.pageSize}
        prefix={() => `共 ${props.pageTotal} 条`}
        pageSizes={props.pageSizes}
        onUpdatePage={onUpdatePage}
        onUpdatePageSize={onUpdatePageSize}
        pageSlot={props.pageSlot}
      ></NPagination>
    )
  }
})