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