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