Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/spider_cloud_warehouse into 订单页
This commit is contained in:
Haiyi
commit
94b609039d
9
src/components/LoadMore/index.module.scss
Normal file
9
src/components/LoadMore/index.module.scss
Normal file
@ -0,0 +1,9 @@
|
||||
.loadMore{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
color: $color_font_three;
|
||||
padding: 24px 0;
|
||||
}
|
||||
42
src/components/LoadMore/index.tsx
Normal file
42
src/components/LoadMore/index.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC } from 'react'
|
||||
import Iconfont from '../iconfont/iconfont'
|
||||
import LoadingCard from '../loadingCard/index'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export type LoadMoreStatus = 'more' | 'loading' | 'noMore'
|
||||
|
||||
interface LoadMoreEvent {
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
interface LoadMorePropsType extends LoadMoreEvent {
|
||||
status: LoadMoreStatus
|
||||
moreText?: string
|
||||
loadingText?: string
|
||||
noMoreText?: string
|
||||
}
|
||||
|
||||
const LoadMore: FC<LoadMorePropsType> = props => {
|
||||
const { status, moreText = '查看更多', loadingText = '加载中', noMoreText = '没有更多', onClick } = props
|
||||
|
||||
const handleShowMore = () => {
|
||||
onClick && onClick()
|
||||
}
|
||||
|
||||
let component: JSX.Element | null = null
|
||||
if (status === 'loading') {
|
||||
component = <LoadingCard title={loadingText}></LoadingCard>
|
||||
} else if (status === 'more') {
|
||||
component = (
|
||||
<View onClick={handleShowMore}>
|
||||
<Text style={{ marginRight: '5px' }}>{moreText}</Text>
|
||||
<Iconfont name='icon-zhankai' size={32}></Iconfont>
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
component = <Text>{noMoreText}</Text>
|
||||
}
|
||||
return <View className={styles.loadMore}>{component}</View>
|
||||
}
|
||||
export default LoadMore
|
||||
@ -0,0 +1,6 @@
|
||||
.grid {
|
||||
padding: 24px 40px;
|
||||
display: grid;
|
||||
grid-gap: 24px 24px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
69
src/components/SelectSaleRankingIndicators/index.tsx
Normal file
69
src/components/SelectSaleRankingIndicators/index.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import { FC, useEffect, useMemo, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import { EnumMarketingDepartmentApi } from '@/api/index'
|
||||
import { View } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
|
||||
type ChangedValue = string | number
|
||||
|
||||
interface SelectSaleTypeProps {
|
||||
onChange?: (value: ChangedValue) => void
|
||||
}
|
||||
|
||||
type EnumList = {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
// 销售排行指标
|
||||
const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {
|
||||
|
||||
const selectName = '排行指标'
|
||||
|
||||
const { onChange } = props
|
||||
console.log(props)
|
||||
const { fetchData } = EnumMarketingDepartmentApi()
|
||||
|
||||
const getData = async () => {
|
||||
const res = await fetchData()
|
||||
setEnumList([{ id: -1, code: '', name: '全部' }, ...res.data.list])
|
||||
}
|
||||
|
||||
const [enumList, setEnumList] = useState<EnumList[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const [currentValue, setCurrentValue] = useState<ChangedValue>(-1)
|
||||
|
||||
const handleClick = (value: ChangedValue) => {
|
||||
setCurrentValue(value)
|
||||
onChange?.(value)
|
||||
}
|
||||
|
||||
const displayTitle = useMemo(() => {
|
||||
if (currentValue === -1) {
|
||||
return selectName
|
||||
}
|
||||
return !!enumList.length ? enumList.filter(option => option.id === currentValue)?.[0]?.name : selectName
|
||||
}, [enumList, currentValue])
|
||||
|
||||
return (
|
||||
<DropDownItem title={displayTitle} value={currentValue} activeColor='#337fff' showOverlay={false}>
|
||||
<View className={classnames(styles.grid)}>
|
||||
{!!enumList.length &&
|
||||
enumList.map((item: EnumList) => {
|
||||
return (
|
||||
<FilterButton isActive={item.id === currentValue} onClick={() => handleClick(item.id)}>
|
||||
{item.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</DropDownItem>
|
||||
)
|
||||
}
|
||||
export default SelectSaleRankingIndicators
|
||||
@ -1,13 +1,14 @@
|
||||
import { formatDateTime } from '@/common/format'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import dayjs from 'dayjs'
|
||||
import { FC, useState } from 'react'
|
||||
import DropDownItem from '../dropDown-item'
|
||||
import FilterButton from '../filterButton'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import TimePicker from '../timePicker'
|
||||
import TimePickerPopup from '../timePickerPopup'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type ChangedValue = string | number
|
||||
export type ChangedValue = string[]
|
||||
|
||||
interface SelectSaleTypeProps {
|
||||
onChange?: (value: ChangedValue) => void
|
||||
@ -16,8 +17,8 @@ interface SelectSaleTypeProps {
|
||||
const FilterTimeOptions = {
|
||||
'0': {
|
||||
name: '全部',
|
||||
date_min: undefined,
|
||||
date_max: undefined,
|
||||
date_min: '',
|
||||
date_max: '',
|
||||
},
|
||||
'1': {
|
||||
name: '今天',
|
||||
@ -64,50 +65,85 @@ const FilterTimeOptions = {
|
||||
.add(0, 'day')
|
||||
.format('YYYY-MM-DD')} 00:00:00`,
|
||||
},
|
||||
} as const
|
||||
'6': {
|
||||
name: '自定义时间',
|
||||
date_min: '',
|
||||
date_max: '',
|
||||
},
|
||||
}
|
||||
|
||||
type Key = keyof typeof FilterTimeOptions
|
||||
type Value = (typeof FilterTimeOptions)[Key]
|
||||
type Value = typeof FilterTimeOptions[Key]
|
||||
|
||||
const SelectTimePicker: FC<SelectSaleTypeProps> = props => {
|
||||
const { onChange: change } = props
|
||||
|
||||
const [currentValue, setCurrentValue] = useState('0')
|
||||
|
||||
const [currentDate, setCurrentDate] = useState({
|
||||
start: new Date(),
|
||||
end: new Date(),
|
||||
start: new Date().toLocaleDateString(),
|
||||
end: '',
|
||||
})
|
||||
|
||||
|
||||
// 展示时间筛选
|
||||
const [showTime, setShowTime] = useState(false)
|
||||
|
||||
// 点击关闭时间筛选
|
||||
const handClose = () => {
|
||||
setShowTime(false)
|
||||
|
||||
const onSelectDate = time => {
|
||||
console.log(time)
|
||||
change?.(time)
|
||||
}
|
||||
|
||||
const handleClick = (key: Key) => {
|
||||
setCurrentValue(key)
|
||||
change?.([FilterTimeOptions[key].date_min, FilterTimeOptions[key].date_max])
|
||||
setCustomFilterButtonText('自定义时间')
|
||||
}
|
||||
// 选择时间
|
||||
const onSelectDate = event => {
|
||||
console.log(event?.value, 'event?.value?.start')
|
||||
setCurrentDate({
|
||||
start: event?.value?.start,
|
||||
end: event?.value?.end,
|
||||
})
|
||||
setShowTime(false)
|
||||
setCustomFilterButtonText(`${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 handleCustomTime = () => {
|
||||
setCurrentValue('6')
|
||||
setShowTime(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<DropDownItem title='查询日期' direction='down' value={currentValue} activeColor='#337fff'>
|
||||
<View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
|
||||
{Object.entries(FilterTimeOptions).map(([key, value]) => {
|
||||
return (
|
||||
<FilterButton isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
|
||||
{value.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={() => handleClick('6' as Key)}>
|
||||
<Text>自定义时间</Text>
|
||||
<IconFont name='icon-chakanquanbukehu' color={'6' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
</FilterButton>
|
||||
</View>
|
||||
<View style={{ paddingBottom: '24rpx' }}>
|
||||
<TimePicker start={currentDate.start} end={currentDate.end} onSelectDate={onSelectDate}></TimePicker>
|
||||
</View>
|
||||
</DropDownItem>
|
||||
<>
|
||||
<DropDownItem
|
||||
title={currentValue === '0' ? '查询日期' : FilterTimeOptions[currentValue].name}
|
||||
direction='down'
|
||||
value={currentValue}
|
||||
activeColor='#337fff'>
|
||||
<View className={styles.grid} style={{ paddingBottom: '24rpx' }}>
|
||||
{Object.entries(FilterTimeOptions)
|
||||
.slice(0, -1)
|
||||
.map(([key, value]) => {
|
||||
return (
|
||||
<FilterButton isActive={key === currentValue} onClick={() => handleClick(key as Key)}>
|
||||
{value.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton customClassName={styles.customFilterTime} isActive={'6' === currentValue} onClick={handleCustomTime}>
|
||||
<Text>{customFilterButtonText}</Text>
|
||||
<IconFont name='icon-chakanquanbukehu' color={'6' === currentValue ? '#3983ff' : '#7f7f7f'}></IconFont>
|
||||
</FilterButton>
|
||||
</View>
|
||||
</DropDownItem>
|
||||
<TimePickerPopup start={currentDate.start} end={currentDate.end} showTime={showTime} closePopup={handClose} onSelectDate={onSelectDate}></TimePickerPopup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default SelectTimePicker
|
||||
|
||||
@ -5,7 +5,7 @@ import IconFont, { IconNames } from "../iconfont/iconfont"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface CellPropsType {
|
||||
title: string
|
||||
title: string | React.ReactNode
|
||||
desc: string
|
||||
isLink?: boolean
|
||||
onClick?: () => void
|
||||
@ -28,7 +28,7 @@ const Cell:FC<CellPropsType> = (props) => {
|
||||
<View className={classNames(styles.cell, customClassName)} style={customStyle} onClick={handleClick}>
|
||||
<View className={styles.title}>
|
||||
{iconName && <IconFont name={iconName} size={46}></IconFont>}
|
||||
<Text>{title}</Text>
|
||||
<View>{title}</View>
|
||||
</View>
|
||||
<View className={styles.desc}>
|
||||
<Text className={styles.descText}>{desc}</Text>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
/**
|
||||
* 注意：需要在父节点设置 position: relative;
|
||||
*/
|
||||
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
@ -4,12 +4,10 @@ import style from "./index.module.scss"
|
||||
import { memo } from "react";
|
||||
|
||||
type Params = {
|
||||
styleLoading?: Object,
|
||||
title?: string,
|
||||
loadingIcon?: false|true
|
||||
}
|
||||
export default memo(({
|
||||
styleLoading = {},
|
||||
title = "加载中...", //显示的文字
|
||||
loadingIcon = true //是否显示加载图标
|
||||
}:Params) => {
|
||||
@ -22,4 +20,4 @@ export default memo(({
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@ -70,8 +70,9 @@ $am-ms: 200ms;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
min-height: 200px;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
box-shadow: 1px 1px 1px 1px #f2f2f2;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
@ -79,8 +80,9 @@ $am-ms: 200ms;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 200px;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
border-radius: 0 0 20px 20px;
|
||||
box-shadow: 6px 6px 5px 14px red;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
|
||||
50
src/components/table/index.module.scss
Normal file
50
src/components/table/index.module.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.table {
|
||||
border: 0px solid darkgray;
|
||||
border-radius: 5px;
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
}
|
||||
|
||||
.td {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.th{
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.bg-line {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.bg-header {
|
||||
justify-content: center;
|
||||
background: #f6f7fb;
|
||||
color: $color_font_three;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ellipsis_1{
|
||||
@include common_ellipsis(1)
|
||||
}
|
||||
.ellipsis_2{
|
||||
@include common_ellipsis(2)
|
||||
}
|
||||
|
||||
|
||||
106
src/components/table/index.tsx
Normal file
106
src/components/table/index.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import { ScrollView, View, Text } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import { FC, 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 = {
|
||||
title: string
|
||||
dataIndex: string
|
||||
width: string
|
||||
key: string
|
||||
render?: (text?: string, record?: RecordType, index?: number) => React.ReactNode
|
||||
ellipsis?: boolean | { isEllipsis: boolean; rows: number }
|
||||
}
|
||||
|
||||
type RecordType = {
|
||||
key: string
|
||||
[Property: string]: any
|
||||
}
|
||||
|
||||
interface TablePropsType {
|
||||
columns: ColumnsType[]
|
||||
dataSource: RecordType[]
|
||||
}
|
||||
|
||||
const Table: FC<TablePropsType> = props => {
|
||||
const { columns, dataSource } = props
|
||||
|
||||
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
|
||||
const [loadMoreStatus, setLoadMoreStatus] = useState<LoadMoreStatus>('loading')
|
||||
|
||||
const handleShowMore = () => {
|
||||
|
||||
}
|
||||
|
||||
const getColumnStyle = (columnConfig: ColumnsType) => {
|
||||
const columnStyle = {}
|
||||
if (typeof columnConfig.ellipsis === 'boolean' && columnConfig.ellipsis) {
|
||||
columnStyle[styles.ellipsis_1] = true
|
||||
}
|
||||
if (typeof columnConfig.ellipsis === 'object' && columnConfig.ellipsis.isEllipsis) {
|
||||
const rows = columnConfig.ellipsis.rows
|
||||
if (rows === 2) {
|
||||
columnStyle[styles.ellipsis_2] = true
|
||||
} else {
|
||||
columnStyle[styles.ellipsis_1] = true
|
||||
}
|
||||
}
|
||||
return columnStyle
|
||||
}
|
||||
|
||||
const sourceContainer = () => {
|
||||
return (
|
||||
<>
|
||||
{!!dataSource.length &&
|
||||
dataSource.map(source => {
|
||||
return (
|
||||
<View className={classnames(styles.tr, styles['bg-line'])} key={source.key}>
|
||||
{columns.map(column => {
|
||||
if (column.render) {
|
||||
return (
|
||||
<View className={styles.td} style={{ width: column.width }}>
|
||||
{/* 判断表头是不是有render 有就执行render */}
|
||||
{column.render(source[column.dataIndex])}
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<View className={classnames(styles.td, getColumnStyle(column))} style={{ width: column.width }}>
|
||||
{
|
||||
source[column.dataIndex] //根据表头填数据
|
||||
}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
{showMore && (
|
||||
<LoadMore status={loadMoreStatus} onClick={handleShowMore}></LoadMore>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.table}>
|
||||
<View className={classnames(styles.tr, styles['bg-header'])}>
|
||||
{columns.map(column => {
|
||||
return (
|
||||
<View className={styles.th} style={{ width: column.width }} key={column.key}>
|
||||
{column.title}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<ScrollView>{sourceContainer()}</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default Table
|
||||
50
src/components/toolTips/index.module.scss
Normal file
50
src/components/toolTips/index.module.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.mark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tooltip {
|
||||
&-container{
|
||||
position: relative;
|
||||
}
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
user-select: text;
|
||||
color: white;
|
||||
&-inner {
|
||||
position: absolute;
|
||||
background-color: #333333;
|
||||
font-size: $font_size;
|
||||
box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
|
||||
border-radius: 8px;
|
||||
&-content {
|
||||
padding: 8px 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.arrowIcon {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&-top {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
&-left {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
&-right {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&-bottom {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
216
src/components/toolTips/index.tsx
Normal file
216
src/components/toolTips/index.tsx
Normal file
@ -0,0 +1,216 @@
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import classNames from 'classnames'
|
||||
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import IconFont from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
const SystemWidth = Taro.getSystemInfoSync().windowWidth
|
||||
|
||||
const arrowSize = 32
|
||||
|
||||
// 由于taro自动把px编译成rpx，所以这里需要把单位处理一下 转成真正的px
|
||||
const convertPx = (px: number) => {
|
||||
const realPx = (px / 750) * SystemWidth
|
||||
return realPx
|
||||
}
|
||||
|
||||
type Placement = 'top' | 'right' | 'bottom' | 'left'
|
||||
|
||||
interface ToolTipEvent {
|
||||
onVisibleChange?: (visible?: boolean) => void
|
||||
}
|
||||
|
||||
interface ToolTipPropsType extends ToolTipEvent {
|
||||
defaultVisible?: boolean
|
||||
content: React.ReactNode
|
||||
placement?: Placement
|
||||
children?: React.ReactNode
|
||||
customClassName?: string
|
||||
customStyle?: React.CSSProperties
|
||||
customContentStyle?: React.CSSProperties
|
||||
}
|
||||
|
||||
interface ToolTipRef {
|
||||
show: () => void
|
||||
hide: () => void
|
||||
visible: boolean
|
||||
}
|
||||
|
||||
const popoverStyle = {
|
||||
color: '#333333',
|
||||
}
|
||||
|
||||
const ToolTip = forwardRef<ToolTipRef, ToolTipPropsType>((props, ref) => {
|
||||
const { placement = 'top', defaultVisible = false, onVisibleChange, children, content = '请填入提示信息', customClassName, customStyle, customContentStyle } = props
|
||||
|
||||
if (!content){
|
||||
throw new Error('tooltip: content 不能为空')
|
||||
}
|
||||
|
||||
const [visible, setVisible] = useState(defaultVisible)
|
||||
|
||||
const onVisibleChangeRef = useRef(onVisibleChange)
|
||||
onVisibleChangeRef.current = onVisibleChange
|
||||
|
||||
// 暴露方法给外部
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => {
|
||||
return {
|
||||
show: () => setVisible(true),
|
||||
hide: () => setVisible(false),
|
||||
visible,
|
||||
}
|
||||
},
|
||||
[visible],
|
||||
)
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
setVisible(v => {
|
||||
onVisibleChangeRef.current?.(!v)
|
||||
return !v
|
||||
})
|
||||
}, [])
|
||||
|
||||
const handleClickMark = useCallback(() => {
|
||||
setVisible(false)
|
||||
onVisibleChangeRef.current?.(false)
|
||||
}, [])
|
||||
|
||||
const getArrowSide = useMemo(() => {
|
||||
const side = placement.split('-')[0] as string // placement = 'top-start' 取 'top'
|
||||
|
||||
const arrowSide = {
|
||||
top: 'bottom',
|
||||
right: 'left',
|
||||
bottom: 'top',
|
||||
left: 'right',
|
||||
}[side] as string
|
||||
return arrowSide
|
||||
}, [placement])
|
||||
|
||||
const [childrenRect, setChildrenRect] = useState<any>({})
|
||||
const childrenRectRef = useRef(childrenRect)
|
||||
childrenRectRef.current = childrenRect
|
||||
|
||||
const [viewport, setViewport] = useState<any>({})
|
||||
const viewportRef = useRef(viewport)
|
||||
viewportRef.current = viewport
|
||||
|
||||
useEffect(() => {
|
||||
console.log('useLayoutEffect')
|
||||
const query = Taro.createSelectorQuery()
|
||||
query.select('#children').boundingClientRect()
|
||||
query.selectViewport().scrollOffset()
|
||||
query.exec(res => {
|
||||
console.log(res[0])
|
||||
console.log(res[1])
|
||||
setChildrenRect(res[0])
|
||||
childrenRectRef.current = res[0]
|
||||
setViewport(res[1])
|
||||
viewportRef.current = res[1]
|
||||
})
|
||||
}, [])
|
||||
|
||||
// 箭头 坐标
|
||||
const arrowCoords = useMemo(() => {
|
||||
console.log('getArrowSide==>', getArrowSide, childrenRectRef.current)
|
||||
switch (getArrowSide) {
|
||||
case 'bottom': // 下箭头
|
||||
return {
|
||||
left: childrenRectRef.current.width / 2 - convertPx(arrowSize) / 2,
|
||||
top: -convertPx(arrowSize),
|
||||
right: '',
|
||||
bottom: '',
|
||||
}
|
||||
case 'left': // 左箭头
|
||||
return {
|
||||
left: childrenRectRef.current.width,
|
||||
right: '',
|
||||
top: childrenRectRef.current.height / 2 - convertPx(arrowSize) / 2,
|
||||
bottom: '',
|
||||
}
|
||||
case 'top': // 上箭头
|
||||
return {
|
||||
left: childrenRectRef.current.width / 2 - convertPx(arrowSize) / 2,
|
||||
right: '',
|
||||
top: childrenRectRef.current.height,
|
||||
bottom: '',
|
||||
}
|
||||
case 'right': // 右箭头
|
||||
return {
|
||||
left: -convertPx(arrowSize),
|
||||
right: '',
|
||||
top: childrenRectRef.current.height / 2 - convertPx(arrowSize) / 2,
|
||||
bottom: '',
|
||||
}
|
||||
}
|
||||
}, [getArrowSide, childrenRectRef.current])
|
||||
|
||||
// content 坐标
|
||||
const contentCoords = useMemo(() => {
|
||||
switch (getArrowSide) {
|
||||
case 'bottom': // 下箭头
|
||||
return {
|
||||
left: 0,
|
||||
top: '',
|
||||
right: '',
|
||||
bottom: convertPx(arrowSize) - 5,
|
||||
}
|
||||
case 'left': // 左箭头
|
||||
return {
|
||||
left: childrenRectRef.current.width + convertPx(arrowSize) - 5,
|
||||
top: 0,
|
||||
right: '',
|
||||
bottom: '',
|
||||
}
|
||||
case 'top': // 上箭头
|
||||
return {
|
||||
left: 0,
|
||||
top: childrenRectRef.current.height + convertPx(arrowSize) - 5,
|
||||
right: '',
|
||||
bottom: '',
|
||||
}
|
||||
case 'right': // 右箭头
|
||||
return {
|
||||
left: '',
|
||||
top: 0,
|
||||
right: convertPx(arrowSize) - 5,
|
||||
bottom: '',
|
||||
}
|
||||
}
|
||||
}, [getArrowSide, childrenRectRef.current])
|
||||
|
||||
const ContentComponent = useMemo(() => {
|
||||
console.log('执行完')
|
||||
|
||||
return (
|
||||
<View className={classNames(styles.tooltip, visible ? '' : styles['tooltip-hidden'], customClassName)} style={customStyle}>
|
||||
{/* 箭头 */}
|
||||
<View className={classNames(styles.arrowIcon, styles[`arrowIcon-${getArrowSide}`])} style={arrowCoords}>
|
||||
<IconFont name='icon-shouqi1' size={arrowSize} color={popoverStyle.color}></IconFont>
|
||||
</View>
|
||||
{/* content */}
|
||||
<View className={styles['tooltip-inner']} id='content' style={{ ...contentCoords, ...customContentStyle }}>
|
||||
<View className={styles['tooltip-inner-content']}>{content}</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}, [content, getArrowSide, visible, arrowCoords, contentCoords])
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 遮罩层 */}
|
||||
<View className={classNames(styles.mark, visible ? '' : styles['tooltip-hidden'])} onClick={handleClickMark}></View>
|
||||
<View className={styles['tooltip-container']}>
|
||||
<View onClick={handleClick} id='children'>
|
||||
{children}
|
||||
</View>
|
||||
{ContentComponent}
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
export default ToolTip
|
||||
@ -1,4 +1,11 @@
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.saleStatistic {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: 100%;
|
||||
&--filterBar {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
@ -7,4 +14,76 @@
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
}
|
||||
&--content {
|
||||
flex: 1 1 auto;
|
||||
padding-top: 24px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin: 0 10px;
|
||||
font-size: $font_size;
|
||||
color: $color_font_one;
|
||||
}
|
||||
.cell-desc {
|
||||
font-weight: 550;
|
||||
color: $color_font_one;
|
||||
font-size: 34px;
|
||||
}
|
||||
.totalSummary {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
&--title {
|
||||
font-size: $font_size;
|
||||
margin: 0 10px;
|
||||
color: $color_font_three;
|
||||
}
|
||||
&--current {
|
||||
color: $color_main;
|
||||
font-size: 42px;
|
||||
font-weight: 550;
|
||||
}
|
||||
&--totalNum {
|
||||
color: $color_font_three;
|
||||
font-size: $font_size;
|
||||
}
|
||||
}
|
||||
|
||||
.rankingIndicatorTitle {
|
||||
position: 'relative';
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.rankingTabs {
|
||||
position: relative;
|
||||
background-color: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.rankingTab {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
color: $color_font_one;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
font-size: $font_size;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
.active {
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
background-color: $color_main;
|
||||
}
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: $color_main;
|
||||
}
|
||||
|
||||
@ -1,55 +1,401 @@
|
||||
import AtCalendar from '@/components/calendar'
|
||||
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 from '@/components/SelectTimePicker'
|
||||
import SelectTimePicker, { ChangedValue } from '@/components/SelectTimePicker'
|
||||
import Table from '@/components/table'
|
||||
import TimePicker from '@/components/timePicker'
|
||||
import { View } from '@tarojs/components'
|
||||
import ToolTip from '@/components/toolTips'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import dayjs from 'dayjs'
|
||||
import { useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
const saleStatistic = () => {
|
||||
const [options, setOptions] = useState<DropDownOptions[]>([
|
||||
{
|
||||
text: 'name',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
text: 'name1',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
text: 'name2',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
text: 'name3',
|
||||
value: 3,
|
||||
},
|
||||
])
|
||||
|
||||
const onChangeTimePicker = (value) => {
|
||||
const onChangeTimePicker = (value: ChangedValue) => {
|
||||
console.log(value)
|
||||
}
|
||||
const onChangeSaleType = (saleType) => {
|
||||
console.log(saleType)
|
||||
|
||||
const onChangeSaleType = (saleType: number) => {
|
||||
console.log('saleType', saleType)
|
||||
}
|
||||
const onChangeDepartment = (department: number) => {
|
||||
console.log('department', department)
|
||||
}
|
||||
const onChangeDepartment = (department) => {
|
||||
console.log(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)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.saleStatistic}>
|
||||
{/* <View style={{background: 'red', width: '100%', height: '200px'}}></View> */}
|
||||
<View className={styles['saleStatistic--filterBar']}>
|
||||
<SelectSaleType onChange={onChangeSaleType}></SelectSaleType>
|
||||
<SelectMarketingDepartment onChange={onChangeDepartment}></SelectMarketingDepartment>
|
||||
<SelectTimePicker onChange={onChangeTimePicker}></SelectTimePicker>
|
||||
</View>
|
||||
<View className={styles['saleStatistic--content']}>
|
||||
<LayoutBlock circle flexDirection='col'>
|
||||
<View className='flex-row items-center'>
|
||||
<Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
|
||||
<Text className={styles.title}>订单</Text>
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
|
||||
<View className={styles.totalSummary}>
|
||||
<ToolTip placement='top' content='请填入提示信息'>
|
||||
<View className='flex-row items-center'>
|
||||
<Text className={styles['totalSummary--title']}>订单总数</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>
|
||||
<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>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle flexDirection='col'>
|
||||
<View className='flex-row items-center'>
|
||||
<Iconfont name='icon-guanlidingdan' size={32}></Iconfont>
|
||||
<Text className={styles.title}>配布</Text>
|
||||
</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']}>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>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle flexDirection='col'>
|
||||
<View className='flex-row items-center'>
|
||||
<Iconfont name='icon-daikuan' size={32}></Iconfont>
|
||||
<Text className={styles.title}>货款</Text>
|
||||
</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>
|
||||
</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>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle flexDirection='col'>
|
||||
<View className='flex-row items-center'>
|
||||
<Iconfont name='icon-tuikuan' size={32}></Iconfont>
|
||||
<Text className={styles.title}>退货</Text>
|
||||
</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={
|
||||
<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 circle flexDirection='col' customStyle={{ padding: 0 }}>
|
||||
<View className={classnames(styles.rankingIndicatorTitle, 'flex-row justify-between')} style={{ position: 'relative' }}>
|
||||
<View className='flex-row items-center'>
|
||||
<Iconfont name='icon-paiming' size={32}></Iconfont>
|
||||
<Text className={styles.title}>销售排行</Text>
|
||||
</View>
|
||||
<View style={{ width: '90px' }}>
|
||||
<SelectSaleRankingIndicators onChange={onChangeIndicators}></SelectSaleRankingIndicators>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ padding: '0 32rpx' }}>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '10rpx 0 30rpx 0' }}></Divider>
|
||||
<View className={styles.rankingTabs} onClick={handleClickTab}>
|
||||
{tabsConfig.map(item => {
|
||||
return (
|
||||
<View data-key={item.key} className={classnames(styles.rankingTab, item.key === currentKey ? styles.active : '')} key={item.key}>
|
||||
{item.name}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
<Table columns={examplecolumns} dataSource={exampledataSource}></Table>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default saleStatistic
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user