feat(order): update print

src/views/order/printModal.vue

@@ -1,16 +1,41 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" title="打印票据" @ok="handleSubmit" width="80%">
-    <BasicTable @register="registerTable">
+  <BasicModal v-bind="$attrs" @register="register" title="打印票据" width="80%">
+    <BasicTable @register="registerTable" id="printTable">
       <template #tableTitle>
         <div class="pb-30px pl-15px">
           <address>
-            <div>{{ modalRecord.consignee }}</div>
+            <div
+              ><strong>{{ modalRecord.consignee }}</strong></div
+            >
             <div>{{ modalRecord.address }}</div>
             <abbr title="phone"> 联系方式： </abbr> {{ modalRecord.mobile }}
           </address>
         </div>
       </template>
+
+      <template #toolbar>
+        <div class="pb-30px pl-15px">
+          <div
+            ><strong>单据编号 :</strong>
+            <span style="color: #1ab394">{{ modalRecord.orderSn }}</span></div
+          >
+          <div><strong>日期 :</strong> : <Time :value="modalRecord.addTime" mode="datetime" /></div>
+        </div>
+      </template>
+      <template #footer>
+        <div style="text-align: right; min-width: 100px"> 总计：¥{{ modalRecord.goodsPrice }} </div>
+      </template>
+      <template #retailPrice="{ record }">
+        <div>¥{{ record.retailPrice }} </div>
+      </template>
+      <template #marketPrice="{ record }">
+        <div>¥{{ record.marketPrice }} </div>
+      </template>
     </BasicTable>
+
+    <template #footer>
+      <a-button type="primary" @click="handlePrint" class="mr-2">打印</a-button>
+    </template>
   </BasicModal>
 </template>
 <script lang="ts">
@@ -19,22 +44,11 @@
   import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { cloneDeep } from 'lodash-es';
-  // goodsId: 77006478
-  // goodsName: "123"
-  // goodsSn: "123"
-  // goodsSpecifitionIds: null
-  // goodsSpecifitionNameValue: null
-  // id: 832
-  // isReal: null
-  // listPicUrl: "https://4dkk.4dage.com/shop/huafa/20211203/1428015744818c.jpg?x-oss-process=image/resize,m_fixed,w_400,h_400"
-  // marketPrice: 123
-  // number: 1
-  // orderId: 690
-  // productId: 2932
-  // retailPrice: 12312
+  import { Time } from '/@/components/Time';
+  import printJS from 'print-js';
   export default defineComponent({
     name: 'PrintModal',
-    components: { BasicModal, BasicTable },
+    components: { BasicModal, BasicTable, Time },
     emits: ['success', 'register', 'reload'],
     setup() {
       // const isUpdate = ref(true);
@@ -43,6 +57,9 @@
         address: '',
         consignee: '',
         mobile: '',
+        orderSn: '',
+        addTime: '',
+        goodsPrice: '',
       });
       const columns: BasicColumn[] = [
         {
@@ -61,16 +78,18 @@
           dataIndex: 'retailPrice',
           ellipsis: false,
           width: 180,
+          slots: { customRender: 'retailPrice' },
         },
         {
           title: '总价',
           dataIndex: 'marketPrice',
           ellipsis: false,
           width: 180,
+          slots: { customRender: 'marketPrice' },
         },
       ];
 
-      const [registerTable, { setTableData }] = useTable({
+      const [registerTable, { setTableData, redoHeight }] = useTable({
         title: '订单列表',
 
         columns: columns,
@@ -80,7 +99,9 @@
         // showTableSetting: true,
         // tableSetting: { fullScreen: true },
         showIndexColumn: false,
-        maxHeight: 250,
+        // maxHeight: 250,
+        // resizeHeightOffset: 0,
+        isCanResizeParent: true,
         // rowKey: 'id',
         pagination: false,
 
@@ -97,21 +118,31 @@
         modalRecord.consignee = data.consignee;
         modalRecord.address = data.address;
         modalRecord.mobile = data.mobile;
-
+        modalRecord.orderSn = data.orderSn;
+        modalRecord.addTime = data.addTime;
+        modalRecord.goodsPrice = data.goodsPrice;
         // modalRecord.brandId = data.brandId;
 
         nextTick(() => {
           setTableData(cloneDeep(data.goodsList));
+          redoHeight();
+        });
+      }
+      async function handlePrint() {
+        printJS({
+          printable: 'printTable',
+          type: 'html',
+          style: 'table th td { border: 1px solid black; border-collapse: collapse; }  }',
         });
       }
-      async function handleSubmit() {}
 
       return {
         register,
-        handleSubmit,
+
         closeModal,
         registerTable,
         modalRecord,
+        handlePrint,
       };
     },
   });