完善资源列表查询行为，提供表格公共组件
This commit is contained in:
@@ -1,15 +1,39 @@
|
||||
'use client'
|
||||
import {ReactNode, useEffect, useState} from 'react'
|
||||
import {useEffect, useState} from 'react'
|
||||
import {PageRecord} from '@/lib/api'
|
||||
import {ResourcePss} from '@/lib/models'
|
||||
import {useStatus} from '@/lib/states'
|
||||
import {listResourcePss} from '@/actions/resource'
|
||||
import {Box, Eraser, Search, Timer, Trash2} from 'lucide-react'
|
||||
import {Pagination} from '@/components/ui/pagination'
|
||||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
|
||||
import {Button} from '@/components/ui/button'
|
||||
import DataTable from '@/components/DataTable'
|
||||
import {format, intlFormatDistance, isAfter, isEqual, parse} from 'date-fns'
|
||||
import DatePicker from '@/components/DatePicker'
|
||||
import {Form, FormField} from '@/components/ui/form'
|
||||
import {useForm} from 'react-hook-form'
|
||||
import zod from 'zod'
|
||||
import {zodResolver} from '@hookform/resolvers/zod'
|
||||
import {Label} from '@/components/ui/label'
|
||||
|
||||
const filterSchema = zod.object({
|
||||
type: zod.enum(['expire', 'quota', 'all']),
|
||||
create_after: zod.date().optional(),
|
||||
create_before: zod.date().optional(),
|
||||
expire_after: zod.date().optional(),
|
||||
expire_before: zod.date().optional(),
|
||||
})
|
||||
|
||||
type FilterSchema = zod.infer<typeof filterSchema>
|
||||
|
||||
export type ResourcesPageProps = {}
|
||||
|
||||
export default function ResourcesPage(props: ResourcesPageProps) {
|
||||
|
||||
// region 数据
|
||||
// ======================
|
||||
// 查询
|
||||
// ======================
|
||||
|
||||
const [status, setStatus] = useStatus()
|
||||
const [data, setData] = useState<PageRecord<ResourcePss>>({
|
||||
@@ -22,11 +46,23 @@ export default function ResourcesPage(props: ResourcesPageProps) {
|
||||
const refresh = async (page: number, size: number) => {
|
||||
setStatus('load')
|
||||
try {
|
||||
const res = await listResourcePss({page, size})
|
||||
setStatus('done')
|
||||
const type = {
|
||||
all: undefined,
|
||||
expire: 1,
|
||||
quota: 2,
|
||||
}[form.getValues('type')]
|
||||
const create_after = form.getValues('create_after')
|
||||
const create_before = form.getValues('create_before')
|
||||
const expire_after = form.getValues('expire_after')
|
||||
const expire_before = form.getValues('expire_before')
|
||||
|
||||
const res = await listResourcePss({
|
||||
page, size, type, create_after, create_before, expire_after, expire_before,
|
||||
})
|
||||
|
||||
if (res.success) {
|
||||
setData(res.data)
|
||||
setStatus('done')
|
||||
}
|
||||
else {
|
||||
throw new Error('Failed to load resource pss')
|
||||
@@ -41,12 +77,207 @@ export default function ResourcesPage(props: ResourcesPageProps) {
|
||||
refresh(1, 10).then()
|
||||
}, [])
|
||||
|
||||
// endregion
|
||||
// ======================
|
||||
// 筛选
|
||||
// ======================
|
||||
|
||||
const form = useForm<FilterSchema>({
|
||||
resolver: zodResolver(filterSchema),
|
||||
defaultValues: {
|
||||
type: 'all',
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = async (value: FilterSchema) => {
|
||||
console.log(value)
|
||||
await refresh(data.page, data.size)
|
||||
}
|
||||
|
||||
// ======================
|
||||
// render
|
||||
return (
|
||||
<main className={`flex-auto bg-white rounded-tl-xl`}>
|
||||
// ======================
|
||||
|
||||
return (
|
||||
<main className={`flex-auto bg-white rounded-tl-xl p-4 flex flex-col gap-4`}>
|
||||
|
||||
{/* 操作区 */}
|
||||
<section className={`flex justify-between flex-wrap`}>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
<Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4`}>
|
||||
<FormField name={`type`} label={<span className={`text-sm`}>类型</span>}>
|
||||
{({id, field}) => (
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger className={`w-24`}>
|
||||
<SelectValue placeholder={`选择套餐类型`}/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={`all`}>全部</SelectItem>
|
||||
<SelectItem value={`expire`}>包时</SelectItem>
|
||||
<SelectItem value={`quota`}>包量</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</FormField>
|
||||
<div className={`flex flex-col gap-2`}>
|
||||
<Label className={`text-sm`}>开通时间</Label>
|
||||
<div className={`flex items-center`}>
|
||||
<FormField name={`create_after`}>
|
||||
{({field}) => (
|
||||
<DatePicker
|
||||
{...field}
|
||||
className={`w-36`}
|
||||
placeholder={`开始时间`}
|
||||
format={`yyyy-MM-dd`}
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
<span className={`px-1`}>-</span>
|
||||
<FormField name={`create_before`}>
|
||||
{({field}) => (
|
||||
<DatePicker
|
||||
{...field}
|
||||
className={`w-36`}
|
||||
placeholder={`结束时间`}
|
||||
format={`yyyy-MM-dd`}
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`flex flex-col gap-2`}>
|
||||
<Label className={`text-sm`}>最后使用时间</Label>
|
||||
<div className={`flex items-center`}>
|
||||
<FormField name={`expire_after`}>
|
||||
{({field}) => (
|
||||
<DatePicker
|
||||
{...field}
|
||||
className={`w-36`}
|
||||
placeholder={`开始时间`}
|
||||
format={`yyyy-MM-dd`}
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
<span className={`px-1`}>-</span>
|
||||
<FormField name={`expire_before`}>
|
||||
{({field}) => (
|
||||
<DatePicker
|
||||
{...field}
|
||||
className={`w-36`}
|
||||
placeholder={`结束时间`}
|
||||
format={`yyyy-MM-dd`}
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
<Button className={`h-9`}>
|
||||
<Search/>
|
||||
<span>筛选</span>
|
||||
</Button>
|
||||
<Button variant={`outline`} className={`h-9`} onClick={() => form.reset()}>
|
||||
<Eraser/>
|
||||
<span>重置</span>
|
||||
</Button>
|
||||
</Form>
|
||||
</section>
|
||||
|
||||
{/* 数据表 */}
|
||||
<DataTable
|
||||
data={data.list}
|
||||
status={status}
|
||||
pagination={{
|
||||
total: data.total,
|
||||
page: data.page,
|
||||
size: data.size,
|
||||
onPageChange: async (page: number) => {
|
||||
await refresh(page, data.size)
|
||||
},
|
||||
onSizeChange: async (size: number) => {
|
||||
await refresh(data.page, size)
|
||||
},
|
||||
}}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: 'id', header: `编号`,
|
||||
},
|
||||
{
|
||||
accessorKey: 'type', header: `类型`, cell: ({row}) => (
|
||||
<div className={`flex gap-2 items-center`}>
|
||||
{row.original.type === 1 && (
|
||||
<div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
|
||||
<Timer size={20}/>
|
||||
<span>包时</span>
|
||||
</div>
|
||||
)}
|
||||
{row.original.type === 2 && (
|
||||
<div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
|
||||
<Box size={20}/>
|
||||
<span>包量</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'live', header: `IP 时效`, cell: ({row}) => (
|
||||
<span>
|
||||
{row.original.live / 60} 分钟
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
|
||||
<div className={`flex gap-1`}>
|
||||
{row.original.type === 1 ? (
|
||||
<div className={`flex gap-1`}>
|
||||
{isAfter(row.original.expire, new Date())
|
||||
? <span className={`text-green-500`}>正常</span>
|
||||
: <span className={`text-red-500`}>已过期</span>}
|
||||
<span>|</span>
|
||||
<span>今日限额：{row.original.daily_used} / {row.original.daily_limit}</span>
|
||||
<span>|</span>
|
||||
<span>{intlFormatDistance(row.original.expire, new Date())} 到期</span>
|
||||
</div>
|
||||
) : row.original.type === 2 ? (
|
||||
<div className={`flex gap-1`}>
|
||||
{row.original.used < row.original.quota
|
||||
? <span className={`text-green-500`}>正常</span>
|
||||
: <span className={`text-red-500`}>已用完</span>}
|
||||
<span>|</span>
|
||||
<span>用量统计：{row.original.used} / {row.original.quota}</span>
|
||||
</div>
|
||||
) : (
|
||||
<span>-</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
|
||||
return (
|
||||
isEqual(row.original.daily_last, parse('0001-01-01 08:05:43', 'yyyy-MM-dd HH:mm:ss', new Date()))
|
||||
? '-'
|
||||
: format(row.original.daily_last, 'yyyy-MM-dd HH:mm')
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at', header: '开通时间', cell: ({row}) => (
|
||||
format(row.getValue('created_at'), 'yyyy-MM-dd HH:mm')
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'action', header: `操作`, cell: (item) => (
|
||||
<div className={`flex gap-2`}>
|
||||
-
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user