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