Merge branch 'dev_新疆_大罗素马铃薯new' of http://114.132.189.42:9002/r/product-inv...

huminmin

2026-06-01 a563ea879ef5fb6897e76d2df661e465dce2ab9b

 src/views/productionManagement/productionOrder/components/PrintMaterialRequisition.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,225 @@
<template>
  <div class="print-container"
       id="print-requisition">
    <div class="print-content">
      <div class="bill-title">生产领料单</div>
      <div class="info-grid">
        <div class="info-row">
          <div class="info-item">
            <span class="label">创建日期：</span>
            <span class="value">{{ formatDate(orderRow?.createTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">领料单号：</span>
            <span class="value">{{ orderRow?.npsNo }}</span>
          </div>
          <div class="info-item">
            <span class="label">申请人：</span>
            <span class="value">{{ userName }}</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item"
               style="width: 50%;">
            <span class="label">产品名称/型号：</span>
            <span class="value">{{ orderRow?.productName }} / {{ orderRow?.model }}</span>
          </div>
          <div class="info-item"
               style="width: 25%;">
            <span class="label">生产数量：</span>
            <span class="value">{{ orderRow?.quantity }}</span>
          </div>
          <div class="info-item"
               style="width: 25%;">
            <span class="label">需求日期：</span>
            <span class="value">{{ formatDate(orderRow?.planCompleteTime) }}</span>
          </div>
        </div>
      </div>
      <table class="material-table">
        <thead>
          <tr>
            <th width="50">序号</th>
            <th>工序名称</th>
            <th>规格/名称</th>
            <th>批号</th>
            <th width="80">需求数量</th>
            <th width="80">领料数量</th>
            <th width="60">单位</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in materialList"
              :key="index">
            <td align="center">{{ index + 1 }}</td>
            <td>{{ item.operationName || '-' }}</td>
            <td>{{ item.materialName || item.productName }} {{ item.materialModel || item.model }}</td>
            <td>{{ item.batchNo || '-' }}</td>
            <td align="right">{{ item.demandedQuantity }}</td>
            <td align="right">{{ item.pickQuantity || item.pickQty || 0 }}</td>
            <td align="center">{{ item.unit }}</td>
          </tr>
        </tbody>
      </table>
      <div class="print-footer">
        <div class="footer-item">领料：________________</div>
        <div class="footer-item">发料：________________</div>
        <div class="footer-item">审核：________________</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import dayjs from "dayjs";
  import useUserStore from "@/store/modules/user";
  import { computed } from "vue";

  const props = defineProps({
    orderRow: {
      type: Object,
      default: () => ({}),
    },
    materialList: {
      type: Array,
      default: () => [],
    },
  });

  const userStore = useUserStore();
  const userName = computed(() => userStore.nickName || userStore.name || "-");

  const formatDate = date => {
    return date ? dayjs(date).format("YYYYå¹´MM月DD日") : "-";
  };
</script>

<style lang="scss">
  /* å±å¹•æ˜¾ç¤ºæ ·å¼ */
  .print-requisition-wrapper {
    display: none;
  }

  /* æ‰“印专用样式 */
  @media print {
    @page {
      size: landscape;
      margin: 10mm;
    }

    /* åŸºç¡€æ‰“印设置 */
    html,
    body {
      visibility: hidden;
      height: auto !important;
      overflow: visible !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100%;
    }

    /* æ˜¾å¼æ˜¾ç¤ºæ‰“印容器及其所有子元素 */
    .print-requisition-wrapper,
    .print-requisition-wrapper * {
      visibility: visible !important;
    }

    /* ç¡®ä¿æ‰“印容器占据整个页面并移除绝对定位干扰 */
    .print-requisition-wrapper {
      display: block !important;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: auto;
      background: white;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 99999;
    }

    .print-container {
      width: 100% !important;
      padding: 0 10mm; /* ä½¿ç”¨å¯¹ç§°çš„左右内边距确保居中 */
      box-sizing: border-box;
      height: auto;
      overflow: visible;
      color: #000;
      font-family: "SimSun", "STSong", serif;
      page-break-inside: avoid;
      display: block;
      .print-content {
        width: 100%;
        text-align: center;
      }
      .bill-title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 5px;
        text-decoration: underline;
      }

      .info-grid {
        margin-bottom: 10px;
        font-size: 14px;

        .info-row {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 8px;

          .info-item {
            width: 33.33%;
            display: flex;
            align-items: flex-end;

            .label {
              font-weight: bold;
              white-space: nowrap;
            }
            .value {
              border-bottom: 1px solid #000;
              padding: 0 5px;
              flex: 1;
              min-height: 20px;
            }
          }
        }
      }

      .material-table {
        width: 100%;
        border-collapse: collapse;
        border: 2px solid #000;
        font-size: 13px;

        th,
        td {
          border: 1px solid #000 !important;
          padding: 6px 4px;
          height: 25px;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }

        th {
          background-color: #f2f2f2 !important;
          font-weight: bold;
        }
      }

      .print-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        padding: 0 10px;

        .footer-item {
          font-size: 14px;
        }
      }
    }
  }
</style>