parent
d3f06afd6a
commit
0d6b057ad4
15 changed files with 166631 additions and 82 deletions
@ -0,0 +1,103 @@ |
||||
<template> |
||||
<el-dialog title="分批" v-model="setCrewShow" :before-close="cancel" width="45%" @open="open"> |
||||
<el-form ref="form" :model="batchForm" :rules="batchRules" label-width="90"> |
||||
<el-form-item label="分批数量" prop="makeQty"> |
||||
<el-input-number style="width:100%;" controls-position="right" v-model="batchForm.makeQty"></el-input-number> |
||||
</el-form-item> |
||||
<el-form-item label="车间订单号" prop="woCode"> |
||||
<el-input disabled v-model="batchForm.woCode"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="流程卡号" prop="cardNo"> |
||||
<el-input disabled v-model="batchForm.cardNo"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="批次号" prop="batchNo"> |
||||
<el-input disabled v-model="batchForm.batchNo"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="备注" prop="memo"> |
||||
<el-input type="textarea" v-model="batchForm.memo"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button @click="cancel">取消</el-button> |
||||
<el-button type="primary" @click="submit()"> 确认</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import {getBatchData,setBatch} from "@/api/outsourcingManagement/oemOrder" |
||||
export default { |
||||
props:{ |
||||
showBatch:{ |
||||
type:Boolean, |
||||
default:false |
||||
}, |
||||
checkRow:{ |
||||
type:Object, |
||||
default:() => {} |
||||
} |
||||
}, |
||||
data(){ |
||||
return{ |
||||
setCrewShow:false, |
||||
batchForm:{ |
||||
makeQty:1, |
||||
}, |
||||
batchRules:{ |
||||
makeQty:[{required: true, message: '请输入分批数量', trigger: 'blur'}], |
||||
woCode:[{required: true, message: '请输入车间订单号', trigger: 'blur'}], |
||||
cardNo:[{required: true, message: '请输入流程卡号', trigger: 'blur'}], |
||||
batchNo:[{required: true, message: '请输入批次号', trigger: 'blur'}], |
||||
} |
||||
} |
||||
}, |
||||
created(){ |
||||
this.setCrewShow = this.showBatch; |
||||
this.getData() |
||||
}, |
||||
methods:{ |
||||
getData(){ |
||||
console.log('111111111111111') |
||||
getBatchData({ |
||||
worId:this.checkRow.id |
||||
}).then(res =>{ |
||||
console.log('res----------',res) |
||||
this.batchForm = { |
||||
...this.batchForm, |
||||
woCode:res.data.data.woCode, |
||||
cardNo:res.data.data.cardNo, |
||||
batchNo:res.data.data.batchNo |
||||
} |
||||
}) |
||||
}, |
||||
cancel(val){ |
||||
this.setCrewShow = false |
||||
this.$emit('cancel', val); |
||||
}, |
||||
submit(){ |
||||
this.$refs.form.validate((valid) => { |
||||
if(valid){ |
||||
console.log('11111111111111111111111111111111111') |
||||
setBatch({ |
||||
id:this.checkRow.woId, |
||||
...this.batchForm |
||||
}).then(res =>{ |
||||
if(res.data.code == 200){ |
||||
this.$message.success('分批成功') |
||||
this.cancel(true) |
||||
} |
||||
}).catch(err =>{ |
||||
this.cancel(false) |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,568 @@ |
||||
<template> |
||||
<el-dialog title="打印预览" append-to-body :modelValue="showPrint" fullscreen width="85%" |
||||
@close="closeDialog" :custom-class="isPrint ? 'noprint' : 'rbdyBox'"> |
||||
<!-- @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">表号:</div> |
||||
<table id="cus-table" cellspacing="0" style="width:100%"> |
||||
<template v-if="dsPart!= null"> |
||||
<tr> |
||||
<td colspan="1">零件号</td> |
||||
<td colspan="2">{{dsPart.partCode || '/'}}</td> |
||||
<td colspan="1">产品型号</td> |
||||
<td colspan="2">{{ dsPart.productType || '/' }}</td> |
||||
<td colspan="1">生产标识</td> |
||||
<td colspan="2">{{dsPart.prodIdent || '/'}}</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="1">批次号</td> |
||||
<td colspan="1">{{dsPart.batchNo || '/'}}</td> |
||||
<td colspan="1">名称</td> |
||||
<td colspan="1">{{dsPart.partName || '/'}}</td> |
||||
<td colspan="1">是否印字</td> |
||||
<td colspan="1">{{dsPart.isWording || '/'}}</td> |
||||
<td colspan="1">数量</td> |
||||
<td colspan="2">{{ dsPart.qty || '/' }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="1">壳体面积(dm²)</td> |
||||
<td colspan="1">{{dsPart.batchNo || '/'}}</td> |
||||
<td colspan="1">壳体材料</td> |
||||
<td colspan="1">{{dsPart.partName || '/'}}</td> |
||||
<td colspan="1">插针面积(dm²)</td> |
||||
<td colspan="1">{{dsPart.isWording || '/'}}</td> |
||||
<td colspan="1">插针材料</td> |
||||
<td colspan="2">{{ dsPart.qty || '/' }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="1">壳体镀种</td> |
||||
<td colspan="5">{{dsPart.hardness || '/'}}</td> |
||||
<td colspan="1">插针镀种</td> |
||||
<td colspan="2">{{ dsPart.area || '/' }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="1">镀种</td> |
||||
<td colspan="5">{{ dsPart.plate || '/' }}</td> |
||||
<td colspan="1">材料</td> |
||||
<td colspan="2">{{ dsPart.material || '/' }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="1">工艺路线</td> |
||||
<td colspan="8">{{ dsPart.craftWay || '/' }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="1">质量信息</td> |
||||
<td colspan="8">{{ dsPart.keyInfo || '/' }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td colspan="1">色标色带</td> |
||||
<td colspan="8">{{ dsPart.keyInfo || '/' }}</td> |
||||
</tr> |
||||
</template> |
||||
<template v-if="prWorkPlanList && prWorkPlanList.length>0"> |
||||
<tr> |
||||
<td colspan="9" style="font-size:21px;">生产过程</td> |
||||
</tr> |
||||
<template v-for="(item,index) in prWorkPlanList" > |
||||
<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> |
||||
<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> |
||||
<tr v-if="item.procedureSet.ppsName == '玻璃封接组装' || item.procedureSet.ppsName == '玻璃封接卸模' || item.procedureSet.ppsName == '玻璃封接(链式炉)'"> |
||||
<td colspan="1">操作者</td> |
||||
<td colspan="1">{{item.createMan || '/'}}</td> |
||||
<td colspan="1" v-if="item.qualifiedQty">数量</td> |
||||
<td colspan="1" v-if="item.qualifiedQty">{{item.qualifiedQty}}</td> |
||||
<td colspan="1" v-if="item.fbCode">飞拔编号</td> |
||||
<td colspan="1" v-if="item.fbCode">{{item.fbCode}}</td> |
||||
<td colspan="2">检验员确认</td> |
||||
<td colspan="3">曹鹏飞1/2025-06-28</td> |
||||
</tr> |
||||
<!-- <tr v-if="(item.gjCode && !item.fbCode && !item.deviceCode) || 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="1" v-if="item.procedureSet.ppsName=='荧光检测'"> |
||||
{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }} |
||||
</td> |
||||
<td v-else>{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}</td> |
||||
<template v-if="item.procedureSet.ppsName=='荧光检测'"> |
||||
<td colspan="4"><img :src="testManImg(index) ? testManImg(index):'/'" style="width:70px;height:25px;margin:6px 0 6px 0"></br>{{ item.factEndTime || '/' }}</td> |
||||
</template> |
||||
<td colspan="4" v-else> |
||||
曹鹏飞1/2025-06-28 |
||||
</td> |
||||
</tr> |
||||
<tr v-else> |
||||
<td colspan="1">操作者</td> |
||||
<td colspan="4">{{item.createMan || '/'}}</td> |
||||
<td colspan="1" v-if="item.procedureSet.ppsName=='荧光检测'"> |
||||
{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }} |
||||
</td> |
||||
<td v-else>{{ (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> |
||||
</template> |
||||
<td colspan="3" v-else> |
||||
曹鹏飞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> |
||||
<template v-if="item.procedureSet.ppsName == '玻璃封接(链式炉)'"> |
||||
<tr> |
||||
<td>数量</td> |
||||
<td>封接温度/℃</td> |
||||
<td colspan="2">入炉时间</td> |
||||
<td colspan="2">出炉时间</td> |
||||
<td colspan="3">链速</td> |
||||
</tr> |
||||
<template v-if="item.totalPrList>0 && item.prList.length>0"> |
||||
<tr v-for="(prLItem,prLIndex) in item.prList" :key="Math.floor(Math.random()*100000)+1+prWpIndex+prLIndex"> |
||||
<td>{{prLItem.dataThree}}</td> |
||||
<td>{{prLItem.tempSlot}}</td> |
||||
<td colspan="2">{{prLItem.inDate}}</td> |
||||
<td colspan="2">{{prLItem.outDate}}</td> |
||||
<td colspan="3">{{prLItem.vSpeed}}</td> |
||||
</tr> |
||||
</template> |
||||
</template> |
||||
<tr v-if="item.slotList && item.slotList.length>0"> |
||||
<td colspan="9" >同槽信息</td> |
||||
</tr> |
||||
<tr v-if="item.tankInfo && JSON.stringify(item.tankInfo) != {}"> |
||||
<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.mtnCode || '/'}}</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.sumArea || '/'}}</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 {getBurnDetail} from '@/api/qualityManagement/inspectionArchiving/eRecord' |
||||
import Templates from "@/views/qualityTemplate/index.js"; |
||||
import { getTemplateComponent } from '@/utils/templateMapper.js'; |
||||
import glassSealing from "./json/glassSealing" |
||||
export default { |
||||
props:{ |
||||
showPrint: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
checkedList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
printType:{ |
||||
type:String, |
||||
default:'' |
||||
}, |
||||
woId:{ |
||||
type:String, |
||||
default:'' |
||||
}, |
||||
rbChecked:{ |
||||
type:Array, |
||||
default:() =>[] |
||||
}, |
||||
planList:{ |
||||
type:Array, |
||||
default:() =>[] |
||||
}, |
||||
checkRow:{ |
||||
type:Object, |
||||
default:() =>{} |
||||
} |
||||
}, |
||||
components: { |
||||
...Templates, |
||||
}, |
||||
data(){ |
||||
return{ |
||||
// printObj: { |
||||
// id: 'printMe', |
||||
// popTitle: '打印66', |
||||
// ignoreClass: 'noprint', |
||||
// endCallback: (e) => { |
||||
// console.log(e, 5555); |
||||
// } |
||||
// }, |
||||
printConfig :{ |
||||
id: 'printMe', |
||||
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, |
||||
}, |
||||
|
||||
dsPart:{}, |
||||
prWorkPlanList:[], |
||||
modelOne: {}, |
||||
isPrint:false, |
||||
modelTwo: [], |
||||
modelThree: { checkList: [], procedureSet: {}}, |
||||
modelFour: { procedureSet: {}, prWorkOrder: { pjYieldOrder: {}}}, |
||||
} |
||||
}, |
||||
created(){ |
||||
console.log('check---------',this.checkedList) |
||||
console.log('printType---------',this.printType) |
||||
|
||||
// const {sunPrWorkOrderList,prWorkPlanList,prWorkOrder,dsPart,qcReviewSheetList} = |
||||
// glassSealing.data |
||||
|
||||
// this.dsPart = dsPart |
||||
// this.prWorkPlanList = prWorkPlanList |
||||
// console.log('prWorkPlanList=======',this.prWorkPlanList) |
||||
|
||||
getBurnDetail({ |
||||
"woId":'2019646268865155074', |
||||
// woId:this.checkRow.woId, |
||||
"yieldType":2, |
||||
// yieldType:this.checkRow.yieldType, |
||||
"planList":this.planList, |
||||
"moduleList":[true] |
||||
}).then(res =>{ |
||||
console.log('res==========',res) |
||||
this.dsPart = res.data.data.dsPart |
||||
this.prWorkPlanList = res.data.data.prWorkPlanList |
||||
}) |
||||
|
||||
}, |
||||
methods:{ |
||||
// 获取本道工序下第一个检验工序第一个试验项目的检验员 |
||||
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) { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
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; |
||||
} |
||||
} |
||||
// @media print { @page { size:21cm 29.7cm } } |
||||
</style> |
||||
<style lang="scss"> |
||||
@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: 6mm; |
||||
} |
||||
|
||||
.printBox { |
||||
width: 100% !important; |
||||
overflow: visible !important; |
||||
|
||||
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; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue