xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat(销售统计): 完成销售统计100%

Browse Source
This commit is contained in:
xuan
2022-10-14 19:03:18 +08:00
parent 4861cc9eb9
commit 52f070adda
18 changed files with 809 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/saleStatistic/config.ts
+181
View File
@@ -0,0 +1,181 @@
// 订单
export const OrderForm = {
summary: {
summaryTitle: '订单总数',
tips: '已成功下单的总单数',
value: {
num: '',
cls: '',
},
total: {
num: '',
cls: '',
},
},
form: {
processing_order_number: {
cellTitle: '待配布订单',
tips: '已经预约和正在配布的订单数',
value: {
num: '',
cls: '',
},
},
processed_order_number: {
cellTitle: '已配布订单',
tips: '所有配完布、已批准发货、已经发货的订单总单数',
value: {
num: '',
cls: '',
},
},
},
}
// 配布
export const ArrangedForm = {
summary: {
summaryTitle: '已配布匹数',
tips: '所有配完布、已批准发货、已经发货的订单总匹数',
value: {
num: '',
cls: '',
},
total: {
num: '',
cls: '',
},
},
form: {
wait_collect_order_number: {
cellTitle: '待收款单数',
tips: '已配完布但未批准发货的所有订单总单数',
value: {
num: '',
cls: '',
},
},
wait_collect_number: {
cellTitle: '待收款匹数',
tips: '已配完布但未批准发货的所有订单总匹数',
value: {
num: '',
cls: '',
},
},
wait_collect_amount_sum: {
cellTitle: '待收款金额',
tips: '已配完布但未批准发货的所有订单总金额',
value: {
num: '',
cls: '',
},
},
not_shipped_order_number: {
cellTitle: '待发货单数',
tips: '已批准发货但未发货出库的所有订单总单数',
value: {
num: '',
cls: '',
},
},
not_shipped_number: {
cellTitle: '待发货匹数',
tips: '已批准发货但未发货出库的所有订单总匹数',
value: {
num: '',
cls: '',
},
},
not_shipped_amount_sum: {
cellTitle: '待发货金额',
tips: '已批准发货但未发货出库的所有订单总金额',
value: {
num: '',
cls: '',
},
},
shipped_order_number: {
cellTitle: '已发货单数',
tips: '已经发货出库的所有订单总单数',
value: {
num: '',
cls: '',
},
},
shipped_number: {
cellTitle: '已发货匹数',
tips: '已经发货出库的所有订单总匹数',
value: {
num: '',
cls: '',
},
},
shipped_amount_sum: {
cellTitle: '已发货金额',
tips: '已经发货出库的所有订单总金额',
value: {
num: '',
cls: '',
},
},
},
}
// 货款
export const PaymentAmountForm = {
summary: {
summaryTitle: '货款金额',
tips: '已经发货出库的所有订单总金额',
value: {
num: '',
cls: '',
},
},
form: {
amount_unreceived_sum: {
cellTitle: '未收金额',
tips: '已经批准发货出库但未收到货款的所有订单总金额',
value: {
num: '',
cls: '',
},
},
amount_received_sum: {
cellTitle: '已收金额',
tips: '已收且已经发货出库的所有订单总金额',
value: {
num: '',
cls: '',
},
},
},
}
// 退货
export const ReturnGoodsOrderForm = {
summary: {
summaryTitle: '退货单数',
tips: '已经完成退货入库的退货单总单数',
value: {
num: '',
cls: '',
},
},
form: {
return_goods_number: {
cellTitle: '退货匹数',
tips: '已经完成退货入库的退货单总匹数',
value: {
num: '',
cls: '',
},
},
return_amount_sum: {
cellTitle: '退货金额',
tips: '已经完成退货入库的退货单总金额',
value: {
num: '',
cls: '',
},
},
},
}
src/pages/saleStatistic/index.module.scss
+2
View File
@@ -87,3 +87,5 @@ page {
.amount {
color: $color_main;
}
src/pages/saleStatistic/index.tsx
+407 -319
View File
@@ -1,4 +1,5 @@
import { SaleOrderDataFormApi } from '@/api/statistic/saleStatistic'
import { ProductRankApi, PurchaserRankApi, SaleOrderDataFormApi, SalesmanRankApi } from '@/api/statistic/saleStatistic'
import { formatPriceDiv, setPriceUnit, dataUnit } from '@/common/format'
import { getFilterData } from '@/common/util'
import Cell from '@/components/cell'
import Divider from '@/components/Divider'
@@ -8,326 +9,159 @@ import SelectMarketingDepartment from '@/components/SelectMarketingDepartment'
import SelectSaleRankingIndicators from '@/components/SelectSaleRankingIndicators'
import SelectSaleType from '@/components/SelectSaleType'
import SelectTimePicker, { ChangedValue } from '@/components/SelectTimePicker'
import Table from '@/components/table'
import Table, { TablePropsType } from '@/components/table'
import ToolTip from '@/components/toolTips'
import { View, Text } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import classnames from 'classnames'
import { useCallback, useState } from 'react'
import dayjs from 'dayjs'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { OrderForm, ArrangedForm, PaymentAmountForm, ReturnGoodsOrderForm } from './config'
//需要传进来的数据示例
const exampledataSource = [
{
key: '1',
username: '小红',
count: '123打发手动阀手动阀啊手动阀',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '2',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '3',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '4',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '5',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '6',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '7',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '8',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '9',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
{
key: '10',
username: '小红',
count: '123',
gb: '321',
dbd: '¥6634.93w',
},
]
//处理金额(后端单位分，转元)
const priceformat = (val: number) => {
return dataUnit(val / 100)
}
//需要传进来的表头数据示例
const examplecolumns = [
{
key: 'username',
title: '编号',
dataIndex: 'username',
width: '20%',
const defaultLimit = 10
const FilterTimeOptions = {
'0': {
name: '今天',
date_min: `${dayjs(new Date())
.add(0, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
date_max: `${dayjs(new Date())
.add(1, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
},
{
key: 'count',
title: '面料名称',
dataIndex: 'count',
width: '20%',
ellipsis: {
isEllipsis: true,
rows: 2,
},
'1': {
name: '昨日',
date_min: `${dayjs(new Date())
.add(-1, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
date_max: `${dayjs(new Date())
.add(0, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
},
{
key: 'gb',
title: '匹数',
dataIndex: 'gb',
width: '30%',
'2': {
name: '近7日',
date_min: `${dayjs(new Date())
.add(-7, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
date_max: `${dayjs(new Date())
.add(0, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
},
{
key: 'dbd',
title: '交易金额',
dataIndex: 'dbd',
width: '30%',
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
'3': {
name: '近30日',
date_min: `${dayjs(new Date())
.add(-30, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
date_max: `${dayjs(new Date())
.add(0, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
},
]
'4': {
name: '近90日',
date_min: `${dayjs(new Date())
.add(-90, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
date_max: `${dayjs(new Date())
.add(0, 'day')
.format('YYYY-MM-DD')} 00:00:00`,
},
}
// 销售统计
const saleStatistic = () => {
// 订单
const OrderForm = {
summary: {
summaryTitle: '订单总数',
tips: '已成功下单的总单数',
value: '51321',
total: '231231',
},
form: {
processing_order_number: {
cellTitle: '待配布订单',
tips: '已经预约和正在配布的订单数',
value: '5132',
},
processed_order_number: {
cellTitle: '已配布订单',
tips: '所有配完布、已批准发货、已经发货的订单总单数',
value: '564651',
},
},
}
// 配布
const ArrangedForm = {
summary: {
summaryTitle: '已配布匹数',
tips: '所有配完布、已批准发货、已经发货的订单总匹数',
value: '53453',
total: '456345',
},
form: {
wait_collect_order_number: {
cellTitle: '待收款单数',
tips: '已配完布但未批准发货的所有订单总单数',
value: '45634',
},
wait_collect_number: {
cellTitle: '待收款匹数',
tips: '已配完布但未批准发货的所有订单总匹数',
value: '463',
},
wait_collect_amount_sum: {
cellTitle: '待收款金额',
tips: '已配完布但未批准发货的所有订单总金额',
value: '4563',
},
not_shipped_order_number: {
cellTitle: '待发货单数',
tips: '已批准发货但未发货出库的所有订单总单数',
value: '4563',
},
not_shipped_number: {
cellTitle: '待发货匹数',
tips: '已批准发货但未发货出库的所有订单总匹数',
value: '4563',
},
not_shipped_amount_sum: {
cellTitle: '待发货金额',
tips: '已批准发货但未发货出库的所有订单总金额',
value: '4563',
},
shipped_order_number: {
cellTitle: '已发货单数',
tips: '已经发货出库的所有订单总单数',
value: '4563',
},
shipped_number: {
cellTitle: '已发货匹数',
tips: '已经发货出库的所有订单总匹数',
value: '463',
},
shipped_amount_sum: {
cellTitle: '已发货金额',
tips: '已经发货出库的所有订单总金额',
value: '4563',
},
},
}
// 货款
const paymentAmountForm = {
summary: {
summaryTitle: '货款金额',
tips: '已经发货出库的所有订单总金额',
value: '456345',
total: '45634',
},
form: {
amount_unreceived_sum: {
cellTitle: '未收金额',
tips: '已经批准发货出库但未收到货款的所有订单总金额',
value: '4563',
},
amount_received_sum: {
cellTitle: '已收金额',
tips: '已收且已经发货出库的所有订单总金额',
value: '4563',
},
},
}
// 退货
const ReturnGoodsOrderForm = {
summary: {
summaryTitle: '退货单数',
tips: '已经完成退货入库的退货单总单数',
value: '4563',
total: '4563',
},
form: {
return_goods_number: {
cellTitle: '退货匹数',
tips: '已经完成退货入库的退货单总匹数',
value: '4563',
},
return_amount_sum: {
cellTitle: '退货金额',
tips: '已经完成退货入库的退货单总金额',
value: '4563',
},
},
}
const { fetchData } = SaleOrderDataFormApi()
const [saleType, setSaleType] = useState<number | null>(null)
const [saleType, setSaleType] = useState<number | null>(0)
const [saleDepartmentId, setSaleDepartmentId] = useState<number | null>(null)
const [dateRange, setDateRange] = useState({
date_min: '',
date_max: '',
date_min: FilterTimeOptions[0].date_min,
date_max: FilterTimeOptions[0].date_max,
})
useEffect(() => {
getData()
}, [saleType, saleDepartmentId, dateRange])
const getData = async () => {
// console.log(
// 'getFilterData',
// getFilterData({
// sale_type: saleType,
// sale_department_id: saleDepartmentId,
// date_min: dateRange.date_min,
// date_max: dateRange.date_max,
// }),
// )
// const res = await fetchData(getFilterData({
// sale_type: saleType,
// sale_department_id: saleDepartmentId,
// date_min: dateRange.date_min,
// date_max: dateRange.date_max,
// }))
// if(res.data){
// }
const res = await fetchData(
getFilterData({
sale_type: saleType,
sale_department_id: saleDepartmentId,
date_min: dateRange.date_min,
date_max: dateRange.date_max,
}),
)
if (res.data) {
// 订单
OrderForm.summary.value = setPriceUnit(res.data.order_number)
OrderForm.summary.total = setPriceUnit(res.data.total_roll)
OrderForm.form.processed_order_number.value = setPriceUnit(res.data.processed_order_number)
OrderForm.form.processing_order_number.value = setPriceUnit(res.data.processing_order_number)
// 配布
ArrangedForm.summary.total = setPriceUnit(res.data.arranged_amount_sum)
ArrangedForm.summary.value = setPriceUnit(res.data.arranged_number)
ArrangedForm.form.not_shipped_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.not_shipped_amount_sum) as number)
ArrangedForm.form.not_shipped_number.value = setPriceUnit(res.data.not_shipped_amount_sum)
ArrangedForm.form.not_shipped_order_number.value = setPriceUnit(res.data.not_shipped_order_number)
ArrangedForm.form.shipped_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.shipped_amount_sum) as number)
ArrangedForm.form.shipped_number.value = setPriceUnit(res.data.shipped_number)
ArrangedForm.form.shipped_order_number.value = setPriceUnit(res.data.shipped_order_number)
ArrangedForm.form.wait_collect_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.wait_collect_amount_sum) as number)
ArrangedForm.form.wait_collect_number.value = setPriceUnit(res.data.wait_collect_number)
ArrangedForm.form.wait_collect_order_number.value = setPriceUnit(res.data.wait_collect_order_number)
// 货款
PaymentAmountForm.summary.value = setPriceUnit(formatPriceDiv(res.data.payment_amount_sum) as number)
PaymentAmountForm.form.amount_received_sum.value = setPriceUnit(formatPriceDiv(res.data.amount_received_sum) as number)
PaymentAmountForm.form.amount_unreceived_sum.value = setPriceUnit(formatPriceDiv(res.data.amount_unreceived_sum) as number)
// 退货
ReturnGoodsOrderForm.summary.value = setPriceUnit(res.data.return_goods_order_number)
ReturnGoodsOrderForm.form.return_amount_sum.value = setPriceUnit(formatPriceDiv(res.data.return_amount_sum) as number)
ReturnGoodsOrderForm.form.return_goods_number.value = setPriceUnit(res.data.return_goods_number)
console.log(res.data)
}
}
useDidShow(()=>{
getData()
})
const onChangeTimePicker = useCallback((value: ChangedValue) => {
console.log(value)
setDateRange({
date_max: value[0],
date_min: value[1],
date_max: value[1],
date_min: value[0],
})
}, [])
const onChangeSaleType = useCallback((saleType: number) => {
console.log('saleType', saleType)
setSaleType(saleType)
// 全部
if (saleType === -1) {
setSaleType(null)
} else {
setSaleType(saleType)
}
}, [])
const onChangeDepartment = useCallback((department: number) => {
console.log('department', department)
setSaleDepartmentId(department)
// 全部
if (department === -1) {
setSaleDepartmentId(null)
} else {
setSaleDepartmentId(department)
}
}, [])
const onChangeIndicators = (indicators: number) => {
console.log('indicators', indicators)
}
const tabsConfig = [
{
name: '面料',
key: 0,
},
{
name: '客户',
key: 1,
},
{
name: '业务员',
key: 2,
},
]
const [currentKey, setCurrentKey] = useState(tabsConfig[0].key)
const handleClickTab = event => {
const key = event.target.dataset.key
if (key === currentKey) return
setCurrentKey(key)
}
return (
<View className={styles.saleStatistic}>
{/* <View style={{background: 'red', width: '100%', height: '200px'}}></View> */}
<View className={styles['saleStatistic--filterBar']}>
<SelectSaleType onChange={onChangeSaleType}></SelectSaleType>
<SelectMarketingDepartment onChange={onChangeDepartment}></SelectMarketingDepartment>
<SelectTimePicker onChange={onChangeTimePicker}></SelectTimePicker>
<SelectTimePicker onChange={onChangeTimePicker} defaultValue='0' timeOptions={FilterTimeOptions}></SelectTimePicker>
</View>
<View className={styles['saleStatistic--content']}>
<LayoutBlock circle flexDirection='col'>
@@ -343,8 +177,11 @@ const saleStatistic = () => {
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
</View>
</ToolTip>
<View className={styles['totalSummary--current']}>{OrderForm.summary.value}</View>
<View className={styles['totalSummary--totalNum']}>（共 {OrderForm.summary.total} 匹）</View>
<View className={classnames(styles['totalSummary--current'], OrderForm.summary.value.cls)}>{OrderForm.summary.value.num}</View>
<View className={classnames(styles['totalSummary--totalNum'])}>
（共 <Text className={OrderForm.summary.total.cls}>{OrderForm.summary.total.num}</Text>
匹）
</View>
</View>
{Object.entries(OrderForm.form).map(([key, value]) => {
return (
@@ -358,7 +195,8 @@ const saleStatistic = () => {
</View>
</ToolTip>
}
desc={value.value}
desc={value.value.num}
customDescClassName={value.value.cls}
customClassName={styles['cell-desc']}></Cell>
)
})}
@@ -376,8 +214,10 @@ const saleStatistic = () => {
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
</View>
</ToolTip>
<View className={styles['totalSummary--current']}>{ArrangedForm.summary.value}</View>
<View className={styles['totalSummary--totalNum']}>（共计 {ArrangedForm.summary.total}）</View>
<View className={classnames(styles['totalSummary--current'], ArrangedForm.summary.value.cls)}>{ArrangedForm.summary.value.num}</View>
<View className={classnames(styles['totalSummary--totalNum'])}>
（共计 <Text className={ArrangedForm.summary.total.cls}>{ArrangedForm.summary.total.num}</Text>）
</View>
</View>
{Object.entries(ArrangedForm.form).map(([key, value], index) => {
return (
@@ -392,7 +232,8 @@ const saleStatistic = () => {
</View>
</ToolTip>
}
desc={value.value}
desc={value.value.num}
customDescClassName={value.value.cls}
customClassName={styles['cell-desc']}></Cell>
{(index + 1) % 3 === 0 && <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>}
</>
@@ -406,14 +247,15 @@ const saleStatistic = () => {
</View>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<View className={styles.totalSummary}>
<ToolTip placement='top' content={paymentAmountForm.summary.tips}>
<ToolTip placement='top' content={PaymentAmountForm.summary.tips}>
<View className='flex-row items-center'>
<Text className={styles['totalSummary--title']}>{paymentAmountForm.summary.summaryTitle}</Text>
<Text className={styles['totalSummary--title']}>{PaymentAmountForm.summary.summaryTitle}</Text>
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
</View>
</ToolTip>
<View className={classnames(styles['totalSummary--current'], PaymentAmountForm.summary.value.cls)}>{PaymentAmountForm.summary.value.num}</View>
</View>
{Object.entries(paymentAmountForm.form).map(([key, value]) => {
{Object.entries(PaymentAmountForm.form).map(([key, value]) => {
return (
<Cell
key={key}
@@ -425,7 +267,8 @@ const saleStatistic = () => {
</View>
</ToolTip>
}
desc={value.value}
desc={value.value.num}
customDescClassName={value.value.cls}
customClassName={styles['cell-desc']}></Cell>
)
})}
@@ -443,7 +286,9 @@ const saleStatistic = () => {
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
</View>
</ToolTip>
<View className={styles['totalSummary--current']}>{ReturnGoodsOrderForm.summary.value}</View>
<View className={classnames(styles['totalSummary--current'], ReturnGoodsOrderForm.summary.value.cls)}>
{ReturnGoodsOrderForm.summary.value.num}
</View>
</View>
{Object.entries(ReturnGoodsOrderForm.form).map(([key, value]) => {
return (
@@ -457,39 +302,282 @@ const saleStatistic = () => {
</View>
</ToolTip>
}
desc={value.value}
desc={value.value.num}
customDescClassName={value.value.cls}
customClassName={styles['cell-desc']}></Cell>
)
})}
</LayoutBlock>
{/* 销售排行 */}
<LayoutBlock circle flexDirection='col' customStyle={{ padding: 0 }}>
<View className={classnames(styles.rankingIndicatorTitle, 'flex-row justify-between')} style={{ position: 'relative' }}>
<View className='flex-row items-center'>
<Iconfont name='icon-paiming' size={32}></Iconfont>
<Text className={styles.title}>销售排行</Text>
</View>
<View style={{ width: '90px' }}>
<SelectSaleRankingIndicators onChange={onChangeIndicators}></SelectSaleRankingIndicators>
</View>
</View>
<View style={{ padding: '0 32rpx' }}>
<Divider direction='horizontal' customStyles={{ margin: '10rpx 0 30rpx 0' }}></Divider>
<View className={styles.rankingTabs} onClick={handleClickTab}>
{tabsConfig.map(item => {
return (
<View data-key={item.key} className={classnames(styles.rankingTab, item.key === currentKey ? styles.active : '')} key={item.key}>
{item.name}
</View>
)
})}
</View>
<Table columns={examplecolumns} dataSource={exampledataSource}></Table>
</View>
</LayoutBlock>
<RankingBlock saleType={saleType} saleDepartmentId={saleDepartmentId} date_min={dateRange.date_min} date_max={dateRange.date_max}></RankingBlock>
</View>
</View>
)
}
//需要传进来的数据示例
//需要传进来的表头数据示例
const productRankingColumns = [
{
key: 'index',
title: '编号',
dataIndex: 'index',
width: '20%',
},
{
key: 'product_name',
title: '面料名称',
dataIndex: 'product_name',
width: '20%',
ellipsis: {
isEllipsis: true,
rows: 2,
},
},
{
key: 'roll',
title: '匹数',
dataIndex: 'roll',
width: '30%',
},
{
key: 'sales_amount',
title: '交易金额',
dataIndex: 'sales_amount',
width: '30%',
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
},
]
//需要传进来的表头数据示例
const purchaserRankingColumns = [
{
key: 'index',
title: '编号',
dataIndex: 'index',
width: '20%',
},
{
key: 'purchaser_name',
title: '客户名称',
dataIndex: 'purchaser_name',
width: '20%',
ellipsis: {
isEllipsis: true,
rows: 2,
},
},
{
key: 'roll',
title: '交易匹数',
dataIndex: 'roll',
width: '30%',
},
{
key: 'sales_amount',
title: '交易金额',
dataIndex: 'sales_amount',
width: '30%',
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
},
]
//需要传进来的表头数据示例
const salesmanRankingColumns = [
{
key: 'index',
title: '编号',
dataIndex: 'index',
width: '20%',
},
{
key: 'sale_user_name',
title: '业务员名称',
dataIndex: 'sale_user_name',
width: '25%',
ellipsis: {
isEllipsis: true,
rows: 2,
},
},
{
key: 'roll',
title: '销售匹数',
dataIndex: 'roll',
width: '25%',
},
{
key: 'sales_amount',
title: '销售金额',
dataIndex: 'sales_amount',
width: '30%',
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
},
]
const tabsConfig = [
{
name: '面料',
key: 0,
},
{
name: '客户',
key: 1,
},
{
name: '业务员',
key: 2,
},
]
interface RankingBlockPropsType {
saleType?: number | null
saleDepartmentId?: number | null
date_min?: string
date_max?: string
}
// 销售排行
const RankingBlock = memo<RankingBlockPropsType>(props => {
const { saleType, saleDepartmentId, date_min, date_max } = props
const { fetchData: fetchProductRank } = ProductRankApi()
const { fetchData: fetchPurchaserRank } = PurchaserRankApi()
const { fetchData: fetchSalesmanRank } = SalesmanRankApi()
let [limit, setLimit] = useState(defaultLimit)
const [indicator, setIndicator] = useState<number | null>(null)
// 切换排行指标
const onChangeIndicators = useCallback((indicators: number) => {
console.log('indicators', indicators)
if (indicators === -1) {
setIndicator(null)
} else {
setIndicator(indicators)
}
}, [])
const [currentKey, setCurrentKey] = useState(tabsConfig[0].key)
const handleClickTab = event => {
const key = event.target.dataset.key
if (key === currentKey) return
setCurrentKey(key)
setLimit(defaultLimit)
}
const getData = useCallback(
async (tabKey: number) => {
let res: any
const payload = {
limit,
saleType,
saleDepartmentId,
date_min,
date_max,
data_form_status: indicator,
}
if (tabKey === 0) {
res = await fetchProductRank(getFilterData(payload))
} else if (tabKey === 1) {
res = await fetchPurchaserRank(getFilterData(payload))
} else {
res = await fetchSalesmanRank(getFilterData(payload))
}
if (res.data) {
console.log('排名', res.data)
if (tabKey === 0) {
setCurrentTable(() => ({
columns: productRankingColumns,
dataSource: {
list: res.data.list.map((item, index: number) => ({
key: index,
index: index + 1,
product_name: item.product_name || '--',
sales_amount: `￥${priceformat(item.sales_amount)}`,
roll: dataUnit(item.roll),
})),
total: res.data.total,
},
}))
} else if (tabKey === 1) {
setCurrentTable(() => ({
columns: purchaserRankingColumns,
dataSource: {
list: res.data.list.map((item, index: number) => ({
key: index,
index: index + 1,
purchaser_name: item.purchaser_name || '--',
sales_amount: `￥${priceformat(item.sales_amount)}`,
roll: dataUnit(item.roll),
})),
total: res.data.total,
},
}))
} else {
setCurrentTable(() => ({
columns: salesmanRankingColumns,
dataSource: {
list: res.data.list.map((item, index: number) => ({
key: index,
index: index + 1,
sale_user_name: item.sale_user_name || '--',
sales_amount: `￥${priceformat(item.sales_amount)}`,
roll: dataUnit(item.roll),
})),
total: res.data.total,
},
}))
}
}
},
[limit, saleType, saleDepartmentId, date_min, date_max, indicator],
)
useEffect(() => {
getData(currentKey)
}, [currentKey, getData])
const handleLoadMore = () => {
console.log('loadmore')
// TODO（优化）：结合接口的offset 和 limit 分段请求接口然后通过 push 将旧数据和新数据拼接起来
setLimit(v => v + defaultLimit)
}
const [currentTable, setCurrentTable] = useState<TablePropsType>({
columns: productRankingColumns,
})
return (
<>
{/* 销售排行 */}
<LayoutBlock circle flexDirection='col' customStyle={{ padding: 0 }}>
<View className={classnames(styles.rankingIndicatorTitle, 'flex-row justify-between')} style={{ position: 'relative' }}>
<View className='flex-row items-center'>
<Iconfont name='icon-paiming' size={32}></Iconfont>
<Text className={styles.title}>销售排行</Text>
</View>
<View style={{ width: '90px' }}>
<SelectSaleRankingIndicators onChange={onChangeIndicators}></SelectSaleRankingIndicators>
</View>
</View>
<View style={{ padding: '0 32rpx' }}>
<Divider direction='horizontal' customStyles={{ margin: '10rpx 0 30rpx 0' }}></Divider>
<View className={styles.rankingTabs} onClick={handleClickTab}>
{tabsConfig.map(item => {
return (
<View data-key={item.key} className={classnames(styles.rankingTab, item.key === currentKey ? styles.active : '')} key={item.key}>
{item.name}
</View>
)
})}
</View>
<Table columns={currentTable.columns} dataSource={currentTable.dataSource} onLoadMore={handleLoadMore}></Table>
</View>
</LayoutBlock>
</>
)
})
export default saleStatistic