@@ -570,6 +570,42 @@ export async function getInitialState() { | |||
component: './order/ExOrder', | |||
access: 'k32', | |||
}, | |||
{ | |||
name: '营销报表', | |||
path: '/order/order-market-report', | |||
component: './order/order-market-report', | |||
access: 'k31', | |||
}, | |||
{ | |||
name: '订单报表', | |||
path: '/order/order-report', | |||
component: './order/order-report', | |||
access: 'k31', | |||
}, | |||
{ | |||
name: '订单报表详情', | |||
path: '/order/order-report/order-report-detail', | |||
component: './order/order-report-detail', | |||
access: 'k31', | |||
}, | |||
{ | |||
name: '营收报表', | |||
path: '/order/order-revenue-statement', | |||
component: './order/order-revenue-statement', | |||
access: 'k31', | |||
}, | |||
{ | |||
name: '产品报表', | |||
path: '/order/order-product-report', | |||
component: './order/order-product-report', | |||
access: 'k31', | |||
}, | |||
{ | |||
name: '会员报表', | |||
path: '/order/order-member-statement', | |||
component: './order/order-member-statement', | |||
access: 'k31', | |||
}, | |||
{ | |||
name: '销售成本分析', | |||
path: '/order/cost-of-sales', | |||
@@ -1,6 +1,6 @@ | |||
import React, { useState, useEffect } from 'react'; | |||
import { PageContainer } from '@ant-design/pro-layout'; | |||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd'; | |||
import styles from './index.less'; | |||
const { RangePicker } = DatePicker; | |||
import costSalesAPI from "./service"; | |||
@@ -144,6 +144,17 @@ export default function Index() { | |||
} | |||
} | |||
//重置搜索条件 | |||
const onResetSearch = () => { | |||
setGoodsIdArray([]); | |||
setStoreIdArray([]); | |||
setGoodsTypeArray([]); | |||
setTimeRange([ | |||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | |||
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | |||
]); | |||
} | |||
useEffect(() => { | |||
onQueryReportSalescost(); | |||
onQueryStoreList(); | |||
@@ -155,9 +166,14 @@ export default function Index() { | |||
<PageContainer> | |||
{showLoading ? <LoadingCard></LoadingCard> : null} | |||
<Card className={styles['data-search-card']}> | |||
<div className={styles['data-search-box']}> | |||
<div className={styles['data-search-left']}> | |||
<Row gutter={20} justify="space-between"> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
门店 | |||
</div> | |||
<Select | |||
className={styles['data-search-sufixx']} | |||
value={storeIdArray} | |||
showSearch | |||
mode="tags" | |||
size="middle" | |||
@@ -165,73 +181,80 @@ export default function Index() { | |||
placeholder="请选择门店" | |||
onChange={(values) => setStoreIdArray(values)} | |||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||
style={{ | |||
width: '300px', | |||
marginRight: '50px' | |||
}} | |||
> | |||
{ | |||
storeSelect.map( (item) => { | |||
storeSelect.map((item) => { | |||
return ( | |||
<Option key={item.key}>{item.title}</Option> | |||
) | |||
}) | |||
} | |||
</Select> | |||
</Col> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
商品 | |||
</div> | |||
<Select | |||
className={styles['data-search-sufixx']} | |||
showSearch | |||
mode="tags" | |||
size="middle" | |||
allowClear | |||
placeholder="请选择商品" | |||
value={goodsIdArray} | |||
onChange={(values) => setGoodsIdArray(values)} | |||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||
style={{ | |||
width: '300px', | |||
marginRight: '50px' | |||
}} | |||
> | |||
{ | |||
goodsIdSelect.map( (item, index) => { | |||
goodsIdSelect.map((item, index) => { | |||
return ( | |||
<Option key={item.id}>{item.name}</Option> | |||
) | |||
}) | |||
} | |||
</Select> | |||
</Col> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
商品类别 | |||
</div> | |||
<Select | |||
className={styles['data-search-sufixx']} | |||
showSearch | |||
mode="tags" | |||
size="middle" | |||
allowClear | |||
placeholder="请选择商品类别" | |||
value={goodsTypeArray} | |||
onChange={(values) => setGoodsTypeArray(values)} | |||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||
style={{ | |||
width: '300px', | |||
marginRight: '50px' | |||
}} | |||
> | |||
{ | |||
goodsTypeSelect.map( (item) => { | |||
goodsTypeSelect.map((item) => { | |||
return ( | |||
<Option key={item.id}>{item.name}</Option> | |||
) | |||
}) | |||
} | |||
</Select> | |||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | |||
</Col> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
起始时间 | |||
</div> | |||
<RangePicker size='middle' className={styles['data-search-sufixx']} 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> | |||
<div className={styles['data-search-btns']}> | |||
<Button className={styles['search-btn-item']}>重置</Button> | |||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||
</div> | |||
</Col> | |||
</Row> | |||
<div className={styles['data-search-btns']}> | |||
<Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button> | |||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||
</div> | |||
</Card> | |||
<Card className={styles['table-card']}> | |||
@@ -33,4 +33,30 @@ | |||
bottom: 0; | |||
z-index: 999; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
} | |||
.data-search-item { | |||
display: flex; | |||
align-items: center; | |||
margin-bottom: 10px; | |||
} | |||
.data-search-input { | |||
width: 100%; | |||
} | |||
.data-search-prefix { | |||
text-align-last: justify; | |||
width: 60px; | |||
flex-shrink: 0; | |||
margin-right: 5px; | |||
} | |||
.data-search-sufixx { | |||
flex-grow: 1; | |||
} | |||
.data-search-btns { | |||
display: flex; | |||
justify-content: flex-end; | |||
} |
@@ -1,6 +1,6 @@ | |||
import React, { useState, useEffect } from 'react'; | |||
import { PageContainer } from '@ant-design/pro-layout'; | |||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd'; | |||
import styles from './index.less'; | |||
const { RangePicker } = DatePicker; | |||
import costSalesAPI from "./service"; | |||
@@ -75,7 +75,7 @@ export default function Index() { | |||
/** | |||
* 查询店铺列表 | |||
*/ | |||
const onQueryStoreList = async () => { | |||
const onQueryStoreList = async () => { | |||
setShowLoading(true); | |||
const response = await costSalesAPI.gettree({}); | |||
setShowLoading(false); | |||
@@ -92,6 +92,15 @@ export default function Index() { | |||
} | |||
} | |||
//重置搜索条件 | |||
const onResetSearch = () => { | |||
setStoreIdArray([]); | |||
setTimeRange([ | |||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | |||
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | |||
]); | |||
} | |||
useEffect(() => { | |||
onQueryReportSalescost(); | |||
onQueryStoreList(); | |||
@@ -101,9 +110,14 @@ export default function Index() { | |||
<PageContainer> | |||
{showLoading ? <LoadingCard></LoadingCard> : null} | |||
<Card className={styles['data-search-card']}> | |||
<div className={styles['data-search-box']}> | |||
<div className={styles['data-search-left']}> | |||
<Select | |||
<Row gutter={20} justify="start"> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={8} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
门店 | |||
</div> | |||
<Select | |||
value={storeIdArray} | |||
className={styles['data-search-sufixx']} | |||
showSearch | |||
mode="tags" | |||
size="middle" | |||
@@ -111,32 +125,33 @@ export default function Index() { | |||
placeholder="请选择门店" | |||
onChange={(values) => setStoreIdArray(values)} | |||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||
style={{ | |||
width: '300px', | |||
marginRight: '50px' | |||
}} | |||
> | |||
{ | |||
storeSelect.map( (item) => { | |||
storeSelect.map((item) => { | |||
return ( | |||
<Option key={item.key}>{item.title}</Option> | |||
) | |||
}) | |||
} | |||
</Select> | |||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | |||
</Col> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={8} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
起始时间 | |||
</div> | |||
<RangePicker size='middle' className={styles['data-search-sufixx']} 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> | |||
<div className={styles['data-search-btns']}> | |||
<Button className={styles['search-btn-item']}>重置</Button> | |||
<Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button> | |||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||
</div> | |||
</div> | |||
</Row> | |||
</Card> | |||
<Card className={styles['table-card']}> | |||
<Table dataSource={costSalesData} columns={columns} pagination={false} /> | |||
@@ -33,4 +33,31 @@ | |||
bottom: 0; | |||
z-index: 999; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
} | |||
.data-search-item { | |||
display: flex; | |||
align-items: center; | |||
margin-bottom: 10px; | |||
} | |||
.data-search-input { | |||
width: 100%; | |||
} | |||
.data-search-prefix { | |||
text-align-last: justify; | |||
width: 60px; | |||
flex-shrink: 0; | |||
margin-right: 5px; | |||
} | |||
.data-search-sufixx { | |||
flex-grow: 1; | |||
} | |||
.data-search-btns { | |||
margin-left: auto; | |||
display: flex; | |||
justify-content: flex-end; | |||
} |
@@ -1,6 +1,6 @@ | |||
import React, { useState, useEffect } from 'react'; | |||
import { PageContainer } from '@ant-design/pro-layout'; | |||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message, Col, Row } from 'antd'; | |||
import styles from './index.less'; | |||
const { RangePicker } = DatePicker; | |||
import costSalesAPI from "./service"; | |||
@@ -129,6 +129,17 @@ export default function Index() { | |||
} | |||
} | |||
//重置搜索条件 | |||
const onResetSearch = () => { | |||
setGoodsIdArray([]); | |||
setStoreIdArray([]); | |||
setGoodsTypeArray([]); | |||
setTimeRange([ | |||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | |||
moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | |||
]); | |||
} | |||
useEffect(() => { | |||
onQueryReportSalescost(); | |||
onQueryStoreList(); | |||
@@ -139,9 +150,14 @@ export default function Index() { | |||
<PageContainer> | |||
{showLoading ? <LoadingCard></LoadingCard> : null} | |||
<Card className={styles['data-search-card']}> | |||
<div className={styles['data-search-box']}> | |||
<div className={styles['data-search-left']}> | |||
<Select | |||
<Row gutter={20} justify="space-between"> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
门店 | |||
</div> | |||
<Select | |||
className={styles['data-search-sufixx']} | |||
value={storeIdArray} | |||
showSearch | |||
mode="tags" | |||
size="middle" | |||
@@ -149,73 +165,80 @@ export default function Index() { | |||
placeholder="请选择门店" | |||
onChange={(values) => setStoreIdArray(values)} | |||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||
style={{ | |||
width: '300px', | |||
marginRight: '50px' | |||
}} | |||
> | |||
{ | |||
storeSelect.map( (item) => { | |||
storeSelect.map((item) => { | |||
return ( | |||
<Option key={item.key}>{item.title}</Option> | |||
) | |||
}) | |||
} | |||
</Select> | |||
</Col> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
商品 | |||
</div> | |||
<Select | |||
className={styles['data-search-sufixx']} | |||
showSearch | |||
mode="tags" | |||
size="middle" | |||
allowClear | |||
placeholder="请选择商品" | |||
value={goodsIdArray} | |||
onChange={(values) => setGoodsIdArray(values)} | |||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||
style={{ | |||
width: '300px', | |||
marginRight: '50px' | |||
}} | |||
> | |||
{ | |||
goodsIdSelect.map( (item, index) => { | |||
goodsIdSelect.map((item, index) => { | |||
return ( | |||
<Option key={item.id}>{item.name}</Option> | |||
) | |||
}) | |||
} | |||
</Select> | |||
</Col> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
商品类别 | |||
</div> | |||
<Select | |||
className={styles['data-search-sufixx']} | |||
showSearch | |||
mode="tags" | |||
size="middle" | |||
allowClear | |||
placeholder="请选择商品类别" | |||
value={goodsTypeArray} | |||
onChange={(values) => setGoodsTypeArray(values)} | |||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||
style={{ | |||
width: '300px', | |||
marginRight: '50px' | |||
}} | |||
> | |||
{ | |||
goodsTypeSelect.map( (item) => { | |||
goodsTypeSelect.map((item) => { | |||
return ( | |||
<Option key={item.id}>{item.name}</Option> | |||
) | |||
}) | |||
} | |||
</Select> | |||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | |||
</Col> | |||
<Col xs={24} sm={24} md={12} lg={12} xl={6} className={styles['data-search-item']}> | |||
<div className={styles['data-search-prefix']}> | |||
起始时间 | |||
</div> | |||
<RangePicker size='middle' className={styles['data-search-sufixx']} 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> | |||
<div className={styles['data-search-btns']}> | |||
<Button className={styles['search-btn-item']}>重置</Button> | |||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||
</div> | |||
</Col> | |||
</Row> | |||
<div className={styles['data-search-btns']}> | |||
<Button className={styles['search-btn-item']} onClick={onResetSearch}>重置</Button> | |||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||
</div> | |||
</Card> | |||
<Card className={styles['table-card']}> | |||
@@ -33,4 +33,30 @@ | |||
bottom: 0; | |||
z-index: 999; | |||
background-color: rgba(0, 0, 0, 0.5); | |||
} | |||
.data-search-item { | |||
display: flex; | |||
align-items: center; | |||
margin-bottom: 10px; | |||
} | |||
.data-search-input { | |||
width: 100%; | |||
} | |||
.data-search-prefix { | |||
text-align-last: justify; | |||
width: 60px; | |||
flex-shrink: 0; | |||
margin-right: 5px; | |||
} | |||
.data-search-sufixx { | |||
flex-grow: 1; | |||
} | |||
.data-search-btns { | |||
display: flex; | |||
justify-content: flex-end; | |||
} |