2.27

<template>
<div class="maintenance-management">
<div class="header">
<h2>Maintenance 管理</h2>
<div class="actions">
<el-button type="primary" @click="showAddDialog">新增记录</el-button>
<el-button type="info" @click="exportData">导出数据</el-button>
</div>
</div>

<!-- 搜索区域 -->
<div class="search-area">
<el-form :inline="true" :model="searchForm" class="search-form">
<el-form-item label="备件名称">
<el-input v-model="searchForm.sparePartName" placeholder="请输入备件名称" clearable></el-input>
</el-form-item>
<el-form-item label="操作人">
<el-input v-model="searchForm.operator" placeholder="请输入操作人" clearable></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
<el-option label="进行中" value="进行中"></el-option>
<el-option label="已完成" value="已完成"></el-option>
<el-option label="已取消" value="已取消"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchRecords">搜索</el-button>
<el-button @click="resetSearch">重置</el-button>
</el-form-item>
</el-form>
</div>

<!-- 数据表格 -->
<el-table :data="records" style="width: 100%" v-loading="loading">
<el-table-column prop="recordId" label="记录编号" width="150"></el-table-column>
<el-table-column prop="sparePartName" label="备件名称" width="120"></el-table-column>
<el-table-column prop="sparePartModel" label="备件型号" width="120"></el-table-column>
<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
<el-table-column prop="operator" label="操作人" width="100"></el-table-column>
<el-table-column prop="status" label="状态" width="100">
<template slot-scope="scope">
<el-tag :type="getStatusType(scope.row.status)">
{{ scope.row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="operationDate" label="操作时间" width="150">
<template slot-scope="scope">
{{ formatDate(scope.row.operationDate) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template slot-scope="scope">
<el-button size="mini" @click="viewRecord(scope.row)">查看</el-button>
<el-button size="mini" type="primary" @click="editRecord(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteRecord(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>

<!-- 分页 -->
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>

<!-- 新增/编辑对话框 -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
<el-form :model="currentRecord" :rules="rules" ref="recordForm" label-width="120px">
<el-form-item label="备件名称" prop="sparePartName">
<el-input v-model="currentRecord.sparePartName"></el-input>
</el-form-item>
<el-form-item label="备件型号" prop="sparePartModel">
<el-input v-model="currentRecord.sparePartModel"></el-input>
</el-form-item>
<el-form-item label="数量" prop="quantity">
<el-input-number v-model="currentRecord.quantity" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="操作人" prop="operator">
<el-input v-model="currentRecord.operator"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="currentRecord.status" placeholder="请选择">
<el-option label="进行中" value="进行中"></el-option>
<el-option label="已完成" value="已完成"></el-option>
<el-option label="已取消" value="已取消"></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remarks">
<el-input type="textarea" v-model="currentRecord.remarks" :rows="3"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="saveRecord">确定</el-button>
</div>
</el-dialog>
</div>
</template>

<script>
import axios from 'axios'

export default {
name: 'MaintenanceManagement',
data() {
return {
records: [],
loading: false,
dialogVisible: false,
dialogTitle: '新增记录',
currentRecord: {},
searchForm: {
sparePartName: '',
operator: '',
status: ''
},
currentPage: 1,
pageSize: 10,
total: 0,
rules: {
sparePartName: [{ required: true, message: '请输入备件名称', trigger: 'blur' }],
sparePartModel: [{ required: true, message: '请输入备件型号', trigger: 'blur' }],
quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
operator: [{ required: true, message: '请输入操作人', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}
}
},
mounted() {
this.loadRecords()
},
methods: {
async loadRecords() {
this.loading = true
try {
const response = await axios.get('/maintenance')
this.records = response.data
this.total = response.data.length
} catch (error) {
this.$message.error('加载数据失败')
} finally {
this.loading = false
}
},

async searchRecords() {
// 搜索功能实现
this.loadRecords()
},

resetSearch() {
this.searchForm = { sparePartName: '', operator: '', status: '' }
this.loadRecords()
},

showAddDialog() {
this.dialogTitle = '新增记录'
this.currentRecord = {}
this.dialogVisible = true
},

editRecord(record) {
this.dialogTitle = '编辑记录'
this.currentRecord = { ...record }
this.dialogVisible = true
},

viewRecord(record) {
this.$alert(JSON.stringify(record, null, 2), '记录详情', {
confirmButtonText: '确定'
})
},

async saveRecord() {
this.$refs.recordForm.validate(async (valid) => {
if (valid) {
try {
if (this.currentRecord.id) {
await axios.put(`/maintenance/${this.currentRecord.id}`, this.currentRecord)
this.$message.success('更新成功')
} else {
await axios.post('/maintenance', this.currentRecord)
this.$message.success('创建成功')
}
this.dialogVisible = false
this.loadRecords()
} catch (error) {
this.$message.error('保存失败')
}
}
})
},

deleteRecord(record) {
this.$confirm('确认删除这条记录吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
try {
await axios.delete(`/maintenance/${record.id}`)
this.$message.success('删除成功')
this.loadRecords()
} catch (error) {
this.$message.error('删除失败')
}
})
},

exportData() {
this.$message.info('导出功能开发中...')
},

handleSizeChange(val) {
this.pageSize = val
this.loadRecords()
},

handleCurrentChange(val) {
this.currentPage = val
this.loadRecords()
},

getStatusType(status) {
const statusMap = {
'进行中': 'warning',
'已完成': 'success',
'已取消': 'danger'
}
return statusMap[status] || 'info'
},

formatDate(date) {
if (!date) return ''
return new Date(date).toLocaleString()
}
}
}
</script>

<style scoped>
.maintenance-management {
padding: 20px;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.search-area {
background: #f5f5f5;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
}

.search-form {
margin: 0;
}

.pagination {
margin-top: 20px;
text-align: right;
}
</style>