2.3权限管理，基本盘完成，下一步修改设备管理弹窗设计，完善工程师日志写入设计

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

@@ -4,32 +4,65 @@
       <template #header>
         <div class="header-row">
           <div class="left-panel">
-            <h2 class="sys-title">👤 客户权限管理</h2>
+            <h2 class="sys-title">👥 用户与权限管理</h2>
           </div>
           <div class="header-actions">
             <el-button @click="router.push('/dashboard')" icon="Back">返回监控</el-button>
-            <el-button type="primary" icon="Plus" @click="showCreateModal = true">新建客户</el-button>
+            <el-button type="primary" icon="Plus" @click="openCreateModal">新建用户</el-button>
           </div>
         </div>
       </template>
 
       <el-table :data="users" border style="width: 100%" v-loading="loading">
         <el-table-column prop="id" label="ID" width="80" align="center" />
-        <el-table-column prop="username" label="客户名称" min-width="150" />
+
+        <el-table-column prop="username" label="用户名" min-width="150">
+          <template #default="{ row }">
+            <span style="font-weight: bold;">{{ row.username }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="role" label="角色身份" width="150" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="row.role === 'admin'" type="danger" effect="dark">超级管理员</el-tag>
+            <el-tag v-else-if="row.role === 'engineer'" type="warning" effect="dark">设备工程师</el-tag>
+            <el-tag v-else type="info" effect="plain">普通客户</el-tag>
+          </template>
+        </el-table-column>
+
         <el-table-column prop="created_at" label="创建时间" min-width="180">
           <template #default="{ row }">
             {{ new Date(row.created_at).toLocaleString() }}
           </template>
         </el-table-column>
-        <el-table-column label="可见设备" min-width="120">
+
+        <el-table-column label="关联设备数" min-width="120" align="center">
           <template #default="{ row }">
-            <el-tag>{{ row.allowed_device_ids?.length || 0 }} 台</el-tag>
+            <el-tag v-if="row.role === 'admin'" type="danger" effect="plain">全部权限</el-tag>
+            <el-tag v-else effect="plain" type="success">{{ row.allowed_device_ids?.length || 0 }} 台</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="200" align="center" fixed="right">
+
+        <el-table-column label="操作" width="220" align="center" fixed="right">
           <template #default="{ row }">
-            <el-button type="primary" link icon="Setting" @click="openPermissionModal(row)">分配权限</el-button>
-            <el-popconfirm title="确定删除该客户吗?" @confirm="deleteUser(row.id)">
+            <el-button
+                v-if="row.role !== 'admin'"
+                type="primary"
+                link
+                icon="Setting"
+                @click="openPermissionModal(row)"
+            >
+              分配设备
+            </el-button>
+
+            <el-popconfirm
+                title="确定删除该用户吗? 此操作不可恢复。"
+                confirm-button-text="删除"
+                cancel-button-text="取消"
+                icon="Warning"
+                icon-color="red"
+                @confirm="deleteUser(row.id)"
+            >
               <template #reference>
                 <el-button type="danger" link icon="Delete">删除</el-button>
               </template>
@@ -39,24 +72,36 @@
       </el-table>
     </el-card>
 
-    <el-dialog v-model="showCreateModal" title="新建客户账号" width="400px">
+    <el-dialog v-model="showCreateModal" title="新建账号" width="400px">
       <el-form :model="newUser" label-width="80px">
         <el-form-item label="用户名">
-          <el-input v-model="newUser.username" placeholder="请输入客户登录名" />
+          <el-input v-model="newUser.username" placeholder="请输入登录名" />
         </el-form-item>
         <el-form-item label="密码">
           <el-input v-model="newUser.password" type="password" placeholder="设置初始密码" show-password />
         </el-form-item>
+        <el-form-item label="角色权限">
+          <el-select v-model="newUser.role" placeholder="请选择角色" style="width: 100%">
+            <el-option label="普通客户 (只读)" value="client" />
+            <el-option label="设备工程师 (可维护)" value="engineer" />
+            <el-option label="超级管理员 (Root权限)" value="admin" />
+          </el-select>
+          <div style="font-size: 12px; color: #999; margin-top: 5px; line-height: 1.2;">
+            <span v-if="newUser.role === 'admin'" style="color: #f56c6c;">* 拥有删除用户、爬虫控制等最高权限</span>
+            <span v-else-if="newUser.role === 'engineer'" style="color: #e6a23c;">* 拥有修改设备地点、写日志权限</span>
+            <span v-else>* 仅可查看被分配的设备数据</span>
+          </div>
+        </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="showCreateModal = false">取消</el-button>
-          <el-button type="primary" @click="createClient">确认创建</el-button>
+          <el-button type="primary" @click="createUser" :loading="creating">确认创建</el-button>
         </span>
       </template>
     </el-dialog>
 
-    <el-dialog v-model="showPermissionModal" :title="`给 ${currentUser?.username} 分配设备`" width="600px">
+    <el-dialog v-model="showPermissionModal" :title="`给 [${currentUser?.username}] 分配设备`" width="650px">
       <div class="permission-transfer">
         <el-transfer
             v-model="selectedDeviceIds"
@@ -64,7 +109,7 @@
             :titles="['可选设备', '已授权设备']"
             :props="{ key: 'id', label: 'label' }"
             filterable
-            filter-placeholder="搜索设备"
+            filter-placeholder="搜索设备名称"
         />
       </div>
       <template #footer>
@@ -80,21 +125,21 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-// 🔴 修改 1: 引入 request
 import request from '../utils/request'
 import { ElMessage } from 'element-plus'
-import { Back, Plus, Setting, Delete } from '@element-plus/icons-vue'
+import { Back, Plus, Setting, Delete, Warning } from '@element-plus/icons-vue'
 
 const router = useRouter()
-// 🔴 修改 2: 删除 API_BASE
 const loading = ref(false)
+const creating = ref(false)
 
 const users = ref([])
-const rawDevices = ref([]) // 原始设备列表
+const rawDevices = ref([])
 const showCreateModal = ref(false)
 const showPermissionModal = ref(false)
 
-const newUser = ref({ username: '', password: '' })
+// 默认新建角色为 client
+const newUser = ref({ username: '', password: '', role: 'client' })
 const currentUser = ref(null)
 const selectedDeviceIds = ref([])
 
@@ -102,7 +147,7 @@ const selectedDeviceIds = ref([])
 const allDevices = computed(() => {
   return rawDevices.value.map(d => ({
     id: d.id,
-    label: `${d.name} (${d.install_site || '未命名'})`
+    label: `${d.name} ${d.install_site ? '(' + d.install_site + ')' : ''}`
   }))
 })
 
@@ -114,11 +159,9 @@ onMounted(async () => {
 const fetchUsers = async () => {
   loading.value = true
   try {
-    // 🔴 修改 3: 使用 request.get，移除 headers
     const res = await request.get('/api/admin/users')
-    users.value = res.data
+    users.value = res.data.data || res.data
   } catch (e) {
-    // 拦截器已处理 401/403，这里只处理通用错误提示
     console.error(e)
   } finally {
     loading.value = false
@@ -127,66 +170,112 @@ const fetchUsers = async () => {
 
 const fetchAllDevices = async () => {
   try {
-    // 🔴 修改 4: 使用 request.get，复用 dashboard 接口
     const res = await request.get('/api/devices_overview')
-    const list = res.data.data || res.data
-    rawDevices.value = list
+    rawDevices.value = res.data.data || res.data
   } catch (e) {
     console.error(e)
   }
 }
 
-const createClient = async () => {
+const openCreateModal = () => {
+  // 每次打开重置表单
+  newUser.value = {username: '', password: '', role: 'client'}
+  showCreateModal.value = true
+}
+
+const createUser = async () => {
   if (!newUser.value.username || !newUser.value.password) return ElMessage.warning('请填写完整')
+
+  creating.value = true
   try {
-    // 🔴 修改 5: 使用 request.post
-    await request.post('/api/admin/create_client', newUser.value)
-    ElMessage.success('创建成功')
+    // 发送 role 到后端，数据库直接存入
+    await request.post('/api/admin/create_user', newUser.value)
+    ElMessage.success('用户创建成功')
     showCreateModal.value = false
-    newUser.value = { username: '', password: '' }
     fetchUsers()
   } catch (e) {
     ElMessage.error(e.response?.data?.msg || '创建失败')
+  } finally {
+    creating.value = false
   }
 }
 
 const openPermissionModal = (user) => {
   currentUser.value = user
-  // 回显已选权限
   selectedDeviceIds.value = user.allowed_device_ids || []
   showPermissionModal.value = true
 }
 
 const savePermissions = async () => {
   try {
-    // 🔴 修改 6: 使用 request.post
     await request.post('/api/admin/assign_devices', {
       user_id: currentUser.value.id,
       device_ids: selectedDeviceIds.value
     })
     ElMessage.success('权限已更新')
     showPermissionModal.value = false
-    fetchUsers() // 刷新列表查看数量变化
+    fetchUsers()
   } catch (e) {
     ElMessage.error('保存失败')
   }
 }
 
 const deleteUser = async (id) => {
-  ElMessage.info('删除功能暂需后端接口支持')
+  try {
+    await request.post('/api/admin/delete_user', {user_id: id})
+    ElMessage.success('用户已删除')
+    fetchUsers()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.msg || '删除失败')
+  }
 }
 </script>
 
 <style scoped>
-.user-manage-container { padding: 10px; background: #f5f7fa; min-height: 100vh; box-sizing: border-box; }
-.main-card { border-radius: 8px; min-height: 80vh; }
-.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
-.sys-title { margin: 0; font-size: 20px; color: #303133; font-weight: 700; }
-.header-actions { display: flex; gap: 10px; }
+.user-manage-container {
+  padding: 10px;
+  background: #f5f7fa;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+.main-card {
+  border-radius: 8px;
+  min-height: 80vh;
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.sys-title {
+  margin: 0;
+  font-size: 20px;
+  color: #303133;
+  font-weight: 700;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+:deep(.el-transfer-panel) {
+  width: 250px;
+}
 
-:deep(.el-transfer-panel) { width: 220px; }
 @media screen and (max-width: 768px) {
-  :deep(.el-transfer-panel) { width: 100%; margin-bottom: 10px; }
-  .permission-transfer { display: flex; flex-direction: column; }
+  :deep(.el-transfer-panel) {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .permission-transfer {
+    display: flex;
+    flex-direction: column;
+  }
 }
 </style>