| <template> | 
|     <div class="rk"> | 
|         <div class="rk_info"> | 
|             <span>作业员:{{info.worker}}/{{info.groupName}}</span> | 
|             <span>机台/工位:<span v-for="(item, i) in info.deviceList" :key="i">{{item.name}} {{i === info.deviceList.length - 1 ? '' : '/'}}</span></span> | 
|         </div> | 
|         <div class="material-title"> | 
|             <div class="title"> | 
|                 <span class="title-prefix"></span> | 
|                 <span>完工交接物料</span> | 
|             </div> | 
|             <div class="order-time"> | 
|                 <div>单号:{{wlInfo.code}}</div> | 
|                 <div>时间:{{wlInfo.createTime}}</div> | 
|             </div> | 
|         </div> | 
|         <div class="material-content"> | 
|             <div class="item-style" v-if="info.qualifiedBeanList && info.qualifiedBeanList.length > 0"> | 
|                 <div class="item-title-style"> | 
|                     <span class="green">[合格品] </span> | 
|                     <span style="font-weight: 500;">{{total(info.qualifiedBeanList)}}</span> | 
|                 </div> | 
|                 <div class="item-content-style"> | 
|                     <div class="subItem-style" v-for="(item, index) in info.qualifiedBeanList" :key="index"> | 
|                         <div class="subItem-style_top"> | 
|                             <div class="subItem-first-style">{{item.materialName}} | {{item.materialCode}}</div> | 
|                             <div class="subItem-second-style">{{item.sumBox}}盒 | {{item.sumNum}}{{item.unitName}}</div> | 
|                         </div> | 
|                         <div class="subItem-style_bottom"> | 
|                             <span v-if="item.batch">{{item.procedureName ? item.procedureName : '-'}} | {{item.batch}}</span> | 
|                             <span v-else>{{item.procedureName}}</span> | 
|                         </div> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="item-style" v-if="info.rejectsBeanList && info.rejectsBeanList.length > 0"> | 
|                 <div class="item-title-style"> | 
|                     <span class="yellow">[不良品] </span> | 
|                     <span style="font-weight: 500;">{{total(info.rejectsBeanList)}}</span> | 
|                 </div> | 
|                 <div class="item-content-style"> | 
|                     <div class="subItem-style" v-for="(item, index) in info.rejectsBeanList" :key="index"> | 
|                         <div class="subItem-style_top"> | 
|                             <div class="subItem-first-style">{{item.materialName}} | {{item.materialCode}}</div> | 
|                             <div class="subItem-second-style">{{item.sumBox}}盒 | {{item.sumNum}}{{item.unitName}}</div> | 
|                         </div> | 
|                         <div class="subItem-style_bottom"> | 
|                             <span v-if="item.batch">{{item.procedureName ? item.procedureName : '-'}} | {{item.batch}}</span> | 
|                             <span v-else>{{item.procedureName}}</span> | 
|                         </div> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="item-style" v-if="info.scrapBeanList && info.scrapBeanList.length > 0"> | 
|                 <div class="item-title-style"> | 
|                     <span class="red">[报废品] </span> | 
|                     <span style="font-weight: 500;">{{total(info.scrapBeanList)}}</span> | 
|                 </div> | 
|                 <div class="item-content-style"> | 
|                     <div class="subItem-style" v-for="(item, index) in info.scrapBeanList" :key="index"> | 
|                         <div class="subItem-style_top"> | 
|                             <div class="subItem-first-style">{{item.materialName}} | {{item.materialCode}}</div> | 
|                             <div class="subItem-second-style">{{item.sumBox}}盒 | {{item.sumNum}}{{item.unitName}}</div> | 
|                         </div> | 
|                         <div class="subItem-style_bottom"> | 
|                             <span v-if="item.batch">{{item.procedureName ? item.procedureName : '-'}} | {{item.batch}}</span> | 
|                             <span v-else>{{item.procedureName}}</span> | 
|                         </div> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <!--            <div class="notfound" v-else>暂无数据</div>--> | 
|         </div> | 
|         <div class="rk_sc"> | 
|             <div class="rk_sc_header"> | 
|                 <div class="rk_sc_header_box"> | 
|                     <div class="rk_sc_header_x"></div> | 
|                     <span>本次余留次班生产</span> | 
|                 </div> | 
|                 <span v-if="info.finishedInBillBeanList && info.finishedInBillBeanList.length > 0">{{statistics(info.finishedInBillBeanList)}}</span> | 
|             </div> | 
|             <div class="rk_sc_content" v-if="info.finishedInBillBeanList && info.finishedInBillBeanList.length > 0"> | 
|                 <div class="rk_sc_content_item" v-for="(item, index) in info.finishedInBillBeanList" :key="index"> | 
|                     <div class="rk_sc_content_item_a">{{item.code}}</div> | 
|                     <div class="rk_sc_content_item_b"> | 
|                         <span>接收人:{{item.userName}} / {{item.departmentName}}</span> | 
|                         <span>时间:{{item.dealDate}}</span> | 
|                     </div> | 
|                     <div class="rk_sc_content_item_hz"> | 
|                         <div class="rk_sc_content_item_hz_item" v-for="(items, i) in item.reserveMaterialBeanList" :key="i"> | 
|                             <div class="rk_sc_content_item_hz_item_top"> | 
|                                 <span>{{items.materialName}} | {{items.materialCode}}</span> | 
|                                 <!--                                {{wTotal(items.qualified, items.undesirable, items.scrap)}}--> | 
|                                 <span>{{items.boxNum}}盒 | {{items.num}}{{items.unitName}}</span> | 
|                             </div> | 
|                             <div class="rk_sc_content_item_hz_item_bottom"> | 
|                                 <span v-if="items.qualityType === 0"><span class="succ">合格</span> | {{items.procedureName}}{{items.batch ? ' | ' + items.batch : ''}}</span> | 
|                                 <span v-if="items.qualityType === 1"><span class="yellow">不良</span> | {{items.procedureName}}{{items.batch ? ' | ' + items.batch : ''}}</span> | 
|                                 <span v-if="items.qualityType === 2"><span class="warning">报废</span> | {{items.procedureName}}{{items.batch ? ' | ' + items.batch : ''}}</span> | 
|                             </div> | 
|                         </div> | 
|                     </div> | 
|                 </div> | 
|             </div> | 
|             <div class="rk_sc_kong" v-else> | 
|                 <span>暂无数据</span> | 
|             </div> | 
|         </div> | 
|         <div class="rk_zw" v-if="route.query.isShow === '1'"></div> | 
|         <div class="rk_footer" v-if="route.query.isShow === '1'"> | 
|             <button class="rk_footer_u" @click="submit" v-preventReClick>去入库</button> | 
|         </div> | 
|     </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
|     import { ref, onMounted } from 'vue' | 
|     import { useRouter, useRoute } from "vue-router" | 
|     import { getFinishRecord } from '@/apis/WorkOrderAPI' | 
|   | 
|     const route = useRoute() | 
|     const router = useRouter() | 
|     let info: any = ref([]) | 
|     let wlInfo: any = ref({}) | 
|   | 
|     const statistics = (arr: Array<any>): string => { | 
|         let boxNum: number = 0 | 
|         let num: number = 0 | 
|         let dw: string = '' | 
|         arr.forEach((element: any) => { | 
|             if (element.reserveMaterialBeanList && element.reserveMaterialBeanList.length > 0) { | 
|                 element.reserveMaterialBeanList.forEach((element1: any, index: number) => { | 
|                     if (index === 0) { | 
|                         dw = element1.unitName | 
|                     } | 
|                     boxNum = boxNum + element1.boxNum | 
|                     num = num + element1.num | 
|                     console.log(boxNum, num, dw) | 
|                 }) | 
|             } | 
|         }) | 
|         return boxNum + '盒' + ' | ' + num + dw | 
|     } | 
|   | 
|     const wTotal = (hg: object, bl: object, bf: object): string => { | 
|         let boxNum: number = 0 | 
|         let num: number = 0 | 
|         let dw: string = '' | 
|         let arr: Array<any> = [] | 
|         if (hg) { | 
|             arr.push(hg) | 
|         } | 
|         if (bl) { | 
|             arr.push(bl) | 
|         } | 
|         if (bf) { | 
|             arr.push(bf) | 
|         } | 
|         arr.forEach((element: any, index: number) => { | 
|             if (index === 0) { | 
|                 dw = element.unitName | 
|             } | 
|             boxNum = boxNum + element.boxNum | 
|             num = num + element.num | 
|         }) | 
|         return boxNum + '盒' + ' | ' + num + dw | 
|     } | 
|   | 
|     const total = (arr: Array<any>): string => { | 
|         let dw: string = '' | 
|         let boxNum: number = 0 | 
|         let sumNum: number = 0 | 
|         if (arr.length > 0) { | 
|             arr.forEach((element: any, index: number) => { | 
|                 if (index === 0) { | 
|                     dw = element.unitName | 
|                 } | 
|                 boxNum = boxNum + element.sumBox | 
|                 sumNum = sumNum + element.sumNum | 
|             }) | 
|         } | 
|         return boxNum + '盒' + ' | ' + sumNum + dw | 
|     } | 
|   | 
|     // 完工入库提交 | 
|     const submit = () => { | 
|         router.replace({ name: 'warehousing', query: { id: route.query.id, dbid: route.query.dbid, type: 7, Type: route.query.Type } }) | 
|     } | 
|   | 
|     // 获取详情 | 
|     const finishedDetails = () => { | 
|         getFinishRecord({ | 
|             id: route.query.id | 
|         }).then(res => { | 
|             if (res.code === 200) { | 
|                 info.value = JSON.parse(res.data.abstracts) | 
|                 wlInfo.value = res.data.wtransfer | 
|             } | 
|         }) | 
|     } | 
|   | 
|     onMounted(() => { | 
|         finishedDetails() | 
|     }) | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
|     .rk { | 
|         width: 100%; | 
|         height: 100%; | 
|         position: absolute; | 
|         background: #F7F7F7; | 
|         .rk_info { | 
|             background: white; | 
|             display: flex; | 
|             flex-direction: column; | 
|             padding: 30px; | 
|             box-sizing: border-box; | 
|             span { | 
|                 font-size: 26px; | 
|                 font-weight: 400; | 
|                 color: #333333; | 
|                 &:first-child { | 
|                     margin-bottom: 24px; | 
|                 } | 
|             } | 
|         } | 
|         .material-title { | 
|             background-color: #f7f7f7; | 
|             .order-time { | 
|                 margin: 0 30px; | 
|                 display: flex; | 
|                 justify-content: space-between; | 
|                 color: #666; | 
|                 font-size: 24px; | 
|             } | 
|             .title { | 
|                 height: 32px; | 
|                 margin-left: 30px; | 
|                 padding-top: 40px; | 
|                 padding-bottom: 24px; | 
|                 font-size: 30px; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 .title-prefix { | 
|                     display: inline-block; | 
|                     background-color: #4275FC; | 
|                     height: 30px; | 
|                     width: 8px; | 
|                     border-radius: 1px; | 
|                     margin-right: 12px; | 
|                 } | 
|             } | 
|         } | 
|         .material-content { | 
|             margin-top: 30px; | 
|             background: white; | 
|             padding-bottom: 30px; | 
|             .notfound { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: center; | 
|                 padding: 50px 0 30px 0; | 
|                 font-size: 24px; | 
|             } | 
|             .item-style { | 
|                 width: initial; | 
|                 padding: 0 30px; | 
|                 .item-title-style { | 
|                     padding-top: 30px; | 
|                     padding-bottom: 20px; | 
|                     font-size: 30px; | 
|                 } | 
|                 .item-content-style { | 
|                     background-color: #f7f7f7; | 
|                     border-radius: 16px; | 
|                     padding: 1px; | 
|                     .subItem-style { | 
|                         margin: 24px 30px; | 
|                         // width: 100%; | 
|                         display: flex; | 
|                         /*justify-content: space-between;*/ | 
|                         /*align-items: center;*/ | 
|                         flex-direction: column; | 
|                         .subItem-style_top { | 
|                             display: flex; | 
|                             justify-content: space-between; | 
|                             .subItem-first-style { | 
|                                 color: #333; | 
|                                 font-size: 28px; | 
|                                 line-height: 28px; | 
|                                 vertical-align: middle; | 
|                             } | 
|                             .subItem-second-style { | 
|                                 flex-shrink: 0; | 
|                                 color: #444; | 
|                                 font-size: 24px; | 
|                                 line-height: 28px; | 
|                                 vertical-align: middle | 
|                             } | 
|                         } | 
|                         .subItem-style_bottom { | 
|                             margin-top: 15px; | 
|                             span { | 
|                                 font-size: 24px; | 
|                                 font-weight: 400; | 
|                                 color: #999999; | 
|                             } | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .rk_sc { | 
|             .rk_sc_header { | 
|                 padding: 30px; | 
|                 box-sizing: border-box; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: space-between; | 
|                 .rk_sc_header_box { | 
|                     display: flex; | 
|                     align-items: center; | 
|                     .rk_sc_header_x { | 
|                         width: 8px; | 
|                         height: 30px; | 
|                         background: #4275FC; | 
|                         border-radius: 2px; | 
|                         margin-right: 12px; | 
|                     } | 
|                     span { | 
|                         font-size: 32px; | 
|                         font-weight: 500; | 
|                         color: #222222; | 
|                     } | 
|                 } | 
|                 span { | 
|                     font-size: 28px; | 
|                     font-weight: 500; | 
|                     color: #222222; | 
|                 } | 
|             } | 
|             .rk_sc_kong { | 
|                 width: 100%; | 
|                 height: 260px; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: center; | 
|                 background: #ffffff; | 
|                 span { | 
|                     font-size: 25px; | 
|                     color: black; | 
|                 } | 
|             } | 
|             .rk_sc_content { | 
|                 padding: 0 30px; | 
|                 background: white; | 
|                 .rk_sc_content_item { | 
|                     padding: 30px 0; | 
|                     border-bottom: 1px solid #E5E5E5; | 
|                     &:last-child { | 
|                         border: none; | 
|                     } | 
|                     .rk_sc_content_item_a { | 
|                         font-size: 30px; | 
|                         font-weight: 500; | 
|                         color: #222222; | 
|                         margin-bottom: 24px; | 
|                     } | 
|                     .rk_sc_content_item_b { | 
|                         display: flex; | 
|                         align-items: center; | 
|                         justify-content: space-between; | 
|                         span { | 
|                             font-size: 24px; | 
|                             font-weight: 400; | 
|                             color: #666666; | 
|                         } | 
|                     } | 
|                     .rk_sc_content_item_hz { | 
|                         padding: 24px 30px; | 
|                         background: #F7F7F7; | 
|                         border-radius: 16px; | 
|                         margin-top: 24px; | 
|                         .rk_sc_content_item_hz_item { | 
|                             border-bottom: 1PX solid #E5E5E5; | 
|                             margin-bottom: 22px; | 
|                             &:last-child { | 
|                                 border: none; | 
|                                 margin: 0; | 
|                             } | 
|                             .rk_sc_content_item_hz_item_top { | 
|                                 margin-bottom: 20px; | 
|                                 display: flex; | 
|                                 align-items: center; | 
|                                 justify-content: space-between; | 
|                                 span { | 
|                                     font-size: 28px; | 
|                                     font-weight: 500; | 
|                                     color: #333333; | 
|                                     &:last-child { | 
|                                         font-size: 24px; | 
|                                         font-weight: 400; | 
|                                         color: #444444; | 
|                                     } | 
|                                 } | 
|                             } | 
|                             .rk_sc_content_item_hz_item_bottom { | 
|                                 display: flex; | 
|                                 flex-direction: column; | 
|                                 span { | 
|                                     font-size: 24px; | 
|                                     font-weight: 400; | 
|                                     color: #222222; | 
|                                     margin-bottom: 20px; | 
|                                     &:last-child { | 
|                                         margin-bottom: 0; | 
|                                     } | 
|                                     .err { | 
|                                         color: $nav-stateColor4 !important; | 
|                                     } | 
|                                     .ls { | 
|                                         color: $nav-color !important; | 
|                                     } | 
|                                     .succ { | 
|                                         color: $nav-stateColor2 !important; | 
|                                     } | 
|                                 } | 
|                             } | 
|                         } | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|         .rk_zw { | 
|             height: 168px; | 
|             background: #F7F7F7; | 
|         } | 
|         .rk_footer { | 
|             position: fixed; | 
|             bottom: 0; | 
|             left: 30px; | 
|             width: calc(100% - 60px); | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: space-between; | 
|             padding-bottom: 68px; | 
|             .rk_footer_u { | 
|                 width: 100%; | 
|                 height: 88px; | 
|                 border: none; | 
|                 background: $nav-color; | 
|                 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); | 
|                 border-radius: 8px; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: center; | 
|                 font-size: 30px; | 
|                 font-weight: 500; | 
|                 color: #FFFFFF; | 
|             } | 
|         } | 
|     } | 
| </style> |