Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/spider_cloud_warehouse into 订单页
This commit is contained in:
Haiyi
commit
d5190ba439
@ -38,7 +38,16 @@ export {
|
||||
} 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'
|
||||
/**
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export { EnumSalesTypeApi, EnumMarketingDepartmentApi } from './enum'
|
||||
export { CensusApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, SalesmanRankApi } from './saleStatistic'
|
||||
export { SaleOrderDataFormdataFormStatus, SaleOrderDataFormApi, ProductRankApi, PurchaserRankApi, SupplierRankApi, SalesmanRankApi } from './saleStatistic'
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { useRequest } from '@/use/useHttp'
|
||||
|
||||
/**
|
||||
* 客户列表
|
||||
* @returns
|
||||
* 销售统计数据
|
||||
* @returns
|
||||
*/
|
||||
export const CensusApi = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mp/saleOrderDataForm`,
|
||||
method: "get"
|
||||
})
|
||||
export const SaleOrderDataFormApi = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mp/saleOrderDataForm`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@ -54,3 +54,11 @@ export const SalesmanRankApi = () => {
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
//获取排行指标枚举
|
||||
export const SaleOrderDataFormdataFormStatus = () => {
|
||||
return useRequest({
|
||||
url: `/v1/mp/saleOrderDataForm/dataFormStatus`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
@ -141,7 +141,7 @@ export const formatMillionYuan = (num, digit = 10000) => {
|
||||
* @param {*} x
|
||||
* @returns
|
||||
*/
|
||||
export const toDecimal2 = (x) => {
|
||||
export const toDecimal2 = x => {
|
||||
var f = parseFloat(x)
|
||||
if (isNaN(f)) {
|
||||
return 0
|
||||
@ -203,3 +203,55 @@ export const numberWithCommas = ({ number = 0, digit = 2 }) => {
|
||||
return 0.0
|
||||
}
|
||||
}
|
||||
|
||||
// 计算数值大于指定值
|
||||
export const setPriceUnit = (num, cls) => {
|
||||
if (cls) {
|
||||
let res = formatMillionYuan(num, 1000)
|
||||
return {
|
||||
cls: res.million ? cls : '',
|
||||
num: res.num,
|
||||
}
|
||||
} else if (num > 100000000) {
|
||||
let res = formatMillionYuan(num, 100000000)
|
||||
return {
|
||||
cls: res.million ? 's-e' : '',
|
||||
num: res.num,
|
||||
}
|
||||
} else {
|
||||
let res = formatMillionYuan(num)
|
||||
return {
|
||||
cls: res.million ? 's-w' : '',
|
||||
num: res.num,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//不四舍五入, val:原数据,num:保留位数
|
||||
const noScale = (val, num = 2) => {
|
||||
val = parseFloat(val)
|
||||
num = parseInt(num)
|
||||
const power = Math.pow(10, num)
|
||||
val = val * power + ''
|
||||
val = val.split('.')[0]
|
||||
val = parseInt(val) / power
|
||||
return val
|
||||
}
|
||||
|
||||
//处理数据单位(自然数)
|
||||
export const dataUnit = val => {
|
||||
let newVal = ''
|
||||
val = parseFloat(val)
|
||||
if (val >= 100000000) {
|
||||
newVal = noScale(val / 100000000) + '亿'
|
||||
} else if (val >= 10000000) {
|
||||
newVal = noScale(val / 10000000) + 'kw'
|
||||
} else if (val >= 10000) {
|
||||
newVal = noScale(val / 10000) + 'w'
|
||||
} else if (val >= 1000) {
|
||||
newVal = noScale(val / 1000) + 'k'
|
||||
} else {
|
||||
newVal = val
|
||||
}
|
||||
return newVal
|
||||
}
|
||||
|
||||
@ -117,7 +117,7 @@ function delay(delayTime = 25): Promise<null> {
|
||||
})
|
||||
}
|
||||
|
||||
function delayQuerySelector(
|
||||
export function delayQuerySelector(
|
||||
selectorStr: string,
|
||||
delayTime = 500
|
||||
): Promise<any[]> {
|
||||
@ -170,6 +170,5 @@ export const shareShop = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
export {
|
||||
delayQuerySelector
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ const LoadMore: FC<LoadMorePropsType> = props => {
|
||||
component = <LoadingCard title={loadingText}></LoadingCard>
|
||||
} else if (status === 'more') {
|
||||
component = (
|
||||
<View onClick={handleShowMore}>
|
||||
<View className='flex-row' onClick={handleShowMore}>
|
||||
<Text style={{ marginRight: '5px' }}>{moreText}</Text>
|
||||
<Iconfont name='icon-zhankai' size={32}></Iconfont>
|
||||
</View>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FC, useEffect, useMemo, useState } from 'react'
|
||||
import { FC, memo, useEffect, useMemo, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import { EnumMarketingDepartmentApi } from '@/api/index'
|
||||
@ -17,7 +17,7 @@ type EnumList = {
|
||||
name: string
|
||||
}
|
||||
// 营销部门
|
||||
const SelectSaleType: FC<SelectSaleTypeProps> = props => {
|
||||
const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
|
||||
|
||||
const selectName = '营销部门'
|
||||
|
||||
@ -64,5 +64,5 @@ const SelectSaleType: FC<SelectSaleTypeProps> = props => {
|
||||
</View>
|
||||
</DropDownItem>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default SelectSaleType
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { FC, useEffect, useMemo, useState } from 'react'
|
||||
import { FC, memo, useEffect, useMemo, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import { EnumMarketingDepartmentApi } from '@/api/index'
|
||||
import { SaleOrderDataFormdataFormStatus } from '@/api/index'
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
@ -18,13 +18,13 @@ type EnumList = {
|
||||
name: string
|
||||
}
|
||||
// 销售排行指标
|
||||
const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
|
||||
const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = memo((props) => {
|
||||
|
||||
const selectName = '排行指标'
|
||||
|
||||
const { onChange } = props
|
||||
console.log(props)
|
||||
const { fetchData } = EnumMarketingDepartmentApi()
|
||||
const { fetchData } = SaleOrderDataFormdataFormStatus()
|
||||
|
||||
const getData = async () => {
|
||||
const res = await fetchData()
|
||||
@ -65,5 +65,5 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
|
||||
</View>
|
||||
</DropDownItem>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default SelectSaleRankingIndicators
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FC, useEffect, useMemo, useState } from 'react'
|
||||
import { FC, memo, useEffect, useMemo, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import { EnumSalesTypeApi } from '@/api/index'
|
||||
@ -9,7 +9,7 @@ type ChangedValue = string | number
|
||||
|
||||
interface SelectSaleTypeProps {
|
||||
onChange?: (value: ChangedValue) => void
|
||||
defaultValue?: string
|
||||
defaultValue?: ChangedValue
|
||||
}
|
||||
|
||||
type EnumList = {
|
||||
@ -18,9 +18,9 @@ type EnumList = {
|
||||
name: string
|
||||
}
|
||||
// 销售类型
|
||||
const SelectSaleType: FC<SelectSaleTypeProps> = props => {
|
||||
const SelectSaleType: FC<SelectSaleTypeProps> = memo((props) => {
|
||||
const selectName = '销售类型'
|
||||
const { onChange } = props
|
||||
const { onChange, defaultValue = 0 } = props
|
||||
console.log(props)
|
||||
const { fetchData } = EnumSalesTypeApi()
|
||||
|
||||
@ -35,7 +35,7 @@ const SelectSaleType: FC<SelectSaleTypeProps> = props => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const [currentValue, setCurrentValue] = useState<ChangedValue>(-1)
|
||||
const [currentValue, setCurrentValue] = useState<ChangedValue>(defaultValue)
|
||||
|
||||
const handleClick = (value: ChangedValue) => {
|
||||
setCurrentValue(value)
|
||||
@ -63,5 +63,5 @@ const SelectSaleType: FC<SelectSaleTypeProps> = props => {
|
||||
</View>
|
||||
</DropDownItem>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default SelectSaleType
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { formatDateTime } from '@/common/format'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import dayjs from 'dayjs'
|
||||
import { FC, useState } from 'react'
|
||||
import { FC, memo, useRef, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
@ -11,6 +11,8 @@ import styles from './index.module.scss'
|
||||
export type ChangedValue = string[]
|
||||
|
||||
interface SelectSaleTypeProps {
|
||||
defaultValue?: Key // 默认值
|
||||
timeOptions?: {[Property: string]: Value} // 支持自定义 时间配置
|
||||
onChange?: (value: ChangedValue) => void
|
||||
}
|
||||
|
||||
@ -65,7 +67,7 @@ const FilterTimeOptions = {
|
||||
.add(0, 'day')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
},
|
||||
'6': {
|
||||
'custom': {
|
||||
name: '自定义时间',
|
||||
date_min: '',
|
||||
date_max: '',
|
||||
@ -75,10 +77,13 @@ const FilterTimeOptions = {
|
||||
type Key = keyof typeof FilterTimeOptions
|
||||
type Value = typeof FilterTimeOptions[Key]
|
||||
|
||||
const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
|
||||
const { onChange: change } = props
|
||||
const SelectTimePicker: FC<SelectSaleTypeProps> = memo((props) => {
|
||||
const { onChange: change, defaultValue = '0', timeOptions = FilterTimeOptions } = props
|
||||
// rerender 的时候需要更新 ref 的值
|
||||
const Options = useRef({ ...timeOptions, 'custom': FilterTimeOptions['custom'] })
|
||||
Options.current = { ...timeOptions, 'custom': FilterTimeOptions['custom'] }
|
||||
|
||||
const [currentValue, setCurrentValue] = useState('0')
|
||||
const [currentValue, setCurrentValue] = useState(defaultValue)
|
||||
|
||||
const [currentDate, setCurrentDate] = useState({
|
||||
start: new Date().toLocaleDateString(),
|
||||
@ -96,10 +101,11 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
|
||||
|
||||
const handleClick = (key: Key) => {
|
||||
setCurrentValue(key)
|
||||
change?.([FilterTimeOptions[key].date_min, FilterTimeOptions[key].date_max])
|
||||
setCustomFilterButtonText('自定义时间')
|
||||
change?.([Options.current[key].date_min, Options.current[key].date_max])
|
||||
customFilterButtonText.current = '自定义时间'
|
||||
}
|
||||
// 选择时间
|
||||
|
||||
// 选择自定义时间
|
||||
const onSelectDate = event => {
|
||||
console.log(event?.value, 'event?.value?.start')
|
||||
setCurrentDate({
|
||||
@ -107,27 +113,28 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
|
||||
end: event?.value?.end,
|
||||
})
|
||||
setShowTime(false)
|
||||
setCustomFilterButtonText(`${formatDateTime(event?.value?.start, 'YYYY年MM月DD日')} 至 ${formatDateTime(event?.value?.end, 'YYYY年MM月DD日')}`)
|
||||
customFilterButtonText.current = `${formatDateTime(event?.value?.start, 'YYYY年MM月DD日')} 至 ${formatDateTime(event?.value?.end, 'YYYY年MM月DD日')}`
|
||||
change?.([event?.value?.start, event?.value?.end])
|
||||
}
|
||||
|
||||
const [customFilterButtonText, setCustomFilterButtonText] = useState('自定义时间')
|
||||
// const [customFilterButtonText, setCustomFilterButtonText] = useState('自定义时间')
|
||||
const customFilterButtonText = useRef('自定义时间')
|
||||
|
||||
// 点击自定义时间
|
||||
const handleCustomTime = () => {
|
||||
setCurrentValue('6')
|
||||
setCurrentValue('custom')
|
||||
setShowTime(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropDownItem
|
||||
title={currentValue === '0' ? '查询日期' : FilterTimeOptions[currentValue].name}
|
||||
title={currentValue === '0' ? '查询日期' : Options.current[currentValue].name}
|
||||
direction='down'
|
||||
value={currentValue}
|
||||
activeColor='#337fff'>
|
||||
<View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
|
||||
{Object.entries(FilterTimeOptions)
|
||||
{Object.entries(Options.current)
|
||||
.slice(0, -1)
|
||||
.map(([key, value]) => {
|
||||
return (
|
||||
@ -136,14 +143,14 @@ const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={handleCustomTime}>
|
||||
<Text>{customFilterButtonText}</Text>
|
||||
<IconFont name='icon-chakanquanbukehu' color={'6' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={'custom' === currentValue} onClick={handleCustomTime}>
|
||||
<Text>{customFilterButtonText.current}</Text>
|
||||
<IconFont name='icon-chakanquanbukehu' color={'custom' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
</FilterButton>
|
||||
</View>
|
||||
</DropDownItem>
|
||||
<TimePickerPopup start={currentDate.start} end={currentDate.end} showTime={showTime} closePopup={handClose} onSelectDate={onSelectDate}></TimePickerPopup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
export default SelectTimePicker
|
||||
|
||||
@ -11,10 +11,11 @@ interface CellPropsType {
|
||||
onClick?: () => void
|
||||
customStyle?: React.CSSProperties
|
||||
customClassName?: string
|
||||
customDescClassName?: string
|
||||
iconName?: IconNames
|
||||
}
|
||||
const Cell:FC<CellPropsType> = (props) => {
|
||||
const {title, desc, isLink = false, customClassName, customStyle, onClick, iconName} = props
|
||||
const { title, desc, isLink = false, customClassName, customStyle, onClick, iconName, customDescClassName } = props
|
||||
|
||||
const onClickRef = useRef(onClick)
|
||||
onClickRef.current = onClick
|
||||
@ -31,7 +32,7 @@ const Cell:FC<CellPropsType> = (props) => {
|
||||
<View>{title}</View>
|
||||
</View>
|
||||
<View className={styles.desc}>
|
||||
<Text className={styles.descText}>{desc}</Text>
|
||||
<Text className={classNames(styles.descText, customDescClassName)}>{desc}</Text>
|
||||
{isLink && <IconFont name='icon-chakanquanbukehu' size={46} color='inherit'></IconFont>}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
&--title {
|
||||
position: relative;
|
||||
z-index: 2000;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
|
||||
@ -9,7 +9,8 @@ export type StatusParam = 0|1|2|3
|
||||
type Params = {
|
||||
styleObj?: React.CSSProperties
|
||||
selfonScrollToLower?: () => void
|
||||
hasMore?: boolean
|
||||
enableLoadMoreStatus?: boolean
|
||||
safeAreaInsetBottom?: boolean
|
||||
moreStatus?: boolean
|
||||
statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
|
||||
children?: ReactNode
|
||||
@ -35,7 +36,8 @@ export default memo(
|
||||
selfOnRefresherRefresh,
|
||||
selfOnRefresherRestore,
|
||||
selfOnRefresherAbort,
|
||||
hasMore = true,
|
||||
safeAreaInsetBottom=true,
|
||||
enableLoadMoreStatus = true,
|
||||
children,
|
||||
lowerThresholdNum = 5,
|
||||
paddingBottom = 0,
|
||||
@ -43,7 +45,7 @@ export default memo(
|
||||
refresherEnabled = false,
|
||||
moreStatus = true,
|
||||
statusMore = 0,
|
||||
enableBackToTop=true,
|
||||
enableBackToTop = true,
|
||||
}: Params) => {
|
||||
const scrollToLower = () => {
|
||||
selfonScrollToLower?.()
|
||||
@ -51,7 +53,7 @@ export default memo(
|
||||
const scrollToUpper = () => {
|
||||
selfOnScrollToUpper?.()
|
||||
}
|
||||
const scroll = (e) => {
|
||||
const scroll = e => {
|
||||
selfOnScroll?.(e)
|
||||
}
|
||||
const refresherPulling = () => {
|
||||
@ -74,32 +76,17 @@ export default memo(
|
||||
}
|
||||
}, [statusMore])
|
||||
|
||||
return (
|
||||
<>
|
||||
<ScrollView
|
||||
style={styleObj}
|
||||
className={style.scroll_main}
|
||||
scrollY
|
||||
onScrollToLower={() => scrollToLower()}
|
||||
onScrollToUpper={() => scrollToUpper()}
|
||||
onScroll={(e) => scroll(e)}
|
||||
lowerThreshold={lowerThresholdNum}
|
||||
refresherEnabled={refresherEnabled}
|
||||
refresherTriggered={refresherTriggered}
|
||||
onRefresherPulling={() => refresherPulling()}
|
||||
onRefresherRefresh={() => refresherRefresh()}
|
||||
onRefresherRestore={() => refresherRestore()}
|
||||
onRefresherAbort={() => refresherAbort()}
|
||||
refresherBackground='#F8F8F8'
|
||||
enableBackToTop={enableBackToTop}
|
||||
scrollTop={scrollTop}>
|
||||
{(!moreStatus && (
|
||||
<>
|
||||
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
|
||||
{children}
|
||||
</View>
|
||||
</>
|
||||
)) || (
|
||||
|
||||
const component = () => {
|
||||
if(enableLoadMoreStatus){
|
||||
if (!moreStatus){
|
||||
return (
|
||||
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}else{
|
||||
return (
|
||||
<>
|
||||
{(statusMore == 2 || statusMore == 3) && (
|
||||
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
|
||||
@ -117,9 +104,39 @@ export default memo(
|
||||
{statusMore == 0 && <LoadingCard />}
|
||||
{statusMore == 1 && <LoadingCard loadingIcon={false} title='暂无数据' />}
|
||||
</>
|
||||
)}
|
||||
)
|
||||
}
|
||||
|
||||
}else{
|
||||
return (
|
||||
<View style={{ paddingBottom: paddingBottom + 'rpx' }} className={style.scrollViewCon}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
<View className='common_safe_area_y'></View>
|
||||
return (
|
||||
<>
|
||||
<ScrollView
|
||||
style={styleObj}
|
||||
className={style.scroll_main}
|
||||
scrollY
|
||||
onScrollToLower={() => scrollToLower()}
|
||||
onScrollToUpper={() => scrollToUpper()}
|
||||
onScroll={e => scroll(e)}
|
||||
lowerThreshold={lowerThresholdNum}
|
||||
refresherEnabled={refresherEnabled}
|
||||
refresherTriggered={refresherTriggered}
|
||||
onRefresherPulling={() => refresherPulling()}
|
||||
onRefresherRefresh={() => refresherRefresh()}
|
||||
onRefresherRestore={() => refresherRestore()}
|
||||
onRefresherAbort={() => refresherAbort()}
|
||||
refresherBackground='#F8F8F8'
|
||||
enableBackToTop={enableBackToTop}
|
||||
scrollTop={scrollTop}>
|
||||
{component()}
|
||||
{safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
|
||||
</ScrollView>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 80px;
|
||||
padding: 0 30px;
|
||||
height: 72px;
|
||||
border: 1px solid $color_main;
|
||||
background-color: #fff;
|
||||
|
||||
@ -72,8 +72,10 @@ $am-ms: 200ms;
|
||||
min-height: 200px;
|
||||
width: 100%;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
box-shadow: 1px 1px 1px 1px #f2f2f2;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
&-withShadow {
|
||||
box-shadow: 0px -1px 9px -1px #333;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer_container_top {
|
||||
@ -82,8 +84,10 @@ $am-ms: 200ms;
|
||||
min-height: 200px;
|
||||
width: 100%;
|
||||
border-radius: 0 0 20px 20px;
|
||||
box-shadow: 6px 6px 5px 14px red;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
&-withShadow {
|
||||
box-shadow: 0 1px 9px -1px #333;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer_container_right {
|
||||
@ -93,5 +97,8 @@ $am-ms: 200ms;
|
||||
min-width: 300px;
|
||||
border-radius: 20px 0 0 20px;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
&-withShadow {
|
||||
box-shadow: -1px 0px 9px -1px #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,8 +21,8 @@ export interface Params extends PopupEvent {
|
||||
position?: 'bottom' | 'top' | 'right' //弹出位置
|
||||
customStyle?: React.CSSProperties
|
||||
overlayStyle?: React.CSSProperties
|
||||
safeAreaInsetBottom?: boolean // 是否为iphoneX提供小黑条适配
|
||||
showOverLay?: boolean // 是否显示遮罩层
|
||||
safeAreaInsetBottom?: boolean // 是否为iphoneX提供小黑条适配
|
||||
showOverLay?: boolean // 是否显示遮罩层
|
||||
}
|
||||
export default memo(
|
||||
({
|
||||
@ -53,38 +53,38 @@ export default memo(
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
||||
clearTimeout(animationTime.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={style.drawer_main}>
|
||||
<View catchMove={true} className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
|
||||
<View
|
||||
className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show, [style['drawer_mask--hidden']]: !showOverLay })}
|
||||
onClick={onClose}
|
||||
style={overlayStyle}></View>
|
||||
<View
|
||||
style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}` }}
|
||||
className={classnames(style.drawer_container, style['drawer_container_' + position], { [style.drawer_container_active]: show })}
|
||||
onClick={e => e.stopPropagation()}>
|
||||
{showTitle && <View className={style.drawer_container_title}>{title}</View>}
|
||||
{showIconButton && (
|
||||
<View className={style.common_close_btn_icon}>
|
||||
<CloseBtnIcon onClose={onClose} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View id='drawerContainerContext' className={style.drawer_container_context}>
|
||||
{children}
|
||||
<View className={style.drawer_main}>
|
||||
<View catchMove={true} className={classnames(style.drawer, show ? style.drawer_active : '')} style={customStyle}>
|
||||
<View
|
||||
className={classnames(style.drawer_mask, { [style.drawer_mask_active]: show, [style['drawer_mask--hidden']]: !showOverLay })}
|
||||
onClick={onClose}
|
||||
style={overlayStyle}></View>
|
||||
<View
|
||||
style={{ position: `${isFixed == true ? 'fixed' : 'absolute'}` }}
|
||||
className={classnames(style.drawer_container, style['drawer_container_' + position], {
|
||||
[style.drawer_container_active]: show,
|
||||
[style[`drawer_container_${position}-withShadow`]]: !showOverLay,
|
||||
})}
|
||||
onClick={e => e.stopPropagation()}>
|
||||
{showTitle && <View className={style.drawer_container_title}>{title}</View>}
|
||||
{showIconButton && (
|
||||
<View className={style.common_close_btn_icon}>
|
||||
<CloseBtnIcon onClose={onClose} />
|
||||
</View>
|
||||
{safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
|
||||
)}
|
||||
|
||||
<View id='drawerContainerContext' className={style.drawer_container_context}>
|
||||
{children}
|
||||
</View>
|
||||
{safeAreaInsetBottom && <View className='common_safe_area_y'></View>}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
</View>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
@ -106,7 +106,7 @@ export default memo(({list = [],
|
||||
}
|
||||
</ScrollView>
|
||||
<View className={styles.sideBar_con}>
|
||||
<InfiniteScroll statusMore={statusMore} hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
|
||||
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
|
||||
{children}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
@ -114,4 +114,4 @@ export default memo(({list = [],
|
||||
|
||||
</>
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { ScrollView, View, Text } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { FC, useState } from 'react'
|
||||
import { FC, useCallback, useMemo, useState } from 'react'
|
||||
import Iconfont from '../iconfont/iconfont'
|
||||
import InfiniteScroll from '../infiniteScroll'
|
||||
import LoadMore, { LoadMoreStatus } from '../LoadMore'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type ColumnsType = {
|
||||
export type ColumnsType = {
|
||||
title: string
|
||||
dataIndex: string
|
||||
width: string
|
||||
@ -15,29 +15,26 @@ type ColumnsType = {
|
||||
ellipsis?: boolean | { isEllipsis: boolean; rows: number }
|
||||
}
|
||||
|
||||
type RecordType = {
|
||||
export type RecordType = {
|
||||
key: string
|
||||
[Property: string]: any
|
||||
}
|
||||
|
||||
interface TablePropsType {
|
||||
export interface TablePropsType {
|
||||
columns: ColumnsType[]
|
||||
dataSource: RecordType[]
|
||||
dataSource?: { list: RecordType[]; total: number }
|
||||
onLoadMore?: () => void
|
||||
height?: number
|
||||
}
|
||||
|
||||
const Table: FC<TablePropsType> = props => {
|
||||
const { columns, dataSource } = props
|
||||
|
||||
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
|
||||
const [loadMoreStatus, setLoadMoreStatus] = useState<LoadMoreStatus>('loading')
|
||||
const { columns, dataSource, onLoadMore, height=400 } = props
|
||||
|
||||
const handleShowMore = () => {
|
||||
|
||||
onLoadMore && onLoadMore()
|
||||
}
|
||||
|
||||
const getColumnStyle = (columnConfig: ColumnsType) => {
|
||||
const getColumnStyle = useCallback((columnConfig: ColumnsType) => {
|
||||
const columnStyle = {}
|
||||
if (typeof columnConfig.ellipsis === 'boolean' && columnConfig.ellipsis) {
|
||||
columnStyle[styles.ellipsis_1] = true
|
||||
@ -51,13 +48,25 @@ const Table: FC<TablePropsType> = props => {
|
||||
}
|
||||
}
|
||||
return columnStyle
|
||||
}
|
||||
}, [])
|
||||
|
||||
const loadMoreComponent = useMemo(() => {
|
||||
if (dataSource) {
|
||||
if (dataSource.list.length < dataSource.total) {
|
||||
return <LoadMore status='more' onClick={handleShowMore}></LoadMore>
|
||||
} else if (dataSource.list.length >= dataSource.total) {
|
||||
return <LoadMore status='noMore' onClick={handleShowMore}></LoadMore>
|
||||
}
|
||||
} else {
|
||||
return <LoadMore status='loading' onClick={handleShowMore}></LoadMore>
|
||||
}
|
||||
}, [dataSource])
|
||||
|
||||
const sourceContainer = () => {
|
||||
return (
|
||||
<>
|
||||
{!!dataSource.length &&
|
||||
dataSource.map(source => {
|
||||
{!!dataSource?.list?.length &&
|
||||
dataSource.list.map(source => {
|
||||
return (
|
||||
<View className={classnames(styles.tr, styles['bg-line'])} key={source.key}>
|
||||
{columns.map(column => {
|
||||
@ -81,9 +90,7 @@ const Table: FC<TablePropsType> = props => {
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
{showMore && (
|
||||
<LoadMore status={loadMoreStatus} onClick={handleShowMore}></LoadMore>
|
||||
)}
|
||||
{loadMoreComponent}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -99,7 +106,9 @@ const Table: FC<TablePropsType> = props => {
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<ScrollView>{sourceContainer()}</ScrollView>
|
||||
<InfiniteScroll enableLoadMoreStatus={false} safeAreaInsetBottom={true}>
|
||||
{sourceContainer()}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
181
src/pages/saleStatistic/config.ts
Normal file
181
src/pages/saleStatistic/config.ts
Normal 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: '',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -87,3 +87,5 @@ page {
|
||||
.amount {
|
||||
color: $color_main;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,166 +1,159 @@
|
||||
import AtCalendar from '@/components/calendar'
|
||||
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'
|
||||
import DropDownItem, { DropDownOptions } from '@/components/dropDown-item'
|
||||
import Iconfont from '@/components/iconfont/iconfont'
|
||||
import LayoutBlock from '@/components/layoutBlock'
|
||||
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 TimePicker from '@/components/timePicker'
|
||||
import Table, { TablePropsType } from '@/components/table'
|
||||
import ToolTip from '@/components/toolTips'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import dayjs from 'dayjs'
|
||||
import { useState } from 'react'
|
||||
import { memo, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import { OrderForm, ArrangedForm, PaymentAmountForm, ReturnGoodsOrderForm } from './config'
|
||||
|
||||
//处理金额(后端单位分，转元)
|
||||
const priceformat = (val: number) => {
|
||||
return dataUnit(val / 100)
|
||||
}
|
||||
|
||||
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`,
|
||||
},
|
||||
'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`,
|
||||
},
|
||||
'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`,
|
||||
},
|
||||
'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 onChangeTimePicker = (value: ChangedValue) => {
|
||||
const { fetchData } = SaleOrderDataFormApi()
|
||||
|
||||
const [saleType, setSaleType] = useState<number | null>(0)
|
||||
const [saleDepartmentId, setSaleDepartmentId] = useState<number | null>(null)
|
||||
const [dateRange, setDateRange] = useState({
|
||||
date_min: FilterTimeOptions[0].date_min,
|
||||
date_max: FilterTimeOptions[0].date_max,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [saleType, saleDepartmentId, dateRange])
|
||||
|
||||
const getData = async () => {
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
const onChangeTimePicker = useCallback((value: ChangedValue) => {
|
||||
console.log(value)
|
||||
}
|
||||
const onChangeSaleType = (saleType: number) => {
|
||||
setDateRange({
|
||||
date_max: value[1],
|
||||
date_min: value[0],
|
||||
})
|
||||
}, [])
|
||||
|
||||
const onChangeSaleType = useCallback((saleType: number) => {
|
||||
console.log('saleType', saleType)
|
||||
}
|
||||
const onChangeDepartment = (department: number) => {
|
||||
// 全部
|
||||
if (saleType === -1) {
|
||||
setSaleType(null)
|
||||
} else {
|
||||
setSaleType(saleType)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const onChangeDepartment = useCallback((department: number) => {
|
||||
console.log('department', department)
|
||||
}
|
||||
|
||||
const onChangeIndicators = (indicators: number) => {
|
||||
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 = [
|
||||
{
|
||||
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)
|
||||
}
|
||||
// 全部
|
||||
if (department === -1) {
|
||||
setSaleDepartmentId(null)
|
||||
} else {
|
||||
setSaleDepartmentId(department)
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className={styles.saleStatistic}>
|
||||
@ -168,7 +161,7 @@ const saleStatistic = () => {
|
||||
<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'>
|
||||
@ -178,33 +171,35 @@ const saleStatistic = () => {
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
|
||||
<View className={styles.totalSummary}>
|
||||
<ToolTip placement='top' content='请填入提示信息'>
|
||||
<ToolTip placement='top' content={OrderForm.summary.tips}>
|
||||
<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>
|
||||
</View>
|
||||
</ToolTip>
|
||||
<View className={styles['totalSummary--current']}>3425</View>
|
||||
<View className={styles['totalSummary--totalNum']}>（共432423匹）</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>
|
||||
<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>
|
||||
{Object.entries(OrderForm.form).map(([key, value]) => {
|
||||
return (
|
||||
<Cell
|
||||
key={key}
|
||||
title={
|
||||
<ToolTip placement='top' content={value.tips}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles.title}>{value.cellTitle}</Text>
|
||||
<Iconfont name='icon-tishi' size={36}></Iconfont>
|
||||
</View>
|
||||
</ToolTip>
|
||||
}
|
||||
desc={value.value.num}
|
||||
customDescClassName={value.value.cls}
|
||||
customClassName={styles['cell-desc']}></Cell>
|
||||
)
|
||||
})}
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle flexDirection='col'>
|
||||
<View className='flex-row items-center'>
|
||||
@ -213,96 +208,37 @@ const saleStatistic = () => {
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
|
||||
<View className={styles.totalSummary}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles['totalSummary--title']}>已配布匹数</Text>
|
||||
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
|
||||
<ToolTip placement='top' content={ArrangedForm.summary.tips}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles['totalSummary--title']}>{ArrangedForm.summary.summaryTitle}</Text>
|
||||
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
|
||||
</View>
|
||||
</ToolTip>
|
||||
<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 className={styles['totalSummary--current']}>3425</View>
|
||||
<View className={styles['totalSummary--totalNum']}>（共计 ¥231.23w）</View>
|
||||
</View>
|
||||
<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={'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>
|
||||
{Object.entries(ArrangedForm.form).map(([key, value], index) => {
|
||||
return (
|
||||
<>
|
||||
<Cell
|
||||
key={key}
|
||||
title={
|
||||
<ToolTip placement='top' content={value.tips}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles.title}>{value.cellTitle}</Text>
|
||||
<Iconfont name='icon-tishi' size={36}></Iconfont>
|
||||
</View>
|
||||
</ToolTip>
|
||||
}
|
||||
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>}
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle flexDirection='col'>
|
||||
<View className='flex-row items-center'>
|
||||
@ -311,30 +247,31 @@ const saleStatistic = () => {
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
|
||||
<View className={styles.totalSummary}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles['totalSummary--title']}>货款金额</Text>
|
||||
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
|
||||
</View>
|
||||
<View className={styles['totalSummary--current']}>56133.32</View>
|
||||
<ToolTip placement='top' content={PaymentAmountForm.summary.tips}>
|
||||
<View className='flex-row items-center'>
|
||||
<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>
|
||||
<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>
|
||||
{Object.entries(PaymentAmountForm.form).map(([key, value]) => {
|
||||
return (
|
||||
<Cell
|
||||
key={key}
|
||||
title={
|
||||
<ToolTip placement='top' content={value.tips}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles.title}>{value.cellTitle}</Text>
|
||||
<Iconfont name='icon-tishi' size={36}></Iconfont>
|
||||
</View>
|
||||
</ToolTip>
|
||||
}
|
||||
desc={value.value.num}
|
||||
customDescClassName={value.value.cls}
|
||||
customClassName={styles['cell-desc']}></Cell>
|
||||
)
|
||||
})}
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle flexDirection='col'>
|
||||
<View className='flex-row items-center'>
|
||||
@ -343,59 +280,304 @@ const saleStatistic = () => {
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
|
||||
<View className={styles.totalSummary}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles['totalSummary--title']}>退货单数</Text>
|
||||
<Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
|
||||
</View>
|
||||
<View className={styles['totalSummary--current']}>42</View>
|
||||
</View>
|
||||
<Cell
|
||||
title={
|
||||
<ToolTip placement='top' content={ReturnGoodsOrderForm.summary.tips}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles.title}>退货匹数</Text>
|
||||
<Iconfont name='icon-tishi' size={36}></Iconfont>
|
||||
<Text className={styles['totalSummary--title']}>{ReturnGoodsOrderForm.summary.summaryTitle}</Text>
|
||||
<Iconfont name='icon-tishi' size={36} color='#707070'></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 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>
|
||||
</ToolTip>
|
||||
<View className={classnames(styles['totalSummary--current'], ReturnGoodsOrderForm.summary.value.cls)}>
|
||||
{ReturnGoodsOrderForm.summary.value.num}
|
||||
</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>
|
||||
{Object.entries(ReturnGoodsOrderForm.form).map(([key, value]) => {
|
||||
return (
|
||||
<Cell
|
||||
key={key}
|
||||
title={
|
||||
<ToolTip placement='top' content={value.tips}>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles.title}>{value.cellTitle}</Text>
|
||||
<Iconfont name='icon-tishi' size={36}></Iconfont>
|
||||
</View>
|
||||
</ToolTip>
|
||||
}
|
||||
desc={value.value.num}
|
||||
customDescClassName={value.value.cls}
|
||||
customClassName={styles['cell-desc']}></Cell>
|
||||
)
|
||||
})}
|
||||
</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
|
||||
|
||||
@ -22,7 +22,7 @@ export default memo<PropsType>((props) => {
|
||||
<Text className={styles.moneyText}>预估金额：</Text>
|
||||
<Text className={styles.moneyNumber}>
|
||||
<Text className={styles.unit}>¥</Text>
|
||||
{amount}
|
||||
{amount.toFixed(2)}
|
||||
</Text>
|
||||
</View>
|
||||
<View className={styles.bottomRight}>
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
import Search from '@/components/search'
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import React, { FC, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||||
import Taro, { useDidHide, useDidShow, useRouter } from '@tarojs/taro'
|
||||
import React, { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import IconText from '@/components/iconText'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import ItemList from './components/shoppingCartItem/index'
|
||||
import BottomBtns from '@/components/BottomBtns'
|
||||
import { formatPriceDiv } from '@/common/format'
|
||||
import BottomSettleBar from './components/bottomSettleBar'
|
||||
import BottomEditBar from './components/bottomEditBar'
|
||||
import { ShoppingCartDeleteApi, ShoppingCartListApi } from '@/api/index'
|
||||
import { dataLoadingStatus, debounce } from '@/common/util'
|
||||
import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
|
||||
import { GoodsMeta, Goods, useShoppingCart, useShoppingContext } from './context'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
|
||||
import { ShoppingCart } from './components/shoppingCart/index'
|
||||
import { Goods, useShoppingContext } from './context'
|
||||
import { alert, goLink, isEmptyObject } from '@/common/common'
|
||||
|
||||
export const Shopping: FC = memo(() => {
|
||||
// 计算总的预估金额
|
||||
@ -48,6 +47,9 @@ export const Shopping: FC = memo(() => {
|
||||
interface InternalContainer {}
|
||||
|
||||
const ShoppingCartContainer: FC<InternalContainer> = () => {
|
||||
|
||||
let isFirst = useRef(true)
|
||||
|
||||
const { isManageStatus, setManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore, setColorStore } = useShoppingContext()
|
||||
|
||||
// 管理
|
||||
@ -55,16 +57,30 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
|
||||
setManageStatus(!isManageStatus)
|
||||
}
|
||||
|
||||
const [listHeight, setListHeight] = useState('auto')
|
||||
const listHeightRef = useRef('auto')
|
||||
|
||||
const { fetchData, state } = ShoppingCartListApi()
|
||||
|
||||
const [searchOptions, setSearchOptions] = useState({
|
||||
short_name_or_phone: '',
|
||||
})
|
||||
useDidShow(()=>{
|
||||
console.log('onShow');
|
||||
if (!isFirst.current){
|
||||
|
||||
fetchData(searchOptions)
|
||||
}
|
||||
})
|
||||
useDidHide(() => {
|
||||
console.log('onHide');
|
||||
})
|
||||
console.log('rerender');
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(searchOptions)
|
||||
console.log('useEffect fetchData')
|
||||
if (!isEmptyObject(getFilterData(searchOptions))){
|
||||
fetchData(searchOptions)
|
||||
}
|
||||
}, [searchOptions])
|
||||
|
||||
// 输入了搜索关键字
|
||||
@ -82,7 +98,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
|
||||
// useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
|
||||
useLayoutEffect(() => {
|
||||
;(async () => {
|
||||
console.log('useLayoutEffect')
|
||||
await fetchData()
|
||||
isFirst.current = false
|
||||
let query = Taro.createSelectorQuery()
|
||||
console.log('query', query)
|
||||
query.select('#shoppingContainer').boundingClientRect()
|
||||
@ -94,7 +112,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
|
||||
const topBarHeight = res[1].height
|
||||
const bottomBarHeight = res[2].height
|
||||
const listHeight = containerHeight - topBarHeight - bottomBarHeight
|
||||
setListHeight(listHeight + 'px')
|
||||
listHeightRef.current = listHeight + 'px'
|
||||
})
|
||||
})()
|
||||
}, [])
|
||||
@ -191,12 +209,8 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
|
||||
</Search>
|
||||
</View>
|
||||
<View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
|
||||
<View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
|
||||
<InfiniteScroll
|
||||
statusMore={statusMore}
|
||||
refresherEnabled={true}
|
||||
selfOnRefresherRefresh={handleRefresh}
|
||||
refresherTriggered={refreshStatus}>
|
||||
<View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
|
||||
<InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
|
||||
{!!shoppingCartData?.list?.length &&
|
||||
shoppingCartData?.list?.map((item, index) => {
|
||||
return <ItemList itemData={item} key={index}></ItemList>
|
||||
|
||||
@ -39,7 +39,8 @@ page{
|
||||
.left {
|
||||
}
|
||||
.middle {
|
||||
margin: 0 40px;
|
||||
max-width: 40%;
|
||||
padding: 0 40px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.right {
|
||||
@ -58,11 +59,13 @@ page{
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
@include common_ellipsis()
|
||||
}
|
||||
.userno {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
color: $color_font_two;
|
||||
@include common_ellipsis()
|
||||
}
|
||||
.userTitle {
|
||||
color: #626262;
|
||||
|
||||
@ -80,3 +80,12 @@ $customTabBarHeight: 100px;
|
||||
.color-white{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.s-w::after {
|
||||
content: 'W';
|
||||
font-size: $font_size;
|
||||
}
|
||||
.s-e::after {
|
||||
content: 'E';
|
||||
font-size: $font_size;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user