@@ -1,6 +1,6 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | import { PageContainer } from '@ant-design/pro-layout'; | ||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select } from 'antd'; | |||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||||
import styles from './index.less'; | import styles from './index.less'; | ||||
const { RangePicker } = DatePicker; | const { RangePicker } = DatePicker; | ||||
import costSalesAPI from "./service"; | import costSalesAPI from "./service"; | ||||
@@ -9,28 +9,28 @@ import moment from 'moment'; | |||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
title: '门店名称', | title: '门店名称', | ||||
dataIndex: 'storeName', | |||||
key: 'storeName', | |||||
dataIndex: 'storeId', | |||||
key: 'storeId', | |||||
}, | }, | ||||
{ | { | ||||
title: '商品名称', | title: '商品名称', | ||||
dataIndex: 'goodsName', | |||||
key: 'storeName', | |||||
dataIndex: 'goodsId', | |||||
key: 'goodsId', | |||||
}, | }, | ||||
{ | { | ||||
title: '销售收入', | title: '销售收入', | ||||
dataIndex: 'salesRevenue', | |||||
key: 'salesRevenue', | |||||
dataIndex: 'salesPrice', | |||||
key: 'salesPrice', | |||||
}, | }, | ||||
{ | { | ||||
title: '销售成本', | title: '销售成本', | ||||
dataIndex: 'costOfSale', | |||||
key: 'costOfSale', | |||||
dataIndex: 'costPrice', | |||||
key: 'costPrice', | |||||
}, | }, | ||||
{ | { | ||||
title: '销售数量', | title: '销售数量', | ||||
dataIndex: 'salesVolumes', | |||||
key: 'salesVolumes', | |||||
dataIndex: 'salesNum', | |||||
key: 'salesNum', | |||||
}, | }, | ||||
{ | { | ||||
title: '成本率', | title: '成本率', | ||||
@@ -47,12 +47,6 @@ const LoadingCard = () => { | |||||
) | ) | ||||
} | } | ||||
const children = []; | |||||
for (let i = 10; i < 36; i++) { | |||||
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); | |||||
} | |||||
/** | /** | ||||
* 销售成本分析 | * 销售成本分析 | ||||
* @returns | * @returns | ||||
@@ -60,7 +54,7 @@ for (let i = 10; i < 36; i++) { | |||||
export default function Index() { | export default function Index() { | ||||
//订单报表列表 | //订单报表列表 | ||||
const [orderReportList, setOrderReportList] = useState([]); | |||||
const [costSalesData, setCostSalesData] = useState([]); | |||||
const [current, setCurrent] = useState(1); | const [current, setCurrent] = useState(1); | ||||
const [pageSize, setPageSize] = useState(10); | const [pageSize, setPageSize] = useState(10); | ||||
const [total, setTotal] = useState(0); | const [total, setTotal] = useState(0); | ||||
@@ -69,6 +63,15 @@ export default function Index() { | |||||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | 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')), | moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | ||||
]); //日期选择器 | ]); //日期选择器 | ||||
//门店 | |||||
const [storeIdArray, setStoreIdArray] = useState([]); | |||||
const [storeSelect, setStoreSelect] = useState([]); | |||||
//商品 | |||||
const [goodsIdArray, setGoodsIdArray] = useState([]); | |||||
const [goodsIdSelect, setGoodsIdSelect] = useState([]); | |||||
//商品类型 | |||||
const [goodsTypeArray, setGoodsTypeArray] = useState([]); | |||||
const [goodsTypeSelect, setGoodsTypeSelect] = useState([]); | |||||
//页码变化 | //页码变化 | ||||
const onPageChange = (current, pageSize) => { | const onPageChange = (current, pageSize) => { | ||||
@@ -77,15 +80,77 @@ export default function Index() { | |||||
} | } | ||||
//查询 | //查询 | ||||
const onQueryOrderReportList = () => { | |||||
const onQueryReportSalescost = async () => { | |||||
const jsonData = { | |||||
"storeId": storeIdArray, | |||||
"goodsId": goodsIdArray, | |||||
"goodsTypeId": goodsTypeArray, | |||||
"begintime": timeRange[0], | |||||
"endtime": timeRange[1], | |||||
current, | |||||
pageSize | |||||
} | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.getReportSalescost({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
setCostSalesData(response.data.data); | |||||
} else { | |||||
message.error(response.errors || '获取销售成本失败'); | |||||
} | |||||
} | |||||
/** | |||||
* 查询店铺列表 | |||||
*/ | |||||
const onQueryStoreList = async () => { | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.gettree({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
const storeList = []; | |||||
response.data.forEach(item => { | |||||
if (item.type === 2 || item.type === 3) { | |||||
storeList.push(item) | |||||
} | |||||
}) | |||||
setStoreSelect(storeList); | |||||
} else { | |||||
message.error('查询店铺列表失败'); | |||||
} | |||||
} | } | ||||
//选择门店 | |||||
const handleStoreChange = () => { | |||||
//查询商品列表 | |||||
const onQueryGoodsList = async () => { | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.goodsList({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
setGoodsIdSelect(response.data); | |||||
} else { | |||||
message.error('查询商品列表失败'); | |||||
} | |||||
} | |||||
//查询商品分类类型列表 | |||||
const onQueryGoodsType = async () => { | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.goodsTypeList({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
setGoodsTypeSelect(response.data); | |||||
} else { | |||||
message.error('查询商品分类列表失败'); | |||||
} | |||||
} | } | ||||
useEffect(() => { | |||||
onQueryReportSalescost(); | |||||
onQueryStoreList(); | |||||
onQueryGoodsList(); | |||||
onQueryGoodsType(); | |||||
}, []); | |||||
return ( | return ( | ||||
<PageContainer> | <PageContainer> | ||||
{showLoading ? <LoadingCard></LoadingCard> : null} | {showLoading ? <LoadingCard></LoadingCard> : null} | ||||
@@ -98,14 +163,20 @@ export default function Index() { | |||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择门店" | placeholder="请选择门店" | ||||
onChange={handleStoreChange} | |||||
onChange={(values) => setStoreIdArray(values)} | |||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | style={{ | ||||
width: '300px', | width: '300px', | ||||
marginRight: '50px' | marginRight: '50px' | ||||
}} | }} | ||||
> | > | ||||
{children} | |||||
{ | |||||
storeSelect.map( (item) => { | |||||
return ( | |||||
<Option key={item.key}>{item.title}</Option> | |||||
) | |||||
}) | |||||
} | |||||
</Select> | </Select> | ||||
<Select | <Select | ||||
showSearch | showSearch | ||||
@@ -113,14 +184,20 @@ export default function Index() { | |||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品" | placeholder="请选择商品" | ||||
onChange={handleStoreChange} | |||||
onChange={(values) => setGoodsIdArray(values)} | |||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | style={{ | ||||
width: '300px', | width: '300px', | ||||
marginRight: '50px' | marginRight: '50px' | ||||
}} | }} | ||||
> | > | ||||
{children} | |||||
{ | |||||
goodsIdSelect.map( (item, index) => { | |||||
return ( | |||||
<Option key={item.id}>{item.name}</Option> | |||||
) | |||||
}) | |||||
} | |||||
</Select> | </Select> | ||||
<Select | <Select | ||||
showSearch | showSearch | ||||
@@ -128,14 +205,20 @@ export default function Index() { | |||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品类别" | placeholder="请选择商品类别" | ||||
onChange={handleStoreChange} | |||||
onChange={(values) => setGoodsTypeArray(values)} | |||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | ||||
style={{ | style={{ | ||||
width: '300px', | width: '300px', | ||||
marginRight: '50px' | marginRight: '50px' | ||||
}} | }} | ||||
> | > | ||||
{children} | |||||
{ | |||||
goodsTypeSelect.map( (item) => { | |||||
return ( | |||||
<Option key={item.id}>{item.name}</Option> | |||||
) | |||||
}) | |||||
} | |||||
</Select> | </Select> | ||||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | <RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | ||||
let tempDate = [ | let tempDate = [ | ||||
@@ -147,12 +230,12 @@ export default function Index() { | |||||
</div> | </div> | ||||
<div className={styles['data-search-btns']}> | <div className={styles['data-search-btns']}> | ||||
<Button className={styles['search-btn-item']}>重置</Button> | <Button className={styles['search-btn-item']}>重置</Button> | ||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryOrderReportList}>查询</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Card> | </Card> | ||||
<Card className={styles['table-card']}> | <Card className={styles['table-card']}> | ||||
<Table dataSource={orderReportList} columns={columns} pagination={false} /> | |||||
<Table dataSource={costSalesData} columns={columns} pagination={false} /> | |||||
<div className={styles['table-page']}> | <div className={styles['table-page']}> | ||||
<Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} /> | <Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} /> | ||||
</div> | </div> | ||||
@@ -1,10 +1,40 @@ | |||||
import { request } from 'umi'; | import { request } from 'umi'; | ||||
export default { | export default { | ||||
getOrderReportList(data) { | |||||
return request(`/kitchen/api/report-statistics/order-report`, { | |||||
getReportSalescost(data) { | |||||
return request(`/kitchen/api/report/salescost`, { | |||||
method: 'Post', | method: 'Post', | ||||
data: data, | data: data, | ||||
}); | }); | ||||
}, | |||||
/** | |||||
* 查询商品信息 | |||||
*/ | |||||
goodsList(data) { | |||||
return request(`/kitchen/api/goodes/list`, { | |||||
method: 'Post', | |||||
data: data, | |||||
}); | |||||
}, | |||||
/** | |||||
* 查询商品类型 | |||||
*/ | |||||
goodsTypeList(data) { | |||||
return request(`/kitchen/api/goodstype/list`, { | |||||
method: 'Post', | |||||
data: data, | |||||
}); | |||||
}, | |||||
/** | |||||
* 查询门店列表 | |||||
*/ | |||||
gettree(params) { | |||||
return request('/kitchen/api/sysOrg/tree', { | |||||
data: { | |||||
...params, | |||||
}, | |||||
}); | |||||
} | } | ||||
}; | }; |
@@ -1,6 +1,6 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | import { PageContainer } from '@ant-design/pro-layout'; | ||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select } from 'antd'; | |||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||||
import styles from './index.less'; | import styles from './index.less'; | ||||
const { RangePicker } = DatePicker; | const { RangePicker } = DatePicker; | ||||
import costSalesAPI from "./service"; | import costSalesAPI from "./service"; | ||||
@@ -9,13 +9,13 @@ import moment from 'moment'; | |||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
title: '门店名称', | title: '门店名称', | ||||
dataIndex: 'storeName', | |||||
key: 'storeName', | |||||
dataIndex: 'storeId', | |||||
key: 'storeId', | |||||
}, | }, | ||||
{ | { | ||||
title: '毛利率', | title: '毛利率', | ||||
dataIndex: 'grossProfitMargin', | |||||
key: 'salesRevenue', | |||||
dataIndex: 'marginRatio', | |||||
key: 'marginRatio', | |||||
} | } | ||||
]; | ]; | ||||
@@ -27,12 +27,6 @@ const LoadingCard = () => { | |||||
) | ) | ||||
} | } | ||||
const children = []; | |||||
for (let i = 10; i < 36; i++) { | |||||
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); | |||||
} | |||||
/** | /** | ||||
* 门店销售毛利分析 | * 门店销售毛利分析 | ||||
* @returns | * @returns | ||||
@@ -40,7 +34,7 @@ for (let i = 10; i < 36; i++) { | |||||
export default function Index() { | export default function Index() { | ||||
//订单报表列表 | //订单报表列表 | ||||
const [orderReportList, setOrderReportList] = useState([]); | |||||
const [costSalesData, setCostSalesData] = useState([]); | |||||
const [current, setCurrent] = useState(1); | const [current, setCurrent] = useState(1); | ||||
const [pageSize, setPageSize] = useState(10); | const [pageSize, setPageSize] = useState(10); | ||||
const [total, setTotal] = useState(0); | const [total, setTotal] = useState(0); | ||||
@@ -49,6 +43,9 @@ export default function Index() { | |||||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | 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')), | moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | ||||
]); //日期选择器 | ]); //日期选择器 | ||||
//门店 | |||||
const [storeIdArray, setStoreIdArray] = useState([]); | |||||
const [storeSelect, setStoreSelect] = useState([]); | |||||
//页码变化 | //页码变化 | ||||
const onPageChange = (current, pageSize) => { | const onPageChange = (current, pageSize) => { | ||||
@@ -57,33 +54,75 @@ export default function Index() { | |||||
} | } | ||||
//查询 | //查询 | ||||
const onQueryOrderReportList = () => { | |||||
const onQueryReportSalescost = async () => { | |||||
const jsonData = { | |||||
"storeId": storeIdArray, | |||||
"begintime": timeRange[0], | |||||
"endtime": timeRange[1], | |||||
current, | |||||
pageSize | |||||
} | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.getReportOrgsalesmargin({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
setCostSalesData(response.data.data); | |||||
} else { | |||||
message.error(response.errors || '获取销售成本失败'); | |||||
} | |||||
} | } | ||||
//选择门店 | |||||
const handleStoreChange = () => { | |||||
/** | |||||
* 查询店铺列表 | |||||
*/ | |||||
const onQueryStoreList = async () => { | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.gettree({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
const storeList = []; | |||||
response.data.forEach(item => { | |||||
if (item.type === 2 || item.type === 3) { | |||||
storeList.push(item) | |||||
} | |||||
}) | |||||
setStoreSelect(storeList); | |||||
} else { | |||||
message.error('查询店铺列表失败'); | |||||
} | |||||
} | } | ||||
useEffect(() => { | |||||
onQueryReportSalescost(); | |||||
onQueryStoreList(); | |||||
}, []); | |||||
return ( | return ( | ||||
<PageContainer> | <PageContainer> | ||||
{showLoading ? <LoadingCard></LoadingCard> : null} | {showLoading ? <LoadingCard></LoadingCard> : null} | ||||
<Card className={styles['data-search-card']}> | <Card className={styles['data-search-card']}> | ||||
<div className={styles['data-search-box']}> | <div className={styles['data-search-box']}> | ||||
<div className={styles['data-search-left']}> | <div className={styles['data-search-left']}> | ||||
<Select | |||||
<Select | |||||
showSearch | |||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择门店" | placeholder="请选择门店" | ||||
onChange={handleStoreChange} | |||||
onChange={(values) => setStoreIdArray(values)} | |||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||||
style={{ | style={{ | ||||
width: '300px', | width: '300px', | ||||
marginRight: '50px' | marginRight: '50px' | ||||
}} | }} | ||||
> | > | ||||
{children} | |||||
{ | |||||
storeSelect.map( (item) => { | |||||
return ( | |||||
<Option key={item.key}>{item.title}</Option> | |||||
) | |||||
}) | |||||
} | |||||
</Select> | </Select> | ||||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | <RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | ||||
let tempDate = [ | let tempDate = [ | ||||
@@ -95,12 +134,12 @@ export default function Index() { | |||||
</div> | </div> | ||||
<div className={styles['data-search-btns']}> | <div className={styles['data-search-btns']}> | ||||
<Button className={styles['search-btn-item']}>重置</Button> | <Button className={styles['search-btn-item']}>重置</Button> | ||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryOrderReportList}>查询</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Card> | </Card> | ||||
<Card className={styles['table-card']}> | <Card className={styles['table-card']}> | ||||
<Table dataSource={orderReportList} columns={columns} pagination={false} /> | |||||
<Table dataSource={costSalesData} columns={columns} pagination={false} /> | |||||
<div className={styles['table-page']}> | <div className={styles['table-page']}> | ||||
<Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} /> | <Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} /> | ||||
</div> | </div> | ||||
@@ -1,10 +1,21 @@ | |||||
import { request } from 'umi'; | import { request } from 'umi'; | ||||
export default { | export default { | ||||
getOrderReportList(data) { | |||||
return request(`/kitchen/api/report-statistics/order-report`, { | |||||
getReportOrgsalesmargin(data) { | |||||
return request(`/kitchen/api/report/orgsalesmargin`, { | |||||
method: 'Post', | method: 'Post', | ||||
data: data, | data: data, | ||||
}); | }); | ||||
}, | |||||
/** | |||||
* 查询门店列表 | |||||
*/ | |||||
gettree(params) { | |||||
return request('/kitchen/api/sysOrg/tree', { | |||||
data: { | |||||
...params, | |||||
}, | |||||
}); | |||||
} | } | ||||
}; | }; |
@@ -1,6 +1,6 @@ | |||||
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import { PageContainer } from '@ant-design/pro-layout'; | import { PageContainer } from '@ant-design/pro-layout'; | ||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select } from 'antd'; | |||||
import { Button, Card, DatePicker, Table, Pagination, Spin, Select, message } from 'antd'; | |||||
import styles from './index.less'; | import styles from './index.less'; | ||||
const { RangePicker } = DatePicker; | const { RangePicker } = DatePicker; | ||||
import costSalesAPI from "./service"; | import costSalesAPI from "./service"; | ||||
@@ -9,18 +9,18 @@ import moment from 'moment'; | |||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
title: '门店名称', | title: '门店名称', | ||||
dataIndex: 'storeName', | |||||
key: 'storeName', | |||||
dataIndex: 'storeId', | |||||
key: 'storeId', | |||||
}, | }, | ||||
{ | { | ||||
title: '商品名称', | title: '商品名称', | ||||
dataIndex: 'goodsName', | |||||
key: 'storeName', | |||||
dataIndex: 'goodsId', | |||||
key: 'goodsId', | |||||
}, | }, | ||||
{ | { | ||||
title: '毛利率', | title: '毛利率', | ||||
dataIndex: 'grossProfitMargin', | |||||
key: 'salesRevenue', | |||||
dataIndex: 'marginRatio', | |||||
key: 'marginRatio', | |||||
} | } | ||||
]; | ]; | ||||
@@ -32,12 +32,6 @@ const LoadingCard = () => { | |||||
) | ) | ||||
} | } | ||||
const children = []; | |||||
for (let i = 10; i < 36; i++) { | |||||
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); | |||||
} | |||||
/** | /** | ||||
* 销售毛利分析 | * 销售毛利分析 | ||||
* @returns | * @returns | ||||
@@ -45,7 +39,7 @@ for (let i = 10; i < 36; i++) { | |||||
export default function Index() { | export default function Index() { | ||||
//订单报表列表 | //订单报表列表 | ||||
const [orderReportList, setOrderReportList] = useState([]); | |||||
const [costSalesData, setCostSalesData] = useState([]); | |||||
const [current, setCurrent] = useState(1); | const [current, setCurrent] = useState(1); | ||||
const [pageSize, setPageSize] = useState(10); | const [pageSize, setPageSize] = useState(10); | ||||
const [total, setTotal] = useState(0); | const [total, setTotal] = useState(0); | ||||
@@ -54,6 +48,15 @@ export default function Index() { | |||||
moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')), | 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')), | moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')), | ||||
]); //日期选择器 | ]); //日期选择器 | ||||
//门店 | |||||
const [storeIdArray, setStoreIdArray] = useState([]); | |||||
const [storeSelect, setStoreSelect] = useState([]); | |||||
//商品 | |||||
const [goodsIdArray, setGoodsIdArray] = useState([]); | |||||
const [goodsIdSelect, setGoodsIdSelect] = useState([]); | |||||
//商品类型 | |||||
const [goodsTypeArray, setGoodsTypeArray] = useState([]); | |||||
const [goodsTypeSelect, setGoodsTypeSelect] = useState([]); | |||||
//页码变化 | //页码变化 | ||||
const onPageChange = (current, pageSize) => { | const onPageChange = (current, pageSize) => { | ||||
@@ -62,59 +65,144 @@ export default function Index() { | |||||
} | } | ||||
//查询 | //查询 | ||||
const onQueryOrderReportList = () => { | |||||
const onQueryReportSalescost = async () => { | |||||
const jsonData = { | |||||
"storeId": storeIdArray, | |||||
"goodsId": goodsIdArray, | |||||
"goodsTypeId": goodsTypeArray, | |||||
"begintime": timeRange[0], | |||||
"endtime": timeRange[1], | |||||
current, | |||||
pageSize | |||||
} | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.getReportSalesmargin({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
setCostSalesData(response.data.data); | |||||
} else { | |||||
message.error(response.errors || '获取销售成本失败'); | |||||
} | |||||
} | |||||
/** | |||||
* 查询店铺列表 | |||||
*/ | |||||
const onQueryStoreList = async () => { | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.gettree({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
const storeList = []; | |||||
response.data.forEach(item => { | |||||
if (item.type === 2 || item.type === 3) { | |||||
storeList.push(item) | |||||
} | |||||
}) | |||||
setStoreSelect(storeList); | |||||
} else { | |||||
message.error('查询店铺列表失败'); | |||||
} | |||||
} | } | ||||
//选择门店 | |||||
const handleStoreChange = () => { | |||||
//查询商品列表 | |||||
const onQueryGoodsList = async () => { | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.goodsList({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
setGoodsIdSelect(response.data); | |||||
} else { | |||||
message.error('查询商品列表失败'); | |||||
} | |||||
} | |||||
//查询商品分类类型列表 | |||||
const onQueryGoodsType = async () => { | |||||
setShowLoading(true); | |||||
const response = await costSalesAPI.goodsTypeList({}); | |||||
setShowLoading(false); | |||||
if (response.statusCode === 200) { | |||||
setGoodsTypeSelect(response.data); | |||||
} else { | |||||
message.error('查询商品分类列表失败'); | |||||
} | |||||
} | } | ||||
useEffect(() => { | |||||
onQueryReportSalescost(); | |||||
onQueryStoreList(); | |||||
onQueryGoodsList(); | |||||
onQueryGoodsType(); | |||||
}, []); | |||||
return ( | return ( | ||||
<PageContainer> | <PageContainer> | ||||
{showLoading ? <LoadingCard></LoadingCard> : null} | {showLoading ? <LoadingCard></LoadingCard> : null} | ||||
<Card className={styles['data-search-card']}> | <Card className={styles['data-search-card']}> | ||||
<div className={styles['data-search-box']}> | <div className={styles['data-search-box']}> | ||||
<div className={styles['data-search-left']}> | <div className={styles['data-search-left']}> | ||||
<Select | |||||
<Select | |||||
showSearch | |||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择门店" | placeholder="请选择门店" | ||||
onChange={handleStoreChange} | |||||
onChange={(values) => setStoreIdArray(values)} | |||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||||
style={{ | style={{ | ||||
width: '300px', | width: '300px', | ||||
marginRight: '50px' | marginRight: '50px' | ||||
}} | }} | ||||
> | > | ||||
{children} | |||||
{ | |||||
storeSelect.map( (item) => { | |||||
return ( | |||||
<Option key={item.key}>{item.title}</Option> | |||||
) | |||||
}) | |||||
} | |||||
</Select> | </Select> | ||||
<Select | <Select | ||||
showSearch | |||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品" | placeholder="请选择商品" | ||||
onChange={handleStoreChange} | |||||
onChange={(values) => setGoodsIdArray(values)} | |||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||||
style={{ | style={{ | ||||
width: '300px', | width: '300px', | ||||
marginRight: '50px' | marginRight: '50px' | ||||
}} | }} | ||||
> | > | ||||
{children} | |||||
{ | |||||
goodsIdSelect.map( (item, index) => { | |||||
return ( | |||||
<Option key={item.id}>{item.name}</Option> | |||||
) | |||||
}) | |||||
} | |||||
</Select> | </Select> | ||||
<Select | <Select | ||||
showSearch | |||||
mode="tags" | mode="tags" | ||||
size="middle" | size="middle" | ||||
allowClear | allowClear | ||||
placeholder="请选择商品类别" | placeholder="请选择商品类别" | ||||
onChange={handleStoreChange} | |||||
onChange={(values) => setGoodsTypeArray(values)} | |||||
filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())} | |||||
style={{ | style={{ | ||||
width: '300px', | width: '300px', | ||||
marginRight: '50px' | marginRight: '50px' | ||||
}} | }} | ||||
> | > | ||||
{children} | |||||
{ | |||||
goodsTypeSelect.map( (item) => { | |||||
return ( | |||||
<Option key={item.id}>{item.name}</Option> | |||||
) | |||||
}) | |||||
} | |||||
</Select> | </Select> | ||||
<RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | <RangePicker size='middle' className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => { | ||||
let tempDate = [ | let tempDate = [ | ||||
@@ -126,12 +214,12 @@ export default function Index() { | |||||
</div> | </div> | ||||
<div className={styles['data-search-btns']}> | <div className={styles['data-search-btns']}> | ||||
<Button className={styles['search-btn-item']}>重置</Button> | <Button className={styles['search-btn-item']}>重置</Button> | ||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryOrderReportList}>查询</Button> | |||||
<Button className={styles['search-btn-item']} type="primary" onClick={onQueryReportSalescost}>查询</Button> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</Card> | </Card> | ||||
<Card className={styles['table-card']}> | <Card className={styles['table-card']}> | ||||
<Table dataSource={orderReportList} columns={columns} pagination={false} /> | |||||
<Table dataSource={costSalesData} columns={columns} pagination={false} /> | |||||
<div className={styles['table-page']}> | <div className={styles['table-page']}> | ||||
<Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} /> | <Pagination current={current} pageSize={pageSize} total={total} onChange={onPageChange} /> | ||||
</div> | </div> | ||||
@@ -1,10 +1,39 @@ | |||||
import { request } from 'umi'; | import { request } from 'umi'; | ||||
export default { | export default { | ||||
getOrderReportList(data) { | |||||
return request(`/kitchen/api/report-statistics/order-report`, { | |||||
getReportSalesmargin(data) { | |||||
return request(`/kitchen/api/report/salesmargin`, { | |||||
method: 'Post', | method: 'Post', | ||||
data: data, | data: data, | ||||
}); | }); | ||||
}, | |||||
/** | |||||
* 查询商品信息 | |||||
*/ | |||||
goodsList(data) { | |||||
return request(`/kitchen/api/goodes/list`, { | |||||
method: 'Post', | |||||
data: data, | |||||
}); | |||||
}, | |||||
/** | |||||
* 查询商品类型 | |||||
*/ | |||||
goodsTypeList(data) { | |||||
return request(`/kitchen/api/goodstype/list`, { | |||||
method: 'Post', | |||||
data: data, | |||||
}); | |||||
}, | |||||
/** | |||||
* 查询门店列表 | |||||
*/ | |||||
gettree(params) { | |||||
return request('/kitchen/api/sysOrg/tree', { | |||||
data: { | |||||
...params, | |||||
}, | |||||
}); | |||||
} | } | ||||
}; | }; |