319 lines
11 KiB
TypeScript
319 lines
11 KiB
TypeScript
'use client'
|
||
import {useEffect, useState} from 'react'
|
||
import {PageRecord} from '@/lib/api'
|
||
import {Resource} from '@/lib/models'
|
||
import {useStatus} from '@/lib/states'
|
||
import {listResourcePss} from '@/actions/resource'
|
||
import {Box, Eraser, Search, Timer} from 'lucide-react'
|
||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
|
||
import {Button} from '@/components/ui/button'
|
||
import DataTable from '@/components/data-table'
|
||
import {format, intlFormatDistance, isAfter, isEqual, parse} from 'date-fns'
|
||
import DatePicker from '@/components/date-picker'
|
||
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'
|
||
import {Input} from '@/components/ui/input'
|
||
import Page from '@/components/page'
|
||
import {useSearchParams} from 'next/navigation'
|
||
|
||
export type ResourcesPageProps = {}
|
||
|
||
export default function ResourcesPage(props: ResourcesPageProps) {
|
||
|
||
// ======================
|
||
// 查询
|
||
// ======================
|
||
|
||
const [status, setStatus] = useStatus()
|
||
const [data, setData] = useState<PageRecord<Resource>>({
|
||
page: 1,
|
||
size: 10,
|
||
total: 0,
|
||
list: [],
|
||
})
|
||
|
||
const refresh = async (page: number, size: number) => {
|
||
setStatus('load')
|
||
try {
|
||
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 resource_no = form.getValues('resource_no')
|
||
|
||
const res = await listResourcePss({
|
||
page, size,
|
||
type,
|
||
create_after,
|
||
create_before,
|
||
expire_after,
|
||
expire_before,
|
||
resource_no,
|
||
})
|
||
|
||
if (res.success) {
|
||
console.log(res.data)
|
||
setData(res.data)
|
||
setStatus('done')
|
||
}
|
||
else {
|
||
throw new Error('Failed to load resource pss')
|
||
}
|
||
}
|
||
catch (e) {
|
||
setStatus('fail')
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
refresh(1, 10).then()
|
||
}, [])
|
||
|
||
// ======================
|
||
// 筛选
|
||
// ======================
|
||
|
||
const filterSchema = zod.object({
|
||
resource_no: zod.string().optional().default(''),
|
||
type: zod.enum(['expire', 'quota', 'all']).default('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>
|
||
|
||
const params = useSearchParams()
|
||
let paramType = params.get('type')
|
||
if (paramType != 'all' && paramType != 'expire' && paramType != 'quota') {
|
||
paramType = 'all'
|
||
}
|
||
|
||
const form = useForm<FilterSchema>({
|
||
resolver: zodResolver(filterSchema),
|
||
defaultValues: {
|
||
resource_no: params.get('resource_no') || '',
|
||
type: paramType as 'expire' | 'quota' | 'all',
|
||
create_after: params.get('create_after') ? new Date(params.get('create_after')!) : undefined,
|
||
create_before: params.get('create_before') ? new Date(params.get('create_before')!) : undefined,
|
||
expire_after: params.get('expire_after') ? new Date(params.get('expire_after')!) : undefined,
|
||
expire_before: params.get('expire_before') ? new Date(params.get('expire_before')!) : undefined,
|
||
},
|
||
})
|
||
|
||
const onSubmit = async (value: FilterSchema) => {
|
||
await refresh(1, data.size)
|
||
}
|
||
|
||
// ======================
|
||
// render
|
||
// ======================
|
||
|
||
return (
|
||
<Page>
|
||
|
||
{/* 操作区 */}
|
||
<section className={`flex justify-between flex-wrap`}>
|
||
<div>
|
||
|
||
</div>
|
||
|
||
<Form form={form} onSubmit={onSubmit} className={`flex items-end gap-4 flex-wrap`}>
|
||
<FormField name={`resource_no`} label={<span className={`text-sm`}>套餐编号</span>}>
|
||
{({id, field}) => (
|
||
<Input {...field} id={id} className={`h-9`}/>
|
||
)}
|
||
</FormField>
|
||
<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>
|
||
<div className={`flex gap-4`}>
|
||
<Button className={`h-9`}>
|
||
<Search/>
|
||
<span>筛选</span>
|
||
</Button>
|
||
<Button theme={`outline`} className={`h-9`} onClick={() => form.reset({
|
||
type: 'all',
|
||
resource_no: '',
|
||
create_after: undefined,
|
||
create_before: undefined,
|
||
expire_after: undefined,
|
||
expire_before: undefined,
|
||
})}>
|
||
<Eraser/>
|
||
<span>重置</span>
|
||
</Button>
|
||
</div>
|
||
</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: 'resource_no', header: `套餐编号`,
|
||
},
|
||
{
|
||
accessorKey: 'type', header: `类型`, cell: ({row}) => (
|
||
<div className={`flex gap-2 items-center`}>
|
||
{row.original.pss.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.pss.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.pss.live / 60} 分钟
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: 'expire', header: `使用情况`, cell: ({row}) => (
|
||
<div className={`flex gap-1`}>
|
||
{row.original.pss.type === 1 ? (
|
||
<div className={`flex gap-1`}>
|
||
{isAfter(row.original.pss.expire, new Date())
|
||
? <span className={`text-green-500`}>正常</span>
|
||
: <span className={`text-red-500`}>过期</span>}
|
||
<span>|</span>
|
||
<span>今日限额：{row.original.pss.daily_used} / {row.original.pss.daily_limit}</span>
|
||
<span>|</span>
|
||
<span>{intlFormatDistance(row.original.pss.expire, new Date())} 到期</span>
|
||
</div>
|
||
) : row.original.pss.type === 2 ? (
|
||
<div className={`flex gap-1`}>
|
||
{row.original.pss.used < row.original.pss.quota
|
||
? <span className={`text-green-500`}>正常</span>
|
||
: <span className={`text-red-500`}>已用完</span>}
|
||
<span>|</span>
|
||
<span>用量统计：{row.original.pss.used} / {row.original.pss.quota}</span>
|
||
</div>
|
||
) : (
|
||
<span>-</span>
|
||
)}
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
accessorKey: 'daily_last', header: '最近使用时间', cell: ({row}) => {
|
||
return (
|
||
format(row.original.pss.daily_last, "yyyy-MM-dd") === "0001-01-01"
|
||
? '-'
|
||
: format(row.original.pss.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>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</Page>
|
||
)
|
||
}
|