feat(销售统计): 新增排行指标筛选功能

This commit is contained in:
xuan 2022-10-13 19:40:53 +08:00
parent 94b609039d
commit 4861cc9eb9
5 changed files with 397 additions and 286 deletions

View File

@ -38,7 +38,16 @@ export {
} from './takeDelivery/index' } from './takeDelivery/index'
// 关于销售统计 // 关于销售统计
export { EnumMarketingDepartmentApi, EnumSalesTypeApi, SalesmanRankApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, CensusApi } from './statistic/index' export {
EnumMarketingDepartmentApi,
EnumSalesTypeApi,
SalesmanRankApi,
ProductRankApi,
PurchaserRankApi,
SupplierRankApi,
SaleOrderDataFormdataFormStatus,
SaleOrderDataFormApi,
} from './statistic/index'
import { useRequest } from '@/use/useHttp' import { useRequest } from '@/use/useHttp'
/** /**

View File

@ -1,2 +1,2 @@
export { EnumSalesTypeApi, EnumMarketingDepartmentApi } from './enum' export { EnumSalesTypeApi, EnumMarketingDepartmentApi } from './enum'
export { CensusApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, SalesmanRankApi } from './saleStatistic' export { SaleOrderDataFormdataFormStatus, SaleOrderDataFormApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, SalesmanRankApi } from './saleStatistic'

View File

@ -1,14 +1,14 @@
import { useRequest } from '@/use/useHttp' import { useRequest } from '@/use/useHttp'
/** /**
* *
* @returns * @returns
*/ */
export const CensusApi = () => { export const SaleOrderDataFormApi = () => {
return useRequest({ return useRequest({
url: `/v1/mp/saleOrderDataForm`, url: `/v1/mp/saleOrderDataForm`,
method: "get" method: 'get',
}) })
} }
/** /**
@ -54,3 +54,11 @@ export const SalesmanRankApi = () => {
method: 'get', method: 'get',
}) })
} }
//获取排行指标枚举
export const SaleOrderDataFormdataFormStatus = () => {
return useRequest({
url: `/v1/mp/saleOrderDataForm/dataFormStatus`,
method: 'get',
})
}

View File

@ -1,7 +1,7 @@
import { FC, useEffect, useMemo, useState } from 'react' import { FC, useEffect, useMemo, useState } from 'react'
import DropDownItem from '../dropDown-item' import DropDownItem from '../dropDown-item'
import FilterButton from '../filterButton' import FilterButton from '../filterButton'
import { EnumMarketingDepartmentApi } from '@/api/index' import { SaleOrderDataFormdataFormStatus } from '@/api/index'
import { View } from '@tarojs/components' import { View } from '@tarojs/components'
import styles from './index.module.scss' import styles from './index.module.scss'
import classnames from 'classnames' import classnames from 'classnames'
@ -24,7 +24,7 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
const { onChange } = props const { onChange } = props
console.log(props) console.log(props)
const { fetchData } = EnumMarketingDepartmentApi() const { fetchData } = SaleOrderDataFormdataFormStatus()
const getData = async () => { const getData = async () => {
const res = await fetchData() const res = await fetchData()

View File

@ -1,7 +1,7 @@
import AtCalendar from '@/components/calendar' import { SaleOrderDataFormApi } from '@/api/statistic/saleStatistic'
import { getFilterData } from '@/common/util'
import Cell from '@/components/cell' import Cell from '@/components/cell'
import Divider from '@/components/Divider' import Divider from '@/components/Divider'
import DropDownItem, { DropDownOptions } from '@/components/dropDown-item'
import Iconfont from '@/components/iconfont/iconfont' import Iconfont from '@/components/iconfont/iconfont'
import LayoutBlock from '@/components/layoutBlock' import LayoutBlock from '@/components/layoutBlock'
import SelectMarketingDepartment from '@/components/SelectMarketingDepartment' import SelectMarketingDepartment from '@/components/SelectMarketingDepartment'
@ -9,136 +9,295 @@ import SelectSaleRankingIndicators from '@/components/SelectSaleRankingIndicator
import SelectSaleType from '@/components/SelectSaleType' import SelectSaleType from '@/components/SelectSaleType'
import SelectTimePicker, { ChangedValue } from '@/components/SelectTimePicker' import SelectTimePicker, { ChangedValue } from '@/components/SelectTimePicker'
import Table from '@/components/table' import Table from '@/components/table'
import TimePicker from '@/components/timePicker'
import ToolTip from '@/components/toolTips' import ToolTip from '@/components/toolTips'
import { View, Text } from '@tarojs/components' import { View, Text } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import classnames from 'classnames' import classnames from 'classnames'
import dayjs from 'dayjs' import { useCallback, useState } from 'react'
import { useState } from 'react'
import styles from './index.module.scss' import styles from './index.module.scss'
//需要传进来的数据示例
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 examplecolumns = [
{
key: 'username',
title: '编号',
dataIndex: 'username',
width: '20%',
},
{
key: 'count',
title: '面料名称',
dataIndex: 'count',
width: '20%',
ellipsis: {
isEllipsis: true,
rows: 2,
},
},
{
key: 'gb',
title: '匹数',
dataIndex: 'gb',
width: '30%',
},
{
key: 'dbd',
title: '交易金额',
dataIndex: 'dbd',
width: '30%',
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
},
]
// 销售统计
const saleStatistic = () => { const saleStatistic = () => {
const onChangeTimePicker = (value: ChangedValue) => { // 订单
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 [saleDepartmentId, setSaleDepartmentId] = useState<number | null>(null)
const [dateRange, setDateRange] = useState({
date_min: '',
date_max: '',
})
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){
// }
}
useDidShow(()=>{
getData()
})
const onChangeTimePicker = useCallback((value: ChangedValue) => {
console.log(value) console.log(value)
} setDateRange({
const onChangeSaleType = (saleType: number) => { date_max: value[0],
date_min: value[1],
})
}, [])
const onChangeSaleType = useCallback((saleType: number) => {
console.log('saleType', saleType) console.log('saleType', saleType)
} setSaleType(saleType)
const onChangeDepartment = (department: number) => { }, [])
const onChangeDepartment = useCallback((department: number) => {
console.log('department', department) console.log('department', department)
} setSaleDepartmentId(department)
}, [])
const onChangeIndicators = (indicators: number) => { const onChangeIndicators = (indicators: number) => {
console.log('indicators', indicators) console.log('indicators', indicators)
} }
//需要传进来的数据示例
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 examplecolumns = [
{
key: 'username',
title: '编号',
dataIndex: 'username',
width: '20%',
},
{
key: 'count',
title: '面料名称',
dataIndex: 'count',
width: '20%',
ellipsis: {
isEllipsis: true,
rows: 2,
},
},
{
key: 'gb',
title: '匹数',
dataIndex: 'gb',
width: '30%',
},
{
key: 'dbd',
title: '交易金额',
dataIndex: 'dbd',
width: '30%',
render: (text: string) => <Text className={styles.amount}>{text}</Text>,
},
]
const tabsConfig = [ const tabsConfig = [
{ {
name: '面料', name: '面料',
@ -178,33 +337,31 @@ const saleStatistic = () => {
</View> </View>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider> <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<View className={styles.totalSummary}> <View className={styles.totalSummary}>
<ToolTip placement='top' content='请填入提示信息'> <ToolTip placement='top' content={OrderForm.summary.tips}>
<View className='flex-row items-center'> <View className='flex-row items-center'>
<Text className={styles['totalSummary--title']}></Text> <Text className={styles['totalSummary--title']}>{OrderForm.summary.summaryTitle}</Text>
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont> <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
</View> </View>
</ToolTip> </ToolTip>
<View className={styles['totalSummary--current']}>3425</View> <View className={styles['totalSummary--current']}>{OrderForm.summary.value}</View>
<View className={styles['totalSummary--totalNum']}>432423</View> <View className={styles['totalSummary--totalNum']}> {OrderForm.summary.total} </View>
</View> </View>
<Cell {Object.entries(OrderForm.form).map(([key, value]) => {
title={ return (
<View className='flex-row items-center'> <Cell
<Text className={styles.title}></Text> key={key}
<Iconfont name='icon-tishi' size={36}></Iconfont> title={
</View> <ToolTip placement='top' content={value.tips}>
} <View className='flex-row items-center'>
desc={'323'} <Text className={styles.title}>{value.cellTitle}</Text>
customClassName={styles['cell-desc']}></Cell> <Iconfont name='icon-tishi' size={36}></Iconfont>
<Cell </View>
title={ </ToolTip>
<View className='flex-row items-center'> }
<Text className={styles.title}></Text> desc={value.value}
<Iconfont name='icon-tishi' size={36}></Iconfont> customClassName={styles['cell-desc']}></Cell>
</View> )
} })}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
</LayoutBlock> </LayoutBlock>
<LayoutBlock circle flexDirection='col'> <LayoutBlock circle flexDirection='col'>
<View className='flex-row items-center'> <View className='flex-row items-center'>
@ -213,96 +370,34 @@ const saleStatistic = () => {
</View> </View>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider> <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<View className={styles.totalSummary}> <View className={styles.totalSummary}>
<View className='flex-row items-center'> <ToolTip placement='top' content={ArrangedForm.summary.tips}>
<Text className={styles['totalSummary--title']}></Text> <View className='flex-row items-center'>
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont> <Text className={styles['totalSummary--title']}>{ArrangedForm.summary.summaryTitle}</Text>
</View> <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
<View className={styles['totalSummary--current']}>3425</View> </View>
<View className={styles['totalSummary--totalNum']}> ¥231.23w</View> </ToolTip>
<View className={styles['totalSummary--current']}>{ArrangedForm.summary.value}</View>
<View className={styles['totalSummary--totalNum']}> {ArrangedForm.summary.total}</View>
</View> </View>
<Cell {Object.entries(ArrangedForm.form).map(([key, value], index) => {
title={ return (
<View className='flex-row items-center'> <>
<Text className={styles.title}></Text> <Cell
<Iconfont name='icon-tishi' size={36}></Iconfont> key={key}
</View> title={
} <ToolTip placement='top' content={value.tips}>
desc={'323'} <View className='flex-row items-center'>
customClassName={styles['cell-desc']}></Cell> <Text className={styles.title}>{value.cellTitle}</Text>
<Cell <Iconfont name='icon-tishi' size={36}></Iconfont>
title={ </View>
<View className='flex-row items-center'> </ToolTip>
<Text className={styles.title}></Text> }
<Iconfont name='icon-tishi' size={36}></Iconfont> desc={value.value}
</View> customClassName={styles['cell-desc']}></Cell>
} {(index + 1) % 3 === 0 && <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>}
desc={'2972'} </>
customClassName={styles['cell-desc']}></Cell> )
<Cell })}
title={
<View className='flex-row items-center'>
<Text className={styles.title}></Text>
<Iconfont name='icon-tishi' size={36}></Iconfont>
</View>
}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<Cell
title={
<View className='flex-row items-center'>
<Text className={styles.title}></Text>
<Iconfont name='icon-tishi' size={36}></Iconfont>
</View>
}
desc={'323'}
customClassName={styles['cell-desc']}></Cell>
<Cell
title={
<View className='flex-row items-center'>
<Text className={styles.title}></Text>
<Iconfont name='icon-tishi' size={36}></Iconfont>
</View>
}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
<Cell
title={
<View className='flex-row items-center'>
<Text className={styles.title}></Text>
<Iconfont name='icon-tishi' size={36}></Iconfont>
</View>
}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<Cell
title={
<View className='flex-row items-center'>
<Text className={styles.title}></Text>
<Iconfont name='icon-tishi' size={36}></Iconfont>
</View>
}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
<Cell
title={
<View className='flex-row items-center'>
<Text className={styles.title}></Text>
<Iconfont name='icon-tishi' size={36}></Iconfont>
</View>
}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
<Cell
title={
<View className='flex-row items-center'>
<Text className={styles.title}></Text>
<Iconfont name='icon-tishi' size={36}></Iconfont>
</View>
}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
</LayoutBlock> </LayoutBlock>
<LayoutBlock circle flexDirection='col'> <LayoutBlock circle flexDirection='col'>
<View className='flex-row items-center'> <View className='flex-row items-center'>
@ -311,30 +406,29 @@ const saleStatistic = () => {
</View> </View>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider> <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<View className={styles.totalSummary}> <View className={styles.totalSummary}>
<View className='flex-row items-center'> <ToolTip placement='top' content={paymentAmountForm.summary.tips}>
<Text className={styles['totalSummary--title']}></Text> <View className='flex-row items-center'>
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont> <Text className={styles['totalSummary--title']}>{paymentAmountForm.summary.summaryTitle}</Text>
</View> <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
<View className={styles['totalSummary--current']}>56133.32</View> </View>
</ToolTip>
</View> </View>
<Cell {Object.entries(paymentAmountForm.form).map(([key, value]) => {
title={ return (
<View className='flex-row items-center'> <Cell
<Text className={styles.title}></Text> key={key}
<Iconfont name='icon-tishi' size={36}></Iconfont> title={
</View> <ToolTip placement='top' content={value.tips}>
} <View className='flex-row items-center'>
desc={'2972'} <Text className={styles.title}>{value.cellTitle}</Text>
customClassName={styles['cell-desc']}></Cell> <Iconfont name='icon-tishi' size={36}></Iconfont>
<Cell </View>
title={ </ToolTip>
<View className='flex-row items-center'> }
<Text className={styles.title}></Text> desc={value.value}
<Iconfont name='icon-tishi' size={36}></Iconfont> customClassName={styles['cell-desc']}></Cell>
</View> )
} })}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
</LayoutBlock> </LayoutBlock>
<LayoutBlock circle flexDirection='col'> <LayoutBlock circle flexDirection='col'>
<View className='flex-row items-center'> <View className='flex-row items-center'>
@ -343,30 +437,30 @@ const saleStatistic = () => {
</View> </View>
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider> <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
<View className={styles.totalSummary}> <View className={styles.totalSummary}>
<View className='flex-row items-center'> <ToolTip placement='top' content={ReturnGoodsOrderForm.summary.tips}>
<Text className={styles['totalSummary--title']}>退</Text> <View className='flex-row items-center'>
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont> <Text className={styles['totalSummary--title']}>{ReturnGoodsOrderForm.summary.summaryTitle}</Text>
</View> <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
<View className={styles['totalSummary--current']}>42</View> </View>
</ToolTip>
<View className={styles['totalSummary--current']}>{ReturnGoodsOrderForm.summary.value}</View>
</View> </View>
<Cell {Object.entries(ReturnGoodsOrderForm.form).map(([key, value]) => {
title={ return (
<View className='flex-row items-center'> <Cell
<Text className={styles.title}>退</Text> key={key}
<Iconfont name='icon-tishi' size={36}></Iconfont> title={
</View> <ToolTip placement='top' content={value.tips}>
} <View className='flex-row items-center'>
desc={'2972'} <Text className={styles.title}>{value.cellTitle}</Text>
customClassName={styles['cell-desc']}></Cell> <Iconfont name='icon-tishi' size={36}></Iconfont>
<Cell </View>
title={ </ToolTip>
<View className='flex-row items-center'> }
<Text className={styles.title}>退</Text> desc={value.value}
<Iconfont name='icon-tishi' size={36}></Iconfont> customClassName={styles['cell-desc']}></Cell>
</View> )
} })}
desc={'2972'}
customClassName={styles['cell-desc']}></Cell>
</LayoutBlock> </LayoutBlock>
{/* 销售排行 */} {/* 销售排行 */}
<LayoutBlock circle flexDirection='col' customStyle={{ padding: 0 }}> <LayoutBlock circle flexDirection='col' customStyle={{ padding: 0 }}>