10/2

<template>  
    <div>  
      <el-button type="primary" @click="showAddStockInDialog">添加入库记录</el-button>  
      
      <el-table :data="stockInRecords" style="width: 100%; margin-top: 20px;">  
        <el-table-column prop="id" label="ID" width="120"></el-table-column>  
        <el-table-column prop="materialName" label="物料名称" width="180"></el-table-column>  
        <el-table-column prop="quantity" label="入库数量" width="150"></el-table-column>  
        <el-table-column prop="date" label="入库日期" width="180"></el-table-column>  
        <el-table-column label="操作" width="120">  
          <template #default="{ row }">  
            <el-button size="mini" type="danger" @click="deleteStockIn(row.id)">删除</el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
  
      <!-- 添加入库记录对话框 -->  
      <el-dialog title="添加入库记录" :visible.sync="addStockInDialogVisible">  
        <el-form :model="newStockIn">  
          <el-form-item label="物料名称">  
            <el-input v-model="newStockIn.materialName"></el-input>  
          </el-form-item>  
          <el-form-item label="入库数量">  
            <el-input v-model="newStockIn.quantity" type="number"></el-input>  
          </el-form-item>  
          <el-form-item label="入库日期">  
            <el-date-picker v-model="newStockIn.date" type="date" placeholder="选择日期"></el-date-picker>  
          </el-form-item>  
        </el-form>  
        <span slot="footer" class="dialog-footer">  
          <el-button @click="addStockInDialogVisible = false">取 消</el-button>  
          <el-button type="primary" @click="addStockIn">确 定</el-button>  
        </span>  
      </el-dialog>  
    </div>  
  </template>  
  
  <script>  
  export default {  
    data() {  
      return {  
        stockInRecords: [],  
        newStockIn: {  
          materialName: '',  
          quantity: 0,  
          date: '',  
        },  
        addStockInDialogVisible: false,  
      };  
    },  
    methods: {  
      showAddStockInDialog() {  
        this.addStockInDialogVisible = true;  
      },  
      addStockIn() {  
        const newId = this.stockInRecords.length + 1;  
        this.stockInRecords.push({ id: newId, ...this.newStockIn });  
        this.newStockIn = { materialName: '', quantity: 0, date: '' };  
        this.addStockInDialogVisible = false;  
      },  
      deleteStockIn(id) {  
        this.stockInRecords = this.stockInRecords.filter(record => record.id !== id);  
      }  
    }  
  };  
  </script>  
  
  <style scoped>  
  .el-table {  
    margin-top: 20px;  
  }  
  </style>