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="zuoyezhongxin">
                        <el-select v-model="ruleForm.zuoyezhongxin" placeholder="请选择" @change="workChange">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="" prop="zuoyezhongxin">
                        <el-radio-group v-model="radio">
                            <el-radio :value="3">3天</el-radio>
                            <el-radio :value="6">7天</el-radio>
                            <el-radio :value="9">30天</el-radio>
                            <el-radio :value="9">全部</el-radio>
                        </el-radio-group>
                     </el-form-item>
                </el-col>
                <el-col :span="12" style="float: right;">
                    <el-form-item label="" prop="zuoyezhongxin">
                        <el-button 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="zuoyecao" 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="slot" 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">
            </el-table-column>
            <el-table-column label="镀层物料需求(克)" prop="addValue" align="center" width="150">
            </el-table-column>
            <el-table-column label="银钾系数" prop="addValue" align="center" width="150">
            </el-table-column>
            <el-table-column label="申报量(克)" prop="addValue" align="center" width="150">
            </el-table-column>
            <el-table-column label="使用量(克)" prop="addValue" align="center" width="150">
            </el-table-column>
            <el-table-column label="剩余量(克)" prop="addValue" align="center" width="150">
            </el-table-column>
            <el-table-column label="创建人" prop="addValue" align="center" width="150">
            </el-table-column>
            <el-table-column label="创建时间" prop="addValue" align="center" width="150">
            </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>

export default {
    props: {
        addQuantity: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            addForm: {},
            tableData: [],
            ruleForm: {
                huayanshijian: '',
                zuoyezhongxin: ''
            },
            rules: {
                huayanshijian: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ],
                zuoyezhongxin: [
                    { required: true, message: '请选择', trigger: 'blur' },
                ]
            },
            materialNeedsData: [

            ],
            options: [
                {
                    label: '作业中心一',
                    value: '1'
                },
                {
                    label: '作业中心二',
                    value: '2'
                },
            ]
        }
    },
    mounted() {

    },
    methods: {
        getSummaries (param){
            const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            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() {
            if (this.ruleForm.zuoyezhongxin == '1') {
                this.materialNeedsData.push(
                    {
                        testVal: '11111',
                        addValue: '',
                        zuoyecao: '#1'
                    }
                )
                this.tableData = [
                { slot: '#46 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
                
            ]
            }
            if (this.ruleForm.zuoyezhongxin == '2') {
                this.materialNeedsData.push(
                    {
                        testVal: '11111',
                        addValue: '',
                        zuoyecao: '#23'
                    }
                )
                this.tableData = [
                { slot: '#46 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
                { slot: '#47 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
                { slot: '#48 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
                { slot: '#49 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
            ]
            }
        },
        open() {
            this.addForm = {
                workCenter: '镀金小批量作业中心',
                requiredCode: "XQ-220245431,XQ-22245431",
                goldRequired: '109.6',
                goldUsageAmount: '39.6',
                goldDemandResidue: '39.6'
            }
            this.tableData = [
                { slot: '#46 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
                { slot: '#47 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
                { slot: '#48 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
                { slot: '#49 镀金', testVal: '3.1', actualVal: 'XX', testProject: '氧化亚金钾', testUser: '张珊', value: 'XX', testTime: '2023-12-22 07:15:22', addValue: '' },
            ]
        },
        closeDialog() {
            this.$emit('closeDialog');
        },
        submit() {
            this.closeDialog()
        }
    },


}
</script>

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