10/10

<template>  
    <div>  
      <el-button type="primary" @click="showAddRepairDialog">添加维修</el-button>  
      
      <el-table :data="repairs" style="width: 100%; margin-top: 20px;">  
        <el-table-column prop="id" label="维修ID" width="120"></el-table-column>  
        <el-table-column prop="deviceName" label="设备名称" width="180"></el-table-column>  
        <el-table-column prop="repairDescription" label="维修描述" width="250"></el-table-column>  
        <el-table-column prop="repairStatus" label="维修状态" width="150"></el-table-column>  
        <el-table-column prop="repairDate" label="维修日期" width="150"></el-table-column>  
        <el-table-column label="操作" width="120">  
          <template #default="{ row }">  
            <el-button size="mini" type="danger" @click="cancelRepair(row.id)">撤回</el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
  
      <!-- 添加维修对话框 -->  
      <el-dialog title="添加维修" :visible.sync="addRepairDialogVisible">  
        <el-form :model="newRepair">  
          <el-form-item label="设备名称">  
            <el-input v-model="newRepair.deviceName"></el-input>  
          </el-form-item>  
          <el-form-item label="维修描述">  
            <el-input v-model="newRepair.repairDescription"></el-input>  
          </el-form-item>  
          <el-form-item label="维修状态">  
            <el-input v-model="newRepair.repairStatus"></el-input>  
          </el-form-item>  
          <el-form-item label="维修日期">  
            <el-input v-model="newRepair.repairDate"></el-input>  
          </el-form-item>  
        </el-form>  
        <span slot="footer" class="dialog-footer">  
          <el-button @click="addRepairDialogVisible = false">取 消</el-button>  
          <el-button type="primary" @click="addRepair">确 定</el-button>  
        </span>  
      </el-dialog>  
    </div>  
  </template>  
  
  <script>  
  export default {  
    data() {  
      return {  
        repairs: [],  
        newRepair: {  
          deviceName: '',  
          repairDescription: '',  
          repairStatus: '',  
          repairDate: '',  
        },  
        addRepairDialogVisible: false,  
      };  
    },  
    methods: {  
      showAddRepairDialog() {  
        this.addRepairDialogVisible = true;  
      },  
      addRepair() {  
        const newId = this.repairs.length + 1;  
        this.repairs.push({ id: newId, ...this.newRepair });  
        this.newRepair = {};  
        this.addRepairDialogVisible = false;  
      },  
      cancelRepair(id) {  
        this.repairs = this.repairs.filter(repair => repair.id !== id);  
      }  
    }  
  };  
  </script>  
  
  <style scoped>  
  .el-table {  
    margin-top: 20px;  
  }  
  </style>