643 lines
19 KiB
Vue
643 lines
19 KiB
Vue
<template>
|
||
<div class="quality-certificate-container">
|
||
<div id="qualityCertificateContent" class="certificate-content">
|
||
<!-- Header / 头部 -->
|
||
<div class="certificate-header">
|
||
<div class="header-top">
|
||
<div class="company-logo">
|
||
<!-- Company logo placeholder / 公司Logo占位 -->
|
||
</div>
|
||
<div class="header-title">
|
||
<h1>Product Quality Certificate</h1>
|
||
<!-- 产品质量证明书 -->
|
||
<div class="document-number">Document No.: {{ certificateData.documentNo || '-' }}</div>
|
||
<!-- 文档编号 -->
|
||
</div>
|
||
<div class="qr-code-placeholder">
|
||
<!-- QR code placeholder / 二维码占位 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-info">
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<span class="info-label">Licence No.:</span>
|
||
<!-- 许可证号 -->
|
||
<span class="info-value">{{ certificateData.licenceNo || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">Purchaser:</span>
|
||
<!-- 订货单位 -->
|
||
<span class="info-value">{{ certificateData.purchaser || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<span class="info-label">Customer:</span>
|
||
<!-- 收货单位 -->
|
||
<span class="info-value">{{ certificateData.customer || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">Contract No.:</span>
|
||
<!-- 合同编号 -->
|
||
<span class="info-value">{{ certificateData.contractNo || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<span class="info-label">Trade Mark:</span>
|
||
<!-- 品种名称 -->
|
||
<span class="info-value">{{ certificateData.tradeMark || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">Technique Standard:</span>
|
||
<!-- 技术条件 -->
|
||
<span class="info-value">{{ certificateData.techniqueStandard || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<span class="info-label">Odd No.:</span>
|
||
<!-- 结齐单号 -->
|
||
<span class="info-value">{{ certificateData.oddNo || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">Delivery Condition:</span>
|
||
<!-- 交货状态 -->
|
||
<span class="info-value">{{ certificateData.deliveryCondition || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<span class="info-label">Certificate No.:</span>
|
||
<!-- 证明书号 -->
|
||
<span class="info-value">{{ certificateData.certificateNo || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">Destination:</span>
|
||
<!-- 到站 -->
|
||
<span class="info-value">{{ certificateData.destination || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-item">
|
||
<span class="info-label">Wagon No.:</span>
|
||
<!-- 车号 -->
|
||
<span class="info-value">{{ certificateData.wagonNo || '-' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">Delivery Date:</span>
|
||
<!-- 发货日期 -->
|
||
<span class="info-value">{{ certificateData.deliveryDate || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main data table / 主数据表格 -->
|
||
<div class="certificate-table">
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th rowspan="2" style="width: 3%;">No.</th>
|
||
<!-- 序号 -->
|
||
<th rowspan="2" style="width: 8%;">Coil No.</th>
|
||
<!-- 钢卷号 -->
|
||
<th rowspan="2" style="width: 7%;">Heat No.</th>
|
||
<!-- 熔炼号 -->
|
||
<th colspan="3" style="width: 9%;">Size</th>
|
||
<!-- 规格 -->
|
||
<th rowspan="2" style="width: 5%;">Weight (t)</th>
|
||
<!-- 重量 -->
|
||
<th colspan="5" style="width: 12%;">Chemical Composition (%)</th>
|
||
<!-- 化学成分 -->
|
||
<th colspan="5" style="width: 15%;">Tension Test</th>
|
||
<!-- 拉伸试验 -->
|
||
<th colspan="2" style="width: 8%;">Zinc-coating & Cold Bend</th>
|
||
<!-- 锌层冷弯 -->
|
||
<th style="width: 6%;">Zinc Coating Thickness</th>
|
||
<!-- 锌层厚度 -->
|
||
<th colspan="2" style="width: 8%;">Hardness</th>
|
||
<!-- 硬度 -->
|
||
<th rowspan="2" style="width: 6%;">Coating Weight (g/m²)</th>
|
||
<!-- 镀层重量 -->
|
||
<th rowspan="2" style="width: 6%;">Surface Quality</th>
|
||
<!-- 表面组别 -->
|
||
<th rowspan="2" style="width: 6%;">Flatness</th>
|
||
<!-- 不平度 -->
|
||
</tr>
|
||
<tr>
|
||
<th style="width: 3%;">Thickness (mm)</th>
|
||
<!-- 厚 -->
|
||
<th style="width: 3%;">Width (mm)</th>
|
||
<!-- 宽 -->
|
||
<th style="width: 3%;">Length (m)</th>
|
||
<!-- 长 -->
|
||
<th style="width: 2.4%;">C</th>
|
||
<th style="width: 2.4%;">Si</th>
|
||
<th style="width: 2.4%;">Mn</th>
|
||
<th style="width: 2.4%;">P</th>
|
||
<th style="width: 2.4%;">S</th>
|
||
<th style="width: 3%;">Yield (MPa)</th>
|
||
<!-- 屈服 -->
|
||
<th style="width: 3%;">Tensile (MPa)</th>
|
||
<!-- 抗拉 -->
|
||
<th style="width: 3%;">Elongation (%)</th>
|
||
<!-- 伸长 -->
|
||
<th style="width: 3%;">n Value</th>
|
||
<!-- n值 -->
|
||
<th style="width: 3%;">r Value</th>
|
||
<!-- r值 -->
|
||
<th style="width: 4%;">Types</th>
|
||
<!-- 类型 -->
|
||
<th style="width: 4%;">Value</th>
|
||
<!-- 值 -->
|
||
<th style="width: 6%;">Thickness</th>
|
||
<!-- 厚度 -->
|
||
<th style="width: 4%;">Types</th>
|
||
<!-- 类型 -->
|
||
<th style="width: 4%;">Value</th>
|
||
<!-- 值 -->
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(coil, index) in certificateData.coils" :key="index">
|
||
<td>{{ index + 1 }}</td>
|
||
<td>{{ coil.coilNo || '-' }}</td>
|
||
<td>{{ coil.heatNo || '-' }}</td>
|
||
<td>{{ formatNumber(coil.thickness) }}</td>
|
||
<td>{{ formatNumber(coil.width) }}</td>
|
||
<td>{{ formatNumber(coil.length) }}</td>
|
||
<td>{{ formatNumber(coil.weight) }}</td>
|
||
<td>{{ formatNumber(coil.c) }}</td>
|
||
<td>{{ formatNumber(coil.si) }}</td>
|
||
<td>{{ formatNumber(coil.mn) }}</td>
|
||
<td>{{ formatNumber(coil.p) }}</td>
|
||
<td>{{ formatNumber(coil.s) }}</td>
|
||
<td>{{ formatNumber(coil.yield) }}</td>
|
||
<td>{{ formatNumber(coil.tensile) }}</td>
|
||
<td>{{ formatNumber(coil.elongation) }}</td>
|
||
<td>{{ formatNumber(coil.nValue) }}</td>
|
||
<td>{{ formatNumber(coil.rValue) }}</td>
|
||
<td>{{ coil.zincCoatingType || '-' }}</td>
|
||
<td>{{ coil.zincCoatingValue || '-' }}</td>
|
||
<td>{{ formatNumber(coil.zincCoatingThickness) }}</td>
|
||
<td>{{ coil.hardnessType || '-' }}</td>
|
||
<td>{{ coil.hardnessValue || '-' }}</td>
|
||
<td>{{ formatNumber(coil.coatingWeight) }}</td>
|
||
<td>{{ coil.surfaceQuality || '-' }}</td>
|
||
<td>{{ coil.flatness || '-' }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Footer information / 底部信息 -->
|
||
<div class="certificate-footer">
|
||
<div class="footer-row">
|
||
<div class="footer-item">
|
||
<span class="footer-label">Steel Grade:</span>
|
||
<!-- 牌号 -->
|
||
<span class="footer-value">{{ certificateData.steelGrade || '-' }}</span>
|
||
</div>
|
||
<div class="footer-item">
|
||
<span class="footer-label">Surface Structure:</span>
|
||
<!-- 表面结构 -->
|
||
<span class="footer-value">{{ certificateData.surfaceStructure || '-' }}</span>
|
||
</div>
|
||
<div class="footer-item">
|
||
<span class="footer-label">Edge:</span>
|
||
<!-- 边缘状态 -->
|
||
<span class="footer-value">{{ certificateData.edge || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="footer-row">
|
||
<div class="footer-item">
|
||
<span class="footer-label">Coat Type:</span>
|
||
<!-- 镀层种类 -->
|
||
<span class="footer-value">{{ certificateData.coatType || '-' }}</span>
|
||
</div>
|
||
<div class="footer-item">
|
||
<span class="footer-label">Size Precision:</span>
|
||
<!-- 尺寸精度 -->
|
||
<span class="footer-value">{{ certificateData.sizePrecision || '-' }}</span>
|
||
</div>
|
||
<div class="footer-item">
|
||
<span class="footer-label">Surface Treatment:</span>
|
||
<!-- 表面处理 -->
|
||
<span class="footer-value">{{ certificateData.surfaceTreatment || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="footer-row">
|
||
<div class="footer-item">
|
||
<span class="footer-label">Total Number:</span>
|
||
<!-- 总卷(包)数 -->
|
||
<span class="footer-value">{{ certificateData.totalNumber || '-' }}</span>
|
||
</div>
|
||
<div class="footer-item">
|
||
<span class="footer-label">Note:</span>
|
||
<!-- 注释 -->
|
||
<span class="footer-value">{{ certificateData.note || '-' }}</span>
|
||
</div>
|
||
<div class="footer-item">
|
||
<span class="footer-label">Total Weight (t):</span>
|
||
<!-- 总重量 -->
|
||
<span class="footer-value">{{ certificateData.totalWeight || '-' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Remarks / 备注 -->
|
||
<div class="certificate-remarks">
|
||
<div class="remarks-title">Remarks:</div>
|
||
<!-- 备注 -->
|
||
<div class="remarks-content">
|
||
<p>1. It is certified herein that the products have been produced and tested according to above standards and the products are all qualified.</p>
|
||
<!-- 本产品已按上述标准生产和检验,其结果符合要求,特此证明。 -->
|
||
<p>2. The original quality certificate is the basis for acceptance, copies are for reference only and not to be used as acceptance vouchers.</p>
|
||
<!-- 质量证明书原件是验收依据,复印件仅供参考,不作为验收凭证。 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Print button / 打印按钮 -->
|
||
<div class="print-btn-container">
|
||
<el-button type="primary" @click="handlePrint" icon="el-icon-printer">
|
||
Print Certificate
|
||
<!-- 打印质保书 -->
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import printJS from 'print-js';
|
||
import dayjs from 'dayjs';
|
||
|
||
export default {
|
||
name: 'QualityCertificate',
|
||
props: {
|
||
// Single coil detail / 单卷详情
|
||
detail: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
certificateData: {}
|
||
};
|
||
},
|
||
watch: {
|
||
// Only watch single coil detail / 仅监听单卷详情
|
||
detail: {
|
||
handler(newVal) {
|
||
if (newVal) {
|
||
this.initCertificateData(newVal);
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
// Initialize certificate data for single coil / 初始化单卷质保书数据
|
||
initCertificateData(detail) {
|
||
const coils = [detail]; // 单卷：永远只有一个卷
|
||
|
||
this.certificateData = {
|
||
documentNo: detail.documentNo || `QG/GFJL(Y) 164-2004`,
|
||
licenceNo: detail.licenceNo || '',
|
||
purchaser: detail.purchaser || '',
|
||
customer: detail.customer || '',
|
||
contractNo: detail.contractNo || detail.planNo || '',
|
||
tradeMark: detail.tradeMark || detail.prodCode || '',
|
||
techniqueStandard: detail.techniqueStandard || '',
|
||
oddNo: detail.oddNo || '',
|
||
deliveryCondition: detail.deliveryCondition || detail.prodCode || '',
|
||
certificateNo: detail.certificateNo || detail.exitMatId || '',
|
||
destination: detail.destination || '',
|
||
wagonNo: detail.wagonNo || '',
|
||
deliveryDate: detail.deliveryDate || dayjs().format('YYYY-MM-DD'),
|
||
steelGrade: detail.steelGrade || '',
|
||
surfaceStructure: detail.surfaceStructure || 'Smooth',
|
||
edge: detail.edge || 'Untrimmed',
|
||
coatType: detail.coatType || '',
|
||
sizePrecision: detail.sizePrecision || 'Normal',
|
||
surfaceTreatment: detail.surfaceTreatment || '',
|
||
totalNumber: 1, // 单卷固定为1
|
||
note: detail.note || '',
|
||
totalWeight: this.calculateTotalWeight(coils),
|
||
coils: this.formatCoilsData(coils)
|
||
};
|
||
},
|
||
|
||
// Format coils data / 格式化卷数据
|
||
formatCoilsData(coils) {
|
||
return coils.map(coil => ({
|
||
coilNo: coil.exitMatId || coil.coilid || '-',
|
||
heatNo: coil.heatNo || coil.heatNo || '-',
|
||
thickness: coil.exitThickness || coil.entryThick || '-',
|
||
width: coil.exitWidth || coil.entryWidth || '-',
|
||
length: coil.exitLength || coil.entryLength || '-',
|
||
weight: coil.exitNetWeight || coil.actualWeight || coil.entryWeight || '-',
|
||
c: coil.c || coil.chemicalC || '-',
|
||
si: coil.si || coil.chemicalSi || '-',
|
||
mn: coil.mn || coil.chemicalMn || '-',
|
||
p: coil.p || coil.chemicalP || '-',
|
||
s: coil.s || coil.chemicalS || '-',
|
||
yield: coil.yield || coil.yieldStrength || '-',
|
||
tensile: coil.tensile || coil.tensileStrength || '-',
|
||
elongation: coil.elongation || coil.elongationPercent || '-',
|
||
nValue: coil.nValue || '-',
|
||
rValue: coil.rValue || '-',
|
||
zincCoatingType: coil.zincCoatingType || '-',
|
||
zincCoatingValue: coil.zincCoatingValue || (coil.weightTop && coil.weightBottom ? 'Qualified' : '-'),
|
||
zincCoatingThickness: coil.zincCoatingThickness || coil.zincCoatingThickness || '-', // 添加锌层厚度字段
|
||
hardnessType: coil.hardnessType || '-',
|
||
hardnessValue: coil.hardnessValue || '-',
|
||
coatingWeight: coil.coatingWeight || coil.weightTop || '-',
|
||
surfaceQuality: coil.surfaceQuality || coil.surfaceGroup || 'Premium',
|
||
flatness: coil.flatness || 'Premium'
|
||
}));
|
||
},
|
||
|
||
// Calculate total weight / 计算总重量
|
||
calculateTotalWeight(coils) {
|
||
const total = coils.reduce((sum, coil) => {
|
||
const weight = parseFloat(coil.exitNetWeight || coil.actualWeight || coil.entryWeight || 0);
|
||
return sum + (isNaN(weight) ? 0 : weight);
|
||
}, 0);
|
||
return total > 0 ? total.toFixed(2) : '-';
|
||
},
|
||
|
||
// Format number / 格式化数字
|
||
formatNumber(value) {
|
||
if (value === null || value === undefined || value === '' || value === '-') {
|
||
return '-';
|
||
}
|
||
const num = parseFloat(value);
|
||
if (isNaN(num)) {
|
||
return value;
|
||
}
|
||
// Keep 2 decimal places for most numbers, but show more precision for small values / 大多数数字保留2位小数，但小数值显示更多精度
|
||
if (Math.abs(num) < 1) {
|
||
return num.toFixed(3);
|
||
}
|
||
return num.toFixed(2);
|
||
},
|
||
|
||
// Handle print / 处理打印
|
||
handlePrint() {
|
||
const printStyle = `
|
||
@page {
|
||
size: A4 landscape;
|
||
margin: 10mm;
|
||
}
|
||
.certificate-content {
|
||
width: 100%;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
`;
|
||
|
||
printJS({
|
||
printable: 'qualityCertificateContent',
|
||
type: 'html',
|
||
header: null,
|
||
footer: null,
|
||
style: printStyle,
|
||
scanStyles: true,
|
||
targetStyles: ['*'],
|
||
documentTitle: 'Quality Certificate',
|
||
onPrintDialogClose: () => {
|
||
console.log('Print dialog closed');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.quality-certificate-container {
|
||
padding: 20px;
|
||
background: #fff;
|
||
}
|
||
|
||
.certificate-content {
|
||
width: 100%;
|
||
font-family: Arial, sans-serif;
|
||
font-size: 12px;
|
||
color: #000;
|
||
}
|
||
|
||
/* Header styles / 头部样式 */
|
||
.certificate-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.header-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #000;
|
||
}
|
||
|
||
.company-logo {
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 1px solid #ccc;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.header-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-title h1 {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin: 0 0 5px 0;
|
||
}
|
||
|
||
.document-number {
|
||
font-size: 11px;
|
||
color: #666;
|
||
}
|
||
|
||
.qr-code-placeholder {
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 1px solid #ccc;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.header-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
gap: 30px;
|
||
}
|
||
|
||
.info-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-weight: bold;
|
||
min-width: 120px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.info-value {
|
||
flex: 1;
|
||
}
|
||
|
||
/* Table styles / 表格样式 */
|
||
.certificate-table {
|
||
margin: 20px 0;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 10px;
|
||
border: 2px solid #000;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
border: 1px solid #000;
|
||
padding: 6px 4px;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
word-wrap: break-word;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.data-table th {
|
||
background: #f0f0f0;
|
||
font-weight: bold;
|
||
font-size: 9px;
|
||
}
|
||
|
||
.data-table tbody tr:nth-child(even) {
|
||
background: #fafafa;
|
||
}
|
||
|
||
.data-table tbody tr:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
/* Footer styles / 底部样式 */
|
||
.certificate-footer {
|
||
margin: 20px 0;
|
||
padding: 10px 0;
|
||
border-top: 1px solid #000;
|
||
}
|
||
|
||
.footer-row {
|
||
display: flex;
|
||
gap: 30px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.footer-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-label {
|
||
font-weight: bold;
|
||
min-width: 120px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.footer-value {
|
||
flex: 1;
|
||
}
|
||
|
||
/* Remarks styles / 备注样式 */
|
||
.certificate-remarks {
|
||
margin-top: 20px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid #000;
|
||
}
|
||
|
||
.remarks-title {
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.remarks-content p {
|
||
margin: 5px 0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Print button / 打印按钮 */
|
||
.print-btn-container {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* Print styles / 打印样式 */
|
||
@media print {
|
||
.print-btn-container {
|
||
display: none;
|
||
}
|
||
|
||
.quality-certificate-container {
|
||
padding: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
.certificate-content {
|
||
font-size: 10px;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.certificate-header {
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
.certificate-table {
|
||
page-break-inside: auto;
|
||
}
|
||
|
||
.data-table {
|
||
font-size: 8px;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 3px 2px;
|
||
}
|
||
|
||
.data-table tbody tr {
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.certificate-footer {
|
||
page-break-before: avoid;
|
||
}
|
||
|
||
.certificate-remarks {
|
||
page-break-inside: avoid;
|
||
}
|
||
}
|
||
</style>
|
||
|