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

<template>
  <div style="display: inline-block">
    <el-dropdown
      size="mini"
      :disabled="disabled"
      split-button
      placement="top-start"
      @command="onCommand"
      @click="visible = true"
    >
      <span v-print="print">
        <i class="el-icon-printer mr-1"></i>
        打 印
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-print="print" command="湖南德荣医疗器械有限公司">
          湖南德荣医疗器械有限公司
        </el-dropdown-item>
        <el-dropdown-item
          v-print="print"
          divided
          command="湖南德荣医疗健康产业有限公司"
        >
          湖南德荣医疗健康产业有限公司
        </el-dropdown-item>
        <el-dropdown-item
          v-print="print"
          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; -->
      <img
        ref="stamp"
        :src="src"
        :alt="company"
        style="
          width: 130px;
          height: 130px;
          position: absolute;
          top: 3px;
          left: 10px;
          z-index: 2;
        "
      />
      <div style="position: absolute; top: 0; left: 0; 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>
  </div>
</template>

<script>
import print from "vue-print-nb";
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,
    };
  },
  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;
    },
    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() {
      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 {
    //   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(() => {
      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>