140 lines
5.5 KiB
JavaScript
140 lines
5.5 KiB
JavaScript
import SearchOutlined from "@mui/icons-material/SearchOutlined";
|
||
import TextField from "@mui/material/TextField";
|
||
import { Button } from "@/shared/ui/Button.jsx";
|
||
import {
|
||
AdminFormDialog,
|
||
AdminFormFieldGrid,
|
||
AdminFormSection,
|
||
} from "@/shared/ui/AdminFormDialog.jsx";
|
||
import { AdminUserIdentity } from "@/shared/ui/AdminUserIdentity.jsx";
|
||
import styles from "@/features/external-admin-users/external-admin-users.module.css";
|
||
import { ExternalAdminPermissionSelector } from "@/features/external-admin-users/components/ExternalAdminPermissionSelector.jsx";
|
||
|
||
export function ExternalAdminUserFormDialog({
|
||
abilities,
|
||
catalog,
|
||
catalogError,
|
||
catalogLoading,
|
||
form,
|
||
loading,
|
||
lookupLoading,
|
||
onClose,
|
||
onDisplayUserIdChange,
|
||
onFormChange,
|
||
onLookup,
|
||
onReloadCatalog,
|
||
onSubmit,
|
||
open,
|
||
targetUser,
|
||
}) {
|
||
const existingAccount = targetUser?.existingExternalAdminUser;
|
||
|
||
return (
|
||
<AdminFormDialog
|
||
disabled={!abilities.canCreate}
|
||
loading={loading}
|
||
open={open}
|
||
size="large"
|
||
submitDisabled={
|
||
!abilities.canCreate ||
|
||
loading ||
|
||
!targetUser?.userId ||
|
||
Boolean(existingAccount) ||
|
||
(abilities.canManagePermissions &&
|
||
(catalogLoading || Boolean(catalogError) || !catalog.length))
|
||
}
|
||
submitLabel="创建"
|
||
title="创建外管用户"
|
||
onClose={onClose}
|
||
onSubmit={onSubmit}
|
||
>
|
||
<AdminFormSection title="绑定 App 用户">
|
||
<div className={styles.lookupRow}>
|
||
<TextField
|
||
autoComplete="off"
|
||
disabled={!abilities.canCreate || loading}
|
||
label="用户短 ID / 靓号"
|
||
required
|
||
value={form.displayUserId}
|
||
onChange={(event) => onDisplayUserIdChange(event.target.value)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Enter") {
|
||
event.preventDefault();
|
||
onLookup();
|
||
}
|
||
}}
|
||
/>
|
||
<Button
|
||
className={styles.lookupButton}
|
||
disabled={!abilities.canCreate || loading || lookupLoading}
|
||
startIcon={<SearchOutlined fontSize="small" />}
|
||
onClick={onLookup}
|
||
>
|
||
{lookupLoading ? "搜索中" : "搜索"}
|
||
</Button>
|
||
</div>
|
||
{targetUser ? (
|
||
<div className={styles.targetPanel}>
|
||
<AdminUserIdentity
|
||
openInAppUserDetail
|
||
rows={[targetUser.displayUserId, targetUser.userId]}
|
||
size="large"
|
||
user={targetUser}
|
||
/>
|
||
{existingAccount ? (
|
||
<div className={styles.existingWarning}>
|
||
该用户已绑定外管账号 {existingAccount.username || existingAccount.id}，不能重复创建。
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</AdminFormSection>
|
||
|
||
<AdminFormSection title="外管登录账号">
|
||
<AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
|
||
<TextField
|
||
autoComplete="off"
|
||
disabled={!abilities.canCreate || loading}
|
||
label="外管账号"
|
||
required
|
||
value={form.username}
|
||
onChange={(event) => onFormChange({ username: event.target.value })}
|
||
/>
|
||
<TextField
|
||
autoComplete="new-password"
|
||
disabled={!abilities.canCreate || loading}
|
||
label="密码"
|
||
required
|
||
type="password"
|
||
value={form.password}
|
||
onChange={(event) => onFormChange({ password: event.target.value })}
|
||
/>
|
||
<TextField
|
||
autoComplete="new-password"
|
||
disabled={!abilities.canCreate || loading}
|
||
label="确认密码"
|
||
required
|
||
type="password"
|
||
value={form.confirmPassword}
|
||
onChange={(event) => onFormChange({ confirmPassword: event.target.value })}
|
||
/>
|
||
</AdminFormFieldGrid>
|
||
</AdminFormSection>
|
||
|
||
{abilities.canManagePermissions ? (
|
||
<AdminFormSection title="外管权限">
|
||
<ExternalAdminPermissionSelector
|
||
catalog={catalog}
|
||
disabled={loading}
|
||
error={catalogError}
|
||
loading={catalogLoading}
|
||
value={form.permissions || []}
|
||
onChange={(permissions) => onFormChange({ permissions })}
|
||
onRetry={onReloadCatalog}
|
||
/>
|
||
</AdminFormSection>
|
||
) : null}
|
||
</AdminFormDialog>
|
||
);
|
||
}
|