样式调整

This commit is contained in:
BinBin Song 2025-08-03 22:41:03 +08:00
parent 6ff3db5446
commit a9ba9f8f59
4 changed files with 131 additions and 107 deletions

View File

@ -162,13 +162,13 @@ link type="primary" @click="editReceivingStatus(scope.row.id)"
<div class="print-header">
<div class="order-info">
<div style="display: flex;">
<span style="width: 210px;">订单编号{{ printData.purchaseNo }}</span>
<span style="margin-left:20px; width: 170px;">订单日期{{ formatDate(printData.ordDate) }}</span>
<span style="margin-left:20px;width: 250px">供应商{{ printData.supplierName }}</span>
<span style="width: 190px;white-space: nowrap;">订单编号{{ printData.purchaseNo }}</span>
<span style="margin-left:10px; width: 150px;">订单日期{{ formatDate(printData.ordDate) }}</span>
<span style="margin-left:10px;width: 220px;white-space: nowrap;">供应商{{ printData.supplierName }}</span>
</div>
<div style="display: flex;">
<span style="margin-left:20px;width: 110px">联系人{{ printData.contactName }}</span>
<span style="margin-left:20px;width: 150px">电话{{ printData.contactMobile }}</span>
<span style="margin-left:10px;width: 100px">联系人{{ printData.contactName }}</span>
<span style="margin-left:10px;width: 140px">电话{{ printData.contactMobile }}</span>
</div>
</div>
@ -493,6 +493,10 @@ function doPrint() {
<head>
<title >采购单</title>
<style>
@page {
size: 241mm 140mm;
margin: 5mm;
}
body {
font-family: Arial, sans-serif;
margin: 10px;
@ -507,6 +511,7 @@ function doPrint() {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left:8px
}
@ -515,36 +520,47 @@ function doPrint() {
}
.stamp-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.order-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.print-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
table-layout: fixed;
border: 2px solid #000 !important; /* 加粗外边框 */
}
.print-table th, .print-table td {
border: 1px solid #ddd;
padding: 5px;
border: 1px solid #000 !important; /* 使用黑色边框,更清晰 */
padding: 2px 0px;
text-align: center;
height: 20px; /* 设置固定高度 */
line-height: 20px; /* 垂直居中 */
height: auto;
min-height: 26px;
// line-height: 1.2;
word-wrap: break-word;
word-break: break-all;
vertical-align: center;
}
.print-table th {
background-color: #f5f5f5;
font-weight: bold;
border: 1px solid #000 !important;
}
@media print {
body { margin: 0; }
.print-content {
width: 100%;
margin: 0;
padding: 10px;
}
/* 特别加强最后一列(备注列)的右边框 */
.print-table th:last-child,
.print-table td:last-child {
border-right: 2px solid #000 !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-all !important;
overflow-wrap: break-word !important;
padding: 4px 2px;
}
</style>
</head>
<body>
@ -567,6 +583,7 @@ function limitTo20Chars(input) {
return input.length > 20 ? input.slice(0, 20) : input;
}
</script>
<style scoped>
/* 打印样式 */
@media print {
@ -603,7 +620,7 @@ function limitTo20Chars(input) {
}
.order-info span {
font-size: 15px !important;
font-size: 12px !important;
margin-right: 10px !important;
}
.stamp-info {
@ -611,7 +628,7 @@ function limitTo20Chars(input) {
}
.stamp-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.print-table {
@ -641,4 +658,4 @@ function limitTo20Chars(input) {
</style>
</style>

View File

@ -100,13 +100,13 @@
<div class="print-header">
<div class="order-info">
<div style="display: flex;">
<span style="width: 210px;">订单编号{{ printData.purchaseNo }}</span>
<span style="margin-left:20px; width: 170px;">订单日期{{ formatDate(printData.ordDate) }}</span>
<span style="margin-left:20px;width: 250px">供应商{{ printData.supplierName }}</span>
<span style="width: 200px;">订单编号{{ printData.purchaseNo }}</span>
<span style="margin-left:10px; width: 110px;">订单日期{{ formatDate(printData.ordDate) }}</span>
<span style="margin-left:10px;width: 210px; white-space: nowrap;">供应商{{ printData.supplierName }}</span>
</div>
<div style="display: flex;">
<span style="margin-left:20px;width: 110px">联系人{{ printData.contactName }}</span>
<span style="margin-left:20px;width: 150px">电话{{ printData.contactMobile }}</span>
<span style="margin-left:10px;width: 100px">联系人{{ printData.contactName }}</span>
<span style="margin-left:10px;width: 100px">电话{{ printData.contactMobile }}</span>
</div>
</div>
@ -326,6 +326,10 @@ function doPrint() {
<head>
<title >采购单</title>
<style>
@page {
size: 241mm 140mm;
margin: 5mm;
}
body {
font-family: Arial, sans-serif;
margin: 10px;
@ -340,6 +344,7 @@ function doPrint() {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left:8px
}
@ -348,36 +353,47 @@ function doPrint() {
}
.stamp-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.order-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.print-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
table-layout: fixed;
border: 2px solid #000 !important; /* 加粗外边框 */
}
.print-table th, .print-table td {
border: 1px solid #ddd;
padding: 5px;
border: 1px solid #000 !important; /* 使用黑色边框,更清晰 */
padding: 2px 0px;
text-align: center;
height: 20px; /* 设置固定高度 */
line-height: 20px; /* 垂直居中 */
height: auto;
min-height: 26px;
// line-height: 1.2;
word-wrap: break-word;
word-break: break-all;
vertical-align: center;
}
.print-table th {
background-color: #f5f5f5;
font-weight: bold;
border: 1px solid #000 !important;
}
@media print {
body { margin: 0; }
.print-content {
width: 100%;
margin: 0;
padding: 10px;
}
/* 特别加强最后一列(备注列)的右边框 */
.print-table th:last-child,
.print-table td:last-child {
border-right: 2px solid #000 !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-all !important;
overflow-wrap: break-word !important;
padding: 4px 2px;
}
</style>
</head>
<body>
@ -487,7 +503,7 @@ const getList = async () => {
}
.order-info span {
font-size: 15px !important;
font-size: 12px !important;
margin-right: 10px !important;
}
.stamp-info {
@ -495,7 +511,7 @@ const getList = async () => {
}
.stamp-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.print-table {
@ -526,3 +542,4 @@ const getList = async () => {
</style>

View File

@ -79,13 +79,13 @@
<div class="print-header">
<div class="order-info">
<div style="display: flex;">
<span style="width: 210px;">订单编号{{ printData.purchaseNo }}</span>
<span style="margin-left:20px; width: 170px;">订单日期{{ formatDate(printData.ordDate) }}</span>
<span style="margin-left:20px;width: 250px">供应商{{ printData.supplierName }}</span>
<span style="width: 200px;">订单编号{{ printData.purchaseNo }}</span>
<span style="margin-left:10px; width: 140px;">订单日期{{ formatDate(printData.ordDate) }}</span>
<span style="margin-left:10px;width: 220px">供应商{{ printData.supplierName }}</span>
</div>
<div style="display: flex;">
<span style="margin-left:20px;width: 110px">联系人{{ printData.contactName }}</span>
<span style="margin-left:20px;width: 150px">电话{{ printData.contactMobile }}</span>
<span style="margin-left:10px;width: 100px">联系人{{ printData.contactName }}</span>
<span style="margin-left:10px;width: 120px">电话{{ printData.contactMobile }}</span>
</div>
</div>
@ -150,21 +150,21 @@
</tbody>
</table>
<div class="order-info" style="margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
<div style="display: flex;width: 40%;">
<span >交货地址{{ printData.deliveryAddress }}</span>
<div class="order-info" style="margin-top: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px;">
<div style="display: flex; width: 40%;">
<span style="white-space: nowrap;">交货地址{{ printData.deliveryAddress }}</span>
</div>
<div style="display: flex;width: 20%;justify-content: center;">
<span style="margin-left:20px;width: 150px">审核{{ printData.auditorName }}</span>
<span style="margin-left:20px;width: 120px">签字区</span>
<div style="display: flex; width: 20%; justify-content: center;">
<span style="margin-left: 20px; width: 150px; white-space: nowrap;">审核{{ printData.auditorName }}</span>
<span style="margin-left: 20px; width: 120px; white-space: nowrap;">签字区</span>
</div>
<div style="display: flex; width: 40%;justify-content: right;">
<span style="margin-left:20px;width: 130px">接收人{{ printData.username }}</span>
<span style="margin-left:20px;width: 150px">电话{{ printData.userMobile }}</span>
</div>
</div>
<div style="display: flex; width: 40%; justify-content: right;">
<span style="margin-left: 20px; width: 130px; white-space: nowrap;">接收人{{ printData.username }}</span>
<span style="margin-left: 20px; width: 150px; white-space: nowrap;">电话{{ printData.userMobile }}</span>
</div>
</div>
</div>
@ -302,6 +302,10 @@ function doPrint() {
<head>
<title >采购单</title>
<style>
@page {
size: 241mm 140mm;
margin: 5mm;
}
body {
font-family: Arial, sans-serif;
margin: 10px;
@ -316,6 +320,7 @@ function doPrint() {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left:8px
}
@ -324,36 +329,47 @@ function doPrint() {
}
.stamp-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.order-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.print-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
table-layout: fixed;
border: 2px solid #000 !important; /* 加粗外边框 */
}
.print-table th, .print-table td {
border: 1px solid #ddd;
padding: 5px;
border: 1px solid #000 !important; /* 使用黑色边框,更清晰 */
padding: 2px 0px;
text-align: center;
height: 20px; /* 设置固定高度 */
line-height: 20px; /* 垂直居中 */
height: auto;
min-height: 26px;
// line-height: 1.2;
word-wrap: break-word;
word-break: break-all;
vertical-align: center;
}
.print-table th {
background-color: #f5f5f5;
font-weight: bold;
border: 1px solid #000 !important;
}
@media print {
body { margin: 0; }
.print-content {
width: 100%;
margin: 0;
padding: 10px;
}
/* 特别加强最后一列(备注列)的右边框 */
.print-table th:last-child,
.print-table td:last-child {
border-right: 2px solid #000 !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-all !important;
overflow-wrap: break-word !important;
padding: 4px 2px;
}
</style>
</head>
<body>
@ -442,7 +458,7 @@ const getList = async () => {
}
.order-info span {
font-size: 15px !important;
font-size: 12px !important;
margin-right: 10px !important;
}
.stamp-info {
@ -450,7 +466,7 @@ const getList = async () => {
}
.stamp-info span{
font-size: 15px !important;
font-size: 12px !important;
}
.print-table {

View File

@ -273,6 +273,10 @@ function doPrint() {
<head>
<title >入库单</title>
<style>
@page {
size: 241mm 140mm;
margin: 5mm;
}
body {
font-family: Arial, sans-serif;
margin: 10px;
@ -312,11 +316,11 @@ function doPrint() {
}
.print-table th, .print-table td {
border: 1px solid #000 !important; /* 使用黑色边框,更清晰 */
padding: 4px;
padding: 2px 0px;
text-align: center;
height: auto;
min-height: 30px;
line-height: 1.4;
min-height: 26px;
line-height: 1.2;
word-wrap: break-word;
word-break: break-all;
vertical-align: top;
@ -336,37 +340,7 @@ function doPrint() {
overflow-wrap: break-word !important;
padding: 4px 2px;
}
@media print {
body {
margin: 0;
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
.print-content {
width: 100%;
margin: 0;
padding: 8px; /* 减少内边距,避免被裁剪 */
box-sizing: border-box;
}
.print-table {
page-break-inside: avoid;
border: 2px solid #000 !important;
width: 98% !important; /* 稍微减小宽度,避免右边框被裁剪 */
margin: 0 auto;
margin-top:10px
}
.print-table th, .print-table td {
border: 1px solid #000 !important;
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
.print-table th:last-child,
.print-table td:last-child {
border-right: 2px solid #000 !important;
white-space: normal !important;
word-wrap: break-word !important;
}
}
</style>
</head>
<body>