<template> 
 | 
    <div class="page"> 
 | 
        <div class="page_info"> 
 | 
            <div class="page_info_title blue">{{gz_info.code}}</div> 
 | 
            <div class="page_info_nr"> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">物料信息:</div> 
 | 
                    <div class="item_nr">{{gz_info.mmodelName}} 丨 {{gz_info.mmodelCode}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">批次号:</div> 
 | 
                    <div class="item_nr">{{gz_info.batch}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">数量:</div> 
 | 
                    <div class="item_nr">{{gz_info.num}}{{gz_info.umodelName}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">工序:</div> 
 | 
                    <div class="item_nr">{{gz_info.pmodelName}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">质量属性:</div> 
 | 
                    <div class="item_nr green" v-if="gz_info.qualityType === 0">合格</div> 
 | 
                    <div class="item_nr yellow" v-if="gz_info.qualityType === 1">不良</div> 
 | 
                    <div class="item_nr red" v-if="gz_info.qualityType === 2">报废</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">所在仓库:</div> 
 | 
                    <div class="item_nr">{{gz_info.whmodelName}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">所在货位:</div> 
 | 
                    <div class="item_nr">{{gz_info.lmodelUnionName}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">返修工序:</div> 
 | 
                    <div class="item_nr">{{gz_info.fxpmodelName ? gz_info.fxpmodelName : '-'}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">返修单号:</div> 
 | 
                    <div class="item_nr">{{gz_info.backorderId ? gz_info.backorderId : '-'}}</div> 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="page_title">当前关联工单信息</div> 
 | 
        <div class="page_info" v-if="JSON.stringify(gd_info) !== '{}'"> 
 | 
            <div class="page_info_title">{{gd_info.code}}</div> 
 | 
            <div class="page_info_nr" v-if="gd_info.mmodel && gd_info.pgmodel"> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">物料编码:</div> 
 | 
                    <div class="item_nr">{{gd_info.mmodel.code}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">开工日期:</div> 
 | 
                    <div class="item_nr">{{gd_info.planDate}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">批次号:</div> 
 | 
                    <div class="item_nr">{{gd_info.batch}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">生产数量:</div> 
 | 
                    <div class="item_nr">{{gd_info.planNum}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">生产设备:</div> 
 | 
                    <div class="item_nr">{{gd_info.pgmodel.name}}</div> 
 | 
                </div> 
 | 
                <div class="item"> 
 | 
                    <div class="item_label">生产人员:</div> 
 | 
                    <div class="item_nr"> 
 | 
                        <template v-if="gd_info.proUserList && gd_info.proUserList.length > 0"> 
 | 
                            <span v-for="(item, index) in gd_info.proUserList" :key="index">{{item.proUserDepartName}}<br /></span> 
 | 
                        </template> 
 | 
                        <span v-else>-</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="wu" v-else> 
 | 
            <span>暂未关联工单</span> 
 | 
        </div> 
 | 
    </div> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
    import { ref, onMounted } from 'vue' 
 | 
    import { useRoute } from "vue-router" 
 | 
    import { getListByCondition, queryById } from '@/apis/WorkOrderAPI' 
 | 
  
 | 
    const route = useRoute() 
 | 
  
 | 
    let gz_info = ref({}) 
 | 
    let gd_info = ref({}) 
 | 
  
 | 
    const getgz_Info = async (id: string): Promise<void> => { 
 | 
        let res = await getListByCondition({ id }) 
 | 
        if (res.code === 200) { 
 | 
            gz_info.value = res.data[0] 
 | 
            if (res.data[0].workorderId) { 
 | 
                getgd_Info(res.data[0].workorderId) 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
  
 | 
    const getgd_Info = async (id: string): Promise<void> => { 
 | 
        let res = await queryById(id) 
 | 
        if (res.code === 200) { 
 | 
            gd_info.value = res.data 
 | 
        } 
 | 
    } 
 | 
  
 | 
    onMounted(() => { 
 | 
        if (!route.query.id) return 
 | 
        getgz_Info(route.query.id as string) 
 | 
    }) 
 | 
</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; 
 | 
            } 
 | 
            .page_info_nr { 
 | 
                border-radius: 16px; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                flex-wrap: wrap; 
 | 
                .item { 
 | 
                    width: 100%; 
 | 
                    display: flex; 
 | 
                    margin-top: 24px; 
 | 
                    .item_label { 
 | 
                        font-size: 24px; 
 | 
                        font-weight: 400; 
 | 
                        color: #666666; 
 | 
                        flex-shrink: 0; 
 | 
                    } 
 | 
                    .item_nr { 
 | 
                        flex: 1; 
 | 
                        font-size: 24px; 
 | 
                        font-weight: 400; 
 | 
                        color: #222222; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .page_title { 
 | 
            padding: 40px 30px 30px 30px; 
 | 
            font-size: 28px; 
 | 
            font-weight: 500; 
 | 
            color: #222222; 
 | 
        } 
 | 
        .wu { 
 | 
            width: 100%; 
 | 
            height: 300px; 
 | 
            background: white; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            justify-content: center; 
 | 
            span { 
 | 
                font-size: 25px; 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |