95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { LIST_PAGE_SIZES } from '@/utils/table/tableConfig'
|
|
import DataTablePanel from './DataTablePanel.vue'
|
|
import FilterBlock from './FilterBlock.vue'
|
|
import ListToolbar from './ListToolbar.vue'
|
|
import BaseTable from '../base/BaseTable.vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
panelTitle: string
|
|
selectedCount: number
|
|
rows: any[]
|
|
rangeText: string
|
|
total: number
|
|
currentPage: number
|
|
pageSize: number
|
|
pageSizes?: number[]
|
|
showSummary?: boolean
|
|
summaryMethod?: (...args: any[]) => any
|
|
tableMaxHeight?: string | number
|
|
loading?: boolean
|
|
/** 追加到 .table-scroll 的类名（如合计行样式） */
|
|
tableScrollClass?: string
|
|
}>(),
|
|
{
|
|
pageSizes: () => [...LIST_PAGE_SIZES],
|
|
showSummary: false,
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
reset: []
|
|
search: []
|
|
'update:currentPage': [value: number]
|
|
'update:pageSize': [value: number]
|
|
sizeChange: []
|
|
selectionChange: [rows: any[]]
|
|
}>()
|
|
|
|
const currentPageModel = computed({
|
|
get: () => props.currentPage,
|
|
set: (value: number) => emit('update:currentPage', value)
|
|
})
|
|
|
|
const pageSizeModel = computed({
|
|
get: () => props.pageSize,
|
|
set: (value: number) => emit('update:pageSize', value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<DataTablePanel :title="panelTitle">
|
|
<FilterBlock :loading="loading" @reset="emit('reset')" @search="emit('search')">
|
|
<slot name="filters" />
|
|
</FilterBlock>
|
|
|
|
<ListToolbar :selected-count="selectedCount">
|
|
<slot name="toolbar" />
|
|
</ListToolbar>
|
|
|
|
<div class="table-scroll" :class="tableScrollClass">
|
|
<BaseTable
|
|
:data="rows"
|
|
:show-summary="showSummary"
|
|
:summary-method="summaryMethod"
|
|
:max-height="tableMaxHeight"
|
|
@selection-change="(rows: any[]) => emit('selectionChange', rows)"
|
|
>
|
|
<slot name="table-columns" />
|
|
</BaseTable>
|
|
</div>
|
|
|
|
<div class="list-pager">
|
|
<div class="list-pager-selected">
|
|
已选 <span class="sel-num">{{ selectedCount }}</span> 条
|
|
</div>
|
|
<span class="list-range">{{ rangeText }}</span>
|
|
<div class="list-pager-right">
|
|
<el-pagination
|
|
v-model:current-page="currentPageModel"
|
|
v-model:page-size="pageSizeModel"
|
|
:total="total"
|
|
layout="sizes, prev, pager, next"
|
|
:page-sizes="pageSizes"
|
|
prev-text="上一页"
|
|
next-text="下一页"
|
|
@size-change="emit('sizeChange')"
|
|
/>
|
|
<span class="pager-size-suffix">条</span>
|
|
</div>
|
|
</div>
|
|
</DataTablePanel>
|
|
</template>
|