feat: 打印

frontend/src/views/finance/collectionDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="收款单详情">
+       <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="采购编号">
               {{ info.number }}
@@ -39,7 +41,8 @@
 
 <script>
   import { collectioOrderDetail } from '@/api/finance'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -128,8 +131,17 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         let collectionAmount = 0;
+        this.loading = true;
         collectioOrderDetail({ id: this.$route.query.id }).then(data => {
           this.info = data;
           data.collection_account_items.map(item => { collectionAmount += Number(item.collection_amount) });
@@ -141,6 +153,7 @@
               collection_amount: collectionAmount,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/finance/paymentDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="付款单详情">
+       <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="采购编号">
               {{ info.number }}
@@ -39,7 +41,8 @@
 
 <script>
   import { paymentOrderDetail } from '@/api/finance'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -128,8 +131,17 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         let paymentAmount = 0;
+        this.loading = true;
         paymentOrderDetail({ id: this.$route.query.id }).then(data => {
           this.info = data;
           data.payment_account_items.map(item => { paymentAmount += Number(item.payment_amount) });
@@ -141,6 +153,7 @@
               payment_amount: paymentAmount,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/purchasing/purchaseRecordDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="采购单详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="采购编号">
               {{ info.number }}
@@ -49,8 +51,9 @@
 
 <script>
   import { purchaseOrderDetail } from '@/api/purchasing'
-  
-  export default {
+  import JsBarcode from 'jsbarcode'
+
+export default {
     data() {
       return {
         loading: false,
@@ -138,12 +141,18 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         purchaseOrderDetail({ id: this.$route.query.id }).then(data => {
           this.info = data;
-        }).finally(() => {
-          this.loading = false;
           this.info.purchase_account_items = [
             ...this.info.purchase_account_items,
             {
@@ -161,6 +170,9 @@
               totalAmount: this.info.total_amount,
             },
           ];
+          this.getJsBarcode(data.number)
+        }).finally(() => {
+          this.loading = false;
         });
       },
     },

frontend/src/views/purchasing/returnRecordDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <a-card title="退货单详情">
+    <a-card title="采购退货单详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="退货单编号">
               {{ info.number }}
@@ -52,8 +54,9 @@
 
 <script>
   import { purchaseReturnOrderDetail } from '@/api/purchasing'
-  
-  export default {
+  import JsBarcode from 'jsbarcode'
+
+export default {
     data() {
       return {
         loading: false,
@@ -141,6 +144,14 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         purchaseReturnOrderDetail({ id: this.$route.query.id }).then(data => {
@@ -162,6 +173,7 @@
               totalAmount: this.info.total_amount,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/sale/saleRecordDetail/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
     <a-card title="销售单详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
-            <a-descriptions-item label="退货编号">
+            <a-descriptions-item label="销售编号">
               {{ info.number }}
             </a-descriptions-item>
             <a-descriptions-item label="销售单号">
@@ -52,6 +54,7 @@
 
 <script>
   import { saleOrderDetail } from '@/api/sale'
+  import JsBarcode from 'jsbarcode'
 
 export default {
     data() {
@@ -141,6 +144,14 @@ export default {
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         saleOrderDetail({ id: this.$route.query.id }).then(data => {
@@ -162,6 +173,7 @@ export default {
               totalAmount: this.info.total_amount,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/sale/saleReturnDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
-    <a-card title="采购单详情">
+    <a-card title="销售退货单详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="退货编号">
               {{ info.number }}
@@ -52,8 +54,9 @@
 
 <script>
   import { saleReturnOrderDetail } from '@/api/sale'
+  import JsBarcode from 'jsbarcode'
 
-  export default {
+export default {
     data() {
       return {
         loading: false,
@@ -141,6 +144,14 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         saleReturnOrderDetail({ id: this.$route.query.id }).then(data => {
@@ -162,6 +173,7 @@
               totalAmount: this.info.total_amount,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/warehouse/allocationDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="调拨单详情">
+       <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="调拨编号">
               {{ info.number }}
@@ -39,7 +41,8 @@
 
 <script>
   import { stockTransferDetail } from '@/api/warehouse'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -111,7 +114,16 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
+        this.loading = true;
         stockTransferDetail({ id: this.$route.query.id }).then(data => {
           this.info = data;
           this.info.stock_transfer_goods_items = [
@@ -122,6 +134,7 @@
               stock_transfer_quantity: this.info.total_quantity,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/warehouse/inStockDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="待入库单详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="入库编号">
               {{ info.number }}
@@ -42,7 +44,8 @@
 
 <script>
   import { stockInOrderDetail } from '@/api/warehouse'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -113,6 +116,14 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         stockInOrderDetail({ id: this.$route.query.id }).then(data => {
@@ -125,6 +136,7 @@
               stock_in_quantity: this.info.total_quantity,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/warehouse/inStockRecordDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="入库记录详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="入库编号">
               {{ info.stock_in_order_number }}
@@ -39,7 +41,8 @@
 
 <script>
   import { stockInRecordDetail } from '@/api/warehouse'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -122,6 +125,14 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         stockInRecordDetail({ id: this.$route.query.id }).then(data => {
@@ -134,6 +145,7 @@
               stock_in_quantity: this.info.total_quantity,
             },
           ];
+          this.getJsBarcode(data.stock_in_order_number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/warehouse/inventoryDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="盘点单详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="盘点编号">
               {{ info.number }}
@@ -72,7 +74,8 @@
 
 <script>
   import { stockCheckDetail } from '@/api/warehouse'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -187,7 +190,16 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
+        this.loading = true;
         stockCheckDetail({ id: this.$route.query.id }).then(data => {
           this.info = data;
           this.info.stock_check_goods_Items = [
@@ -198,6 +210,7 @@
               actual_quantity: this.info.total_actual_quantity,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/warehouse/outStockDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="出库单详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="出库编号">
               {{ info.number }}
@@ -33,7 +35,8 @@
 
 <script>
   import { stockOutOrderDetail } from '@/api/warehouse'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -87,6 +90,14 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         stockOutOrderDetail({ id: this.$route.query.id }).then(data => {
@@ -99,6 +110,7 @@
               stock_out_quantity: this.info.total_quantity,
             },
           ];
+          this.getJsBarcode(data.number)
         }).finally(() => {
           this.loading = false;
         });

frontend/src/views/warehouse/outStockRecordDetail/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <a-card title="出库记录详情">
+      <a-button slot="extra" type="primary" style="margin-right: 8px;" ghost v-print="'#printContent'"> <a-icon type="printer" />打印</a-button>
       <a-button slot="extra" type="primary" ghost @click="() => { this.$router.go(-1); }"> <a-icon type="left" />返回</a-button>
-      <section id="pdfDom">
+      <section id="printContent">
         <a-spin :spinning="loading">
+          <img id="barcode" style="float: right" />
           <a-descriptions bordered>
             <a-descriptions-item label="出库编号">
               {{ info.stock_out_order_number }}
@@ -39,7 +41,8 @@
 
 <script>
   import { stockOutRecordDetail } from '@/api/warehouse'
-  
+  import JsBarcode from 'jsbarcode'
+
   export default {
     data() {
       return {
@@ -93,6 +96,14 @@
       this.initData();
     },
     methods: {
+      getJsBarcode(number) {
+        JsBarcode("#barcode", number, {
+          lineColor: '#000',
+          width: 2,
+          height: 40,
+          displayValue: true
+        });
+      },
       initData() {
         this.loading = true;
         stockOutRecordDetail({ id: this.$route.query.id }).then(data => {
@@ -105,6 +116,7 @@
               stock_out_quantity: this.info.total_quantity,
             },
           ];
+          this.getJsBarcode(data.stock_out_order_number)
         }).finally(() => {
           this.loading = false;
         });