106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<template>
|
|
<Table :columns="columns" :data="list" :height="tableH" :loading="loading" no-data-text="暂无数据"
|
|
class="link-table table-bottom-box" @on-selection-change="selectChange">
|
|
<template #loading>
|
|
<div class="table-spin-load">加载中</div>
|
|
</template>
|
|
<template v-for="slotName in tableSlotNames" :key="slotName" v-slot:[slotName]="slotProps">
|
|
<slot :name="slotName" v-bind="slotProps" />
|
|
</template>
|
|
</Table>
|
|
|
|
<div class="page-panel">
|
|
<div class="fl align-middle">
|
|
<slot :checkList="selectList" />
|
|
</div>
|
|
|
|
<Page class="page-box fr" :total="total" :model-value="page" :page-size="pageSize"
|
|
:page-size-opts="[10, 20, 30, 40]" show-total show-sizer placement="top" @on-change="onPageChange"
|
|
@on-page-size-change="onSizeChange" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, useSlots } from 'vue'
|
|
import Utils from '@/utils'
|
|
import { OperatorEnum } from '@/types'
|
|
|
|
interface Props {
|
|
dataApi: any
|
|
columns: any[]
|
|
tableHeight?: number
|
|
autoLoad?: boolean
|
|
dataFilter?: (resp: any) => any[]
|
|
formatResponse?: (res: any) => { total: number; list: any[] }
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
autoLoad: true,
|
|
formatResponse: (res: any) => ({ total: res.total, list: res.content })
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'selection-change', list: number[]): void
|
|
}>()
|
|
const slots = useSlots()
|
|
|
|
const tableH = ref(props.tableHeight ?? Utils.useTableHeight())
|
|
const tableSlotNames = computed(() => Object.keys(slots).filter(name => !['default', 'loading'].includes(name)))
|
|
|
|
const selectList = ref<number[]>([])
|
|
function selectChange(rows: any[]) {
|
|
selectList.value = rows.map((r: any) => r.id)
|
|
emit('selection-change', selectList.value)
|
|
}
|
|
|
|
const {
|
|
loading,
|
|
data: resp,
|
|
send: sendLoad,
|
|
page,
|
|
pageSize,
|
|
total,
|
|
reload
|
|
} = usePagination(
|
|
(current: number, size: number) =>
|
|
props.dataApi({ pageIndex: current, pageSize: size }),
|
|
{
|
|
total: res => props.formatResponse(res).total,
|
|
data: res => props.formatResponse(res).list,
|
|
initialPage: 1,
|
|
initialPageSize: 10,
|
|
immediate: props.autoLoad,
|
|
}
|
|
)
|
|
|
|
const list = computed(() => {
|
|
if (!resp.value) return []
|
|
return props.dataFilter ? props.dataFilter(resp.value) : resp.value
|
|
})
|
|
|
|
const onPageChange = (p: number) => (page.value = p)
|
|
const onSizeChange = (s: number) => (pageSize.value = s)
|
|
|
|
function refreshData() {
|
|
page.value = 1
|
|
reload()
|
|
}
|
|
|
|
function reloadData(type: OperatorEnum = OperatorEnum.sel) {
|
|
let p = page.value
|
|
const s = pageSize.value
|
|
|
|
if (type === OperatorEnum.add && p * s === total.value) p += 1
|
|
if (type === OperatorEnum.del && (p - 1) * s + 1 === total.value) p -= 1
|
|
if (type === OperatorEnum.sel) p = 1
|
|
if (p < 1) p = 1
|
|
|
|
page.value = p
|
|
sendLoad()
|
|
}
|
|
|
|
defineExpose({ list, refreshData, reloadData })
|
|
</script>
|
|
|
|
<style scoped></style>
|