打印优化

This commit is contained in:
bb_pan 2025-08-23 19:07:15 +08:00
parent 649226311b
commit 7758d128dc
2 changed files with 112 additions and 13 deletions

View File

@ -166,7 +166,7 @@
</div> </div>
</div> </div>
<table border="1" cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse"> <table border="1.5" cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse">
<thead> <thead>
<tr> <tr>
<th style="width: 60px; text-align: center">序号</th> <th style="width: 60px; text-align: center">序号</th>
@ -430,6 +430,13 @@ export default {
this.$modal.msgSuccess('单据文件已保存到服务器') this.$modal.msgSuccess('单据文件已保存到服务器')
// //
const images = element.querySelectorAll('img')
images.forEach(img => {
if (!img.complete || img.naturalWidth === 0) {
console.warn('图片加载失败,替换为透明图:', img.src)
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 1x1
}
})
printJS({ printJS({
printable: 'checkId', printable: 'checkId',
type: 'html', type: 'html',
@ -456,6 +463,13 @@ export default {
this.$modal.msgError('上传单据文件时发生错误') this.$modal.msgError('上传单据文件时发生错误')
// 使 // 使
const images = element.querySelectorAll('img')
images.forEach(img => {
if (!img.complete || img.naturalWidth === 0) {
console.warn('图片加载失败,替换为透明图:', img.src)
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 1x1
}
})
printJS({ printJS({
printable: 'checkId', printable: 'checkId',
type: 'html', type: 'html',
@ -589,6 +603,13 @@ export default {
this.$modal.msgSuccess('单据PDF文件已保存到服务器') this.$modal.msgSuccess('单据PDF文件已保存到服务器')
// //
const images = element.querySelectorAll('img')
images.forEach(img => {
if (!img.complete || img.naturalWidth === 0) {
console.warn('图片加载失败,替换为透明图:', img.src)
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 1x1
}
})
printJS({ printJS({
printable: 'checkIdTwo', printable: 'checkIdTwo',
type: 'html', type: 'html',
@ -603,6 +624,13 @@ export default {
this.$modal.msgError('上传明细单据文件时发生错误') this.$modal.msgError('上传明细单据文件时发生错误')
// 使 // 使
const images = element.querySelectorAll('img')
images.forEach(img => {
if (!img.complete || img.naturalWidth === 0) {
console.warn('图片加载失败,替换为透明图:', img.src)
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 1x1
}
})
printJS({ printJS({
printable: 'checkIdTwo', printable: 'checkIdTwo',
type: 'html', type: 'html',
@ -660,13 +688,84 @@ export default {
font-size: 18px; font-size: 18px;
} }
} }
@media print { @media screen {
.no-print { body {
display: none; font-family: 'Microsoft YaHei', sans-serif;
background-color: #f5f5f5;
padding: 20px;
} }
.print-content { .print-container {
/* 打印内容的样式 */ max-width: 1000px;
margin: 0 auto;
background: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.action-buttons {
text-align: center;
margin: 20px 0;
}
button {
padding: 10px 20px;
margin: 0 10px;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #66b1ff;
} }
} }
/* 通用样式 */
.text-center {
text-align: center;
}
.text-bold {
font-weight: bold;
}
.title {
font-size: 20px;
font-weight: bold;
margin: 15px 0;
text-align: center;
}
.info-row {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.info-item {
flex: 1;
}
.signature-area {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.signature-box {
width: 30%;
min-height: 100px;
border-bottom: 1px solid #000;
text-align: center;
padding-top: 60px;
}
.is-rotate {
transform: rotate(90deg);
transform-origin: center center;
}
</style> </style>

View File

@ -21,9 +21,9 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item prop="keyword"> <el-form-item prop="keyWord">
<el-input <el-input
v-model="queryParams.keyword" v-model="queryParams.keyWord"
placeholder="请输入关键字" placeholder="请输入关键字"
clearable clearable
maxlength="50" maxlength="50"
@ -269,7 +269,7 @@ export default {
time: null, // time: null, //
name: undefined, name: undefined,
taskStatus: "", taskStatus: "",
keyword: "", keyWord: "",
}, },
form: { form: {
remark: "", remark: "",
@ -351,7 +351,7 @@ export default {
getList() { getList() {
this.loading = true; this.loading = true;
const params = { const params = {
keyword: this.queryParams.keyword, keyWord: this.queryParams.keyWord,
startTime: this.queryParams.time && this.queryParams.time[0], startTime: this.queryParams.time && this.queryParams.time[0],
endTime: this.queryParams.time && this.queryParams.time[1], endTime: this.queryParams.time && this.queryParams.time[1],
pageSize: this.queryParams.pageSize, pageSize: this.queryParams.pageSize,
@ -377,7 +377,7 @@ export default {
start.setMonth(start.getMonth() - 1) start.setMonth(start.getMonth() - 1)
this.queryParams.time = [this.format(start), this.format(end)] this.queryParams.time = [this.format(start), this.format(end)]
this.resetForm("queryForm"); this.resetForm("queryForm");
this.queryParams.keyword = ""; this.queryParams.keyWord = "";
this.handleQuery(); this.handleQuery();
}, },
/** 通过按钮操作 */ /** 通过按钮操作 */
@ -569,8 +569,8 @@ export default {
watch: { watch: {
$route: { $route: {
handler(to) { handler(to) {
if (to.query.keyword) { if (to.query.keyWord) {
this.queryParams.keyword = to.query.keyword; this.queryParams.keyWord = to.query.keyWord;
} }
}, },
deep: true, deep: true,