chore: 替换组件

src/components/AuditProcess/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-09-15 17:48:36
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-05-18 15:08:09
+ * @LastEditTime: 2021-07-05 18:18:12
  * @Description: 内外部流转记录组件
  */
 import React, { useState, useEffect } from 'react';
@@ -10,8 +10,7 @@ import {
   Steps,
   Tooltip,
 } from 'antd';
-import MellowCard, { MellowCardProps } from '@/components/MellowCard';
-import ButtonSwitch from '@/components/ButtonSwitch';
+import ButtonTabs, { ButtonTabsProps } from '../ButtonTabs';
 import styles from './index.less';
 
 export interface StepsItem {
@@ -33,7 +32,7 @@ export interface StepsItem {
   status?: 'wait' | 'process' | 'finish' | 'error',
 }
 
-interface AuditProcessProp extends MellowCardProps {
+interface AuditProcessProp extends Omit<ButtonTabsProps, 'options'> {
   /**
    * 当前外部流程步骤
    */
@@ -104,7 +103,7 @@ const AuditProcess: React.FC<AuditProcessProp> = ({
   ].filter(Boolean);
 
   const titleRender = (stepTitle: string, stepLength: number) => {
-    if(stepLength <= 6) {
+    if (stepLength <= 6) {
       return <span>{stepTitle}</span>
     }
     return (
@@ -115,18 +114,15 @@ const AuditProcess: React.FC<AuditProcessProp> = ({
   }
 
   return (
-    <MellowCard
-      title="流转进度"
-      extra={(
-        <ButtonSwitch
+    <ButtonTabs
       options={options}
+      extra="流转进度"
+      defaultValue="inner"
       onChange={handleRadioChange}
       value={radioValue}
-        />
-      )}
       {...rest}
     >
-      {radioValue === 'outer' ? (
+      <ButtonTabs.Item activeKey="outer">
         <div className={styles.steps}>
           <Steps progressDot current={outerVerifyCurrent}>
             {outerVerifySteps && outerVerifySteps.map(item => (
@@ -139,8 +135,8 @@ const AuditProcess: React.FC<AuditProcessProp> = ({
             ))}
           </Steps>
         </div>
-      ) : null}
-      {radioValue === 'inner' ? (
+      </ButtonTabs.Item>
+      <ButtonTabs.Item activeKey="inner">
         <div className={styles.steps}>
           <Steps progressDot current={innerVerifyCurrent}>
             {innerVerifySteps && innerVerifySteps.map(item => (
@@ -153,8 +149,8 @@ const AuditProcess: React.FC<AuditProcessProp> = ({
             ))}
           </Steps>
         </div>
-      ) : null}
-    </MellowCard>
+      </ButtonTabs.Item>
+    </ButtonTabs>
   )
 };
 

src/components/FlowRecords/index.tsx

@@ -8,8 +8,7 @@
 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';
+import ButtonTabs, { ButtonTabsProps } from '../ButtonTabs';
 
 const PAGE_SIZE = 10;
 
@@ -35,7 +34,7 @@ export interface FetchListParams {
   pageSize: number,
 }
 
-interface IProps extends MellowCardProps {
+interface IProps extends Omit<ButtonTabsProps, 'options'> {
   /**
    * 外部流转记录数据源，与 fetchOuterList 不能共存
    * 如果两个同时存在 outerDataSource 优先
@@ -202,18 +201,15 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
   ].filter(Boolean);
 
   return (
-    <MellowCard
-      title="流转记录"
-      extra={(
-        <ButtonSwitch
+    <ButtonTabs
       options={options}
+      extra="流转记录"
+      defaultValue="inner"
       onChange={handleRadioChange}
       value={radioValue}
-        />
-      )}
       {...rest}
     >
-      {radioValue === 'outer' ? (
+      <ButtonTabs.Item activeKey="outer">
         <PolymericTable
           rowKey={outerRowkey}
           dataSource={outerList ? outerList.data : []}
@@ -230,8 +226,8 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
           )}
           onPaginationChange={handleOuterPaginationChange}
         />
-      ) : null}
-      {radioValue === 'inner' ? (
+      </ButtonTabs.Item>
+      <ButtonTabs.Item activeKey="inner">
         <PolymericTable
           rowKey={innerRowkey}
           dataSource={innerList ? innerList.data : []}
@@ -248,8 +244,8 @@ const FlowRecords: React.FC<IProps> = (props: IProps) => {
           )}
           onPaginationChange={handleInnerPaginationChange}
         />
-      ) : null}
-    </MellowCard>
+      </ButtonTabs.Item>
+    </ButtonTabs>
   );
 };