子仓库提交

src/app/(app)/central-config/tenant/user-management/components/UserFormDialog.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import React from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { User, Enterprise, UserFormData } from '../types';
+
+interface UserFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingUser: User | null;
+  formData: UserFormData;
+  onFormDataChange: (data: UserFormData) => void;
+  onSave: () => void;
+  enterprises: Enterprise[];
+}
+
+export function UserFormDialog({
+  open,
+  onOpenChange,
+  editingUser,
+  formData,
+  onFormDataChange,
+  onSave,
+  enterprises
+}: UserFormDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{editingUser ? '编辑用户' : '添加用户'}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {editingUser ? '编辑用户信息' : '添加新用户'}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="username">用户名 *</Label>
+              <Input
+                id="username"
+                value={formData.username || ''}
+                onChange={(e) => onFormDataChange({ ...formData, username: e.target.value })}
+                placeholder="登录用户名"
+              />
+            </div>
+            <div>
+              <Label htmlFor="name">姓名 *</Label>
+              <Input
+                id="name"
+                value={formData.name || ''}
+                onChange={(e) => onFormDataChange({ ...formData, name: e.target.value })}
+                placeholder="真实姓名"
+              />
+            </div>
+            <div>
+              <Label htmlFor="phone">电话 *</Label>
+              <Input
+                id="phone"
+                value={formData.phone || ''}
+                onChange={(e) => onFormDataChange({ ...formData, phone: e.target.value })}
+                placeholder="手机号码"
+              />
+            </div>
+            <div>
+              <Label htmlFor="email">邮箱</Label>
+              <Input
+                id="email"
+                type="email"
+                value={formData.email || ''}
+                onChange={(e) => onFormDataChange({ ...formData, email: e.target.value })}
+                placeholder="电子邮箱"
+              />
+            </div>
+            <div>
+              <Label htmlFor="userType">用户类型 *</Label>
+              <Select
+                value={formData.userType || 'enterprise_admin'}
+                onValueChange={(value) => {
+                  onFormDataChange({
+                    ...formData,
+                    userType: value,
+                    // 如果切换为超级管理员，清除企业信息
+                    ...(value === 'super_admin' ? { enterpriseId: undefined, enterpriseName: undefined } : {})
+                  });
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="super_admin">超级管理员</SelectItem>
+                  <SelectItem value="enterprise_admin">企业管理员</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {formData.userType === 'enterprise_admin' && (
+              <div>
+                <Label htmlFor="enterpriseId">所属企业 *</Label>
+                <Select
+                  value={formData.enterpriseId || ''}
+                  onValueChange={(value: string) => {
+                    const selectedEnterprise = enterprises.find(e => e.id === value);
+                    onFormDataChange({
+                      ...formData,
+                      enterpriseId: value,
+                      enterpriseName: selectedEnterprise?.name
+                    });
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="请选择企业" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {enterprises.map((enterprise) => (
+                      <SelectItem key={enterprise.id} value={enterprise.id}>
+                        {enterprise.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={onSave}>保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}