【修改】 bug

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "clipboard": "^2.0.8",
+    "concurrent-tasks": "^1.0.7",
     "core-js": "3.6.5",
     "echarts": "^5.1.1",
     "element-ui": "2.13.2",
@@ -29,8 +30,9 @@
     "print-js": "^1.6.0",
     "screenfull": "^4.2.0",
     "vue": "2.6.10",
+    "vue-ls": "^4.0.0",
     "vue-pdf": "^4.3.0",
-    "vue-plugin-hiprint": "^0.0.28",
+    "vue-plugin-hiprint": "^0.0.17",
     "vue-print-nb": "^1.7.5",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.6",
@@ -52,6 +54,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "6.2.2",
     "html-webpack-plugin": "3.2.0",
+    "less-loader": "^6.1.1",
     "mockjs": "1.0.1-beta3",
     "runjs": "4.3.2",
     "sass": "1.26.8",
@@ -60,7 +63,9 @@
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
-    "vue-template-compiler": "2.6.10"
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue-template-compiler": "2.6.10",
+    "webpack-cli": "^4.9.1"
   },
   "browserslist": [
     "> 1%",

src/utils/pdf.js

@@ -0,0 +1,100 @@
+import html2canvas from "html2canvas";
+
+import jsPDF from "jspdf";
+
+export const downloadPDF = page => {
+    html2canvas(page).then(function (canvas) {
+        canvas2PDF(canvas);
+
+    });
+
+};
+
+const canvas2PDF = canvas => {
+    let contentWidth = canvas.width;
+
+    let contentHeight = canvas.height;
+
+    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+
+    let imgWidth = 595.28;
+
+    let imgHeight = 592.28 / contentWidth * contentHeight;
+
+    //let imgHeight = 700/contentWidth * contentHeight;
+
+    //一页pdf显示html页面生成的canvas高度;
+
+    var pageHeight = contentWidth / 592.28 * 841.89;
+
+    let totalHeight = contentHeight;
+
+    // 第一个参数： l：横向  p：纵向
+
+    // 第二个参数：测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
+
+    let pdf = new jsPDF("p", "pt");
+
+    let position = 0;
+
+    //   pdf.addImage(
+
+    //     canvas.toDataURL("image/jpeg", 1.0),
+
+    //     "JPEG",
+
+    //     0,
+
+    //     0,
+
+    //     imgWidth,
+
+    //     imgHeight
+
+    //   );
+
+    if (totalHeight < pageHeight) {
+        pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), 'JPEG', 0, 0, imgWidth, imgHeight);
+
+    } else {    
+
+        while (totalHeight > 0) {
+            pdf.addImage( canvas.toDataURL("image/jpeg", 1.0), 'JPEG', 0, position, imgWidth, imgHeight)
+
+            totalHeight -= pageHeight;
+
+            position -= 841.89;
+
+            //避免添加空白页
+
+            if (totalHeight > 0) {
+                pdf.addPage();
+
+            }
+
+        }
+
+    }
+
+    // pdf.addImage(
+
+    //     canvas.toDataURL("image/jpeg", 1.0),
+
+    //     "JPEG",
+
+    //     0,
+
+    //     position,
+
+    //     imgWidth,
+
+    //     imgHeight
+
+    // );
+
+
+ 
+
+    pdf.save("导出.pdf");
+
+};

src/utils/print.js

@@ -0,0 +1,163 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+    if (!(this instanceof Print)) return new Print(dom, options);
+  
+    this.options = this.extend({
+      'noPrint': '.no-print'
+    }, options);
+  
+    if ((typeof dom) === "string") {
+      this.dom = document.querySelector(dom);
+    } else {
+      this.isDOM(dom)
+      this.dom = this.isDOM(dom) ? dom : dom.$el;
+    }
+  
+    this.init();
+  };
+  Print.prototype = {
+    init: function () {
+      var content = this.getStyle() + this.getHtml();
+      this.writeIframe(content);
+    },
+    extend: function (obj, obj2) {
+      for (var k in obj2) {
+        obj[k] = obj2[k];
+      }
+      return obj;
+    },
+  
+    getStyle: function () {
+      var str = "",
+        styles = document.querySelectorAll('style,link');
+      for (var i = 0; i < styles.length; i++) {
+        str += styles[i].outerHTML;
+      }
+      str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+  
+      return str;
+    },
+  
+    getHtml: function () {
+      var inputs = document.querySelectorAll('input');
+      var textareas = document.querySelectorAll('textarea');
+      var selects = document.querySelectorAll('select');
+  
+      for (var k = 0; k < inputs.length; k++) {
+        if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+          if (inputs[k].checked == true) {
+            inputs[k].setAttribute('checked', "checked")
+          } else {
+            inputs[k].removeAttribute('checked')
+          }
+        } else if (inputs[k].type == "text") {
+          inputs[k].setAttribute('value', inputs[k].value)
+        } else {
+          inputs[k].setAttribute('value', inputs[k].value)
+        }
+      }
+  
+      for (var k2 = 0; k2 < textareas.length; k2++) {
+        if (textareas[k2].type == 'textarea') {
+          textareas[k2].innerHTML = textareas[k2].value
+        }
+      }
+  
+      for (var k3 = 0; k3 < selects.length; k3++) {
+        if (selects[k3].type == 'select-one') {
+          var child = selects[k3].children;
+          for (var i in child) {
+            if (child[i].tagName == 'OPTION') {
+              if (child[i].selected == true) {
+                child[i].setAttribute('selected', "selected")
+              } else {
+                child[i].removeAttribute('selected')
+              }
+            }
+          }
+        }
+      }
+      // 包裹要打印的元素
+      // fix: https://github.com/xyl66/vuePlugs_printjs/issues/36
+      let outerHTML = this.wrapperRefDom(this.dom).outerHTML
+      return outerHTML;
+    },
+    // 向父级元素循环，包裹当前需要打印的元素
+    // 防止根级别开头的 css 选择器不生效
+    wrapperRefDom: function (refDom) {
+      let prevDom = null
+      let currDom = refDom
+      // 判断当前元素是否在 body 中，不在文档中则直接返回该节点
+      if (!this.isInBody(currDom)) return currDom
+  
+      while (currDom) {
+        if (prevDom) {
+          let element = currDom.cloneNode(false)
+          element.appendChild(prevDom)
+          prevDom = element
+        } else {
+          prevDom = currDom.cloneNode(true)
+        }
+  
+        currDom = currDom.parentElement
+      }
+  
+      return prevDom
+    },
+  
+    writeIframe: function (content) {
+      var w, doc, iframe = document.createElement('iframe'),
+        f = document.body.appendChild(iframe);
+      iframe.id = "myIframe";
+      //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+      iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+      w = f.contentWindow || f.contentDocument;
+      doc = f.contentDocument || f.contentWindow.document;
+      doc.open();
+      doc.write(content);
+      doc.close();
+      var _this = this
+      iframe.onload = function(){
+        _this.toPrint(w);
+        setTimeout(function () {
+          document.body.removeChild(iframe)
+        }, 100)
+      }
+    },
+  
+    toPrint: function (frameWindow) {
+      try {
+        setTimeout(function () {
+          frameWindow.focus();
+          try {
+            if (!frameWindow.document.execCommand('print', false, null)) {
+              frameWindow.print();
+            }
+          } catch (e) {
+            frameWindow.print();
+          }
+          frameWindow.close();
+        }, 10);
+      } catch (err) {
+        console.log('err', err);
+      }
+    },
+    // 检查一个元素是否是 body 元素的后代元素且非 body 元素本身
+    isInBody: function (node) {
+      return (node === document.body) ? false : document.body.contains(node);
+    },
+    isDOM: (typeof HTMLElement === 'object') ?
+      function (obj) {
+        return obj instanceof HTMLElement;
+      } :
+      function (obj) {
+        return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+      }
+  };
+  const MyPlugin = {}
+  MyPlugin.install = function (Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$print = Print
+  }
+  export default MyPlugin

src/views/supply/deliver/components/design/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+      <a-button type="primary" icon="eye" @click="preView">
+        预览
+      </a-button>
+    <print-preview ref="preView"/>
+  </div>
+</template>
+
+<script>
+import {disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
+// disAutoConnect();
+
+let hiprintTemplate;
+import panel from './panel'
+import printData from './print-data'
+import printPreview from './preview'
+
+export default {
+  name: "printDesign",
+  components: {},
+  data() {
+    return {
+      
+    }
+  },
+
+  methods: {
+    preView() {
+     
+    },
+   
+  }
+}
+</script>
+
+<style  scoped>
+  td {
+    border:none !important;
+  }
+.drag_item_box {
+  height: 100%;
+  padding: 6px;
+}
+
+.drag_item_box > div {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drag_item_box > div > a {
+  text-align: center;
+  text-decoration-line: none;
+}
+
+.drag_item_box > div > a > span {
+  font-size: 28px;
+}
+
+.drag_item_box > div > a > p {
+  margin: 0;
+}
+
+.drag_item_title {
+  font-size: 16px;
+  padding: 12px 6px 0 6px;
+  font-weight: bold;
+}
+
+
+.card-design {
+  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+</style>

src/views/supply/deliver/components/design/panel.js

@@ -0,0 +1,311 @@
+
+export default {
+  "panels": [{
+    "index": 0,
+    "height": 140,
+    "width": 241,
+    "printElements": [{
+      "options": {
+        "left": 0,
+        "top": 20,
+        "height": 27,
+        "width": 656,
+        "field": "company",
+        "fontSize": 19,
+        "fontWeight": "600",
+        "fontFamily": '黑体',
+        "textAlign": "center",
+        "lineHeight": 26
+      }, "printElementType": { "title": "", "type": "text" }
+    }, {
+      "options": {
+        "left": 40,
+        "top": 50,
+        "height": 13,
+        "width": 328,
+        "fontSize": 13,
+        "title": "经销商编码",
+        "fontFamily": '黑体',
+        "field": "customerNumber",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    }, {
+      "options": {
+        "left": 348,
+        "top": 50,
+        "height": 13,
+        "width": 328,
+        "fontSize": 13,
+        "title": "打印日期",
+        "fontFamily": '黑体',
+        "field": "nowDate",
+        "testData": "",
+        "color": "#000",
+
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+      , {
+      "options": {
+        "left": 40,
+        "top": 70,
+        "height": 13,
+        "width": 328,
+        "fontSize": 13,
+        "title": "经销商",
+        "fontFamily": '黑体',
+        "field": "customerName",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    }, {
+      "options": {
+        "left": 348,
+        "top": 70,
+        "height": 13,
+        "width": 328,
+        "fontSize": 13,
+        "title": "仓库",
+        "fontFamily": '黑体',
+        "field": "correspondName",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+    , {
+      "options": {
+        "left": 40,
+        "top": 90,
+        "height": 13,
+        "width": 328,
+        "fontSize": 13,
+        "title": "备注",
+        "fontFamily": '黑体',
+        "field": "correspondName",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+    {
+      "options": {
+        "left": 15,
+        "top": 115,
+        "height": 381,
+        "width": 656,
+        "fontSize": 13,
+        "field": "table",
+        "fontFamily": '黑体',
+        "lineHeight": 16,
+        "tableFooterRepeat": "",
+        "columns": [[
+          {
+            "title": "出库单号",
+            "field": "salesId",
+            "width": 40,
+            "align": "center",
+            "colspan": 1,
+            "rowspan": 1,
+            "fontSize": 13,
+
+          }, {
+            "title": "发货单号",
+            "field": "invoiceId",
+            "width": 45,
+            "align": "center",
+            "colspan": 1,
+            "rowspan": 1,
+            "fontSize": 13,
+
+
+          }
+          , {
+            "title": "发货日期",
+            "field": "id",
+            "width": 50,
+            "align": "center",
+            "colspan": 1,
+            "rowspan": 1,
+            "fontSize": 13,
+
+
+          }
+          , {
+            "title": "订单号",
+            "field": "enginOrderType",
+            "width": 40,
+            "align": "center",
+            "colspan": 1,
+            "rowspan": 1,
+            "fontSize": 13,
+
+
+          }
+          , {
+            "title": "存货名称",
+            "field": "materialName",
+            "width": 40,
+            "align": "center",
+            "colspan": 1,
+            "rowspan": 1,
+            "fontSize": 13,
+
+
+          }, {
+            "title": "规格型号",
+            "field": "specification",
+            "width": 100,
+            "align": "center",
+            "colspan": 1,
+            "rowspan": 1,
+            "fontSize": 13,
+
+
+          }
+          , {
+            "title": "数量",
+            "field": "refundableQty",
+            "width": 23,
+            "align": "center",
+            "colspan": 1,
+            "rowspan": 1,
+            "fontSize": 13,
+
+          }
+          // , {
+          //   "title": "订单备注",
+          //   "field": "headerRemark",
+          //   "width": 40,
+          //   "align": "center",
+          //   "colspan": 1,
+          //   "rowspan": 1,
+          //   "fontSize": 13,
+          // }
+          
+          , 
+          
+          {
+            "title": "备注说明",
+            "field": "pjxh1Text",
+            "width": 60,
+            "align": "center",
+            "colspan": 2,
+            "rowspan": 1,
+            "fontSize": 13,
+          }]]
+      }, "printElementType": {
+        "title": "表格", "type": "table",
+        editable: true,
+        columnDisplayEditable: true,//列显示是否能编辑
+        columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+        columnTitleEditable: true,//列标题是否能编辑
+        columnResizable: true, //列宽是否能调整
+        columnAlignEditable: true,//列对齐是否调整
+        isEnableEditField: true, //编辑字段
+        isEnableContextMenu: true, //开启右键菜单 默认true
+        isEnableInsertRow: true, //插入行
+        isEnableDeleteRow: true, //删除行
+        isEnableInsertColumn: true, //插入列
+        isEnableDeleteColumn: true, //删除列
+        isEnableMergeCell: true, //合并单元格
+      }
+
+    },
+      , {
+      "options": {
+        "left": 40,
+        "top": 343,
+        "height": 13,
+        "width": 218,
+        "fontSize": 13,
+        "title": "退货人",
+        "fontFamily": '黑体',
+        "field": "",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+    {
+      "options": {
+        
+        "left": 40,
+        "top": 365,
+        "height": 13,
+        "width": 218,
+        "fontSize": 13,
+        "title": "打单",
+        "fontFamily": '黑体',
+        "field": "createBy",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+    {
+      "options": {
+        "left": 238,
+        "top": 365,
+        "height": 13,
+        "width": 218,
+        "fontSize": 13,
+        "title": "提单",
+        "fontFamily": '黑体',
+        "field": "",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+    {
+      "options": {
+        "left": 238,
+        "top": 343,
+        "height": 13,
+        "width": 218,
+        "fontSize": 13,
+        "title": "联系方式",
+        "fontFamily": '黑体',
+        "field": "",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+    {
+      "options": {
+        "left": 463,
+        "top": 343,
+        "height": 13,
+        "width": 218,
+        "fontSize": 13,
+        "title": "车辆",
+        "fontFamily": '黑体',
+        "field": "",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    },
+    {
+      "options": {
+        "left": 463,
+        "top": 365,
+        "height": 13,
+        "width": 218,
+        "fontSize": 13,
+        "title": "仓库",
+        "fontFamily": '黑体',
+        "field": "",
+        "testData": "",
+        "color": "#000",
+        "textAlign": "left"
+      }, "printElementType": { "title": "", "type": "text" }
+    }],
+
+    "paperNumberLeft": 0,
+    "paperNumberTop": 0
+  }]
+}

src/views/supply/deliver/components/design/preview.vue

@@ -0,0 +1,202 @@
+<template>
+  <el-dialog :visible="visible" :maskClosable="false"
+           @cancel="hideModal" :width="350+'mm'">
+    <div :spinning="spinning" style="min-height: 100px">
+      <div id="preview_content" ref="printDom">
+       
+      </div>
+    </div>
+    <template slot="title">
+      <div>
+        <!-- <div style="margin-right: 20px">打印预览</div> -->
+        <el-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</el-button>
+        <el-button type="primary" icon="printer" @click.stop="toPdf">pdf</el-button>
+      </div>
+    </template>
+    <template slot="footer">
+      <el-button key="close" type="info" @click="hideModal">
+        关闭
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+  import {downloadPDF} from '@/utils/pdf'
+  import {addPrint} from './print-data'
+export default {
+  name: "printPreview",
+  props: {},
+  data() {
+    return {
+      visible: false,
+      spinning: true,
+      waitShowPrinter: false,
+      // 纸张宽 mm
+      width: 0,
+      // 模板
+      hiprintTemplate: {},
+      // 数据
+      printData: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    handleExport() {
+      downloadPDF(this.$refs.printDom);
+
+   },
+    hideModal() {
+      this.visible = false
+    },
+    show(hiprintTemplate, printData, width = '210') {
+      this.visible = true
+      this.spinning = true
+      this.width = width
+      this.hiprintTemplate = hiprintTemplate
+      this.printData = printData
+      setTimeout(() => {
+        // eslint-disable-next-line no-undef
+        $('#preview_content').html(hiprintTemplate.getHtml(printData))
+        this.spinning = false
+      }, 500)
+    },
+    print() {
+      this.waitShowPrinter = true
+      
+      this.hiprintTemplate.print(this.printData, {}, {
+        // styleHandler: () => {
+        //   // 这里拼接成放html->head标签内的css/style
+        //   // 1.例如：使用hiprin官网的样式
+        //   let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">'
+        //   // 2.重写样式：所有文本红色
+        //   css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
+        //   return css
+        // },
+        callback: () => {
+          console.log('callback')
+          addPrint()
+          this.waitShowPrinter = false
+        }
+      })
+    },
+    toPdf() {
+      downloadPDF(this.$refs.printDom);
+      this.hiprintTemplate.toPdf({}, '打印预览');
+    },
+  }
+}
+
+</script>
+<style scoped>
+
+::v-deep .el-dialog__body{
+  padding: 0;
+}
+::v-deep table{
+  /* height: 240px !important; */
+}
+::v-deep tr{
+  height: 40px !important;
+}
+::v-deep .hiprint-printPaper{
+  margin:  0 auto;
+}
+::v-deep tr td{
+  border:0 !important;
+  /* width: 911px !important;
+    height: 529px !important; */
+}
+::v-deep .hiprint-paperNumber{
+  display: none;
+}
+.ant-modal-body {
+  padding: 0px;
+}
+
+.ant-modal-content {
+  margin-bottom: 24px;
+ 
+}
+
+@media print {
+
+  td {
+    border:none !important;
+  }
+.drag_item_box {
+  height: 100%;
+  padding: 6px;
+}
+
+.drag_item_box > div {
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drag_item_box > div > a {
+  text-align: center;
+  text-decoration-line: none;
+}
+
+.drag_item_box > div > a > span {
+  font-size: 28px;
+}
+
+.drag_item_box > div > a > p {
+  margin: 0;
+}
+
+.drag_item_title {
+  font-size: 16px;
+  padding: 12px 6px 0 6px;
+  font-weight: bold;
+}
+
+
+.card-design {
+  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
+  ::v-deep .el-dialog__body{
+  padding: 0;
+}
+::v-deep table{
+  height: 240px !important;
+}
+::v-deep tr{
+  height: 40px !important;
+}
+::v-deep .hiprint-printPaper{
+  margin:  0 auto;
+}
+::v-deep tr td{
+  border:0 !important;
+  /* width: 911px !important;
+    height: 529px !important; */
+}
+::v-deep .hiprint-paperNumber{
+  display: none;
+}
+.ant-modal-body {
+  padding: 0px;
+}
+
+.ant-modal-content {
+  margin-bottom: 24px;
+ 
+}
+}
+
+</style>

src/views/supply/deliver/components/design/print-data.js

@@ -0,0 +1,112 @@
+import { getDeliverDetail } from '@/api/supply/deliver'
+import { addPrints } from '@/api/supply/pickup'
+import { getCompanyList } from '@/api/user'
+    
+    const detailArr = []
+    let detailData = []
+    let company = ''
+  // 获取详情]]]
+  getCompanyLists() 
+ function  getDetail(ids) {
+    let newIds =[]
+    newIds =ids
+    for (let i = 0; i < newIds.length; i++) {
+
+      getDeliverDetail({ id: newIds[i].id }).then(res => {
+        detailData = res.data
+        const item = res.data
+        const table = []
+      
+        item.invoicePickBeans.length=5
+        item.invoicePickBeans.forEach(e => {
+          table.push({
+              salesId:e.salesId,
+              invoiceId:e.invoiceId,
+              id:e.id,
+              enginOrderType:e.enginOrderType =='HOME' || e.enginOrderType =='TRADE'? e.enginOrderNo :e.mainOrderId ,
+              materialName:e.materialName  || '',
+              specification:e.specification || '',
+              refundableQty:100,
+              // headerRemark:e.headerRemark,
+              pjxh1Text:e.pjxh1Text || ''
+            })
+        });
+     
+        // table.push({},{},{},{},{})
+        console.log(company);
+        detailArr.push({
+            type:item.type,
+            company:item.type === 2 ? `${company}销售退货单`:`${company}销售发货单`,
+            pickOrderWater:item.pickOrderWater, 
+            customerNumber:item.customerNumber,
+            nowDate:nowDate(),
+            customerName:item.customerName || '',
+            correspondName:item.correspondName || '',
+            createBy:item.createBy,
+            table
+        })
+     })
+    }
+
+  }
+    console.log(detailArr);
+ 
+  function nowDate() {
+    var date = new Date();
+    var seperator1 = "-";
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var strDate = date.getDate();
+    if (month >= 1 && month <= 9) {
+        month = "0" + month;
+    }
+    if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+    }
+    var currentdate = year + seperator1 + month + seperator1 + strDate;
+    return currentdate;
+  }
+
+
+  function getCompanyLists() {
+    getCompanyList().then(res => {
+      company = res.data ? res.data[0].companyName : ''
+    
+    })
+    return company
+  }
+ 
+ // 添加次数
+ function  addPrint() {
+ 
+  const ids = detailData.map(item => {
+    if (item.invoicePickBeans && item.invoicePickBeans.length) {
+      for (let index = 0; index < item.invoicePickBeans.length; index++) {
+        const element = item.invoicePickBeans[index];
+        return item.invoiceOrderId || element.invoiceOrderId || element.id
+      }
+    } else {
+      return item.invoiceOrderId || item.id
+    }
+
+  })
+
+  // console.log(document.execCommand('print'),'4545');
+  addPrints({ ids: ids.join(',') }).then(res => {
+    console.log('chenggong ');
+    // this.$successMsg('提交成功');
+    // this.$parent.getList()
+  })
+}
+
+
+
+ const myData =  detailArr
+
+
+ export {
+    getDetail ,getCompanyLists,
+    myData,
+    detailArr,
+    addPrint
+}

src/views/supply/deliver/components/sum_print.vue

@@ -6,20 +6,18 @@
       </el-radio-group>
     </div> -->
 
-    <div id="printMe" ref="printDom">
+    <div id="printMe">
       <template v-for="(item, i) in detailArr">
         <PrintCommon v-if="currentType === 0" :key="i" :detail-data="item" :company="company" />
-        <!-- <PrintFoshan v-if="currentType === 1" :key="i" :detail-data="item" :company="company" />
+        <PrintFoshan v-if="currentType === 1" :key="i" :detail-data="item" :company="company" />
         <PrintGuangzhou v-if="currentType === 2" :key="i" :detail-data="item" :company="company" />
-        <PrintShaoguan v-if="currentType === 3" :key="i" :detail-data="item" :company="company" /> -->
+        <PrintShaoguan v-if="currentType === 3" :key="i" :detail-data="item" :company="company" />
       </template>
     </div>
 
     <div class="page-footer">
       <div class="footer">
-        <!-- <el-button v-print="printObj" type="primary" icon="el-icon-printer">打 印</el-button> -->
-         <el-button @click="handleExport" type="primary" icon="el-icon-printer">打 印</el-button>
-
+        <el-button v-print="printObj" type="primary" icon="el-icon-printer">打 印</el-button>
         <el-button @click="goBack">关 闭</el-button>
       </div>
     </div>
@@ -29,8 +27,6 @@
 
 <script>
 import print from 'vue-print-nb'
-import html2canvas from "html2canvas"
-import {downloadPDF} from '@/utils/pdf'
 import { getDeliverDetail } from '@/api/supply/deliver'
 import { addPrints } from '@/api/supply/pickup'
 import { getCompanyList } from '@/api/user'
@@ -83,50 +79,12 @@ export default {
   },
 
   methods: {
-    handleExport() {
-      downloadPDF(this.$refs.printDom);
-
-   },
-    toImg() {
-        window.pageYoffset = 0;
-        document.documentElement.scrollTop = 0;
-        document.body.scrollTop = 0;
-        // 先获取你要转换为img的dom节点
-        var node =this.$refs.printDom //传入的id名称
-        var width = node.offsetWidth; //dom宽
-        var height = node.offsetHeight; //dom高
-        var scale = 3; //放大倍数 这个相当于清晰度 调大一点更清晰一点
-        html2canvas(node, {
-          width: width,
-          heigth: height,
-          backgroundColor: "#ffffff", //背景颜色 为null是透明
-          dpi: window.devicePixelRatio * 3, //按屏幕像素比增加像素
-          scale: scale,
-          X: 0,
-          Y: 0,
-          scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
-          scrollY: -10,
-          useCORS: true, //是否使用CORS从服务器加载图像 !!!
-          allowTaint: true, //是否允许跨域图像污染画布  !!!
-        }).then((canvas) => {
-          // console.log("canvas", canvas);
-          var url = canvas.toDataURL(); //这里上面不设值cors会报错
-          var a = document.createElement("a"); //创建一个a标签 用来下载
-          a.download = "名"; //设置下载的图片名称
-          var event = new MouseEvent("click"); //增加一个点击事件
-          this.dataURL = url;
-			//如果需要下载的话就加上这两句
-			    a.href = url;//此处的url为base64格式的图片资源
-	        a.dispatchEvent(event); //触发a的单击事件 即可完成下载
-
-        });
-    },
     // 返回列表
     goBack() {
       this.$emit('backListFormDetail')
     },
     changeType() {
-        window.print
+
     },
 
     // 获取详情
@@ -142,186 +100,7 @@ export default {
         this.company = res.data ? res.data[0].companyName : ''
       })
     },
-    toPrint(){
-      // console.log();
-      // window.onload = function(){
-      //   console.log(8888);
-      //   this.$print(this.$refs.printDom) 
-      // }
-    
-      
-//     var iframe = document.createElement('Iframe');
-//     iframe.style.display = 'none';
-//     document.body.appendChild(iframe);
-//     var doc = iframe.contentWindow.document;
-//     doc.write(`<style>
-//       @media print {
-
-// // 1 毫米 [mm] = 3,779 527 559 055 1 像素 [px]
-// //  241mm = ~911px
-// //  140mm = ~529px
-// .detail-container {
-//   width: 911px !important;
-//   height: 529px !important;
-//   margin: auto;
-//   font-size: 16px !important;
- 
-//   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
-//   // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
-//   color: #000 !important;
-
-// .top-container {
-//   margin: 20px;
-// }
-
-// }
-// .detail-container {
-//   width: 100%;
-//   height: 100%;
- 
-// }
-// .print-page {
-//   margin: 20px 0;
-//   // min-height: 1020px;
-//   page-break-after: always;
-// }
-// .print-title {
-//   text-align: center;
-//   .title1 {
-//     font-size: 22px;
-//     margin-bottom: 15px;
-//   }
-// }
-// .print-form-1 {
-//   padding-left: 10px;
- 
-// }
-// .el-row{
-//   display: flex;
-// }
-// .print-form-1  .item {
-//     display: flex;
-//     padding-right: 10px;
-//     .label {
-//       height: 32px;
-//       display: flex;
-//       align-items: center;
-//       box-sizing: border-box;
-//       font-size: 14.5px;
-//       color: #333333;
-//       flex-shrink: 0;
-//     }
-  
-//   }
-// .print-form-1   .value {
-//       flex: 1;
-//       height: 32px;
-//       display: flex;
-//       align-items: center;
-//       box-sizing: border-box;
-//       font-size: 14.5px;
-//       color: #333333;
-      
-//     }
-// .print-form-1   input {
-//         border: none;
-//         padding: 0;
-//         font-size: 14.5px;
-//       }
-// .print-table-1    .el-row {
-//   font-size: 14.5px;
-//     margin-left: 0 !important;
-//     margin-right: 0 !important;
-//     border: 1px solid #EBEEF5;
-//     border-right: none;
-//   }
-  
-
-//   .head .el-col {
-//       padding-right: 0 !important;
-//       display: flex;
-//       height: 32px;
-//       align-items: center;
-//       font-size: 14.5px;
-//     }
-// .body  .el-col {
-//   font-size: 14.5px;
-//       padding-right: 0 !important;
-//       display: flex;
-//       height: 32px;
-//       align-items: center;
-//       word-break: break-all;
-//     }
-// .foot {
-//     color: #333333;
-    
-//   }
-// .el-row {
-//   font-size: 14.5px;
-//       border-top: none;
-//     }
-    
-// .el-col {
-//       padding: 0;
-//       display: flex;
-//       height: 32px;
-//       align-items: center;
-//       word-break: break-all;
-//     }
-// .print-form-2 {
-//   font-size: 14.5px;
-//   padding-left: 10px;
- 
-// }
-// .item {
-//   font-size: 14.5px;
-//     display: flex;
-//     padding-right: 10px;
-    
-    
-//   }
-// .label {
-//   font-size: 14.5px;
-//       height: 32px;
-//       display: flex;
-//       align-items: center;
-//       box-sizing: border-box;
-//       font-size: 14.5px;
-//       color: #333333;
-//       flex-shrink: 0;
-//     }
-// .value {
-//   font-size: 14.5px;
-//       flex: 1;
-//       height: 32px;
-//       display: flex;
-//       align-items: center;
-//       box-sizing: border-box;
-//       font-size: 14.5px;
-//       color: #333333;
-      
-//     }
-//         .el-input input {
-//         height: 30px;
-//         border: none;
-//         border-bottom: 1px solid #EBEEF5;
-//         padding: 0 10px;
-//         font-size: 14.5px;
-//       }
-//     }
 
-//       </style>
-// `)
-//     doc.write(this.$refs.printDom.innerHTML);
-//     doc.close();
-//     iframe.contentWindow.print();
-
-
-        // this.$Print.toPrint()
-        
-        // this.$print(this.$refs.printDom, {}); 
-        console.log();
-      },
     // 添加次数
     addPrint() {
       const ids = this.detailArr.map(item => {
@@ -335,7 +114,7 @@ export default {
         }
 
       })
-     
+
       // console.log(document.execCommand('print'),'4545');
       addPrints({ ids: ids.join(',') }).then(res => {
         // this.$successMsg('提交成功');
@@ -355,18 +134,13 @@ body {
 <style scoped lang="scss">
 @media print {
 
-  @page {
-    size:portrait !important;
-  }
-
   // 1 毫米 [mm] = 3,779 527 559 055 1 像素 [px]
   //  241mm = ~911px
   //  140mm = ~529px
   .detail-container {
-    width: 241mm  !important;
-    height: 140mm !important;
+    width: 911px !important;
+    height: 529px !important;
     margin: auto;
-    font-size: 14.5px !important;
     // position: fixed;
     // top: 0;
     // left: 0;
@@ -377,152 +151,6 @@ body {
     color: #000 !important;
   }
 
-  ::v-deep .detail-container {
-    width: 100%;
-    height: 100%;
-
-
-    font-weight: 300;
-  }
-  .print-page {
-    margin: 20px 0;
-    font-family: '微软黑雅';
-    font-weight: bold;
-    font-size: 15px !important;
-    // min-height: 1020px;
-    page-break-after: always;
-  }
-  .print-title {
-    text-align: center;
-    .title1 {
-      font-size: 22px;
-      margin-bottom: 15px;
-    }
-  }
-  .print-form-1 {
-    padding-left: 10px;
-    .item {
-      display: flex;
-      padding-right: 10px;
-      .label {
-        height: 32px;
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        font-size: 13px;
-        color: #333333;
-        flex-shrink: 0;
-      }
-      .value {
-        flex: 1;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        font-size: 13px;
-        color: #333333;
-        input {
-          border: none;
-          padding: 0;
-        }
-      }
-    }
-  }
-  .print-table-1 {
-    font-size: 12px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    border-right: 1px solid #EBEEF5;
-    .el-row {
-      margin-left: 0 !important;
-      margin-right: 0 !important;
-      border: 1px solid #EBEEF5;
-      border-right: none;
-    }
-    .div {
-      padding-top: 14px;
-      padding-bottom: 14px;
-      // border-right: 1px solid #EBEEF5;
-    }
-    .head {
-      color: #000;
-      // font-weight: bold; 
-      display: flex;
-      div{
-        margin: 20px;
-      }
-      .div {
-        padding-right: 0 !important;
-        display: flex;
-        height: 32px;
-        align-items: center;
-      }
-    }
-    .body {
-      display: flex;
-      color: #333333;
-      div{
-        margin: 20px;
-      }
-      .el-row {
-        border-top: none;
-      }
-      .div {
-        padding-right: 0 !important;
-        display: flex;
-        height: 32px;
-        align-items: center;
-        word-break: break-all;
-      }
-    }
-    .foot {
-      color: #333333;
-      .el-row {
-        border-top: none;
-      }
-      .div {
-        padding: 0;
-        display: flex;
-        height: 32px;
-        align-items: center;
-        word-break: break-all;
-      }
-    }
-  }
-
-  .print-form-2 {
-    padding-left: 10px;
-    .item {
-      display: flex;
-      padding-right: 10px;
-      .label {
-        height: 32px;
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        font-size: 13px;
-        color: #333333;
-        flex-shrink: 0;
-      }
-      .value {
-        flex: 1;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        font-size: 13px;
-        color: #333333;
-        ::v-deep .el-input input {
-          height: 30px;
-          border: none;
-          border-bottom: 1px solid #EBEEF5;
-          padding: 0 10px;
-          font-size: 13px;
-        }
-      }
-    }
-  }
-
   .top-container {
     margin: 20px;
   }

src/views/supply/deliver/sum_list.vue

@@ -276,14 +276,18 @@
         </div>
       </div>
     </div>
+    <!-- <pdf  ref="myPdfComponent" src="http://zfiresupply.oss-cn-hangzhou.aliyuncs.com/uploadfile/1661914838175.pdf?Expires=1661918438&OSSAccessKeyId=LTAI4GK1q4mnpCFbonMd1pji&Signature=Y0eM%2FuG8Q88rPr0pp%2BDkM5QC%2FDc%3D">
 
-    <PrintTest v-if="isShowPrint" />
+    </pdf> -->
+       <print-preview ref="preView"/>
+    <!-- <PrintTest v-if="isShowPrint" /> -->
 <!--    <SumPrint :listItem="queryItem" v-if="isShowPrint" @backListFormDetail="backList" />-->
 
   </div>
 </template>
 
 <script>
+  import pdf from 'vue-pdf'
 import { getSumList } from '@/api/supply/deliver'
 import { getCategoryList, getSalesmanList } from '@/api/common'
 import SumPrint from '@/views/supply/deliver/components/sum_print'
@@ -298,6 +302,7 @@ import printPreview from './components/design/preview.vue'
 export default {
   components: {
     SumPrint,
+    pdf,
     printPreview
   },
   data() {
@@ -329,9 +334,9 @@ export default {
       queryItem: {},
       isShowPrint: false,
       curPaper: {
-        type: 'A4',
-        width: 210,
-        height: 296.6
+        type: 'A5' ,
+        width: 500,
+        height: 147.6
       },
       paperTypes: {
         'A3': {
@@ -359,7 +364,9 @@ export default {
           height: 175.6
         }
       },
-     
+      scaleValue: 1,
+      scaleMax: 5,
+      scaleMin: 0.5
     }
   },
 
@@ -550,11 +557,12 @@ export default {
     // 点击打印
     toPrint() {
 
-
       this.queryItem = this.tableSelection;
       console.log(this.tableSelection);
       getDetail(this.tableSelection)
-      this.isShowPrint = true;
+      console.log(333);
+      // this.isShowPrint = true;
+      // this.$refs.myPdfComponent.print()
       this.$refs.preView.show(hiprintTemplate, myData)
     },
 

vue.config.js

@@ -1,7 +1,7 @@
 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
-
+let webpack = require('webpack')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
@@ -51,6 +51,17 @@ module.exports = {
     before: require('./mock/mock-server.js')
   },
   configureWebpack: {
+    plugins: [
+      new webpack.ProvidePlugin({
+      }),
+    ],
+    resolve: {
+      alias: {
+      },
+      extensions: ['*', '.js', '.vue', '.json']
+    },
+  },
+  configureWebpack: {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
     name: name,