【采购订单维护】打印：printJS（未完）

package.json

@@ -57,6 +57,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "lodash": "^4.17.21",
     "nprogress": "0.2.0",
+    "print-js": "^1.6.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/views/purchase/purchase-order/print/index copy.vue

@@ -0,0 +1,438 @@
+<template>
+  <div style="display: inline-block">
+    <el-dropdown
+      size="mini"
+      :disabled="disabled"
+      split-button
+      placement="top-start"
+      @command="onCommand"
+      @click="visible = true"
+    >
+      <span>
+        <i class="el-icon-printer mr-1"></i>
+        打 印
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="湖南德荣医疗器械有限公司">
+          湖南德荣医疗器械有限公司
+        </el-dropdown-item>
+        <el-dropdown-item divided command="湖南德荣医疗健康产业有限公司">
+          湖南德荣医疗健康产业有限公司
+        </el-dropdown-item>
+        <el-dropdown-item
+          divided
+          command="湖南德荣医疗器械物流配送服务有限公司"
+        >
+          湖南德荣医疗器械物流配送服务有限公司
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+
+    <div
+      id="PurchaseOrderPdf"
+      style="
+        position: relative;
+        font-size: 12px;
+        line-height: 1;
+        font-family: '宋体';
+        z-index: -1;
+      "
+    >
+      <!-- width: 210mm; -->
+      <el-row style="position: absolute; display: flex; flex-direction: column">
+        <el-col v-for="item in 2" class="print-content">
+          <div style="position: relative">
+            <img
+              ref="stamp"
+              :src="src"
+              :alt="company"
+              style="
+                width: 130px;
+                height: 130px;
+                position: absolute;
+                top: -5px;
+                left: 10px;
+                z-index: 0;
+              "
+            />
+            <div style="position: relative; z-index: 2">
+              <h1>湖南德荣医疗集团 - 采购订单</h1>
+              <p style="display: flex">
+                <span style="width: 50%"
+                  >甲方（购货方）：{{ params.puOrgName }}</span
+                >
+                <span style="width: 25%">订单编号：{{ params.code }}</span>
+                <span style="width: 25%">签订日期：{{ params.billDate }}</span>
+              </p>
+              <p style="display: flex">
+                <!-- <span style="width: 50%">采购部门：{{ params.puDeptName }}</span> -->
+                <span style="width: 50%"
+                  >甲方收票地址：湖南省长沙市开福区湘江北路一段91号德荣医疗物流园1栋14楼集采中心</span
+                >
+                <span style="width: 25%">采购员：{{ params.buyerName }}</span>
+                <!-- <span style="width: 25%">联系方式：{{ params.contactsPhone }}</span> -->
+                <span style="width: 25%">E-mail：{{ params.buyerEmail }}</span>
+              </p>
+              <div style="border-bottom: 1px dashed black"></div>
+              <p style="display: flex">
+                <span style="width: 50%"
+                  >乙方（供货方）：{{ params.supplierName }}</span
+                >
+                <span style="width: 25%"
+                  >ATTN：{{ params.supplierContactsName }}</span
+                >
+                <span style="width: 25%"
+                  >E-mail：{{ params.supplierContactsEmail }}</span
+                >
+              </p>
+              <p style="display: flex">
+                <span>甲方收货地址及联系人：{{ params.address }}</span>
+              </p>
+
+              <el-table
+                ref="printTable"
+                show-summary
+                :summary-method="getSummaries"
+                :data="params.orderItemPrintList"
+                style="width: 100%; font-size: 12px; margin-top: 5px"
+              >
+                <el-table-column
+                  prop="materialCode"
+                  label="物料编码"
+                  width="auto"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="materialManufacturersCode"
+                  label="厂家物料编码"
+                  width="auto"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="materialName"
+                  label="物料名称"
+                  width="auto"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="specification"
+                  label="规格/型号"
+                  width="auto"
+                >
+                  <template slot-scope="scope">
+                    {{ scope.row.specification + " " + scope.row.model }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="materialRemark"
+                  label="物料备注"
+                  width="auto"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="manufacturerName"
+                  label="生产厂家"
+                  width="auto"
+                >
+                </el-table-column>
+                <el-table-column prop="unitName" label="单位" width="60">
+                </el-table-column>
+                <el-table-column prop="qty" label="数量" width="60">
+                </el-table-column>
+                <el-table-column prop="taxPrice" label="含税单价" width="auto">
+                </el-table-column>
+                <el-table-column prop="money" label="价税合计" width="auto">
+                </el-table-column>
+                <el-table-column
+                  prop="registration"
+                  label="注册证号"
+                  width="auto"
+                >
+                </el-table-column>
+                <el-table-column
+                  prop="deliveryDate"
+                  label="交货日期"
+                  width="auto"
+                >
+                  <template slot-scope="scope">{{
+                    new Date(scope.row.deliveryDate).Format("yyyy-MM-dd")
+                  }}</template>
+                </el-table-column>
+              </el-table>
+              <p>
+                二、质量要求与技术标准：符合供方企业标准、所在行业标准、国家标准。
+              </p>
+              <p>
+                供方承诺若本订单上的货物发生质量问题，按双方签署的《质量保证协议》或其他双方签订的质保条约执行处理。
+              </p>
+              <p>三、交货要求：</p>
+              <p>
+                1．供货方在1个工作日内回复交期（若1个工作日内未回复，视同供货方默认同意接受交货日期）
+              </p>
+              <p>
+                2．常规产品7天内到货，订制产品按双方协议日期交期。交货时，以下纸质资料随货同行，资料所在箱号清晰易见：
+              </p>
+              <p>
+                （1）随货同行单。供货方提供给我公司的随货同行单需包括以下内容：德荣订单编码、供货单位、医疗器械名称、规格（型号）、生产企业、生产企业许可证号（或者备案凭证编号）、注册证号（或者备案凭证编号）、生产批号、有效期、数量、单位、单价、金额、储运条件、收货单位、收货地址、发货日期等内容，并加盖供货单位出库专用章。
+              </p>
+              <p>
+                （2）生产厂家同一批次产品的检验报告。（3）进口物资的报关单和检验检疫证明。
+              </p>
+              <p>
+                3.交货实际时间以供方货物实际到达需方指定地点的时间为准。如遇特殊情况需变更交货时间，供方应事先通知需方并征得需方同意
+              </p>
+              <p>
+                4.运输要求：供货方负责将货物运输到购货方指定地址，运输方式及费用由供货方负责（双方另有书面约定的除外）。发货后供货方提供运输单号给购货方。.需要专业冷链运输的产品，必须按照GSP要求严格执行冷链运输，全程温湿度必须在GSP冷链运输的管控范围内，随货同行的温湿度记录仪的冷链数据须在交付时可导出或打印。
+              </p>
+              <p>
+                四、验收标准：购货方收货后3日内按质量标准进行验收，若有不符应及时通知供货方，供货方应在3日内处理。
+              </p>
+              <p>
+                五、发票要求：供货方根据双方签定的格式合同约定的时间或是于发货后7个工作日内开具符合国家要求的可抵扣的增值税专用发票给购货方。
+              </p>
+              <p>六、结算方式：电汇/转账。</p>
+              <p>
+                七、违约责任：按《中国人民共和国合同法》执行，一方违约，违约方按货款总金额的5‰支付给守约方。
+              </p>
+              <p>
+                八、争议的解决：因履行本合同发生争议，由双方协商解决，协商不成应向长沙仲裁委员会申请仲裁解决。
+              </p>
+              <p>
+                九、本订单作为双方采购合同的有效组成附件，经各采购员发布确认后生效。供方应在接到订单后按采购合同约定的时间内向需方作出反馈，否则需方视为供方默认。
+              </p>
+              <p>
+                十、严禁行贿受贿等一切不合法不合规行为，采购方投诉渠道：电话15386455809；邮箱drpm@derom.com。
+              </p>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+// import print from "vue-print-nb";
+import printJS from "print-js";
+// import { PRINT } from "@/api/business/purchase/task";
+export default {
+  // directives: {
+  //   print,
+  // },
+  name: "",
+  components: {},
+  props: {
+    id: {
+      type: [String, Number],
+      require: true,
+    },
+    value: {
+      type: Object,
+      require: true,
+    },
+  },
+  data() {
+    console.log(this.value, "this.value");
+    return {
+      size: "mini",
+      visible: false,
+      disabled: false,
+      company: "湖南德荣医疗器械有限公司",
+      // print: {
+      //   id: "PurchaseOrderPdf",
+      //   popTitle: "&nbsp;", // 打印配置页上方的标题
+      //   extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+      //   preview: false, // 是否启动预览模式，默认是false
+      //   previewTitle: "预览的标题", // 打印预览的标题
+      //   previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
+      //   zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
+      //   previewBeforeOpenCallback() {
+      //     console.log("正在加载预览窗口！");
+      //     console.log(this);
+      //   }, // 预览窗口打开之前的callback
+      //   previewOpenCallback() {
+      //     console.log("已经加载完预览窗口，预览打开了！");
+      //   }, // 预览窗口打开时的callback
+      //   beforeOpenCallback() {
+      //     console.log("开始打印之前！");
+      //   }, // 开始打印之前的callback
+      //   openCallback() {
+      //     console.log("执行打印了！");
+      //   }, // 调用打印时的callback
+      //   closeCallback() {
+      //     console.log("关闭了打印工具！");
+      //   }, // 关闭打印的callback(无法区分确认or取消)
+      //   clickMounted() {
+      //     console.log("点击v-print绑定的按钮了！");
+      //   },
+      //   // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
+      //   // asyncUrl (reslove) {
+      //   //   setTimeout(() => {
+      //   //     reslove('http://localhost:8080/')
+      //   //   }, 2000)
+      //   // },
+      //   standard: "",
+      //   extarCss: "",
+      // },
+      // params: {},
+      // params: this.value,
+      contentHeight: [],
+    };
+  },
+  computed: {
+    src: {
+      get: function () {
+        return require(`./${this.company}.png`);
+      },
+      set: function () {},
+    },
+    params: {
+      get: function () {
+        return this.value;
+      },
+    },
+  },
+  watch: {},
+  methods: {
+    onCommand(prop) {
+      this.company = prop;
+      this.visible = true;
+      this.handlePrint();
+    },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        const { property } = column;
+        if (index === 0) {
+          sums[index] = "合计";
+          return;
+        }
+        if (property === "qty" || property === "money") {
+          const values = data.map((item) => Number(item[property]));
+          if (!values.every((value) => isNaN(value))) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+          }
+        }
+      });
+      return sums;
+    },
+    getValue() {
+      this.contentHeight = [];
+      const A4_HEIGHT = 842; //A4纸的高度为842mm
+      const printcontent = document.querySelectorAll(".print-content"); // 获取需要打印的内容元素
+      printcontent.forEach((item) => {
+        this.contentHeight.push(item.offsetHeight);
+      });
+      console.log(this.contentHeight, "this.contentHeight");
+      // const contentHeight = printcontent.offsetHeight; // 获取内容元素的高度
+      // const pagecount = Math.ceil(contentHeight / A4_HEIGHT); // 计算需要打印的页数
+      // const singlePageHeight = contentHeight / pagecount; // 计算单张A4纸的高度
+    },
+    handlePrint() {
+      console.log("新打印");
+      this.$nextTick(() => {
+        printJS({
+          printable: "PurchaseOrderPdf",
+          type: "html",
+          // style: style, // 亦可使用引入的外部css;
+          scanStyles: false,
+          targetStyles: ["*"], //重点  继承原来的样式，没有这个样式就是乱的
+        });
+      });
+    },
+  },
+  async created() {
+    // try {
+    //   this.disabled = true;
+    //   const { data, code } = await PRINT({ id: this.$props.id || 628 });
+    //   if (code === 200) {
+    //     this.params = data;
+    //     this.disabled = false;
+    //   }
+    // } catch (err) {
+    //   alert(err);
+    // } finally {
+    // }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // if (this.$refs.printTable.$el) {
+      //   let thead = this.$refs.printTable.$el.querySelector(
+      //     ".el-table__header-wrapper thead"
+      //   ); //找到dom节点
+      //   // let img = this.$refs.stamp.cloneNode(true);
+      //   let theadNew = thead.cloneNode(true);
+      //   this.$refs.printTable.$el
+      //     .querySelector(".el-table__body-wrapper table")
+      //     .appendChild(theadNew);
+      // }
+    });
+  },
+  destroyed() {},
+};
+</script>
+
+<style scope>
+/* .el-table >>> .el-table__body-wrapper table thead {
+  display: none;
+} */
+</style>
+<style lang="scss" media="print">
+// 去除打印的页眉页脚
+@page {
+  size: auto; /* auto is the initial value */
+  margin: 3mm; /* this affects the margin in the printer settings */
+}
+// 去除打印的页眉页脚
+
+@media print {
+  #PurchaseOrderPdf {
+    width: 100%;
+  }
+  p {
+    margin: 4px 0;
+  }
+  .el-table > .el-table__header-wrapper > .el-table__header > thead > tr > th,
+  .el-table
+    > .el-table__body-wrapper
+    > .el-table__body
+    > tbody
+    > .el-table__row
+    > td {
+    padding: 0;
+  }
+  table {
+    table-layout: auto !important;
+  }
+  .el-table__header,
+  .el-table__body,
+  .el-table__footer {
+    width: 100% !important;
+    color: #000 !important;
+  }
+  .el-table .cell,
+  .el-table th.el-table__cell > .cell {
+    line-height: 18px !important;
+  }
+  .el-table__footer-wrapper tbody td.el-table__cell,
+  .el-table__header-wrapper tbody td.el-table__cell,
+  .el-table th.el-table__cell > .cell {
+    color: #000 !important;
+  }
+
+  // .el-table > .el-table__header-wrapper {
+  //   display: none;
+  // }
+  // .el-table > .el-table__body-wrapper table thead {
+  //   display: table-header-group;
+  // }
+}
+</style>

src/views/purchase/purchase-order/print/index.vue

@@ -32,6 +32,7 @@
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
+
     <div
       id="PurchaseOrderPdf"
       style="
@@ -44,6 +45,7 @@
     >
       <!-- width: 210mm; -->
       <img
+        ref="stamp"
         :src="src"
         :alt="company"
         style="
@@ -88,6 +90,7 @@
         </p>
 
         <el-table
+          ref="printTable"
           show-summary
           :summary-method="getSummaries"
           :data="params.orderItemPrintList"
@@ -291,6 +294,13 @@ export default {
       });
       return sums;
     },
+    getValue() {
+      const A4_HEIGHT = 842; //A4纸的高度为842mm
+      const printcontent = document.getelementById("print-content"); // 获取需要打印的内容元素
+      const contentHeight = printcontent.offsetHeight; // 获取内容元素的高度
+      const pagecount = Math.ceil(contentHeight / A4_HEIGHT); // 计算需要打印的页数
+      const singlePageHeight = contentHeight / pagecount; // 计算单张A4纸的高度
+    },
   },
   async created() {
     // try {
@@ -305,10 +315,27 @@ export default {
     // } finally {
     // }
   },
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      let thead = this.$refs.printTable.$el.querySelector(
+        ".el-table__header-wrapper thead"
+      ); //找到dom节点
+      // let img = this.$refs.stamp.cloneNode(true);
+      let theadNew = thead.cloneNode(true);
+      this.$refs.printTable.$el
+        .querySelector(".el-table__body-wrapper table")
+        .appendChild(theadNew);
+    });
+  },
   destroyed() {},
 };
 </script>
+
+<style scope>
+.el-table >>> .el-table__body-wrapper table thead {
+  display: none;
+}
+</style>
 <style lang="scss" media="print">
 // 去除打印的页眉页脚
 @page {
@@ -351,5 +378,12 @@ export default {
   .el-table th.el-table__cell > .cell {
     color: #000 !important;
   }
+
+  .el-table > .el-table__header-wrapper {
+    display: none;
+  }
+  .el-table > .el-table__body-wrapper table thead {
+    display: table-header-group;
+  }
 }
 </style>