✨ feat(发货单详情): 已完成发货单详情

2022-09-22 15:53:30 +08:00
parent d2a1441810
commit b51c53a73a
69 changed files with 651 additions and 369 deletions
@@ -20,9 +20,10 @@ type PropsType = {
 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,
    })
  }

@@ -95,7 +96,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,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
@@ -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;