Merge remote-tracking branch 'origin/0.8.X' into 0.8.X
This commit is contained in:
@@ -200,7 +200,11 @@ export const optionalColumns = [
|
||||
{ label: '厂家', value: 'manufacturer' },
|
||||
{ label: '表面处理', value: 'surfaceTreatmentDesc' },
|
||||
{ label: '镀层质量', value: 'zincLayer' },
|
||||
{ label: '长度', value: 'length' },
|
||||
{ label: '实测长度', value: 'actualLength' },
|
||||
{ label: '理论长度', value: 'theoreticalLength' },
|
||||
{ label: '实测厚度', value: 'actualThickness' },
|
||||
{ label: '理论厚度', value: 'theoreticalThickness' },
|
||||
{ label: '实测宽度', value: 'actualWidth' },
|
||||
{ label: '毛重', value: 'grossWeight' },
|
||||
{ label: '净重', value: 'netWeight' },
|
||||
{ label: '创建时间', value: 'createTime' },
|
||||
|
||||
@@ -207,7 +207,8 @@
|
||||
:visible="true"
|
||||
:preview="true"
|
||||
:certificate="previewData"
|
||||
:items="previewItems"
|
||||
:items="previewItems"
|
||||
:template-type="selectedTemplateType"
|
||||
/>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@@ -222,8 +223,27 @@
|
||||
v-show="false"
|
||||
ref="hiddenPrintComponent"
|
||||
:certificate="printCertificateData"
|
||||
:items="printItemsData"
|
||||
:items="printItemsData"
|
||||
:template-type="selectedTemplateType"
|
||||
/>
|
||||
|
||||
<!-- 模板选择对话框 -->
|
||||
<el-dialog title="选择质保书模板" :visible.sync="templateDialogVisible" width="500px" append-to-body>
|
||||
<div class="template-selection">
|
||||
<el-radio-group v-model="selectedTemplateType" class="template-radio-group">
|
||||
<el-radio v-for="option in templateOptions" :key="option.value" :label="option.value" class="template-radio">
|
||||
<div class="template-option">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>{{ option.label }}</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="confirmTemplate">确 定</el-button>
|
||||
<el-button @click="templateDialogVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -231,6 +251,7 @@
|
||||
import { listCertificate, getCertificate, delCertificate, addCertificate, updateCertificate } from "@/api/mes/qc/certificate";
|
||||
import { listCertificateItem } from "@/api/mes/qc/certificateItem";
|
||||
import CertificatePrintPreview from "./components/CertificatePrintPreview.vue";
|
||||
import { templateOptions } from "./components/templates";
|
||||
import { print as printPdf, downloadPdf } from "./lib/printUtils";
|
||||
|
||||
export default {
|
||||
@@ -240,6 +261,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templateOptions,
|
||||
buttonLoading: false,
|
||||
loading: true,
|
||||
ids: [],
|
||||
@@ -258,6 +280,10 @@ export default {
|
||||
printComponentVisible: false,
|
||||
printCertificateData: {},
|
||||
printItemsData: [],
|
||||
templateDialogVisible: false,
|
||||
selectedTemplateType: 'chromium',
|
||||
templateActionType: 'print',
|
||||
templateDialogResolve: null,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
@@ -449,6 +475,10 @@ export default {
|
||||
},
|
||||
/** 预览按钮操作 */
|
||||
async handlePreview(row) {
|
||||
this.templateActionType = 'preview';
|
||||
const confirmed = await this.showTemplateDialog();
|
||||
if (!confirmed) return;
|
||||
|
||||
const certificateId = row.certificateId;
|
||||
this.loading = true;
|
||||
try {
|
||||
@@ -468,6 +498,10 @@ export default {
|
||||
},
|
||||
/** 打印按钮操作 */
|
||||
async handlePrint(row) {
|
||||
this.templateActionType = 'print';
|
||||
const confirmed = await this.showTemplateDialog();
|
||||
if (!confirmed) return;
|
||||
|
||||
const certificateId = row.certificateId;
|
||||
await this.preparePrintComponent(certificateId);
|
||||
await this.$nextTick();
|
||||
@@ -517,6 +551,19 @@ export default {
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
showTemplateDialog() {
|
||||
return new Promise((resolve) => {
|
||||
this.templateDialogResolve = resolve;
|
||||
this.templateDialogVisible = true;
|
||||
});
|
||||
},
|
||||
confirmTemplate() {
|
||||
this.templateDialogVisible = false;
|
||||
if (this.templateDialogResolve) {
|
||||
this.templateDialogResolve(true);
|
||||
this.templateDialogResolve = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -538,4 +585,46 @@ export default {
|
||||
color: #1f79b9;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.template-selection {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.template-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.template-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.template-radio:hover {
|
||||
border-color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.template-radio.is-checked {
|
||||
border-color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.template-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.template-option i {
|
||||
font-size: 20px;
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,131 +1,18 @@
|
||||
<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 v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/zhijian.png" class="stamp-image" alt="质检专用章" />
|
||||
<div class="signature-block">
|
||||
<div class="signature-label">质量负责人:</div>
|
||||
<img v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/yanghongyan.png" class="signature-image" alt="签名" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<component
|
||||
:is="currentTemplate"
|
||||
:certificate="certificate"
|
||||
:items="items"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { templateMap } from './templates';
|
||||
|
||||
export default {
|
||||
name: 'CertificatePrintPreview',
|
||||
props: {
|
||||
@@ -140,13 +27,15 @@ export default {
|
||||
preview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
templateType: {
|
||||
type: String,
|
||||
default: 'chromium'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
computed: {
|
||||
currentTemplate() {
|
||||
return templateMap[this.templateType] || templateMap.chromium;
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -178,207 +67,4 @@ export default {
|
||||
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>
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="certificate-content">
|
||||
<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">CHROMIUM PLATED 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">批号</th>
|
||||
<th rowspan="2">原料号</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 rowspan="2">规定塑性<br>延伸强度<br>(MPa)</th>
|
||||
<th rowspan="2">硬度H.T</th>
|
||||
<th rowspan="2">调质度</th>
|
||||
<th rowspan="2">表面状态</th>
|
||||
<th rowspan="2">CMHR30T<br>SmT.Sn</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>C</th>
|
||||
<th>Si</th>
|
||||
<th>Mn</th>
|
||||
<th>P</th>
|
||||
<th>S</th>
|
||||
<th>Als</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in items" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.coilNo || '' }}</td>
|
||||
<td>{{ item.rawCoilNo || '' }}</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.plasticExtensionStrength || '/' }}</td>
|
||||
<td>{{ item.hardness || '/' }}</td>
|
||||
<td>{{ item.temperDegree || '/' }}</td>
|
||||
<td>{{ item.surfaceQuality || '/' }}</td>
|
||||
<td>{{ item.coatingMass || '/' }}</td>
|
||||
</tr>
|
||||
<tr v-if="items.length === 0">
|
||||
<td colspan="17" 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 v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/zhijian.png" class="stamp-image" alt="质检专用章" />
|
||||
<div class="signature-block">
|
||||
<div class="signature-label">质量负责人:</div>
|
||||
<img v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/yanghongyan.png" class="signature-image" alt="签名" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChromiumTemplate',
|
||||
props: {
|
||||
certificate: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.certificate-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<div class="certificate-content">
|
||||
<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">COLD HARD 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 v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/zhijian.png" class="stamp-image" alt="质检专用章" />
|
||||
<div class="signature-block">
|
||||
<div class="signature-label">质量负责人:</div>
|
||||
<img v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/yanghongyan.png" class="signature-image" alt="签名" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ColdHardTemplate',
|
||||
props: {
|
||||
certificate: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.certificate-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<div class="certificate-content">
|
||||
<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">GALVANIZED 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>Material 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>B.T<br>D=0a</th>
|
||||
<th rowspan="2">表面质量</th>
|
||||
<th rowspan="2">表面结构</th>
|
||||
<th rowspan="2">镀层<br>表面结构</th>
|
||||
<th rowspan="2">表面处理</th>
|
||||
<th rowspan="2">镀层重量COATINGMASS<br>锌层重量双面三点平均值<br>(g/m²)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>C</th>
|
||||
<th>Si</th>
|
||||
<th>Mn</th>
|
||||
<th>P</th>
|
||||
<th>S</th>
|
||||
<th>Als</th>
|
||||
<th>屈服<br>Y.S</th>
|
||||
<th>抗拉<br>T.S</th>
|
||||
<th>伸长率<br>EL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in items" :key="index">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ item.coilNo || '' }}</td>
|
||||
<td>{{ item.rawCoilNo || '' }}</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.bendingTest || '/' }}</td>
|
||||
<td>{{ item.surfaceQuality || '/' }}</td>
|
||||
<td>{{ item.surfaceStructure || '/' }}</td>
|
||||
<td>{{ item.coatingSurfaceStructure || '/' }}</td>
|
||||
<td>{{ item.surfaceTreatment || '/' }}</td>
|
||||
<td>
|
||||
<div>{{ item.coatingMass || '/' }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="items.length === 0">
|
||||
<td colspan="22" 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 v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/zhijian.png" class="stamp-image" alt="质检专用章" />
|
||||
<div class="signature-block">
|
||||
<div class="signature-label">质量负责人:</div>
|
||||
<img v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/yanghongyan.png" class="signature-image" alt="签名" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GalvanizingTemplate',
|
||||
props: {
|
||||
certificate: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.certificate-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="certificate-content">
|
||||
<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="14">化学成分(%)<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>
|
||||
<th rowspan="2">规定塑性延伸强度<br>(MPa)</th>
|
||||
<th rowspan="2">镀层表面结构</th>
|
||||
<th rowspan="2">镀层重量<br>(g/m²)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>C</th>
|
||||
<th>Si</th>
|
||||
<th>Mn</th>
|
||||
<th>P</th>
|
||||
<th>S</th>
|
||||
<th>Als</th>
|
||||
<th>Al</th>
|
||||
<th>Ti</th>
|
||||
<th>Cr</th>
|
||||
<th>Ni</th>
|
||||
<th>Cu</th>
|
||||
<th>N</th>
|
||||
<th>Fe</th>
|
||||
<th>B</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.al || '/' }}</td>
|
||||
<td>{{ item.ti || '/' }}</td>
|
||||
<td>{{ item.cr || '/' }}</td>
|
||||
<td>{{ item.ni || '/' }}</td>
|
||||
<td>{{ item.cu || '/' }}</td>
|
||||
<td>{{ item.n || '/' }}</td>
|
||||
<td>{{ item.fe || '/' }}</td>
|
||||
<td>{{ item.b || '/' }}</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>
|
||||
<td>{{ item.plasticExtensionStrength || '/' }}</td>
|
||||
<td>{{ item.coatingSurfaceStructure || '/' }}</td>
|
||||
<td>{{ item.coatingMass || '/' }}</td>
|
||||
</tr>
|
||||
<tr v-if="items.length === 0">
|
||||
<td colspan="30" 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 v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/zhijian.png" class="stamp-image" alt="质检专用章" />
|
||||
<div class="signature-block">
|
||||
<div class="signature-label">质量负责人:</div>
|
||||
<img v-if="certificate.approveStatus === 'PASSED'" src="@/assets/images/yanghongyan.png" class="signature-image" alt="签名" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RawMaterialTemplate',
|
||||
props: {
|
||||
certificate: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '';
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.certificate-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,20 @@
|
||||
import ChromiumTemplate from './ChromiumTemplate.vue';
|
||||
import GalvanizingTemplate from './GalvanizingTemplate.vue';
|
||||
import ColdHardTemplate from './ColdHardTemplate.vue';
|
||||
import RawMaterialTemplate from './RawMaterialTemplate.vue';
|
||||
|
||||
export const templateMap = {
|
||||
chromium: ChromiumTemplate,
|
||||
galvanizing: GalvanizingTemplate,
|
||||
coldHard: ColdHardTemplate,
|
||||
rawMaterial: RawMaterialTemplate
|
||||
};
|
||||
|
||||
export const templateOptions = [
|
||||
{ value: 'chromium', label: '镀铬质保书模版' },
|
||||
{ value: 'galvanizing', label: '镀锌质保书模版' },
|
||||
{ value: 'coldHard', label: '冷硬质保书模版' },
|
||||
{ value: 'rawMaterial', label: '原料质保书模版' }
|
||||
];
|
||||
|
||||
export default templateMap;
|
||||
@@ -106,6 +106,11 @@
|
||||
</el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="原料号" align="center" prop="rawCoilNo" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.rawCoilNo" style="background-color: #fff3e6;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="炉号" align="center" prop="heatNo" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.heatNo" style="background-color: #e6f7ff;" />
|
||||
@@ -162,6 +167,46 @@
|
||||
<el-input v-model="scope.row.als" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Al(%)" align="center" prop="al" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.al" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Ti(%)" align="center" prop="ti" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.ti" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Cr(%)" align="center" prop="cr" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.cr" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Ni(%)" align="center" prop="ni" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.ni" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Cu(%)" align="center" prop="cu" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.cu" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="N(%)" align="center" prop="n" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.n" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Fe(%)" align="center" prop="fe" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.fe" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="B(%)" align="center" prop="b" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.b" style="background-color: #e6f7ff;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="屈服强度(MPa)" align="center" prop="yieldStrength" width="130">
|
||||
<template slot-scope="scope">
|
||||
@@ -188,6 +233,11 @@
|
||||
<el-input v-model="scope.row.bendingTest" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="镀层" align="center" prop="coating" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.coating" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
|
||||
<el-table-column label="表面质量" align="center" prop="surfaceQuality" width="100">
|
||||
<template slot-scope="scope">
|
||||
@@ -204,6 +254,36 @@
|
||||
<el-input v-model="scope.row.edgeStatus" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规定塑性延伸强度(MPa)" align="center" prop="plasticExtensionStrength" width="170">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model.number="scope.row.plasticExtensionStrength" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="镀层表面结构" align="center" prop="coatingSurfaceStructure" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.coatingSurfaceStructure" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="镀层重量(g/m²)" align="center" prop="coatingMass" width="130">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model.number="scope.row.coatingMass" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="表面处理" align="center" prop="surfaceTreatment" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.surfaceTreatment" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="调制度" align="center" prop="temperDegree" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.temperDegree" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="锌层重量平均值" align="center" prop="zincCoatingWeight" width="160">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model.number="scope.row.zincCoatingWeight" style="background-color: #f6ffed;" />
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<!-- <el-table-column label="备注" align="center" prop="remark">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.remark" style="background-color: #fff0f6;" />
|
||||
@@ -335,7 +415,25 @@
|
||||
|
||||
<!-- 隐藏的打印组件 -->
|
||||
<CertificatePrintPreview ref="certificatePrint" v-show="false" :certificate="printCertificateData"
|
||||
:items="printItemsData" />
|
||||
:items="printItemsData" :template-type="selectedTemplateType" />
|
||||
|
||||
<!-- 模板选择对话框 -->
|
||||
<el-dialog title="选择质保书模板" :visible.sync="templateDialogVisible" width="500px" append-to-body>
|
||||
<div class="template-selection">
|
||||
<el-radio-group v-model="selectedTemplateType" class="template-radio-group">
|
||||
<el-radio v-for="option in templateOptions" :key="option.value" :label="option.value" class="template-radio">
|
||||
<div class="template-option">
|
||||
<i class="el-icon-document"></i>
|
||||
<span>{{ option.label }}</span>
|
||||
</div>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="confirmTemplate">确 定</el-button>
|
||||
<el-button @click="templateDialogVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -347,6 +445,7 @@ import { listChemicalItem } from "@/api/mes/qc/chemicalItem";
|
||||
import { listPhysicalItem } from "@/api/mes/qc/physicalItem";
|
||||
import CoilSelector from "@/components/CoilSelector/index.vue";
|
||||
import CertificatePrintPreview from "./components/CertificatePrintPreview.vue";
|
||||
import { templateOptions } from "./components/templates";
|
||||
import { print as printPdf } from "./lib/printUtils";
|
||||
|
||||
export default {
|
||||
@@ -362,6 +461,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templateOptions,
|
||||
buttonLoading: false,
|
||||
loading: false,
|
||||
certificateLoading: false,
|
||||
@@ -380,6 +480,9 @@ export default {
|
||||
printComponentVisible: false,
|
||||
printCertificateData: {},
|
||||
printItemsData: [],
|
||||
templateDialogVisible: false,
|
||||
selectedTemplateType: 'chromium',
|
||||
templateDialogResolve: null,
|
||||
certificateForm: {
|
||||
certificateNo: '',
|
||||
contractNo: '',
|
||||
@@ -527,13 +630,15 @@ export default {
|
||||
]);
|
||||
const chem = chemRes.rows && chemRes.rows[0] || {};
|
||||
const phys = physRes.rows && physRes.rows[0] || {};
|
||||
const { c, si, mn, p, s, als, yieldStrength, tensileStrength, elongation, hardness, bendingTest, surfaceQuality, surfaceStructure, edgeStatus } = { ...chem, ...phys };
|
||||
return { c, si, mn, p, s, als, yieldStrength, tensileStrength, elongation, hardness, bendingTest, surfaceQuality, surfaceStructure, edgeStatus };
|
||||
const { c, si, mn, p, s, als, al, ti, cr, ni, cu, n, fe, b } = chem;
|
||||
const { yieldStrength, tensileStrength, elongation, hardness, bendingTest, surfaceQuality, surfaceStructure, edgeStatus, plasticExtensionStrength, coatingSurfaceStructure, coatingMass, coating, surfaceTreatment, zincCoatingWeight } = phys;
|
||||
return { c, si, mn, p, s, als, al, ti, cr, ni, cu, n, fe, b, yieldStrength, tensileStrength, elongation, hardness, bendingTest, surfaceQuality, surfaceStructure, edgeStatus, plasticExtensionStrength, coatingSurfaceStructure, coatingMass, coating, surfaceTreatment, zincCoatingWeight };
|
||||
},
|
||||
async handleCoilSelect(row) {
|
||||
if (this.currentEditRow) {
|
||||
const editRow = this.currentEditRow;
|
||||
editRow.coilNo = row.currentCoilNo;
|
||||
editRow.materialNo = row.enterCoilNo;
|
||||
editRow.materialType = row.material;
|
||||
editRow.size = row.specification;
|
||||
editRow.weight = row.netWeight;
|
||||
@@ -718,6 +823,9 @@ export default {
|
||||
});
|
||||
},
|
||||
async handlePrint() {
|
||||
const confirmed = await this.showTemplateDialog();
|
||||
if (!confirmed) return;
|
||||
|
||||
this.printCertificateData = this.currentCertificateInfo;
|
||||
this.printItemsData = this.certificateItemList || [];
|
||||
this.$nextTick(() => {
|
||||
@@ -725,6 +833,19 @@ export default {
|
||||
console.log(el);
|
||||
printPdf(el);
|
||||
});
|
||||
},
|
||||
showTemplateDialog() {
|
||||
return new Promise((resolve) => {
|
||||
this.templateDialogResolve = resolve;
|
||||
this.templateDialogVisible = true;
|
||||
});
|
||||
},
|
||||
confirmTemplate() {
|
||||
this.templateDialogVisible = false;
|
||||
if (this.templateDialogResolve) {
|
||||
this.templateDialogResolve(true);
|
||||
this.templateDialogResolve = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -899,4 +1020,46 @@ export default {
|
||||
::v-deep .el-table .cell {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.template-selection {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.template-radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.template-radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.template-radio:hover {
|
||||
border-color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.template-radio.is-checked {
|
||||
border-color: #409eff;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
|
||||
.template-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.template-option i {
|
||||
font-size: 20px;
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,16 @@
|
||||
<template>
|
||||
<el-descriptions
|
||||
:column="column"
|
||||
:border="border"
|
||||
size="small"
|
||||
:title="title"
|
||||
>
|
||||
<el-descriptions :column="column" :border="border" size="small" :title="title">
|
||||
<template slot="extra">
|
||||
<slot name="extra"></slot>
|
||||
</template>
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in filteredFields"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:span="item.span || 1"
|
||||
>
|
||||
<template>
|
||||
<el-descriptions-item v-for="(item, index) in filteredFields" :key="index" :label="item.label"
|
||||
:span="item.span || 1">
|
||||
<template v-if="item.children">
|
||||
<span v-for="(child, cIndex) in item.children" :key="cIndex" style="margin-right: 12px;">
|
||||
{{ child.label }}: {{ child.value || '-' }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ item.value || '-' }}
|
||||
</template>
|
||||
</el-descriptions-item>
|
||||
@@ -37,7 +33,7 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 只显示有值的字段
|
||||
// 只显示有值的字段
|
||||
showOnlyValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@@ -66,9 +62,22 @@ export default {
|
||||
{ label: '切边要求', key: 'trimmingRequirement' },
|
||||
{ label: '原料材质', key: 'packingStatus' },
|
||||
{ label: '包装要求', key: 'packagingRequirement' },
|
||||
{ label: '实测厚度[mm]', key: 'actualThickness' },
|
||||
// 设置对照属性，两个数量显示在一个格子里
|
||||
{
|
||||
label: '长度[m]',
|
||||
children: [
|
||||
{ label: '实测', key: 'actualLength' },
|
||||
{ label: '理论', key: 'theoreticalLength' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '厚度[mm]',
|
||||
children: [
|
||||
{ label: '实测', key: 'actualThickness' },
|
||||
{ label: '理论', key: 'theoreticalThickness' }
|
||||
]
|
||||
},
|
||||
{ label: '实测宽度[mm]', key: 'actualWidth' },
|
||||
{ label: '长度[m]', key: 'length' },
|
||||
{ label: '毛重[t]', key: 'grossWeight' },
|
||||
{ label: '净重[t]', key: 'netWeight' },
|
||||
{ label: '生产开始', key: 'productionStartTime' },
|
||||
@@ -80,13 +89,29 @@ export default {
|
||||
]
|
||||
},
|
||||
filteredFields() {
|
||||
let fields = this.fields.map(item => ({
|
||||
...item,
|
||||
value: this.coilInfo[item.key]
|
||||
}))
|
||||
let fields = this.fields.map(item => {
|
||||
if (item.children) {
|
||||
return {
|
||||
...item,
|
||||
children: item.children.map(child => ({
|
||||
...child,
|
||||
value: this.coilInfo[child.key]
|
||||
}))
|
||||
}
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
value: this.coilInfo[item.key]
|
||||
}
|
||||
})
|
||||
|
||||
if (this.showOnlyValue) {
|
||||
fields = fields.filter(item => item.value !== undefined && item.value !== null && item.value !== '')
|
||||
fields = fields.filter(item => {
|
||||
if (item.children) {
|
||||
return item.children.some(child => child.value !== undefined && child.value !== null && child.value !== '')
|
||||
}
|
||||
return item.value !== undefined && item.value !== null && item.value !== ''
|
||||
})
|
||||
}
|
||||
|
||||
return fields
|
||||
|
||||
@@ -295,6 +295,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
padding: 1em;
|
||||
/* width: 680.315px; */
|
||||
@@ -318,7 +319,7 @@ export default {
|
||||
font-size: 12px;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-family: var(--label-font);
|
||||
}
|
||||
|
||||
.company-header {
|
||||
@@ -434,9 +435,9 @@ export default {
|
||||
.nob {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
|
||||
@@ -58,13 +58,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
width: 50em; /* 容器宽度（可根据需求调整） */
|
||||
min-height: 30em; /* 容器最小高度 */
|
||||
border: 1px solid #000;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
font-size: 8px;
|
||||
line-height: 1.2;
|
||||
display: flex;
|
||||
|
||||
@@ -296,6 +296,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
padding: 1em;
|
||||
/* width: 680.315px; */
|
||||
@@ -319,7 +320,7 @@ export default {
|
||||
font-size: 12px;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-family: var(--label-font);
|
||||
}
|
||||
|
||||
.company-header {
|
||||
@@ -437,9 +438,9 @@ export default {
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
<div
|
||||
style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;"
|
||||
class="value-cell">
|
||||
class="value-cell enter-coil-no">
|
||||
{{ content.enterCoilNo || '' }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -279,6 +279,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
width: 25em;
|
||||
height: 20em;
|
||||
@@ -287,9 +288,8 @@ export default {
|
||||
/* 启用Flex布局 */
|
||||
flex-direction: column;
|
||||
/* 子元素垂直排列 */
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
box-sizing: border-box;
|
||||
/* 确保内边距/边框不影响总尺寸 */
|
||||
}
|
||||
|
||||
.material-label-table {
|
||||
@@ -327,15 +327,21 @@ export default {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.enter-coil-no {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
|
||||
.nob {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
|
||||
@@ -302,6 +302,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
padding: 1em;
|
||||
/* width: 680.315px; */
|
||||
@@ -325,7 +326,7 @@ export default {
|
||||
font-size: 12px;
|
||||
border: 1px solid #000;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-family: var(--label-font);
|
||||
}
|
||||
|
||||
.company-header {
|
||||
@@ -443,9 +444,9 @@ export default {
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
|
||||
@@ -50,13 +50,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
width: 50em; /* 容器宽度（可根据需求调整） */
|
||||
min-height: 30em; /* 容器最小高度 */
|
||||
border: 1px solid #000;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
font-size: 8px;
|
||||
line-height: 1.2;
|
||||
display: flex;
|
||||
|
||||
@@ -60,13 +60,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.sample-label-container {
|
||||
width: 50em;
|
||||
height: 40em;
|
||||
border: 1px solid #000;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
font-size: 10px;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
|
||||
@@ -166,11 +166,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
width: 25em;
|
||||
height: 20em;
|
||||
padding: 16px;
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -199,7 +200,8 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* 公司名称单元格 */
|
||||
@@ -260,7 +262,7 @@ export default {
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
<!-- 第一行：冷卷号、热卷号 -->
|
||||
<div class="grid-cell label-cell">冷卷号</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.currentCoilNo || '' }}</div>
|
||||
<div class="nob current-coil-no">{{ content.currentCoilNo || '' }}</div>
|
||||
</div>
|
||||
<div class="grid-cell label-cell">热卷号</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.enterCoilNo || '' }}</div>
|
||||
<div class="nob enter-coil-no">{{ content.enterCoilNo || '' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：规格、钢种 -->
|
||||
@@ -170,11 +170,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
width: 45em;
|
||||
height: 25em;
|
||||
padding: 16px;
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -253,12 +254,17 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.current-coil-no, .enter-coil-no {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
@page {
|
||||
|
||||
@@ -184,6 +184,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
width: 25em;
|
||||
height: 20em;
|
||||
@@ -192,7 +193,7 @@ export default {
|
||||
/* 启用Flex布局 */
|
||||
flex-direction: column;
|
||||
/* 子元素垂直排列 */
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
box-sizing: border-box;
|
||||
/* 确保内边距/边框不影响总尺寸 */
|
||||
}
|
||||
@@ -248,7 +249,7 @@ export default {
|
||||
white-space: normal;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
<!-- 第一行：冷卷号、热卷号 -->
|
||||
<div class="grid-cell label-cell">冷卷号</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.currentCoilNo || '' }}</div>
|
||||
<div class="nob current-coil-no">{{ content.currentCoilNo || '' }}</div>
|
||||
</div>
|
||||
<div class="grid-cell label-cell">热卷号</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.enterCoilNo || '' }}</div>
|
||||
<div class="nob enter-coil-no">{{ content.enterCoilNo || '' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：规格、钢种 -->
|
||||
@@ -170,11 +170,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './label-common.css';
|
||||
.label-container {
|
||||
width: 45em;
|
||||
height: 25em;
|
||||
padding: 16px;
|
||||
font-family: "SimSun", serif;
|
||||
font-family: var(--label-font);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -254,12 +255,17 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-family: var(--label-font);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.current-coil-no, .enter-coil-no {
|
||||
font-size: 1.1em !important;
|
||||
}
|
||||
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
@page {
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--label-font: '黑体', 'Courier New', 'SimSun', serif;
|
||||
}
|
||||
@@ -154,7 +154,11 @@ export default {
|
||||
{ label: '厂家', value: 'manufacturer' },
|
||||
{ label: '表面处理', value: 'surfaceTreatmentDesc' },
|
||||
{ label: '镀层质量', value: 'zincLayer' },
|
||||
{ label: '长度', value: 'length' },
|
||||
{ label: '实测长度', value: 'actualLength' },
|
||||
{ label: '理论长度', value: 'theoreticalLength' },
|
||||
{ label: '实测厚度', value: 'actualThickness' },
|
||||
{ label: '理论厚度', value: 'theoreticalThickness' },
|
||||
{ label: '实测宽度', value: 'actualWidth' },
|
||||
{ label: '毛重', value: 'grossWeight' },
|
||||
{ label: '净重', value: 'netWeight' },
|
||||
{ label: '创建时间', value: 'createTime' },
|
||||
|
||||
Reference in New Issue
Block a user