feat(mes/qc): add quality certificate management function
- 新增质量证明书主、明细的CRUD接口 - 新增质量证明书列表页、明细编辑页 - 新增打印预览组件和PDF导出打印功能 - 添加配套的静态资源和路由依赖 - 优化路由菜单处理逻辑
This commit is contained in:
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<div class="certificate-print-container" :class="{ 'is-hidden': !preview }">
|
||||
<div ref="certificateContent" class="certificate-pdf-content" :class="{ 'is-preview': preview }">
|
||||
<div class="pdf-header">
|
||||
<div class="header-left">
|
||||
<img src="@/assets/logo/logo.png" class="company-logo" alt="logo" />
|
||||
<div class="company-name-cn">科伦普</div>
|
||||
<div class="company-name-en">KE LUN PU</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<div class="main-title">产品质量证明书</div>
|
||||
<div class="main-title-en">PRODUCT QUALITY CERTIFICATE</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="company-full-name">嘉祥科伦普重工有限公司</div>
|
||||
<div class="company-address">山东省济宁市嘉祥县化工园区</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pdf-body">
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td class="label-cell">执行标准(SPECIFICATION):</td>
|
||||
<td class="value-cell">{{ certificate.standard || '/' }}</td>
|
||||
<td class="label-cell">证明书号(CERTIFICATE NO.):</td>
|
||||
<td class="value-cell">{{ certificate.certificateNo || '' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">收货单位(CONSIGNEE):</td>
|
||||
<td class="value-cell">{{ certificate.consignee || '-' }}</td>
|
||||
<td class="label-cell">合同号(CONTRACT NO.):</td>
|
||||
<td class="value-cell">{{ certificate.contractNo || '' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">产品名称(PRODUCT):</td>
|
||||
<td class="value-cell">{{ certificate.productName || '' }}</td>
|
||||
<td class="label-cell">签发日期(DATE OF ISSUE):</td>
|
||||
<td class="value-cell">{{ formatDate(certificate.issueDate) || '' }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">序号</th>
|
||||
<th rowspan="2">钢卷号<br>Coil No.</th>
|
||||
<th rowspan="2">炉号<br>Heat No.</th>
|
||||
<th rowspan="2">材质<br>Type</th>
|
||||
<th rowspan="2">规格 Size<br>(mm)</th>
|
||||
<th rowspan="2">件数<br>Pieces</th>
|
||||
<th rowspan="2">重量<br>Weight(t)</th>
|
||||
<th colspan="6">化学成分(%)<br>Chemical Composition</th>
|
||||
<th colspan="3">拉伸试验 Tensile Test<br>(G.L=80mm)</th>
|
||||
<th rowspan="2">硬度试验<br>Hardness Test</th>
|
||||
<th rowspan="2">弯曲试验<br>180° B.T<br>D=0a</th>
|
||||
<th rowspan="2">表面质量</th>
|
||||
<th rowspan="2">表面结构</th>
|
||||
<th rowspan="2">边缘状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>C</th>
|
||||
<th>Si</th>
|
||||
<th>Mn</th>
|
||||
<th>P</th>
|
||||
<th>S</th>
|
||||
<th>Als</th>
|
||||
<th>屈服 RP0.2<br>Y.S(MPa)</th>
|
||||
<th>抗拉 T.S<br>(MPa)</th>
|
||||
<th>伸长率 EL<br>(%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in items" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.coilNo || '' }}</td>
|
||||
<td>{{ item.heatNo || '' }}</td>
|
||||
<td>{{ item.materialType || '' }}</td>
|
||||
<td>{{ item.size || '' }}</td>
|
||||
<td>{{ item.pieces || '' }}</td>
|
||||
<td>{{ item.weight || '' }}</td>
|
||||
<td>{{ item.c || '/' }}</td>
|
||||
<td>{{ item.si || '/' }}</td>
|
||||
<td>{{ item.mn || '/' }}</td>
|
||||
<td>{{ item.p || '/' }}</td>
|
||||
<td>{{ item.s || '/' }}</td>
|
||||
<td>{{ item.als || '/' }}</td>
|
||||
<td>{{ item.yieldStrength || '/' }}</td>
|
||||
<td>{{ item.tensileStrength || '/' }}</td>
|
||||
<td>{{ item.elongation || '/' }}</td>
|
||||
<td>{{ item.hardness || '/' }}</td>
|
||||
<td>{{ item.bendingTest || '/' }}</td>
|
||||
<td>{{ item.surfaceQuality || '/' }}</td>
|
||||
<td>{{ item.surfaceStructure || '/' }}</td>
|
||||
<td>{{ item.edgeStatus || '/' }}</td>
|
||||
</tr>
|
||||
<tr v-if="items.length === 0">
|
||||
<td colspan="21" class="empty-cell">暂无数据</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="footer-table">
|
||||
<tr>
|
||||
<td class="footer-label">注释<br>NOTE</td>
|
||||
<td class="footer-content">
|
||||
<pre>{{ certificate.note || '/' }}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="footer-label">备注<br>REMARK</td>
|
||||
<td class="footer-content footer-remark-cell">
|
||||
<pre class="remark-text">{{ certificate.remark || '/' }}</pre>
|
||||
<div class="signature-area">
|
||||
<img src="@/assets/images/zhijian.png" class="stamp-image" alt="质检专用章" />
|
||||
<div class="signature-block">
|
||||
<div class="signature-label">质量负责人:</div>
|
||||
<img src="@/assets/images/yanghongyan.png" class="signature-image" alt="签名" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CertificatePrintPreview',
|
||||
props: {
|
||||
certificate: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
preview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.certificate-print-container.is-hidden {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.certificate-print-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.certificate-pdf-content {
|
||||
width: 297mm;
|
||||
min-height: 210mm;
|
||||
background: white;
|
||||
padding: 8mm 10mm;
|
||||
font-family: "SimSun", "宋体", Arial, sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
.pdf-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
text-align: center;
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 70px;
|
||||
height: auto;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.company-name-cn {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.company-name-en {
|
||||
font-size: 9px;
|
||||
color: #333;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
letter-spacing: 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.main-title-en {
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
font-family: "Times New Roman", serif;
|
||||
letter-spacing: 1px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
text-align: right;
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.company-full-name {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.company-address {
|
||||
font-size: 10px;
|
||||
color: #333;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.pdf-body {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.info-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 3px 6px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.info-table .label-cell {
|
||||
font-weight: bold;
|
||||
width: 22%;
|
||||
white-space: nowrap;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.info-table .value-cell {
|
||||
width: 28%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 0;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 2px 3px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background-color: #f0f0f0;
|
||||
font-weight: bold;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.empty-cell {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 0;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.footer-table td {
|
||||
border: 1px solid #000;
|
||||
padding: 4px 6px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.footer-label {
|
||||
font-weight: bold;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 9px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
font-size: 9px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.footer-remark-cell {
|
||||
position: relative;
|
||||
padding-right: 140px;
|
||||
}
|
||||
|
||||
.remark-text {
|
||||
font-size: 9px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.signature-area {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stamp-image {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.signature-block {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.signature-label {
|
||||
font-size: 9px;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signature-image {
|
||||
height: 35px;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user