9/21

<template>  
    <div>  
      <el-button type="primary" @click="showAddDeviceDialog">添加设备</el-button>  
      <el-table :data="devices" style="width: 100%; margin-top: 20px;">  
        <el-table-column prop="id" label="设备ID" width="120"></el-table-column>  
        <el-table-column prop="name" label="设备名称" width="180"></el-table-column>  
        <el-table-column prop="type" label="设备类型" width="180"></el-table-column>  
        <el-table-column prop="status" label="设备状态" width="150"></el-table-column>  
        <el-table-column prop="location" label="设备位置" width="150"></el-table-column>  
        <el-table-column prop="lastMaintenance" label="最后保养时间" width="180"></el-table-column>  
        <el-table-column label="操作" width="180">  
          <template #default="{ row }">  
            <el-button size="mini" @click="editDevice(row)">修改</el-button>  
            <el-button size="mini" type="danger" @click="deleteDevice(row.id)">删除</el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
  
      <!-- 添加设备对话框 -->  
      <el-dialog title="添加设备" :visible.sync="addDeviceDialogVisible">  
        <el-form :model="newDevice">  
          <el-form-item label="设备名称">  
            <el-input v-model="newDevice.name"></el-input>  
          </el-form-item>  
          <el-form-item label="设备类型">  
            <el-input v-model="newDevice.type"></el-input>  
          </el-form-item>  
          <el-form-item label="设备状态">  
            <el-input v-model="newDevice.status"></el-input>  
          </el-form-item>  
          <el-form-item label="设备位置">  
            <el-input v-model="newDevice.location"></el-input>  
          </el-form-item>  
          <el-form-item label="最后保养时间">  
            <el-input v-model="newDevice.lastMaintenance"></el-input>  
          </el-form-item>  
        </el-form>  
        <span slot="footer" class="dialog-footer">  
          <el-button @click="addDeviceDialogVisible = false">取 消</el-button>  
          <el-button type="primary" @click="addDevice">确 定</el-button>  
        </span>  
      </el-dialog>  
    </div>  
  </template>  
  
  <script>  
  export default {  
    data() {  
      return {  
        devices: [  
          { id: 1, name: '设备A', type: '类型1', status: '运行', location: '车间1', lastMaintenance: '2023-09-15' },  
          { id: 2, name: '设备B', type: '类型2', status: '停机', location: '车间2', lastMaintenance: '2023-09-20' },  
          { id: 3, name: '设备C', type: '类型1', status: '运行', location: '车间1', lastMaintenance: '2023-10-01' },  
          { id: 4, name: '设备D', type: '类型3', status: '检修', location: '车间3', lastMaintenance: '2023-09-10' },  
        ],  
        newDevice: {  
          name: '',  
          type: '',  
          status: '',  
          location: '',  
          lastMaintenance: '',  
        },  
        addDeviceDialogVisible: false,  
      };  
    },  
    methods: {  
      showAddDeviceDialog() {  
        this.addDeviceDialogVisible = true;  
      },  
      addDevice() {  
        const newId = this.devices.length + 1;  
        this.devices.push({ id: newId, ...this.newDevice });  
        this.newDevice = {};  
        this.addDeviceDialogVisible = false;  
      },  
      editDevice(row) {  
        // 编辑设备逻辑  
        console.log('编辑设备', row);  
      },  
      deleteDevice(id) {  
        this.devices = this.devices.filter(device => device.id !== id);  
      }  
    }  
  };  
  </script>  
  
  <style scoped>  
  .el-table {  
    margin-top: 20px;  
  }  
  </style>