feats

config/routes.js

@@ -88,6 +88,13 @@
     // hideInMenu: true,
     component: './guaranteeTask/Edit/index',
   },
+  {
+    path: '/guaranteeTask/print',
+    name: '保障单',
+    hideInMenu: true,
+    layout: false,
+    component: './guaranteeTask/print/index',
+  },
   {
     component: './404',
   },

src/pages/guaranteeTask/Edit/BasicForm.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import moment from 'moment';
+import { Link } from 'umi';
 import { Button, Row, Col, Form, Input, InputNumber, DatePicker, notification } from 'antd';
 import { addGuaranteeTask, updateGuaranteeTask } from '@/services/api/guaranteeTask';
 
@@ -8,6 +9,7 @@ const { RangePicker } = DatePicker;
 
 export default (props) => {
   const { dataSource, setDataSource } = props;
+  const id = dataSource ? dataSource.id : undefined;
 
   const [form] = Form.useForm()
   const [rangeDate, setRangeDate] = useState([]);
@@ -32,7 +34,6 @@ export default (props) => {
     const startDate = start ? start.format('YYYY-MM-DD') : undefined;
     const endDate = end ? end.format('YYYY-MM-DD') : undefined;
 
-    const id = dataSource ? dataSource.id : undefined;
     const func = id ? updateGuaranteeTask : addGuaranteeTask;
 
     setLoading(true);
@@ -196,9 +197,12 @@ export default (props) => {
       </Row>
 
       <Row gutter={48}>
-        <Col offset={6} span={6}>
+        <Col offset={6} span={12}>
           <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
-          <Button style={{ marginLeft: '100px' }}>返回</Button>
+          <Button style={{ marginLeft: '48px' }}>返回</Button>
+          <Button style={{ marginLeft: '48px' }}>
+            <Link target="_blank" to={`/guaranteeTask/print?id=${id}`}>打印预览</Link>
+          </Button>
         </Col>
       </Row>
 

src/pages/guaranteeTask/Edit/index.jsx

@@ -46,7 +46,6 @@ export default (props) => {
         {
           activeTabKey === 'item-2' && <DishList dataSource={dataSource} setDataSource={setDataSource} />
         }
-
       </Card>
     </PageContainer>
   )

src/pages/guaranteeTask/print/index.jsx

@@ -0,0 +1,132 @@
+import React, { useRef, useState, useEffect } from 'react';
+import moment from 'moment';
+import { Button } from 'antd';
+import { useSearchParams } from '@umijs/max';
+import { getGuaranteeTask } from '@/services/api/guaranteeTask';
+import { getGuaranteeDetailList } from '@/services/api/guaranteeTask';
+import Styles from './style.less';
+
+export default (props) => {
+  const [dataSource, setDataSource] = useState({});
+  const [list, setList] = useState([]);
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get('id');
+
+  const onPrint = () => {
+    window.print();
+  }
+  
+  useEffect(() => {
+    if (id) {
+      // setLoading(true);
+      getGuaranteeTask(id).then(res => {
+        // setLoading(false);
+        setDataSource(res);
+      }).catch(() => {
+        // setLoading(false);
+      });
+      
+      // setLoading(true);
+      getGuaranteeDetailList({ pageNum: 1, pageSize: 500, guaranteeId: id }).then(res => {
+        // setLoading(false);
+        setList(res.records || []);
+      }).catch(() => {
+        // setLoading(false);
+      })
+    }
+  }, [id]);
+
+  const details = list.map(x => `${x.dishName} × ${x.dishAmount}`).join('，');
+  const startDate = dataSource.startDate ? moment(dataSource.startDate).format('YYYY-MM-DD') : '';
+  const endDate = dataSource.endDate ? moment(dataSource.endDate).format('YYYY-MM-DD') : '';
+  const dateStr = `${startDate} ~ ${endDate}`;
+
+  return (
+    <div className={Styles['print-page']}>
+      <table className={Styles['print-table']}>
+        {/* col 用于固定宽度 */}
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <col />
+        <thead>
+          <tr>
+            <th className={Styles['title']} colSpan={8}>江苏省海安军供站军供保障受领单</th>
+          </tr>
+          <tr className={Styles['sub-title']}>
+            <th colSpan={2}><div>军代表：{dataSource.deputyMan || ' '}</div></th>
+            <th colSpan={2}><div>电话：{dataSource.deputyPhone || ' '}</div></th>
+            <th colSpan={2}><div>通报时间：{dataSource.gotDate || ' '}</div></th>
+            <th colSpan={2}><div>受领人：{dataSource.receiver || ' '}</div></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><div>保障序号</div></td>
+            <td colSpan={2}><div>{dataSource.guaranteeNo || ' '}</div></td>
+            <td><div>军运号</div></td>
+            <td colSpan={2}><div>{dataSource.transportNo || ' '}</div></td>
+            <td><div>车次</div></td>
+            <td><div>{dataSource.tripsNo || ' '}</div></td>
+          </tr>
+          <tr>
+            <td><div>保障日期</div></td>
+            <td colSpan={3}>{dateStr}</td>
+            <td><div>保障时间</div></td>
+            <td colSpan={3}>{dataSource.timeRange || ' '}</td>
+          </tr>
+          <tr>
+            <td rowSpan={2}><div>保障人数</div></td>
+            <td rowSpan={2}>{dataSource.totalPersonNum || ' '}</td>
+            <td><div>其中回民</div></td>
+            <td>{dataSource.huiPersonNum || ' '}</td>
+            <td rowSpan={2}><div>伙食标准</div></td>
+            <td>{dataSource.standard || ' '}</td>
+          </tr>
+          <tr>
+            <td className={Styles['bd-left']}><div>其中病号</div></td>
+            <td>{dataSource.patientNum || ' '}</td>
+            <td>套餐: {dataSource.packageName || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>保障地点</div></td>
+            <td colSpan={7}>{dataSource.address || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>部队联系人</div></td>
+            <td colSpan={3}>{dataSource.concatPerson || ' '}</td>
+            <td><div>联系电话</div></td>
+            <td colSpan={3}>{dataSource.concatPhone || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>制餐人</div></td>
+            <td colSpan={3}>{dataSource.chef || ' '}</td>
+            <td><div>联系电话</div></td>
+            <td colSpan={3}>{dataSource.chefPhone || ' '}</td>
+          </tr>
+          <tr>
+            <td><div>配送人</div></td>
+            <td colSpan={3}>{dataSource.deliveryMan || ' '}</td>
+            <td><div>联系电话</div></td>
+            <td colSpan={3}>{dataSource.deliveryPhone || ' '}</td>
+          </tr>
+          <tr className={Styles['cell-lg']}>
+            <td>配餐明细</td>
+            <td colSpan={7}><div>{details}</div></td>
+          </tr>
+          <tr className={Styles['cell-lg']}>
+            <td>备注</td>
+            <td colSpan={7}><div>{dataSource.remark || ' '}</div></td>
+          </tr>
+        </tbody>
+      </table>
+      <div className={Styles['print-btn']}>
+        <Button type="primary" onClick={onPrint}>打印</Button>
+      </div>
+    </div>
+  )
+}

src/pages/guaranteeTask/print/style.less

@@ -0,0 +1,109 @@
+.print-page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding: 1cm;
+}
+
+// A4 大小 210 * 279
+@width: 190mm; // 210 - 20
+@height: 277mm;  // 279 - 20
+
+@minWidth: calc(@width / 8);
+
+.print-table {
+  table-layout: fixed;
+  width: @width;
+  height: @height;
+  margin: auto;
+  font-size: 16px;
+  overflow-x: hidden;
+
+  col {
+    width: @minWidth;
+  }
+
+  th {
+    font-weight: 400;
+  }
+
+  thead {
+    tr {
+      border: none !important;
+    }
+  }
+
+  @border: 1.5px solid #333;
+
+  tbody {
+    border: @border;
+  }
+  
+  tr {
+    & + tr {
+      border-top: @border;
+    }
+  }
+
+  td {
+    padding: 0 .5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    div {
+      min-width: @minWidth;
+      min-height: 10mm;
+      line-height: 10mm;
+    }
+
+    & + td {
+      border-left: @border;
+    }
+  }
+
+  .cell-lg {
+    div {
+      width: auto;
+      min-height: 70mm;
+      line-height: 1.6em;
+    }
+  }
+
+  .title {
+    font-size: 2em;
+  }
+
+  .sub-title {
+    // font-size: 12px;
+  }
+
+  .bd-left {
+    border-left: @border;
+  }
+}
+
+@media screen {
+  .print-btn {
+    text-align: center;
+    margin: 64px auto;
+  }
+
+  .print-table {
+    padding: 5mm 5mm 5mm 10mm;
+  }
+}
+
+@media print {
+  .print-table {
+    padding: 0;
+  }
+
+  .print-btn {
+    display: none;
+  }
+}
+
+@page {
+  size: A4;
+  margin: 0;
+}