超级管理员登录设置

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>新增员工账号</span>
+        </div>
+      </template>
+
+      <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-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>
+        </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-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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { createUser } from '@/api/auth'
+import { ElMessage } from 'element-plus'
+
+const loading = ref(false)
+const formRef = ref()
+
+const form = reactive({
+  username: '',
+  password: '',
+  department: '',
+  role: '',
+  email: ''
+})
+
+const rules = {
+  username: [{ required: true, message: '请输入用户名', 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' }]
+}
+
+const onSubmit = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      loading.value = true
+      try {
+        await createUser(form)
+        ElMessage.success(`用户 ${form.username} 创建成功！`)
+        resetForm()
+      } catch (error) {
+        // 错误已被拦截器处理
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+
+const resetForm = () => {
+  if (!formRef.value) return
+  formRef.value.resetFields()
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+.form-tip {
+  font-size: 12px;
+  color: #e6a23c;
+  line-height: 1.5;
+  margin-top: 5px;
+}
+</style>