kd-aiot-frontend-eom/src/views/purchasingManage/purchaseOrder/invoice/components/print-PurchaseOrder.vue

<template>
  <ele-modal
    title="采购单"
    :visible.sync="PurchaseOrdervisible"
    v-if="PurchaseOrdervisible"
    width="60%"
  >
    <div
      id="printSection"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
      "
    >
      <!-- 标题区域 -->
      <div style="text-align: center; font-size: 20px; font-weight: 800">
        {{ groupName}}
      </div>
      <div style="text-align: center; font-size: 18px">
        {{
          formData.createTime
            ? formData.createTime.substring(0, 7) + '月份采购单'
            : ''
        }}
      </div>

      <!-- 供应商、日期、编号行 -->
      <div
        style="
          display: flex;
          justify-content: space-between;
          width: 100%;
          margin: 8px 0;
        "
      >
        <span>供应商：{{ formData?.partbName || '' }}</span>
        <span
          >日期：{{
            formData.createTime ? formData.createTime.split(' ')[0] : ''
          }}</span
        >
        <span>编号：{{ formData?.orderNo || '' }}</span>
      </div>

      <!-- 合并后的唯一表格（基于原核心表格9列结构，用colspan适配后续内容） -->
      <table
        cellspacing="0"
        border="1"
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
          border-collapse: collapse;
        "
      >
        <tbody>
          <!-- 第一部分：核心采购物料表格（保持原9列结构） -->
          <!-- 表头 -->
          <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">单价(元/KG)</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 formData?.productList || []"
            :key="index"
          >
            <td style="padding: 5px">{{ index + 1 }}</td>
            <td style="padding: 5px">{{ item.productName || '' }}</td>
            <td style="padding: 5px">{{ item.specification || '' }}</td>
            <td style="padding: 5px">{{ item.purchaseUnit || '' }}</td>
            <td style="padding: 5px">{{ item.singlePrice || 0 }}</td>
            <td style="padding: 5px">{{ item.purchaseCount || 0 }}</td>
            <td style="padding: 5px">{{ item.totalPrice || 0 }}</td>
            <td style="padding: 5px">{{ item.deliveryDeadline || '' }}</td>
            <td style="padding: 5px">{{ item.remark || '' }}</td>
          </tr>

          <!-- 合计行 -->
          <tr align="center">
            <td style="padding: 5px" colspan="6">合计：</td>
            <td style="padding: 5px" colspan="3">{{
              formData?.totalAmount || '0.00'
            }}</td>
          </tr>

          <!-- 第二部分：供应商/采购单位信息（用colspan适配9列：5列+4列=9列，布局更均匀） -->
          <tr align="left"> <!-- 文字信息左对齐更易读 -->
            <td style="padding: 5px; vertical-align: top" colspan="5">
              供应商：{{ formData?.partbName || '' }}
            </td>
            <td style="padding: 5px; vertical-align: top" colspan="4">
              采购单位：{{ formData?.partaName || '' }}
            </td>
          </tr>
          <tr align="left">
            <td style="padding: 5px; vertical-align: top" colspan="5">
              供应商联系人：{{ formData?.partbLinkName || '' }}
            </td>
            <td style="padding: 5px; vertical-align: top" colspan="4">
              采购单位联系人：{{ formData?.partaLinkName || '' }}
            </td>
          </tr>
          <tr align="left">
            <td style="padding: 5px; vertical-align: top" colspan="5">
              供应商电话：{{ formData?.partbTel || '' }}
            </td>
            <td style="padding: 5px; vertical-align: top" colspan="4">
              采购单位电话：{{ formData?.partaTel || '' }}
            </td>
          </tr>
          <tr align="left">
            <td style="padding: 5px; vertical-align: top" colspan="5">
              供应商传真：{{ formData?.partbFax || '' }}
            </td>
            <td style="padding: 5px; vertical-align: top" colspan="4">
              采购单位传真：{{ formData?.partaFax || '' }}
            </td>
          </tr>
          <tr align="left">
            <td style="padding: 5px; vertical-align: top" colspan="5">
              备注：
            </td>
            <td style="padding: 5px; vertical-align: top" colspan="4">
              收货人：{{ formData?.makerName }} {{ formData?.partaTel || '' }}
            </td>
          </tr>

          <!-- 第三部分：核准/审核/作成（用colspan适配9列：3列+3列+3列=9列，均匀分布） -->
          <tr align="center">
            <td style="padding: 5px" colspan="3">核准：</td>
            <td style="padding: 5px" colspan="3">审核：</td>
            <td style="padding: 5px" colspan="3">作成：{{ formData?.makerName || '' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

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

<script>
import { getpurchaseorderDetail } from '@/api/purchasingManage/purchaseOrder';

export default {
  name: 'PurchaseOrderPrint',
  data() {
    return {
      PurchaseOrdervisible: false,
      formData: {
        productList: [],
        createTime: ''
      }
    };
  },
  props: {
    groupName: {
      type: String,
      default: '湖南万隆智能科技有限公司采购入库单'
    }
  },
  methods: {
    async open(id) {
      try {
        this.formData = await getpurchaseorderDetail(id);
        if (!Array.isArray(this.formData.productList)) {
          this.formData.productList = [];
        }
      } catch (error) {
        console.error('获取采购单详情失败：', error);
        this.formData = { productList: [], createTime: '' };
      } finally {
        this.PurchaseOrdervisible = true;
      }
    },
    close() {
      this.PurchaseOrdervisible = false;
    },
    print() {
      const printSection = document.getElementById('printSection');
      if (!printSection) return;

      const printWindow = window.open('', '_blank');
      if (!printWindow) {
        alert('请允许浏览器弹出窗口，以正常显示打印预览');
        return;
      }

      printWindow.document.open();
      // 打印样式确保合并后表格统一
      printWindow.document.write(`
        <html>
          <head>
            <title>采购单打印预览</title>
            <style>
              body { margin: 20px; font-family: "Microsoft YaHei", sans-serif; }
              table { 
                border-collapse: collapse; 
                width: 100%; 
                table-layout: fixed; 
                word-break: break-all; 
                word-wrap: break-word; 
                font-size: 12px;
              }
              td { padding: 5px; box-sizing: border-box; border: 1px solid #000; }
            </style>
          </head>
          <body>
            ${printSection.innerHTML}
          </body>
        </html>
      `);
      printWindow.document.close();

      printWindow.onload = function () {
        printWindow.print();
      };
    }
  }
};
</script>

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