<template>
|
<div class="preview-main">
|
<div class="logo">
|
<img :src="logoSrc" />
|
</div>
|
<div class="center">
|
<h1>原材料检测报告</h1>
|
<table height="30px">
|
<tr>
|
<td>材料名称</td>
|
<td colspan="5">{{reportData.name}}</td>
|
</tr>
|
<tr>
|
<td>规格型号</td>
|
<td colspan="2">
|
{{reportData.length==0?null:reportData.specifications.split("-")[1]}}
|
</td>
|
<td>材料厂家</td>
|
<td colspan="2">{{reportData.supplier}}</td>
|
</tr>
|
<tr>
|
<td>材料编号</td>
|
<td colspan="2">{{reportData.imCode}}</td>
|
<td>检测编号</td>
|
<td colspan="2">{{reportData.insCode}}</td>
|
</tr>
|
<tr>
|
<td>检测依据</td>
|
<td colspan="2">
|
{{reportData.length==0?null:reportData.specifications.split("-")[0]}}
|
</td>
|
<td>检测类别</td>
|
<td colspan="2">原材料</td>
|
</tr>
|
<tr>
|
<td>序号</td>
|
<td>检验项目</td>
|
<td>单位</td>
|
<td>标准要求</td>
|
<td>检测结果</td>
|
<td>单项判断</td>
|
</tr>
|
<tr v-for="(item,index) in arr" :key="index">
|
<td>{{index+1}}</td>
|
<td>{{item.ipName}}</td>
|
<td>{{item.unit}}</td>
|
<td>{{item.required}}</td>
|
<td>{{item.testValue}}</td>
|
<td>
|
{{isIfState(item.testState) }}
|
</td>
|
</tr>
|
<tr>
|
<td colspan="6">检验结论：{{reportData.type == 1 ? "合格" : "不合格"}}</td>
|
</tr>
|
<tr>
|
<td colspan="6">
|
注：“√”表示该项目合格，“×”表示该项目不合格，“—”表示该项目不要求检测。
|
</td>
|
</tr>
|
</table>
|
<el-row class="date-group">
|
<p>检测、日期：<span>{{reportData.createTime}}</span></p>
|
<p>审核、日期：<span>{{reportData.checkTime}}</span></p>
|
</el-row>
|
<p class="footer">
|
<span>编号：</span><span>{{reportData.rcode}} </span>
|
<span>发行日期：</span><span>{{now}} </span>
|
<span>保存期限：</span><span>长期</span>
|
</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default ({
|
name: 'Preview',
|
data() {
|
return {
|
logoSrc: require("@/assets/404_images/logo.png"),
|
now: new Date().toLocaleDateString(),
|
arr: []
|
}
|
},
|
mounted() {
|
this.arr = this.reportData.products;
|
if(this.reportData.length>0){
|
if (this.reportData.products.length < 10) {
|
let size = this.reportData.products.length;
|
let num = 10 - size
|
for (let i = 0; i < num; i++) {
|
this.arr.push({
|
code: null,
|
ipName: "",
|
required: "",
|
testState: null,
|
testValue: "",
|
unit: ""
|
})
|
}
|
}
|
}
|
},
|
methods: {
|
formatDate(val) {
|
var dt = new Date(val);
|
let year = dt.getFullYear();
|
let month = (dt.getMonth() + 1).toString().padStart(2, '0');
|
let date = dt.getDate().toString().padStart(2, '0');
|
return `${year}-${month}-${date}`;
|
},
|
isIfState(val) {
|
if (val === 1) return "√"
|
else if (val === null || val === undefined) return null
|
else return "X"
|
}
|
},
|
props: ["reportData"]
|
})
|
</script>
|
<style scoped lang="scss">
|
.preview-main {
|
margin: 0;
|
padding: 0;
|
width: 90%;
|
margin-left: 5%;
|
|
.logo {
|
img {
|
width: 150px;
|
height: 60px;
|
}
|
}
|
|
.center {
|
width: 100%;
|
|
h1 {
|
width: 100%;
|
font-family: "微软雅黑" !important;
|
text-align: center;
|
}
|
|
table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 18px;
|
}
|
|
table,
|
tr,
|
th,
|
td {
|
border: 2px solid black;
|
}
|
|
tr,
|
td,
|
th {
|
padding: 15px 10px;
|
}
|
|
.date-group {
|
width: 90%;
|
margin-left: 5%;
|
|
p {
|
width: 50%;
|
float: left;
|
text-align: center;
|
padding: 50px 0px;
|
font-size: 18px;
|
}
|
}
|
|
.footer {
|
width: 90%;
|
margin-left: 5%;
|
color: lightgray;
|
text-align: center;
|
margin-top: 300px;
|
}
|
}
|
}
|
</style>
|
