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