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

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'
 /**

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'

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',
+  })
+}

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()

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 { useCallback, useState } from 'react'
-import { useState } from 'react'
 import styles from './index.module.scss'
 
-const saleStatistic = () => {
+//需要传进来的数据示例
-  const onChangeTimePicker = (value: ChangedValue) => {
+const exampledataSource = [
-    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: '小红',
@@ -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--current']}>{OrderForm.summary.value}</View>
-            <View className={styles['totalSummary--totalNum']}>（共432423匹）</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'}
+                desc={value.value}
-            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'>
@@ -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>
+            </ToolTip>
-            <View className={styles['totalSummary--totalNum']}>（共计 ¥231.23w）</View>
+            <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'}
+                  desc={value.value}
-            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>
+                {(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'}
+                desc={value.value}
-            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'>
@@ -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'}
+                desc={value.value}
-            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 }}>