新增用户页面更新以及调整

inventory-web/src/views/system/UserCreate.vue

@@ -3,67 +3,139 @@
     <el-card>
       <template #header>
         <div class="card-header">
-          <span>新增员工账号</span>
+          <span style="font-weight: bold;">员工账号管理</span>
+          <el-button type="primary" @click="handleCreate">
+            + 新增员工
+          </el-button>
         </div>
       </template>
 
+      <el-table
+          v-loading="tableLoading"
+          :data="tableData"
+          border
+          style="width: 100%"
+      >
+        <el-table-column prop="username" label="用户名" width="150" />
+
+        <el-table-column prop="department" label="所属部门" width="150">
+          <template #default="scope">
+            <el-tag>{{ scope.row.department }}</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="role" label="系统角色" width="180">
+          <template #default="scope">
+            {{ formatRole(scope.row.role) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="email" label="邮箱" min-width="200" />
+
+        <el-table-column prop="created_at" label="创建时间" width="180">
+          <template #default="scope">
+            {{ formatDate(scope.row.created_at) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="150" fixed="right">
+          <template #default="scope">
+            <el-popconfirm
+                title="确定要删除该用户吗？此操作无法撤销。"
+                @confirm="handleDelete(scope.row)"
+            >
+              <template #reference>
+                <el-button link type="danger" size="small">删除</el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+        v-model="dialogVisible"
+        title="新增员工账号"
+        width="500px"
+        @close="resetForm"
+    >
       <el-form
           ref="formRef"
           :model="form"
           :rules="rules"
           label-width="100px"
-          style="max-width: 600px"
       >
         <el-form-item label="用户名" prop="username">
           <el-input v-model="form.username" placeholder="登录账号 (英文)" />
         </el-form-item>
 
         <el-form-item label="初始密码" prop="password">
-          <el-input v-model="form.password" type="password" show-password placeholder="设置初始密码" />
+          <el-input
+              v-model="form.password"
+              type="password"
+              show-password
+              placeholder="设置初始密码"
+          />
         </el-form-item>
 
         <el-form-item label="所属部门" prop="department">
-          <el-select v-model="form.department" placeholder="请选择部门" style="width: 100%">
-            <el-option label="总经办" value="Management" />
-            <el-option label="财务部" value="Finance" />
-            <el-option label="仓储部" value="Warehouse" />
-            <el-option label="采购部" value="Procurement" />
-            <el-option label="销售部" value="Sales" />
+          <el-select
+              v-model="form.department"
+              placeholder="请输入或选择部门"
+              style="width: 100%"
+              filterable
+              allow-create
+              default-first-option
+          >
+            <el-option
+                v-for="item in departmentOptions"
+                :key="item"
+                :label="item"
+                :value="item"
+            />
           </el-select>
         </el-form-item>
 
         <el-form-item label="系统角色" prop="role">
           <el-select v-model="form.role" placeholder="授予权限" style="width: 100%">
-            <el-option label="主管 (Supervisor)" value="supervisor" />
-            <el-option label="财务 (Finance)" value="finance" />
-            <el-option label="库管 (Warehouse Mgr)" value="warehouse_manager" />
-            <el-option label="入库员 (Inbound)" value="inbound" />
-            <el-option label="出库员 (Outbound)" value="outbound" />
-            <el-option label="采购员 (Purchaser)" value="purchaser" />
-            <el-option label="销售 (Sales)" value="sales" />
+            <el-option label="主管" value="supervisor" />
+            <el-option label="财务" value="finance" />
+            <el-option label="库管" value="warehouse_manager" />
+            <el-option label="入库员" value="inbound" />
+            <el-option label="出库员" value="outbound" />
+            <el-option label="采购员" value="purchaser" />
+            <el-option label="销售" value="sales" />
           </el-select>
-          <div class="form-tip">注意：超级管理员无法通过此界面创建，请联系开发人员。</div>
         </el-form-item>
 
         <el-form-item label="邮箱" prop="email">
           <el-input v-model="form.email" placeholder="可选填" />
         </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit" :loading="loading">创建账号</el-button>
-          <el-button @click="resetForm">重置</el-button>
-        </el-form-item>
       </el-form>
-    </el-card>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="onSubmit" :loading="submitLoading">
+            确认创建
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { createUser } from '@/api/auth'
+import { reactive, ref, onMounted } from 'vue'
+import { createUser, getUserList, deleteUser } from '@/api/auth'
 import { ElMessage } from 'element-plus'
 
-const loading = ref(false)
+// --- 状态定义 ---
+const tableLoading = ref(false)
+const submitLoading = ref(false)
+const dialogVisible = ref(false)
+const tableData = ref<any[]>([])
+const departmentOptions = ref<string[]>([]) // 部门下拉选项
 const formRef = ref()
 
 const form = reactive({
@@ -76,43 +148,134 @@ const form = reactive({
 
 const rules = {
   username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '密码至少6位', trigger: 'blur' }],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码至少6位', trigger: 'blur' }
+  ],
   role: [{ required: true, message: '请选择角色', trigger: 'change' }],
-  department: [{ required: true, message: '请选择部门', trigger: 'change' }]
+  department: [{ required: true, message: '请输入或选择部门', trigger: ['blur', 'change'] }]
 }
 
+// --- 逻辑方法 ---
+
+// 1. 获取用户列表
+const getList = async () => {
+  tableLoading.value = true
+  try {
+    const res = await getUserList()
+    tableData.value = res.data || []
+
+    // 获取数据后，提取已有的部门作为选项
+    extractDepartments(tableData.value)
+
+  } catch (error) {
+    console.error('Fetch users failed:', error)
+  } finally {
+    tableLoading.value = false
+  }
+}
+
+// 【关键修改】提取部门：没有任何预设值，完全依赖数据库
+const extractDepartments = (data: any[]) => {
+  // 1. 创建一个空的 Set，不放任何默认值
+  const deptSet = new Set<string>()
+
+  // 2. 遍历数据库返回的数据，收集已有的部门
+  if (data && data.length > 0) {
+    data.forEach(user => {
+      // 只有当部门字段不为空时才添加
+      if (user.department && user.department.trim() !== '') {
+        deptSet.add(user.department)
+      }
+    })
+  }
+
+  // 3. 转为数组供下拉框使用
+  departmentOptions.value = Array.from(deptSet)
+}
+
+// 2. 打开新增弹窗
+const handleCreate = () => {
+  dialogVisible.value = true
+}
+
+// 3. 提交创建
 const onSubmit = async () => {
   if (!formRef.value) return
+
   await formRef.value.validate(async (valid: boolean) => {
     if (valid) {
-      loading.value = true
+      submitLoading.value = true
       try {
         await createUser(form)
         ElMessage.success(`用户 ${form.username} 创建成功！`)
-        resetForm()
+        dialogVisible.value = false // 关闭弹窗
+        getList() // 刷新列表，如果你刚才输入了新部门，刷新后它就会出现在下拉框里
       } catch (error) {
-        // 错误已被拦截器处理
+        // 错误已处理
       } finally {
-        loading.value = false
+        submitLoading.value = false
       }
     }
   })
 }
 
+// 4. 重置表单
 const resetForm = () => {
   if (!formRef.value) return
   formRef.value.resetFields()
 }
+
+// 5. 删除用户
+const handleDelete = async (row: any) => {
+  try {
+    await deleteUser(row.id)
+    ElMessage.success('删除成功')
+    getList()
+  } catch (error) {
+    // 错误处理
+  }
+}
+
+// --- 辅助显示方法 ---
+
+const formatDate = (dateStr: string) => {
+  if (!dateStr) return '-'
+  return dateStr.replace('T', ' ').substring(0, 19)
+}
+
+// 角色保留翻译（因为后端通常存英文代码 code）
+const formatRole = (val: string) => {
+  const map: Record<string, string> = {
+    'supervisor': '主管',
+    'finance': '财务',
+    'warehouse_manager': '库管',
+    'inbound': '入库员',
+    'outbound': '出库员',
+    'purchaser': '采购员',
+    'sales': '销售',
+    'super_admin': '超级管理员'
+  }
+  return map[val] || val
+}
+
+// --- 初始化 ---
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style scoped>
 .app-container {
   padding: 20px;
 }
-.form-tip {
-  font-size: 12px;
-  color: #e6a23c;
-  line-height: 1.5;
-  margin-top: 5px;
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.dialog-footer {
+  text-align: right;
+  margin-top: 20px;
 }
 </style>