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="shName" align="center"></el-table-column>
            <el-table-column label="出库库位" prop="location" align="center">
                <template #default="scope">
                    <el-select v-model="scope.row.location" @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" 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} from "@/api/storeManagement/materialIssuing"
export default {
    props:{
        showDialog: {
            type: Boolean,
            default: false
        },
        row:{
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            openShow: false,
            tableData:[],
            locationList:[],
            piNoList:[]
        }
    },
    mounted(){
        this.openShow = this.showDialog
        this.tableData = [this.row]
        this.getLocation()
    },
    methods:{
        closeDialog(val){
            this.openShow = false
            this.$emit('closeDialog',val)
        },
        getLocation(){
            getLocationData({
                shId:this.row.shId,
                goodsId:this.row.goodsId
            }).then(res =>{
                this.locationList = res.data.data.records
            })
        },
        // 切换库位
        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.row.shId,
                goodsId:this.row.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
        },
        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)
            editIssue(submitData).then(res =>{
                if(res.data.code === 200){
                    this.$message.success('修改成功')
                    this.closeDialog(true)
                }
            })
        },
    }
}
</script>

<style>

</style>