feat: 添加 ButtonSwitch 按钮切换组件

src/components/ButtonSwitch/index.less

+.button-switch {
+  :global {
+    .ant-radio-button-wrapper:hover {
+      color: #6B778C;
+    }
+    .ant-radio-group-solid {
+      .ant-radio-button-wrapper-checked {
+        background: #6B778C;
+        border-color: #6B778C;
+
+        &:hover {
+          background: #6B778C;
+          border-color: #6B778C;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/components/ButtonSwitch/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-05-12 11:04:26
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-05-12 11:21:04
+ * @Description: 按钮切换器
+ */
+import React, { useState, useEffect } from 'react';
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/lib/radio';
+import styles from './index.less';
+
+export interface OptionItem {
+  /**
+   * 名称
+   */
+  label: string,
+  /**
+   * 值
+   */
+  value: any,
+}
+
+interface IProps {
+  /**
+   * 数据
+   */
+  options: OptionItem[],
+  /**
+   * 按钮切换触发事件
+   */
+  onChange?: (value: any) => void,
+  /**
+   * 值
+   */
+  value?: any,
+}
+
+const ButtonSwitch: React.FC<IProps> = (props: IProps) => {
+  const {
+    options,
+    onChange,
+    value,
+  } = props;
+  const first = options.length ? options[0].value : '';
+  const [radioValue, setRadioValue] = useState(first);
+
+  useEffect(() => {
+    if ('value' in props) {
+      setRadioValue(value);
+    }
+  }, [value]);
+
+  const triggerChange = (next: any) => {
+    if (onChange) {
+      onChange(next);
+    }
+  };
+
+  const handleRadioChange = (e: RadioChangeEvent) => {
+    if (!('value' in props)) {
+      setRadioValue(e.target.value);
+      return;
+    }
+    triggerChange(e.target.value);
+  };
+
+  return (
+    <div className={styles['button-switch']}>
+      <Radio.Group
+        options={options}
+        onChange={handleRadioChange}
+        value={radioValue}
+        optionType="button"
+        buttonStyle="solid"
+        size="small"
+      />
+    </div>
+  );
+};
+
+ButtonSwitch.defaultProps = {
+  onChange: undefined,
+};
+
+export default ButtonSwitch;

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

-.flow-records {
-  :global {
-    .ant-radio-button-wrapper:hover {
-      color: #6B778C;
-    }
-    .ant-radio-group-solid {
-      .ant-radio-button-wrapper-checked {
-        background: #6B778C;
-        border-color: #6B778C;
-
-        &:hover {
-          background: #6B778C;
-          border-color: #6B778C;
-        }
-      }
-    }
-  }
-}
\ No newline at end of file

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

 import React, { useEffect, useState } from 'react';
 import { 
-  Tabs,
   Badge,
-  Radio,
 } from 'antd';
-import { RadioChangeEvent } from 'antd/lib/radio';
 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 styles from './index.less';
 
 export interface InnerHistoryItem {
@@ -219,8 +217,7 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
     });
   };
 
-  const handleRadioChange = (e: RadioChangeEvent) => {
-    const { value } = e.target;
+  const handleRadioChange = (value: ('inner' | 'outer')) => {
     setRadioValue(value);
   };
 
@@ -245,16 +242,12 @@ const FlowRecords: React.FC<FlowRecordsProps> = ({
     <MellowCard
       title="流转记录"
       extra={(
-        <Radio.Group
+        <ButtonSwitch
           options={options}
           onChange={handleRadioChange}
           value={radioValue}
-          optionType="button"
-          buttonStyle="solid"
-          size="small"
         />
       )}
-      className={styles['flow-records']}
       {...rest}
     >
       {outerData.data && outerData.data.length > 0 ? (