|
@@ -0,0 +1,151 @@ |
|
|
|
|
|
import { useEffect, useState, useRef } from 'react'; |
|
|
|
|
|
import { DatePicker, Radio, Space, Tabs, Button, Table, Col, Row, Spin, Card } from 'antd'; |
|
|
|
|
|
import { PageContainer } from '@ant-design/pro-layout'; |
|
|
|
|
|
import styles from './index.css'; |
|
|
|
|
|
import moment from 'moment'; |
|
|
|
|
|
import api from './service'; |
|
|
|
|
|
import { nanoid } from 'nanoid'; |
|
|
|
|
|
const { TabPane } = Tabs; |
|
|
|
|
|
const { RangePicker } = DatePicker; |
|
|
|
|
|
|
|
|
|
|
|
const App = () => { |
|
|
|
|
|
const [tabPosition, setTabPosition] = useState('left'); |
|
|
|
|
|
const [tabIndex, setTabIndex] = useState(1); |
|
|
|
|
|
const [tableData, setTableData] = useState([]); |
|
|
|
|
|
const [timeRange, setTimeRange] = useState([ |
|
|
|
|
|
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 00:00:00')), |
|
|
|
|
|
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), |
|
|
|
|
|
]); //日期选择器 |
|
|
|
|
|
|
|
|
|
|
|
const [loading, setLoading] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
const columns = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '名称', |
|
|
|
|
|
dataIndex: 'name', |
|
|
|
|
|
width:100, |
|
|
|
|
|
hideInSearch: true, |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '金额', |
|
|
|
|
|
dataIndex: 'saleMoney', |
|
|
|
|
|
hideInSearch: true, |
|
|
|
|
|
}, |
|
|
|
|
|
// { |
|
|
|
|
|
// title: '销售金额', |
|
|
|
|
|
// dataIndex: 'saleMoney', |
|
|
|
|
|
// hideInSearch: true, |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// title: '实收金额', |
|
|
|
|
|
// dataIndex: 'realityMoney', |
|
|
|
|
|
// hideInSearch: true, |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// title: '优惠金额', |
|
|
|
|
|
// dataIndex: 'discountMoney', |
|
|
|
|
|
// hideInSearch: true, |
|
|
|
|
|
// }, |
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
initData(); |
|
|
|
|
|
}, [tabIndex]); |
|
|
|
|
|
|
|
|
|
|
|
const initData = async () => { |
|
|
|
|
|
setLoading(true); |
|
|
|
|
|
const startTime = moment(timeRange[0]).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
|
|
const endTime = moment(timeRange[1]).format('YYYY-MM-DD HH:mm:ss'); |
|
|
|
|
|
var data = await api.GetSalesReport({ "type": tabIndex, "startTime": startTime, "endTime": endTime }); |
|
|
|
|
|
data.forEach(item => { |
|
|
|
|
|
item.key = nanoid(); |
|
|
|
|
|
}) |
|
|
|
|
|
setTableData(data); |
|
|
|
|
|
setLoading(false); |
|
|
|
|
|
} |
|
|
|
|
|
return ( |
|
|
|
|
|
<> |
|
|
|
|
|
<PageContainer> |
|
|
|
|
|
<Card style={{ marginBottom: '30px' }}> |
|
|
|
|
|
<Row> |
|
|
|
|
|
<Col xs={24} sm={12} md={12} lg={12} xl={6} style={{ margin: '10px 0' }}> |
|
|
|
|
|
<div className={styles['echarts-card-choose']}> |
|
|
|
|
|
<div className={styles['echarts-card-choose-text']}> |
|
|
|
|
|
起止时间: |
|
|
|
|
|
</div> |
|
|
|
|
|
<RangePicker showTime style={{ width: '70%' }} className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { |
|
|
|
|
|
let tempDate = [ |
|
|
|
|
|
moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')), |
|
|
|
|
|
moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')), |
|
|
|
|
|
] |
|
|
|
|
|
setTimeRange(tempDate); |
|
|
|
|
|
}} /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</Col> |
|
|
|
|
|
<Col xs={24} sm={12} md={12} lg={12} xl={6} style={{ margin: '10px 0' }}> |
|
|
|
|
|
<Button className={styles['echarts-card-btn']} type="primary" style={{ width: '100px', marginRight: '10px' }} onClick={() => initData()}>查询</Button> |
|
|
|
|
|
<Button className={styles['echarts-card-btn']} style={{ width: '100px' }} onClick={() => { |
|
|
|
|
|
setTimeRange([ |
|
|
|
|
|
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 00:00:00')), |
|
|
|
|
|
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), |
|
|
|
|
|
]); |
|
|
|
|
|
}}>重置</Button> |
|
|
|
|
|
</Col> |
|
|
|
|
|
</Row> |
|
|
|
|
|
</Card> |
|
|
|
|
|
<Card> |
|
|
|
|
|
<Spin spinning={loading} delay={500}> |
|
|
|
|
|
|
|
|
|
|
|
<Tabs tabPosition={tabPosition} value={tabIndex} onChange={value => { setTabIndex(value); }} |
|
|
|
|
|
|
|
|
|
|
|
items={new Array(2).fill(null).map((_, i) => { |
|
|
|
|
|
const id = String(i + 1); |
|
|
|
|
|
return { |
|
|
|
|
|
label: id == 1 ? `银收总览` : `支付渠道`, |
|
|
|
|
|
key: id, |
|
|
|
|
|
children: <Table |
|
|
|
|
|
columns={columns} |
|
|
|
|
|
dataSource={tableData} />, |
|
|
|
|
|
}; |
|
|
|
|
|
})} |
|
|
|
|
|
|
|
|
|
|
|
/> |
|
|
|
|
|
</Spin> |
|
|
|
|
|
|
|
|
|
|
|
{/* <Tabs tabPosition={tabPosition} value={tabIndex} onChange={value => { setTabIndex(value); }}> |
|
|
|
|
|
<TabPane tab="分类统计" key={1}> |
|
|
|
|
|
{ |
|
|
|
|
|
tabIndex == 1 && <> |
|
|
|
|
|
<Space style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}> |
|
|
|
|
|
<div className={styles['tabs-title']}> |
|
|
|
|
|
分类统计 |
|
|
|
|
|
</div> |
|
|
|
|
|
</Space> |
|
|
|
|
|
<Table |
|
|
|
|
|
columns={columns} |
|
|
|
|
|
dataSource={tableData} /> |
|
|
|
|
|
</> |
|
|
|
|
|
} |
|
|
|
|
|
</TabPane>, |
|
|
|
|
|
<TabPane tab="单品统计" key={2}> |
|
|
|
|
|
{ |
|
|
|
|
|
tabIndex == 1 && <> |
|
|
|
|
|
<Space style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}> |
|
|
|
|
|
<div className={styles['tabs-title']}> |
|
|
|
|
|
单品统计 |
|
|
|
|
|
</div> |
|
|
|
|
|
</Space> |
|
|
|
|
|
<Table |
|
|
|
|
|
columns={columns} |
|
|
|
|
|
dataSource={tableData} /> |
|
|
|
|
|
</> |
|
|
|
|
|
} |
|
|
|
|
|
</TabPane> |
|
|
|
|
|
</Tabs> */} |
|
|
|
|
|
</Card> |
|
|
|
|
|
</PageContainer> |
|
|
|
|
|
</> |
|
|
|
|
|
); |
|
|
|
|
|
}; |
|
|
|
|
|
export default App; |