licq/heli-mes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整打印页面布局和样式

Browse Source
This commit is contained in:
郑庆 2025-10-19 16:58:08 +08:00
parent 6160fda82b
commit 2acaed7a09
1 changed files with 122 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/print.vue
View File

@ -1,29 +1,31 @@
<template>
<el-dialog v-model="dialogVisible" title="" width="900px" append-to-body>
<el-dialog v-model="dialogVisible" title="" width="1200px" append-to-body>
<div class="print-wrap">
<div class="header header-grid">
<div class="cell company">杭州合立模具有限公司</div>
<div class="cell title">委外加工清单及送货单</div>
<div class="cell audit">审核：</div>
<div class="cell handler">委外加工经手人：</div>
<div class="cell receiver">收货人：</div>
<div class="cell company-title">
<span class="company">杭州合立模具有限公司</span>
<span class="title">委外工单及送货单</span>
</div>
<div class="cell audit"> 审核：<span class="sign-space"></span> </div>
<div class="cell handler"> 委外加工经手人：<span class="sign-space"></span> </div>
<div class="cell receiver"> 收货人：<span class="sign-space"></span> </div>
</div>
<table class="sheet" border="1" cellspacing="0" cellpadding="0">
<!-- 固定列宽，总计 100% -->
<colgroup>
<col style="width: 4%" />
<col style="width: 8%" />
<col style="width: 9%" />
<col style="width: 11%" />
<col style="width: 9%" />
<col style="width: 7.5%" />
<col style="width: 15%" />
<col style="width: 5.5%" />
<col style="width: 14%" />
<col style="width: 6%" />
<col style="width: 12%" />
<col style="width: 6%" />
<col style="width: 6%" />
<col style="width: 13.5%" />
<col style="width: 5%" />
<col style="width: 5%" />
<col style="width: 7%" />
<col style="width: 8%" />
<col style="width: 8.5%" />
</colgroup>
<thead>
<tr>
@ -56,8 +58,6 @@
<td class="num">{{ row['总价格'] }}</td>
<td>{{ fmtDate(row['要求日期']) }}</td>
</tr>
</tbody>
<tfoot>
<tr class="sum-row">
<td colspan="8" class="sum-label">合计</td>
<td class="num sum-value">{{ sumQuantity }}</td>
@ -65,13 +65,16 @@
<td class="num sum-value">{{ sumTotal }}</td>
<td></td>
</tr>
</tfoot>
</tbody>
</table>
<div class="footer-sign sign-row">
<div>合立经手人：{{ duEmpName }}</div>
<div>审核人：</div>
<div>委外加工经手人：</div>
<div class="sign-item">
<span class="label">合立经手人：</span>
<span class="name">{{ duEmpName }}</span>
</div>
<div class="sign-item"> 审核人：<span class="sign-space"></span> </div>
<div class="sign-item"> 委外加工经手人：<span class="sign-space"></span> </div>
</div>
</div>
@ -129,20 +132,62 @@ const onPrint = () => {
.print-wrap { width: calc(222mm - 12mm); min-height: calc(140mm - 12mm); }
.header.header-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 12px;
margin-bottom: 8px;
}
.header.header-grid .company { font-size: 12px; text-align: left; }
.header.header-grid .title,
.header.header-grid .company-title {
font-size: 12px;
text-align: left;
display: flex;
align-items: center;
gap: 8px;
}
.header.header-grid .audit,
.header.header-grid .handler,
.header.header-grid .receiver { font-size: 12px; text-align: right; }
.header.header-grid .receiver {
font-size: 12px;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* 合计行样式 */
.sum-row {
border-top: 2px solid #000;
font-weight: bold;
}
.sum-label {
text-align: right;
font-weight: bold;
}
.sum-value {
font-weight: bold;
}
/* 合计行样式 */
.sum-row {
border-top: 2px solid #000;
font-weight: bold;
}
.sum-label {
text-align: right;
font-weight: bold;
}
.sum-value {
font-weight: bold;
}
.sign-space {
display: inline-block;
width: 50px;
height: 18px;
margin-left: 4px;
}
.sheet { width:100%; border-collapse:collapse; font-size:12px; table-layout: fixed; }
.sheet th, .sheet td { border:1px solid #333; padding:6px 4px; text-align:center; line-height:1.3; vertical-align: middle; }
.sheet th, .sheet td { border:1px solid #333; padding:4px 0px; text-align:center; line-height:1; vertical-align: middle; }
.sheet thead th { background:#f5f7fa; font-weight:600; }
.sheet .text-left { text-align:left; padding-left:6px; }
.sheet .spec { word-break: break-word; white-space: normal; }
@ -150,7 +195,9 @@ const onPrint = () => {
.sheet tfoot .sum-label, .sheet tfoot .sum-value { font-weight:700; }
.sheet tfoot .sum-row td { border-top: 2px solid #000; }
.sign-row { display:flex; justify-content:space-between; margin-top:12px; font-size:12px; }
.sign-row { display:flex; justify-content:flex-start; margin-top:12px; font-size:12px;gap:30px }
.sign-item { display: flex; align-items: center; }
.sign-item .label { margin-right: 4px; }
</style>
`)
doc.write(printNode.outerHTML)
@ -165,26 +212,47 @@ const onPrint = () => {
<style scoped lang="less">
.print-wrap {
/* 预览时也按目标纸张尺寸展示，便于校对 */
width: 222mm;
width: 100%;
min-height: 140mm;
background: #fff;
}
.header.header-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 12px;
}
.header.header-grid .company-title {
display: flex;
align-items: center;
gap: 8px;
}
.header.header-grid .company {
font-weight: bold;
}
.header.header-grid .title {
text-align: center;
font-weight: bold;
}
.header.header-grid .audit,
.header.header-grid .handler,
.header.header-grid .receiver {
font-size: 12px;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
/* 签字空间样式 */
.sign-space {
display: inline-block;
width: 70px;
height: 18px;
margin-left: 4px;
}
.sheet {
@ -193,37 +261,57 @@ const onPrint = () => {
border-collapse: collapse;
font-size: 12px;
width: 100%;
th,
td {
border: 1px solid #333;
padding: 6px 4px;
text-align: center;
line-height: 1.3;
vertical-align: middle;
}
thead th {
background: #f5f7fa;
font-weight: 600;
}
.text-left {
text-align: left;
padding-left: 6px;
}
.spec {
word-break: break-word;
white-space: normal;
}
.num {
text-align: right;
padding-right: 6px;
}
tfoot .sum-row td {
border-top: 2px solid #000;
}
}
.footer-sign.sign-row {
display: flex;
justify-content: space-between;
justify-content: flex-start;
margin-top: 12px;
gap: 30px;
}
.sign-item {
display: flex;
align-items: center;
}
.sign-item .label {
margin-right: 4px;
}
.sign-item .name {
// font-weight: bold;
}
</style>