jonhon-mes-web/src/views/productionManagement/components/addQuantity.vue

<template>
    <el-dialog title="添加量申报" append-to-body :modelValue="addQuantity" width="90%" @close="closeDialog" @open="open" fullscreen>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="90">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="作业中心" prop="wcId">
                        <el-select v-model="ruleForm.wcId" placeholder="请选择" @change="workChange">
                            <el-option v-for="item in options" :key="item.id" :label="item.wcName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="" prop="dayRange">
                        <el-radio-group v-model="ruleForm.dayRange">
                            <el-radio :value="3">3天</el-radio>
                            <el-radio :value="7">7天</el-radio>
                            <el-radio :value="30">30天</el-radio>
                            <el-radio :value=" '' ">全部</el-radio>
                        </el-radio-group>
                     </el-form-item>
                </el-col>
                <el-col :span="12" style="float: right;">
                    <el-form-item label="" prop="">
                        <el-button @click="handleSearch" type="primary">查询</el-button>
                    </el-form-item> 
                    
                </el-col>
            </el-row>

        </el-form>
        <el-descriptions class="margin-top" :column="4" border title="添加量"></el-descriptions>
        <el-table :data="materialNeedsData" style="width: 50%;">
            <el-table-column type="index" width="70" label="序号"></el-table-column>
            <el-table-column label="作业槽" prop="slotName" align="center"></el-table-column>
            <el-table-column label="测量值" prop="testVal" align="center"></el-table-column>
            <el-table-column label="添加量" prop="addValue" align="center" width="150">
                <template #default="scope">
                    <el-input-number v-model="scope.row.addValue" :min="1" controls-position="right"
                        size="small"></el-input-number>
                </template>
            </el-table-column>

        </el-table>
        <el-descriptions class="margin-top" :column="4" border title="镀层物料需求"></el-descriptions>
        <el-table :data="tableData" :summary-method="getSummaries"  show-summary>
            <el-table-column type="index" width="70" label="序号"></el-table-column>
            <el-table-column label="需求单号" prop="demandCode" align="center"></el-table-column>
            <el-table-column label="物料编码" prop="plateGoodsCode" align="center"></el-table-column>
            <el-table-column label="物料名称" prop="addValue" align="center" >
            </el-table-column>
            <el-table-column label="镀层物料需求(克)" prop="goodsDemand" align="center" >
            </el-table-column>
            <el-table-column label="银钾系数" prop="coefficient" align="center" >
            </el-table-column>
            <el-table-column label="申报量(克)" prop="addValue" align="center" >
            </el-table-column>
            <el-table-column label="使用量(克)" prop="useValue" align="center" >
                <template #default="scope">
                    {{scope.row.goodsDemand - scope.row.surplus}}
                </template>
            </el-table-column>
            <el-table-column label="剩余量(克)" prop="surplus" align="center" >
            </el-table-column>
            <el-table-column label="创建人" prop="createUserName" align="center" >
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center" >
            </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 {getTestValueList,getWorkCenter,getAddRequireList,add} from "@/api/productionManagement/addRequirements"
export default {
    props: {
        addQuantity: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            radio:3,
            addForm: {},
            tableData: [],
            ruleForm: {
                dayRange: '',
                wcId: ''
            },
            rules: {
                wcId: [
                    { required: true, message: '请选择作业中心', trigger: 'blur' },
                ],
                // dayRange: [
                //     { required: true, message: '请选择', trigger: 'blur' },
                // ]
            },
            materialNeedsData: [

            ],
            options: []
        }
    },
    mounted() {
        this.ruleForm.wcId = null
        console.log('ruleForm------------',this.ruleForm)
        this.getWorkCenter();
    },  
    methods: {
        getWorkCenter(){
            getWorkCenter().then(res => {
                this.options = res.data.data 
            })
        },
        async handleSearch(){
            console.log('rule------------',this.ruleForm)
            this.$refs.ruleFormRef.validate(async valid =>{
                if(valid){
                    let params = {
                        workCenterId:this.ruleForm.wcId,
                        dayRange:this.ruleForm.dayRange
                    }
                    try {
                        const res1 = await getTestValueList(params)
                        const res2 = await getAddRequireList(this.ruleForm)
                        this.materialNeedsData = res1.data.data
                        this.tableData = res2.data.data
                        console.log('res1------------',res1)
                        console.log('res2------------',res2)
                    } catch (error) {
                        console.log('error------------',error)
                    }
                }
            })
        },
        getSummaries (param){
            const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index === 1) {
            sums[index] = '-';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' ';
          } else {
            sums[index] = '-';
          }
        });

        return sums;
        },
        workChange() {
            
        },
        open() {
            this.addForm = {}
            this.ruleForm = {}
            console.log('11111111',this.ruleForm)
            this.tableData = []
            this.materialNeedsData = []
        },
        closeDialog(val) {
            this.$emit('closeDialog',val);
        },
        submit() {
            let params = {
                assayContentDetailList:this.materialNeedsData,
                recordIdList:this.tableData.map(item => item.id)
            }
            console.log('params------------',params)
            add(params).then(res => { 
                if(res.data.code == 200) { 
                    this.$message.success('新增成功')
                    this.closeDialog(true)
                }
            })
            // this.closeDialog()
        }
    },


}
</script>

<style lang="scss" scoped>
.margin-top {
    margin-top: 24px;
}
</style>