添加登录系统以及超级管理员内容

zhandianxinxi/光谱数据监控/src/views/MaintenanceLogs.vue

@@ -46,7 +46,7 @@
             border
             stripe
             v-loading="loading"
-            height="500"
+            height="550"
             style="width: 100%; margin-top: 15px"
         >
           <el-table-column prop="timestamp" label="记录时间" width="170" sortable />
@@ -93,7 +93,14 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="设备名称">
-                <el-input v-model="logDialog.form.device_name" placeholder="例: 106_Tower" />
+                <el-input
+                    v-model="logDialog.form.device_name"
+                    placeholder="例: 106_Tower"
+                    :disabled="logDialog.isEdit"
+                />
+                <div v-if="logDialog.isEdit" class="form-tip">
+                  <el-icon><InfoFilled /></el-icon> 为了数据追溯，修改模式下禁止更改关联设备
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -131,20 +138,20 @@
 <script setup>
 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' // 引入中文包
+import { ElMessage, ElConfigProvider } from 'element-plus'
+import { Search, Plus, Delete, Edit, InfoFilled } 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 logDialog = reactive({
   visible: false,
   submitting: false,
@@ -158,20 +165,19 @@ const logDialog = reactive({
   }
 })
 
-// --- 方法 ---
+// --- 方法逻辑 ---
 
-// 1. 打开主弹窗
+// 1. 暴露给父组件的打开方法
 const open = (prefillData = null) => {
   visible.value = true
+  // 如果从设备卡片点击进来，自动筛选该设备
   if (prefillData && prefillData.deviceName) {
     keyword.value = prefillData.deviceName
-  } else {
-    keyword.value = ''
   }
   fetchLogs()
 }
 
-// 2. 获取日志列表
+// 2. 获取数据列表
 const fetchLogs = async () => {
   loading.value = true
   try {
@@ -183,18 +189,18 @@ const fetchLogs = async () => {
     const res = await axios.get(`${API_BASE}/api/logs/list`, { params })
     logsList.value = res.data.data
   } catch (e) {
-    ElMessage.error('加载日志失败')
+    ElMessage.error('加载日志中心数据失败')
   } finally {
     loading.value = false
   }
 }
 
-// 3. 打开新增弹窗
+// 3. 处理新增
 const openAddDialog = () => {
   logDialog.isEdit = false
   logDialog.form = {
     id: null,
-    // 如果当前搜索框有值，自动填入
+    // 自动带入当前的搜索词作为设备名，提高录入效率
     device_name: keyword.value || '',
     engineer: '',
     location: '',
@@ -203,7 +209,7 @@ const openAddDialog = () => {
   logDialog.visible = true
 }
 
-// 4. 打开编辑弹窗 (新增)
+// 4. 处理修改
 const openEditDialog = (row) => {
   logDialog.isEdit = true
   logDialog.form = {
@@ -216,49 +222,82 @@ const openEditDialog = (row) => {
   logDialog.visible = true
 }
 
-// 5. 提交日志 (判断是新增还是修改)
+// 5. 提交表单（核心逻辑区分）
 const submitLog = async () => {
   if (!logDialog.form.device_name || !logDialog.form.content) {
-    return ElMessage.warning('请至少填写设备名称和内容')
+    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('新增成功')
-    }
+    const endpoint = logDialog.isEdit ? '/api/logs/update' : '/api/logs/add'
+    await axios.post(`${API_BASE}${endpoint}`, logDialog.form)
+
+    ElMessage.success(logDialog.isEdit ? '日志已成功修改' : '日志已添加')
     logDialog.visible = false
-    fetchLogs()
+    fetchLogs() // 刷新列表
   } catch (e) {
-    ElMessage.error(logDialog.isEdit ? '修改失败' : '提交失败')
+    ElMessage.error('操作失败，请检查网络或后端服务')
   } finally {
     logDialog.submitting = false
   }
 }
 
-// 6. 删除日志
+// 6. 删除逻辑
 const deleteLog = async (id) => {
   try {
     await axios.post(`${API_BASE}/api/logs/delete`, { id })
-    ElMessage.success('已删除')
+    ElMessage.success('记录已安全删除')
     fetchLogs()
   } catch (e) {
-    ElMessage.error('删除失败')
+    ElMessage.error('删除操作失败')
   }
 }
 
+// 格式化名称工具
 const formatDisplayName = (name) => name ? name.toUpperCase().replace(/_/g, ' ') : ''
 
+// 暴露方法给父组件 Dashboard 调用
 defineExpose({ open })
 </script>
 
 <style scoped>
-.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
-.filter-group { display: flex; gap: 10px; }
+.logs-container {
+  padding: 10px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-group {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 调整输入框禁用时的样式，保持可读性 */
+:deep(.el-input.is-disabled .el-input__wrapper) {
+  background-color: #f5f7fa;
+  box-shadow: 0 0 0 1px #e4e7ed inset;
+}
+
+:deep(.el-input.is-disabled .el-input__inner) {
+  color: #606266;
+  -webkit-text-fill-color: #606266;
+}
 </style>