Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/spider_cloud_warehouse into 订单页
This commit is contained in:
Haiyi
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user