<template>
<el-dialog
:visible.sync="showFlag"
width="800px"
custom-class="fixed-height-dialog"
append-to-
body
>
<div id="printArea" class="dialog-content">
<div class="print-header">
<img class="qrCode" v-if="qrUrl" :src="qrUrl" alt="" />
<h1 style="text-align: center">工艺流转卡</h1>
<el-
form ref="
form" :model="
form" v-loading="loading" label-width="100px">
<div style="width: 100%; display: flex; align-items: center">
<div style="width: 70%; display: flex; flex-wrap: wrap">
<el-
form-item
label="工单编码"
prop="workOrderCode"
class="custom-label-
form-item"
style="width: 50%"
>
<span>{{
form.workOrderCode }}</span>
</el-
form-item>
<el-
form-item
label="产品编码"
class="custom-label-
form-item"
prop="partNo"
style="width: 50%"
>
<span>{{
form.partNo }}</span>
</el-
form-item>
<el-
form-item
label="领料批次"
class="custom-label-
form-item"
style="width: 50%"
>
<span>{{
form.materialCode }}</span>
</el-
form-item>
<el-
form-item
label="产品名称"
class="custom-label-
form-item"
prop="prodCode"
style="width: 50%"
>
<span>{{
form.partName }}</span>
</el-
form-item>
<!-- <el-
form-item
label="产品规格"
prop="specification"
style="width: 50%"
>
<span>{{
form.specification }}</span>
</el-
form-item> -->
<el-
form-item
label="工单数量"
class="custom-label-
form-item"
prop="quantity"
style="width: 50%"
>
<span>{{
form.quantity }}</span>
</el-
form-item>
<!-- <el-
form-item label="工艺路线" prop="routeName" style="width: 50%">
<span>{{
form.routeName }}</span>
</el-
form-item> -->
<el-
form-item
label="打印人员"
class="custom-label-
form-item"
prop="printer"
style="width: 50%"
>
<span>{{
form.printer }}</span>
</el-
form-item>
<el-
form-item
label="打印时间"
class="custom-label-
form-item"
prop="printerTime"
style="width: 50%"
>
<span v-if="
form.printerTime">{{
formatDateString
(form.printerTime
)
}}</span>
</el-
form-item>
</div>
<el-tooltip
class="item"
effect="dark"
:content="
form.workOrderQRCode"
placement="top"
>
<div class="workerOrderCode">
<img
v-if="
form.workOrderQRCodeUrl"
style="width: 150px; height: 150px"
:src="
form.workOrderQRCodeUrl"
alt=""
/>
</div>
</el-tooltip>
</div>
</el-
form>
</div>
<div class="
table-wrapper">
<el-
table
:data="list"
:height="
tableHeight"
class="custom-bold-
table"
v-loading="loading"
border
:row-style="rowStyle"
>
<el-
table-column label="工序号" align="center" prop="processNum" />
<el-
table-column label="工序编码" prop="processCode" />
<!-- <el-
table-column label="工序二维码" prop="processQRCodeUrl">
<template slot-scope="scope">
<el-tooltip
class="item"
effect="dark"
:content="scope.row.processQRCode"
placement="top"
>
<img
style="width: 50px; height: 50px"
v-if="scope.row.processQRCodeUrl"
:src="scope.row.processQRCodeUrl"
alt=""
/>
</el-tooltip>
</template>
</el-
table-column> -->
<el-
table-column label="工序" prop="processName" />
<el-
table-column label="加工数量" prop="quantityProcessed" />
<el-
table-column label="合格数量" prop="qualifiedQuantity" />
<el-
table-column label="不良数量" prop="qualifiedUnQuantity" />
<el-
table-column label="报工人" prop="ce" />
<el-
table-column label="报工时间" width="100" prop="shi" />
<!-- <el-
table-column label="备注" prop="remark" /> -->
</el-
table>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
@click="handlePrint"
ref="printBtn"
v-print="printArea"
>确 定</el-button
>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { getProcessFlowCard } from "@/api/mes/pro/jobSheet";
export default {
data
() {
return {
loading: false,
form: {},
showFlag: false,
list: [],
qrUrl: "",
// 打印配置
printArea: {
id: "printArea",
popTitle: "领料申请单", // 打印配置页上方标题
},
tableHeight: null,
// workOrderId: null
};
},
props: {
PrintRes: {
type: Object,
default:
() => {},
},
workOrderId: {
type: Number,
default: null,
},
},
watch: {
PrintRes: {
handler
(val
) {
// console.log
("val", val
);
// if
(val && val.data
) {
// Object.assign
(this.
form, val
);
// this.list = val.data.processStepList;
// }
},
immediate: true,
deep: true,
},
workOrderId: {
handler
(val
) {
if
(val
) {
console.log
("val", val
);
this.getProcessFlowCard
({ workOrderId: val }
);
}
},
immediate: true,
deep: true,
},
list: {
handler
(newVal
) {
this.$nextTick
(() => {
this.calculate
TableHeight
();
}
);
},
deep: true,
},
},
created
() {},
methods: {
rowStyle
({rowIndex}
) { //将表体数据第一行显示样式调整为与表头样式一致
// return rowIndex===0?{
// backgroundColor: '#F5F7FA',
// fontWeight: 'bold',
// color: '#909399',
// webkitPrintColorAdjust: 'exact' //解决打印页面“表头”不显示背景色的问题
// }:{};
},
calculate
TableHeight
() {
if
(this.list.length <= 10
) {
// 数据量少时，不固定高度（让表格自适应）
this.
tableHeight = null;
} else {
// 数据量多时，设置最大高度（保持滚动）
this.
tableHeight = "calc
(100vh - 400px
)";
}
// 确保表格重新布局
if
(this.$refs.salary
Table) {
this.$refs.salary
Table.doLayout
();
}
},
getProcessFlowCard: function
(datas
) {
this.loading = true;
getProcessFlowCard
(datas
).then
((response
) => {
Object.assign
(this.
form, response.data
);
console.log
("流转卡数据", this.
form);
this.list = response.data.processStepList;
this.list.map
((item
) => {
item.qualifiedQuantity = null;
item.qualifiedUnQuantity = null;
const result =
item.processQRCode.indexOf
("&"
) !== -1
? item.processQRCode.substring
(
item.processQRCode.indexOf
("&"
) + 1
)
: item.processQRCode;
item.processCode = result;
}
);
this.$nextTick
(() => {
this.calculate
TableHeight
();
}
);
this.loading = false;
}
);
},
formatDateString
(dateString
) {
const dateObj = new Date
(dateString
);
const year = dateObj.getFullYear
();
const month =
("0" +
(dateObj.getMonth
() + 1
)).slice
(-2
);
const
day =
("0" + dateObj.getDate
()).slice
(-2
);
return `${year}-${month}-${
day}`;
},
cancel
() {
this.showFlag = false;
},
handlePrint
() {
console.log
("打印"
);
},
},
};
</script>
<style scoped>
@media print {
#printArea {
width: 792px; /* A4 纸张宽度 */
height: auto; /* 高度设置为自动，以适应内容 */
margin: 0 auto;
page-break-after: avoid; /* 避免在打印后分页 */
display: flex;
flex-direction: column;
align-items: center;
}
.el-
form {
margin-top: 20px;
}
.el-
form-item {
margin-bottom: 2px; /* 调整
表单项之间的间距 */
}
.el-
table {
zoom: 100%;
margin-top: 20px;
}
.el-
table-column {
page-break-inside: avoid; /* 避免列内部分页 */
}
.dialog-footer {
display: none !important;
}
/* .
table-wrapper {
overflow: visible !important;
height: auto !important;
} */
/* 表头固定 */
.print-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: white;
z-index: 1000;
}
/* 表格调整 */
.
table-wrapper {
margin-top: 220px; /* 根据表头高度调整 */
}
/* 强制表格分页 */
.el-
table__
body-wrapper tr {
page-break-inside: avoid;
}
/* 隐藏非打印元素 */
.no-print {
display: none !important;
}
/* 表格表头重复 */
thead {
display:
table-header-group;
}
tfoot {
display:
table-footer-group;
}
.
table-wrapper thead th {
position: sticky;
top: 0; /* 固定顶部 */
background-color: white; /* 防止背景透明化 */
}
::v-deep .el-
table {
table-layout: fixed !important;
}
::v-deep .el-
table__header-wrapper {
display:
table-header-group !important;
}
::v-deep .el-
table__fixed {
display: none !important;
}
}
.qrCode {
width: 50px;
height: 50px;
position: absolute;
top: 5px;
left: 20px;
}
.fixed-height-dialog {
height: 600px;
display: flex;
flex-direction: column;
}
.dialog-content {
flex: 1;
overflow: hidden;
padding: 20px;
}
.
table-wrapper {
height: 400px;
overflow-y: auto;
}
.dialog-footer {
position: sticky;
bottom: 0;
right: 0;
padding: 16px 20px;
border-top: 1px solid #ebeef5;
background: white;
z-index: 100;
display: flex;
justify-content: flex-end;
}
.custom-label-
form-item ::v-deep .el-
form-item__label {
font-size: 16px; /* 自定义字体大小 */
}
span {
font-size: 16px;
}
.custom-bold-
table {
border: 1px solid black !important; /* 外边框加粗 */
}
/* 单元格边框加粗 */
.custom-bold-
table >>> .el-
table__header th,
.custom-bold-
table >>> .el-
table__
body td {
border-right: 1px solid black !important;
border-bottom: 1px solid black !important;
/* 表格字体 */
font-size: 14px;
}
.custom-bold-
table >>> .el-
table__header {
border-bottom: none !important;
}
/* 表头底部边框加粗
.custom-bold-
table >>> .el-
table__header {
border-bottom: 1px solid black !important;
} */
/* 最后一行底部边框 */
.custom-bold-
table >>> .el-
table__
body tr:last-child td {
border-bottom: 1px solid black !important;
}
/* 修复行悬浮背景覆盖边框的问题 */
.custom-bold-
table >>> .el-
table__
body tr:hover td {
background-color: transparent !important;
}
.custom-bold-
table >>> .el-
table__header th {
/* 表头字体大小 */
font-size: 16px;
}
</style>
怎么在分页里面打印
表单跟表头数据，并打印上页未打印完的表格内容
本文深入讲解HTML文档结构，包括常用标签如列表、表格和表单的使用方法，以及如何通过不同方式实现细线表格和表格合并，是初学者掌握HTML核心内容的必备指南。
扫一扫
78
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
