huminmin
3 天以前 6051d44a6612d23c0dd824d574ac461e34c21130
打印样式不重构
已修改1个文件
210 ■■■■■ 文件已修改
src/views/salesManagement/salesLedger/index.vue 210 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/salesManagement/salesLedger/index.vue
@@ -1498,6 +1498,9 @@
    // 创建一个新的打印窗口
    const printWindow = window.open('', '_blank', 'width=800,height=600');
    // 获取打印预览内容
    const previewContent = document.querySelector('.print-preview-content').innerHTML;
    // 构建打印内容
    let printContent = `
    <!DOCTYPE html>
@@ -1589,83 +1592,11 @@
        .total-value {
          font-weight: bold;
        }
        .footer-section {
          margin-top: auto;
        }
        .footer-row {
          display: flex;
          margin-bottom: 3px;
          line-height: 22px;
          justify-content: space-between;
        }
        .remarks-section {
          margin: 10px 0;
          .remark-item {
            display: flex;
            align-items: flex-start;
            .label {
              font-weight: bold;
              min-width: 30px;
              font-size: 14px;
              margin-right: 10px;
              white-space: nowrap;
            }
            .value {
              flex: 1;
              font-size: 14px;
              line-height: 1.4;
            }
          }
        }
        .sign-section {
          margin-top: 15px;
          .sign-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .sign-item {
              display: flex;
              align-items: center;
              width: 48%;
              .label {
                font-weight: bold;
                font-size: 14px;
                margin-right: 10px;
                white-space: nowrap;
              }
              .value {
                flex: 1;
                min-height: 30px;
                border-bottom: 1px solid #000;
                font-size: 14px;
              }
            }
          }
        }
        .footer-item {
          display: flex;
          margin-right: 20px;
        }
        .footer-item .label {
          font-weight: bold;
          min-width: 80px;
          font-size: 12px;
        }
        .footer-item .value {
          min-width: 80px;
          font-size: 12px;
        }
        .address-item .address-value {
          min-width: 200px;
        }
        @media print {
          body {
@@ -1675,7 +1606,6 @@
                     .print-page {
             margin: 0;
             padding: 10mm;
             /* padding-left: 20mm; */
             page-break-inside: avoid;
             page-break-after: always;
           }
@@ -1686,139 +1616,7 @@
      </style>
    </head>
    <body>
  `;
    // 为每条数据生成打印页面
    printData.value.forEach((item, index) => {
        printContent += `
      <div class="print-page">
        <div class="delivery-note">
          <div class="header">
              <div class="company-name">湖南鹏创电子有限公司</div>
              <div class="document-title">送货单</div>
          </div>
          <div class="info-section">
              <div class="info-row">
                <div>
                  <span class="label">客户名称:</span>
                  <span class="value">${item.customerName || ''}</span>
                </div>
                <div>
                  <span class="label">送货地址:</span>
                  <span class="value">${item.companyAddress || ''}</span>
                </div>
              </div>
              <div class="info-row">
                <div>
                  <span class="label">单据编号:</span>
                  <span class="value">${item.salesContractNo || ''}</span>
                </div>
                <div>
                  <span class="label">送货日期:</span>
                  <span class="value">${formatDate(null)}</span>
                </div>
                <div>
                  <span class="label">联系电话:</span>
                  <span class="value">${item.contactPhone || ''}</span>
                </div>
              </div>
            </div>
          <div class="info-section">
              <div class="info-row">
                <div>
                  <span class="label">联系方式:</span>
                  <span class="value"></span>
                </div>
                <div>
                  <span class="label">送货单位:</span>
                  <span class="value">湖南鹏创电子有限公司</span>
                </div>
                <div>
                  <span class="label">地址:</span>
                  <span class="value">湖南耒阳市创新创业园A1栋</span>
                </div>
              </div>
            </div>
          <span style="font-size: 16px;">货物详细信息:</span>
          <div class="table-section">
            <table class="product-table">
              <thead>
                <tr>
                  <th>序号</th>
                  <th>料号</th>
                  <th>品名/规格</th>
                  <th>单位</th>
                  <th>数量</th>
                  <th>订单号</th>
                </tr>
              </thead>
                  <tbody>
                ${item.products && item.products.length > 0 ?
                item.products.map((product, index) => `
                    <tr>
                      <td>${index + 1}</td>
                      <td>${product.materialCode || ''}</td>
                      <td>${product.productCategory || ''}/${product.specificationModel || ''}</td>
                      <td>${product.unit || ''}</td>
                      <td>${product.quantity || '0'}</td>
                      <td>${item.salesContractNo || ''}</td>
                    </tr>
                  `).join('') :
                '<tr><td colspan="6" style="text-align: center; color: #999;">暂无产品数据</td></tr>'
            }
              </tbody>
              <tfoot>
                <tr>
                  <td></td>
                  <td class="label">合计</td>
                  <td class="total-value"></td>
                  <td class="total-value"></td>
                  <td class="total-value">${getTotalQuantity(item.products) || '0'}</td>
                  <td class="total-value"></td>
                </tr>
              </tfoot>
            </table>
            <div style="width: 30px;">
              共四联存根回单客户仓库
            </div>
          </div>
          <div class="remarks-section">
            <div class="remark-item">
              <span class="label">备注:</span>
              <span class="value">贵公司在收货后请即刻核实数量及品质,若有异议,请在3日内提出,否则视为收妥。</span>
            </div>
          </div>
          <div class="sign-section">
            <div class="sign-row">
              <div class="sign-item">
                <span class="label">送货单位(签章):</span>
              </div>
              <div class="sign-item">
                <span class="label">收货单位:</span>
              </div>
            </div>
            <div class="sign-row">
              <div class="sign-item">
                <span class="label">送货人:</span>
              </div>
              <div class="sign-item">
                <span class="label">收货人:</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    `;
    });
    printContent += `
      ${previewContent}
    </body>
    </html>
  `;