| | |
| | | 暂无打印数据 |
| | | </div> |
| | | <div v-else |
| | | style="text-align: center; padding: 10px; color: #666; font-size: 14px; background: #e8f4fd; margin-bottom: 10px;"> |
| | | style="text-align: center; padding: 10px; color: #666; font-size: 16px; background: #e8f4fd; margin-bottom: 10px;"> |
| | | 共 {{ printData.length }} 条数据待打印 |
| | | </div> |
| | | <div v-for="(item, index) in printData" :key="index" class="print-page"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <span style="font-size: 14px; margin-top: 5px;">货物详细信息:</span> |
| | | <span style="font-size: 16px; margin-top: 5px;">货物详细信息:</span> |
| | | <div class="table-section"> |
| | | <table class="product-table"> |
| | | <thead> |
| | |
| | | </tr> |
| | | <!-- 添加空白行以确保至少5行 --> |
| | | <tr v-for="n in Math.max(0, 5 - (item.products ? item.products.length : 0))" :key="'empty-' + n" style="height: 25px;"> |
| | | <td style="height: 25px;"></td> |
| | | <td style="height: 25px;"></td> |
| | | <td style="height: 25px;"></td> |
| | | <td style="height: 25px;"></td> |
| | | <td style="height: 25px;"></td> |
| | | <td style="height: 25px;"></td> |
| | | <td style="height: 25px;"></td> |
| | | <td style="height: 35px;"></td> |
| | | <td style="height: 35px;"></td> |
| | | <td style="height: 35px;"></td> |
| | | <td style="height: 35px;"></td> |
| | | <td style="height: 35px;"></td> |
| | | <td style="height: 35px;"></td> |
| | | <td style="height: 35px;"></td> |
| | | </tr> |
| | | </tbody> |
| | | <tfoot> |
| | |
| | | </tfoot> |
| | | </table> |
| | | |
| | | <div style="width: 40px; display: flex; flex-direction: column; gap: 2px;"> |
| | | <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">共四联</div> |
| | | <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">存根</div> |
| | | <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">客户</div> |
| | | <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">记账</div> |
| | | <div style="text-align: center;">仓库</div> |
| | | <div style="width: 80px; display: flex; flex-direction: column;"> |
| | | <div style="height: 35px; border-bottom: 1px dashed #000; text-align: center; display: flex; align-items: center; justify-content: center;">共四联</div> |
| | | <div style="height: 35px; border-bottom: 1px dashed #000; text-align: center; display: flex; align-items: center; justify-content: center;">存根</div> |
| | | <div style="height: 35px; border-bottom: 1px dashed #000; text-align: center; display: flex; align-items: center; justify-content: center;">客户</div> |
| | | <div style="height: 35px; border-bottom: 1px dashed #000; text-align: center; display: flex; align-items: center; justify-content: center;">记账</div> |
| | | <div style="height: 35px; text-align: center; display: flex; align-items: center; justify-content: center;">仓库</div> |
| | | </div> |
| | | </div> |
| | | |
| | | <el-descriptions :column="1"> |
| | | <el-descriptions-item |
| | | label="备注:">贵公司在收货后请即刻核实数量及品质,若有异议,请在3日内提出,否则视为收妥。</el-descriptions-item> |
| | | </el-descriptions> |
| | | <div style="margin: 10px 0;"> |
| | | <span>备注: 贵公司在收货后请即刻核实数量及品质,若有异议,请在3日内提出,否则视为收妥。</span> |
| | | </div> |
| | | <div class="footer"> |
| | | <div class="info-section"> |
| | | <div class="info-row"> |
| | |
| | | .print-page { |
| | | width: 241mm; |
| | | height: 75mm; |
| | | padding: 0mm 10mm; |
| | | background: white; |
| | | box-sizing: border-box; |
| | | page-break-after: always; |
| | |
| | | .delivery-note { |
| | | width: 100%; |
| | | height: 100%; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | line-height: 1.2; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | .label { |
| | | font-weight: bold; |
| | | min-width: 60px; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | } |
| | | .value { |
| | | margin-right: 20px; |
| | | min-width: 80px; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | } |
| | | .table-section { |
| | | margin-bottom: 4px; |
| | |
| | | border: 1px solid #000; |
| | | padding: 6px; |
| | | text-align: center; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | line-height: 1.4; |
| | | } |
| | | .product-table th { |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | } |
| | | .total-value { |
| | |
| | | .label { |
| | | font-weight: bold; |
| | | min-width: 60px; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | } |
| | | .value { |
| | | margin-right: 20px; |
| | | min-width: 80px; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | @media print { |
| | |
| | | .print-page { |
| | | box-shadow: none; |
| | | margin: 0; |
| | | padding: 10mm; |
| | | padding-left: 20mm; |
| | | padding-right: 30mm; |
| | | page-break-inside: avoid; |
| | | page-break-after: always; |
| | | font-size: 16px; |
| | | } |
| | | .print-page:last-child { |
| | | page-break-after: avoid; |
| | |
| | | |
| | | .print-page { |
| | | width: 220mm; |
| | | min-height: 90mm; |
| | | font-size: 16px; |
| | | min-height: 90mm; |
| | | padding: 10mm; |
| | | margin: 0 auto; |
| | | background: white; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | font-family: "SimSun", serif; |
| | | font-size: 10px; |
| | | font-size: 16px; |
| | | line-height: 1.2; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | .label { |
| | | font-weight: bold; |
| | | width: 60px; |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .value { |
| | | margin-right: 20px; |
| | | min-width: 80px; |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | } |
| | |
| | | border: 1px solid #000; |
| | | padding: 6px; |
| | | text-align: center; |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | line-height: 1.4; |
| | | } |
| | | |
| | | th { |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | |
| | | font-weight: bold; |
| | | white-space: nowrap; |
| | | margin-right: 10px; |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .value { |
| | | min-width: 300px; |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | &.address-item { |
| | |
| | | .label { |
| | | font-weight: bold; |
| | | min-width: 60px; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | } |
| | | .value { |
| | | margin-right: 20px; |
| | | min-width: 80px; |
| | | font-size: 12px; |
| | | font-size: 16px; |
| | | } |
| | | } |
| | | |