chore: 替换公共 FlowRecords 组件

src/components/FlowRecords/index.tsx

@@ -34,7 +34,7 @@ export interface FetchListParams {
   pageSize: number,
 }
 
-interface IProps extends Omit<ButtonTabsProps, 'options'> {
+export interface IProps extends Omit<ButtonTabsProps, 'options'> {
   /**
    * 外部流转记录数据源，与 fetchOuterList 不能共存
    * 如果两个同时存在 outerDataSource 优先
@@ -65,12 +65,12 @@ interface IProps extends Omit<ButtonTabsProps, 'options'> {
    * 获取外部流转记录方法，与 outerDataSource 不能共存
    * 如果两个同时存在 outerDataSource 优先
    */
-  fetchOuterList?: <T extends ListRes>(params: FetchListParams) => Promise<T>,
+  fetchOuterList?: (params: FetchListParams) => Promise<ListRes>,
   /**
    * 获取内部流转记录方法，与 innerDataSource 不能共存
    * 如果两个同时存在 innerDataSource 优先
    */
-  fetchInnerList?: <T extends ListRes>(params: FetchListParams) => Promise<T>,
+  fetchInnerList?: (params: FetchListParams) => Promise<ListRes>,
 }
 
 const FlowRecords: React.FC<IProps> = (props: IProps) => {

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

-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { 
   Badge,
 } from 'antd';
-import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
-import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import StatusTag from '@/components/StatusTag';
-import ButtonSwitch from '@/components/ButtonSwitch';
+import FlowRecords, { IProps as FlowRecordsProps, FetchListParams, ListRes } from '@/components/FlowRecords';
 
 export interface InnerHistoryItem {
   step: number;
@@ -27,16 +25,11 @@ export interface OuterHistoryItem {
   opinion: string;
 };
 
-export interface OuterHistoryData {
-  data: OuterHistoryItem[], 
-  totalCount: number,
-};
-export interface InnerHistoryData {
-  data: InnerHistoryItem[], 
-  totalCount: number,
-};
+export type OuterHistoryData = ListRes & {};
 
-interface FlowRecordsProps extends MellowCardProps {
+export type InnerHistoryData = ListRes & {};
+
+interface AsFlowRecordsProps extends FlowRecordsProps {
   /**
    * 外部流转记录，不能与 fetchOuterHistory 共存
    */
@@ -48,11 +41,11 @@ interface FlowRecordsProps extends MellowCardProps {
   /**
    * 获取外部流转记录
    */
-  fetchOuterHistory?: (params: { [key: string]: any }) => Promise<OuterHistoryData>;
+  fetchOuterHistory?: (params: FetchListParams) => Promise<OuterHistoryData>;
   /**
    * 获取内部流转记录
    */
-  fetchInnerHistory?: (params: { [key: string]: any }) => Promise<InnerHistoryData>;
+  fetchInnerHistory?: (params: FetchListParams) => Promise<InnerHistoryData>;
   /**
    * 外部状态map
    */
@@ -60,12 +53,10 @@ interface FlowRecordsProps extends MellowCardProps {
   /**
    * 内部状态 color map
    */
-  innerStatusColorMap: {[key: string]: any};
+  innerStatusColorMap?: {[key: string]: any};
 };
 
-const PAGE_SIZE = 10;
-
-const FlowRecords: React.FC<FlowRecordsProps> = ({
+const AsFlowRecords: React.FC<AsFlowRecordsProps> = ({
   outerHistory,
   innerHistory,
   fetchOuterHistory,
@@ -74,16 +65,6 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
   innerStatusColorMap = {},
   ...rest
 }) => {
-  const [outerPage, setOuterPage] = useState(1);
-  const [outerSize, setOuterSize] = useState(PAGE_SIZE);
-  const [outerLoading, setOuterLoading] = useState(false);
-  const [outerData, setOuterData] = useState<OuterHistoryData>({ data: [], totalCount: 0 });
-  const [innerPage, setInnerPage] = useState(1);
-  const [innerSize, setInnerSize] = useState(PAGE_SIZE);
-  const [innerLoading, setInnerLoading] = useState(false);
-  const [innerData, setInnerData] = useState<InnerHistoryData>({ data: [], totalCount: 0 });
-  const [radioValue, setRadioValue] = useState<('inner' | 'outer')>('inner');
-
   const outerColumns: EditableColumns[] = [
     {
       title: '序号',
@@ -158,139 +139,19 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
     },
   ];
 
-  const getOuterHistory = params => {
-    if (outerHistory) {
-      setOuterData({ data: outerHistory, totalCount: outerHistory.length });
-      return;
-    }
-    if (fetchOuterHistory) {
-      setOuterLoading(true);
-      fetchOuterHistory(params).then(res => {
-        if (res) {
-          setOuterData(res);
-        }
-      }).finally(() => {
-        setOuterLoading(false);
-      });
-    }
-  };
-
-  const getInnerHistory = params => {
-    if (innerHistory) {
-      setInnerData({ data: innerHistory, totalCount: innerHistory.length });
-      return;
-    }
-    if (fetchInnerHistory) {
-      setInnerLoading(true);
-      fetchInnerHistory(params).then(res => {
-        if (res) {
-          setInnerData(res);
-        }
-      }).finally(() => {
-        setInnerLoading(false);
-      });
-    }
-  };
-
-  useEffect(() => {
-    getOuterHistory({
-      current: outerPage, 
-      pageSize: outerSize, 
-    });
-  }, [outerHistory]);
-
-  useEffect(() => {
-    getInnerHistory({
-      current: innerPage, 
-      pageSize: innerSize, 
-    });
-  }, [innerHistory]);
-
-  const handleOuterPaginationChange = (current, pageSize) => {
-    setOuterPage(current);
-    setOuterSize(pageSize);
-    getOuterHistory({
-      current, 
-      pageSize, 
-    });
-  };
-  
-  const handleInnerPaginationChange = (current, pageSize) => {
-    setInnerPage(current);
-    setInnerSize(pageSize);
-    getInnerHistory({
-      current, 
-      pageSize, 
-    });
-  };
-
-  const handleRadioChange = (value: ('inner' | 'outer')) => {
-    setRadioValue(value);
-  };
-
-  const options = [
-    (
-      outerData.data
-      && outerData.data.length
-        ? {
-          label: '外部状态',
-          value: 'outer',
-          disabled: !outerData.data || !outerData.data.length,
-        }
-        : null
-    ),
-    {
-      label: '内部状态',
-      value: 'inner',
-    },
-  ].filter(Boolean);
-
   return (
-    <MellowCard
-      title="流转记录"
-      extra={(
-        <ButtonSwitch
-          options={options}
-          onChange={handleRadioChange}
-          value={radioValue}
-        />
-      )}
+    <FlowRecords
+      outerColumns={outerColumns}
+      innerColumns={innerColumns}
+      outerRowkey="step"
+      innerRowkey="step"
+      outerDataSource={outerHistory}
+      innerDataSource={innerHistory}
+      fetchOuterList={fetchOuterHistory}
+      fetchInnerList={fetchInnerHistory}
       {...rest}
-    >
-      {outerData.data && outerData.data.length > 0 ? (
-        <>
-          {radioValue === 'outer' ? (
-            <PolymericTable
-              rowKey="step"
-              dataSource={outerData.data}
-              columns={outerColumns}
-              loading={outerLoading}
-              pagination={{
-                current: outerPage,
-                pageSize: outerSize, 
-                total: outerData.totalCount,
-              }}
-              onPaginationChange={handleOuterPaginationChange}
-            />
-          ) : null}
-        </>
-      ) : null}
-      {radioValue === 'inner' ? (
-        <PolymericTable
-          rowKey="step"
-          dataSource={innerData.data}
-          columns={innerColumns}
-          loading={innerLoading}
-          pagination={{
-            current: innerPage,
-            pageSize: innerSize, 
-            total: innerData.totalCount,
-          }}
-          onPaginationChange={handleInnerPaginationChange}
-        />
-      ) : null}
-    </MellowCard>
+    />
   );
 };
 
-export default FlowRecords;
+export default AsFlowRecords;
\ No newline at end of file

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

@@ -378,9 +378,7 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
             <Suspense fallback={null}>
               <FlowRecords 
                 outerHistory={detailInfo?.outerRecordList}
-                innerHistory={detailInfo?.innerRecordList} 
                 outerStatusMap={REPAIR_OUTER_STATUS_TAG_MAP}
-                innerStatusColorMap={REPAIR_INNER_STATUS_BADGE_MAP}
                 id="workflowRecord"
               />
             </Suspense>