| <template> | 
|     <div class="rework"> | 
|         <div class="rework_list"> | 
|             <div class="rework_list_item" v-if="form.type !== 3"> | 
|                 <span>当前工厂</span> | 
|                 <div class="rework_list_item_right"> | 
|                     <span class="black">{{list.length > 0 ? list[0].dpmodelName : ''}}</span> | 
|                 </div> | 
|             </div> | 
|             <div class="rework_list_item" @click="show = true"> | 
|                 <span>返工类型</span> | 
|                 <div class="rework_list_item_right"> | 
|                     <span :class="form.typeName ? 'black' : ''">{{form.typeName ? form.typeName : '请点击选择类型'}}</span> | 
|                     <van-icon name="arrow" size="20" color="#999999" /> | 
|                 </div> | 
|             </div> | 
|             <div class="rework_list_item" @click="openDate = true"> | 
|                 <span>预计生产日期</span> | 
|                 <div class="rework_list_item_right"> | 
|                     <span :class="form.date ? 'black' : ''">{{form.date ? form.date : '请点击选择日期'}}</span> | 
|                     <van-icon name="arrow" size="20" color="#999999" /> | 
|                 </div> | 
|             </div> | 
|             <div class="rework_list_item" @click="openGX = true"> | 
|                 <span>返工返修工序</span> | 
|                 <div class="rework_list_item_right"> | 
|                     <span :class="form.processName ? 'black' : ''">{{form.processName ? form.processName : '请点击选择工序'}}</span> | 
|                     <van-icon name="arrow" size="20" color="#999999" /> | 
|                 </div> | 
|             </div> | 
|             <div class="rework_list_item" @click="getBLInfo('')"> | 
|                 <span>返工返修原因</span> | 
|                 <div class="rework_list_item_right"> | 
|                     <span :class="form.reasonName ? 'black' : ''">{{form.reasonName ? form.reasonName : '请点击选择原因'}}</span> | 
|                     <van-icon name="arrow" size="20" color="#999999" /> | 
|                 </div> | 
|             </div> | 
|             <div class="rework_list_item" @click="openDH = true" v-if="form.type === 3"> | 
|                 <span>客返单号</span> | 
|                 <div class="rework_list_item_right"> | 
|                     <span :class="form.singleName ? 'black' : ''">{{form.singleName ? form.singleName : '请点击选择单号'}}</span> | 
|                     <van-icon name="arrow" size="20" color="#999999" /> | 
|                 </div> | 
|             </div> | 
|             <div class="rework_list_item" v-if="form.type === 3"> | 
|                 <span>客返客户</span> | 
|                 <div class="rework_list_item_right"> | 
|                     <span class="black">{{form.clientName}}</span> | 
|                 </div> | 
|             </div> | 
|         </div> | 
|         <div class="rework_qd"> | 
|             <div class="rework_qd_title"> | 
|                 <div class="x"></div> | 
|                 <span>返工工装清单({{list.length}})</span> | 
|             </div> | 
|             <template v-if="list.length > 0"> | 
|                 <van-swipe-cell v-for="(item, index) in list" :key="item.id"> | 
|                     <div class="rework_qd_item"> | 
|                         <div class="rework_qd_item_i"> | 
|                             <span class="black">{{item.code}}:</span><span class="black">{{item.num}}{{item.umodelName}}</span> | 
|                         </div> | 
|                         <div class="rework_qd_item_i"> | 
|                             <span>物料信息:</span><span>{{item.mmodelName}} | {{item.mmodelCode}}</span> | 
|                         </div> | 
|                         <div class="rework_qd_item_i"> | 
|                             <span>批次号:</span><span>{{item.batch}}</span> | 
|                         </div> | 
|                         <div class="rework_qd_item_i"> | 
|                             <span>生产工序:</span><span>{{item.pmodelName}}</span> | 
|                         </div> | 
|                     </div> | 
|                     <template #right> | 
|                         <van-button style="height: 100%;" square type="danger" text="删除" @click="dele(index)" /> | 
|                     </template> | 
|                 </van-swipe-cell> | 
|             </template> | 
|             <div class="rework_qd_item1" v-else>暂无数据</div> | 
|         </div> | 
|         <div class="zw"></div> | 
|         <div class="rework_footer"> | 
|             <div class="rework_footer_add" @click="open">扫码添加工装</div> | 
|             <div style="width: 22px;"></div> | 
|             <button class="rework_footer_submit" @click="submit">提交</button> | 
|         </div> | 
|         <!--    扫码组件    --> | 
|         <v-ScanCode | 
|             :openCode="openCode" | 
|             :infos="['请扫描工装码']" | 
|             @closePopup="closePopup" | 
|             @onDecode="onDecode"> | 
|         </v-ScanCode> | 
|         <!--    类型    --> | 
|         <van-popup v-model:show="show" position="bottom" round :style="{ height: '45%' }"> | 
|             <van-picker | 
|                 title="请选择类型" | 
|                 :columns="columns" | 
|                 @confirm="onConfirm" | 
|                 @cancel="onCancel" | 
|             /> | 
|         </van-popup> | 
|         <!--    日期    --> | 
|         <van-calendar v-model:show="openDate" color="#4275FC" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmDate" /> | 
|         <!--    工序    --> | 
|         <van-popup v-model:show="openGX" position="bottom" round :style="{ height: '45%' }"> | 
|             <van-picker | 
|                 title="请选择工序" | 
|                 :columns="columns1" | 
|                 @confirm="onConfirm1" | 
|                 @cancel="onCancel1" | 
|             /> | 
|         </van-popup> | 
|         <!--    原因    --> | 
|         <van-popup v-model:show="openYY" position="bottom" round :style="{ height: '45%' }"> | 
|             <van-picker | 
|                 title="请选择原因" | 
|                 :columns="columns2" | 
|                 @confirm="onConfirm2" | 
|                 @cancel="onCancel2" | 
|             /> | 
|         </van-popup> | 
|         <!--    单号    --> | 
|         <van-popup v-model:show="openDH" position="bottom" round :style="{ height: '45%' }"> | 
|             <van-picker | 
|                 title="请选择单号" | 
|                 :columns="columns3" | 
|                 @confirm="onConfirm3" | 
|                 @cancel="onCancel3" | 
|             /> | 
|         </van-popup> | 
|     </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
|     import { onMounted, reactive, ref } from 'vue' | 
|     import { useRoute, useRouter } from "vue-router" | 
|     import { gsdate } from "@/utils/utils" | 
|     import { Toast } from 'vant' | 
|     import { useStore } from "vuex" | 
|     import { checkFGFXList, getBarcodeContent, getListByCondition, allData, createSingle, productesGroups } from '@/apis/WorkOrderAPI' | 
|     import { QRCodeType } from "@/enum" | 
|   | 
|     const route = useRoute() | 
|     const router = useRouter() | 
|     const store = useStore() | 
|   | 
|     // 表单数据 | 
|     let form = reactive({ | 
|         factory: '', | 
|         factoryId: '', | 
|         type: '0', | 
|         typeName: '工序返工', | 
|         date: '', | 
|         process: '', | 
|         processName: '', | 
|         reason: '详见产品手写标签', | 
|         reasonName: '详见产品手写标签', | 
|         clientName: '', | 
|         single: '', | 
|         singleName: '' | 
|     }) | 
|   | 
|     // 返工返修清单 | 
|     let list = ref<Array<any>>([]) | 
|   | 
|     // 类型 | 
|     const columns = [{ text: '工序返工', id: '0' }] | 
|   | 
|     // 工序 | 
|     const columns1 = ref<Array<any>>([]) | 
|   | 
|     // 原因 | 
|     const columns2 = ref<Array<any>>([]) | 
|   | 
|     // 单号 | 
|     const columns3 = ref<Array<any>>([]) | 
|   | 
|     let show = ref<boolean>(false) | 
|   | 
|     let openGX = ref<boolean>(false) | 
|   | 
|     let openYY = ref<boolean>(false) | 
|   | 
|     let openDH = ref<boolean>(false) | 
|   | 
|     let openDate = ref<boolean>(false) | 
|   | 
|     let openCode = ref<boolean>(false) | 
|   | 
|     // 获取明天日期 | 
|     const tomorrow = (): string => { | 
|         let day3 = new Date() | 
|         day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000) | 
|         return day3.getFullYear() + "/" + (day3.getMonth() + 1) + "/" + day3.getDate() | 
|     } | 
|   | 
|     const minDate: any = new Date(tomorrow()) | 
|   | 
|     const maxDate: any = new Date(new Date().getFullYear() + 1, 12, 30) | 
|   | 
|     // 提交申请 | 
|     const submit = async () => { | 
|         if (!form.date) return Toast.fail({ message: '预计生产日期不能为空' }) | 
|         if (!form.process) return Toast.fail({ message: '返工返修工序不能为空' }) | 
|         if (!form.reason) return Toast.fail({ message: '返工返修原因不能为空' }) | 
|         let arrId: Array<number> = [] | 
|         list.value.forEach((element: any) => { | 
|             arrId.push(element.id) | 
|         }) | 
|         let res = await createSingle({ | 
|             factoryId: list.value[0].pmodelOrgId, | 
|             type: form.type, | 
|             planDate: form.date, | 
|             backProcedureId: form.process, | 
|             content: form.reasonName, | 
|             applianceIdList: arrId | 
|         }) | 
|         if (res.code === 200) { | 
|             Toast.success({ message: '申请成功', forbidClick: true, duration: 2000 }) | 
|             setTimeout(() => { | 
|                 router.go(-1) | 
|             }, 2000) | 
|         } | 
|     } | 
|   | 
|     // 删除指定工装清单 | 
|     const dele = (i: number): void => { | 
|         if (list.value.length === 1) { | 
|             Toast.fail({ message: '至少保留一项工装' }) | 
|             return | 
|         } | 
|         list.value.splice(i, 1) | 
|     } | 
|   | 
|     // 确认选择日期 | 
|     const onConfirmDate = (values: any) => { | 
|         form.date = gsdate(values) | 
|         openDate.value = false | 
|     }; | 
|   | 
|     // 类型确认 | 
|     const onConfirm = (value: any) => { | 
|         form.type = value.id | 
|         form.typeName = value.text | 
|         show.value = false | 
|     }; | 
|   | 
|     const onCancel = () => { | 
|         show.value = false | 
|     } | 
|   | 
|     // 工序确认 | 
|     const onConfirm1 = (value: any, index: number) => { | 
|         form.processName = value.text | 
|         form.process = value.id | 
|         openGX.value = false | 
|     }; | 
|   | 
|     const onCancel1 = () => { | 
|         openGX.value = false | 
|     } | 
|   | 
|     // 不良原因 | 
|     const onConfirm2 = (value: any, index: number) => { | 
|         form.reasonName = value.text | 
|         form.reason = value.id | 
|         openYY.value = false | 
|     }; | 
|   | 
|     const onCancel2 = () => { | 
|         openYY.value = false | 
|     } | 
|   | 
|     const onConfirm3 = (value: any, index: number) => { | 
|         console.log(`当前值: ${value}, 当前索引: ${index}`); | 
|     }; | 
|   | 
|     const onCancel3 = () => { | 
|         openDH.value = false | 
|     } | 
|   | 
|     const closePopup = (): void => { | 
|         openCode.value = false | 
|     } | 
|   | 
|     // 获取扫码回调 | 
|     const onDecode = async (data: string[]): Promise<void> => { | 
|         openCode.value = false | 
|         let res = await getBarcodeContent({ | 
|             barcode: data[0] | 
|         }) | 
|         if (res.code === 200) { | 
|             if (res.data.barcodeType === QRCodeType.GZ) { | 
|                 // 查看是否已有工装 | 
|                 for (let i = 0; i < list.value.length; i++) { | 
|                     if (list.value[i].id === res.data.id) { | 
|                         Toast.fail({ message: '不能扫描重复的工装' }) | 
|                         return | 
|                     } | 
|                 } | 
|                 // 获取工装详情 | 
|                 let lk = await getListByCondition({ id: res.data.id }) | 
|                 if (lk.code === 200) { | 
|                     if (lk.data[0].qualityType === 1) { | 
|                         let next: boolean = false | 
|                         for(let i = 0; i < list.value.length; i++) {    // 物料、工序、仓库一致才可以添加 | 
|                             if (list.value[0].mmodelCode === lk.data[0].mmodelCode && list.value[0].procedureId === lk.data[0].procedureId && list.value[0].warehouseId === lk.data[0].warehouseId) { | 
|                                 next = true | 
|                             } | 
|                         } | 
|                         if (next) { | 
|                             list.value.push(lk.data[0]) | 
|                         } else { | 
|                             Toast.fail({ message: '扫描的工装物料、工序、仓库必须一致' }) | 
|                         } | 
|                     } else { | 
|                         Toast.fail({ message: '请扫描质量属性为不良的工装', duration: 2000 }) | 
|                     } | 
|                 } | 
|             } else { | 
|                 Toast.fail({ message: '请扫描正确的工装码' }) | 
|             } | 
|         } | 
|   | 
|     } | 
|   | 
|     const open = (): void => { | 
|         openCode.value = true | 
|     } | 
|   | 
|     // 获取工装信息 | 
|     const getLKInfo = async (id: string | number): Promise<void> => { | 
|         let res = await getListByCondition({ id }) | 
|         if (res.code === 200) { | 
|             if (res.data[0].qualityType === 1) { | 
|                 list.value.push(res.data[0]) | 
|                 await getGXInfo(res.data[0].pmodelOrgId) | 
|             } else { | 
|                 Toast.fail({ message: '请扫描质量属性为不良的工装', duration: 2000 }) | 
|             } | 
|         } | 
|     } | 
|   | 
|     // 获工序信息 | 
|     const getGXInfo = async (id: string): Promise<void> => { | 
|         let res = await productesGroups({ orgId: id }) | 
|         if (res.code === 200) { | 
|             res.data.forEach((item: any) => { | 
|                 columns1.value.push({ text: item.name, id: item.id }) | 
|             }) | 
|         } | 
|     } | 
|   | 
|     // 返工返修不良原因 | 
|     const getBLInfo = async (id: string | number): Promise<void> => { | 
|         let ids = ref<Array<string>>([]) | 
|         if (!id) { | 
|             list.value.forEach((item: any) => { | 
|                 ids.value.push(item.id) | 
|             }) | 
|         } | 
|         let res = await checkFGFXList({ applianceids: id ? id : ids.value.join(',') }) | 
|         if (res.code === 200) { | 
|             columns2.value = [] | 
|             res.data.forEach((item: any) => { | 
|                 columns2.value.push({ text: item.combinationName, id: item.id }) | 
|             }) | 
|             columns2.value.unshift({ text: '详见产品手写标签', id: '详见产品手写标签' }) | 
|             openYY.value = true | 
|         } | 
|     } | 
|   | 
|     // 查询所有单号 | 
|     const getDHInfo = async (): Promise<void> => { | 
|         let res = await allData({}) | 
|         if (res.code === 200) { | 
|             // console.log(res) | 
|             res.data.forEach((item: any) => { | 
|                 columns3.value.push({ text: item.name, id: item.id }) | 
|             }) | 
|         } | 
|     } | 
|   | 
|     onMounted(() => { | 
|         getLKInfo(route.query.id as string) | 
|         // getGXInfo() | 
|         // getBLInfo(route.query.id as string) | 
|         // getDHInfo() | 
|     }) | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .rework { | 
|     width: 100%; | 
|     height: 100%; | 
|     position: absolute; | 
|     .rework_list { | 
|         display: flex; | 
|         flex-direction: column; | 
|         background: white; | 
|         margin-top: 20px; | 
|         .rework_list_item { | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: space-between; | 
|             height: 98px; | 
|             padding: 0 30px; | 
|             border-bottom: 1PX solid #E5E5E5; | 
|             &:last-child { | 
|                 border: none; | 
|             } | 
|             span { | 
|                 font-size: 30px; | 
|                 font-weight: 400; | 
|                 color: #222222; | 
|                 flex-shrink: 0; | 
|                 margin-right: 15px; | 
|             } | 
|             .rework_list_item_right { | 
|                 flex: 1; | 
|                 display: flex; | 
|                 align-items: center; | 
|                 justify-content: flex-end; | 
|                 span { | 
|                     text-align: right; | 
|                     width: 400px; | 
|                     font-size: 28px; | 
|                     font-weight: 400; | 
|                     color: #999999; | 
|                     overflow: hidden; | 
|                     white-space: nowrap; | 
|                     text-overflow: ellipsis; | 
|                     -o-text-overflow: ellipsis; | 
|                 } | 
|                 .black { | 
|                     color: black !important; | 
|                 } | 
|             } | 
|         } | 
|     } | 
|     .rework_qd { | 
|         margin-top: 40px; | 
|         .rework_qd_title { | 
|             display: flex; | 
|             align-items: center; | 
|             padding: 0 30px 30px 30px; | 
|             span { | 
|                 font-size: 32px; | 
|                 font-weight: 500; | 
|                 color: #222222; | 
|             } | 
|             .x { | 
|                 width: 8px; | 
|                 height: 30px; | 
|                 background: #4275FC; | 
|                 border-radius: 2px; | 
|                 margin-right: 12px; | 
|             } | 
|         } | 
|         .rework_qd_item1 { | 
|             height: 150px; | 
|             background: white; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|             color: black; | 
|             font-size: 28px; | 
|         } | 
|         .rework_qd_item { | 
|             background: #ffffff; | 
|             padding: 30px; | 
|             display: flex; | 
|             flex-direction: column; | 
|             margin-bottom: 20px; | 
|             &:last-child { | 
|                 margin-bottom: 0; | 
|             } | 
|             .rework_qd_item_i { | 
|                 display: flex; | 
|                 align-items: center; | 
|                 margin-bottom: 30px; | 
|                 &:last-child { | 
|                     margin-bottom: 0!important; | 
|                 } | 
|                 .black { | 
|                     font-size: 30px!important; | 
|                     font-weight: 400!important; | 
|                     color: #222222!important; | 
|                 } | 
|                 span { | 
|                     &:first-child { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         color: #666666; | 
|                     } | 
|                     &:last-child { | 
|                         font-size: 26px; | 
|                         font-weight: 400; | 
|                         color: #333333; | 
|                     } | 
|                 } | 
|             } | 
|         } | 
|     } | 
|     .zw { | 
|         height: 168px; | 
|     } | 
|     .rework_footer { | 
|         width: calc(100% - 60px); | 
|         position: fixed; | 
|         bottom: 0; | 
|         display: flex; | 
|         align-items: center; | 
|         justify-content: space-between; | 
|         padding: 0 30px 68px 30px; | 
|         .rework_footer_add { | 
|             flex: 1; | 
|             height: 88px; | 
|             font-size: 30px; | 
|             font-weight: 500; | 
|             color: $nav-color; | 
|             background: #FFFFFF; | 
|             box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800); | 
|             border-radius: 8px; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|         } | 
|         .rework_footer_submit { | 
|             flex: 1; | 
|             height: 88px; | 
|             font-size: 30px; | 
|             font-weight: 500; | 
|             color: #ffffff; | 
|             background: $nav-color; | 
|             box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800); | 
|             border-radius: 8px; | 
|             display: flex; | 
|             align-items: center; | 
|             justify-content: center; | 
|             border: none; | 
|         } | 
|     } | 
| } | 
| </style> |