// User detail — header form + permission tabs (with checkbox grid). // Modes: view (read-only) | edit | new const PERM_TABS = [ { id: "groups", label: "权限组" }, { id: "customer", label: "客户查看权限" }, { id: "supplier", label: "供应商查看权限" }, { id: "staff", label: "人员查看权限" }, { id: "process", label: "工序查看权限" }, { id: "driver", label: "司机查看权限" }, ]; const UserDetail = ({ user: initial, mode: initialMode, onSave, onDelete, onClose }) => { const [mode, setMode] = React.useState(initialMode || "view"); const [user, setUser] = React.useState(initial); const [tab, setTab] = React.useState("groups"); const [snapshot, setSnapshot] = React.useState(initial); React.useEffect(() => { setUser(initial); setSnapshot(initial); setMode(initialMode || "view"); }, [initial, initialMode]); const set = (k, v) => setUser((s) => ({ ...s, [k]: v })); const setPerm = (g, v) => setUser((s) => ({ ...s, permissions: { ...s.permissions, [g]: v } })); const setTabPerm = (k, v) => setUser((s) => ({ ...s, tabPerms: { ...s.tabPerms, [k]: v } })); const start = (m) => { setSnapshot(user); setMode(m); }; const save = () => { onSave && onSave(user); setSnapshot(user); setMode("view"); }; const cancel = () => { setUser(snapshot); setMode("view"); }; const disabled = mode === "view"; const isNew = mode === "new"; const checked = Object.values(user.permissions || {}).filter(Boolean).length; return (
{/* Dark sub-toolbar */}
} onClick={() => start("new")} disabled={mode !== "view"}>新增 } onClick={() => start("edit")} disabled={mode !== "view"}>修改 } danger disabled={mode !== "view"} onClick={onDelete}>删除 } onClick={save} disabled={mode === "view"}>保存 } onClick={cancel} disabled={mode === "view"}>取消 }>功能 }>作废 }>重置密码 }>取消作废
已选权限：{checked} / {XLY.PERMISSION_GROUPS.length - 1} {mode === "view" ? "只读" : mode === "new" ? "新增中" : "编辑中"}
{/* Header form (3 cols × 3 rows) */}
set("createdBy", v)} disabled={disabled} required /> set("employee", v)} disabled={disabled} required /> set("account", v)} disabled={disabled} required /> set("empNo", v)} disabled={disabled} required mono /> set("language", v)} disabled={disabled} required options={XLY.LANGUAGES} /> setFilter(e.target.value)} placeholder="过滤..." style={{ height: 20, padding: "0 6px", border: "1px solid var(--border-input)", background: "#fff", fontSize: 11, width: 120, fontFamily: "inherit" }} /> {XLY.PERMISSION_GROUPS.filter((g) => g !== "权限分类" && (!filter || g.includes(filter))).map((g, i) => { const isHover = hovered === g; return ( setHovered(g)} onMouseLeave={() => setHovered(null)} onClick={disabled ? undefined : () => setPerm(g, !user.permissions[g])} style={{ background: isHover && !disabled ? "var(--bg-row-hover)" : user.permissions[g] ? "var(--accent-soft)" : i % 2 === 0 ? "#fff" : "var(--bg-row-zebra)", cursor: disabled ? "default" : "pointer", height: 24, }} > setPerm(g, v)} disabled={disabled} /> {g} ); })}
); }; const ScopeTab = ({ tabKey, user, setTabPerm, disabled }) => { const map = { customer: { label: "客户", items: ["上海印行包装", "锐尚文创", "京华彩印", "广印纸品", "万象图文", "联合包装", "鼎盛印刷", "九洲胶印"] }, supplier: { label: "供应商", items: ["华东油墨", "正信纸业", "宝洁化工", "日新油墨", "三鼎纸业", "鸿丰胶辊", "永利印材"] }, staff: { label: "人员", items: ["管广飞", "李斌", "孟威", "王宽明", "潘强", "杨柳"] }, process: { label: "工序", items: ["印前", "印刷", "覆膜", "模切", "装订", "胶装", "丝网", "烫金", "包装"] }, driver: { label: "司机", items: ["陈师傅", "李师傅", "王师傅", "钱师傅", "赵师傅"] }, }; const cfg = map[tabKey]; const [filter, setFilter] = React.useState(""); const enabled = !!user.tabPerms[tabKey]; return (
setTabPerm(tabKey, v)} disabled={disabled} label={`启用${cfg.label}查看权限`} /> setFilter(e.target.value)} placeholder={`筛选${cfg.label}...`} style={{ height: 24, padding: "0 8px", border: "1px solid var(--border-input)", background: "var(--bg-input)", fontSize: 12, width: 200, fontFamily: "inherit" }} /> 共 {cfg.items.length} 个{cfg.label}
{cfg.items.filter((x) => !filter || x.includes(filter)).map((it) => ( ))}
); }; window.UserDetail = UserDetail;