✨ feat(提货列表): 新增提货列表|提货详情
This commit is contained in:
xuan
@@ -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: 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;
|
||||
&--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,189 @@
|
||||
import { TakeGoodsOrder, TakeGoodsOrderAudit, DeliveryNoticeOrderUpload, 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'
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getData()
|
||||
}, [])
|
||||
|
||||
const { fetchData: uploadData } = DeliveryNoticeOrderUpload()
|
||||
|
||||
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 handleRefuse = useCallback(async () => {}, [])
|
||||
|
||||
// 审核
|
||||
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('审核失败')
|
||||
}
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}, [readyToUploadList])
|
||||
|
||||
const { fetchData: refuseOrder } = TakeGoodsOrderRefuse()
|
||||
const { fetchData: auditOrder } = TakeGoodsOrderAudit()
|
||||
|
||||
const BottomBar = useMemo(() => {
|
||||
if (detailInfo?.take_goods_order_type === 0) {
|
||||
// 采购提货
|
||||
return (
|
||||
<View className={styles.bottomBar}>
|
||||
<NormalButton type='primary' plain round onClick={handleAudit}>
|
||||
确认提货
|
||||
</NormalButton>
|
||||
</View>
|
||||
)
|
||||
} else {
|
||||
// 退货提货
|
||||
return (
|
||||
<View className={styles.bottomBar}>
|
||||
<NormalButton type='primary' round onClick={handleRefuse}>
|
||||
拒收
|
||||
</NormalButton>
|
||||
<NormalButton type='primary' plain round onClick={handleAudit}>
|
||||
确认提货
|
||||
</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>
|
||||
<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}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default TakeDeliveryDetail
|
||||
Reference in New Issue
Block a user