2代版本基本全部实现
This commit is contained in:
YueL1331
@ -1,61 +1,264 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button icon="ArrowLeft" circle @click="$router.push('/')" style="margin-right: 15px"></el-button>
|
||||
<h2>🔧 维修日志中心</h2>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="success" icon="Download">导出Excel</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="🔧 维修与故障日志中心"
|
||||
width="85%"
|
||||
top="5vh"
|
||||
destroy-on-close
|
||||
append-to-body
|
||||
>
|
||||
<div class="logs-container">
|
||||
|
||||
<el-card shadow="never">
|
||||
<div class="filter-bar">
|
||||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||
<el-input v-model="searchKeyword" placeholder="搜索设备名或工程师" style="width: 250px" prefix-icon="Search" />
|
||||
<el-button type="primary">查询</el-button>
|
||||
<div class="toolbar">
|
||||
<div class="filter-group">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="fetchLogs"
|
||||
style="width: 260px"
|
||||
/>
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="搜索：设备名 / 工程师 / 内容"
|
||||
style="width: 300px"
|
||||
clearable
|
||||
@clear="fetchLogs"
|
||||
@keyup.enter="fetchLogs"
|
||||
>
|
||||
<template #prefix><el-icon><Search /></el-icon></template>
|
||||
</el-input>
|
||||
<el-button type="primary" @click="fetchLogs">查询</el-button>
|
||||
</div>
|
||||
|
||||
<div class="action-group">
|
||||
<el-button type="success" icon="Plus" @click="openAddDialog">新增记录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="logsList"
|
||||
border
|
||||
stripe
|
||||
v-loading="loading"
|
||||
height="500"
|
||||
style="width: 100%; margin-top: 15px"
|
||||
>
|
||||
<el-table-column prop="timestamp" label="记录时间" width="170" sortable />
|
||||
|
||||
<el-table-column prop="device_name" label="设备名称" width="180">
|
||||
<template #default="{ row }">
|
||||
<el-tag effect="plain">{{ formatDisplayName(row.device_name) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="location" label="地点" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="engineer" label="工程师" width="120" />
|
||||
<el-table-column prop="content" label="维修/故障详情" min-width="300" show-overflow-tooltip />
|
||||
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="Edit"
|
||||
@click="openEditDialog(row)"
|
||||
style="margin-right: 5px;"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
|
||||
<el-popconfirm title="确定删除这条记录吗？" @confirm="deleteLog(row.id)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link icon="Delete">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<el-table :data="logs" border stripe style="width: 100%; margin-top: 20px">
|
||||
<el-table-column prop="timestamp" label="记录时间" width="180" />
|
||||
<el-table-column prop="device_name" label="相关设备" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-tag>{{ row.device_name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="engineer" label="工程师" width="120" />
|
||||
<el-table-column prop="content" label="维修/操作内容" />
|
||||
<el-table-column label="操作" width="100" align="center">
|
||||
<template #default>
|
||||
<el-button type="danger" link size="small">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog
|
||||
v-model="logDialog.visible"
|
||||
:title="logDialog.isEdit ? '✏️ 修改维修记录' : '📝 新增维修记录'"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form :model="logDialog.form" label-width="80px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="设备名称">
|
||||
<el-input v-model="logDialog.form.device_name" placeholder="例: 106_Tower" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="工程师">
|
||||
<el-input v-model="logDialog.form.engineer" placeholder="例: 张工" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination background layout="prev, pager, next" :total="100" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-form-item label="地点">
|
||||
<el-input v-model="logDialog.form.location" placeholder="例: 3号楼顶层" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="事件内容">
|
||||
<el-input
|
||||
v-model="logDialog.form.content"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="描述故障原因及处理结果..."
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="logDialog.visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitLog" :loading="logDialog.submitting">
|
||||
{{ logDialog.isEdit ? '保存修改' : '提交保存' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</el-dialog>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ArrowLeft, Search, Download } from '@element-plus/icons-vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { ElMessage, ElConfigProvider } from 'element-plus' // 引入 ConfigProvider
|
||||
import { Search, Plus, Delete, Edit } from '@element-plus/icons-vue'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文包
|
||||
|
||||
const API_BASE = import.meta.env.DEV ? 'http://127.0.0.1:5000' : ''
|
||||
|
||||
// --- 状态 ---
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const logsList = ref([])
|
||||
const keyword = ref('')
|
||||
const dateRange = ref([])
|
||||
const searchKeyword = ref('')
|
||||
const logs = ref([
|
||||
{ timestamp: '2024-01-08 14:00', device_name: '106_tower_spec', engineer: '张工', content: '更换了光纤接口，清理了灰尘。' },
|
||||
{ timestamp: '2024-01-07 09:30', device_name: '82_sensor_B', engineer: '李工', content: '设备离线排查，重启后恢复。' }
|
||||
])
|
||||
|
||||
// 弹窗状态
|
||||
const logDialog = reactive({
|
||||
visible: false,
|
||||
submitting: false,
|
||||
isEdit: false,
|
||||
form: {
|
||||
id: null,
|
||||
device_name: '',
|
||||
engineer: '',
|
||||
location: '',
|
||||
content: ''
|
||||
}
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
|
||||
// 1. 打开主弹窗
|
||||
const open = (prefillData = null) => {
|
||||
visible.value = true
|
||||
if (prefillData && prefillData.deviceName) {
|
||||
keyword.value = prefillData.deviceName
|
||||
} else {
|
||||
keyword.value = ''
|
||||
}
|
||||
fetchLogs()
|
||||
}
|
||||
|
||||
// 2. 获取日志列表
|
||||
const fetchLogs = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = { keyword: keyword.value }
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
params.start_date = dateRange.value[0]
|
||||
params.end_date = dateRange.value[1]
|
||||
}
|
||||
const res = await axios.get(`${API_BASE}/api/logs/list`, { params })
|
||||
logsList.value = res.data.data
|
||||
} catch (e) {
|
||||
ElMessage.error('加载日志失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 打开新增弹窗
|
||||
const openAddDialog = () => {
|
||||
logDialog.isEdit = false
|
||||
logDialog.form = {
|
||||
id: null,
|
||||
// 如果当前搜索框有值，自动填入
|
||||
device_name: keyword.value || '',
|
||||
engineer: '',
|
||||
location: '',
|
||||
content: ''
|
||||
}
|
||||
logDialog.visible = true
|
||||
}
|
||||
|
||||
// 4. 打开编辑弹窗 (新增)
|
||||
const openEditDialog = (row) => {
|
||||
logDialog.isEdit = true
|
||||
logDialog.form = {
|
||||
id: row.id,
|
||||
device_name: row.device_name,
|
||||
engineer: row.engineer,
|
||||
location: row.location,
|
||||
content: row.content
|
||||
}
|
||||
logDialog.visible = true
|
||||
}
|
||||
|
||||
// 5. 提交日志 (判断是新增还是修改)
|
||||
const submitLog = async () => {
|
||||
if (!logDialog.form.device_name || !logDialog.form.content) {
|
||||
return ElMessage.warning('请至少填写设备名称和内容')
|
||||
}
|
||||
|
||||
logDialog.submitting = true
|
||||
try {
|
||||
if (logDialog.isEdit) {
|
||||
// 调用修改接口
|
||||
await axios.post(`${API_BASE}/api/logs/update`, logDialog.form)
|
||||
ElMessage.success('修改成功')
|
||||
} else {
|
||||
// 调用新增接口
|
||||
await axios.post(`${API_BASE}/api/logs/add`, logDialog.form)
|
||||
ElMessage.success('新增成功')
|
||||
}
|
||||
logDialog.visible = false
|
||||
fetchLogs()
|
||||
} catch (e) {
|
||||
ElMessage.error(logDialog.isEdit ? '修改失败' : '提交失败')
|
||||
} finally {
|
||||
logDialog.submitting = false
|
||||
}
|
||||
}
|
||||
|
||||
// 6. 删除日志
|
||||
const deleteLog = async (id) => {
|
||||
try {
|
||||
await axios.post(`${API_BASE}/api/logs/delete`, { id })
|
||||
ElMessage.success('已删除')
|
||||
fetchLogs()
|
||||
} catch (e) {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container { padding: 20px; background: #f5f7fa; min-height: 100vh; }
|
||||
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; }
|
||||
.header-left { display: flex; align-items: center; }
|
||||
.filter-bar { display: flex; gap: 15px; }
|
||||
.pagination-wrapper { margin-top: 20px; display: flex; justify-content: flex-end; }
|
||||
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
|
||||
.filter-group { display: flex; gap: 10px; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user