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