📃 docs:解决冲突问题
This commit is contained in:
Haiyi
@@ -7,22 +7,24 @@ import NormalButton from '@/components/normalButton'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { EnumSaleMode } from '@/common/Enumerate'
|
||||
import { formatDateTime } from '@/common/format'
|
||||
import { formatDateTime, formatMeterDiv } from '@/common/format'
|
||||
import { goLink } from '@/common/common'
|
||||
import { DeliveryNoticeOrderAudit } from '@/api/index'
|
||||
import Taro from '@tarojs/taro'
|
||||
import SaleModeTag from '@/components/saleModeTag'
|
||||
|
||||
type PropsType = {
|
||||
itemData?: Record<string, any>
|
||||
itemData: Record<string, any>
|
||||
onSuccess?: Function
|
||||
}
|
||||
|
||||
const ItemList:FC<PropsType> = (props) => {
|
||||
const { itemData, onSuccess } = props
|
||||
// 查看详情
|
||||
const handleDetail = (id: number) => {
|
||||
const handleDetail = (itemData: Record<string, any>) => {
|
||||
goLink('/pages/deliveryDetail/index', {
|
||||
id
|
||||
id: itemData.id,
|
||||
order_no: itemData.order_no,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -62,22 +64,9 @@ const ItemList:FC<PropsType> = (props) => {
|
||||
<View className={classnames(styles.content__row, styles.bord)}>
|
||||
<View className={styles.content__row__left}>货品信息：</View>
|
||||
<View className={styles.content__row__right}>
|
||||
{itemData?.sale_mode === EnumSaleMode.Bulk && (
|
||||
<Tag type='primary' circle plain size='small' customClassName={styles.tag}>
|
||||
大货
|
||||
</Tag>
|
||||
)}
|
||||
{itemData?.sale_mode === EnumSaleMode.Plate && (
|
||||
<Tag type='danger' circle plain size='small' customClassName={styles.tag}>
|
||||
剪板
|
||||
</Tag>
|
||||
)}
|
||||
{itemData?.sale_mode === EnumSaleMode.BulkCut && (
|
||||
<Tag type='warning' circle plain size='small' customClassName={styles.tag}>
|
||||
散剪
|
||||
</Tag>
|
||||
)}
|
||||
2种面料，4种颜色，共{itemData?.sale_mode === EnumSaleMode.Bulk ? `${itemData?.delivery_roll}条` : `${itemData?.delivery_length}米`}
|
||||
<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?.delivery_roll}条` : `${formatMeterDiv(itemData?.delivery_length)}米`}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.content__row}>
|
||||
@@ -95,7 +84,7 @@ const ItemList:FC<PropsType> = (props) => {
|
||||
type='info'
|
||||
customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
|
||||
round
|
||||
onClick={() => handleDetail(itemData?.id)}>
|
||||
onClick={() => handleDetail(itemData)}>
|
||||
查看详情
|
||||
</NormalButton>
|
||||
{itemData?.status === 0 && (
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, FC, memo } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import Search from '@/components/search'
|
||||
import { DeliverNoticeOrderList, EnumSaleorderStatus } from '@/api/index'
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '发货详情',
|
||||
navigationBarTitleText: '销售发货',
|
||||
}
|
||||
|
||||
@@ -1,3 +1,101 @@
|
||||
.deliveryDetail{
|
||||
|
||||
page {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
.deliveryDetail {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: 100%;
|
||||
.content {
|
||||
padding-top: 24px;
|
||||
flex: 1 1 auto;
|
||||
overflow: scroll;
|
||||
.detailTop {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.bottomBar {
|
||||
flex: none;
|
||||
margin: 0 24px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
padding-bottom: calc(20px + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
.detailInfo {
|
||||
.detailInfoItem {
|
||||
&--title {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
&--detail {
|
||||
&--row{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
&--name{
|
||||
|
||||
}
|
||||
&--count{
|
||||
|
||||
}
|
||||
&--weight{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderInfoTop{
|
||||
font-size: 28px;
|
||||
color: $color_font_one;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.orderNo {
|
||||
font-size: 28px;
|
||||
font-weight: 550;
|
||||
}
|
||||
.status {
|
||||
font-size: 28px;
|
||||
&--toBeAudit {
|
||||
color: $color_danger;
|
||||
}
|
||||
&--audited {
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.total {
|
||||
margin-top: 24px;
|
||||
padding: 15px 24px;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
color: #f79b31;
|
||||
background: #fef9f4;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
.totalContent{
|
||||
flex: 1 1 auto;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,170 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import { FC } from "react"
|
||||
import { DeliverNoticeOrder, DeliveryNoticeOrderAudit, DeliveryNoticeOrderUpload } from '@/api'
|
||||
import { formatDateTime, formatMeterDiv, formatWeightDiv } from '@/common/format'
|
||||
import Cell from '@/components/cell'
|
||||
import Divider from '@/components/divider'
|
||||
import LayoutBlock from '@/components/layoutBlock'
|
||||
import NormalButton from '@/components/normalButton'
|
||||
import SaleModeTag from '@/components/saleModeTag'
|
||||
import UploadImage from '@/components/uploadImage'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useRouter } from '@tarojs/taro'
|
||||
import { alert } from '@/common/common'
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
const DeliveryDetail: FC = () => {
|
||||
return <View className={styles.deliveryDetail}>发货详情</View>
|
||||
const router = useRouter()
|
||||
|
||||
const { fetchData } = DeliverNoticeOrder()
|
||||
|
||||
const [detailInfo, setDetailInfo] = useState<Record<string, any>>({})
|
||||
|
||||
const getData = async () => {
|
||||
const { id, order_no } = router.params
|
||||
const res = await fetchData({
|
||||
id,
|
||||
order_no,
|
||||
})
|
||||
console.log('res==>', res.data)
|
||||
setDetailInfo(res.data)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const { fetchData: uploadData } = DeliveryNoticeOrderUpload()
|
||||
|
||||
const { fetchData: FetchAudit } = DeliveryNoticeOrderAudit()
|
||||
|
||||
const DetailItem = useMemo(() => {
|
||||
const element =
|
||||
!!detailInfo?.weight_list?.length &&
|
||||
detailInfo?.weight_list.map((weightItem) => {
|
||||
return (
|
||||
<View className={styles.detailInfo}>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<View className={styles.detailInfoItem}>
|
||||
<View className={styles['detailInfoItem--title']}>
|
||||
<View className=''>
|
||||
<Text style={{ marginRight: '20rpx' }}>
|
||||
{weightItem.product_code} {weightItem.product_name}
|
||||
</Text>
|
||||
<SaleModeTag saleMode={weightItem?.sale_mode} />
|
||||
</View>
|
||||
<View className=''>共 {weightItem?.sale_mode === 0 ? `${weightItem.roll} 条` : `${formatMeterDiv(weightItem?.length || 0)} 米`}</View>
|
||||
</View>
|
||||
<View className={styles['detailInfoItem--detail']}>
|
||||
<View className={styles['detailInfoItem--detail--row']}>
|
||||
<View className={styles['detailInfoItem--detail--name']}>
|
||||
{weightItem.product_color_code} {weightItem.product_color_name}
|
||||
</View>
|
||||
<View className={styles['detailInfoItem--detail--count']}>
|
||||
x{weightItem?.sale_mode === 0 ? `${weightItem.roll} 条` : `${formatMeterDiv(weightItem?.length || 0)} 米`}
|
||||
</View>
|
||||
<View className={styles['detailInfoItem--detail--weight']}>{formatWeightDiv(weightItem.weight)}/kg</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
return <>{element}</>
|
||||
}, [detailInfo])
|
||||
|
||||
const [readyToUploadList, setReadyToUploadList] = useState<string[]>([])
|
||||
|
||||
const handleUploadChange = (imageList: string[]) => {
|
||||
console.log('imageList===>', imageList)
|
||||
setReadyToUploadList((prev) => [...prev, ...imageList])
|
||||
}
|
||||
// 上传附件
|
||||
const handleUploadPic = useCallback(async () => {
|
||||
const res = await uploadData({
|
||||
id: Number(router.params.id),
|
||||
delivery_appendix: readyToUploadList,
|
||||
})
|
||||
if (res.success) {
|
||||
alert.success('上传成功')
|
||||
} else {
|
||||
alert.error('上传核失败')
|
||||
}
|
||||
}, [readyToUploadList])
|
||||
|
||||
// 审核
|
||||
const handleAudit = useCallback(() => {
|
||||
if (readyToUploadList.length === 0 ) {
|
||||
alert.error('请先上传附件')
|
||||
return
|
||||
}
|
||||
Taro.showModal({
|
||||
confirmColor: '#337FFF',
|
||||
title: '确定审核？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const res = await FetchAudit({ id: Number(router.params.id) })
|
||||
if (res.success) {
|
||||
alert.success('审核成功')
|
||||
getData()
|
||||
} else {
|
||||
alert.error('审核失败')
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}, [readyToUploadList])
|
||||
|
||||
const BottomBar = useMemo(() => {
|
||||
return (
|
||||
<View className={styles.bottomBar}>
|
||||
<NormalButton type='primary' round onClick={handleUploadPic}>
|
||||
上传附件
|
||||
</NormalButton>
|
||||
<NormalButton type='primary' plain round onClick={handleAudit}>
|
||||
确认审核
|
||||
</NormalButton>
|
||||
</View>
|
||||
)
|
||||
}, [handleUploadPic, handleAudit])
|
||||
return (
|
||||
<View className={styles.deliveryDetail}>
|
||||
<View className={styles.content}>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.detailTop}>
|
||||
<View className={styles.orderNo}>发货单号：{detailInfo?.order_no}</View>
|
||||
{detailInfo?.status === 0 ? <View className={styles['status--toBeAudit']}>待审核</View> : <View className={styles['status--audited']}>已完成</View>}
|
||||
</View>
|
||||
{DetailItem}
|
||||
<View className={styles.total}>
|
||||
<Text>汇总：</Text>
|
||||
<Text className={styles.totalContent}>
|
||||
共{detailInfo?.weight_list?.length || 0}种面料，4种颜色，共
|
||||
{detailInfo?.sale_mode === 0 ? `${detailInfo?.total_roll}条` : `${formatMeterDiv(detailInfo?.total_length)}米`}
|
||||
，重量{detailInfo?.total_weight}kg
|
||||
</Text>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.orderInfoTop}>订单信息</View>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<View className='orderInfoDetail'>
|
||||
<Cell title='订单备注：' desc={detailInfo?.sale_order_remark}></Cell>
|
||||
<Cell title='创建时间：' desc={formatDateTime(detailInfo?.create_time)}></Cell>
|
||||
<Cell title='发货方式：' desc={detailInfo?.shipment_mode_name}></Cell>
|
||||
<Cell title='发货地址：' desc={`${detailInfo.province_name}${detailInfo.city_name}${detailInfo.district_name}${detailInfo.address_detail}`}></Cell>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.orderInfoTop}>附件</View>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<UploadImage onlyRead={detailInfo?.status !== 0} onChange={handleUploadChange} defaultList={detailInfo?.delivery_appendix_url}></UploadImage>
|
||||
</LayoutBlock>
|
||||
</View>
|
||||
{detailInfo?.status === 0 && BottomBar}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default DeliveryDetail
|
||||
|
||||
@@ -9,18 +9,23 @@ import { formatPriceDiv } from '@/common/format'
|
||||
import { EnumSaleMode } from '@/common/Enumerate'
|
||||
import { useNeedMemoCallback } from '@/use/useCommon'
|
||||
import {selectList} from '../../config'
|
||||
import { useShoppingContext, useWatch } from '../../context'
|
||||
type PropsType = {
|
||||
item: Record<string, any> & object
|
||||
orderType: EnumSaleMode
|
||||
isSelected: boolean
|
||||
onChecked?: Function
|
||||
onUnChecked?: Function
|
||||
}
|
||||
|
||||
// 注意：如果在表单控件内部使用 useWatch，由于是直接从Context中取值，memo也会直接失去作用。
|
||||
|
||||
const ColorKindItem: FC<PropsType> = memo(
|
||||
(props) => {
|
||||
const { item, orderType = EnumSaleMode.Bulk, isSelected = false, onChecked, onUnChecked } = props
|
||||
console.log('重新渲染', item.id, orderType)
|
||||
const { item, orderType = EnumSaleMode.Bulk} = props
|
||||
const { setChangedCheckbox } = useShoppingContext()
|
||||
console.log('重新渲染 ColorKindItem', item.id, orderType)
|
||||
|
||||
const { checked } = useWatch(item?.id)
|
||||
|
||||
|
||||
//格式化金额
|
||||
const formatPirce = useCallback((price) => {
|
||||
return Number(formatPriceDiv(price))
|
||||
@@ -38,12 +43,12 @@ const ColorKindItem: FC<PropsType> = memo(
|
||||
|
||||
const handleSelect = () => {
|
||||
console.log('handleSelect')
|
||||
// setCheck(true)
|
||||
onChecked && onChecked({ ...item, checked: true })
|
||||
setChangedCheckbox({id: item?.id, checked: true})
|
||||
// onChecked && onChecked({ ...item, checked: true })
|
||||
}
|
||||
const handleClose = () => {
|
||||
// setCheck(false)
|
||||
onUnChecked && onUnChecked({ ...item, checked: false })
|
||||
setChangedCheckbox({ id: item?.id, checked: false })
|
||||
// onUnChecked && onUnChecked({ ...item, checked: false })
|
||||
}
|
||||
|
||||
const getInputValue = debounce(async (num, item) => {
|
||||
@@ -52,16 +57,15 @@ const ColorKindItem: FC<PropsType> = memo(
|
||||
}else{
|
||||
item.length = num
|
||||
}
|
||||
onChecked && onChecked({ ...item, checked: true })
|
||||
// onChecked && onChecked({ ...item, checked: true })
|
||||
}, 300)
|
||||
|
||||
return (
|
||||
<MCheckbox
|
||||
triggerLabel={false}
|
||||
status={isSelected}
|
||||
status={checked}
|
||||
onSelect={handleSelect}
|
||||
onClose={handleClose}
|
||||
customClassName={classnames(styles.checkbox, isSelected ? styles.selected : '')}
|
||||
customClassName={classnames(styles.checkbox, checked ? styles.selected : '')}
|
||||
customTextClass={styles.colorKindItem}>
|
||||
<View className={styles['colorKindItem__left']}>
|
||||
<Image className={styles['colorKindItem__left--image']} mode='aspectFill' src='https://test.cdn.zzfzyc.com/mall/no_img.png'></Image>
|
||||
@@ -96,9 +100,6 @@ const ColorKindItem: FC<PropsType> = memo(
|
||||
const stringifyNextProp = JSON.stringify(nextProp.item)
|
||||
console.log('memo==>', preProp, nextProp);
|
||||
let needMemoized = true
|
||||
if (preProp.isSelected !== nextProp.isSelected) {
|
||||
needMemoized = false
|
||||
}
|
||||
if (preProp.orderType !== nextProp.orderType) {
|
||||
needMemoized = false
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import { FC, ReactNode, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
|
||||
import { InternalShoppingCartAction, ShoppingCartAction, ShoppingContext, useShoppingCart } from '../../context'
|
||||
import { ColorMeta, ColorStore, ShoppingContextValue } from '../../context'
|
||||
|
||||
export type TriggerCheckboxOptions = { colorStore: ColorStore; changedCheckbox: ColorMeta }
|
||||
|
||||
export interface ShoppingCartPropsType {
|
||||
initialValues?: ColorStore
|
||||
onTriggerCheckbox?: (options: TriggerCheckboxOptions) => void
|
||||
children?: ReactNode
|
||||
ref?: ShoppingCartAction
|
||||
}
|
||||
// 购物车上下文组件
|
||||
export const ShoppingCart: FC<ShoppingCartPropsType> = (props) => {
|
||||
const { children, onTriggerCheckbox, initialValues, ref: refProps } = props
|
||||
console.log('重新渲染 ShoppingCart context', refProps)
|
||||
|
||||
const defaultShoppingCart = useShoppingCart()
|
||||
|
||||
const ref = (refProps || defaultShoppingCart) as InternalShoppingCartAction
|
||||
|
||||
const onTriggerCheckboxRef = useRef(onTriggerCheckbox)
|
||||
onTriggerCheckboxRef.current = onTriggerCheckbox
|
||||
|
||||
const [colorStore, setColorStore] = useState<ColorStore>(() => initialValues || {})
|
||||
const [changedCheckbox, setChangedCheckbox] = useState<ColorMeta>({})
|
||||
// 当前高亮的客户
|
||||
const [currentCheckedPurchaserId, setCurrentCheckedPurchaserId] = useState<number>(-1)
|
||||
// 是否管理状态
|
||||
const [isManageStatus, setManageStatus] = useState(false)
|
||||
|
||||
const ctx: ShoppingContextValue = useMemo(() => {
|
||||
console.log('useMemo ShoppingContextValue')
|
||||
return {
|
||||
isManageStatus,
|
||||
setManageStatus,
|
||||
currentCheckedPurchaserId, // 当前高亮的客户
|
||||
setCurrentCheckedPurchaserId, // 设置高亮当前客户
|
||||
colorStore,
|
||||
setChangedCheckbox(color) {
|
||||
setColorStore((prev) => ({ ...prev, [color.id as number]: color }))
|
||||
setChangedCheckbox(color)
|
||||
},
|
||||
}
|
||||
}, [colorStore, currentCheckedPurchaserId, isManageStatus])
|
||||
// 暴露给外界
|
||||
useImperativeHandle(
|
||||
ref.__INTERNAL__,
|
||||
() => ({
|
||||
getManageStatus() {
|
||||
return ctx.isManageStatus
|
||||
},
|
||||
setManageStatus: ctx.setManageStatus,
|
||||
}),
|
||||
[ctx.isManageStatus, ctx.setManageStatus],
|
||||
)
|
||||
|
||||
// 这里要在 useEffect 也就是刷新 state 后再调用，否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改
|
||||
useEffect(() => {
|
||||
onTriggerCheckboxRef.current?.({
|
||||
colorStore,
|
||||
changedCheckbox,
|
||||
})
|
||||
}, [colorStore, changedCheckbox])
|
||||
|
||||
return <ShoppingContext.Provider value={ctx}>{children}</ShoppingContext.Provider>
|
||||
}
|
||||
@@ -12,7 +12,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.selected{
|
||||
.selected {
|
||||
border-color: $color_main;
|
||||
}
|
||||
|
||||
@@ -81,9 +81,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
.drawerOpen{
|
||||
.drawerOpen {
|
||||
height: auto;
|
||||
}
|
||||
.drawerClose {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.saleModeButton {
|
||||
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;
|
||||
.saleModeButton--text {
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noList {
|
||||
margin: 100px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #707070;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { FC, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
||||
import { FC, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { formatPriceDiv } from '@/common/format'
|
||||
@@ -13,12 +13,10 @@ import ColorKindItem from '../colorKindItem'
|
||||
import { EnumSaleMode } from '@/common/Enumerate'
|
||||
import { useNeedMemoCallback } from '@/use/useCommon'
|
||||
import { selectList } from '../../config'
|
||||
import { ShoppingContext } from '../../index'
|
||||
import { useShoppingContext } from '../../context'
|
||||
|
||||
type PropsType = {
|
||||
itemData?: ShoppingCartData
|
||||
selectedId?: number
|
||||
onSelectedId?: Function
|
||||
}
|
||||
|
||||
const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
|
||||
@@ -27,15 +25,22 @@ const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
|
||||
)
|
||||
})
|
||||
|
||||
enum BackEndSaleModeListFieldMap {
|
||||
bulk_color_list = 0,
|
||||
length_cut_color_list = 1,
|
||||
weight_cut_color_list = 2,
|
||||
}
|
||||
|
||||
export default memo<PropsType>((props) => {
|
||||
console.log('props==>', props)
|
||||
const { itemData, selectedId } = props
|
||||
const { itemData } = props
|
||||
|
||||
console.log('重新渲染 shoppingCartItem', selectedId)
|
||||
console.log('重新渲染 shoppingCartItem')
|
||||
const [openDetail, setOpenDetail] = useState(false)
|
||||
|
||||
const handleOpenDetail = () => {
|
||||
setOpenDetail((isOpen) => !isOpen)
|
||||
handleClickLayout()
|
||||
}
|
||||
|
||||
const [selected, setSelect] = useState<EnumSaleMode>(0)
|
||||
@@ -44,83 +49,85 @@ export default memo<PropsType>((props) => {
|
||||
setSelect(type)
|
||||
}
|
||||
|
||||
const [mockList, setMockList] = useState({
|
||||
0: [
|
||||
{ id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
|
||||
{ id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
|
||||
{ id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
|
||||
],
|
||||
1: [
|
||||
{ id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
|
||||
{ id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
|
||||
{ id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
|
||||
],
|
||||
2: [
|
||||
{ id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
|
||||
{ id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
|
||||
],
|
||||
const saleModeList = useRef({
|
||||
bulk_color_list: itemData?.bulk_color_list,
|
||||
length_cut_color_list: itemData?.length_cut_color_list,
|
||||
weight_cut_color_list: itemData?.weight_cut_color_list,
|
||||
})
|
||||
saleModeList.current = {
|
||||
bulk_color_list: itemData?.bulk_color_list,
|
||||
length_cut_color_list: itemData?.length_cut_color_list,
|
||||
weight_cut_color_list: itemData?.weight_cut_color_list,
|
||||
}
|
||||
|
||||
const handleChecked = useCallback(
|
||||
(current) => {
|
||||
console.log('handleChecked', current)
|
||||
const tempList = mockList[selected].map((item) => {
|
||||
if (item.id === current.id) {
|
||||
item = current
|
||||
}
|
||||
return item
|
||||
})
|
||||
setMockList((pre) => {
|
||||
return {
|
||||
...pre,
|
||||
[selected]: tempList,
|
||||
}
|
||||
})
|
||||
},
|
||||
[mockList, selected],
|
||||
)
|
||||
const handleUnChecked = useCallback(
|
||||
(current) => {
|
||||
console.log('handleChecked', current)
|
||||
const tempList = mockList[selected].map((item) => {
|
||||
if (item.id === current.id) {
|
||||
item = current
|
||||
}
|
||||
return item
|
||||
})
|
||||
setMockList((pre) => {
|
||||
return {
|
||||
...pre,
|
||||
[selected]: tempList,
|
||||
}
|
||||
})
|
||||
},
|
||||
[mockList, selected],
|
||||
)
|
||||
// const handleChecked = useCallback(
|
||||
// (current: any) => {
|
||||
// console.log('handleChecked', current)
|
||||
// const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
|
||||
// if (item.id === current.id) {
|
||||
// item = current
|
||||
// }
|
||||
// return item
|
||||
// })
|
||||
// setMockList((pre) => {
|
||||
// return {
|
||||
// ...pre,
|
||||
// [selected]: tempList,
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// [mockList, selected],
|
||||
// )
|
||||
|
||||
// const handleUnChecked = useCallback(
|
||||
// (current: any) => {
|
||||
// console.log('handleChecked', current)
|
||||
// const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
|
||||
// if (item.id === current.id) {
|
||||
// item = current
|
||||
// }
|
||||
// return item
|
||||
// })
|
||||
// setMockList((pre) => {
|
||||
// return {
|
||||
// ...pre,
|
||||
// [selected]: tempList,
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// [mockList, selected],
|
||||
// )
|
||||
|
||||
const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus } = useShoppingContext()
|
||||
|
||||
const memoList = useMemo(() => {
|
||||
return mockList[selected].map((item, index) => {
|
||||
return (
|
||||
<ColorKindItem
|
||||
key={item.id}
|
||||
isSelected={item.checked}
|
||||
item={item}
|
||||
orderType={selected}
|
||||
onChecked={handleChecked}
|
||||
onUnChecked={handleUnChecked}></ColorKindItem>
|
||||
)
|
||||
})
|
||||
}, [mockList, selected])
|
||||
return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
|
||||
itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
|
||||
// 初始化选中状态
|
||||
setChangedCheckbox({ id: item.id, checked: false })
|
||||
|
||||
return <ColorKindItem key={item.id} item={item} orderType={selected}></ColorKindItem>
|
||||
})
|
||||
) : (
|
||||
<View className={styles.noList}>暂无数据</View>
|
||||
)
|
||||
}, [itemData, selected])
|
||||
|
||||
const handleClickLayout = () => {
|
||||
console.log('itemData===>', itemData)
|
||||
if (currentCheckedPurchaserId === itemData?.purchaser_id) {
|
||||
return
|
||||
}
|
||||
setCurrentCheckedPurchaserId(itemData?.purchaser_id as number)
|
||||
}
|
||||
|
||||
// const { isManager } = useContext(ShoppingContext)
|
||||
|
||||
return (
|
||||
<LayoutBlock circle customClassName={classnames(styles.layout, itemData?.purchaser_id === selectedId ? styles.selected : '')} onClick={handleClickLayout}>
|
||||
<MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
|
||||
<LayoutBlock
|
||||
circle
|
||||
customClassName={classnames(styles.layout, itemData?.purchaser_id === currentCheckedPurchaserId ? styles.selected : '')}
|
||||
onClick={handleClickLayout}>
|
||||
<MCheckbox hiddenCheckboxIcon={!isManageStatus} customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
|
||||
<View className='flex-row justify-between' onClick={handleOpenDetail}>
|
||||
<View className={styles.topItem}>
|
||||
<View className='flex-row items-center'>
|
||||
@@ -131,7 +138,8 @@ export default memo<PropsType>((props) => {
|
||||
</View>
|
||||
<View className={styles.summary}>
|
||||
<Text>
|
||||
已选 {mockList[selected].filter((item) => item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
|
||||
已选 {itemData?.[BackEndSaleModeListFieldMap[selected]].filter((item) => item.checked).length} 种面料，1 个颜色，共{' '}
|
||||
{selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -145,30 +153,24 @@ export default memo<PropsType>((props) => {
|
||||
<Divider customClassName={styles.line}></Divider>
|
||||
<View className={styles.orderTitle}>订单类型</View>
|
||||
<View className={styles.orderTypeDetail}>
|
||||
<NormalButton
|
||||
type={selected === EnumSaleMode.Bulk ? 'primary' : 'info'}
|
||||
plain={selected !== EnumSaleMode.Bulk}
|
||||
customStyles={{ padding: '0 50rpx' }}
|
||||
circle
|
||||
<SaleModeButton
|
||||
customStyle={{ padding: '0 50rpx' }}
|
||||
isActive={selected === EnumSaleMode.Bulk}
|
||||
onClick={() => onSelectOrderType(EnumSaleMode.Bulk)}>
|
||||
大货
|
||||
</NormalButton>
|
||||
<NormalButton
|
||||
type={selected === EnumSaleMode.Plate ? 'primary' : 'info'}
|
||||
plain={selected !== EnumSaleMode.Plate}
|
||||
customStyles={{ padding: '0 50rpx' }}
|
||||
circle
|
||||
</SaleModeButton>
|
||||
<SaleModeButton
|
||||
customStyle={{ padding: '0 50rpx' }}
|
||||
isActive={selected === EnumSaleMode.Plate}
|
||||
onClick={() => onSelectOrderType(EnumSaleMode.Plate)}>
|
||||
剪板
|
||||
</NormalButton>
|
||||
<NormalButton
|
||||
type={selected === EnumSaleMode.BulkCut ? 'primary' : 'info'}
|
||||
plain={selected !== EnumSaleMode.BulkCut}
|
||||
customStyles={{ padding: '0 50rpx' }}
|
||||
circle
|
||||
</SaleModeButton>
|
||||
<SaleModeButton
|
||||
customStyle={{ padding: '0 50rpx' }}
|
||||
isActive={selected === EnumSaleMode.BulkCut}
|
||||
onClick={() => onSelectOrderType(EnumSaleMode.BulkCut)}>
|
||||
散剪
|
||||
</NormalButton>
|
||||
</SaleModeButton>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.orderColor}>
|
||||
@@ -186,3 +188,22 @@ export default memo<PropsType>((props) => {
|
||||
</LayoutBlock>
|
||||
)
|
||||
}, useNeedMemoCallback())
|
||||
|
||||
interface ButtonPropsType {
|
||||
isActive: boolean
|
||||
onClick?: Function
|
||||
children?: React.ReactNode
|
||||
customStyle?: React.CSSProperties
|
||||
}
|
||||
// 订单类型
|
||||
const SaleModeButton: FC<ButtonPropsType> = (props) => {
|
||||
const { onClick, children, isActive = false, customStyle } = props
|
||||
const handleClick = () => {
|
||||
onClick?.()
|
||||
}
|
||||
return (
|
||||
<View className={classnames(styles.saleModeButton, isActive && styles['saleModeButton--active'])} style={customStyle} onClick={handleClick}>
|
||||
<View className={classnames(styles['saleModeButton--text'])}>{children}</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import React, { useRef } from 'react'
|
||||
import { useContext } from 'react'
|
||||
|
||||
/**
|
||||
* 456: {
|
||||
* id: 456,
|
||||
* checked: true
|
||||
* },
|
||||
* 457: {
|
||||
* id: 457,
|
||||
* checked: true
|
||||
* }
|
||||
*/
|
||||
export type ColorStore = Record<string, any>
|
||||
|
||||
export interface ColorMeta {
|
||||
id?: number
|
||||
checked?: boolean
|
||||
}
|
||||
|
||||
export interface ShoppingContextValue {
|
||||
isManageStatus: boolean
|
||||
setManageStatus: (isManageStatus: boolean) => void
|
||||
currentCheckedPurchaserId: number
|
||||
setCurrentCheckedPurchaserId: (purchaserId: number) => void
|
||||
colorStore: ColorStore
|
||||
setChangedCheckbox: (color: ColorMeta) => void
|
||||
}
|
||||
|
||||
export const ShoppingContext = React.createContext<ShoppingContextValue | null>(null)
|
||||
|
||||
export function useShoppingContext() {
|
||||
const ctx = useContext(ShoppingContext)
|
||||
if (!ctx) {
|
||||
throw new Error('没有获取到shopping context')
|
||||
}
|
||||
return ctx
|
||||
}
|
||||
|
||||
export function useWatch(id: ColorMeta['id']) {
|
||||
const { colorStore } = useShoppingContext()
|
||||
console.log('colorStore==>', colorStore)
|
||||
return id ? colorStore[id] : colorStore
|
||||
}
|
||||
|
||||
export interface ShoppingCartAction {
|
||||
setManageStatus: (manageStatus: boolean) => void
|
||||
getManageStatus: () => boolean
|
||||
}
|
||||
|
||||
export interface InternalShoppingCartAction extends ShoppingCartAction {
|
||||
__INTERNAL__: React.MutableRefObject<ShoppingCartAction | null>
|
||||
}
|
||||
|
||||
function throwError(): never {
|
||||
throw new Error('有没有用 ref 这个props？')
|
||||
}
|
||||
|
||||
export function useShoppingCart(): ShoppingCartAction {
|
||||
const __INTERNAL__ = useRef<ShoppingCartAction | null>(null)
|
||||
return {
|
||||
__INTERNAL__,
|
||||
setManageStatus(manageStatus: boolean) {
|
||||
const action = __INTERNAL__.current
|
||||
if (!action) {
|
||||
throwError()
|
||||
}
|
||||
action.setManageStatus(manageStatus)
|
||||
},
|
||||
getManageStatus() {
|
||||
const action = __INTERNAL__.current
|
||||
if (!action) {
|
||||
throwError()
|
||||
}
|
||||
return action.getManageStatus()
|
||||
},
|
||||
} as InternalShoppingCartAction
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import Search from '@/components/search'
|
||||
import { View } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
|
||||
import React, { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import IconText from '@/components/iconText'
|
||||
@@ -13,27 +13,48 @@ import BottomSettleBar from './components/bottomSettleBar'
|
||||
import BottomEditBar from './components/bottomEditBar'
|
||||
import { ShoppingCartListApi } from '@/api/index'
|
||||
import { dataLoadingStatus } from '@/common/util'
|
||||
|
||||
const defaultContext = {
|
||||
isManager: false
|
||||
}
|
||||
|
||||
export const ShoppingContext = React.createContext(defaultContext)
|
||||
import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
|
||||
import { useShoppingCart, useShoppingContext } from './context'
|
||||
|
||||
export const Shopping: FC = () => {
|
||||
|
||||
const [checkboxData, setCheckboxData] = useState<Partial<TriggerCheckboxOptions>>({})
|
||||
|
||||
const handleTriggerCheckbox = ({ colorStore, changedCheckbox }) => {
|
||||
console.log('handleTriggerCheckbox==>', colorStore, changedCheckbox)
|
||||
setCheckboxData({ colorStore, changedCheckbox })
|
||||
}
|
||||
return (
|
||||
<ShoppingCart onTriggerCheckbox={handleTriggerCheckbox}>
|
||||
<ShoppingCartContainer checkboxData={checkboxData} />
|
||||
</ShoppingCart>
|
||||
)
|
||||
}
|
||||
|
||||
interface InternalContainer {
|
||||
checkboxData?: Partial<TriggerCheckboxOptions>
|
||||
}
|
||||
|
||||
const ShoppingCartContainer:FC<InternalContainer> = (props) => {
|
||||
|
||||
const { checkboxData } = props
|
||||
|
||||
const { isManageStatus, setManageStatus } = useShoppingContext()
|
||||
|
||||
//输入了搜索关键字
|
||||
const getSearchData = useCallback((e) => {
|
||||
// pageNum.current.page = 1
|
||||
// setOrderData(() => ({ list: [], total: 0 }))
|
||||
// setSearchField((val) => ({ ...val, name: e, size: 10 }))
|
||||
}, [])
|
||||
// 是否在 管理 状态
|
||||
const [isManage, setManage] = useState(false)
|
||||
|
||||
const shoppingCart = useShoppingCart()
|
||||
console.log('shoppingCart==>', shoppingCart)
|
||||
|
||||
// 管理
|
||||
const onStartToManage = () => {
|
||||
setManage((isManage) => !isManage)
|
||||
// ShoppingContext.Consumer
|
||||
setManageStatus(!isManageStatus)
|
||||
// shoppingCart.setManageStatus(!isManageStatus)
|
||||
}
|
||||
|
||||
const [selectedAmount, setSelectedAmount] = useState(0)
|
||||
@@ -59,7 +80,7 @@ export const Shopping: FC = () => {
|
||||
}, [shoppingCartData, state])
|
||||
|
||||
useDidShow(() => {
|
||||
(async () => {
|
||||
;(async () => {
|
||||
await fetchData()
|
||||
let query = Taro.createSelectorQuery()
|
||||
console.log('query', query)
|
||||
@@ -81,22 +102,14 @@ export const Shopping: FC = () => {
|
||||
setShoppingCartData({ list: state.data, total: state.data.length })
|
||||
}, [state])
|
||||
|
||||
useDidShow(() => {
|
||||
|
||||
})
|
||||
|
||||
const [selectedId, setSelectedId] = useState<number>()
|
||||
|
||||
const handleSelectedItem = (item: ShoppingCartData) => {
|
||||
setSelectedId(item.purchaser_id)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
|
||||
<View className={styles['shopping--topBar']} id='topBar'>
|
||||
<Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
|
||||
<View className={styles.flexBox} onClick={onStartToManage}>
|
||||
{isManage ? (
|
||||
{isManageStatus ? (
|
||||
<IconText iconName='icon-guanlidingdan' text='取消' customClass={styles['icon--manage--cancel']} />
|
||||
) : (
|
||||
<IconText iconName='icon-guanlidingdan' text='管理' />
|
||||
@@ -106,18 +119,15 @@ export const Shopping: FC = () => {
|
||||
</View>
|
||||
<View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
|
||||
<View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
|
||||
<ShoppingContext.Provider value={{isManager:false}}>
|
||||
<InfiniteScroll statusMore={statusMore}>
|
||||
{!!shoppingCartData?.list?.length &&
|
||||
shoppingCartData?.list?.map((item, index) => {
|
||||
console.log('item==>', item)
|
||||
return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</ShoppingContext.Provider>
|
||||
<InfiniteScroll statusMore={statusMore}>
|
||||
{!!shoppingCartData?.list?.length &&
|
||||
shoppingCartData?.list?.map((item, index) => {
|
||||
return <ItemList itemData={item} key={index}></ItemList>
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
<View id='bottomBar'>
|
||||
{isManage ? (
|
||||
{isManageStatus ? (
|
||||
<BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
|
||||
) : (
|
||||
<BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
|
||||
@@ -127,4 +137,5 @@ export const Shopping: FC = () => {
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default Shopping
|
||||
|
||||
@@ -6,8 +6,10 @@ interface ShoppingCartData {
|
||||
purchaser_short_name: string
|
||||
sale_user_id: number
|
||||
sale_user_name: string
|
||||
color_list: ColorList
|
||||
[Property:string]: any
|
||||
bulk_color_list: ColorList
|
||||
length_cut_color_list: ColorList // 剪板
|
||||
weight_cut_color_list: ColorList // 散剪
|
||||
[Property: string]: any
|
||||
}
|
||||
interface ColorList {
|
||||
estimate_amount: number
|
||||
|
||||
@@ -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,101 @@
|
||||
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 } = 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>
|
||||
{/* TODO: 面料字段、颜色字段 */}
|
||||
{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?.supplier_name || '空'}</View>
|
||||
</View>
|
||||
<View className={styles.content__row}>
|
||||
<View className={styles.content__row__left}>创建时间：</View>
|
||||
<View className={styles.content__row__right}>{formatDateTime(itemData?.take_goods_order_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,48 @@
|
||||
.order_popup{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
.order_popup_title{
|
||||
color: $font_size_big;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.order_popup_input{
|
||||
width: 100%;
|
||||
padding: 0 25px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 43px;
|
||||
position: relative;
|
||||
.descDataNum{
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
bottom: 10px;
|
||||
height: 39px;
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
}
|
||||
textarea{
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 313px;
|
||||
padding: 20px;
|
||||
padding-bottom: 50px;
|
||||
box-sizing: border-box;
|
||||
font-size: $font_size;
|
||||
border: 2px solid #e6e6e6;
|
||||
}
|
||||
}
|
||||
.order_save_address{
|
||||
height: 82px;
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
width: 668px;
|
||||
text-align: center;
|
||||
line-height: 82px;
|
||||
color: #fff;
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import Popup from "@/components/popup"
|
||||
import { Textarea, View } from "@tarojs/components"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type Param = {
|
||||
onBlur?: (val:any) => void
|
||||
onSave?: (val: string) => void
|
||||
defaultValue?: string
|
||||
}
|
||||
export default ({onBlur, onSave, defaultValue = ''}:Param) => {
|
||||
const [descData, setDescData] = useState({
|
||||
number: 0,
|
||||
value: '',
|
||||
count: 200
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
getDesc(defaultValue)
|
||||
}, [defaultValue])
|
||||
|
||||
const getDesc = (value) => {
|
||||
let res = value
|
||||
if(value.length > descData.count) {
|
||||
res = value.slice(0, descData.count)
|
||||
}
|
||||
setDescData({...descData, number:res.length, value: res})
|
||||
}
|
||||
|
||||
const setSave = () => {
|
||||
onSave?.(descData.value)
|
||||
}
|
||||
return (
|
||||
<View className={styles.order_popup}>
|
||||
<View className={styles.order_popup_title}>编辑备注</View>
|
||||
<View className={styles.order_popup_input}>
|
||||
<Textarea placeholder="请添加备注" value={descData?.value} maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
|
||||
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
|
||||
</View>
|
||||
<View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -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
|
||||
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '提货详情',
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
page {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: 100%;
|
||||
}
|
||||
.deliveryDetail {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
height: 100%;
|
||||
.content {
|
||||
padding-top: 24px;
|
||||
flex: 1 1 auto;
|
||||
overflow: scroll;
|
||||
.detailTop {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.topBar__orderType {
|
||||
color: rgba($color: #000000, $alpha: 0.6);
|
||||
font-size: 28px;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
.bottomBar {
|
||||
flex: none;
|
||||
margin: 0 24px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
padding-bottom: calc(20px + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(20px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
.detailInfo {
|
||||
.detailInfoItem {
|
||||
&--title {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
&--detail {
|
||||
&--row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
&--name {
|
||||
}
|
||||
&--count {
|
||||
}
|
||||
&--weight {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderInfoTop {
|
||||
font-size: 28px;
|
||||
color: $color_font_one;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.orderNo {
|
||||
font-size: 28px;
|
||||
font-weight: 550;
|
||||
}
|
||||
.status {
|
||||
font-size: 28px;
|
||||
&--takingGoods {
|
||||
color: $color_main;
|
||||
}
|
||||
&--finished {
|
||||
color: $color_font_three;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.total {
|
||||
margin-top: 24px;
|
||||
padding: 15px 24px;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
color: #f79b31;
|
||||
background: #fef9f4;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
.totalContent {
|
||||
flex: 1 1 auto;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import { TakeGoodsOrder, TakeGoodsOrderAudit, TakeGoodsOrderRefuse } from '@/api'
|
||||
import { formatDateTime, formatMeterDiv, formatWeightDiv } from '@/common/format'
|
||||
import Cell from '@/components/cell'
|
||||
import Divider from '@/components/divider'
|
||||
import LayoutBlock from '@/components/layoutBlock'
|
||||
import NormalButton from '@/components/normalButton'
|
||||
import SaleModeTag from '@/components/saleModeTag'
|
||||
import UploadImage from '@/components/uploadImage'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useRouter } from '@tarojs/taro'
|
||||
import { alert } from '@/common/common'
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Popup from '@/components/popup'
|
||||
import Remark from '../takeDelivery/components/remark'
|
||||
|
||||
const TakeDeliveryDetail: FC = () => {
|
||||
const router = useRouter()
|
||||
|
||||
const { fetchData } = TakeGoodsOrder()
|
||||
|
||||
const [detailInfo, setDetailInfo] = useState<Record<string, any>>({})
|
||||
|
||||
const getData = async () => {
|
||||
const { id } = router.params
|
||||
const res = await fetchData({
|
||||
id,
|
||||
})
|
||||
console.log('res==>', res.data)
|
||||
setDetailInfo(res.data)
|
||||
// 动态设置标题
|
||||
Taro.setNavigationBarTitle({
|
||||
title: res.data.take_goods_order_type_name,
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const { fetchData: FetchAudit } = TakeGoodsOrderAudit()
|
||||
|
||||
const DetailItem = useMemo(() => {
|
||||
const element =
|
||||
!!detailInfo?.dyelot_number_list?.length &&
|
||||
detailInfo?.dyelot_number_list.map((weightItem) => {
|
||||
return (
|
||||
<View className={styles.detailInfo}>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<View className={styles.detailInfoItem}>
|
||||
<View className={styles['detailInfoItem--title']}>
|
||||
<View className=''>
|
||||
<Text style={{ marginRight: '20rpx' }}>
|
||||
{weightItem.product_code}# {weightItem.product_name}
|
||||
</Text>
|
||||
<SaleModeTag saleMode={weightItem?.sale_mode} />
|
||||
</View>
|
||||
<View className=''>共 {weightItem?.sale_mode === 0 ? `${weightItem.sale_roll} 条` : `${formatMeterDiv(weightItem?.sale_length || 0)} 米`}</View>
|
||||
</View>
|
||||
<View className={styles['detailInfoItem--detail']}>
|
||||
<View className={styles['detailInfoItem--detail--row']}>
|
||||
<View className={styles['detailInfoItem--detail--name']}>
|
||||
{weightItem.product_color_code}# {weightItem.product_color_name}
|
||||
</View>
|
||||
<View className={styles['detailInfoItem--detail--count']}>
|
||||
x{weightItem?.sale_mode === 0 ? `${weightItem.sale_roll} 条` : `${formatMeterDiv(weightItem?.sale_length || 0)} 米`}
|
||||
</View>
|
||||
<View className={styles['detailInfoItem--detail--weight']}>{formatWeightDiv(weightItem.weight)}/kg</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
return <>{element}</>
|
||||
}, [detailInfo])
|
||||
|
||||
const [readyToUploadList, setReadyToUploadList] = useState<string[]>([])
|
||||
|
||||
const handleUploadChange = (imageList: string[]) => {
|
||||
console.log('imageList===>', imageList)
|
||||
setReadyToUploadList((prev) => [...prev, ...imageList])
|
||||
}
|
||||
|
||||
const { fetchData: refuseOrder } = TakeGoodsOrderRefuse()
|
||||
|
||||
const [showRemarkModal, setShowRemarkModal] = useState(false)
|
||||
|
||||
const handleRefuseOrder = async (remark: string) => {
|
||||
const res = await refuseOrder({
|
||||
id: Number(router.params.id),
|
||||
remark: remark,
|
||||
})
|
||||
if (res.success) {
|
||||
alert.success('拒收成功')
|
||||
getData()
|
||||
} else {
|
||||
alert.error('该操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const onRemarkSave = async (remark: string) => {
|
||||
handleRefuseOrder(remark)
|
||||
|
||||
}
|
||||
|
||||
// 拒收
|
||||
const handleRefuse = useCallback(() => {
|
||||
setShowRemarkModal(true)
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
// 审核
|
||||
const handleAudit = useCallback(() => {
|
||||
Taro.showModal({
|
||||
confirmColor: '#337FFF',
|
||||
title: '确定要提货？',
|
||||
success: async function (res) {
|
||||
if (res.confirm) {
|
||||
const res = await FetchAudit({ id: Number(router.params.id) })
|
||||
if (res.success) {
|
||||
alert.success('提货成功')
|
||||
getData()
|
||||
} else {
|
||||
alert.error('请求失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}, [readyToUploadList])
|
||||
|
||||
// 底部按钮栏
|
||||
const BottomBar = useMemo(() => {
|
||||
|
||||
if (detailInfo?.take_goods_order_type !== 0) {
|
||||
// 采购提货
|
||||
return (
|
||||
<View className={styles.bottomBar}>
|
||||
<NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '100%' }}>
|
||||
确认提货
|
||||
</NormalButton>
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
// 退货提货
|
||||
return (
|
||||
<View className={styles.bottomBar} style={{ justifyContent: 'space-between' }}>
|
||||
<NormalButton type='primary' round onClick={handleRefuse} customStyles={{ width: '25%' }}>
|
||||
拒收
|
||||
</NormalButton>
|
||||
<NormalButton type='primary' plain round onClick={handleAudit} customStyles={{ width: '25%' }}>
|
||||
确认提货
|
||||
</NormalButton>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}, [handleRefuse, handleAudit])
|
||||
return (
|
||||
<View className={styles.deliveryDetail}>
|
||||
<View className={styles.content}>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.detailTop}>
|
||||
<View className={styles.orderNo}>提货单号：{detailInfo?.take_order_no}</View>
|
||||
{detailInfo?.take_goods_status === 0 ? (
|
||||
<View className={styles['status--takingGoods']}>{detailInfo?.take_goods_status_name}</View>
|
||||
) : (
|
||||
<View className={styles['status--finished']}>{detailInfo?.take_goods_status_name}</View>
|
||||
)}
|
||||
</View>
|
||||
{detailInfo?.take_goods_order_type === 0 && <Text className={styles.topBar__orderType}>供应信息：{detailInfo?.supplier_name}</Text>}
|
||||
{DetailItem}
|
||||
<View className={styles.total}>
|
||||
<Text>汇总：</Text>
|
||||
<Text className={styles.totalContent}>
|
||||
共{detailInfo?.dyelot_number_list?.length || 0}种面料，4种颜色，共
|
||||
{detailInfo?.sale_mode === 0 ? `${detailInfo?.take_roll}条` : `${formatMeterDiv(detailInfo?.take_meters)}米`}
|
||||
，重量{detailInfo?.weight}kg
|
||||
</Text>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
{detailInfo?.take_goods_order_type !== 0 && (
|
||||
<>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.orderInfoTop}>退货布匹附件</View>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<UploadImage onlyRead={detailInfo?.status !== 0} onChange={handleUploadChange} defaultList={detailInfo?.fabric_piece_accessory_url}></UploadImage>
|
||||
</LayoutBlock>
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.orderInfoTop}>退货物流附件</View>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<UploadImage onlyRead={detailInfo?.status !== 0} onChange={handleUploadChange} defaultList={detailInfo?.accessory_url}></UploadImage>
|
||||
</LayoutBlock>
|
||||
</>
|
||||
)}
|
||||
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.orderInfoTop}>订单信息</View>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<View className='orderInfoDetail'>
|
||||
<Cell title='提货人：' desc={detailInfo?.auditor_name}></Cell>
|
||||
<Cell title='创建时间：' desc={formatDateTime(detailInfo?.create_time)}></Cell>
|
||||
<Cell title='提货时间：' desc={formatDateTime(detailInfo?.audit_time)}></Cell>
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
{detailInfo?.take_goods_order_type !== 0 && (
|
||||
<LayoutBlock circle>
|
||||
<View className={styles.orderInfoTop}>备注信息</View>
|
||||
<Divider direction='horizontal' customClassName={styles.divider}></Divider>
|
||||
<View className='orderInfoDetail'>{detailInfo?.remark}</View>
|
||||
</LayoutBlock>
|
||||
)}
|
||||
</View>
|
||||
{detailInfo?.take_goods_status === 0 && BottomBar}
|
||||
<Popup show={showRemarkModal} showTitle={false} onClose={() => setShowRemarkModal(false)}>
|
||||
<Remark onSave={onRemarkSave} defaultValue={detailInfo?.remark} />
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default TakeDeliveryDetail
|
||||
@@ -4,7 +4,6 @@ page{
|
||||
}
|
||||
.main {
|
||||
background: linear-gradient(to bottom, $color_main 25%, $color_bg_one 42%);
|
||||
padding: 24px;
|
||||
padding-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
overflow-y: scroll;
|
||||
|
||||
@@ -7,13 +7,12 @@ import Tag from '@/components/tag'
|
||||
import Divider from '@/components/Divider'
|
||||
import LayoutBlock from '@/components/layoutBlock'
|
||||
import IconCard from '@/components/iconCard'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import { IconNames } from '@/components/iconfont/iconfont'
|
||||
import useUserInfo from '@/use/useUserInfo'
|
||||
import { goLink } from '@/common/common'
|
||||
|
||||
type IconfontName = Parameters<typeof IconFont>['0']['name']
|
||||
type IconCardType = {
|
||||
iconName: IconfontName
|
||||
iconName: IconNames
|
||||
name: string
|
||||
path: string
|
||||
}
|
||||
@@ -42,7 +41,7 @@ const feature: IconCardType[] = [
|
||||
{
|
||||
iconName: 'icon-tihuoliebiao',
|
||||
name: '提货列表',
|
||||
path: '',
|
||||
path: '/pages/takeDelivery/index',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shouhouzhongxin',
|
||||
|
||||
Reference in New Issue
Block a user