402 lines
14 KiB
TypeScript
402 lines
14 KiB
TypeScript
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, { ChangedValue } from '@/components/SelectTimePicker'
|
||
import Table from '@/components/table'
|
||
import TimePicker from '@/components/timePicker'
|
||
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 onChangeTimePicker = (value: ChangedValue) => {
|
||
console.log(value)
|
||
}
|
||
const onChangeSaleType = (saleType: number) => {
|
||
console.log('saleType', saleType)
|
||
}
|
||
const onChangeDepartment = (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)
|
||
}
|
||
|
||
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
|