| <template> | 
|     <div class="details"> | 
|         <V-WorkOrderInfo :info="info"></V-WorkOrderInfo> | 
|         <div class="details_cz"> | 
|             <div class="details_cz_sdtl" @click="jump" v-if="proxy.$auth('h5:workorderinput:create')"> | 
|                 <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" /> | 
|                 <span>手动投料</span> | 
|             </div> | 
|             <!-- <div style="width: 20px;"></div> | 
|             <div class="details_cz_smtl" @click="jump1" v-if="proxy.$auth('h5:workorderinput:create')"> | 
|                 <img src="@/assets/icon/gongdan_ic_saoma@2x.png" alt="" /> | 
|                 <span>扫码投料</span> | 
|             </div> --> | 
|         </div> | 
|         <div class="details_dj"> | 
|             <div class="details_dj_title"> | 
|                 <div class="details_x"></div> | 
|                 <span>生产点检</span> | 
|             </div> | 
|             <div class="details_dj_list"> | 
|                 <van-list | 
|                     v-model:loading="loading" | 
|                     :finished="finished" | 
|                     finished-text="没有更多了~" | 
|                     @load="pageDJs"> | 
|                     <van-swipe-cell v-for="(item, index) in djData" :key="index"> | 
|                         <div class="details_dj_list_item"> | 
|                             <span>{{item.attrName}}:{{item.val}}</span> | 
|                             <span>{{item.userName}} {{item.createTime}}</span> | 
|                         </div> | 
|                         <template #right> | 
|                             <van-button square type="danger" style="height: 100%;" @click="dele(item.id)" text="删除" /> | 
|                         </template> | 
|                     </van-swipe-cell> | 
|                 </van-list> | 
|             </div> | 
|         </div> | 
|         <div class="details_zw"></div> | 
|         <div class="details_footer"> | 
|             <div class="details_footer_buttona" @click="jumpdj" v-if="proxy.$auth('h5:workorder:processRecord')">生产点检</div> | 
|             <div style="width: 20px;"></div> | 
|             <div class="details_footer_buttonb" @click="jumpbg" v-if="proxy.$auth('h5:workorderoutput:confirm')">工单报工</div> | 
|         </div> | 
|         <v-ScanCode | 
|             :openCode="openCode" | 
|             :infos="['请扫描工装码']" | 
|             @closePopup="closePopup" | 
|             @onDecode="onDecode" /> | 
|     </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
|     import { nextTick, onMounted, ref, reactive, getCurrentInstance } from 'vue' | 
|     import { useRouter, useRoute } from "vue-router" | 
|     import { queryById, getBarcodeContent, pageDJ, getListByCondition, deletedj } from '@/apis/WorkOrderAPI' | 
|     import { Toast } from "vant" | 
|     import { QRCodeType } from '@/enum' | 
|     const { proxy }: any = getCurrentInstance() | 
|     import VWorkOrderInfo from '@/components/common/WorkOrderInfo.vue' | 
|   | 
|     const router = useRouter() | 
|     const route = useRoute() | 
|   | 
|     // 详情数据 | 
|     let info: any = ref({}) | 
|   | 
|     // 点检数据 | 
|     let djData: any = ref([]) | 
|   | 
|     // 控制扫码显示隐藏 | 
|     const openCode = ref<boolean>(false) | 
|   | 
|     // 分页查询数据 | 
|     let page = reactive({ | 
|         capacity: 10, | 
|         page: 0 | 
|     }) | 
|   | 
|     const list: any = ref([]); | 
|     const loading = ref(false); | 
|     const finished = ref(false); | 
|   | 
|     // 删除点检 | 
|     const dele = (id: string | number): void => { | 
|         deletedj(id) | 
|             .then(res => { | 
|                 if (res.code === 200) { | 
|                     djData.value = [] | 
|                     finished.value = false | 
|                     page.page = 0 | 
|                     pageDJs() | 
|                 } | 
|             }) | 
|     } | 
|   | 
|     // 关闭扫码组件 | 
|     const closePopup = (): void => { | 
|         openCode.value = false | 
|     } | 
|   | 
|     // 获取扫码值 | 
|     const onDecode = (data: string[]): void => { | 
|         getBarcodeContent({ | 
|             barcode: data[0] | 
|         }).then(res => { | 
|             if (res.code === 200) { | 
|                 if (res.data.barcodeType === QRCodeType.GZ) { | 
|                     getListByCondition({ id: res.data.id }) | 
|                         .then(gz => { | 
|                             if (gz.code === 200) { | 
|                                 if (gz.data[0].status !== 1) { | 
|                                     router.push({ name: 'codeScanningFeeding', query: { id: route.query.id, gzId: res.data.id } }) | 
|                                 } else { | 
|                                     Toast.fail({ message: '扫描的工装状态不能为空', duration: 2000 }) | 
|                                 } | 
|                             } | 
|                         }) | 
|                 } else { | 
|                     Toast.fail({ message: '请扫描正确的篮筐码', duration: 2000 }) | 
|                 } | 
|             } | 
|         }) | 
|         nextTick(() => { | 
|             openCode.value = false | 
|         }) | 
|     } | 
|   | 
|     // 跳转手动投料 | 
|     const jump = () => { | 
|         router.push({ name: 'manualFeeding', query: { id: route.query.id } }) | 
|     } | 
|   | 
|     // 跳转扫码投料 | 
|     const jump1 = () => { | 
|         openCode.value = true | 
|     } | 
|   | 
|     // 跳转工单报工 | 
|     const jumpbg = () => { | 
|         router.push({ name: 'workOrderReporting', query: { id: route.query.id } }) | 
|     } | 
|   | 
|     // 跳转点检 | 
|     const jumpdj = () => { | 
|         router.push({ name: 'spotCheck', query: { id: route.query.id } }) | 
|     } | 
|   | 
|     // 获取详情数据 | 
|     const queryByIds = () => { | 
|         queryById(route.query.id).then(res => { | 
|             if (res.code === 200) { | 
|                 info.value = res.data | 
|             } | 
|         }) | 
|     } | 
|   | 
|     // 点检数据 | 
|     const pageDJs = () => { | 
|         if (!finished.value) { | 
|             page.page = page.page + 1 | 
|             loading.value = true | 
|             pageDJ({ | 
|                 capacity: page.capacity, | 
|                 page: page.page, | 
|                 model: { | 
|                     workorderId: route.query.id | 
|                 } | 
|             }).then(res => { | 
|                 if (res.code === 200 && res.data && res.data.records.length !== 0) { | 
|                     djData.value.push(...res.data.records) | 
|                 } else { | 
|                     finished.value = true | 
|                 } | 
|                 loading.value = false | 
|             }).catch(err => { | 
|                 loading.value = false | 
|                 finished.value = true | 
|             }) | 
|         } | 
|     } | 
|   | 
|     onMounted(() => { | 
|         queryByIds() | 
|         pageDJs() | 
|     }) | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .details { | 
|     width: 100%; | 
|     height: 100%; | 
|     position: absolute; | 
|     background: #F7F7F7; | 
|     .details_cz { | 
|         width: 100%; | 
|         padding: 30px; | 
|         box-sizing: border-box; | 
|         display: flex; | 
|         align-items: center; | 
|         justify-content: space-between; | 
|         .details_cz_sdtl { | 
|             flex: 1; | 
|             height: 76px; | 
|             background: #FFFFFF; | 
|             border-radius: 36px; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|             img { | 
|                 width: 28px; | 
|                 height: 28px; | 
|                 margin-right: 14px; | 
|             } | 
|             span { | 
|                 font-size: 26px; | 
|                 font-weight: 400; | 
|                 color: #222222; | 
|             } | 
|         } | 
|         .details_cz_smtl { | 
|             flex: 1; | 
|             height: 76px; | 
|             background: $nav-color; | 
|             border-radius: 36px; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|             img { | 
|                 width: 28px; | 
|                 height: 28px; | 
|                 margin-right: 14px; | 
|             } | 
|             span { | 
|                 font-size: 26px; | 
|                 font-weight: 400; | 
|                 color: #ffffff; | 
|             } | 
|         } | 
|     } | 
|     .details_dj { | 
|         display: flex; | 
|         flex-direction: column; | 
|         .details_dj_title { | 
|             width: 100%; | 
|             display: flex; | 
|             align-items: center; | 
|             padding: 0 30px 30px 30px; | 
|             box-sizing: border-box; | 
|             .details_x { | 
|                 width: 8px; | 
|                 height: 30px; | 
|                 background: $nav-color; | 
|                 border-radius: 2px; | 
|                 margin-right: 12px; | 
|             } | 
|             span { | 
|                 font-size: 32px; | 
|                 font-weight: 500; | 
|                 color: #222222; | 
|             } | 
|         } | 
|         .details_dj_list { | 
|             width: 100%; | 
|             /*padding: 30px;*/ | 
|             box-sizing: border-box; | 
|             background: #ffffff; | 
|             display: flex; | 
|             flex-direction: column; | 
|             .details_dj_list_item { | 
|                 display: flex; | 
|                 flex-direction: column; | 
|                 border-bottom: 1px solid #E5E5E5; | 
|                 padding: 30px; | 
|                 /*margin: 30px;*/ | 
|                 /*padding-bottom: 30px;*/ | 
|                 /*margin-bottom: 30px !important;*/ | 
|                 span { | 
|                     &:nth-child(1) { | 
|                         font-size: 28px; | 
|                         font-weight: 400; | 
|                         color: #222222; | 
|                     } | 
|                     &:nth-child(2) { | 
|                         font-size: 24px; | 
|                         font-weight: 400; | 
|                         color: #999999; | 
|                         margin-top: 24px; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|     } | 
|     .details_zw { | 
|         height: 160px; | 
|     } | 
|     .details_footer { | 
|         width: 100%; | 
|         position: fixed; | 
|         bottom: 0; | 
|         left: 0; | 
|         padding-bottom: 68px; | 
|         padding-left: 30px; | 
|         padding-right: 30px; | 
|         display: flex; | 
|         align-items: center; | 
|         justify-content: space-between; | 
|         box-sizing: border-box; | 
|         .details_footer_buttona { | 
|             flex: 1; | 
|             height: 88px; | 
|             background: #FFFFFF; | 
|             box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); | 
|             border-radius: 8px; | 
|             font-size: 30px; | 
|             font-weight: 500; | 
|             color: $nav-color; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|         } | 
|         .details_footer_buttonb { | 
|             flex: 1; | 
|             height: 88px; | 
|             background: $nav-color; | 
|             box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); | 
|             border-radius: 8px; | 
|             font-size: 30px; | 
|             font-weight: 500; | 
|             color: #FFFFFF; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|         } | 
|     } | 
| } | 
| </style> |