打印问题

2024-09-20 06:56:07 +08:00 · 2019-08-01 20:05:41 +08:00 · 2019-08-01 20:05:41 +08:00 · 25757b73f7
parent cc9175ebff
commit 25757b73f7
4 changed files with 140 additions and 4 deletions
--- a/package.json
+++ b/package.json
@ -50,6 +50,7 @@
    "mockjs": "1.0.1-beta3",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
+    "print-js": "^1.0.61",
    "screenfull": "3.3.3",
    "showdown": "1.8.6",
    "simplemde": "1.11.2",
--- a/src/main.js
+++ b/src/main.js
@ -21,7 +21,7 @@ import './icons' // icon
 import './errorLog' // error log
 import './permission' // permission control
 import './mock' // simulation data
-import Print from 'vue-print-nb'
+// import Print from 'vue-print-nb'
 import * as filters from './filters' // global filters

 Vue.use(Element, {
@ -29,7 +29,7 @@ Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
 })

-Vue.use(Print)
+// Vue.use(Print)

 Vue.use(VueElementExtends)

--- a/src/views/SaleOut/components/DetailList.vue
+++ b/src/views/SaleOut/components/DetailList.vue
@ -4,7 +4,7 @@
      <!--基本信息-->
      <el-card class="box-card" style="margin-top: 63px" shadow="never">
        <h2 ref="geren" class="form-name" style="font-size: 16px;color: #606266;margin-top: -5px;">基本信息</h2>
-        <button v-print="'#printTest'" class="print" style="font-size: 13px;background: white;">打印</button>
+        <button style="font-size: 13px;background: white;" @click="printdata">打印</button>
        <div class="container" style="margin-top: 37px">
          <el-form :model="personalForm" :inline="true" status-icon class="demo-ruleForm" label-width="130px">
            <el-row>
@ -389,6 +389,7 @@

 <script>
 import { productlist } from '@/api/public'
+import printJS from 'print-js'
 export default {
  filters: {
    sourceTypeFilter(status) {
@ -506,6 +507,32 @@ export default {
    }
  },
  methods: {
+    printdata() {
+      const arr = [
+        {
+          name: '小明',
+          sex: '男'
+        },
+        {
+          name: '小红',
+          sex: '女'
+        }
+      ]
+
+      printJS({
+        printable: arr,
+        type: 'json',
+        properties: [
+          { field: 'name', displayName: '姓名', columnSize: `50%` },
+          { field: 'sex', displayName: '性别', columnSize: `50%` }
+        ],
+        header: `<p class="custom-p"> 名单 </p>`,
+        style: '.custom-p { padding:5px 0; font-size:12px; }',
+        gridHeaderStyle: 'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:center;',
+        gridStyle: 'font-size:12px; padding:3px; border:1px solid; text-align:left;',
+        repeatTableHeader: true
+      })
+    },
    // 计划金额
    planMoney(row) {
      row.planMoney = row.basicPrice * row.planQuantity
--- a/src/views/StockOrder/components/DetailList.vue
+++ b/src/views/StockOrder/components/DetailList.vue
@ -4,7 +4,7 @@
      <!--基本信息-->
      <el-card class="box-card" style="margin-top: 63px" shadow="never">
        <h2 ref="geren" class="form-name" style="font-size: 16px;color: #606266;margin-top: -5px;">基本信息</h2>
-        <button v-print="'#printTest'" style="font-size: 10px;">打印</button>
+        <button style="font-size: 10px;" @click="printdata">打印</button>
        <button style="font-size: 10px;margin-left: 10px" @click="handleMyReceipt2()">复制单据</button>
        <div class="container" style="margin-top: 37px">
          <el-form :model="personalForm" :inline="true" status-icon class="demo-ruleForm" label-width="100px" style="margin-left: 30px;">
@ -283,6 +283,7 @@

 <script>
 import { searchstockArrival } from '@/api/StockArrival'
+import printJS from 'print-js'
 export default {
  filters: {
    isVatFilter(status) {
@ -383,6 +384,113 @@ export default {
    }
  },
  methods: {
+    cutnull(data) {
+      for (const x in data) {
+        if (data[x] === null) { // 如果是null 把直接内容转为 ''
+          data[x] = ''
+        } else {
+          if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
+            data[x] = data[x].map(z => {
+              return this.cutnull(z)
+            })
+          }
+          if (typeof (data[x]) === 'object') { // 是json 递归继续处理
+            data[x] = this.cutnull(data[x])
+          }
+        }
+      }
+      return data
+    },
+    printdata() {
+      const arr = this.cutnull(this.list2)
+      for (const i in arr) {
+        arr[i].step = Number(i) + 1
+      }
+      const handleperson = this.reviewList.map(item => {
+        if (item.actualStepHandler) {
+          return item.actualStepHandler
+        }
+      }).join(',')
+      console.log(handleperson)
+      printJS({
+        printable: arr,
+        type: 'json',
+        properties: [
+          { field: 'step', displayName: '行号', columnSize: `100px` },
+          { field: 'productCode', displayName: '物料代码', columnSize: `100px` },
+          { field: 'productName', displayName: '物料名称', columnSize: `100px` },
+          { field: 'productType', displayName: '规格型号', columnSize: `100px` },
+          { field: 'unit', displayName: '单位', columnSize: `100px` },
+          { field: 'stockQuantity', displayName: '数量', columnSize: `100px` },
+          { field: 'includeTaxPrice', displayName: '单价', columnSize: `100px` },
+          { field: 'includeTaxMoney', displayName: '金额', columnSize: `100px` },
+          { field: 'deliveryDate', displayName: '交货日期', columnSize: `100px` },
+          { field: 'remarks', displayName: '备注', columnSize: `100px` }
+        ],
+        header: `<div class="pringtitle">
+                    <div class="custom-p"> 江苏新视窗国际贸易有限公司 </div>
+                      <br>
+                      <div class="ordername">采购订单</div>
+                        <br>
+                        <div class="line1"></div>
+                        <div class="line2"></div>
+                        <div class="supplier">
+                        <div class="item">
+                        <div class="itemname">供应商：</div>
+                        <div class="itemcontent">${this.personalForm.supplierName}</div>
+                        </div>
+                        <div class="item">
+                         <div class="itemname">日期：</div>
+                        <div class="itemcontent">${this.personalForm.orderDate}</div>
+                          </div>
+                        <div class="item">
+                         <div class="itemname">编号：</div>
+                        <div class="itemcontent">${this.personalForm.orderNumber}</div>
+                          </div>
+                          </div>
+                        </div>`,
+        bottom: `<div>
+                  <div class="allmoney" style="display: flex;justify-content: space-around;width: 99%;height: 40px;align-items: center;border:1px solid;border-top: none;padding-right: 1%">
+                  <div class="allmoneyname" style="margin-right: 10%">合计</div>
+                  <div class="allmoneynum" style="width: 10%;border-left: 1px solid; border-right: 1px solid;height: 40px;display: flex;align-items: center;justify-content: center;">${this.personalForm.allIncludeTaxMoney}</div>
+                  </div>
+                  <div class="printbottom" style="display: flex;align-items: center;justify-content: center;width: 100%;margin-top: 20px">
+                    <div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
+                        <div class="ceshi">审核：</div>
+                        <div class="bottomname" >${handleperson}</div>
+                    </div>
+                    <div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
+                        <div class="ceshi">部门：</div>
+                        <div class="bottomname">${this.personalForm.deptName}</div>
+                    </div>
+                    <div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
+                        <div class="ceshi">业务员：</div>
+                        <div class="bottomname">${this.personalForm.stockPersonName}</div>
+                    </div>
+                    <div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
+                        <div class="ceshi">制单：</div>
+                        <div class="bottomname">${this.personalForm.createPersonName}</div>
+                    </div>
+                   </div>
+                  </div>`,
+        bottomStyle: '.printbottom: { display: flex;margin-top: 20px}',
+        style: '.custom-p {font-size:20px;text-align: center; }' +
+          ' .ordername {text-align: center; font-size:25px;letter-spacing:15px}' +
+          '.pringtitle { line-height: 20px; margin-bottom: 10px }' +
+          '.line1 { width: 200px; border: 1px solid #000; margin: 0 auto }' +
+          '.line2 {width: 200px; border: 2px dashed #000; margin: 3px auto }' +
+          '.supplier {display: flex;justify-content: center; align-items: center;margin-top: 10px}' +
+          '.item { width: 33%; justify-content: center; align-items: center; display: flex}' +
+          '.item2 { width: 50%; justify-content: center; align-items: center; display: flex}' +
+          '.itemname2 { width: 20% }' +
+          '.itemcontent2 {width: 80%}' +
+          '.itemname { width: 40% }' +
+          '.itemcontent {width: 80%}',
+        gridHeaderStyle: 'font-size:12px; padding:3px; border:1px solid; color: #000; text-align:center;',
+        gridStyle: 'font-size:12px; padding:3px; border:1px solid; text-align:center;',
+        repeatTableHeader: true
+      })
+    },
    handleMyReceipt2() {
      console.log(this.detaildata)
      this.$store.dispatch('getempcontract', this.detaildata)