chore: 完善样式

src/components/MellowCard/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-08-26 17:32:45
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-05-12 10:46:03
+ * @LastEditTime: 2021-05-12 11:45:32
  * @Description: 基于 antd Card 封装的适合项目 UI 的 Card，使用方式跟 antd Card 一样，这里只是修改了样式
  */
 import React from 'react';
@@ -19,7 +19,7 @@ const Wrap = styled(props => <div {...props}/>)`
       border-bottom: none;
 
       .ant-card-head-title {
-        padding-bottom: 9px;
+        padding-bottom: 0;
         font-size: 14px;
         font-weight: 500;
         color: rgba(23, 43, 77, 1);
@@ -27,7 +27,7 @@ const Wrap = styled(props => <div {...props}/>)`
     }
 
     .ant-card-extra {
-      padding: 16px 0 9px 0;
+      padding: 16px 0 0 0;
     }
 
     .ant-card-body {

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

-.file {
-  :global {
-    .ant-upload-list {
-      margin-top: -12px;
-    }
-  }
-}
\ No newline at end of file

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

@@ -2,11 +2,16 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-03 11:49:34
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-05-11 15:47:53
+ * @LastEditTime: 2021-05-12 15:10:10
  * @Description: 附件列表
  */
 import React from 'react';
-import { Upload } from 'antd';
+import { Empty } from 'antd';
+import {
+  SchemaForm,
+  SchemaMarkupField as Field,
+} from '@formily/antd';
+import { Upload, FormMegaLayout } from '@formily/antd-components';
 import { FileData } from '@/utils';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import styles from './index.less';
@@ -21,14 +26,28 @@ const FileList: React.FC<FileListProps> = ({
 }) => {
   return (
     <MellowCard
-      title="相关不良原因举证附件"
+      title="附件"
+      bodyStyle={{
+        paddingBottom: 6,
+      }}
       {...rest}
     >
-      <Upload 
-        className={styles.file}
-        fileList={fileList}
-        disabled
-      />
+      {fileList && fileList.length ? (
+        <SchemaForm
+          components={{ Upload }}
+          value={{
+            files: fileList,
+          }}
+          editable={false}
+          previewPlaceholder=" "
+        >
+          <FormMegaLayout full>
+            <Field name="files" title="相关不良原因举证附件" x-component="Upload" />
+          </FormMegaLayout>
+        </SchemaForm>
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      )}
     </MellowCard>
   );
 };

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

@@ -7,7 +7,6 @@ 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 {
   step: number;

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

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2020-11-05 15:18:15
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-01-28 10:41:43
+ * @LastEditTime: 2021-05-12 14:54:59
  * @Description: 退货收货统计、退货发货明细
  */
 import React, { useState } from 'react';
@@ -16,6 +16,8 @@ import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import PolymericTable from '@/components/PolymericTable';
 import EyePreview from '@/components/EyePreview';
+import ButtonSwitch from '@/components/ButtonSwitch';
+import DescProgress from '@/components/DescProgress';
 import {
   RETURN_INNER_STATUS_UNCONFIRMED_RETURN_DELIVERY, 
   RETURN_INNER_STATUS_UNCONFIRMED_RETURN_RECEIVE, 
@@ -90,6 +92,7 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
   ...rest
 }) => {
   const [currentBatch, setCurrentBatch] = useState(1);
+  const [radioValue, setRadioValue] = useState<('1' | '2')>('1');
 
   const summaryColumns: EditableColumns[] = [
     {
@@ -134,14 +137,23 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
       align: 'center',
     },
     {
-      title: '已退货发货',
+      title: '已退货发货/未退货发货',
       dataIndex: 'deliveryCount',
-      align: 'center',
-    },
-    {
-      title: '未退货发货',
-      dataIndex: 'unDeliveryCount',
-      align: 'center',
+      render: (text, record) => (
+        <DescProgress
+          descriptions={[
+            {
+              title: '已退货发货:',
+              value: `${text}`,
+            },
+            {
+              title: '未退货发货:',
+              value: `${record.unDeliveryCount}`,
+            },
+          ]}
+          percent={(text / record.returnCount) * 100}
+        />
+      ),
     },
     {
       title: '已退货收货',
@@ -257,25 +269,44 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
     }
   };
 
+  const handleRadioChange = (value: ('1' | '2')) => {
+    setRadioValue(value);
+  };
+
+  const options = [
+    {
+      label: `退货${!isPurchaser ? '收货' : '发货'}统计`,
+      value: '1',
+    },
+    {
+      label: `退货${!isPurchaser ? '收货' : '发货'}明细`,
+      value: '2',
+    },
+  ];
+
   return (
-    <MellowCard {...rest}>
-      <Tabs defaultActiveKey="2">
-        <TabPane 
-          tab={`退货${!isPurchaser ? '收货' : '发货'}统计`} 
-          key="1"
-        >
-          <PolymericTable
-            rowKey={record => Math.random().toFixed(16).slice(2, 10)}
-            dataSource={summary}
-            columns={summaryColumns}
-            loading={false}
-            pagination={null}
-          />
-        </TabPane>
-        <TabPane 
-          tab={`退货${!isPurchaser ? '收货' : '发货'}明细`} 
-          key="2"
-        >
+    <MellowCard
+      title="退货发货信息"
+      extra={(
+        <ButtonSwitch
+          options={options}
+          onChange={handleRadioChange}
+          value={radioValue}
+        />
+      )}
+      {...rest}
+    >
+      {radioValue === '1' ? (
+        <PolymericTable
+          rowKey={() => Math.random().toFixed(16).slice(2, 10)}
+          dataSource={summary}
+          columns={summaryColumns}
+          loading={false}
+          pagination={null}
+        />
+      ) : null}
+      {radioValue === '2' ? (
+        <>
           <Radio.Group
             options={
               detailed.map(item => ({
@@ -398,7 +429,7 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
               </div>
 
               <PolymericTable
-                rowKey={record => Math.random().toFixed(16).slice(2, 10)}
+                rowKey={() => Math.random().toFixed(16).slice(2, 10)}
                 dataSource={item.detailList}
                 columns={detailedColumns}
                 loading={false}
@@ -406,8 +437,8 @@ const ReturnInfo: React.FC<ReturnInfoProps> = ({
               />
             </div>
           ))}
-        </TabPane>
-      </Tabs>
+        </>
+      ) : null}
     </MellowCard>
   );
 };

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

@@ -12,6 +12,7 @@ import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 import PolymericTable from '@/components/PolymericTable';
 import StatusTag from '@/components/StatusTag';
+import DescProgress from '@/components/DescProgress';
 import { FileData, normalizeFiledata } from '@/utils';
 import {
   PAY_CHANNEL_OFFLINE, 
@@ -150,14 +151,23 @@ const ReturnDetailInfo: React.FC<ReturnDetailInfoProps> = ({
       align: 'center',
     },
     {
-      title: '采购金额',
-      dataIndex: 'purchaseAmount',
-      align: 'center',
-    },
-    {
-      title: '已支付金额',
+      title: '已支付/采购金额',
       dataIndex: 'payAmount',
-      align: 'center',
+      render: (text, record) => (
+        <DescProgress
+          descriptions={[
+            {
+              title: '已支付金额:',
+              value: `¥${text}`,
+            },
+            {
+              title: '采购金额:',
+              value: `¥${record.purchaseAmount}`,
+            },
+          ]}
+          percent={(text / record.purchaseAmount) * 100}
+        />
+      ),
     },
     {
       title: '退货数量',

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

@@ -8,7 +8,6 @@ import {
   Col,
   Badge, 
 } from 'antd';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { history } from 'umi';
 import { PublicApi } from '@/services/api';
 import { 
@@ -31,10 +30,10 @@ import {
 } from '@/constants/order';
 import { normalizeFiledata, FileData, findLastIndexFlowState } from '@/utils';
 import AnchorPage from '@/layouts/AnchorPage';
-import AvatarWrap from '@/components/AvatarWrap';
 import StatusTag from '@/components/StatusTag';
 import EyePreview from '@/components/EyePreview';
 import { EditableColumns } from '@/components/PolymericTable/interface';
+import DescProgress from '@/components/DescProgress';
 import ReturnInfoDrawer, { OrderInfo } from '../../../components/ReturnInfoDrawer';
 import { OuterHistoryData, InnerHistoryData } from '../../../components/FlowRecords';
 import { 
@@ -216,14 +215,23 @@ const DetailInfo: React.FC<DetailInfoProps> = ({
       align: 'center',
     },
     {
-      title: '采购金额',
-      dataIndex: 'purchaseAmount',
-      align: 'center',
-    },
-    {
-      title: '已支付金额',
+      title: '已支付/采购金额',
       dataIndex: 'payAmount',
-      align: 'center',
+      render: (text, record) => (
+        <DescProgress
+          descriptions={[
+            {
+              title: '已支付金额:',
+              value: `¥${text}`,
+            },
+            {
+              title: '采购金额:',
+              value: `¥${record.purchaseAmount}`,
+            },
+          ]}
+          percent={(text / record.purchaseAmount) * 100}
+        />
+      ),
     },
     {
       title: '退货数量',