jonhon-mes-web/src/views/orderManagement/components/mold/addMoldDailog.vue

<template>
    <el-dialog title="新增" append-to-body :modelValue="openShow" width="90%" @close="closeDialog" fullscreen>

        <div style="margin-bottom: 12px;" v-if="moldAddMore">
            <el-button type="primary" @click="addTable">插入一行</el-button>
            <el-button type="danger" @click="delTable">删除行</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" width="80" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="partCode" label="零件编码" align="center">
                <template #header>
                    <span><i style="color:red">*</i>零件编码</span>
                </template>
                <template #default="scope">
                    <el-select v-model="scope.row.partCode" :filterable="true" allow-create
                        @change="partCodeChange(scope.row)" >
                        <el-option label="零件一" value="1" />
                        <el-option label="零件二" value="2" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="partName" label="零件名称" align="center">
                <template #default="scope">
                    <span>{{ scope.row.partName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="moCode" label="工装号" align="center">
                <template #header>
                    <span><i style="color:red">*</i>工装号</span>
                </template>
                <template #default="scope">
                    <el-select v-model="scope.row.moCode" :filterable="true" allow-create 
                        @change="frockChange(scope.row)">
                        <el-option label="工装一" value="1" />
                        <el-option label="工装二" value="2" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="moName" label="工装名称" align="center">
                <template #default="scope">
                    <span>{{ scope.row.moName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" align="center">
                <template #header>
                    <span><i style="color:red">*</i>数量</span>
                </template>
                <template #default="scope">
                    <el-input-number v-model="scope.row.shuliang" :min="1"  controls-position="right" style="width: 90%;"
                        @change="handleChange" />
                </template>
            </el-table-column>
            <el-table-column prop="planType" label="计划类型" align="center">
                <template #header>
                    <span><i style="color:red">*</i>计划类型</span>
                </template>
                <template #default="scope">
                    <el-select v-model="scope.row.moCode" :filterable="true" allow-create 
                        @change="frockChange(scope.row)">
                        <el-option label="计划类型一" value="1" />
                        <el-option label="计划类型二" value="2" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="needDate" label="需求日期" align="center">
                <template #header>
                    <span><i style="color:red">*</i>需求日期</span>
                </template>
                <template #default="scope">
                    <el-date-picker v-model="scope.row.needDate" type="date" placeholder="请选择" 
                        style="width: 80%;" />
                </template>
            </el-table-column>
            <el-table-column prop="quaLevel" label="生产标识" align="center">
                <template #header>
                    <span><i style="color:red">*</i>生产标识</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.quaLevel"   />
                </template>
            </el-table-column>
            <el-table-column prop="keeper.userName" label="保管员" align="center">
                <template #header>
                    <span><i style="color:red">*</i>保管员</span>
                </template>
                <template #default="scope">
                      <el-select v-model="scope.row.userName" :filterable="true" allow-create 
                        @change="frockChange(scope.row)">
                        <el-option label="人员一" value="1" />
                        <el-option label="人员二" value="2" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="memo" label="备注" align="center">
                <template #default="scope">
                    <el-input v-model="scope.row.memo"   />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="left" v-if="moldAddMore">
                <template #default="scope">
                    <el-button type="text" 
                        @click.prevent="delTable(scope.row, scope.$index)">删除</el-button>
                </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>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        moldAddMore: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            openShow: false,
            tableData: []
        }
    },
    mounted() {
        this.openShow = this.showDialog
    },
    methods: {
        closeDialog() {
            this.openShow = false
            this.$emit('closeDialog');
        },
        // 插入一行
        addTable() {
            this.tableData.push({
                code: '3',
                No: '3',
                number: '3',
                shuliang: '',
                shuliang: 0,
                memo:''

            })
        },
        // 删除一行
        delTable(row, index) {
            this.tableData.splice(index, 1)
        },
        // 选择零件
        partCodeChange() {
            // var row = this.$refs.xTable.getCurrentRecord();
            // if (itemRow.frockOption != null && itemRow.frockOption.length > 0) {
            //     let name = '';
            //     itemRow.frockOption.forEach((item) => {
            //         if (item.value == itemRow.moCode) {
            //             name = item.name;
            //         }
            //     });
            //     this.$set(row, 'moName', name);
            // } else {
            //     this.$set(row, 'moName', '');
            // }
        },
        // 选中工装
        frockChange(itemRow) {
            // var row = this.$refs.xTable.getCurrentRecord();
            // if (itemRow.frockOption != null && itemRow.frockOption.length > 0) {
            //     let name = '';
            //     itemRow.frockOption.forEach((item) => {
            //         if (item.value == itemRow.moCode) {
            //             name = item.name;
            //         }
            //     });
            //     this.$set(row, 'moName', name);
            // } else {
            //     this.$set(row, 'moName', '');
            // }
        },
    }
}
</script>
<style lang="scss" scoped></style>