feat: 添加 FlowRecords 内、外部流转记录组件

src/components/FlowRecords/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-18 18:30:50
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-19 11:53:24
+ * @Description: 内、外部流传记录
+ */
+import React, { useEffect, useState } from 'react';
+import PolymericTable from '@/components/PolymericTable';
+import { EditableColumns } from '@/components/PolymericTable/interface';
+import MellowCard, { MellowCardProps } from '@/components/MellowCard';
+import ButtonSwitch from '@/components/ButtonSwitch';
+
+const PAGE_SIZE = 10;
+
+export interface ListRes {
+  /**
+   * 数据
+   */
+  data: { [key: string]: any }[],
+  /**
+   * 总计
+   */
+  totalCount: number,
+}
+
+export interface FetchListParams {
+  /**
+   * 当前页
+   */
+  current: number,
+  /**
+   * 当前页数
+   */
+  pageSize: number,
+}
+
+interface IProps extends MellowCardProps {
+  /**
+   * 外部流转记录数据源，与 fetchOuterList 不能共存
+   * 如果两个同时存在 outerDataSource 优先
+   */
+  outerDataSource?: { [key: string]: any }[],
+  /**
+   * 内部流转记录数据源，与 fetchInnerList 不能共存
+   * 如果两个同时存在 innerDataSource 优先
+   */
+  innerDataSource?: { [key: string]: any }[],
+  /**
+   * 外部流转记录列数据
+   */
+  outerColumns: EditableColumns[],
+  /**
+   * 内部流转记录列数据
+   */
+  innerColumns: EditableColumns[],
+  /**
+   * 外部 rowkey
+   */
+  outerRowkey: string | (<T = unknown>(record: T, index?: number) => string),
+  /**
+   * 内部 rowkey
+   */
+  innerRowkey: string | (<T = unknown>(record: T, index?: number) => string),
+  /**
+   * 获取外部流转记录方法，与 outerDataSource 不能共存
+   * 如果两个同时存在 outerDataSource 优先
+   */
+  fetchOuterList?: <T extends ListRes>(params: FetchListParams) => Promise<T>,
+  /**
+   * 获取内部流转记录方法，与 innerDataSource 不能共存
+   * 如果两个同时存在 innerDataSource 优先
+   */
+  fetchInnerList?: <T extends ListRes>(params: FetchListParams) => Promise<T>,
+}
+
+const FlowRecords: React.FC<IProps> = (props: IProps) => {
+  const {
+    outerDataSource,
+    innerDataSource,
+    outerColumns,
+    innerColumns,
+    outerRowkey,
+    innerRowkey,
+    fetchOuterList,
+    fetchInnerList,
+    ...rest
+  } = props;
+  const [outerPage, setOuterPage] = useState(1);
+  const [outerSize, setOuterSize] = useState(PAGE_SIZE);
+  const [innerPage, setInnerPage] = useState(1);
+  const [innerSize, setInnerSize] = useState(PAGE_SIZE);
+  const [outerList, setOuterList] = useState<ListRes | null>(null);
+  const [innerList, setInnerList] = useState<ListRes | null>(null);
+  const [outerLoading, setOuterLoading] = useState(false);
+  const [innerLoading, setInnerLoading] = useState(false);
+  const [radioValue, setRadioValue] = useState<('inner' | 'outer')>('inner');
+
+  const getOuterList = (params: FetchListParams) => {
+    if (outerDataSource) {
+      setOuterList({ data: outerDataSource, totalCount: outerDataSource.length });
+      return;
+    }
+    if (fetchOuterList) {
+      setOuterLoading(true);
+      fetchOuterList(params).then(res => {
+        if (res) {
+          setOuterList(res);
+        }
+      }).finally(() => {
+        setOuterLoading(false);
+      });
+    }
+  };
+
+  const getInnerList = (params: FetchListParams) => {
+    if (innerDataSource) {
+      setInnerList({ data: innerDataSource, totalCount: innerDataSource.length });
+      return;
+    }
+    if (fetchInnerList) {
+      setInnerLoading(true);
+      fetchInnerList(params).then(res => {
+        if (res) {
+          setInnerList(res);
+        }
+      }).finally(() => {
+        setInnerLoading(false);
+      });
+    }
+  };
+
+  useEffect(() => {
+    getOuterList({
+      current: outerPage, 
+      pageSize: outerSize, 
+    });
+  }, [outerDataSource]);
+
+  useEffect(() => {
+    getInnerList({
+      current: innerPage, 
+      pageSize: innerSize, 
+    });
+  }, [innerDataSource]);
+  
+  useEffect(() => {
+    // 这里判断如果只有外部步骤，没有内部步骤的时候，默认设置 radioValue 为 outer
+    if (
+      (
+        Array.isArray(outerDataSource)
+        || fetchOuterList
+      )
+      && (
+        !Array.isArray(innerDataSource)
+        && !fetchInnerList
+      )
+    ) {
+      setRadioValue('outer');
+    }
+  }, [outerDataSource, fetchOuterList]);
+
+  const handleOuterPaginationChange = (current: number, pageSize: number) => {
+    setOuterPage(current);
+    setOuterSize(pageSize);
+    getOuterList({
+      current, 
+      pageSize, 
+    });
+  };
+  
+  const handleInnerPaginationChange = (current: number, pageSize: number) => {
+    setInnerPage(current);
+    setInnerSize(pageSize);
+    getInnerList({
+      current, 
+      pageSize, 
+    });
+  };
+
+  const handleRadioChange = (value: ('inner' | 'outer')) => {
+    setRadioValue(value);
+  };
+
+  const options = [
+    (
+      outerList && outerList.data
+        ? {
+          label: '外部状态',
+          value: 'outer',
+        }
+        : null
+    ),
+    (
+      innerList && innerList.data
+        ? {
+          label: '内部状态',
+          value: 'inner',
+        }
+        : null
+    ),
+  ].filter(Boolean);
+
+  return (
+    <MellowCard
+      title="流转记录"
+      extra={(
+        <ButtonSwitch
+          options={options}
+          onChange={handleRadioChange}
+          value={radioValue}
+        />
+      )}
+      {...rest}
+    >
+      {radioValue === 'outer' ? (
+        <PolymericTable
+          rowKey={outerRowkey}
+          dataSource={outerList ? outerList.data : []}
+          columns={outerColumns}
+          loading={outerLoading}
+          pagination={(
+            fetchOuterList
+              ? {
+                current: outerPage,
+                pageSize: outerSize, 
+                total: outerList.totalCount,
+              }
+              : null
+          )}
+          onPaginationChange={handleOuterPaginationChange}
+        />
+      ) : null}
+      {radioValue === 'inner' ? (
+        <PolymericTable
+          rowKey={innerRowkey}
+          dataSource={innerList ? innerList.data : []}
+          columns={innerColumns}
+          loading={innerLoading}
+          pagination={(
+            fetchInnerList
+              ? {
+                current: innerPage,
+                pageSize: innerSize, 
+                total: innerList.totalCount,
+              }
+              : null
+          )}
+          onPaginationChange={handleInnerPaginationChange}
+        />
+      ) : null}
+    </MellowCard>
+  );
+};
+
+FlowRecords.defaultProps = {
+  outerDataSource: undefined,
+  innerDataSource: undefined,
+  outerColumns: [],
+  innerColumns: [],
+  fetchOuterList: undefined,
+  fetchInnerList: undefined,
+};
+
+export default FlowRecords;
\ No newline at end of file