chore: 替换新Detail组件

src/pages/afterService/returnManage/common/hoc/fetchDetailHoc.tsx

@@ -17,37 +17,43 @@ export interface IConfig<P> {
 }
 
 const FetchDetailHoc = <P, T extends {}>(config: IConfig<P>, WrapComponent: React.ComponentType<T>) => {
-  const { fetchDetail, fetchCallback } = config;
-  const [detail, setDetail] = useState<P>();
-  const [loading, setLoading] = useState(false);
-
-  const getDetail = () => {
-    if (fetchDetail) {
-      setLoading(true);
-      fetchDetail().then((res) => {
-        if (res.code === 1000) {
-          setDetail(res.data);
-          fetchCallback?.(res.data);
-        }
-      }).finally(() => {
-        setLoading(false);
-      });
-    }
+
+  const WrapperComponent: React.ForwardRefRenderFunction<any, any> = (props: Omit<T, ('dataSource' | 'loading' | 'onRefresh')>, forwardedRef) => {
+    const { fetchDetail, fetchCallback } = config;
+    const [detail, setDetail] = useState<P>();
+    const [loading, setLoading] = useState(false);
+  
+    const getDetail = () => {
+      if (fetchDetail) {
+        setLoading(true);
+        fetchDetail().then((res) => {
+          if (res.code === 1000) {
+            setDetail(res.data);
+            fetchCallback?.(res.data);
+          }
+        }).finally(() => {
+          setLoading(false);
+        });
+      }
+    };
+  
+    useEffect(() => {
+      getDetail();
+    }, []);
+
+    const handleRefresh = () => {
+      getDetail();
+    };
+  
+    return (
+      <div>
+        <WrapComponent ref={forwardedRef} {...props as any} dataSource={detail} loading={loading} onRefresh={handleRefresh} />
+      </div>
+    );
   };
 
-  useEffect(() => {
-    getDetail();
-  }, []);
-
-  return React.useMemo(() => {
-    return (props: Omit<T, ('dataSource' | 'loading')>): JSX.Element => {
-      return (
-        <div>
-          <WrapComponent {...props as any} dataSource={detail} loading={loading} />
-        </div>
-      );
-    }
-  }, [WrapComponent, detail, loading]);
+  return React.memo(React.forwardRef<any, Omit<T, ('dataSource' | 'loading' | 'onRefresh')>>(WrapperComponent));
+
 };
 
 export default FetchDetailHoc;
\ No newline at end of file

src/pages/afterService/returnManage/components/ReturnDetailInfo/index.tsx

@@ -66,7 +66,7 @@ type RefundModalValueType = {
 }
 
 
-interface ReturnDetailInfoProps {
+export interface ReturnDetailInfoProps {
   dataSource: {
     [key: string]: any,
   }[];

src/pages/afterService/returnManage/components/ReturnProfile/index.tsx

-import React, { Suspense } from 'react';
+import React, { Suspense, useImperativeHandle, useRef } from 'react';
 import {
   PageHeader,
   Descriptions,
@@ -24,8 +24,9 @@ import {
 import AvatarWrap from '@/components/AvatarWrap';
 import StatusTag from '@/components/StatusTag';
 import AuditProcess from '@/components/AuditProcess';
-import FlowRecords, { IProps as FlowRecordsProps } from '@/components/FlowRecords';
+import FlowRecords, { IProps as FlowRecordsProps, FlowRecordsRefHandle } from '@/components/FlowRecords';
 import { EditableColumns } from '@/components/PolymericTable/interface';
+import { ReturnDetailInfoProps } from '../ReturnDetailInfo';
 import { DetailType } from './interface';
 
 const ReturnAnalysis = React.lazy(() => import('../ReturnAnalysis'));
@@ -56,17 +57,41 @@ interface ReturnProfileProps {
    * 拓展区域
    */
   extra?: (info: DetailType) => React.ReactNode,
+  /**
+   * 是否可编辑 退货明细信息，默认 false
+   */
+  editableDetailInfo?: boolean,
+  /**
+   * 退款明细点击退款触发
+   */
+  onRefund?: ReturnDetailInfoProps['onRefund'],
+  /**
+   * 刷新详情信息方法
+   */
+  onRefresh?: () => void,
+}
+
+export type ReturnProfileRefHandle = {
+  /**
+   * 刷新详情信息方法
+   */
+  refresh?: () => void,
 }
 
-const ReturnProfile: React.FC<ReturnProfileProps> = (props: ReturnProfileProps) => {
+const ReturnProfile: React.ForwardRefRenderFunction<ReturnProfileRefHandle, ReturnProfileProps> = ((props: ReturnProfileProps, ref) => {
   const {
     dataSource,
     loading,
     fetchOuterHistory,
     isPurchaser,
     extra,
+    editableDetailInfo = false,
+    onRefund,
+    onRefresh,
   } = props;
 
+  const flowRecordsRef = useRef<FlowRecordsRefHandle | null>(null);
+
   const outerColumns: EditableColumns[] = [
     {
       title: '序号',
@@ -106,6 +131,22 @@ const ReturnProfile: React.FC<ReturnProfileProps> = (props: ReturnProfileProps)
     },
   ];
 
+  // 退款
+  const handleRefund = (values): Promise<any> => {
+    const { id, refundAmount, ...rest } = values;
+    if (onRefund) {
+      return onRefund?.(rest);
+    }
+    return Promise.reject();
+  };
+
+  useImperativeHandle(ref, () => ({
+    refresh: () => {
+      onRefresh?.();
+      flowRecordsRef.current?.refreshOuterList();
+    },
+  }));
+
   return (
     <Spin spinning={loading}>
       <PageHeaderWrapper
@@ -210,7 +251,8 @@ const ReturnProfile: React.FC<ReturnProfileProps> = (props: ReturnProfileProps)
                     outerStatus={dataSource?.outerStatus}
                     purchaserId={dataSource?.memberId}
                     purchaserRoleId={dataSource?.roleId}
-                    isEdit={false}
+                    isEdit={editableDetailInfo}
+                    onRefund={handleRefund}
                   />
                 </Suspense>
               </Col>
@@ -265,6 +307,7 @@ const ReturnProfile: React.FC<ReturnProfileProps> = (props: ReturnProfileProps)
                 outerRowkey='step'
                 outerColumns={outerColumns}
                 fetchOuterList={fetchOuterHistory}
+                ref={flowRecordsRef}
               />
             </Suspense>
           </Col>
@@ -272,6 +315,8 @@ const ReturnProfile: React.FC<ReturnProfileProps> = (props: ReturnProfileProps)
       </PageHeaderWrapper>
     </Spin>
   );
-};
+});
+
+const ReturnProfileForward= React.forwardRef<ReturnProfileRefHandle, ReturnProfileProps>(ReturnProfile);
 
-export default ReturnProfile;
+export default ReturnProfileForward;

src/pages/afterService/returnManage/returnPrReturn/detail.tsx

@@ -5,18 +5,38 @@
  * @LastEditTime: 2021-01-22 13:54:53
  * @Description: 
  */
-import React from 'react';
+import React, { useRef } from 'react';
 import { usePageStatus } from '@/hooks/usePageStatus';
-import DetailInfo from '../components/DetailInfo';
+import { getAsReturnGoodsGetDetailPlatform, getAsReturnGoodsPageOuterWorkflowRecord } from '@/services/AfterServiceV2Api';
+import { IProps as FlowRecordsProps } from '@/components/FlowRecords';
+import fetchDetailHoc from '../common/hoc/fetchDetailHoc';
+import ReturnProfile from '../components/ReturnProfile';
 
 const ReturnPrReturnDetailInfo: React.FC = () => {
   const { id } = usePageStatus();
 
+  const ReturnProfilePro = fetchDetailHoc({
+    fetchDetail: () => getAsReturnGoodsGetDetailPlatform({
+      returnId: id,
+    }),
+  }, ReturnProfile);
+
+  const fetchOuterHistory: FlowRecordsProps['fetchOuterList'] = (params) => {
+    return new Promise((resolve) => {
+      getAsReturnGoodsPageOuterWorkflowRecord({
+        current: `${params.current}`,
+        pageSize: `${params.pageSize}`,
+        dataId: id,
+      }).then((res) => {
+        if (res.code === 1000) {
+          resolve(res.data);
+        }
+      });
+    })
+  };
+
   return (
-    <DetailInfo 
-      id={id}
-      isPurchaser
-    />
+    <ReturnProfilePro fetchOuterHistory={fetchOuterHistory} isPurchaser />
   );
 };
 

src/pages/afterService/returnManage/returnPrReturn/verify.tsx

-/*
- * @Author: XieZhiXiong
- * @Date: 2020-12-18 17:44:26
- * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-02-02 10:07:12
- * @Description: 
- */
-import React from 'react';
+import React, { useRef } from 'react';
 import { usePageStatus } from '@/hooks/usePageStatus';
-import DetailInfo from '../components/DetailInfo';
+import { getAsReturnGoodsGetDetailPlatform, getAsReturnGoodsPageOuterWorkflowRecord, postAsReturnGoodsRefund } from '@/services/AfterServiceV2Api';
+import { IProps as FlowRecordsProps } from '@/components/FlowRecords';
+import fetchDetailHoc from '../common/hoc/fetchDetailHoc';
+import ReturnProfile, { ReturnProfileRefHandle } from '../components/ReturnProfile';
 
-const ReturnPrReturnVerify: React.FC = () => {
+const ReturnVerify: React.FC = () => {
   const { id } = usePageStatus();
 
+  const profileRef = useRef<ReturnProfileRefHandle | null>(null);
+
+  const ReturnProfilePro = fetchDetailHoc({
+    fetchDetail: () => getAsReturnGoodsGetDetailPlatform({
+      returnId: id,
+    }),
+  }, ReturnProfile);
+
+  const fetchOuterHistory: FlowRecordsProps['fetchOuterList'] = (params) => {
+    return new Promise((resolve) => {
+      getAsReturnGoodsPageOuterWorkflowRecord({
+        current: `${params.current}`,
+        pageSize: `${params.pageSize}`,
+        dataId: id,
+      }).then((res) => {
+        if (res.code === 1000) {
+          resolve(res.data);
+        }
+      });
+    })
+  };
+
+  // 退款
+  const handleRefund = (values): Promise<any> => {
+    const { id, refundAmount, ...rest } = values;
+    return postAsReturnGoodsRefund({
+      dataId: id,
+      ...rest,
+    }).then(res => {
+      if (res.code === 1000) {
+        profileRef.current?.refresh?.();
+      }
+    });
+  };
+
   return (
-    <DetailInfo id={id} isEdit />
+    <ReturnProfilePro
+      fetchOuterHistory={fetchOuterHistory}
+      onRefund={handleRefund}
+      ref={profileRef}
+      editableDetailInfo
+    />
   );
 };
 
-export default ReturnPrReturnVerify;
\ No newline at end of file
+export default ReturnVerify;