128 lines
2.6 KiB
Vue
128 lines
2.6 KiB
Vue
<script setup lang="ts" generic="T extends { [key: string]: any;}">
|
|
const { list, columns, menus, refresh, defaultPageSizes = [10, 20, 30, 40] } = defineProps<{
|
|
defaultPageSizes?: number[]
|
|
list: T[]
|
|
pageTotal: number
|
|
columns: {
|
|
key: keyof T
|
|
label?: string
|
|
sortable?: boolean
|
|
}[]
|
|
menus?: (row: T) => any[][]
|
|
refresh?: () => Promise<any>
|
|
loading?: boolean
|
|
searchText?: string
|
|
error?: any
|
|
}>()
|
|
|
|
defineSlots<{
|
|
'selected': any
|
|
'filter': any
|
|
[k: string]: (scope: { row: T }) => any
|
|
}>()
|
|
|
|
const { query, selected, pageSize, pageIndex, sort } = defineModels<{
|
|
query: string
|
|
selected?: T[]
|
|
pageSize: number
|
|
pageIndex: number
|
|
sort?: {
|
|
clumn: keyof T
|
|
direction: 'asc' | 'desc'
|
|
}
|
|
}>()
|
|
|
|
const attrs = useAttrs()
|
|
|
|
onMounted(() => {
|
|
pageSize.value = defaultPageSizes[0]
|
|
pageIndex.value = 1
|
|
})
|
|
|
|
if (menus) {
|
|
// eslint-disable-next-line vue/no-mutating-props
|
|
columns.push({
|
|
label: '',
|
|
key: 'opt-actions',
|
|
})
|
|
}
|
|
|
|
const showColumns = ref<{ key: any; label?: string }[]>([...columns])
|
|
|
|
const selectedColumns: any = computed(() => columns.filter(c => showColumns.value.some(sc => sc.key === c.key)))
|
|
const slots = useSlots()
|
|
const invoices = [
|
|
{
|
|
invoice: 'INV001',
|
|
paymentStatus: 'Paid',
|
|
totalAmount: '$250.00',
|
|
paymentMethod: 'Credit Card',
|
|
},
|
|
{
|
|
invoice: 'INV002',
|
|
paymentStatus: 'Pending',
|
|
totalAmount: '$150.00',
|
|
paymentMethod: 'PayPal',
|
|
},
|
|
{
|
|
invoice: 'INV003',
|
|
paymentStatus: 'Unpaid',
|
|
totalAmount: '$350.00',
|
|
paymentMethod: 'Bank Transfer',
|
|
},
|
|
{
|
|
invoice: 'INV004',
|
|
paymentStatus: 'Paid',
|
|
totalAmount: '$450.00',
|
|
paymentMethod: 'Credit Card',
|
|
},
|
|
{
|
|
invoice: 'INV005',
|
|
paymentStatus: 'Paid',
|
|
totalAmount: '$550.00',
|
|
paymentMethod: 'PayPal',
|
|
},
|
|
{
|
|
invoice: 'INV006',
|
|
paymentStatus: 'Pending',
|
|
totalAmount: '$200.00',
|
|
paymentMethod: 'Bank Transfer',
|
|
},
|
|
{
|
|
invoice: 'INV007',
|
|
paymentStatus: 'Unpaid',
|
|
totalAmount: '$300.00',
|
|
paymentMethod: 'Credit Card',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead class="w-[100px]">
|
|
Invoice
|
|
</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Method</TableHead>
|
|
<TableHead class="text-right">
|
|
Amount
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell class="font-medium">
|
|
INV001
|
|
</TableCell>
|
|
<TableCell>Paid</TableCell>
|
|
<TableCell>Credit Card</TableCell>
|
|
<TableCell class="text-right">
|
|
$250.00
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</template>
|