中航光电热表web
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

940 lines
37 KiB

<template>
<el-dialog title="打印预览" append-to-body :modelValue="showPrint" fullscreen width="85%"
@close="closeDialog" :custom-class="isPrint ? 'noprint' : 'rbdyBox'" @opened="open">
<!-- @click="printData" -->
<el-button v-print="printConfig" type="primary" class="printButton no-print">打 印</el-button>
<div v-loading="loading" id="printMe" ref="printContent" class="printBox">
<!-- <div class="printTitle">
<div style="text-align:left;">JONHON受控</div>
<div style="width: 88%;text-align:center;">热表分厂质量记录卡</div>
</div> -->
<div class="fixTopLeft">JONHON受控</div>
<div class="printTitle">热表分厂质量记录卡</div>
<div class="tableNo" style="text-align: left;width: 180px;float: right;">表号:</div>
<table id="cus-table" cellspacing="0">
<template v-if="modelOne!= null && modelOne.dsPart!= null">
<tr>
<td colspan="1">零件号</td>
<td colspan="2">{{modelOne.dsPart.partCode || '/'}}</td>
<td colspan="1">产品型号</td>
<td colspan="2">{{ modelOne.wo.pjYieldOrder.productType || '/' }}</td>
<td colspan="1">生产标识</td>
<td colspan="2">{{modelOne.wo.pjYieldOrder.prodIdent || '/'}}</td>
</tr>
<tr>
<td colspan="1">批次号</td>
<td colspan="2">{{ modelOne.wo.batchNo || '/'}}</td>
<td colspan="1">名称</td>
<td colspan="2">{{ modelOne.dsPart.partName || '/'}}</td>
<td colspan="1">数量</td>
<td colspan="2">{{ modelOne.wo.pjYieldOrder.poQty || '/' }}</td>
</tr>
<tr>
<td colspan="1">硬度</td>
<td colspan="5">{{ modelOne.dsPart.hardness || '/'}}</td>
<td colspan="1">零件面积(dm²)</td>
<td colspan="2">{{ modelOne.wo.pjYieldOrder.poArea || '/' }}</td>
</tr>
<tr>
<td colspan="1">镀种</td>
<td colspan="5">{{ modelOne.dsPart.plate || '/' }}</td>
<td colspan="1">材料</td>
<td colspan="2">{{ modelOne.dsPart.material || '/' }}</td>
</tr>
<tr>
<td colspan="1">工艺路线</td>
<td colspan="8">{{ modelOne.wo.pjYieldOrder.primaryCraft || '/' }}</td>
</tr>
<tr>
<td colspan="1">质量信息</td>
<td colspan="8">{{ modelOne.dsPart.keyInfo || '/' }}</td>
</tr>
</template>
<template v-if="modelTwo && modelTwo.length>0">
<tr>
<td colspan="9" style="font-size:21px;">生产过程</td>
</tr>
<template v-for="(item,index) in modelTwo" >
<tr v-if="index != 0" style="height: 20px;"></tr>
<tr>
<td colspan="9" style="font-size:16px;">
{{item.orders}} - {{item.procedureSet.ppsName}} 工序详情
</td>
</tr>
<!-- <tr v-if="item.selfInspection && JSON.stringify(item.selfInspection) != '{}'">
<td colspan="1">自检</td>
<td colspan="4">{{item.selfInspection.content}}</td>
<td colspan="1">结论</td>
<td colspan="3">{{item.selfInspection.conclusion}}</td>
</tr> -->
<tr v-if="item.procedureSet.ppsName == '上挂' || item.procedureSet.ppsName == '超声波清洗'">
<td colspan="1">自检</td>
<td colspan="3">零件表面无油污、锈蚀、磕碰伤、划痕等缺陷</td>
<td colspan="2">结论</td>
<td colspan="3">合格</td>
</tr>
<!-- <template v-if="item.auditFile && JSON.stringify(item.auditFile) != '{}'">
<tr>
<td colspan="5">工艺文件编号/版本号</td>
<td colspan="4">{{item.auditFile.papers || '/'}}</td>
</tr>
<tr>
<td colspan="5">CPS文件编号/版本号</td>
<td colspan="4">{{item.auditFile.referenceFile || '/'}}</td>
</tr>
</template> -->
<template v-if="item.procedureSet.ppsName != '镀后检验' && item.procedureSet.ppsName != '镀后接收'">
<tr>
<td colspan="4">工艺文件编号/版本号</td>
<td colspan="5">{{item.papers || '/'}}</td>
</tr>
<tr>
<td colspan="4">CPS文件编号/版本号</td>
<td colspan="5">{{item.referenceFile || '/'}}</td>
</tr>
</template>
<tr v-if="(item && item.gjCode && !item.fbCode && !item.deviceCode) || (item && item.fbCode)">
<td colspan="1">操作者</td>
<td colspan="1">{{item.createMan || '/'}}</td>
<td colspan="1" v-if="item.gjCode && !item.fbCode && !item.deviceCode ">挂具编号</td>
<td colspan="1" v-if="item.gjCode && !item.fbCode && !item.deviceCode">{{item.gjCode || '/'}}</td>
<td colspan="1" v-if="item.fbCode">飞拔编号</td>
<td colspan="1" v-if="item.fbCode">{{item.fbCode || '/'}}</td>
<td colspan="2" v-if="item.procedureSet.ppsName=='荧光检测'">
{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}
</td>
<td colspan="2" v-else>{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}</td>
<template v-if="item.procedureSet.ppsName=='荧光检测'">
<td colspan="3">
<div style="display:flex;align-items:center;justify-content:center;">
<img :src="testManImg(index) ? testManImg(index):'/'" style="width:70px;height:25px;margin-right:6px;">{{ item.factEndTime || '/' }}
</div>
<!-- <img :src="testManImg(index) ? testManImg(index):'/'" style="width:70px;height:25px;margin:6px 0 6px 0"></br>{{ item.factEndTime || '/' }} -->
</td>
</template>
<td colspan="3" v-else>
{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : (testMan(index) ? (testMan(index) + ' / '+item.factEndTime):'/') }}
<!-- 曹鹏飞1/2025-06-28 -->
</td>
</tr>
<tr v-else>
<td :colspan="item.procedureSet.ppsName == '镀后检验' || item.procedureSet.ppsName == '镀后接收' ? '4' : '1'">{{item.procedureSet.ppsName == '镀后接收' ? '保管员' : '操作者'}}</td>
<td :colspan="item.procedureSet.ppsName == '镀后检验' || item.procedureSet.ppsName == '镀后接收' ? '5' : '3'">{{item.createMan || '/'}}</td>
<td colspan="2" v-if="item.procedureSet.ppsName=='荧光检测'">
{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}
</td>
<td colspan="2" v-if="item.procedureSet.ppsName != '荧光检测' && item.procedureSet.ppsName != '镀后接收' && item.procedureSet.ppsName != '镀后检验'">
{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}</td>
<template v-if="item.procedureSet.ppsName=='荧光检测'">
<!-- <td colspan="3">
<img :src="testManImg(index) ? testManImg(index):'/'" style="width:70px;height:25px;margin:6px 0 6px 0">
</br>
{{ item.factEndTime || '/' }}
</td> -->
<td colspan="3">
<div style="display:flex;align-items:center;justify-content:center;">
<img :src="testManImg(index) ? testManImg(index):'/'" style="width:70px;height:25px;margin-right:6px;">{{ item.factEndTime || '/' }}
</div>
</td>
</template>
<td colspan="3" v-if="item.procedureSet.ppsName != '荧光检测' && item.procedureSet.ppsName != '镀后接收' && item.procedureSet.ppsName != '镀后检验'">
{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : (testMan(index) ? (testMan(index) + ' / '+item.factEndTime):'/') }}
<!-- {{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : (testMan(index) ? (testMan(index) + ' / '+item.factEndTime):'/') }} -->
<!-- 曹鹏飞2/2025-06-28 -->
</td>
</tr>
<tr v-if="item.deviceCode && item.deviceCode != ''">
<td colspan="1">设备编号</td>
<td colspan="3">{{item.deviceCode || '/'}}</td>
<td colspan="2">有效期</td>
<td colspan="3">/</td>
</tr>
<tr v-if="item.slotList && item.slotList.length>0">
<td colspan="9" >同槽信息</td>
</tr>
<tr v-if="item.tankInfo1 && JSON.stringify(item.tankInfo1) != {}">
<td colspan="1">掺镀件面积(dm²)</td>
<td colspan="2">{{item.tankInfo.cdjArea}}</td>
<td colspan="1">陪镀件面积(dm²)</td>
<td colspan="1">{{item.tankInfo.pdjArea}}</td>
<td colspan="1">挂具面积(dm²)</td>
<td colspan="3">{{item.tankInfo.gjArea}}</td>
</tr>
<template v-if="item.slotList && item.slotList.length>0">
<tr>
<td colspan="1">同槽编号</td>
<td colspan="2">零件号</td>
<td colspan="1">批次号</td>
<td>数量</td>
<td>生产标识</td>
<td>面积(dm²)</td>
<td colspan="2">总面积(dm²)</td>
</tr>
<tr v-for="(slot,index) in item.slotList">
<td v-if="index === 0" :rowspan="item.slotList.length">{{slot.mtuCode || '/'}}</td>
<td v-if="!slot.cdj" colspan="2">{{slot.partCode || '/'}}</td>
<td v-if="!slot.cdj" colspan="1">{{slot.batchNo || '/'}}</td>
<td v-if="!slot.cdj" >{{slot.workQty || '/'}}</td>
<td v-if="!slot.cdj" >{{slot.prodIdent || '/'}}</td>
<td v-if="!slot.cdj" >{{slot.area || '/'}}</td>
<td v-if="slot.cdj" colspan="5">{{slot.cdj}}</td>
<td v-if="slot.cdj">{{slot.cdjArea}}</td>
<td v-if="index === 0" :rowspan="item.slotList.length" colspan="2">{{slot.totalArea || '/'}}</td>
</tr>
</template>
<template v-if="item.dsRbFilePreserveSlotList && item.dsRbFilePreserveSlotList.length>0">
<tr >
<td colspan="1">槽位/工步</td>
<td colspan="4">工艺要求</td>
<td colspan="4">实际参数</td>
</tr>
<template v-for="(itemSlot, indexSlot) in item.dsRbFilePreserveSlotList" :key="itemSlot.slotName + indexSlot">
<component
:is="getTemplateComponent(itemSlot.rfpsType)"
:itemSlot="itemSlot"
:indexSlot="indexSlot"
:quality="true"
/>
</template>
</template>
</template>
</template>
</table>
</div>
</el-dialog>
</template>
<script>
import {getWordDetail} from '@/api/qualityManagement/inspectionArchiving/eRecord'
import Templates from "@/views/qualityTemplate/index.js";
import { getTemplateComponent } from '@/utils/templateMapper.js';
import printOrderJson from './printOrder.json';
export default {
props:{
showPrint: {
type: Boolean,
default: false
},
checkedList: {
type: Array,
default: () => []
},
printType:{
type:String,
default:''
},
woId:{
type:String,
default:''
},
rbChecked:{
type:Array,
default:() =>[]
}
},
components: {
...Templates,
},
data(){
return{
// printObj: {
// id: 'printMe',
// popTitle: '打印66',
// ignoreClass: 'noprint',
// endCallback: (e) => {
// console.log(e, 5555);
// }
// },
printConfig :{
id: 'printMe',
popTitle: '打印66',
ignoreClass: 'noprint',
endCallback: (e) => {
console.log(e, 5555);
},
// extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css',
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
// preview: true,
// extraCss: `
// @media print {
// body { font-size: 12px; }
// table { width: 98% !important; border-collapse: collapse; }
// .no-print { display: none !important; }
// }
// `
},
loading:true,
dsPart:{},
modelOne: {
// wo: { pjYieldOrder: {}},
// checkList: [],
// wpList: [
// {
// prWorkOrder: { pjYieldOrder: {}},
// procedureSet: {},
// partCode: '',
// woCode: ''
// }
// ],
// dsPart: {}
},
isPrint:false,
modelTwo: [
// {
// orders: '0005',ppsName:'上挂',
// Hanger:true,
// selfInspection:{content:"零件表面无油污、锈蚀、磕碰伤、划痕等缺陷",conclusion:"合格"}
// },
// {
// orders: '0010',ppsName:'清洗',
// deviceCode:"9652249",
// qcProduceRunsList:[
// // {
// // insertIndex: "1",
// // rfpsType: 2,
// // // slotIndex: "1",
// // slotName: "超声波除油",
// // childrenList:[
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2025/06/28 09:00:49"
// // },
// // {
// // "rfpsId": "2",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "结束",
// // "paramValue": "2025/06/28 09:30:49"
// // },
// // {
// // "rfpsId": "2",
// // "detailName": "温度(℃)",
// // "detailIndex": "1",
// // "ask": "40~60",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "参数名称1",
// // "paramValue": "55"
// // },
// // ]
// // },
// {
// insertIndex: "1",
// rfpsType:22,
// // slotIndex: "1",
// slotName: "自来水洗",
// childrenList:[
// {
// "rfpsId": "1",
// "detailName": "时间(min)",
// "detailIndex": "1",
// "ask": "20~40",
// "rfpdTime": "2026-3-6 18:36:44",
// "qualified": "合格",
// "paramName": "开始",
// "paramValue": "2"
// },
// {
// "rfpsId": "1",
// "detailName": "时间(min)",
// "detailIndex": "1",
// "ask": "20~40",
// "rfpdTime": "2026-3-6 18:36:44",
// "qualified": "合格",
// "paramName": "开始",
// "paramValue": "2"
// },
// {
// "rfpsId": "1",
// "detailName": "时间(min)",
// "detailIndex": "1",
// "ask": "20~40",
// "rfpdTime": "2026-3-6 18:36:44",
// "qualified": "合格",
// "paramName": "开始",
// "paramValue": "2"
// },
// {
// "rfpsId": "1",
// "detailName": "时间(min)",
// "detailIndex": "1",
// "ask": "20~40",
// "rfpdTime": "2026-3-6 18:36:44",
// "qualified": "合格",
// "paramName": "开始",
// "paramValue": "2"
// },
// {
// "rfpsId": "1",
// "detailName": "时间(min)",
// "detailIndex": "1",
// "ask": "20~40",
// "rfpdTime": "2026-3-6 18:36:44",
// "qualified": "合格",
// "paramName": "开始",
// "paramValue": "2"
// },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// ]
// },
// // {
// // insertIndex: "1",
// // rfpsType: 1,
// // // slotIndex: "1",
// // slotName: "超声波除油",
// // childrenList:[
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // ]
// // },
// // {
// // insertIndex: "1",
// // rfpsType: 8,
// // // slotIndex: "1",
// // slotName: "超声波除油",
// // childrenList:[
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // ]
// // },
// // {
// // insertIndex: "1",
// // rfpsType: 3,
// // // slotIndex: "1",
// // slotName: "超声波除油",
// // childrenList:[
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "结束",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "开始",
// // "paramValue": "2"
// // },
// // {
// // "rfpsId": "1",
// // "detailName": "时间(min)",
// // "detailIndex": "1",
// // "ask": "20~40",
// // "rfpdTime": "2026-3-6 18:36:44",
// // "qualified": "合格",
// // "paramName": "结束",
// // "paramValue": "2"
// // },
// // ]
// // }
// ]
// },
// {
// orders: '0020',ppsName:'挂镀金',
// deviceCode:"9652249",
// tankInfo:{
// cdjArea:0,
// slotList:[
// {
// slotNo:"B- BD2025062814474772",
// partCode:'21E8-570-1122-L36',
// batchNo:'Y1702506402'
// },
// {
// slotNo:"B- BD2025062814474772",
// partCode:'21E8-570-1122-L37',
// batchNo:'Y1702506402'
// },
// {
// slotNo:"B- BD2025062814474772",
// partCode:'21E8-570-1122-L38',
// batchNo:'Y1702506402',
// }
// ]
// },
// }
],
modelThree: { checkList: [], procedureSet: {}},
modelFour: { procedureSet: {}, prWorkOrder: { pjYieldOrder: {}}},
modelFive: [],
}
},
mounted(){
},
methods:{
open(){
console.log('111111111111111111111111111')
// const { modelOne, modelTwo, modelThree, modelFour, modelFive } =
// printOrderJson.data;
// this.modelOne = modelOne
// this.modelTwo = modelTwo
// this.modelThree = modelThree
// this.modelFour = modelFour;
// this.modelFive = modelFive;
this.loading = true
getWordDetail({
woId:this.woId,
moduleList:this.rbChecked,
planList:this.checkedList
}).then(res =>{
console.log('res----------',res)
this.modelOne = res.data.data.modelOne
this.modelTwo = res.data.data.modelTwo
this.modelThree = res.data.data.modelThree
this.modelFour = res.data.data.modelFour;
this.modelFive = res.data.data.modelFive;
this.loading = false
})
},
// 获取本道工序下第一个检验工序第一个试验项目的检验员
testMan(index) {
let testWorkPlan = null;
for (var i = index; i < this.modelTwo.length; i++) {
if (this.modelTwo[i].procedureSet.ppsName.indexOf('检验') != -1) {
if (testWorkPlan == null) {
testWorkPlan = this.modelTwo[i];
if (this.modelThree && this.modelThree.checkList && this.modelThree.checkList.length > 0) {
const item = this.modelThree.checkList.find(
(item) =>
item.testOrders.indexOf(testWorkPlan.orders + '-') != -1
);
let checkInfo = this.modelTwo[i].procedureSet.ppsName=='荧光检测'?item.imgUrl:item.checkName
return checkInfo;
} else {
return null;
}
}
}
}
},
testManImg(index) {
let testWorkPlan = null;
console.log(9999999,this.modelTwo[index],index)
return this.modelTwo[index].workerImgUrl;
},
getTemplateComponent(type) {
const componentName = getTemplateComponent(type);
return componentName;
},
printData(){
// exportEchartsToPdf('printMe','热表分厂质量记录卡')
// window.print()
const overflowInfo = this.checkPrintOverflow();
console.log('打印页数:', overflowInfo.pageCount);
if (overflowInfo.isOverflow) {
this.addPageBreaks();
}
window.print();
// 打印后清理分页提示(可选)
setTimeout(() => {
this.removePageBreaks();
}, 1000);
},
closeDialog(){
this.$emit('closeDialog');
},
// 判断内容是否超出 A4 纸高度
checkPrintOverflow() {
const A4_HEIGHT = 297; // A4 纸高度 (mm)
const PRINT_MARGIN = 20; // 上下边距 (mm)
// const AVAILABLE_HEIGHT = (A4_HEIGHT - PRINT_MARGIN) * 3.78; // 转换为像素 (1mm ≈ 3.78px)
const AVAILABLE_HEIGHT = 880
console.log('AVA============',AVAILABLE_HEIGHT)
const printContent = this.$refs.printContent;
console.log('dom-----------',document.getElementById('printMe'))
console.log('hei-------',document.getElementById('printMe').offsetHeight)
console.log('prine---------',printContent)
if (!printContent) return false;
const contentHeight = printContent.scrollHeight;
const pageCount = Math.ceil(contentHeight / AVAILABLE_HEIGHT);
console.log('cont-------------',contentHeight)
console.log('pageCount-------------',pageCount)
return {
isOverflow: contentHeight > AVAILABLE_HEIGHT,
pageCount,
contentHeight,
availableHeight: AVAILABLE_HEIGHT
};
},
// 为表格添加分页符
addPageBreaks() {
const A4_HEIGHT_PX = 1123; // A4 纸可打印高度像素 (约 297mm - 20mm 边距)
const table = document.getElementById('cus-table');
if (!table) return;
const rows = table.querySelectorAll('tr');
let currentHeight = 0;
let page = 1;
rows.forEach((row, index) => {
const rowHeight = row.offsetHeight;
currentHeight += rowHeight;
// 接近页面底部时添加分页符
if (currentHeight > A4_HEIGHT_PX * page && index > 0) {
row.style.pageBreakBefore = 'always';
page++;
// 可选:添加分页提示行
this.insertPageBreakRow(table, row, page);
}
});
},
// 插入分页提示行
insertPageBreakRow(table, referenceRow, pageNum) {
const pageBreakRow = document.createElement('tr');
pageBreakRow.className = 'page-break-tip';
pageBreakRow.innerHTML = `
<td colspan="12" style="text-align:right;font-size:12px;color:#666;">
--- ${pageNum} ---
</td>
`;
referenceRow.parentNode.insertBefore(pageBreakRow, referenceRow);
},
// 清理分页提示
removePageBreaks() {
const pageBreakTips = document.querySelectorAll('.page-break-tip');
pageBreakTips.forEach(tip => tip.remove());
const rows = document.querySelectorAll('#cus-table tr');
rows.forEach(row => {
row.style.pageBreakBefore = '';
});
},
}
}
</script>
<style lang="scss" >
.printButton {
float: right;
margin-right: 8px;
margin-top: 16px;
}
.printBox {
width: 100%;
padding: 6px;
text-align: center;
.printTitle {
font-size: 22px;
font-weight: 700;
padding: 8px;
color:#606266
// margin-bottom: 6px;
}
.tableNo{
text-align: right;
margin-bottom: 10px;
}
table {
width: 100%;
table-layout: fixed;
tr {
width: 100%;
// table-layout: fixed;
page-break-inside: avoid;
// break-inside: avoid;
}
td {
// width: 11.1%;
width: 168px;
height: 30px;
border: 1px solid #000;
background: transparent;
color: #000;
font-size: 14px;
text-align: center;
padding: 0;
margin: 0;
}
// 分页提示行样式
.page-break-tip {
page-break-before: always;
break-before: always;
height: 20px;
border: none !important;
}
}
}
.fixTopLeft{
// position: fixed;
float: left;
top: 1;
left: 0;
font-family: 'SimHei';
font-size: 24px;
color: black;
}
@media print {
/* 隐藏不需要打印的元素:按钮、导航栏、侧边栏等 */
.no-print, header, footer, .sidebar, button {
display: none !important;
}
@page {
size: auto;
margin: 6mm;
}
/* 隐藏不需要打印的按钮或元素 */
.print-btn {
display: none !important;
}
/* 强制释放表格或容器的高度,防止内容被截断 */
.el-table__body-wrapper {
height: auto !important;
overflow: visible !important;
}
/* 确保背景色和图片能被打印出来 */
// * {
// -webkit-print-color-adjust: exact !important;
// print-color-adjust: exact !important;
// }
}
// @media print { @page { size:21cm 29.7cm } }
</style>
<style lang="scss" scoped>
@media print {
.no-print {
display: none !important;
}
.print-btn {
display: none !important;
}
body {
margin: 0;
// padding: 20px;
// font-size: 12pt;
background: white !important;
}
@page {
size: auto;
margin: 20mm;
}
.printBox {
width: 100% !important;
overflow: visible !important;
// background: red;
table {
width: 98% !important;
table-layout: fixed;
border-collapse: collapse;
tr {
page-break-inside: avoid;
// break-inside: avoid;
td {
width: 8.1%;
// &:first-child{
// width: 55px;
// }
}
}
}
.print-table,
.print-table td,
.print-table th {
border-collapse: collapse !important;
box-sizing: border-box !important;
page-break-inside: avoid !important;
}
.print-table{
width: 98% !important;
}
}
/* 隐藏 Element 表格的固定列遮罩 */
:deep(.el-table__fixed),
:deep(.el-table__fixed-right) {
display: none !important;
}
/* 确保表格主体宽度正常 */
:deep(.el-table__body-wrapper),
:deep(.el-table__header-wrapper) {
width: 98% !important;
overflow: visible !important;
}
/* 隐藏不需要打印的按钮或元素 */
.print-btn {
display: none !important;
}
/* 强制释放表格或容器的高度,防止内容被截断 */
.el-table__body-wrapper {
height: auto !important;
overflow: visible !important;
}
// /* 确保背景色和图片能被打印出来 */
// * {
// -webkit-print-color-adjust: exact !important;
// print-color-adjust: exact !important;
// }
}
</style>