feat: 修改交互方式

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

@@ -2,11 +2,11 @@
  * @Author: XieZhiXiong
  * @Date: 2021-08-17 10:22:51
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-17 11:03:30
+ * @LastEditTime: 2021-08-17 16:11:31
  * @Description: 退货发货抽屉
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   Drawer,
   Button,
@@ -130,11 +130,13 @@ type ProductListItemType =  {
   count: number,
 }
 
+export type AfterType = 2 | 3
+
 interface IProps {
   /**
    * 售后类型，2 换货，3 退货
    */
-  afterType: 2 | 3,
+  afterType: AfterType,
   /**
    * 流程类型，'returnDeliver' 退货发货，exchangeDeliver 换货发货
    * 换货流程包含两个退货步骤，一是 退货发货，二是 换货发货
@@ -153,6 +155,22 @@ interface IProps {
      * 商品列表
      */
     productList: ProductListItemType[],
+    /**
+     * 发货地址id
+     */
+    returnDeliverAddress?: number,
+    /**
+     * 发货时间
+     */
+    deliveryTime?: string,
+    /**
+     * 物流单号
+     */
+    logisticsOrderNo?: string,
+    /**
+     * 物流公司id
+     */
+    logisticsName?: number | string,
   },
   /**
    * 配送方式
@@ -170,6 +188,14 @@ interface IProps {
    * 确认按钮 loading
    */
   submitLoading: boolean,
+  /**
+   * 是否可编辑商品相关，默认为 true
+   */
+  ediableProduct?: boolean,
+  /**
+   * 是否可编辑物流相关，默认为 true
+   */
+  ediableLogistics?: boolean,
 }
 
 const DeliverDrawer: React.FC<IProps> = (props) => {
@@ -182,6 +208,8 @@ const DeliverDrawer: React.FC<IProps> = (props) => {
     onSubmit,
     onClose,
     submitLoading,
+    ediableProduct = true,
+    ediableLogistics = true,
   } = props;
 
   // 获取物流公司
@@ -207,6 +235,18 @@ const DeliverDrawer: React.FC<IProps> = (props) => {
     }); 
   };
 
+  useEffect(() => {
+    formActions.setFieldState('productList.*.count', (fieldState) => {
+      fieldState.editable = ediableProduct;
+    });
+  }, [ediableProduct]);
+  
+  useEffect(() => {
+    formActions.setFieldState('LOGISTICS_LAYOUT.*', (fieldState) => {
+      fieldState.editable = ediableLogistics;
+    });
+  }, [ediableLogistics]);
+
   const handleClose = () => {
     if (onClose) {
       onClose();
@@ -258,7 +298,9 @@ const DeliverDrawer: React.FC<IProps> = (props) => {
         effects={($, { setFieldValue, getFieldValue, setFieldState }) => {
           const linkage = useLinkageUtils();
 
-          useAsyncSelect('logisticsName', fetchLogisticsCompany, ['label', 'value']);
+          if (!value.deliveryTime) {
+            useAsyncSelect('logisticsName', fetchLogisticsCompany, ['label', 'value']);
+          }
 
           onFormInit$().subscribe(() => {
             // 自提隐藏物流编号、物流公司

src/pages/afterService/components/DeliverDrawer/schema.ts

@@ -107,7 +107,7 @@ export const createSchema = (type: 2 | 3, flowType: 'returnDeliver' | 'exchangeD
         },
       }
     },
-    MEGA_LAYOUT: {
+    LOGISTICS_LAYOUT: {
       type: 'object',
       'x-component': 'Mega-Layout',
       'x-component-props': {

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

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-05 15:18:15
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-16 15:02:26
+ * @LastEditTime: 2021-08-17 16:30:36
  * @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 ReturnInfoProps extends MellowCardProps {
    * 是否可编辑
    */
   isEdit?: boolean;
+
+  /**
+   * 售后类型，2 换货，3 退货
+   */
+  afterType: AfterType,
+  
+  /**
+   * 退货配送方式
+   */
+  deliveryType: number,
 };
 
 const ReturnInfo: React.FC<ReturnInfoProps> = ({
@@ -96,9 +107,14 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
   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[] = [
     {
@@ -218,17 +234,13 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
     },
   ];
 
-  const handleConfirmReturnDeliver = (id) => {
-    if (onConfirmReturnDeliver) {
-      confirm({
-        title: '提示',
-        icon: <ExclamationCircleOutlined />,
-        content: `是否确认退货发货？`,
-        onOk() {
-          return onConfirmReturnDeliver(id);
-        },
-      });
-    }
+  const handleVisibleDrawer = flag => {
+    setVisible(!!flag);
+  };
+
+  const handleConfirmReturnDeliver = (record: Detailed) => {
+    setCurrentDetailed(record);
+    handleVisibleDrawer(true);
   };
 
   const handleConfirmReturnReceive = (id) => {
@@ -261,6 +273,15 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
     setRadioValue(value);
   };
 
+  const handleReturnDeliverSubmit = () => {
+    if (onConfirmReturnDeliver) {
+      setSubmitLoading(true);
+      onConfirmReturnDeliver(currentDetailed.deliveryId).finally(() => {
+        setSubmitLoading(false);
+      });
+    }
+  };
+
   const options = [
     {
       label: `退货${!isPurchaser ? '收货' : '发货'}统计`,
@@ -372,7 +393,7 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
                                 textAlign: 'right',
                                 display: 'block',
                               }}
-                              onClick={() => handleConfirmReturnDeliver(item.deliveryId)}
+                              onClick={() => handleConfirmReturnDeliver(item)}
                             >
                               确认退货发货
                             </a>
@@ -427,6 +448,38 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
           </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: 0,  // 缺少
+          deliveryTime: currentDetailed?.deliveryTime,
+          logisticsOrderNo: currentDetailed?.logisticsOrderNo,
+          logisticsName: currentDetailed?.logisticsName,
+        }}
+        deliveryType={deliveryType}
+        visible={visible}
+        onClose={() => handleVisibleDrawer(false)}
+        onSubmit={handleReturnDeliverSubmit}
+        submitLoading={submitLoading}
+        ediableProduct={false}
+        ediableLogistics={!!currentDetailed?.deliveryTime}
+      />
     </MellowCard>
   );
 };