<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.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.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.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>
|
