✨ feat(提货列表): 新增提货列表|提货详情
This commit is contained in:
xuan
@@ -0,0 +1,42 @@
|
||||
import SegmentedControl from '@/components/segmentedControl'
|
||||
import { FC, memo, useCallback, useEffect, useState } from 'react'
|
||||
import { EnumTakeGoodsOrderStatus } from '@/api/index'
|
||||
|
||||
type PropsType = {
|
||||
onChangeStatus?: (data: { id: number; name: string }) => void
|
||||
}
|
||||
|
||||
const DeliveryStatusList = memo<PropsType>((props) => {
|
||||
const { onChangeStatus } = props
|
||||
const { fetchData } = EnumTakeGoodsOrderStatus()
|
||||
const [statusList, setStatusList] = useState([
|
||||
{
|
||||
id: -1,
|
||||
name: '全部',
|
||||
},
|
||||
])
|
||||
// 请求
|
||||
const getDeliveryStatusList = async () => {
|
||||
const res = await fetchData()
|
||||
console.log(res.data.list)
|
||||
setStatusList(
|
||||
res.data.list.filter((item) => {
|
||||
return item.id === 0 || item.id === 1 // 提货中 已收货
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getDeliveryStatusList()
|
||||
}, [])
|
||||
|
||||
// //状态改变
|
||||
const changeStatus = useCallback(
|
||||
(data: { id: number; name: string }) => {
|
||||
onChangeStatus && onChangeStatus({ id: data.id, name: data.name })
|
||||
},
|
||||
[onChangeStatus],
|
||||
)
|
||||
return <SegmentedControl list={statusList} onSelect={changeStatus} defaultId={statusList[0].id} />
|
||||
})
|
||||
export default DeliveryStatusList
|
||||
@@ -0,0 +1,88 @@
|
||||
.filterItem {
|
||||
margin: 24px 48px;
|
||||
&--title {
|
||||
font-size: 28px;
|
||||
font-weight: 550;
|
||||
line-height: 1.5;
|
||||
}
|
||||
&--wrapper {
|
||||
margin-top: 24px;
|
||||
display: grid;
|
||||
grid-gap: 16px 16px;
|
||||
}
|
||||
}
|
||||
.filter {
|
||||
&--time {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
&--inputBar {
|
||||
}
|
||||
&--type {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
.filterTypeButton {
|
||||
padding: 0 24px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.filterTypeText {
|
||||
color: #6e6e6e !important;
|
||||
}
|
||||
.filterTimeButton {
|
||||
grid-column-start: span 2;
|
||||
}
|
||||
.selected {
|
||||
background-color: #eaf2ff;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
border: 0 solid transparent;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 8px;
|
||||
font-size: 28px;
|
||||
height: 72px;
|
||||
&--text {
|
||||
color: #909090;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
&--active {
|
||||
border: 1px solid $color_main;
|
||||
background-color: #eaf2ff;
|
||||
.filterButton--text {
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filterController {
|
||||
margin-top: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
btn:hover{
|
||||
filter: blur(.7);
|
||||
}
|
||||
|
||||
.rest_btn {
|
||||
font-size: 28px;
|
||||
}
|
||||
.verify_btn {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
import NormalButton from '@/components/normalButton'
|
||||
import Popup from '@/components/popup'
|
||||
import { View } from '@tarojs/components'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import React, { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import Search from '@/components/search'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import { EnumTakeGoodsOrderTypeList } from '@/api/index'
|
||||
import dayjs from 'dayjs'
|
||||
import { getFilterData } from '@/common/util'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
interface SearchFilter {
|
||||
take_goods_order_type?: number
|
||||
timeKey?: string
|
||||
take_goods_order_no?: string
|
||||
}
|
||||
|
||||
export interface SearchField extends Omit<SearchFilter, 'timeKey'> {
|
||||
date_min?: string
|
||||
date_max?: string
|
||||
}
|
||||
|
||||
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 } = EnumTakeGoodsOrderTypeList()
|
||||
|
||||
const [searchFilter, setSearchFilter] = useState<SearchFilter>({
|
||||
take_goods_order_type: undefined,
|
||||
timeKey: '0',
|
||||
take_goods_order_no: '',
|
||||
})
|
||||
const handleSelectedType = (type: string | number) => {
|
||||
console.log('type==>', type)
|
||||
if (typeof type === 'string' && type === 'default') {
|
||||
setSearchFilter((e) => ({ ...e, take_goods_order_type: undefined }))
|
||||
} else {
|
||||
setSearchFilter((e) => ({ ...e, take_goods_order_type: type as number }))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleSearchBarChange = useCallback((searchValue: string) => {
|
||||
console.log('searchValue==>', searchValue)
|
||||
setSearchFilter((prevProps) => ({ ...prevProps, take_goods_order_no: searchValue }))
|
||||
}, [])
|
||||
|
||||
const typeList = useMemo<{ id: number; name: string }[]>(() => {
|
||||
return state.data.list
|
||||
}, [state])
|
||||
|
||||
useEffect(() => {
|
||||
if (!!!typeList?.length) {
|
||||
getEnumData()
|
||||
console.log('getEnumData')
|
||||
}
|
||||
}, [typeList])
|
||||
|
||||
const getEnumData = async () => {
|
||||
await fetchData()
|
||||
}
|
||||
|
||||
const [customTime, setCustomTime] = useState({
|
||||
date_min: undefined,
|
||||
date_max: undefined,
|
||||
})
|
||||
|
||||
|
||||
|
||||
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 = () => {
|
||||
setSearchFilter({ take_goods_order_type: undefined, timeKey: '0', take_goods_order_no: '' })
|
||||
onReset?.()
|
||||
}
|
||||
const handleConfirm = () => {
|
||||
const changedField = {
|
||||
take_goods_order_type: searchFilter.take_goods_order_type,
|
||||
take_goods_order_no: searchFilter.take_goods_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, take_goods_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.take_goods_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'])}>
|
||||
<FilterButton isActive={searchFilter.take_goods_order_type == undefined} onClick={() => handleSelectedType('default')}>
|
||||
不限
|
||||
</FilterButton>
|
||||
{!!typeList?.length &&
|
||||
typeList?.map((item) => {
|
||||
return (
|
||||
<FilterButton isActive={searchFilter.take_goods_order_type === item?.id} onClick={() => handleSelectedType(item?.id)}>
|
||||
{item.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className={styles.filterItem}>
|
||||
<View className={styles['filterItem--title']}>查询日期</View>
|
||||
<View className={classnames(styles['filterItem--wrapper'], styles['filter--time'])}>
|
||||
{Object.entries(filterTimeOptions).map(([key, value]) => {
|
||||
return (
|
||||
<FilterButton isActive={searchFilter.timeKey === key} onClick={() => handleSelectedTime(key)}>
|
||||
{value.name}
|
||||
</FilterButton>
|
||||
)
|
||||
})}
|
||||
<FilterButton isActive={searchFilter.timeKey === '6'} customClassName={styles.filterTimeButton} onClick={() => handleSelectedTime('6')}>
|
||||
自定义时间<IconFont name='icon-chakanquanbukehu' size={40} color={searchFilter.timeKey === '6' ? '#4581ff' : '#909090'}></IconFont>
|
||||
</FilterButton>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.filterController}>
|
||||
<NormalButton type='primary' round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
|
||||
重置
|
||||
</NormalButton>
|
||||
<NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
|
||||
确认
|
||||
</NormalButton>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
||||
const FilterButton: FC<ButtonPropsType> = (props) => {
|
||||
const { onClick, children, isActive = false, customClassName } = props
|
||||
const handleClick = () => {
|
||||
onClick?.()
|
||||
}
|
||||
return (
|
||||
<View className={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)} onClick={handleClick}>
|
||||
<View className={classnames(styles['filterButton--text'])}>{children}</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeliveryFilter
|
||||
@@ -0,0 +1,62 @@
|
||||
.layoutBlock{
|
||||
margin: 24px;
|
||||
}
|
||||
.topBar {
|
||||
font-size: 28px;
|
||||
&__orderNo {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
color: $color_font_one;
|
||||
}
|
||||
&__orderType {
|
||||
color: rgba($color: #000000, $alpha: 0.6);
|
||||
font-weight: 550;
|
||||
}
|
||||
&__orderStatus {
|
||||
font-weight: 550;
|
||||
&--finished{
|
||||
color: $color_font_three;
|
||||
}
|
||||
&--takingGoods{
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
font-size: 28px;
|
||||
color: rgba($color: #000000, $alpha: 0.4);
|
||||
&__left {
|
||||
min-width: 140px;
|
||||
}
|
||||
&__right {
|
||||
@include common_ellipsis(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomBar {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
&__button {
|
||||
margin: 0 24px;
|
||||
font-size: 28px;
|
||||
padding: 0 26px;
|
||||
}
|
||||
&__button:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.bord {
|
||||
color: $color_font_one;
|
||||
}
|
||||
.tag{
|
||||
margin: 0 16px;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import LayoutBlock from '@/components/layoutBlock'
|
||||
import Divider from '@/components/divider'
|
||||
import Tag from '@/components/tag'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC } from 'react'
|
||||
import NormalButton from '@/components/normalButton'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { EnumSaleMode } from '@/common/Enumerate'
|
||||
import { formatDateTime, formatMeterDiv } from '@/common/format'
|
||||
import { goLink } from '@/common/common'
|
||||
import { TakeGoodsOrderAudit } from '@/api/index'
|
||||
import Taro from '@tarojs/taro'
|
||||
import SaleModeTag from '@/components/saleModeTag'
|
||||
|
||||
type PropsType = {
|
||||
itemData: Record<string, any>
|
||||
onSuccess?: Function
|
||||
}
|
||||
|
||||
const ItemList:FC<PropsType> = (props) => {
|
||||
const { itemData, onSuccess } = props
|
||||
// 查看详情
|
||||
const handleDetail = (itemData: Record<string, any>) => {
|
||||
goLink('/pages/takeDeliveryDetail/index', {
|
||||
id: itemData.id,
|
||||
})
|
||||
}
|
||||
|
||||
const { fetchData, state } = TakeGoodsOrderAudit()
|
||||
|
||||
// 确认审核
|
||||
const handleAudit = (id: number) => {
|
||||
Taro.showModal({
|
||||
content: '确认要审核吗？',
|
||||
confirmColor: '#337FFF',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
const res = await fetchData({ id })
|
||||
if (res.success) {
|
||||
Taro.showToast({ title: '审核成功', icon: 'success' })
|
||||
onSuccess?.()
|
||||
}else{
|
||||
Taro.showToast({ title: '审核失败', icon: 'error' })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<LayoutBlock circle customClassName={styles.layoutBlock}>
|
||||
<View className={styles.topBar}>
|
||||
<View className={styles.topBar__orderNo}>
|
||||
<View>单号：{itemData?.take_goods_order_no}</View>
|
||||
{itemData?.take_goods_status === 0 && <View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--takingGoods'])}>提货中</View>}
|
||||
{itemData?.take_goods_status === 1 && (
|
||||
<View className={classnames(styles.topBar__orderStatus, styles['topBar__orderStatus--finished'])}>已收货</View>
|
||||
)}
|
||||
</View>
|
||||
<Text className={styles.topBar__orderType}>{itemData?.take_goods_order_type_name}</Text>
|
||||
</View>
|
||||
<Divider direction='horizontal' customStyles={{ margin: '30rpx 0' }}></Divider>
|
||||
<View className={styles.content}>
|
||||
<View className={classnames(styles.content__row, styles.bord)}>
|
||||
<View className={styles.content__row__left}>货品信息：</View>
|
||||
<View className={styles.content__row__right}>
|
||||
<SaleModeTag saleMode={itemData.sale_mode} size='small' customClassName={styles.tag}></SaleModeTag>
|
||||
{itemData.delivery_product_nums}种面料，{itemData.delivery_product_color_nums}种颜色，共
|
||||
{itemData?.sale_mode === EnumSaleMode.Bulk ? `${itemData?.take_roll}条` : `${formatMeterDiv(itemData?.take_meters)}米`}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.content__row}>
|
||||
<View className={styles.content__row__left}>供应信息：</View>
|
||||
<View className={styles.content__row__right}>{itemData?.delivery_address || '空'}</View>
|
||||
</View>
|
||||
<View className={styles.content__row}>
|
||||
<View className={styles.content__row__left}>创建时间：</View>
|
||||
<View className={styles.content__row__right}>{formatDateTime(itemData?.create_time) || '空'}</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.bottomBar}>
|
||||
<NormalButton
|
||||
customClassName={styles.bottomBar__button}
|
||||
type='info'
|
||||
customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
|
||||
round
|
||||
onClick={() => handleDetail(itemData)}>
|
||||
查看详情
|
||||
</NormalButton>
|
||||
{itemData?.status === 0 && (
|
||||
<NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
|
||||
确认审核
|
||||
</NormalButton>
|
||||
)}
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
)
|
||||
}
|
||||
export default ItemList
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '提货列表',
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
.delivery {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
overflow: hidden;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.searchBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
padding: 8px 24px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.listBox {
|
||||
flex: 1 1 auto;
|
||||
background-color: #f7f7f7;
|
||||
height: 100%;
|
||||
&--total {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
padding: 0 24px;
|
||||
font-size: 24px;
|
||||
color: #9d9d9d;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scanHandler {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.icon__filter {
|
||||
padding: 0 20px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, FC, memo } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Search from '@/components/search'
|
||||
import { TakeGoodsOrderList } from '@/api/index'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useRouter } from '@tarojs/taro'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
import IconText from '@/components/iconText'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import ItemList from './components/ItemList'
|
||||
import DeliveryStatusList from './components/DeliveryStatusList'
|
||||
import Popup from '@/components/popup'
|
||||
import DeliveryFilter, { SearchField } from './components/Filter'
|
||||
import TimePicker from '@/components/timePicker'
|
||||
|
||||
type SearchData = {
|
||||
take_goods_order_no?: string // 提货单号
|
||||
take_goods_status?: number | string // 提货状态
|
||||
date_min?: string // 开始时间
|
||||
date_max?: string // 结束时间
|
||||
take_goods_order_type?: number // 提货类型
|
||||
page: number
|
||||
size: number
|
||||
}
|
||||
|
||||
|
||||
|
||||
const defaultSearchFields = {
|
||||
take_goods_status: 0, // 待提货
|
||||
page: 1,
|
||||
size: 10,
|
||||
}
|
||||
|
||||
// 提货列表
|
||||
const Delivery: FC = () => {
|
||||
const [search, setSearch] = useState<SearchData>(defaultSearchFields)
|
||||
const [takeDeliveryOrderList, setDeliveryOrderList] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
|
||||
|
||||
const { fetchData: FetchDeliveryOrderList, state: orderState } = TakeGoodsOrderList()
|
||||
//数据加载状态
|
||||
const statusMore = useMemo(() => {
|
||||
return dataLoadingStatus({ list: takeDeliveryOrderList.list, total: takeDeliveryOrderList.total, status: orderState.loading })
|
||||
}, [takeDeliveryOrderList, orderState])
|
||||
|
||||
//输入搜索关键字
|
||||
const getSearchData = useCallback((searchValue: string) => {
|
||||
setSearch((prevProps) => ({ ...prevProps, take_goods_order_no: searchValue }))
|
||||
console.log('searchValue==>', searchValue)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('useEffect ===> search', search)
|
||||
getData()
|
||||
}, [search])
|
||||
|
||||
//上拉加载数据
|
||||
const pageNum = useRef({ size: search.size, page: search.page })
|
||||
|
||||
const getScrollToLower = useCallback(() => {
|
||||
if (takeDeliveryOrderList.list.length < takeDeliveryOrderList.total) {
|
||||
pageNum.current.page++
|
||||
const size = pageNum.current.size * pageNum.current.page
|
||||
setSearch((e) => ({ ...e, size }))
|
||||
console.log(search, 11111)
|
||||
}
|
||||
}, [takeDeliveryOrderList])
|
||||
|
||||
//列表下拉刷新
|
||||
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
||||
|
||||
const getRefresherRefresh = async () => {
|
||||
pageNum.current.size = 1
|
||||
setRefresherTriggeredStatus(true)
|
||||
setSearch((val) => ({ ...val, size: 10 }))
|
||||
}
|
||||
// 请求数据
|
||||
const getData = async () => {
|
||||
const res = await FetchDeliveryOrderList(getFilterData(search))
|
||||
|
||||
setDeliveryOrderList((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
|
||||
setRefresherTriggeredStatus(() => false)
|
||||
}
|
||||
|
||||
const [currentStatus, setCurrentStatus] = useState('待提货')
|
||||
|
||||
const handleChangeStatus = ({ id: statusId, name: statusName }) => {
|
||||
setCurrentStatus(statusName)
|
||||
setSearch((e) => ({ ...e, take_goods_status: statusId }))
|
||||
}
|
||||
|
||||
const handleAuditSuccess = () => {
|
||||
getData()
|
||||
}
|
||||
|
||||
const [showFilter, setShowFilter] = useState(false)
|
||||
// 筛选列表
|
||||
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, take_goods_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 svg iconName='icon-shaixuan' text='筛选' customClass={styles['icon--filter']} />
|
||||
</View>
|
||||
</Search>
|
||||
</View>
|
||||
{/* 状态栏 */}
|
||||
<DeliveryStatusList onChangeStatus={handleChangeStatus}></DeliveryStatusList>
|
||||
|
||||
<View className={styles.listBox}>
|
||||
<InfiniteScroll
|
||||
statusMore={statusMore}
|
||||
selfonScrollToLower={getScrollToLower}
|
||||
refresherEnabled={true}
|
||||
refresherTriggered={refresherTriggeredStatus}
|
||||
selfOnRefresherRefresh={getRefresherRefresh}>
|
||||
<Text className={styles['listBox--total']}>
|
||||
{currentStatus}共 {takeDeliveryOrderList.total} 单
|
||||
</Text>
|
||||
{takeDeliveryOrderList.list.map((item, index) => {
|
||||
return <ItemList itemData={item} key={item.id} onSuccess={handleAuditSuccess}></ItemList>
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
<Popup show={showFilter} title='筛选列表' onClose={handlePopupClose}>
|
||||
<DeliveryFilter onSearchTime={handleSearchTime} onConfirm={handleConfirm} onReset={handleReset} />
|
||||
</Popup>
|
||||
<TimePicker start={start} end={end} showTime={showTime} closePopup={handClose} onSelectDate={(e) => handTime(e)}></TimePicker>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default Delivery
|
||||
Reference in New Issue
Block a user