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

打印调整

Browse Source
This commit is contained in:
BinBin Song 2025-07-25 09:22:19 +08:00
parent e548ac1986
commit a2af653e46
1 changed files with 133 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
mes-ui/mes-ui-admin-vue3/src/views/heli/storagein/detail.vue
View File

@ -44,7 +44,7 @@
<!-- 采购单信息 -->
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">入库单信息</span>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">采购单信息</span>
</template>
<el-row>
<el-col>
@ -87,61 +87,52 @@
<span style="margin-left:20px; width: 170px;">入库日期：{{ formatDate(printData.ordDate) }}</span>
<span style="margin-left:20px;width: 250px">供应商：{{ 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>
</div> -->
</div>
</div>
<table class="print-table">
<colgroup>
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
<col style="width: 10%;" />
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>物料号</th>
<th>零件名称</th>
<th>规格</th>
<th>单位</th>
<th>入库数量</th>
<th>单价(元)</th>
<th>小计(元)</th>
<th>项目名称</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in 17" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ printData.storageInDetailDOList[index]?.materialCode || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.boomName ? limitTo20Chars(printData.storageInDetailDOList[index].boomName) : '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.boomSpec || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.unit || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.storageAmount || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.price || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.estimatedPrice || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.projectName || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.description || '' }}</td>
</tr>
<!-- <tr>
<td colspan="9"></td>
<td style="font-weight: bold;">合计</td>
<td style="font-weight: bold;">{{ printData.estimatedPriceSum }}</td>
</tr> -->
</tbody>
<col style="width: 8%;" /> <!-- 序号 -->
<col style="width: 18%;" /> <!-- 零件名称 -->
<col style="width: 10%;" /> <!-- 规格 -->
<col style="width: 8%;" /> <!-- 单位 -->
<col style="width: 10%;" /> <!-- 入库数量 -->
<col style="width: 10%;" /> <!-- 单价 -->
<col style="width: 10%;" /> <!-- 小计 -->
<col style="width: 12%;" /> <!-- 项目名称 -->
<col style="width: 14%;" /> <!-- 备注 - 给更多空间 -->
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>零件名称</th>
<th>规格</th>
<th>单位</th>
<th>入库数量</th>
<th>单价(元)</th>
<th>小计(元)</th>
<th>项目名称</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in 17" :key="index">
<td>{{ index + 1 }}</td>
<td style="word-wrap: break-word; word-break: break-all; max-width: 150px;">
{{ printData.storageInDetailDOList[index]?.boomName ? limitTo20Chars(printData.storageInDetailDOList[index].boomName) : '' }}
</td>
<td style="word-wrap: break-word; word-break: break-all;">{{ printData.storageInDetailDOList[index]?.boomSpec || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.unit || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.storageAmount || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.price || '' }}</td>
<td>{{ printData.storageInDetailDOList[index]?.estimatedPrice || '' }}</td>
<td style="word-wrap: break-word; word-break: break-all; max-width: 120px;">
{{ printData.storageInDetailDOList[index]?.projectName || '' }}
</td>
<td style="word-wrap: break-word; word-break: break-all; white-space: normal; padding: 4px; max-width: 100px; min-height: 30px;">
{{ printData.storageInDetailDOList[index]?.description || '' }}
</td>
</tr>
</tbody>
</table>
<div class="order-info" style="margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
@ -150,17 +141,10 @@
</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>
<div style="display: flex; width: 40%;justify-content: right;">
<span style="margin-left:20px;width: 150px">仓库签字:{{ printData.signature }}</span>
<span style="margin-left:20px;width: 150px">仓库签字:{{ printData.signature }}</span>
<span style="margin-left:20px;width: 150px">日期:{{ printData.date }}</span>
<!-- <span style="margin-left:20px;width: 150px">接收人：{{ printData.username }}</span> -->
<!-- <span style="margin-left:20px;width: 150px">电话：{{ printData.userMobile }}</span> -->
</div>
</div>
@ -190,7 +174,6 @@ const tagsViewStore = useTagsViewStore()
import * as StorageinApi from '@/api/heli/storagein'
import * as StorageinDetailApi from '@/api/heli/storageindetail'
import {ref} from "vue";
import {updateIsPrint} from "@/api/heli/storagein";
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@ -222,12 +205,6 @@ const total = ref(0) // 列表的总页数
const subBoomFormLoading = ref(false)
const subBoomFormRef = ref()
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const queryParams = reactive({
@ -237,6 +214,7 @@ const queryParams = reactive({
})
// 页面数据加载初始化
onMounted(async () => {
// 获取物料需求计划信息
formData.value = await StorageinApi.getStorageIn(query.id)
getList();
})
@ -328,24 +306,63 @@ function doPrint() {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
table-layout: fixed;
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: 4px;
text-align: center;
height: 20px; /* 设置固定高度 */
line-height: 20px; /* 垂直居中 */
height: auto;
min-height: 30px;
line-height: 1.4;
word-wrap: break-word;
word-break: break-all;
vertical-align: top;
}
.print-table th {
background-color: #f5f5f5;
font-weight: bold;
border: 1px solid #000 !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;
word-break: break-all !important;
overflow-wrap: break-word !important;
padding: 4px 2px;
}
@media print {
body { margin: 0; }
body {
margin: 0;
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
.print-content {
width: 100%;
margin: 0;
padding: 10px;
padding: 8px; /* 减少内边距，避免被裁剪 */
box-sizing: border-box;
}
.print-table {
page-break-inside: avoid;
border: 2px solid #000 !important;
width: 98% !important; /* 稍微减小宽度，避免右边框被裁剪 */
margin: 0 auto;
}
.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>
@ -362,7 +379,6 @@ function doPrint() {
iframe.contentWindow?.print()
setTimeout(() => document.body.removeChild(iframe), 1000)
}
StorageinApi.updateIsPrint(query.id);
}
@ -450,18 +466,21 @@ const getList = async () => {
border-collapse: collapse;
margin-top: 10px;
border: 1px solid #ccc;
table-layout: fixed;
table-layout: fixed;
}
.print-table th,
.print-table td {
border: 1px solid #ccc;
padding: 6px 8px;
border: 1px solid #000 !important; /* 使用黑色边框 */
padding: 6px 4px;
text-align: center;
font-size: 13px !important;
height: 30px; /* 设置固定高度 */
line-height: 30px; /* 垂直居中 */
height: auto;
min-height: 30px;
line-height: 1.4;
word-wrap: break-word;
word-break: break-all;
vertical-align: top;
}
.print-table th {
@ -469,8 +488,40 @@ const getList = async () => {
color: #303133;
font-weight: 600;
font-size: 13px !important;
border: 1px solid #000 !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;
word-break: break-all !important;
overflow-wrap: break-word !important;
text-align: left;
padding: 4px 2px;
}
/* 打印专用样式 */
@media print {
.print-table {
width: 98% !important; /* 稍微减小宽度避免边框被裁剪 */
margin: 0 auto;
border: 2px solid #000 !important;
}
.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;
}
}
</style>
</style>