feat: 新增质保书模板功能，优化标签样式与钢卷信息展示
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user