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;
        width: 210mm;
        font-size: 12px;
        line-height: 1.0;
        font-family: '宋体';
        z-index: -1;
      "
    >
      <img
        :src="src"
        :alt="company"
        style="position: absolute; top: 10px; left: 10px; z-index: 1"
      />
      <div style="position: absolute; top: 0; left: 0; z-index: 2">
        <h1>湖南德荣医疗集团 - 采购订单</h1>
        <p style="display: flex">
          <span style="width: 60%">甲方（购货方）：{{ params.puOrgName }}</span>
          <span style="width: 40%">签订日期：{{ params.billDate }}</span>
        </p>
        <p style="display: flex">
          <span style="width: 60%">订单编号：{{ params.code }}</span>
          <span style="width: 40%">采购部门：{{ params.puDeptName }}</span>
        </p>
        <p style="display: flex">
          <span style="width: 60%">采购员：{{ params.buyerName }}</span>
          <span style="width: 40%"> 采购项目： </span>
        </p>
        <p style="display: flex">
          <span style="width: 60%">E-mail：</span>
          <span style="width: 40%">联系方式：{{ params.contactsPhone }}</span>
        </p>
        <P style="color: #ff4949"> 甲方收票地址：{{ params.address }} </P>
        <div style="border-bottom: 1px dashed black"></div>
        <p>乙方（供货方）：{{ params.supplierName }}</p>
        <p>ATTN：</p>
        <p>E-MAIL：</p>
        <p>收货地址：</p>
        <p>收货联系人：</p>

        <el-table
          show-summary
          :summary-method="getSummaries"
          :data="params.orderItemPrintList"
          style="width: 100%; font-size: 12px"
        >
          <el-table-column prop="materialCode" 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">
          </el-table-column>
          <el-table-column
            prop="manufacturerName"
            label="生产厂家"
            width="auto"
          >
          </el-table-column>
          <el-table-column prop="unitName" label="单位" width="auto">
          </el-table-column>
          <el-table-column prop="qty" label="数量" width="auto">
          </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>
        <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>
      </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 {
      visible: false,
      disabled: false,
      company: "湖南德荣医疗器械有限公司",
      print: {
        id: "PurchaseOrderPdf",
        popTitle: "配置页眉标题", // 打印配置页上方的标题
        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;
    },
  },
  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() {},
  destroyed() {},
};
</script>
<style scoped></style>