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

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

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-05 15:18:15
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-18 10:41:43
+ * @LastEditTime: 2021-08-20 09:57:54
  * @Description: 换货退货收货统计、换货退货发货明细
  */
 import React, { useState } from 'react';
@@ -34,6 +34,7 @@ import {
   MAIL_INNER_STATUS_CONFIRMED_DELIVER,
   MAIL_INNER_STATUS_CONFIRMED_RECEIVING,
 } from '../../constants';
+import ReturnDeliverDrawer, { AfterType } from '../DeliverDrawer';
 import styles from './index.less';
 
 const { confirm } = Modal;
@@ -84,6 +85,16 @@ interface ExchangeReceivedInfoProps extends MellowCardProps {
    * 是否可操作
    */
   isEdit?: boolean;
+
+  /**
+   * 售后类型，2 换货，3 退货
+   */
+  afterType: AfterType,
+  
+  /**
+   * 退货配送方式
+   */
+  deliveryType: number,
 };
 
 const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
@@ -96,9 +107,14 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
   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[] = [
     {
@@ -217,18 +233,14 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
       align: 'center',
     },
   ];
+  
+  const handleVisibleDrawer = flag => {
+    setVisible(!!flag);
+  };
 
-  const handleConfirmReturnDeliver = (id) => {
-    if (onConfirmReturnDeliver) {
-      confirm({
-        title: '提示',
-        icon: <ExclamationCircleOutlined />,
-        content: `是否确认退货发货？`,
-        onOk() {
-          return onConfirmReturnDeliver(id);
-        },
-      });
-    }
+  const handleConfirmReturnDeliver = (record: Detailed) => {
+    setCurrentDetailed(record);
+    handleVisibleDrawer(true);
   };
 
   const handleConfirmReturnReceive = (id) => {
@@ -261,6 +273,15 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
     setRadioValue(value);
   };
 
+  const handleReturnDeliverSubmit = () => {
+    if (onConfirmReturnDeliver) {
+      setSubmitLoading(true);
+      onConfirmReturnDeliver(currentDetailed.deliveryId).finally(() => {
+        setSubmitLoading(false);
+      });
+    }
+  };
+
   const options = [
     {
       label: `退货${!isPurchaser ? '收货' : '发货'}统计`,
@@ -379,7 +400,7 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
                                 textAlign: 'right',
                                 display: 'block',
                               }}
-                              onClick={() => handleConfirmReturnDeliver(item.deliveryId)}
+                              onClick={() => handleConfirmReturnDeliver(item)}
                             >
                               确认退货发货
                             </a>
@@ -434,6 +455,38 @@ const ExchangeReceivedInfo: React.FC<ExchangeReceivedInfoProps> = ({
           </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/ExchangeReceivedInfo/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/components/ReturnAnalysis/interface.d.ts

@@ -155,5 +155,5 @@ export interface Detailed {
   /**
    * 物流收货地址
    */
-  logisticsReceiveAddress: string,
+  logisticsReceiveAddress?: string,
 }
\ No newline at end of file