| <template> | 
|     <div class="page"> | 
|         <div class="page_info"> | 
|             <div class="page_info_title"> | 
|                 <span>{{info.code}}</span> | 
|                 <span :class="[ info.doneType === 0 ? 'green' : 'red' ]" v-if="info.checkType === 0">检具检 - {{ info.doneType === 0 ? '合格' : '不合格' }}</span> | 
|                 <span :class="[ info.doneType === 0 ? 'green' : 'red' ]" v-if="info.checkType === 1">外观检 - {{ info.doneType === 0 ? '合格' : '不合格' }}</span> | 
|             </div> | 
|             <div class="page_info_nr"> | 
|                 <div class="item"> | 
|                     <div class="item_label">检验类型:</div> | 
|                     <div class="item_nr">品质终检</div> | 
|                 </div> | 
|                 <div class="items"> | 
|                     <div class="item_label">物料信息:</div> | 
|                     <div class="item_nr">{{info.materialName}} | {{info.materialCode}}</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="item_label">工单编号:</div> | 
|                     <div class="item_nr">{{info.workOrderCode}}</div> | 
|                 </div> | 
|                 <div class="items"> | 
|                     <div class="item_label">送检数量:</div> | 
|                     <div class="item_nr">{{info.num}}</div> | 
|                 </div> | 
|                 <div class="item"> | 
|                     <div class="item_label">检验日期:</div> | 
|                     <div class="item_nr">{{info.createTime}}</div> | 
|                 </div> | 
|                 <div class="items"> | 
|                     <div class="item_label">检验人员:</div> | 
|                     <div class="item_nr">{{info.userName}} / {{info.departmentName}}</div> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <div class="page_title">检验详细信息</div> | 
|         <div class="page_info1" v-for="(item, index) in info.endCheckDetailList" :key="index"> | 
|             <div class="page_info1_items"> | 
|                 <div class="label">工装:</div> | 
|                 <div class="nr">{{item.appliancesCode}}</div> | 
|             </div> | 
|             <div class="page_info1_items"> | 
|                 <div class="label">合格数量:</div> | 
|                 <div class="nr">{{item.qualifiedNum}}</div> | 
|             </div> | 
|             <div class="page_info1_items"> | 
|                 <div class="label">不良数量:</div> | 
|                 <div class="nr">{{item.unqualifiedNum}}</div> | 
|             </div> | 
|             <div class="page_info1_items"> | 
|                 <div class="label">不良原因:</div> | 
|                 <div class="nr">{{item.checkInfo ? item.checkInfo : '-'}}</div> | 
|             </div> | 
|         </div> | 
|     </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
|     import { ref, onMounted } from 'vue' | 
|     import { useRoute } from "vue-router" | 
|     import { getById } from '@/apis/PlanningAPI' | 
|   | 
|     const route = useRoute() | 
|   | 
|     let info = ref({}) | 
|   | 
|     const getBYids = () => { | 
|         getById(route.query.id) | 
|             .then(res => { | 
|                 if (res.code === 200 && res.data) { | 
|                     info.value = res.data | 
|                 } | 
|             }) | 
|     } | 
|   | 
|     onMounted(() => { | 
|         getBYids() | 
|     }) | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .page { | 
|         width: 100%; | 
|         height: 100%; | 
|         position: absolute; | 
|         background: #F7F7F7; | 
|         .page_info { | 
|             padding: 30px; | 
|             background: #ffffff; | 
|             .page_info_title { | 
|                 font-size: 32px; | 
|                 font-weight: 500; | 
|                 color: #333333; | 
|                 display: flex; | 
|                 justify-content: space-between; | 
|                 align-items: center; | 
|             } | 
|             .page_info_nr { | 
|                 padding: 0 30px 30px 30px; | 
|                 margin-top: 30px; | 
|                 background: #F7F7F7; | 
|                 border-radius: 16px; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 flex-wrap: wrap; | 
|                 .items { | 
|                     width: 100%; | 
|                     display: flex; | 
|                     margin-top: 24px; | 
|                     .item_label { | 
|                         font-size: 24px; | 
|                         font-weight: 400; | 
|                         color: #666666; | 
|                         flex-shrink: 0; | 
|                     } | 
|                     .item_nr { | 
|                         font-size: 24px; | 
|                         font-weight: 400; | 
|                         color: #222222; | 
|                     } | 
|                 } | 
|                 .item { | 
|                     width: 100%; | 
|                     display: flex; | 
|                     margin-top: 24px; | 
|                     .item_label { | 
|                         font-size: 24px; | 
|                         font-weight: 400; | 
|                         color: #666666; | 
|                         flex-shrink: 0; | 
|                     } | 
|                     .item_nr { | 
|                         font-size: 24px; | 
|                         font-weight: 400; | 
|                         color: #222222; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .page_title { | 
|             padding: 40px 30px 30px 30px; | 
|             font-size: 32px; | 
|             font-weight: 500; | 
|             color: #222222; | 
|         } | 
|         .page_info1 { | 
|             padding: 0 30px 30px 30px; | 
|             background: #ffffff; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: space-between; | 
|             flex-wrap: wrap; | 
|             margin-bottom: 24px; | 
|             .page_info1_items { | 
|                 display: flex; | 
|                 width: 45%; | 
|                 margin-top: 30px; | 
|                 .label { | 
|                     font-size: 26px; | 
|                     font-weight: 400; | 
|                     color: #666666; | 
|                     flex-shrink: 0; | 
|                 } | 
|                 .nr { | 
|                     font-size: 26px; | 
|                     font-weight: 400; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|             .page_info1_item { | 
|                 display: flex; | 
|                 width: 55%; | 
|                 margin-top: 30px; | 
|                 .label { | 
|                     font-size: 26px; | 
|                     font-weight: 400; | 
|                     color: #666666; | 
|                     flex-shrink: 0; | 
|                 } | 
|                 .nr { | 
|                     font-size: 26px; | 
|                     font-weight: 400; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|         } | 
|         .page_err { | 
|             padding: 0 30px 30px 30px; | 
|             background: #ffffff; | 
|             .page_err_item { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                 padding-top: 30px; | 
|                 span { | 
|                     &:nth-child(1) { | 
|                         font-size: 32px; | 
|                         font-weight: 500; | 
|                         color: #DE5243; | 
|                     } | 
|                     &:nth-child(2) { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         color: #DE5243; | 
|                     } | 
|                 } | 
|             } | 
|             .page_err_items { | 
|                 display: flex; | 
|                 justify-content: space-between; | 
|                 padding-top: 30px; | 
|                 span { | 
|                     &:nth-child(1) { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         color: #666666; | 
|                         flex-shrink: 0; | 
|                     } | 
|                     &:nth-child(2) { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         color: #222222; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|     } | 
| </style> |