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/components/LoadMore/index.tsx
+1 -1
View File
@@ -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>
src/components/SelectMarketingDepartment/index.tsx
+3 -3
View File
@@ -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
src/components/SelectSaleRankingIndicators/index.tsx
+3 -3
View File
@@ -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 { SaleOrderDataFormdataFormStatus } from '@/api/index'
@@ -18,7 +18,7 @@ type EnumList = {
name: string
}
// 销售排行指标
const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = memo((props) => {
const selectName = '排行指标'
@@ -65,5 +65,5 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
</View>
</DropDownItem>
)
}
})
export default SelectSaleRankingIndicators
src/components/SelectSaleType/index.tsx
+6 -6
View File
@@ -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
src/components/SelectTimePicker/index.tsx
+24 -17
View File
@@ -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
src/components/cell/index.tsx
+3 -2
View File
@@ -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>
src/components/dropDown-item/index.module.scss
-1
View File
@@ -3,7 +3,6 @@
&--title {
position: relative;
z-index: 2000;
background-color: white;
display: flex;
flex-flow: row nowrap;
src/components/infiniteScroll/index.tsx
+49 -32
View File
@@ -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>
</>
)
src/components/popup/index.module.scss
+9 -2
View File
@@ -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;
}
}
}
src/components/popup/index.tsx
+25 -25
View File
@@ -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>
)
},
)
src/components/sideBar/index.tsx
+2 -2
View File
@@ -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 = [],
</>
)
})
})
src/components/table/index.tsx
+29 -20
View File
@@ -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>
)
}