bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

退料单打印优化

This commit is contained in:
bb_pan 2025-08-20 11:21:28 +08:00
parent ca70f1c2cd
commit 2cefc795da
1 changed files with 400 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

756
src/views/material/back/component/dialogFormByCq.vue
View File

@ -8,185 +8,214 @@
append-to-body append-to-body
width="1090px" width="1090px"
> >
<div id="printcontent" style="height: 600px;overflow-y: scroll;padding: 0 20px;"> <div id="printcontent" style="height: 600px; overflow-y: scroll; padding: 0 20px">
<!-- <vue-easy-print tableShow ref="printRef"> --> <!-- <vue-easy-print tableShow ref="printRef"> -->
<div id="checkId"> <div id="checkId">
<div style="text-align: center;font-weight: 600;font-size: 16px;"> <div style="text-align: center; font-weight: 600; font-size: 16px">机具设备退料单</div>
机具设备退料单 <div class="info" style="margin-top: 10px; display: flex; align-items: center">
</div> <div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<div class="info" style="margin-top: 10px; display: flex; align-items: center;">
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;">
<div> <div>
<span>工程名称：</span><span>{{ rowObj.proName }}</span> <span>工程名称：</span>
<span>{{ rowObj.proName }}</span>
</div> </div>
<div> <div>
<span>退料时间：</span><span>{{ rowObj.createTime }}</span> <span>退料时间：</span>
<span>{{ rowObj.createTime }}</span>
</div> </div>
</div> </div>
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;text-align: right;"> <div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px; text-align: right">
<div> <div>
<span>退料单位：</span><span>{{ rowObj.unitName }}</span> <span>退料单位：</span>
<span>{{ rowObj.unitName }}</span>
</div> </div>
<div> <div>
<span>单号：</span><span>{{ rowObj.code }}</span> <span>单号：</span>
<span>{{ rowObj.code }}</span>
</div> </div>
</div> </div>
</div> </div>
<el-table :data="tableData" border style="width: 100%;">
<el-table-column label="编号" align="center" type="index" width="60px"/> <table border="1.5" cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse">
<el-table-column label="物资类型" <thead>
align="center" <tr>
prop="materialType" <th style="width: 60px; text-align: center">编号</th>
:show-overflow-tooltip="true" <th style="width: 120px; text-align: center">物资类型</th>
width="120px" <th style="text-align: center">物资名称</th>
/> <th style="text-align: center">规格型号</th>
<el-table-column <th style="text-align: center">计量单位</th>
label="物资名称" <th style="width: 200px; text-align: center">退料数量</th>
align="center" <th style="width: 200px; text-align: center">编号</th>
prop="typeName" </tr>
:show-overflow-tooltip="true" </thead>
/> <tbody>
<el-table-column <tr v-for="(row, index) in tableData" :key="index">
label="规格型号" <!-- 序号 -->
align="center" <td style="text-align: center">{{ index + 1 }}</td>
prop="typeModel"
:show-overflow-tooltip="true" <!-- 物资类型 -->
/> <td style="text-align: center" :title="row.materialType">{{ row.materialType }}</td>
<el-table-column
label="计量单位" <!-- 物资名称 -->
align="center" <td style="text-align: center" :title="row.typeName">{{ row.typeName }}</td>
prop="unitName"
:show-overflow-tooltip="true" <!-- 规格型号 -->
/> <td style="text-align: center" :title="row.typeModel">{{ row.typeModel }}</td>
<el-table-column
label="退料数量" <!-- 计量单位 -->
align="center" <td style="text-align: center" :title="row.unitName">{{ row.unitName }}</td>
class-name="small-padding fixed-width"
width="200" <!-- 退料数量 -->
prop="preNum" <td style="text-align: center">{{ row.preNum }}</td>
>
</el-table-column> <!-- 编号 -->
<el-table-column <td style="text-align: center">
label="编号" <span v-if="row.manageType == 1">无编码</span>
align="center" <span
class-name="small-padding fixed-width" v-if="row.manageType == 0"
width="200" style="color: rgb(2, 167, 240); cursor: pointer"
prop="num" @click="checkDetail(row)"
> >
<template slot-scope="scope"> 查看明细
<span v-if="scope.row.manageType==1">无编码</span> </span>
<span v-if="scope.row.manageType==0" style="color: rgb(2, 167, 240);" @click="checkDetail(scope.row)">查看明细</span> </td>
</template> </tr>
</el-table-column> </tbody>
<!-- <el-table-column prop="remarks" label="备注" align="center"> </table>
<template slot-scope="scope">
<span
@click="remarksClick"
style="color: #1890ff; cursor: pointer"
>{{ scope.row.remarks }}</span
>
</template>
</el-table-column> -->
</el-table>
<div class="order_footer"> <div class="order_footer">
<!-- <div>审核人：</div> --> <!-- <div>审核人：</div> -->
<div class="item" style="width: 28%;display: flex;align-items: center;flex-wrap: wrap;"> <div class="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 35%;">审核人：</div> <div style="width: 35%">审核人：</div>
<!-- <div style="width: 65%;display: flex;align-items: center;flex-wrap: wrap;" v-if="directAuditSignUrl"> <!-- <div style="width: 65%;display: flex;align-items: center;flex-wrap: wrap;" v-if="directAuditSignUrl">
<div style="width: 80%;margin-left: 10px;"> <div style="width: 80%;margin-left: 10px;">
<img :src="directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;" alt=""> <img :src="directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;" alt="">
</div> </div>
</div> --> </div> -->
</div> </div>
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;"> <div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 30%;">退料人：</div> <div style="width: 30%">退料人：</div>
<div style="width: 70%;display: flex;align-items: center;flex-wrap: wrap;" v-if="rowObj.backSignUrl"> <div style="width: 70%; display: flex; align-items: center; flex-wrap: wrap" v-if="rowObj.backSignUrl">
<div style="width: 80%;margin-left: 20px;"> <div style="width: 80%; margin-left: 20px">
<img :src="rowObj.backSignUrl" style="width: 40px;height: 100px;max-width: 100%;" :class="{'is-rotate': rowObj.backSignType == 0}" alt=""> <img
</div> :src="rowObj.backSignUrl"
style="width: 40px; height: 100px; max-width: 100%"
:class="{ 'is-rotate': rowObj.backSignType == 0 }"
alt=""
/>
</div> </div>
</div>
</div>
<div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 30%">制单：</div>
</div> </div>
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
<span>制单：</span>
</div>
</div> </div>
</div> </div>
<!-- </vue-easy-print> --> <!-- </vue-easy-print> -->
<div>
<el-button type="primary" @click="print">打印</el-button>
</div>
</div> </div>
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<div style="height: 500px;overflow-y: scroll;padding: 0 20px;"> <div style="height: 500px; overflow-y: scroll; padding: 0 20px">
<!-- <vue-easy-print tableShow ref="remarksPrintRef"> --> <!-- <vue-easy-print tableShow ref="remarksPrintRef"> -->
<div id="checkIdTwo"> <div id="checkIdTwo">
<div class="remarks_box"> <div class="remarks_box">
<div class="remarks_box_title">退料编码明细</div> <div class="remarks_box_title">退料编码明细</div>
</div> </div>
<div class="info" style="margin-top: 10px; display: flex; align-items: center;"> <div class="info" style="margin-top: 10px; display: flex; align-items: center">
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;"> <div class="item" style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
<div> <div>
<span>工程名称：</span><span>{{ rowObj.proName }}</span> <span>工程名称：</span>
<span>{{ rowObj.proName }}</span>
</div>
<div>
<span>退料时间：</span>
<span>{{ rowObj.createTime }}</span>
</div>
</div> </div>
<div> <div
<span>退料时间：</span><span>{{ rowObj.createTime }}</span> class="item"
style="width: 50%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px; text-align: right"
>
<div>
<span>退料单位：</span>
<span>{{ rowObj.unitName }}</span>
</div>
<div>
<span>单号：</span>
<span>{{ rowObj.code }}</span>
</div>
</div> </div>
</div> </div>
<div class="item" style="width: 50%;flex-shrink: 0;margin-bottom: 5px;font-size: 14px;text-align: right;">
<div> <table border="1" cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse">
<span>退料单位：</span><span>{{ rowObj.unitName }}</span> <thead>
</div> <tr>
<div> <th style="width: 60px; text-align: center">序号</th>
<span>单号：</span><span>{{ rowObj.code }}</span> <th style="text-align: center">物资类型</th>
</div> <th style="text-align: center">物资名称</th>
</div> <th style="text-align: center">规格型号</th>
</div> <th style="text-align: center">设备编号</th>
<el-table :data="tableSubData" border style="width: 100%;"> </tr>
<el-table-column label="序号" align="center" type="index" width="60px"/> </thead>
<el-table-column prop="materialType" label="物资类型" align="center"> <tbody>
</el-table-column> <tr v-for="(row, index) in tableSubData" :key="index">
<el-table-column prop="typeName" label="物资名称" align="center"> <!-- 序号 -->
</el-table-column> <td style="text-align: center">{{ index + 1 }}</td>
<el-table-column prop="materialName" label="规格型号" align="center">
</el-table-column> <!-- 物资类型 -->
<el-table-column prop="maCode" label="设备编号" align="center"> <td style="text-align: center">{{ row.materialType }}</td>
</el-table-column>
</el-table> <!-- 物资名称 -->
<div class="order_footer"> <td style="text-align: center">{{ row.typeName }}</td>
<div class="item" style="width: 28%;display: flex;align-items: center;flex-wrap: wrap;">
<div style="width: 35%;">审核人：</div> <!-- 规格型号 -->
<div style="width: 65%;display: flex;align-items: center;flex-wrap: wrap;" v-if="directAuditSignUrl"> <td style="text-align: center">{{ row.materialName }}</td>
<div style="width: 80%;margin-left: 10px;">
<img :src="directAuditSignUrl" style="width: 40px;height: 100px;transform: rotate(-90deg);max-width: 100%;" alt=""> <!-- 设备编号 -->
</div> <td style="text-align: center">{{ row.maCode }}</td>
</tr>
</tbody>
</table>
<div class="order_footer">
<div class="item" style="width: 28%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 35%">审核人：</div>
<div style="width: 65%; display: flex; align-items: center; flex-wrap: wrap" v-if="directAuditSignUrl">
<div style="width: 80%; margin-left: 10px">
<img
:src="directAuditSignUrl"
style="width: 40px; height: 100px; transform: rotate(-90deg); max-width: 100%"
alt=""
/>
</div> </div>
</div>
</div>
<div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 30%">退料人：</div>
</div>
<div class="item" style="width: 24%; display: flex; align-items: center; flex-wrap: wrap">
<div style="width: 30%">制单：</div>
</div>
</div> </div>
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
<span>退料人：</span>
</div>
<div class="item" style="width: 24%;display: flex;align-items: center;flex-wrap: wrap;">
<span>制单：</span>
</div>
</div> </div>
<!-- </vue-easy-print> -->
</div> </div>
<!-- </vue-easy-print> --> <div slot="footer" class="dialog-footer" style="text-align: center">
</div>
<div style="margin-top: 10px">
<el-button type="primary" @click="remarksPrint">打印</el-button> <el-button type="primary" @click="remarksPrint">打印</el-button>
<el-button @click="open = false">关 闭</el-button>
</div> </div>
</el-dialog> </el-dialog>
<div slot="footer" class="dialog-footer" style="text-align: center">
<el-button type="primary" @click="print">打印</el-button>
<el-button @click="dialogShowFlag = false">关 闭</el-button>
</div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import vueEasyPrint from 'vue-easy-print'; import vueEasyPrint from 'vue-easy-print'
import { import { getBackApplyInfo, updatePrintStatus } from '@/api/back/index.js'
getBackApplyInfo, import html2canvas from 'html2canvas'
updatePrintStatus, import jsPDF from 'jspdf'
} from '@/api/back/index.js' import printJS from 'print-js'
import html2canvas from 'html2canvas'; import request from '@/utils/request'
import jsPDF from 'jspdf';
import printJS from 'print-js';
import request from "@/utils/request";
// import { getViewByApply,materialReturnNoteByApply } from "@/api/claimAndRefund/return.js" // import { getViewByApply,materialReturnNoteByApply } from "@/api/claimAndRefund/return.js"
export default { export default {
components: { vueEasyPrint }, components: { vueEasyPrint },
@ -199,12 +228,12 @@ export default {
// 对应操作数据键值 // 对应操作数据键值
priKey: { priKey: {
type: [String, Number], type: [String, Number],
default: "" default: ''
}, },
//弹窗标题 //弹窗标题
dialogTitle: { dialogTitle: {
type: String, type: String,
default: "" default: ''
}, },
rowObj: { rowObj: {
type: Object, type: Object,
@ -214,17 +243,17 @@ export default {
watch: { watch: {
isShowFlag(val) { isShowFlag(val) {
if (val) { if (val) {
this.init(); this.init()
} }
} }
}, },
computed: { computed: {
dialogShowFlag: { dialogShowFlag: {
get() { get() {
return this.isShowFlag; return this.isShowFlag
}, },
set(v) { set(v) {
this.$emit("update:isShowFlag", v); this.$emit('update:isShowFlag', v)
} }
} }
}, },
@ -234,9 +263,9 @@ export default {
tableData: [], tableData: [],
tableSubData: [], tableSubData: [],
open: false, open: false,
title: "", title: '',
directAuditSignUrl: '', directAuditSignUrl: ''
}; }
}, },
methods: { methods: {
init() { init() {
@ -248,158 +277,167 @@ export default {
console.log(res) console.log(res)
this.tableData = res.data.backApplyDetailsList this.tableData = res.data.backApplyDetailsList
this.directAuditSignUrl = res.data.backApplyInfo.directAuditSignUrl this.directAuditSignUrl = res.data.backApplyInfo.directAuditSignUrl
console.log('222222222',this.directAuditSignUrl) console.log('222222222', this.directAuditSignUrl)
}) })
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.dialogShowFlag = false; this.dialogShowFlag = false
}, },
print() { print() {
const element = document.getElementById('checkId'); const element = document.getElementById('checkId')
// 确保元素存在 // 确保元素存在
if (!element) { if (!element) {
this.$message.error('未找到要打印的元素'); this.$message.error('未找到要打印的元素')
return; return
} }
this.$modal.loading('正在生成单据，请稍候...'); this.$modal.loading('正在生成单据，请稍候...')
// 查找页面中所有图片并预加载 // 查找页面中所有图片并预加载
const images = element.querySelectorAll('img'); const images = element.querySelectorAll('img')
const imagePromises = []; const imagePromises = []
// 为每个图片创建加载或错误处理的Promise // 为每个图片创建加载或错误处理的Promise
images.forEach(img => { images.forEach(img => {
// 如果图片已经加载完成，不需要处理 // 如果图片已经加载完成，不需要处理
if (img.complete) return; if (img.complete) return
const promise = new Promise((resolve) => { const promise = new Promise(resolve => {
const originalSrc = img.src; const originalSrc = img.src
// 图片加载成功 // 图片加载成功
img.onload = function() { img.onload = function () {
resolve(); resolve()
}; }
// 图片加载失败，使用空白图片替代 // 图片加载失败，使用空白图片替代
img.onerror = function() { img.onerror = function () {
console.log('图片加载失败，使用空白图片替代:', originalSrc); console.log('图片加载失败，使用空白图片替代:', originalSrc)
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // 透明1x1像素图片 img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1像素图片
resolve(); resolve()
}; }
}); })
imagePromises.push(promise); imagePromises.push(promise)
}); })
// 等待所有图片加载完成或失败后再生成PDF // 等待所有图片加载完成或失败后再生成PDF
Promise.all(imagePromises).then(() => { Promise.all(imagePromises)
// 使用html2canvas将DOM元素转换为canvas .then(() => {
html2canvas(element, { // 使用html2canvas将DOM元素转换为canvas
scale: 2, // 提高清晰度 html2canvas(element, {
useCORS: true, // 允许加载跨域图片 scale: 2, // 提高清晰度
allowTaint: true, useCORS: true, // 允许加载跨域图片
ignoreElements: (element) => { allowTaint: true,
// 忽略所有图片加载错误 ignoreElements: element => {
return element.nodeName === 'IMG' && !element.complete; // 忽略所有图片加载错误
}, return element.nodeName === 'IMG' && !element.complete
logging: false, // 关闭日志记录 },
imageTimeout: 3000, // 图片加载超时时间 logging: false, // 关闭日志记录
backgroundColor: '#ffffff' imageTimeout: 3000, // 图片加载超时时间
}).then(canvas => { backgroundColor: '#ffffff'
// 创建PDF文档 })
const pdf = new jsPDF('p', 'mm', 'a4'); .then(canvas => {
// 创建PDF文档
const pdf = new jsPDF('p', 'mm', 'a4')
// 获取canvas的宽度和高度 // 获取canvas的宽度和高度
const imgWidth = 210; // A4纸的宽度(mm) const imgWidth = 210 // A4纸的宽度(mm)
const pageHeight = 297; // A4纸的高度(mm) const pageHeight = 297 // A4纸的高度(mm)
const imgHeight = canvas.height * imgWidth / canvas.width; const imgHeight = (canvas.height * imgWidth) / canvas.width
// 将canvas转换为图片 // 将canvas转换为图片
const imgData = canvas.toDataURL('image/jpeg', 1.0); const imgData = canvas.toDataURL('image/jpeg', 1.0)
// 添加图片到PDF // 添加图片到PDF
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight); pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)
// 生成PDF文件名 // 生成PDF文件名
const fileName = `退料单_${this.rowObj.code || '未命名'}_${new Date().getTime()}.pdf`; const fileName = `退料单_${this.rowObj.code || '未命名'}_${new Date().getTime()}.pdf`
// 将PDF转换为Blob对象 // 将PDF转换为Blob对象
const pdfBlob = pdf.output('blob'); const pdfBlob = pdf.output('blob')
// 创建FormData对象用于上传 // 创建FormData对象用于上传
const formData = new FormData(); const formData = new FormData()
formData.append('file', pdfBlob, fileName); formData.append('file', pdfBlob, fileName)
formData.append('id', this.rowObj.proId); formData.append('id', this.rowObj.proId)
// 上传到服务器 // 上传到服务器
this.$modal.closeLoading(); this.$modal.closeLoading()
// 调用上传API - 使用request // 调用上传API - 使用request
request.post('/material/back_apply_info/uploadPdf', formData, { request
headers: { .post('/material/back_apply_info/uploadPdf', formData, {
'Content-Type': 'multipart/form-data' headers: {
} 'Content-Type': 'multipart/form-data'
}).then(response => { }
if (response.code === 200) { })
this.$modal.msgSuccess('单据文件已保存到服务器'); .then(response => {
if (response.code === 200) {
this.$modal.msgSuccess('单据文件已保存到服务器')
// 上传成功后执行打印 // 上传成功后执行打印
printJS({ printJS({
printable: 'checkId', printable: 'checkId',
type: 'html', type: 'html',
targetStyles: ['*'], targetStyles: ['*'],
maxWidth:'1400' maxWidth: '1400'
}); })
// 更新打印状态 // 更新打印状态
updatePrintStatus(this.rowObj.id).then(response => { updatePrintStatus(this.rowObj.id)
if (response.code === 200) { .then(response => {
// 如果需要刷新列表 if (response.code === 200) {
this.$emit('refresh'); // 如果需要刷新列表
} this.$emit('refresh')
}).catch(() => { }
this.$modal.msgError("打印状态更新失败"); })
}); .catch(() => {
} else { this.$modal.msgError('打印状态更新失败')
this.$modal.msgError('保存单据文件失败'); })
} } else {
}).catch(() => { this.$modal.msgError('保存单据文件失败')
this.$modal.msgError('上传单据文件时发生错误'); }
})
.catch(() => {
this.$modal.msgError('上传单据文件时发生错误')
// 即使上传失败也执行打印 // 即使上传失败也执行打印
printJS({ printJS({
printable: 'checkId', printable: 'checkId',
type: 'html', type: 'html',
targetStyles: ['*'], targetStyles: ['*'],
maxWidth:'1400' maxWidth: '1400'
}); })
// 更新打印状态 // 更新打印状态
updatePrintStatus(this.rowObj.id).then(response => { updatePrintStatus(this.rowObj.id)
if (response.code === 200) { .then(response => {
// 如果需要刷新列表 if (response.code === 200) {
this.$emit('refresh'); // 如果需要刷新列表
} this.$emit('refresh')
}).catch(() => { }
this.$modal.msgError("打印状态更新失败"); })
}); .catch(() => {
}); this.$modal.msgError('打印状态更新失败')
}).catch(error => { })
this.$modal.closeLoading(); })
this.$modal.msgError('生成单据时发生错误'); })
console.error('生成单据错误:', error); .catch(error => {
}); this.$modal.closeLoading()
}).catch(error => { this.$modal.msgError('生成单据时发生错误')
this.$modal.closeLoading(); console.error('生成单据错误:', error)
this.$modal.msgError('处理图片时发生错误'); })
console.error('处理图片错误:', error); })
}); .catch(error => {
this.$modal.closeLoading()
this.$modal.msgError('处理图片时发生错误')
console.error('处理图片错误:', error)
})
}, },
checkDetail(row) { checkDetail(row) {
this.title = '查看' this.title = '查看'
@ -407,131 +445,137 @@ export default {
this.open = true this.open = true
}, },
remarksPrint() { remarksPrint() {
const element = document.getElementById('checkIdTwo'); const element = document.getElementById('checkIdTwo')
// 确保元素存在 // 确保元素存在
if (!element) { if (!element) {
this.$message.error('未找到要打印的元素'); this.$message.error('未找到要打印的元素')
return; return
} }
this.$modal.loading('正在生成单据，请稍候...'); this.$modal.loading('正在生成单据，请稍候...')
// 查找页面中所有图片并预加载 // 查找页面中所有图片并预加载
const images = element.querySelectorAll('img'); const images = element.querySelectorAll('img')
const imagePromises = []; const imagePromises = []
// 为每个图片创建加载或错误处理的Promise // 为每个图片创建加载或错误处理的Promise
images.forEach(img => { images.forEach(img => {
// 如果图片已经加载完成，不需要处理 // 如果图片已经加载完成，不需要处理
if (img.complete) return; if (img.complete) return
const promise = new Promise((resolve) => { const promise = new Promise(resolve => {
const originalSrc = img.src; const originalSrc = img.src
// 图片加载成功 // 图片加载成功
img.onload = function() { img.onload = function () {
resolve(); resolve()
}; }
// 图片加载失败，使用空白图片替代 // 图片加载失败，使用空白图片替代
img.onerror = function() { img.onerror = function () {
console.log('图片加载失败，使用空白图片替代:', originalSrc); console.log('图片加载失败，使用空白图片替代:', originalSrc)
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // 透明1x1像素图片 img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1像素图片
resolve(); resolve()
}; }
}); })
imagePromises.push(promise); imagePromises.push(promise)
}); })
// 等待所有图片加载完成或失败后再生成PDF // 等待所有图片加载完成或失败后再生成PDF
Promise.all(imagePromises).then(() => { Promise.all(imagePromises)
// 使用html2canvas将DOM元素转换为canvas .then(() => {
html2canvas(element, { // 使用html2canvas将DOM元素转换为canvas
scale: 2, // 提高清晰度 html2canvas(element, {
useCORS: true, // 允许加载跨域图片 scale: 2, // 提高清晰度
allowTaint: true, useCORS: true, // 允许加载跨域图片
ignoreElements: (element) => { allowTaint: true,
// 忽略所有图片加载错误 ignoreElements: element => {
return element.nodeName === 'IMG' && !element.complete; // 忽略所有图片加载错误
}, return element.nodeName === 'IMG' && !element.complete
logging: false, // 关闭日志记录 },
imageTimeout: 3000, // 图片加载超时时间 logging: false, // 关闭日志记录
backgroundColor: '#ffffff' imageTimeout: 3000, // 图片加载超时时间
}).then(canvas => { backgroundColor: '#ffffff'
// 创建PDF文档 })
const pdf = new jsPDF('p', 'mm', 'a4'); .then(canvas => {
// 创建PDF文档
const pdf = new jsPDF('p', 'mm', 'a4')
// 获取canvas的宽度和高度 // 获取canvas的宽度和高度
const imgWidth = 210; // A4纸的宽度(mm) const imgWidth = 210 // A4纸的宽度(mm)
const pageHeight = 297; // A4纸的高度(mm) const pageHeight = 297 // A4纸的高度(mm)
const imgHeight = canvas.height * imgWidth / canvas.width; const imgHeight = (canvas.height * imgWidth) / canvas.width
// 将canvas转换为图片 // 将canvas转换为图片
const imgData = canvas.toDataURL('image/jpeg', 1.0); const imgData = canvas.toDataURL('image/jpeg', 1.0)
// 添加图片到PDF // 添加图片到PDF
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight); pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)
// 生成PDF文件名 // 生成PDF文件名
const fileName = `退料编码明细_${this.rowObj.code || '未命名'}_${new Date().getTime()}.pdf`; const fileName = `退料编码明细_${this.rowObj.code || '未命名'}_${new Date().getTime()}.pdf`
// 将PDF转换为Blob对象 // 将PDF转换为Blob对象
const pdfBlob = pdf.output('blob'); const pdfBlob = pdf.output('blob')
// 创建FormData对象用于上传 // 创建FormData对象用于上传
const formData = new FormData(); const formData = new FormData()
formData.append('file', pdfBlob, fileName); formData.append('file', pdfBlob, fileName)
formData.append('id', this.rowObj.proId); formData.append('id', this.rowObj.proId)
// 上传到服务器 // 上传到服务器
this.$modal.closeLoading(); this.$modal.closeLoading()
// 调用上传API - 使用request // 调用上传API - 使用request
request.post('/material/back_apply_info/uploadPdf', formData, { request
headers: { .post('/material/back_apply_info/uploadPdf', formData, {
'Content-Type': 'multipart/form-data' headers: {
} 'Content-Type': 'multipart/form-data'
}).then(response => { }
if (response.code === 200) { })
this.$modal.msgSuccess('单据PDF文件已保存到服务器'); .then(response => {
if (response.code === 200) {
this.$modal.msgSuccess('单据PDF文件已保存到服务器')
// 上传成功后执行打印 // 上传成功后执行打印
printJS({ printJS({
printable: 'checkIdTwo', printable: 'checkIdTwo',
type: 'html', type: 'html',
targetStyles: ['*'], targetStyles: ['*'],
maxWidth:'1400' maxWidth: '1400'
}); })
} else { } else {
this.$modal.msgError('保存明细单据文件失败'); this.$modal.msgError('保存明细单据文件失败')
} }
}).catch(() => { })
this.$modal.msgError('上传明细单据文件时发生错误'); .catch(() => {
this.$modal.msgError('上传明细单据文件时发生错误')
// 即使上传失败也执行打印
printJS({
printable: 'checkIdTwo',
type: 'html',
targetStyles: ['*'],
maxWidth:'1400'
});
});
}).catch(error => {
this.$modal.closeLoading();
this.$modal.msgError('生成单据时发生错误');
console.error('生成单据错误:', error);
});
}).catch(error => {
this.$modal.closeLoading();
this.$modal.msgError('处理图片时发生错误');
console.error('处理图片错误:', error);
});
},
// 即使上传失败也执行打印
printJS({
printable: 'checkIdTwo',
type: 'html',
targetStyles: ['*'],
maxWidth: '1400'
})
})
})
.catch(error => {
this.$modal.closeLoading()
this.$modal.msgError('生成单据时发生错误')
console.error('生成单据错误:', error)
})
})
.catch(error => {
this.$modal.closeLoading()
this.$modal.msgError('处理图片时发生错误')
console.error('处理图片错误:', error)
})
}
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .order_box { // .order_box {