screen-userdetail.jsx
13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
// 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 (
<div style={{ display: "flex", flexDirection: "column", height: "100%", background: "var(--bg-app)" }}>
{/* Dark sub-toolbar */}
<div style={{
display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", rowGap: 4,
padding: "4px 8px", background: "var(--bg-toolbar-dark)",
flex: "none", borderBottom: "1px solid #1a1f2a",
}}>
<ToolbarBtnDark icon={<Ic.plus size={12} />} onClick={() => start("new")} disabled={mode !== "view"}>新增</ToolbarBtnDark>
<ToolbarBtnDark icon={<Ic.edit size={12} />} onClick={() => start("edit")} disabled={mode !== "view"}>修改</ToolbarBtnDark>
<ToolbarBtnDark icon={<Ic.trash size={12} />} danger disabled={mode !== "view"} onClick={onDelete}>删除</ToolbarBtnDark>
<ToolbarBtnDark icon={<Ic.save size={12} />} onClick={save} disabled={mode === "view"}>保存</ToolbarBtnDark>
<ToolbarBtnDark icon={<Ic.cancel size={12} />} onClick={cancel} disabled={mode === "view"}>取消</ToolbarBtnDark>
<span style={{ width: 1, height: 16, background: "rgba(255,255,255,0.12)", margin: "0 4px" }} />
<ToolbarBtnDark icon={<Ic.function size={12} />}>功能</ToolbarBtnDark>
<ToolbarBtnDark icon={<Ic.clipboard size={12} />}>作废</ToolbarBtnDark>
<ToolbarBtnDark icon={<Ic.key size={12} />}>重置密码</ToolbarBtnDark>
<ToolbarBtnDark icon={<Ic.undo size={12} />}>取消作废</ToolbarBtnDark>
<div style={{ flex: 1 }} />
<span style={{ fontSize: 11, color: "var(--text-on-dark-muted)", marginRight: 8 }}>
已选权限：<span style={{ color: "#fff", fontWeight: 500 }}>{checked}</span> / {XLY.PERMISSION_GROUPS.length - 1}
</span>
<span style={{
padding: "2px 8px", fontSize: 11,
background: mode === "view" ? "rgba(39,165,103,0.18)" : mode === "new" ? "rgba(58,142,224,0.22)" : "rgba(217,142,31,0.22)",
color: mode === "view" ? "#7be0a8" : mode === "new" ? "#9cc8f0" : "#ffc77a",
border: `1px solid ${mode === "view" ? "rgba(39,165,103,0.4)" : mode === "new" ? "rgba(58,142,224,0.4)" : "rgba(217,142,31,0.4)"}`,
}}>
{mode === "view" ? "只读" : mode === "new" ? "新增中" : "编辑中"}
</span>
<button style={{ marginLeft: 8, width: 22, height: 22, border: "none", background: "transparent", color: "var(--text-on-dark-muted)", cursor: "pointer" }}>
<Ic.settings size={13} />
</button>
</div>
{/* Header form (3 cols × 3 rows) */}
<div style={{
background: "#fff", padding: "10px 12px",
borderBottom: "1px solid var(--border)", flex: "none",
display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
rowGap: 6, columnGap: 16,
}}>
<Field label="创建时间">
<Input value={user.createdAt} disabled mono />
</Field>
<Field label="制单人" required>
<Input value={user.createdBy} onChange={(v) => set("createdBy", v)} disabled={disabled} required />
</Field>
<Field label="员工名" required>
<Input value={user.employee} onChange={(v) => set("employee", v)} disabled={disabled} required />
</Field>
<Field label="用户名" required>
<Input value={user.account} onChange={(v) => set("account", v)} disabled={disabled} required />
</Field>
<Field label="类型" required>
<Select value={user.type} onChange={(v) => set("type", v)} disabled={disabled} required options={XLY.USER_TYPES} />
</Field>
<Field label="用户号" required>
<Input value={user.empNo} onChange={(v) => set("empNo", v)} disabled={disabled} required mono />
</Field>
<Field label="部门">
<Select value={user.department} onChange={(v) => set("department", v)} disabled={disabled} options={XLY.DEPARTMENTS} />
</Field>
<Field label="语言" required>
<Select value={user.language} onChange={(v) => set("language", v)} disabled={disabled} required options={XLY.LANGUAGES} />
</Field>
<Field label="单据修改权限">
<Select value={user.editPerm || ""} onChange={(v) => set("editPerm", v)} disabled={disabled} options={["全部允许", "仅本人单据", "仅查看"]} />
</Field>
</div>
{/* Permission tabs */}
<div style={{ display: "flex", alignItems: "stretch", background: "#fff", borderBottom: "1px solid var(--border)", flex: "none" }}>
{PERM_TABS.map((t) => {
const active = t.id === tab;
return (
<div
key={t.id}
onClick={() => setTab(t.id)}
style={{
padding: "6px 14px", fontSize: 12, cursor: "pointer",
color: active ? "var(--accent-strong)" : "var(--text)",
background: active ? "var(--accent-soft)" : "transparent",
borderTop: active ? "2px solid var(--accent)" : "2px solid transparent",
borderRight: "1px solid var(--border)",
fontWeight: active ? 500 : 400,
}}
onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--bg-row-hover)"; }}
onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}
>
{t.label}
</div>
);
})}
</div>
{/* Tab content */}
<div style={{ flex: 1, overflow: "auto", background: "#fff" }}>
{tab === "groups" ? (
<PermissionGrid user={user} setPerm={setPerm} disabled={disabled} />
) : (
<ScopeTab tabKey={tab} user={user} setTabPerm={setTabPerm} disabled={disabled} />
)}
</div>
{/* Floating help */}
<div style={{ position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)" }}>
<button style={{
width: 18, height: 40, background: "var(--accent)", color: "#fff", border: "none",
borderTopLeftRadius: 4, borderBottomLeftRadius: 4, cursor: "pointer", fontSize: 11,
writingMode: "vertical-rl",
}}>
帮助
</button>
</div>
</div>
);
};
const PermissionGrid = ({ user, setPerm, disabled }) => {
const [filter, setFilter] = React.useState("");
const [hovered, setHovered] = React.useState(null);
return (
<div>
<table style={{ borderCollapse: "collapse", width: "100%", fontSize: 12, tableLayout: "fixed" }}>
<colgroup>
<col style={{ width: 40 }} />
<col />
</colgroup>
<thead>
<tr style={{ background: "var(--bg-row-zebra)", borderBottom: "1px solid var(--border)" }}>
<th style={{ padding: "5px 8px", borderRight: "1px solid var(--border)", textAlign: "center" }}>
<Checkbox
checked={Object.values(user.permissions).every(Boolean)}
onChange={(v) => {
XLY.PERMISSION_GROUPS.forEach((g) => { if (g !== "权限分类") setPerm(g, v); });
}}
disabled={disabled}
/>
</th>
<th style={{ padding: "5px 8px", textAlign: "left", fontWeight: 500 }}>
<span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
权限分类
<input
value={filter} onChange={(e) => 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" }}
/>
</span>
</th>
</tr>
</thead>
<tbody>
{XLY.PERMISSION_GROUPS.filter((g) => g !== "权限分类" && (!filter || g.includes(filter))).map((g, i) => {
const isHover = hovered === g;
return (
<tr
key={g}
onMouseEnter={() => 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,
}}
>
<td style={{ padding: "3px 0", textAlign: "center", borderRight: "1px solid var(--border)", borderBottom: "1px solid #f0f2f5" }}>
<Checkbox
checked={!!user.permissions[g]}
onChange={(v) => setPerm(g, v)}
disabled={disabled}
/>
</td>
<td style={{ padding: "3px 8px", borderBottom: "1px solid #f0f2f5", color: user.permissions[g] ? "var(--accent-strong)" : "var(--text)", fontWeight: user.permissions[g] ? 500 : 400 }}>
{g}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
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 (
<div style={{ padding: 12 }}>
<div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10, paddingBottom: 8, borderBottom: "1px solid var(--border)" }}>
<Checkbox
checked={enabled}
onChange={(v) => setTabPerm(tabKey, v)}
disabled={disabled}
label={`启用${cfg.label}查看权限`}
/>
<input
value={filter} onChange={(e) => 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" }}
/>
<span style={{ flex: 1 }} />
<span style={{ fontSize: 11, color: "var(--text-muted)" }}>
共 {cfg.items.length} 个{cfg.label}
</span>
</div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
{cfg.items.filter((x) => !filter || x.includes(filter)).map((it) => (
<label key={it} style={{
display: "flex", alignItems: "center", gap: 6,
padding: "5px 8px", border: "1px solid var(--border)",
background: enabled ? "#fff" : "var(--bg-disabled)",
cursor: disabled || !enabled ? "default" : "pointer", fontSize: 12,
}}>
<Checkbox disabled={disabled || !enabled} />
<span style={{ color: enabled ? "var(--text)" : "var(--text-faint)" }}>{it}</span>
</label>
))}
</div>
</div>
);
};
window.UserDetail = UserDetail;