完成订单电子合同相关

src/components/MellowCard/index.less

@@ -20,4 +20,24 @@
       }
     }
   }
+
+  &.fullHeight {
+    height: 100%;
+
+    :global {
+      .ant-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column !important;
+  
+        &-head {
+          flex-shrink: 0;
+        }
+  
+        &-body {
+          flex: 1;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

src/components/MellowCard/index.tsx

@@ -2,24 +2,28 @@
  * @Author: XieZhiXiong
  * @Date: 2020-08-26 17:32:45
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2020-09-22 20:54:42
+ * @LastEditTime: 2020-09-27 15:00:07
  * @Description: 基于 antd Card 封装的适合项目 UI 的 Card，使用方式跟 antd Card 一样，这里只是修改了样式
  */
 import React from 'react';
 import { Card } from 'antd';
+import classNames from 'classnames';
 import { CardProps } from 'antd/lib/card';
 import styles from './index.less';
-import cx from 'classnames'
 
 export interface MellowCardProps extends CardProps {
-  blockClassName?: string
+  blockClassName?: string;
+  fullHeight?: boolean;           // 是否占满父级的高度，一般用于多列使用改组件的情况
 }
 
 const MellowCard: React.FC<MellowCardProps> = props => {
-  const { children, blockClassName, ...rest } = props;
+  const { children, blockClassName, fullHeight, ...rest } = props;
+  const cls = classNames(styles.mellow, {
+    [styles.fullHeight]: fullHeight, 
+  });
 
   return (
-    <div className={styles.mellow}>
+    <div className={cls}>
       <Card bordered={false} {...rest}>
         {children}
       </Card>

src/pages/transaction/purchaseOrder/orderPreview/components/ContractList/index.less

+@import '../../../../../../global/styles/utils.less';
+
+.contractList {
+  padding: 0;
+  margin: 0;
+
+  &-item {
+    padding: 6px 8px;
+    background: #F4F5F7;
+    border-radius: 4px;
+    list-style: none;
+
+    > a {
+      display: flex;
+      align-items: center;
+    }
+
+    &-icon {
+      flex-shrink: 0;
+      margin-right: 4px;
+      color: #7178EA;
+    }
+
+    &-name {
+      flex: 1;
+      .textOverflow();
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+  }
+}
+
+.noData {
+  color: #909399;
+}
\ No newline at end of file

src/pages/transaction/purchaseOrder/orderPreview/components/ContractList/index.tsx

+import React from 'react';
+import { FilePdfOutlined, FileWordOutlined, FileOutlined } from '@ant-design/icons';
+import { PublicApi } from '@/services/api'
+import styles from './index.less';
+
+interface ContractItem {
+  electronicContractUrl?: string;
+  electronicContractName?: string;
+};
+
+interface ContractList {
+  dataSource: ContractItem[];
+};
+
+const IconMap = {
+  '.pdf': <FilePdfOutlined />, 
+  '.doc': <FileWordOutlined />, 
+  '.doxc': <FileWordOutlined />, 
+};
+
+const ContractItem: React.FC<ContractItem> = ({ 
+  electronicContractUrl, 
+  electronicContractName, 
+ }) => {
+  const index1 = electronicContractUrl.lastIndexOf('.');
+  const suffix = electronicContractUrl.slice(index1);
+  const index2 = electronicContractUrl.lastIndexOf('/');
+  // 如果没有文件名，但是有链接就从链接截取文件名
+  const fileName = electronicContractName ? electronicContractName : electronicContractUrl.slice(index2 + 1);
+
+  const handleDownload = (name, url) => {
+    window.location.href = `/api/order/contractTemplate/downloadContract?contractName=${name}&contractUrl=${url}`;
+  };
+
+  return (
+    <li className={styles['contractList-item']} onClick={() => handleDownload(fileName, electronicContractUrl)}>
+      <a>
+        <div className={styles['contractList-item-icon']}>
+          {IconMap[suffix] || <FileOutlined />}
+        </div>
+        <div 
+          className={styles['contractList-item-name']}
+          title={fileName}
+        >
+          {fileName}
+        </div>
+      </a>
+    </li>
+  );
+};
+
+const ContractList: React.FC<ContractList> = ({ dataSource }) => {
+  if (!Array.isArray(dataSource)) {
+    return <div className={styles.noData}>没有相关数据~</div>;
+  }
+
+  return (
+    <ul className={styles.contractList}>
+      {dataSource.map((item, index) => (
+        <ContractItem 
+          key={index} 
+          electronicContractUrl={item.electronicContractUrl} 
+          electronicContractName={item.electronicContractName} 
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default ContractList;
\ No newline at end of file

src/pages/transaction/purchaseOrder/orderPreview/components/orderMergeInfo/index.less

@@ -6,8 +6,4 @@
 .card-list_title {
   font-size: 14px;
   color: #909399;
-}
-
-.fullHeight {
-  height: 100%;
 }
\ No newline at end of file

src/pages/transaction/purchaseOrder/orderPreview/components/orderMergeInfo/index.tsx

@@ -6,6 +6,7 @@ import { formatTimeString } from '@/utils'
 import { DELIVERY_TYPE } from '@/constants'
 import style from './index.less'
 import { PublicApi } from '@/services/api'
+import ContractList from '../ContractList'
 
 export interface OrderMergeInfoProps {}
 const payInfo = [
@@ -49,20 +50,32 @@ const OrderMergeInfo:React.FC<OrderMergeInfoProps> = (props) => {
   const { data, ctl } = orderDetailCtx
 
   return (
-    <Row style={{marginTop: 24}}>
+    <Row style={{marginTop: 24}} gutter={24}>
       <Col span={12}>
-        <MellowCard title='交易信息' blockClassName={style.fullHeight} className={style.fullHeight}>
+        <MellowCard title='交易信息' fullHeight>
           <RenderCard infoList={payInfo} dataSource={data}/>
         </MellowCard>
       </Col>
-      <Col span={6} push={1}>
-        <MellowCard title='其他信息' blockClassName={style.fullHeight} className={style.fullHeight}>
+      <Col span={6}>
+        <MellowCard title='其他信息' fullHeight>
           <RenderCard infoList={otherInfo} dataSource={data}/>
         </MellowCard>
       </Col>
-      <Col span={4} push={2}>
-        <MellowCard title='电子合同' blockClassName={style.fullHeight} className={style.fullHeight}>
+      <Col span={6}>
+        <MellowCard title='电子合同' fullHeight>
           <RenderCard infoList={electronInfo} dataSource={data}/>
+          <ContractList 
+            dataSource={
+              data.electronicContractUrl ? 
+                [
+                  { 
+                    electronicContractUrl: data.electronicContractUrl, 
+                    electronicContractName: data.electronicContractName,  
+                  }, 
+                ] : 
+                null
+              } 
+          />
         </MellowCard>
       </Col>
     </Row>