h5出库入库

Mr.Shi

2023-08-14 571da48131c3647c6e1468aab82c5b7e8a14ac28

 h5_standard/src/views/needToBeDealtWith/addWarehousing.vue

@@ -1,18 +1,511 @@
<template>
    <div class="page">
        新增入库
    <div class="rework">
        <div class="rework_list">
            <div class="rework_list_item" @click="typeShow = true">
                <span><b>*</b>单据类型</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="warehouseShow = true">
                <span><b>*</b>入库仓库</span>
                <div class="rework_list_item_right">
                    <span :class="form.warehouseName ? 'black' : ''">{{form.warehouseName ? form.warehouseName : '请选择'}}</span>
                    <van-icon name="arrow" size="20" color="#999999" />
                </div>
            </div>
        </div>
        <div class="rework_qd">
            <div class="rework_qd_title">
                <div class="rework_qd_title_left">
                    <div class="x"></div>
                    <span>{{`入库物料清单${list.length}`}}</span>
                </div>
                <div class="rework_qd_title_right" @click="addItem">
                    <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" />
                    <span>增加入库</span>
                </div>
            </div>
            <van-swipe-cell v-for="(item, index) in list" :key="index">
                <div class="rework_qd_list">
                    <div class="rework_qd_item" @click="openL(index)">
                        <span><b>*</b>入库货位</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.locationName ? 'black' : ''">{{item.locationName ? item.locationName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div>
                    <div class="rework_qd_item" @click="openMaterial(index)">
                        <span><b>*</b>入库物料</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.materialName ? 'black' : ''">{{item.materialName ? item.materialName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div>
                    <!-- <div class="rework_qd_item" v-if="form.type != 25">
                        <span>生产工序</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.procedureName ? 'black' : ''">{{item.procedureName ? item.procedureName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div> -->
                    <div class="rework_qd_item" @click="openQ(index)">
                        <span><b>*</b>质量属性</span>
                        <div class="rework_qd_item_right">
                            <span :class="item.qualityTypeName ? 'black' : ''">{{item.qualityTypeName ? item.qualityTypeName : '请选择'}}</span>
                            <van-icon name="arrow" size="20" color="#999999" />
                        </div>
                    </div>
                    <div class="rework_qd_item">
                        <span>批次号</span>
                        <div class="rework_qd_item_right">
                            <input type="text" v-model="item.batch" placeholder="请输入" />
                        </div>
                    </div>
                    <div class="rework_qd_item">
                        <span><b>*</b>入库数量<template v-if="item.unitName">({{ item.unitName }})</template></span>
                        <div class="rework_qd_item_right">
                            <input type="text" v-model="item.num" placeholder="0" />
                        </div>
                    </div>
                </div>
                <template #right>
                    <van-button style="height: 100%;" square type="danger" text="删除" @click="dele(index)" />
                </template>
            </van-swipe-cell>
        </div>
        <div class="rework_zw"></div>
        <div class="rework_footer">
            <button class="rework_footer_submit" @click="onConfirm">提交</button>
        </div>
        <!-- 仓库 -->
        <Warehouse :show="warehouseShow" @close="close" @value="getValue" />
        <!-- 物料 -->
        <Material :show="materialsShow" @close="close1" @value="getValue1" />
        <!-- 质量属性 -->
        <Quality :show="qualityShow" @close="close2" @value="getValue2" />
        <!-- 选择货位 -->
        <Location :show="locationShow" :list="locationList" @close="close3" @value="getValue3" />
        <!-- 单据类型 -->
        <van-popup v-model:show="typeShow" position="bottom" :style="{ height: '50%' }">
            <van-picker
                :columns="columns"
                @confirm="onConfirm1"
                @cancel="onCancel"
                :columns-field-names="customFieldName"
            />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, ref, reactive } from 'vue'
    import { useRouter } from 'vue-router'
    import { Toast } from 'vant'
    import { createForStandard, getListByWarehouseId, wOutBoundForStockUp } from '@/apis/WorkOrderAPI'
    import Warehouse from '@/components/common/Warehouse.vue'
    import Material from '@/components/newCom/Material.vue'
    import Quality from '@/components/newCom/quality.vue'
    import Location from '@/components/newCom/location.vue'

    const router = useRouter()
    // 表单数据
    let form: any = reactive({
        warehouseName: '',
        warehouseId: '',
        type: '',
        typeName: ''
    })

    let locationList: any = ref([])

    let i = ref(0)

    let columns = ref([
        { name: '采购入库', id: 25 },
        { name: '库存调整', id: 28 }
    ])
    const customFieldName = {
      text: 'name'
    };
    let list = ref<Array<any>>([
        {
            batch: '',
            locationId: '',
            locationName: '',
            materialId: '',
            materialName: '',
            num: '',
            procedureId: '',
            procedureName: '',
            qualityType: '',
            qualityTypeName: '',
            unitId: '',
            unitName: ''
        }
    ])
    let warehouseShow = ref<boolean>(false)
    let materialsShow = ref<boolean>(false)
    let qualityShow = ref<boolean>(false)
    let locationShow = ref<boolean>(false)
    let typeShow = ref<boolean>(false)

    // 打开选择物料
    const openMaterial = (index: number) => {
        i.value = index
        materialsShow.value = true
    }
    // 打开选择物料
    const openQ = (index: number) => {
        i.value = index
        qualityShow.value = true
    }
    // 打开选择货位
    const openL = (index: number) => {
        if (!form.warehouseId) return Toast('请选择入库仓库')
        i.value = index
        locationShow.value = true
    }
    const addItem = () => {
        // if (!form.warehouseId) return Toast('请选择入库仓库')
        list.value.push({
            batch: '',
            locationId: '',
            locationName: '',
            materialId: '',
            materialName: '',
            num: '',
            procedureId: '',
            procedureName: '',
            qualityType: '',
            qualityTypeName: '',
            unitId: '',
            unitName: ''
        })
    }

    const onConfirm1 = (value: any) => {
        form.typeName = value.name
        form.type = value.id
        typeShow.value = false
    };
    const onCancel = () => {
        typeShow.value = false
    }
    
    // 获取当天年月日
    const getDay = () => {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return `${year}-${month <= 9 ? `0${month}` : month}-${day <= 9 ? `0${day}` : day}`
    }

    // 提交
    const onConfirm = () => {
        if (!form.type) return Toast('请选择单据类型')
        if (!form.warehouseId) return Toast('请选择入库仓库')
        if (list.value.length === 0) return Toast('请先添加入库物料')
        for (let i = 0; i < list.value.length; i++) {
            if (!list.value[i].locationId) return Toast(`第${i+1}项入库货位不能为空`)
            if (!list.value[i].materialId) return Toast(`第${i+1}项入库物料不能为空`)
            if (!list.value[i].qualityType) return Toast(`第${i+1}项质量属性不能为空`)
            if (!list.value[i].num || list.value[i].num == '' || list.value[i].num == 0) {
                return Toast(`第${i + 1}项入库数量必须大于0`)
            }
        }
        wOutBoundForStockUp({
            type: form.type,
            planDate: getDay(),
            validDate: getDay(),
            warehouseId: form.warehouseId,
            woutboundInBodyBeanList: list.value
        }).then(res => {
            if (res.code === 200) {
                Toast.success({message: '入库成功'})
                setTimeout(() => {
                    router.go(-1)
                }, 2000)
            }
        })
    }

    // 打开选择物料
    const openMs = () => {
        if (!form.warehouseId) return Toast('请先选择出库仓库')
        const { selected }: any = Material.value
        let ids = list.value.map(item => item.id)
        Material.value.selected = ids
        materialsShow.value = true
    }

    // 删除
    const dele = (index: any) => {
        if (list.value.length === 1) {
            Toast('至少保留一条工装信息')
            return
        }
        list.value.splice(index, 1)
    }
    // 关闭仓库选择弹框
    const close = (): void => {
        warehouseShow.value = false
    }
    // 关闭仓库选择弹框
    const close1 = (): void => {
        materialsShow.value = false
    }
    // 关闭仓库选择弹框
    const close2 = (): void => {
        qualityShow.value = false
    }
    // 关闭货位选择弹框
    const close3 = (): void => {
        locationShow.value = false
    }
    // 选择仓库回调
    const getValue = (item: any): void => {
        form.warehouseName = item.name
        form.warehouseId = item.id
        getListByWarehouseId({ wareHouseId: item.id })
            .then(res => {
                if (res.code === 200) {
                    locationList.value = res.data
                    list.value.forEach(item => {
                        item.locationId = ''
                        item.locationName = ''
                    })
                }
            })
        warehouseShow.value = false
    }
    // 选择物料
    const getValue1 = (item: any): void => {
        console.log(item)
        list.value[i.value].materialName = item.mmodelUnionName
        list.value[i.value].materialId = item.id
        list.value[i.value].unitId = item.unitId
        list.value[i.value].unitName = item.umodelName
        materialsShow.value = false
    }
    // 选择质量属性
    const getValue2 = (item: any): void => {
        list.value[i.value].qualityType = item.id
        list.value[i.value].qualityTypeName = item.name
        qualityShow.value = false
    }
    // 选择货位
    const getValue3 = (item: any): void => {
        list.value[i.value].locationId = item.id
        list.value[i.value].locationName = item.unionName
        locationShow.value = false
    }
    onMounted(() => {
        // 获取工装信息
        // getLKInfo(route.query.id as string)
    })
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #F7F7F7;
}
</style>
    .rework {
        width: 100%;
        height: 100%;
        position: absolute;
        .rework_list {
            display: flex;
            flex-direction: column;
            background: white;
            padding: 0 30px;
            box-sizing: border-box;
            .rework_list_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 98px;
                border-bottom: 1PX solid #E5E5E5;
                &:last-child {
                    border: none;
                }
                span {
                    font-size: 30px;
                    font-weight: 400;
                    color: #222222;
                    flex-shrink: 0;
                    b {
                        font-size: 30px;
                        color: red;
                        margin-right: 5px;
                    }
                }
                .rework_list_item_right {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    span {
                        font-size: 28px;
                        font-weight: 400;
                        color: #999999;
                    }
                    .black {
                        color: black !important;
                    }
                    input {
                        width: 230px;
                        height: 60px;
                        font-size: 28px;
                        border-radius: 8px;
                        padding: 0 30px;
                        text-align: right;
                        box-sizing: border-box;
                        border: 1px solid #CCCCCC;
                    }
                    input::-webkit-input-placeholder { /* WebKit browsers */
                        font-size: 28px;
                        font-weight: 400;
                        color: #B2B2B2;
                    }
                }
            }
        }
        .rework_qd {
            margin-top: 40px;
            width: 100%;
            background: #F7F7F7;
            .rework_qd_title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 30px 30px 30px;
                .rework_qd_title_left {
                    display: flex;
                    align-items: center;
                    span {
                        font-size: 32px;
                        font-weight: 500;
                        color: #222222;
                    }
                    .x {
                        width: 8px;
                        height: 30px;
                        background: #4275FC;
                        border-radius: 2px;
                        margin-right: 12px;
                    }
                }
                .rework_qd_title_right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 28px;
                        height: 28px;
                        margin-right: 12px;
                    }
                    span {
                        font-size: 28px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #4275FC;
                    }
                }
            }
            .rework_qd_list {
                display: flex;
                flex-direction: column;
                padding: 0 30px;
                background: #FFFFFF;
                box-sizing: border-box;
                margin-bottom: 30px;
                .rework_qd_item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 98px;
                    border-bottom: 1PX solid #E5E5E5;
                    &:last-child {
                        border: none;
                    }
                    span {
                        font-size: 30px;
                        font-weight: 400;
                        color: #222222;
                        flex-shrink: 0;
                        b {
                            font-size: 30px;
                            color: red;
                            margin-right: 5px;
                        }
                    }
                    .rework_qd_item_right {
                        display: flex;
                        align-items: center;
                        span {
                            font-size: 28px;
                            font-weight: 400;
                            color: #999999;
                        }
                        .black {
                            color: black !important;
                        }
                        input {
                            width: 230px;
                            height: 60px;
                            font-size: 28px;
                            border-radius: 8px;
                            padding: 0 30px;
                            text-align: right;
                            box-sizing: border-box;
                            border: 1px solid #CCCCCC;
                        }
                        input::-webkit-input-placeholder { /* WebKit browsers */
                            font-size: 28px;
                            font-weight: 400;
                            color: #B2B2B2;
                        }
                    }
                }
            }
        }
        .rework_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>