56 lines
2.4 KiB
React
56 lines
2.4 KiB
React
import { useState } from 'react';
|
|
import { Button, Field, Input, Select, Tabs } from '../components/ui.jsx';
|
|
import { Icon, PageTitle, Toolbar, Panel, ApiNotice, SimpleTable } from '../components/layout.jsx';
|
|
|
|
export function RechargeRecordsPage({ rechargeRows, apiLoading, apiError, refreshApi }) {
|
|
const [activeTab, setActiveTab] = useState('customer');
|
|
const visibleRows = rechargeRows.filter((row) => row.type === activeTab);
|
|
const ownerLabel = activeTab === 'customer' ? '客户' : '供应商';
|
|
const recordTable = (
|
|
<section className="content-grid">
|
|
<Panel title={`${ownerLabel}充值记录列表`} className="wide-panel">
|
|
<SimpleTable loading={apiLoading} rows={visibleRows} columns={[
|
|
{ key: 'id', label: '记录 ID', width: '118px', className: 'table-cell-compact' },
|
|
{ key: 'owner', label: ownerLabel, width: '160px', className: 'table-cell-compact' },
|
|
{ key: 'amount', label: '充值金额' },
|
|
{ key: 'beforeBalance', label: '充值前余额' },
|
|
{ key: 'afterBalance', label: '充值后余额' },
|
|
{ key: 'remark', label: '备注' },
|
|
{ key: 'operator', label: '操作人' },
|
|
{ key: 'time', label: '充值时间' },
|
|
{ key: 'status', label: '状态', status: true },
|
|
]} />
|
|
</Panel>
|
|
</section>
|
|
);
|
|
return (
|
|
<>
|
|
<PageTitle
|
|
title="充值记录"
|
|
desc="记录客户和供应商充值金额、充值前后余额、备注、操作人和充值时间。"
|
|
actions={<Button icon={<Icon type="export" />} variant="outline">导出记录</Button>}
|
|
/>
|
|
<ApiNotice loading={apiLoading} error={apiError} onRetry={refreshApi} />
|
|
<Toolbar>
|
|
<Field label={`${ownerLabel}名称`}><Input placeholder={`搜索${ownerLabel}名称`} /></Field>
|
|
<Field label="状态">
|
|
<Select defaultValue="all">
|
|
<option value="all">全部状态</option>
|
|
<option>成功</option>
|
|
<option>失败</option>
|
|
</Select>
|
|
</Field>
|
|
<Button icon={<Icon type="search" />}>查询</Button>
|
|
</Toolbar>
|
|
<Tabs
|
|
value={activeTab}
|
|
onChange={setActiveTab}
|
|
tabs={[
|
|
{ value: 'customer', label: '客户充值', content: recordTable },
|
|
{ value: 'vendor', label: '供应商充值', content: recordTable },
|
|
]}
|
|
/>
|
|
</>
|
|
);
|
|
}
|