jonhon-mes-web/src/views/inboundOutboundManagement/components/editMaterial.vue

<template>
    <el-dialog title="出库" append-to-body :modelValue="openShow" width="80%" @close="closeDialog">
        <el-table :data="tableData">
            <el-table-column label="提请物料" prop="goodsCode" align="center"></el-table-column>
            <el-table-column label="材料名称" prop="goodsName" align="center"></el-table-column>
            <el-table-column label="规格" prop="specifications" align="center"></el-table-column>
            <el-table-column label="库房" prop="shId" align="center">
                <template #default="scope">
                    <el-select v-model="scope.row.shId" @change="(val) => changeWare(val,scope.$index)">
                        <el-option v-for="item in wareList" :key="item.id" :label="item.shName" :value="item.id"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="出库库位" prop="slId" align="center">
                <template #default="scope">
                    <el-select v-model="scope.row.slId" @change="(val) => changeLocation(val,scope.$index)">
                        <el-option v-for="item in locationList" :key="item.id" :label="item.location" :value="item.slId"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="批次号" prop="piNo" align="center">
                <template #default="scope">
                    <el-select v-model="scope.row.piNo" @change="val => changePiNo(val,scope.$index)">
                        <el-option v-for="item in scope.row.piNoList" :key="item.id" :label="item.piNo" :value="item.piNo"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="可出库数量" prop="availableQty" align="center"></el-table-column>
            <el-table-column label="出库数量" prop="currentOutQty" align="center">
                <template #default="scope">
                    <el-input-number controls-position="right" :max="scope.row.availableQty" v-model="scope.row.currentOutQty"></el-input-number>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import {getLocationData,editIssue,getWarehouseList,batchIssue} from "@/api/storeManagement/materialIssuing"
export default {
    props:{
        showDialog: {
            type: Boolean,
            default: false
        },
        row:{
            type: Object,
            default: {}
        },
        list:{
            type: Array,
            default: []
        }
    },
    data() {
        return {
            openShow: false,
            tableData:[],
            locationList:[],
            piNoList:[],
            wareList:[]
        }
    },
    mounted(){
        this.openShow = this.showDialog
        if(JSON.stringify(this.row) != '{}'){
            this.tableData = [{
                ...this.row,
                shId:this.row.shId == -1 ? '':this.row.shId,
                slId:this.row.slId == -1 ? '':this.row.slId,
                piNo:this.row.piNo == -1 ? '':this.row.piNo,
                availableQty:this.row.availableQty == -1 ? '':this.row.availableQty,
                currentOutQty:this.row.currentOutQty == -1 ? '':this.row.currentOutQty,
                rlsId:this.row.rlsId == -1 ? '':this.row.rlsId,
            }]
            this.getWare()
            this.getLocation()
        }else if(this.list.length > 0){
            this.tableData = this.list
            this.tableData.map(item =>{
                item.shId = item.shId == -1 ? '':item.shId
                item.slId = item.slId == -1 ? '':item.slId
                item.piNo = item.piNo == -1 ? '':item.piNo
                item.availableQty = item.availableQty == -1 ? '': item.availableQty,
                item.currentOutQty = item.currentOutQty == -1 ? '': item.currentOutQty,
                this.getWare(item.goodsCode)
                if(item.shId != '' && item.goodsId != '' && item.slId != ''){
                    this.getLocation(item.shId,item.goodsId,item.slId)
                }
            })
        }
        console.log('tableData============',this.tableData)
        
    },
    methods:{
        closeDialog(val){
            this.openShow = false
            this.$emit('closeDialog',val)
        },
        getWare(val){
           getWarehouseList({
            goodsCode:val ? val : this.row.goodsCode
           }).then(res =>{
            console.log('res-----------',res)
            this.wareList = res.data.data
           }) 
        },
        uniqueById(arr) {
            const seen = new Map();
            for (const item of arr) {
                if (!seen.has(item.slId)) {
                seen.set(item.slId, item);
                }
            }
            return Array.from(seen.values());
        },
        getLocation(shId,goodsId,slId){
            getLocationData({
                shId:shId ? shId : this.row.shId,
                goodsId:goodsId ? goodsId : this.row.goodsId
            }).then(res =>{
                let data = this.uniqueById(res.data.data.records)
                this.locationList = data

                getLocationData({
                    shId:shId ? shId : this.row.shId,
                    goodsId:goodsId ? goodsId : this.row.goodsId,
                    slId:slId ? slId : this.row.slId
                }).then(res =>{
                    this.tableData[0].piNoList = res.data.data.records
                })
            })
        },
        changeWare(val,index){
            this.tableData[index].slId = ''
            this.tableData[index].piNo = ''
            this.tableData[index].availableQty = null
            getLocationData({
                shId:val,
                goodsId:this.tableData[index].goodsId
            }).then(res =>{
                let data = this.uniqueById(res.data.data.records)
                this.locationList = data
            })
        },
        // 切换库位
        changeLocation(val,index){
            // let tmp = this.locationList.find(item => item.location == val)
            // this.tableData[index].currentStock = tmp.currentStock
            this.tableData[index].piNo = ""
            this.tableData[index].availableQty  = null
            getLocationData({
                shId:this.tableData[index].shId,
                goodsId:this.tableData[index].goodsId,
                slId:val
            }).then(res =>{
                this.tableData[index].piNoList = res.data.data.records
            })
        },
        // 切换批号
        changePiNo(val,index){
            this.tableData[index].availableQty  = null
            let tmp = this.tableData[index].piNoList.find(item => item.piNo == val)
            this.tableData[index].availableQty = tmp.quantity
            this.tableData[index].rlsId = tmp.id
        },
        submit(){
            // this.tableData.map(item =>{
            //     if(item.outQuantity > item.availableQty){
            //         this.$message.error('出库数量不可大于可出库数量')
            //         return
            //     }
            // })

            // 校验通过：准备提交数据（过滤无用字段）
            const submitData = this.tableData.map(row => {
                const { piNoList, ...validData } = row; // 剔除选择状态字段
                return validData;
            });
            console.log(submitData)
            let data = []
            submitData.map(item =>{
                data.push({
                    crId:item.id,
                    currentOutQty:item.currentOutQty,
                    rlsId:item.rlsId
                })
            })
            console.log('data-----------',data)

            batchIssue(data).then(res =>{ 
                if(res.data.code === 200){
                    this.$message.success('出库成功')
                    this.closeDialog(true)
                }
            })
            // editIssue(submitData).then(res =>{
            //     if(res.data.code === 200){
            //         this.$message.success('修改成功')
            //         this.closeDialog(true)
            //     }
            // })
        },
    }
}
</script>

<style>

</style>