完善账单页面，抽取公共页面组件
This commit is contained in:
@@ -1,10 +1,321 @@
|
||||
import {ReactNode} from 'react'
|
||||
'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'
|
||||
|
||||
export type BillsPageProps = {
|
||||
}
|
||||
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
|
||||
// ======================
|
||||
|
||||
export default async function BillsPage(props: BillsPageProps) {
|
||||
return (
|
||||
<main></main>
|
||||
<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 variant={`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 && (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user