✨ feat(发货列表): 已完成发货列表对接

src/pages/delivery/components/Filter/index.module.scss

@@ -66,6 +66,7 @@
   }
 }
 .filterController {
+  margin-top: 60px;
   width: 100%;
   display: flex;
   flex-flow: row nowrap;

src/pages/delivery/components/Filter/index.tsx

@@ -3,33 +3,81 @@ import Popup from '@/components/popup'
 import { View } from '@tarojs/components'
 import classnames from 'classnames'
 import styles from './index.module.scss'
-import React, { FC, memo, useEffect, useState } from 'react'
+import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Search from '@/components/search'
 import IconFont from '@/components/iconfont/iconfont'
 import { EnumDeliveryNoticeTypeList } from '@/api/index'
 import dayjs from 'dayjs'
+import { getFilterData } from '@/common/util'
+import Taro from '@tarojs/taro'
 
-type SearchFilter = {
+interface SearchFilter {
   type?: number
   timeKey?: string
+  delivery_notice_order_no?: string
 }
 
-const scanIcon = () => {
-  // 扫描
-  const handleScan = () => {}
-  return (
-    <View onClick={handleScan} className={styles.scanHandler}>
-      <IconFont name='icon-saomiao' size={40}></IconFont>
-    </View>
-  )
+export interface SearchField extends Omit<SearchFilter, 'timeKey'> {
+  date_min?: string
+  date_max?: string
 }
 
-const DeliveryFilter: FC = memo(() => {
-  const { fetchData } = EnumDeliveryNoticeTypeList()
+interface DeliveryPropsType {
+  onSearchTime?: () => void
+  onConfirm?: (searchField: SearchField, timeKey?: Pick<SearchFilter, 'timeKey'>['timeKey']) => void
+  onCancal?: () => void
+  onReset?: () => void
+}
+
+interface ButtonPropsType {
+  isActive: boolean
+  onClick?: Function
+  children?: React.ReactNode
+  customClassName?: string
+}
+
+export const filterTimeOptions = {
+  0: {
+    name: '不限',
+    date_min: undefined,
+    date_max: undefined,
+  },
+  1: {
+    name: '今天',
+    date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  2: {
+    name: '昨日',
+    date_min: `${dayjs(new Date()).add(-1, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  3: {
+    name: '近7日',
+    date_min: `${dayjs(new Date()).add(-7, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  4: {
+    name: '近30日',
+    date_min: `${dayjs(new Date()).add(-30, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+  5: {
+    name: '近90日',
+    date_min: `${dayjs(new Date()).add(-90, 'day').format('YYYY-MM-DD')} 00:00:00`,
+    date_max: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
+  },
+} as const
+
+const DeliveryFilter = memo<DeliveryPropsType>((props) => {
+  const { onSearchTime, onConfirm, onCancal, onReset } = props
+
+  const { fetchData, state } = EnumDeliveryNoticeTypeList()
 
   const [searchFilter, setSearchFilter] = useState<SearchFilter>({
     type: undefined,
     timeKey: '0',
+    delivery_notice_order_no: '',
   })
   const handleSelectedType = (type: string | number) => {
     console.log('type==>', type)
@@ -40,17 +88,25 @@ const DeliveryFilter: FC = memo(() => {
     }
   }
 
-  const handleSearchBarChange = () => {}
 
-  useEffect(() => {
-    getEnumData()
+  const handleSearchBarChange = useCallback((searchValue: string) => {
+    console.log('searchValue==>', searchValue)
+    setSearchFilter((prevProps) => ({ ...prevProps, delivery_notice_order_no: searchValue }))
   }, [])
 
-  const [typeList, setTypeList] = useState<{ id: number; name: string }[]>()
+  const typeList = useMemo<{ id: number; name: string }[]>(() => {
+    return state.data.list
+  }, [state])
+
+  useEffect(() => {
+    if (!!!typeList?.length) {
+      getEnumData()
+      console.log('getEnumData')
+    }
+  }, [typeList])
 
   const getEnumData = async () => {
-    const res = await fetchData()
-    setTypeList(res.data.list)
+    await fetchData()
   }
 
   const [customTime, setCustomTime] = useState({
@@ -58,48 +114,70 @@ const DeliveryFilter: FC = memo(() => {
     date_max: undefined,
   })
 
-  const filterTimeOptions = {
-    0: {
-      name: '不限',
-      date_min: undefined,
-      date_max: undefined,
-    },
-    1: {
-      name: '今天',
-      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
-      date_max: `${dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD')} 00:00:00`,
-    },
-    2: {
-      name: '昨日',
-      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
-      date_max: `${dayjs(new Date()).add(-1, 'day').format('YYYY-MM-DD')} 00:00:00`,
-    },
-    3: {
-      name: '近7日',
-      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
-      date_max: `${dayjs(new Date()).add(-7, 'day').format('YYYY-MM-DD')} 00:00:00`,
-    },
-    4: {
-      name: '近30日',
-      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
-      date_max: `${dayjs(new Date()).add(-30, 'day').format('YYYY-MM-DD')} 00:00:00`,
-    },
-    5: {
-      name: '近90日',
-      date_min: `${dayjs(new Date()).add(0, 'day').format('YYYY-MM-DD')} 00:00:00`,
-      date_max: `${dayjs(new Date()).add(-90, 'day').format('YYYY-MM-DD')} 00:00:00`,
-    },
-  }
+  
 
   const handleSelectedTime = (timeOptionId) => {
     setSearchFilter((e) => ({ ...e, timeKey: timeOptionId }))
+    // 不是设置了自定义时间
+    if (timeOptionId !== '6') {
+      setCustomTime({
+        date_min: filterTimeOptions[timeOptionId]['date_min'],
+        date_max: filterTimeOptions[timeOptionId]['date_max'],
+      })
+      return
+    } 
+    onSearchTime?.()
   }
 
-  const handleReset = () => {}
-  const handleConfirm = () => {}
+  const handleReset = () => {
+    setSearchFilter({ type: undefined, timeKey: '0', delivery_notice_order_no: '' })
+    onReset?.()
+  }
+  const handleConfirm = () => {
+    const changedField = {
+      type: searchFilter.type,
+      delivery_notice_order_no: searchFilter.delivery_notice_order_no,
+      date_min: customTime.date_min,
+      date_max: customTime.date_max,
+    }
+    console.log('changedField==>', changedField)
+    onConfirm?.(changedField, searchFilter.timeKey)
+  }
+
+  const scanIcon = () => {
+    // 扫描
+    const handleScan = () => {
+      Taro.scanCode({
+        success(res) {
+          setSearchFilter((prevProps) => ({ ...prevProps, delivery_notice_order_no: res.result }))
+        },
+        fail(res) {
+          console.log(res)
+        },
+      })
+    }
+    return (
+      <View onClick={handleScan} className={styles.scanHandler}>
+        <IconFont name='icon-saomiao' size={40}></IconFont>
+      </View>
+    )
+  }
 
   return (
     <>
+      <View className={styles.filterItem}>
+        <View className={styles['filterItem--title']}>发货单号</View>
+        <View className={classnames(styles['filterItem--wrapper'], styles['filter--inputBar'])}>
+          <Search
+            placeholder='请输入或扫描条形码'
+            showBtn={false}
+            adjustPosition={true}
+            changeOnSearch={handleSearchBarChange}
+            debounceTime={300}
+            defaultValue={searchFilter.delivery_notice_order_no}
+            customRightSlot={scanIcon()}></Search>
+        </View>
+      </View>
       <View className={styles.filterItem}>
         <View className={styles['filterItem--title']}>发货类型</View>
         <View className={classnames(styles['filterItem--wrapper'], styles['filter--type'])}>
@@ -116,17 +194,7 @@ const DeliveryFilter: FC = memo(() => {
             })}
         </View>
       </View>
-      <View className={styles.filterItem}>
-        <View className={styles['filterItem--title']}>发货单号</View>
-        <View className={classnames(styles['filterItem--wrapper'], styles['filter--inputBar'])}>
-          <Search
-            placeholder='请输入或扫描条形码'
-            showBtn={false}
-            changeOnSearch={handleSearchBarChange}
-            debounceTime={300}
-            customRightSlot={scanIcon()}></Search>
-        </View>
-      </View>
+
       <View className={styles.filterItem}>
         <View className={styles['filterItem--title']}>查询日期</View>
         <View className={classnames(styles['filterItem--wrapper'], styles['filter--time'])}>
@@ -154,14 +222,8 @@ const DeliveryFilter: FC = memo(() => {
   )
 })
 
-interface PropsType {
-  isActive: boolean
-  onClick?: Function
-  children?: React.ReactNode
-  customClassName?: string
-}
-
-const FilterButton: FC<PropsType> = ({ onClick, children, isActive = false, customClassName }) => {
+const FilterButton: FC<ButtonPropsType> = (props) => {
+  const { onClick, children, isActive = false, customClassName } = props
   const handleClick = () => {
     onClick?.()
   }

src/pages/delivery/index.module.scss

@@ -6,6 +6,7 @@ page {
 }
 
 .delivery {
+  position: relative;
   display: flex;
   flex-flow: column nowrap;
   overflow: hidden;
@@ -21,7 +22,7 @@ page {
   .listBox {
     flex: 1 1 auto;
     background-color: #f7f7f7;
-    overflow: scroll;
+    height: 100%;
     &--total {
       display: block;
       margin-top: 24px;

src/pages/delivery/index.tsx

@@ -13,7 +13,8 @@ import IconFont from '@/components/iconfont/iconfont'
 import ItemList from './components/ItemList'
 import DeliveryStatusList from './components/DeliveryStatusList'
 import Popup from '@/components/popup'
-import DeliveryFilter from './components/Filter'
+import DeliveryFilter, { SearchField } from './components/Filter'
+import TimePicker from '@/components/timePicker'
 
 type SearchData = {
   delivery_notice_order_no?: string // 发货单号
@@ -25,23 +26,17 @@ type SearchData = {
   size: number
 }
 
-const scanIcon = () => {
-  // 扫描
-  const handleScan = () => {}
-  return (
-    <View onClick={handleScan} className={styles.scanHandler}>
-      <IconFont name='icon-saomiao' size={40}></IconFont>
-    </View>
-  )
+
+
+const defaultSearchFields = {
+  delivery_notice_order_status: 0, // 待发货
+  page: 1,
+  size: 10,
 }
 
 // 发货列表
 const Delivery: FC = () => {
-  const [search, setSearch] = useState<SearchData>({
-    delivery_notice_order_status: 0, // 待发货
-    page: 1,
-    size: 10,
-  })
+  const [search, setSearch] = useState<SearchData>(defaultSearchFields)
   const [deliveryOrderList, setDeliveryOrderList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
 
   const { fetchData: FetchDeliveryOrderList, state: orderState } = DeliverNoticeOrderList()
@@ -50,27 +45,15 @@ const Delivery: FC = () => {
     return dataLoadingStatus({ list: deliveryOrderList.list, total: deliveryOrderList.total, status: orderState.loading })
   }, [deliveryOrderList, orderState])
 
-  // const [clientObj, setclientObj] = useState({
-  //   clientId: null,
-  //   clientName: '',
-  // })
-
   //输入搜索关键字
   const getSearchData = useCallback((searchValue: string) => {
+    setSearch((prevProps) => ({ ...prevProps, delivery_notice_order_no: searchValue }))
     console.log('searchValue==>', searchValue)
-    // pageNum.current.page = 1
-    // setClientlist(() => ({ list: [], total: 0 }))
-    // setSearch((e) => ({ ...e, name: eq, size: 10 }))
   }, [])
 
-  // const router = useRouter()
-
   useEffect(() => {
     console.log('useEffect ===> search', search)
-    if (search.delivery_notice_order_no === '') {
-      setSearch((e) => ({ ...e, delivery_notice_order_no: undefined }))
-    }
-    if (search.delivery_notice_order_no !== '') getData()
+    getData()
   }, [search])
 
   //上拉加载数据
@@ -87,6 +70,7 @@ const Delivery: FC = () => {
 
   //列表下拉刷新
   const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+
   const getRefresherRefresh = async () => {
     pageNum.current.size = 1
     setRefresherTriggeredStatus(true)
@@ -94,59 +78,11 @@ const Delivery: FC = () => {
   }
   const getData = async () => {
     const res = await FetchDeliveryOrderList(getFilterData(search))
-    // if (router?.params.clientId) {
-    //   res.data.list.map((item) => {
-    //     if (item.id == router?.params.clientId) {
-    //       item.checked = true
-    //     } else {
-    //       item.checked = false
-    //     }
-    //     return item
-    //   })
-    // }
+
     setDeliveryOrderList((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
     setRefresherTriggeredStatus(() => false)
   }
 
-  // //选择客户
-  // const selectClient = (item) => {
-  //   clentList.list.map((it) => {
-  //     if (item.id === it.id) {
-  //       it.checked = true
-  //     } else {
-  //       it.checked = false
-  //     }
-  //     return it
-  //   })
-  //   setclientObj(item)
-  //   let pages = Taro.getCurrentPages() // 获取当前的页面栈
-  //   let prevPage = pages[pages.length - 2]
-  //   prevPage.setData({
-  //     //设置上一个页面的值
-  //     clientId: item.id,
-  //     clientName: item.name,
-  //   })
-  //   setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total }))
-  //   Taro.navigateBack({
-  //     delta: 1,
-  //   })
-  // }
-  // useEffect(() => {
-  //   if (clientObj?.clientId !== null) {
-  //     setclientObj(clientObj)
-  //   } else {
-  //     let pages = Taro.getCurrentPages() // 获取当前的页面栈
-  //     let prevPage = pages[pages.length - 2]
-  //     prevPage.setData({
-  //       //设置上一个页面的值
-  //       clientId: '',
-  //       clientName: '',
-  //     })
-  //   }
-  // }, [clientObj])
-
-  const handleChangeFilterData = () => {}
-
   const [currentStatus, setCurrentStatus] = useState('待发货')
 
   const handleChangeStatus = ({ id: statusId, name: statusName }) => {
@@ -158,7 +94,6 @@ const Delivery: FC = () => {
     }
     setCurrentStatus(statusName)
     setSearch((e) => ({ ...e, delivery_notice_order_status: fuckingBadCodeId }))
-    getData()
   }
 
   const handleAuditSuccess = () => {
@@ -170,18 +105,74 @@ const Delivery: FC = () => {
   const onShowFilter = () => {
     setShowFilter(true)
   }
-
+  // 点击关闭筛选列表框
   const handlePopupClose = () => {
     setShowFilter(false)
   }
-  
+
+  // 展示时间筛选
+  const [showTime, setShowTime] = useState(false)
+
+  // 点击关闭时间筛选
+  const handClose = () => {
+    setShowTime(false)
+  }
+  const [start, setStart] = useState(new Date().toLocaleDateString())
+  const [end, setEnd] = useState('')
+  // 选择时间
+  const handTime = (event) => {
+    console.log(event?.value, 'event?.value?.start')
+    setStart(event?.value?.start)
+    setEnd(event?.value?.end)
+    setShowTime(false)
+    console.log(search, 8888)
+  }
+  // 显示时间选择器
+  const handleSearchTime = () => {
+    setShowTime(true)
+  }
+  // 筛选框点击确认
+  const handleConfirm = (changedFields: SearchField, timeKey) => {
+    console.log('changedFields==>changedFields', changedFields)
+    // 自定义时间
+    if (timeKey === '6') {
+      setSearch((prevProps) => ({ ...prevProps, ...changedFields, date_min: start, date_max: end }))
+    } else {
+      setSearch((prevProps) => ({ ...prevProps, ...changedFields }))
+    }
+    handlePopupClose()
+  }
+  // 筛选框点击重置
+  const handleReset = () => {
+    setSearch(defaultSearchFields)
+    handlePopupClose()
+  }
+
+  const scanIcon = () => {
+    // 扫描
+    const handleScan = () => {
+      Taro.scanCode({
+        success(res) {
+          setSearch((e) => ({ ...e, delivery_notice_order_no: res.result }))
+        },
+        fail(res) {
+          console.log(res)
+        },
+      })
+    }
+    return (
+      <View onClick={handleScan} className={styles.scanHandler}>
+        <IconFont name='icon-saomiao' size={40}></IconFont>
+      </View>
+    )
+  }
 
   return (
     <View className={styles.delivery}>
       <View className={styles.searchBox}>
         <Search placeholder='请输入或扫描条形码' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} customRightSlot={scanIcon()}>
           <View onClick={onShowFilter} className={styles.icon__filter}>
-            <IconText iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
+            <IconText svg iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
           </View>
         </Search>
       </View>
@@ -204,8 +195,9 @@ const Delivery: FC = () => {
         </InfiniteScroll>
       </View>
       <Popup show={showFilter} title='筛选列表' onClose={handlePopupClose}>
-        <DeliveryFilter />
+        <DeliveryFilter onSearchTime={handleSearchTime} onConfirm={handleConfirm} onReset={handleReset} />
       </Popup>
+      <TimePicker start={start} end={end} showTime={showTime} closePopup={handClose} onSelectDate={(e) => handTime(e)}></TimePicker>
     </View>
   )
 }