refactor(ui): [UI7-1] 深度翻新报销、发票与用户管理等核心视窗

2026-03-06 09:48:11 +08:00
@@ -0,0 +1,246 @@
+import { useState } from "react";
+import { Button } from "../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+
+export interface CreateUserFormData {
+  employeeNo: string;
+  name: string;
+  phone: string;
+  email: string;
+  password: string;
+  departmentId: string | undefined;
+  directManagerId: string | null;
+  roles: string[];
+}
+
+export interface CreateUserDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (data: CreateUserFormData) => void;
+  isPending: boolean;
+  departments: { isLoading: boolean; items: Array<{ id: string; name: string }> };
+  managers: { isLoading: boolean; items: Array<{ id: string; name: string; employeeNo: string }> };
+  roleOptions: Array<{ code: string; label: string }>;
+}
+
+export function CreateUserDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  isPending,
+  departments,
+  managers,
+  roleOptions,
+}: CreateUserDialogProps) {
+  const [employeeNo, setEmployeeNo] = useState("");
+  const [name, setName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [departmentId, setDepartmentId] = useState("");
+  const [directManagerId, setDirectManagerId] = useState("");
+  const [createRoles, setCreateRoles] = useState<Set<string>>(() => new Set(["employee"]));
+
+  const trimmedEmployeeNo = employeeNo.trim();
+  const trimmedName = name.trim();
+  const trimmedPhone = phone.trim();
+  const trimmedEmail = email.trim();
+  const rolesArray = Array.from(createRoles);
+
+  const canSubmit =
+    !isPending &&
+    trimmedEmployeeNo !== "" &&
+    trimmedName !== "" &&
+    trimmedPhone !== "" &&
+    trimmedEmail !== "" &&
+    password !== "" &&
+    rolesArray.length >= 1;
+
+  function resetForm() {
+    setEmployeeNo("");
+    setName("");
+    setPhone("");
+    setEmail("");
+    setPassword("");
+    setDepartmentId("");
+    setDirectManagerId("");
+    setCreateRoles(new Set(["employee"]));
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      resetForm();
+    }
+    onOpenChange(nextOpen);
+  }
+
+  function handleSubmit() {
+    onSubmit({
+      employeeNo: trimmedEmployeeNo,
+      name: trimmedName,
+      phone: trimmedPhone,
+      email: trimmedEmail,
+      password,
+      departmentId: departmentId || undefined,
+      directManagerId: directManagerId ? directManagerId : null,
+      roles: rolesArray,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button data-testid="users-create-open" type="button">
+          新建用户
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>新建用户</DialogTitle>
+          <DialogDescription>请填写基础信息与初始密码（满足密码策略）。</DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="employeeNo">工号</Label>
+            <Input
+              id="employeeNo"
+              data-testid="users-create-employeeNo"
+              value={employeeNo}
+              onChange={(e) => setEmployeeNo(e.target.value)}
+              placeholder="E1001"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="name">姓名</Label>
+            <Input
+              id="name"
+              data-testid="users-create-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="张三"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="phone">手机号</Label>
+            <Input
+              id="phone"
+              data-testid="users-create-phone"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              placeholder="13800000001"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="email">邮箱</Label>
+            <Input
+              id="email"
+              data-testid="users-create-email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="[email protected]"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="password">初始密码</Label>
+            <Input
+              id="password"
+              data-testid="users-create-password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="至少12位，含大小写与数字"
+            />
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="departmentId">部门（可选）</Label>
+            <select
+              id="departmentId"
+              data-testid="users-create-department"
+              className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+              value={departmentId}
+              onChange={(event) => setDepartmentId(event.target.value)}
+            >
+              <option value="">
+                {departments.isLoading ? "加载中..." : "默认（与当前管理员一致）"}
+              </option>
+              {departments.items.map((item) => (
+                <option key={item.id} value={item.id}>
+                  {item.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid gap-2">
+            <Label htmlFor="directManagerId">直属上级（可选）</Label>
+            <select
+              id="directManagerId"
+              data-testid="users-create-direct-manager"
+              className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
+              value={directManagerId}
+              onChange={(event) => setDirectManagerId(event.target.value)}
+            >
+              <option value="">
+                {managers.isLoading ? "加载中..." : "无"}
+              </option>
+              {managers.items.map((item) => (
+                <option key={item.id} value={item.id}>
+                  {item.name} ({item.employeeNo})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid gap-2">
+            <Label>角色</Label>
+            <div className="flex flex-wrap gap-3 text-sm">
+              {roleOptions.map((item) => (
+                <label className="flex items-center gap-2" key={item.code}>
+                  <input
+                    data-testid={`users-create-role-${item.code}`}
+                    type="checkbox"
+                    checked={createRoles.has(item.code)}
+                    onChange={(event) => {
+                      setCreateRoles((prev) => {
+                        const next = new Set(prev);
+                        if (event.target.checked) {
+                          next.add(item.code);
+                        } else {
+                          next.delete(item.code);
+                        }
+                        return next;
+                      });
+                    }}
+                  />
+                  <span>{item.label}</span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button
+              data-testid="users-create-submit"
+              disabled={!canSubmit}
+              onClick={handleSubmit}
+              type="button"
+            >
+              {isPending ? "创建中..." : "创建"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { Button } from "../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
+import type { UserSummary } from "../../api/users";
+
+export interface UserRoleDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user: UserSummary | null;
+  roleOptions: Array<{ code: string; label: string }>;
+  onSubmit: (roles: string[]) => void;
+  isPending: boolean;
+}
+
+export function UserRoleDialog({
+  open,
+  onOpenChange,
+  user,
+  roleOptions,
+  onSubmit,
+  isPending,
+}: UserRoleDialogProps) {
+  const [roleDraft, setRoleDraft] = useState<Set<string>>(() => new Set());
+
+  useEffect(() => {
+    if (user) {
+      setRoleDraft(new Set(user.roleCodes));
+    } else {
+      setRoleDraft(new Set());
+    }
+  }, [user]);
+
+  function handleClose() {
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          handleClose();
+        }
+      }}
+    >
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>设置角色</DialogTitle>
+          <DialogDescription>
+            当前用户：{user?.employeeNo} / {user?.name}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-wrap gap-3 text-sm">
+          {roleOptions.map((item) => (
+            <label className="flex items-center gap-2" key={item.code}>
+              <input
+                data-testid={`users-role-${item.code}`}
+                type="checkbox"
+                checked={roleDraft.has(item.code)}
+                onChange={(event) => {
+                  setRoleDraft((prev) => {
+                    const next = new Set(prev);
+                    if (event.target.checked) {
+                      next.add(item.code);
+                    } else {
+                      next.delete(item.code);
+                    }
+                    return next;
+                  });
+                }}
+              />
+              <span>{item.label}</span>
+            </label>
+          ))}
+        </div>
+
+        <div className="flex justify-end gap-2">
+          <Button
+            variant="secondary"
+            disabled={isPending}
+            onClick={handleClose}
+            type="button"
+          >
+            取消
+          </Button>
+          <Button
+            data-testid="users-role-save"
+            disabled={isPending || roleDraft.size < 1}
+            onClick={() => onSubmit(Array.from(roleDraft))}
+            type="button"
+          >
+            {isPending ? "保存中..." : "保存"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}