feat: 修改换货发货交互方式

src/pages/afterService/components/ExchangeDeliverInfo/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-05 15:18:15
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-18 10:42:45
+ * @LastEditTime: 2021-08-20 15:33:06
  * @Description: 换货发货统计、换货发货明细
  */
 import React, { useState } from 'react';
@@ -32,6 +32,7 @@ import {
   MAIL_INNER_STATUS_CONFIRMED_RECEIVING,
   MAIL_INNER_STATUS_CONFIRMED_DELIVER,
 } from '../../constants';
+import ReturnDeliverDrawer, { AfterType } from '../DeliverDrawer';
 import styles from './index.less';
 
 const { confirm } = Modal;
@@ -82,6 +83,16 @@ interface ExchangeDeliverInfoProps extends MellowCardProps {
    * 是否可操作
    */
   isEdit?: boolean;
+
+  /**
+   * 售后类型，2 换货，3 退货
+   */
+  afterType: AfterType,
+
+  /**
+   * 退货配送方式
+   */
+  deliveryType: number,
 };
 
 const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
@@ -94,9 +105,14 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
   innerStatus,
   target,
   isEdit = false,
+  afterType,
+  deliveryType,
   ...rest
 }) => {
   const [radioValue, setRadioValue] = useState<('1' | '2')>('2');
+  const [visible, setVisible] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [currentDetailed, setCurrentDetailed] = useState<Detailed | null>(null);
 
   const summaryColumns: EditableColumns[] = [
     {
@@ -216,17 +232,13 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
     },
   ];
 
-  const handleConfirmExchangeDeliver = (id) => {
-    if (onConfirmExchangeDeliver) {
-      confirm({
-        title: '提示',
-        icon: <ExclamationCircleOutlined />,
-        content: `是否确认换货发货？`,
-        onOk() {
-          return onConfirmExchangeDeliver(id);
-        },
-      });
-    }
+  const handleVisibleDrawer = flag => {
+    setVisible(!!flag);
+  };
+
+  const handleConfirmExchangeDeliver = (record: Detailed) => {
+    setCurrentDetailed(record);
+    handleVisibleDrawer(true);
   };
 
   const handleConfirmExchangeReceive = (id) => {
@@ -252,6 +264,15 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
     setRadioValue(value);
   };
 
+  const handleReturnDeliverSubmit = () => {
+    if (onConfirmExchangeDeliver) {
+      setSubmitLoading(true);
+      onConfirmExchangeDeliver(currentDetailed.deliveryId).finally(() => {
+        setSubmitLoading(false);
+      });
+    }
+  };
+
   const options = [
     {
       label: `换货${!isPurchaser ? '发货' : '收货'}统计`,
@@ -369,7 +390,7 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
                                 textAlign: 'right',
                                 display: 'block',
                               }}
-                              onClick={() => handleConfirmExchangeDeliver(item.deliveryId)}
+                              onClick={() => handleConfirmExchangeDeliver(item)}
                             >
                               确认换货发货
                             </a>
@@ -424,6 +445,38 @@ const ExchangeDeliverInfo: React.FC<ExchangeDeliverInfoProps> = ({
           </Tabs>
         </>
       ) : null}
+
+      <ReturnDeliverDrawer
+        afterType={afterType}
+        flowType="returnDeliver"
+        value={{
+          productList: currentDetailed?.detailList?.map((item) => ({
+            orderNo: item.orderNo,
+            productId: item.productId,
+            productName: item.productName,
+            category: item.category,
+            brand: item.brand,
+            unit: item.unit,
+            applyCount: item.count,
+            deliveryCount: item.deliveryCount,
+            noDeliveryCount: item.count - item.deliveryCount,
+            receiveCount: item.storageCount,
+            subCount: item.differenceCount,
+            count: item.deliveryCount,
+          })),
+          returnDeliverAddress: currentDetailed?.logisticsReceiveAddress || '',
+          deliveryTime: currentDetailed?.deliveryTime,
+          logisticsOrderNo: currentDetailed?.logisticsOrderNo,
+          logisticsName: currentDetailed?.logisticsName,
+        }}
+        deliveryType={deliveryType}
+        visible={visible}
+        onClose={() => handleVisibleDrawer(false)}
+        onSubmit={handleReturnDeliverSubmit}
+        submitLoading={submitLoading}
+        ediableProduct={false}
+        ediableLogistics={!currentDetailed?.logisticsId}
+      />
     </MellowCard>
   );
 };

src/pages/afterService/components/ExchangeDeliverInfo/interface.d.ts

@@ -52,6 +52,49 @@ export interface SummaryData {
   differenceCount: number
 }
 
+export type DetailedListItem = {
+  /**
+   * 订单号
+   */
+  orderNo?: string
+  /**
+   * 商品id
+   */
+  productId?: string
+  /**
+   * 商品名称
+   */
+  productName?: string
+  /**
+   * 品类
+   */
+  category?: string
+  /**
+   * 品牌
+   */
+  brand?: string
+  /**
+   * 单位
+   */
+  unit?: string
+  /**
+   * 数量
+   */
+  count?: number
+  /**
+   * 发货数量
+   */
+  deliveryCount?: number
+  /**
+   * 入库数量
+   */
+  storageCount?: number
+  /**
+   * 差异数量,(差异数量=发货数量-入库数量)
+   */
+  differenceCount?: number
+}
+
 export interface Detailed {
   /**
    * 发货Id
@@ -108,46 +151,9 @@ export interface Detailed {
   /**
    * 发货明细 ,DeliveryGoodsDetailVO
    */
-  detailList: {
-    /**
-     * 订单号
-     */
-    orderNo?: string
-    /**
-     * 商品id
-     */
-    productId?: string
-    /**
-     * 商品名称
-     */
-    productName?: string
-    /**
-     * 品类
-     */
-    category?: string
-    /**
-     * 品牌
-     */
-    brand?: string
-    /**
-     * 单位
-     */
-    unit?: string
-    /**
-     * 数量
-     */
-    count?: number
-    /**
-     * 发货数量
-     */
-    deliveryCount?: number
-    /**
-     * 入库数量
-     */
-    storageCount?: number
-    /**
-     * 差异数量,(差异数量=发货数量-入库数量)
-     */
-    differenceCount?: number
-  }[]
+  detailList: DetailedListItem[]
+  /**
+   * 物流收货地址
+   */
+  logisticsReceiveAddress?: string,
 }
\ No newline at end of file

src/pages/afterService/exchangeApplication/components/DetailInfo/index.tsx

@@ -579,6 +579,8 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
                     innerStatus={detailInfo?.innerStatus}
                     target={target}
                     isEdit={isEditExchangeDeliver}
+                    afterType={2}
+                    deliveryType={detailInfo?.replaceGoodsAddress?.deliveryType}
                     id="replaceDeliveryGoodsList"
                   />
                 </Suspense>

src/pages/afterService/exchangeManage/components/DetailInfo/index.tsx

@@ -632,6 +632,8 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
                     innerStatus={detailInfo?.innerStatus}
                     target={target}
                     isEdit={isEditExchangeDeliver}
+                    afterType={2}
+                    deliveryType={detailInfo?.replaceGoodsAddress?.deliveryType}
                     id="replaceDeliveryGoodsList"
                   />
                 </Suspense>