提交

package-lock.json

@@ -10896,6 +10896,11 @@
         "renderkid": "^2.0.4"
       }
     },
+    "print-js": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz",
+      "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",

package.json

@@ -17,6 +17,7 @@
     "element-ui": "^2.15.6",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
+    "print-js": "^1.6.0",
     "qs": "^6.12.1",
     "vue": "^2.5.2",
     "vue-barcode": "^1.3.0",

src/components/DialogOrderExport.vue → src/components/DialogTagApplyOrderExport.vue

@@ -5,6 +5,7 @@
     width="297mm"
   >
     <pdf-exporter ref="pdfExporter" class="flex column layout-gap" style="min-height:100%;height:600px;margin:0 calc(var(--layout-gap) * -1);padding:var(--layout-gap);color:#000000;">
+      <LogoImageView></LogoImageView>
       <div class="text-center" style="font-size:16px;font-weight:600;">标签需求订单</div>
       <div class="flex valign-center">
         <div>订单编号：</div>
@@ -82,7 +83,7 @@
       <div class="flex center dialog-footer">
         <el-button
           @click="onCloseBtnClick"
-        >取消</el-button>
+        >关闭</el-button>
 
         <el-button
           type="primary"
@@ -97,7 +98,7 @@
 import VueBarcode from 'vue-barcode'
 
 export default {
-  name: 'DialogOrderExport',
+  name: 'DialogTagApplyOrderExport',
   components: {
     VueBarcode
   },

src/components/DialogTagPurchaseOrderExport.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    append-to-body
+    width="297mm"
+  >
+    <pdf-exporter ref="pdfExporter" id="tag-purchase-order-export-pdf" class="flex column layout-gap" style="min-height:100%;height:600px;margin:0 calc(var(--layout-gap) * -1);padding:var(--layout-gap);color:#000000;">
+      <LogoImageView></LogoImageView>
+      <div class="text-center" style="font-size:16px;font-weight:600;">标签采购订单</div>
+      <div class="flex valign-center">
+        <div>采购单编号：</div>
+        <VueBarcode v-if="data" :value="data.orderNo" format="CODE128" :height="40" :font-size="14"></VueBarcode>
+      </div>
+      <div style="width:100%;">
+        <table cellspacing="0" cellpadding="0" border="0" class="origin-table">
+          <colgroup>
+            <col />
+            <col width="200" />
+            <col />
+            <col />
+            <col />
+            <col />
+          </colgroup>
+          <thead>
+            <tr>
+              <th><div class="cell">序号</div></th>
+              <th><div class="cell">标签类型</div></th>
+              <th><div class="cell">需采购数量（个）</div></th>
+              <th><div class="cell">总价（元）</div></th>
+              <th><div class="cell">采购人员</div></th>
+              <th><div class="cell">采购日期</div></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="data">
+              <td align="center"><div class="cell">{{ 1 }}</div></td>
+              <td align="center"><div class="cell">{{ data. tagTypeName}}</div></td>
+              <td align="center"><div class="cell">{{ data. number}}</div></td>
+              <td align="center"><div class="cell">{{ data. amount}}</div></td>
+              <td align="center"><div class="cell">{{ data. buyerName}}</div></td>
+              <td align="center"><div class="cell">{{ data. formatDataTime}}</div></td>
+            </tr>
+            <tr>
+              <td><div class="cell"></div></td>
+              <td><div class="cell"></div></td>
+              <td><div class="cell"></div></td>
+              <td><div class="cell"></div></td>
+              <td><div class="cell"></div></td>
+              <td><div class="cell"></div></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="flex-1 fit-size order-table-footer" style="padding:0 40px;">
+        <label>制单人：</label>
+        <div></div>
+
+        <label>日期：</label>
+        <div></div>
+
+        <label>需求单位物资部门（签章）：</label>
+        <div></div>
+
+        <label>日期：</label>
+        <div></div>
+
+        <label>签收人：</label>
+        <div></div>
+
+        <label>日期：</label>
+        <div></div>
+
+        <label>现场交接人：</label>
+        <div></div>
+
+        <label>日期：</label>
+        <div></div>
+      </div>
+    </pdf-exporter>
+
+    <template #footer>
+      <div class="flex center dialog-footer">
+        <el-button
+          @click="onCloseBtnClick"
+        >关闭</el-button>
+
+        <el-button
+          type="primary"
+          @click="onExportPdfBtnClick"
+        >导出</el-button>
+
+        <el-button
+          type="success"
+          @click="onPrintBtnClick"
+        >打印</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import BasePage from '@@/utils/BasePage'
+
+import VueBarcode from 'vue-barcode'
+
+export default {
+  name: 'DialogTagPurchaseOrderExport',
+  extends: BasePage,
+  components: {
+    VueBarcode
+  },
+  data: () => ({
+    visible: false,
+    data: null
+  }),
+  methods: {
+    open (data) {
+      this.data = data
+      this.visible = true
+    },
+    async onExportPdfBtnClick () {
+      const { data } = this
+      await this.$refs.pdfExporter.export(`标签采购订单_${data.orderNo}_${data.buyerName}`)
+      this.close()
+    },
+    close () {
+      this.visible = false
+    },
+    onCloseBtnClick () {
+      this.close()
+    },
+    onPrintBtnClick () {
+      this.$refs.pdfExporter.print()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.order-table-footer {
+  display: grid;
+  grid-template-columns: repeat(4, max-content auto);
+}
+</style>

src/components/LogoImageView.vue

@@ -0,0 +1,11 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'LogoImageView'
+}
+</script>
+
+<style lang="scss"></style>

src/components/PdfExporter.vue

@@ -1,18 +1,28 @@
 <template>
-  <div><slot /></div>
+  <div :id="id"><slot /></div>
 </template>
 
 <script>
 import html2canvas from 'html2canvas'
 import JsPDF from 'jspdf'
+import printJS from 'print-js'
 
 export default {
   name: 'PdfExporter',
+  props: {
+    id: {
+      type: String
+    }
+  },
   methods: {
-    async export (exportName) {
+    async getImgData () {
       const wrapperEl = this.$el
       const canvas = await html2canvas(wrapperEl)
       const imgData = canvas.toDataURL('image/png')
+      return imgData
+    },
+    async getPDFDoc () {
+      const imgData = await this.getImgData()
       const doc = new JsPDF({
         orientation: 'l',
         unit: 'px',
@@ -22,7 +32,20 @@ export default {
       const pdfWidth = doc.internal.pageSize.getWidth()
       const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
       doc.addImage(imgData, 'PNG', 0, 30, pdfWidth, pdfHeight)
+      return doc
+    },
+    async export (exportName) {
+      const doc = await this.getPDFDoc()
       doc.save(`${exportName}.pdf`)
+    },
+    async print () {
+      const imgData = await this.getImgData()
+      printJS({
+        printable: imgData,
+        type: 'image',
+        header: false,
+        headerStyle: 'display:none'
+      })
     }
   }
 }

src/mock/index.js

@@ -1,5 +1,5 @@
 import Mock from 'mockjs'
-// import TagApplyState from '@@/entries/TagApplyState'
+import TagApplyState from '@@/entries/TagApplyState'
 import TagType from '@@/entries/TagType'
 import TagPurchaseState from '@@/entries/TagPurchaseState'
 import Provider from '@@/entries/Provider'
@@ -7,36 +7,36 @@ import Constant from '@/utils/Constant'
 
 const API_BASE_PATH = Constant.REQUEST_PREFIX
 
-// Mock.mock(`${API_BASE_PATH}/tag/apply/state/list`, 'post', {
-//   type: 'success',
-//   data: [
-//     new TagApplyState(0, '待支付'),
-//     new TagApplyState(1, '待发货'),
-//     new TagApplyState(2, '已发货')
-//   ]
-// })
+Mock.mock(`${API_BASE_PATH}/tag/apply/state/list`, 'post', {
+  type: 'success',
+  data: [
+    new TagApplyState(0, '待支付'),
+    new TagApplyState(1, '待发货'),
+    new TagApplyState(2, '已发货')
+  ]
+})
 
-// Mock.mock(/\/tag\/apply\/page/, 'post', {
-//   type: 'success',
-//   data: {
-//     'count|10-40': 1,
-//     'list|1-20': [{
-//       'id|1-20': 1,
-//       dataTime: '2024/01/01 00:00:00',
-//       orderNo: '123456',
-//       expectedReceiptDate: '2024/01/02 00:00:00',
-//       'providerName|1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
-//       'tagTypeName|1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
-//       number: 123,
-//       'amount|1-100.1-2': 30,
-//       'tagApplyStateId|0-2': 0,
-//       operatorName: '操作员',
-//       applicantName: '申领人',
-//       'unitPrice|1-100.1-2': 10,
-//       createTime: '2024/01/01 00:00:00'
-//     }]
-//   }
-// })
+Mock.mock(/\/tag\/apply\/page/, 'post', {
+  type: 'success',
+  data: {
+    'count|10-40': 1,
+    'list|1-20': [{
+      'id|1-20': 1,
+      dataTime: '2024/01/01 00:00:00',
+      orderNo: '123456',
+      expectedReceiptDate: '2024/01/02 00:00:00',
+      'providerName|1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
+      'tagTypeName|1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
+      number: 123,
+      'amount|1-100.1-2': 30,
+      'tagApplyStateId|0-2': 0,
+      operatorName: '操作员',
+      applicantName: '申领人',
+      'unitPrice|1-100.1-2': 10,
+      createTime: '2024/01/01 00:00:00'
+    }]
+  }
+})
 
 Mock.mock(`${API_BASE_PATH}/provider/list`, 'post', {
   type: 'success',

src/views/TagApply.vue

@@ -201,7 +201,7 @@
     :api="$$api.importData"
     @imported="onSaved"
   ></dialog-import>
-  <dialog-order-export ref="orderExportDialog"></dialog-order-export>
+  <dialog-tag-apply-order-export ref="orderExportDialog"></dialog-tag-apply-order-export>
 </div>
 </template>
 

src/views/TagPurchase.vue

@@ -54,6 +54,16 @@
             @click="onOpenEditorBtnClick"
           >新建采购</el-button>
 
+          <el-button
+            :disabled="!selectedData"
+            icon="el-icon-download"
+            plain
+            type="primary"
+            size="small"
+            class="custom-plain-button"
+            @click="onExportOrderBtnClick"
+          >导出采购</el-button>
+
           <el-button
             :disabled="selectedList.length === 0"
             plain
@@ -76,6 +86,7 @@
             size="small"
             class="custom-el-table-style"
             @selection-change="onSelectionChange"
+            @row-click="onRowClick"
           >
             <el-table-column
               type="selection"
@@ -175,6 +186,8 @@
       :optionGroup="optionGroup"
       @saved="loadList"
     ></dialog-tag-purchase>
+
+    <dialog-tag-purchase-order-export ref="orderExportDialog"></dialog-tag-purchase-order-export>
   </div>
 </template>
 
@@ -197,6 +210,9 @@ export default {
           this.loadList()
         }
       }).catch(console.error).finally(() => {})
+    },
+    onExportOrderBtnClick () {
+      this.$refs.orderExportDialog.open(this.selectedData)
     }
   }
 }