322 lines
10 KiB
TypeScript
322 lines
10 KiB
TypeScript
'use client'
|
|
import {useEffect, useState} from 'react'
|
|
import {PageRecord} from '@/lib/api'
|
|
import {Bill} from '@/lib/models'
|
|
import {useStatus} from '@/lib/states'
|
|
import {listBills} from '@/actions/bill'
|
|
import {Search, Eraser, CreditCard, AlertCircle, CheckCircle} 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} 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 Page from '@/components/page'
|
|
import Link from 'next/link'
|
|
|
|
const filterSchema = zod.object({
|
|
type: zod.enum(['all', '0', '1', '2']).default('all'),
|
|
status: zod.enum(['all', '0', '1', '2']).default('all'),
|
|
create_after: zod.date().optional(),
|
|
create_before: zod.date().optional(),
|
|
})
|
|
|
|
type FilterSchema = zod.infer<typeof filterSchema>
|
|
|
|
export type BillsPageProps = {}
|
|
|
|
export default function BillsPage(props: BillsPageProps) {
|
|
|
|
// ======================
|
|
// 查询
|
|
// ======================
|
|
|
|
const [status, setStatus] = useStatus()
|
|
const [data, setData] = useState<PageRecord<Bill>>({
|
|
page: 1,
|
|
size: 10,
|
|
total: 0,
|
|
list: [],
|
|
})
|
|
|
|
const refresh = async (page: number, size: number) => {
|
|
setStatus('load')
|
|
try {
|
|
const typeValue = form.getValues('type')
|
|
const statusValue = form.getValues('status')
|
|
const type = typeValue === 'all' ? undefined : parseInt(typeValue)
|
|
const statusParam = statusValue === 'all' ? undefined : parseInt(statusValue)
|
|
const create_after = form.getValues('create_after')
|
|
const create_before = form.getValues('create_before')
|
|
|
|
const res = await listBills({
|
|
page, size, type, status: statusParam, create_after, create_before,
|
|
})
|
|
|
|
if (res.success) {
|
|
setData(res.data)
|
|
setStatus('done')
|
|
}
|
|
else {
|
|
throw new Error('Failed to load bills')
|
|
}
|
|
}
|
|
catch (e) {
|
|
setStatus('fail')
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
refresh(1, 10).then()
|
|
}, [])
|
|
|
|
// ======================
|
|
// 筛选
|
|
// ======================
|
|
|
|
const form = useForm<FilterSchema>({
|
|
resolver: zodResolver(filterSchema),
|
|
defaultValues: {
|
|
type: 'all',
|
|
status: 'all',
|
|
},
|
|
})
|
|
|
|
const onSubmit = async (value: FilterSchema) => {
|
|
console.log(value)
|
|
await refresh(1, data.size)
|
|
}
|
|
|
|
// 获取类型显示内容
|
|
const getBillTypeText = (type: number) => {
|
|
switch (type) {
|
|
case 1:
|
|
return '充值'
|
|
case 2:
|
|
return '消费'
|
|
case 3:
|
|
return '退款'
|
|
default:
|
|
return '未知'
|
|
}
|
|
}
|
|
|
|
// 获取状态显示内容
|
|
const getBillStatusText = (status: number) => {
|
|
switch (status) {
|
|
case 1:
|
|
return '待支付'
|
|
case 2:
|
|
return '已完成'
|
|
case 3:
|
|
return '已取消'
|
|
default:
|
|
return '未知'
|
|
}
|
|
}
|
|
|
|
// ======================
|
|
// render
|
|
// ======================
|
|
|
|
return (
|
|
<Page>
|
|
|
|
{/* 操作区 */}
|
|
<section className={`flex justify-between flex-wrap`}>
|
|
<div>
|
|
<h1 className="text-xl font-bold">账单管理</h1>
|
|
</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={`0`}>充值</SelectItem>
|
|
<SelectItem value={`1`}>消费</SelectItem>
|
|
<SelectItem value={`2`}>退款</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
)}
|
|
</FormField>
|
|
<FormField name={`status`} 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={`0`}>未完成</SelectItem>
|
|
<SelectItem value={`1`}>已完成</SelectItem>
|
|
<SelectItem value={`2`}>已作废</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>
|
|
<Button className={`h-9`} type="submit">
|
|
<Search/>
|
|
<span>筛选</span>
|
|
</Button>
|
|
<Button theme={`outline`} className={`h-9`} type="button" 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: 'bill_no', header: `账单编号`,
|
|
}, {
|
|
accessorKey: 'type', header: `类型`, cell: ({row}) => (
|
|
<div className={`flex gap-2 items-center`}>
|
|
{row.original.type === 0 && (
|
|
<div className={`flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md`}>
|
|
<CreditCard size={16}/>
|
|
<span>充值</span>
|
|
</div>
|
|
)}
|
|
{row.original.type === 1 && (
|
|
<div className={`flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md`}>
|
|
<CreditCard size={16}/>
|
|
<span>消费</span>
|
|
</div>
|
|
)}
|
|
{row.original.type === 2 && (
|
|
<div className={`flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md`}>
|
|
<CreditCard size={16}/>
|
|
<span>退款</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'info', header: `账单详情`, cell: ({row}) => (
|
|
<div className={`flex flex-col gap-1`}>
|
|
<span>{row.original.info}</span>
|
|
|
|
{row.original.type === 1 && row.original.trade.status === 1 && (
|
|
<Link
|
|
href={`/admin/resources?resource_no=${row.original.resource.resource_no}`}
|
|
className={`text-sm text-blue-500 hover:underline`}>
|
|
<span>
|
|
{row.original.resource.pss.type === 1 && `包时`}
|
|
{row.original.resource.pss.type === 2 && `包量`}
|
|
</span>
|
|
<span>-</span>
|
|
<span>
|
|
{row.original.resource.pss.live / 60 + `分钟`}
|
|
</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'status', header: `状态`, cell: ({row}) => (
|
|
<>
|
|
{row.original.status === 0 && (
|
|
<div className={`flex gap-1 items-center text-orange-500`}>
|
|
<AlertCircle size={16}/>
|
|
<span>未完成</span>
|
|
</div>
|
|
)}
|
|
{row.original.status === 1 && (
|
|
<div className={`flex gap-1 items-center text-green-500`}>
|
|
<CheckCircle size={16}/>
|
|
<span>已完成</span>
|
|
</div>
|
|
)}
|
|
{row.original.status === 2 && (
|
|
<div className={`flex gap-1 items-center text-gray-500`}>
|
|
<AlertCircle size={16}/>
|
|
<span>已作废</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'amount', header: `支付信息`, cell: ({row}) => (
|
|
<div className={`flex gap-1`}>
|
|
<span>
|
|
{!row.original.trade && '余额'}
|
|
{row.original.trade && row.original.trade.method === 1 && '支付宝'}
|
|
{row.original.trade && row.original.trade.method === 2 && '微信'}
|
|
</span>
|
|
<span className={
|
|
row.original.amount > 0 ? `text-green-400` : `text-orange-400`
|
|
}>￥{row.original.amount}</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (
|
|
format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm')
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'action', header: `操作`, cell: (item) => (
|
|
<div className={`flex gap-2`}>
|
|
-
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</Page>
|
|
)
|
|
}
|