modified: src/components/experiment/checkTheReport/index.vue modified: ...

zouyu

2023-09-05 305b8976e9ad666e52c157ebc79f05c2fe03d1ff

 src/components/experiment/checkTheReport/index.vue

@@ -1,136 +1,182 @@
<template>
    <div class="preview-main">
        <div class="logo">
            <img :src="logoSrc" />
        </div>
        <div class="center">
            <h1>原材料检测报告</h1>
            <table>
                <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 reportData.products" :key="item">
                    <td>{{index+1}}</td>
                    <td>{{item.ipName}}</td>
                    <td>{{item.unit}}</td>
                    <td>{{item.required}}</td>
                    <td>{{item.testValue}}</td>
                    <td>{{item.testState == 1 ? "√" : "X"}}</td>
                </tr>
                <tr>
                    <td colspan="6">检验结论：{{reportData.type == 1 ? "合格" : "不合格"}}</td>
                </tr>
                <tr>
                    <td colspan="6">
                        注：“√”表示该项目合格，“×”表示该项目不合格，“—”表示该项目不要求检测。
                    </td>
                </tr>
            </table>
            <el-row class="date-group" :gutter="20">
                <el-col :span="12">检测、日期：<span>{{reportData.createTime}}</span></el-col>
                <el-col :span="12">审核、日期：<span>{{reportData.checkTime}}</span></el-col>
            </el-row>
            <p class="footer">
                <span>编号:</span><span>{{reportData.reportCode}}</span>
                <span> 发行日期:</span><span>{{new Date() | formatDate}}</span>
                <span> 保存期限:</span><span>长期</span>
            </p>
        </div>
    </div>
   <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({
    data() {
        return {
            logoSrc : require("@/assets/404_images/logo.png"),    
        }
    },
    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}`;
        }
    },
    props:["reportData"]
})
   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%;
                height:100vh;
                border-collapse: collapse;
                font-size: 18px;
            }
            table,tr,th,td{
                border: 2px solid black;
            }
            tr,td,th{
                padding: 5px 5px;
            }
            .date-group .el-col{
                text-align: center;
                padding: 50px 0px;
                font-size: 18px;
            }
            .footer{
                margin: 0;
                padding: 0;
                width:90%;
                margin-left: 5%;
                color: gray; 
                text-align: center;
                margin-top: 250px;
            }
        }
     }
</style>
   .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>