kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoice/components/print-template-jsyp.vue

<template>
  <ele-modal
    title="出库单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="90%"
  >
    <div
      id="printSection"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <div>
        <div
          style="
            font-size: 20px;
            font-weight: 800;
            padding-right: 20px;
            width: 400px;
            margin: 0 auto;
          "
          >{{ this.groupName || '嘉实（湖南）医院科技有限公司' }}产品出库单</div
        >
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          margin-top: 10px;
        "
      >
        <span style="width: 39%">制单日期：{{ formData.createTime }}</span>
        <span style="width: 39%">发货日期：{{ outBound.createTime }}</span>
        <span style="width: 22%"
          >出库单号：{{ formData.printNo || outBound.bizNo }}</span
        >
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="width: 39%"
          >上市许可持有人：{{
            this.groupName || '嘉实（湖南）医院科技有限公司'
          }}</span
        >
        <span style="width: 39%"
          >地址：长沙高新开发区汇智中路179号金导园C区8栋</span
        >
        <span style="width: 22%">电话：0731-84221288</span>
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="width: 39%">受托生产企业：</span>
        <span style="width: 39%">地址：</span>
        <span style="width: 22%"></span>
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="width: 39%">购货单位：{{ formData.contactName }}</span>
        <span style="width: 39%">收货地址：{{ formData.receiveAddress }}</span>
        <span style="width: 22%"></span>
      </div>
      <table
        cellspacing="0"
        border
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
        "
      >
        <tbody>
          <tr align="center">
            <td style="padding: 5px"> 产品名称 </td>
            <td style="padding: 5px"> 规格 </td>
            <td style="padding: 5px"> 包装规格 </td>
            <td style="padding: 5px"> 剂型</td>
            <td style="padding: 5px"> 批准文号</td>
            <td style="padding: 5px"> 批号</td>
            <td style="padding: 5px"> 单位</td>
            <td style="padding: 5px"> 数量</td>
            <td style="padding: 5px"> 单价(元)</td>
            <td style="padding: 5px"> 金额(元)</td>
            <td style="padding: 5px"> 有效期</td>
            <td style="padding: 5px"> 备注</td>
          </tr>

          <tr
            align="center"
            v-for="(item, index) in outBound.outInDetailRecordRequestList"
          >
            <td style="padding: 5px"> {{ item.categoryName }} </td>
            <td style="padding: 5px">
              {{ item.specification }}
            </td>
            <td style="padding: 5px"> {{ item.packingSpecification }}</td>
            <td style="padding: 5px"> {{ item.categoryModel }}</td>
            <td style="padding: 5px"> {{ item.approvalNumber }}</td>
            <td style="padding: 5px"> {{ item.batchNo }}</td>
            <td style="padding: 5px"> {{ item.measureUnit }}</td>
            <td style="padding: 5px"> {{ item.measureQuantity }}</td>

            <td style="padding: 5px"> {{ item.singlePrice }}</td>
            <td style="padding: 5px">{{ item.totalPrice }} </td>
            <td style="padding: 5px"> {{ item.guaranteePeriodText }}</td>
            <td style="padding: 5px">{{ item.remark }} </td>
          </tr>

          <tr align="center">
            <td style="padding: 5px" colspan="7"> 合计 </td>
            <td style="padding: 5px"> {{ getTotal('measureQuantity') }}</td>
            <td style="padding: 5px"> {{ getTotal('singlePrice') }}</td>
            <td style="padding: 5px"> {{ getTotal('totalPrice') }} </td>
            <td style="padding: 5px"></td>
            <td style="padding: 5px"> </td>
          </tr>
        </tbody>
      </table>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
        "
      >
        <div style="flex: 1"> 开票员： </div>
        <div style="flex: 1"> 保管员： </div>
        <div style="flex: 1"> 复核: </div>
        <div style="flex: 1"> 发货员: </div>
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
        "
      >
        <div style="flex: 1"> </div>
        <div style="flex: 1"> 白联:开票留存 </div>
        <div style="flex: 1"> 红联:仓库留存 </div>
        <div style="flex: 1"> 蓝联:财务留存 </div>
        <div style="flex: 1"> 绿联/黄联:随货同行 </div>
      </div>
    </div>

    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getSendSaleOrderrecordDetailSplit } from '@/api/saleManage/saleordersendrecord';
  import { getInfoBySourceBizNoAll } from '@/api/wms';
  import { mapGetters } from 'vuex';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {
      groupName: ''
    },
    data() {
      return {
        checked: '',
        QRvisible: false,
        isPrintPrice: false,
        formData: {},
        outBound: {}
      };
    },

    methods: {
      async open(id) {
        this.formData = await getSendSaleOrderrecordDetailSplit(id);
        this.QRvisible = true;
        let dataArray = await getInfoBySourceBizNoAll(this.formData.docNo);
        this.outBound = JSON.parse(JSON.stringify(dataArray[0]));
        this.outBound['outInDetailRecordRequestList'] = [];

        dataArray.forEach((item) => {
          item.outInDetailList.forEach((val) => {
            if (val.outInDetailRecordRequestList.length) {
              val.outInDetailRecordRequestList.forEach((j) => {
                let data = this.formData.productList.find(
                  (product) => product.productCode == val.categoryCode
                );
                j['categoryName'] = val.categoryName;
                j['categoryModel'] = val.categoryModel;
                j['specification'] = val.specification;
                j['categoryCode'] = val.categoryCode;
                j['packingSpecification'] = val.extField?.packingSpecification;
                j['approvalNumber'] = val.extField?.approvalNumber;
                if (data) {
                  j['singlePrice'] = data.singlePrice;
                  j['totalPrice'] = j.measureQuantity * data.singlePrice;
                  j['remark'] = data.remark;
                  j['guaranteePeriodText'] = data.guaranteePeriod
                    ? data.guaranteePeriod +
                      (data.guaranteePeriodUnitName || '')
                    : '';
                }
              });
              this.outBound['outInDetailRecordRequestList'].push(
                ...val.outInDetailRecordRequestList
              );
            } else {
              this.outBound['outInDetailRecordRequestList'].push(val);
            }
          });
        });
      },
      getTotal(key) {
        let val = 0;
        this.outBound?.outInDetailRecordRequestList?.forEach((item) => {
          if (Number(item[key])) {
            val += Number(item[key]);
          }
        });
        return val;
      },
      close() {
        this.QRvisible = false;
      },

      print() {
        const printSection = document.getElementById('printSection');
        // 创建打印任务
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印预览</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      }
    }
  };
</script>

<style lang="scss"></style>