✨ feat(销售统计): 新增排行指标筛选功能

2022-10-13 19:40:53 +08:00 · 2022-10-13 19:40:53 +08:00 · 4861cc9eb9
commit 4861cc9eb9
parent 94b609039d
5 changed files with 397 additions and 286 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -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'
 /**
--- a/src/api/statistic/index.ts
+++ b/src/api/statistic/index.ts
@ -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'
--- a/src/api/statistic/saleStatistic.ts
+++ b/src/api/statistic/saleStatistic.ts
@ -1,13 +1,13 @@
 import { useRequest } from '@/use/useHttp'

 /**
- *  客户列表
+ *  销售统计数据
 * @returns
 */
-export const CensusApi = () => {
+export const SaleOrderDataFormApi = () => {
  return useRequest({
    url: `/v1/mp/saleOrderDataForm`,
-        method: "get"
+    method: 'get',
  })
 }

@ -54,3 +54,11 @@ export const SalesmanRankApi = () => {
    method: 'get',
  })
 }
+
+//获取排行指标枚举
+export const SaleOrderDataFormdataFormStatus = () => {
+  return useRequest({
+    url: `/v1/mp/saleOrderDataForm/dataFormStatus`,
+    method: 'get',
+  })
+}
--- a/src/components/SelectSaleRankingIndicators/index.tsx
+++ b/src/components/SelectSaleRankingIndicators/index.tsx
@ -1,7 +1,7 @@
 import { FC, 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'
@ -24,7 +24,7 @@ const SelectSaleRankingIndicators: FC<SelectSaleTypeProps> = props => {

  const { onChange } = props
  console.log(props)
-  const { fetchData } = EnumMarketingDepartmentApi()
+  const { fetchData } = SaleOrderDataFormdataFormStatus()

  const getData = async () => {
    const res = await fetchData()
--- a/src/pages/saleStatistic/index.tsx
+++ b/src/pages/saleStatistic/index.tsx
@ -1,7 +1,7 @@
-import AtCalendar from '@/components/calendar'
+import { SaleOrderDataFormApi } from '@/api/statistic/saleStatistic'
+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'
@ -9,31 +9,15 @@ import SelectSaleRankingIndicators from '@/components/SelectSaleRankingIndicator
 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 { useDidShow } from '@tarojs/taro'
 import classnames from 'classnames'
-import dayjs from 'dayjs'
-import { useState } from 'react'
+import { useCallback, 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 = [
+//需要传进来的数据示例
+const exampledataSource = [
  {
    key: '1',
    username: '小红',
@ -104,10 +88,10 @@ const saleStatistic = () => {
    gb: '321',
    dbd: '¥6634.93w',
  },
-  ]
+]

-  //需要传进来的表头数据示例
-  const examplecolumns = [
+//需要传进来的表头数据示例
+const examplecolumns = [
  {
    key: 'username',
    title: '编号',
@ -137,7 +121,182 @@ const saleStatistic = () => {
    width: '30%',
    render: (text: string) => <Text className={styles.amount}>{text}</Text>,
  },
-  ]
+]
+// 销售统计
+const saleStatistic = () => {
+  // 订单
+  const OrderForm = {
+    summary: {
+      summaryTitle: '订单总数',
+      tips: '已成功下单的总单数',
+      value: '51321',
+      total: '231231',
+    },
+    form: {
+      processing_order_number: {
+        cellTitle: '待配布订单',
+        tips: '已经预约和正在配布的订单数',
+        value: '5132',
+      },
+      processed_order_number: {
+        cellTitle: '已配布订单',
+        tips: '所有配完布、已批准发货、已经发货的订单总单数',
+        value: '564651',
+      },
+    },
+  }
+  // 配布
+  const ArrangedForm = {
+    summary: {
+      summaryTitle: '已配布匹数',
+      tips: '所有配完布、已批准发货、已经发货的订单总匹数',
+      value: '53453',
+      total: '456345',
+    },
+    form: {
+      wait_collect_order_number: {
+        cellTitle: '待收款单数',
+        tips: '已配完布但未批准发货的所有订单总单数',
+        value: '45634',
+      },
+      wait_collect_number: {
+        cellTitle: '待收款匹数',
+        tips: '已配完布但未批准发货的所有订单总匹数',
+        value: '463',
+      },
+      wait_collect_amount_sum: {
+        cellTitle: '待收款金额',
+        tips: '已配完布但未批准发货的所有订单总金额',
+        value: '4563',
+      },
+      not_shipped_order_number: {
+        cellTitle: '待发货单数',
+        tips: '已批准发货但未发货出库的所有订单总单数',
+        value: '4563',
+      },
+      not_shipped_number: {
+        cellTitle: '待发货匹数',
+        tips: '已批准发货但未发货出库的所有订单总匹数',
+        value: '4563',
+      },
+      not_shipped_amount_sum: {
+        cellTitle: '待发货金额',
+        tips: '已批准发货但未发货出库的所有订单总金额',
+        value: '4563',
+      },
+      shipped_order_number: {
+        cellTitle: '已发货单数',
+        tips: '已经发货出库的所有订单总单数',
+        value: '4563',
+      },
+      shipped_number: {
+        cellTitle: '已发货匹数',
+        tips: '已经发货出库的所有订单总匹数',
+        value: '463',
+      },
+      shipped_amount_sum: {
+        cellTitle: '已发货金额',
+        tips: '已经发货出库的所有订单总金额',
+        value: '4563',
+      },
+    },
+  }
+  // 货款
+  const paymentAmountForm = {
+    summary: {
+      summaryTitle: '货款金额',
+      tips: '已经发货出库的所有订单总金额',
+      value: '456345',
+      total: '45634',
+    },
+    form: {
+      amount_unreceived_sum: {
+        cellTitle: '未收金额',
+        tips: '已经批准发货出库但未收到货款的所有订单总金额',
+        value: '4563',
+      },
+      amount_received_sum: {
+        cellTitle: '已收金额',
+        tips: '已收且已经发货出库的所有订单总金额',
+        value: '4563',
+      },
+    },
+  }
+  // 退货
+  const ReturnGoodsOrderForm = {
+    summary: {
+      summaryTitle: '退货单数',
+      tips: '已经完成退货入库的退货单总单数',
+      value: '4563',
+      total: '4563',
+    },
+    form: {
+      return_goods_number: {
+        cellTitle: '退货匹数',
+        tips: '已经完成退货入库的退货单总匹数',
+        value: '4563',
+      },
+      return_amount_sum: {
+        cellTitle: '退货金额',
+        tips: '已经完成退货入库的退货单总金额',
+        value: '4563',
+      },
+    },
+  }
+
+  const { fetchData } = SaleOrderDataFormApi()
+
+  const [saleType, setSaleType] = useState<number | null>(null)
+  const [saleDepartmentId, setSaleDepartmentId] = useState<number | null>(null)
+  const [dateRange, setDateRange] = useState({
+    date_min: '',
+    date_max: '',
+  })
+
+  const getData = async () => {
+    // console.log(
+    //   'getFilterData',
+    //   getFilterData({
+    //     sale_type: saleType,
+    //     sale_department_id: saleDepartmentId,
+    //     date_min: dateRange.date_min,
+    //     date_max: dateRange.date_max,
+    //   }),
+    // )
+    // 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){
+
+    // }
+  }
+
+  useDidShow(()=>{
+    getData()
+  })
+
+  const onChangeTimePicker = useCallback((value: ChangedValue) => {
+    console.log(value)
+    setDateRange({
+      date_max: value[0],
+      date_min: value[1],
+    })
+  }, [])
+  const onChangeSaleType = useCallback((saleType: number) => {
+    console.log('saleType', saleType)
+    setSaleType(saleType)
+  }, [])
+  const onChangeDepartment = useCallback((department: number) => {
+    console.log('department', department)
+    setSaleDepartmentId(department)
+  }, [])
+
+  const onChangeIndicators = (indicators: number) => {
+    console.log('indicators', indicators)
+  }

  const tabsConfig = [
    {
@ -178,33 +337,31 @@ 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={styles['totalSummary--current']}>{OrderForm.summary.value}</View>
+            <View className={styles['totalSummary--totalNum']}>（共 {OrderForm.summary.total} 匹）</View>
          </View>
+          {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}>待配布订单</Text>
+                      <Text className={styles.title}>{value.cellTitle}</Text>
                      <Iconfont name='icon-tishi' size={36}></Iconfont>
                    </View>
+                  </ToolTip>
                }
-            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'}
+                desc={value.value}
                customClassName={styles['cell-desc']}></Cell>
+            )
+          })}
        </LayoutBlock>
        <LayoutBlock circle flexDirection='col'>
          <View className='flex-row items-center'>
@ -213,96 +370,34 @@ const saleStatistic = () => {
          </View>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <View className={styles.totalSummary}>
+            <ToolTip placement='top' content={ArrangedForm.summary.tips}>
              <View className='flex-row items-center'>
-              <Text className={styles['totalSummary--title']}>已配布匹数</Text>
+                <Text className={styles['totalSummary--title']}>{ArrangedForm.summary.summaryTitle}</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>
+            </ToolTip>
+            <View className={styles['totalSummary--current']}>{ArrangedForm.summary.value}</View>
+            <View className={styles['totalSummary--totalNum']}>（共计 {ArrangedForm.summary.total}）</View>
          </View>
+          {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}>待收款单数</Text>
+                        <Text className={styles.title}>{value.cellTitle}</Text>
                        <Iconfont name='icon-tishi' size={36}></Iconfont>
                      </View>
+                    </ToolTip>
                  }
-            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'}
+                  desc={value.value}
                  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 +406,29 @@ const saleStatistic = () => {
          </View>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <View className={styles.totalSummary}>
+            <ToolTip placement='top' content={paymentAmountForm.summary.tips}>
              <View className='flex-row items-center'>
-              <Text className={styles['totalSummary--title']}>货款金额</Text>
+                <Text className={styles['totalSummary--title']}>{paymentAmountForm.summary.summaryTitle}</Text>
                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
              </View>
-            <View className={styles['totalSummary--current']}>56133.32</View>
+            </ToolTip>
          </View>
+          {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}>未收金额</Text>
+                      <Text className={styles.title}>{value.cellTitle}</Text>
                      <Iconfont name='icon-tishi' size={36}></Iconfont>
                    </View>
+                  </ToolTip>
                }
-            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'}
+                desc={value.value}
                customClassName={styles['cell-desc']}></Cell>
+            )
+          })}
        </LayoutBlock>
        <LayoutBlock circle flexDirection='col'>
          <View className='flex-row items-center'>
@ -343,30 +437,30 @@ const saleStatistic = () => {
          </View>
          <Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
          <View className={styles.totalSummary}>
+            <ToolTip placement='top' content={ReturnGoodsOrderForm.summary.tips}>
              <View className='flex-row items-center'>
-              <Text className={styles['totalSummary--title']}>退货单数</Text>
+                <Text className={styles['totalSummary--title']}>{ReturnGoodsOrderForm.summary.summaryTitle}</Text>
                <Iconfont name='icon-tishi' size={36} color='#707070'></Iconfont>
              </View>
-            <View className={styles['totalSummary--current']}>42</View>
+            </ToolTip>
+            <View className={styles['totalSummary--current']}>{ReturnGoodsOrderForm.summary.value}</View>
          </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}>退货匹数</Text>
+                      <Text className={styles.title}>{value.cellTitle}</Text>
                      <Iconfont name='icon-tishi' size={36}></Iconfont>
                    </View>
+                  </ToolTip>
                }
-            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'}
+                desc={value.value}
                customClassName={styles['cell-desc']}></Cell>
+            )
+          })}
        </LayoutBlock>
        {/* 销售排行 */}
        <LayoutBlock circle flexDirection='col' customStyle={{ padding: 0 }}>