1036 lines
44 KiB
TypeScript
1036 lines
44 KiB
TypeScript
|
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
|
|||
|
|
import { AnimatePresence, motion } from "motion/react";
|
|||
|
|
import {
|
|||
|
|
AlertTriangle,
|
|||
|
|
ArrowLeft,
|
|||
|
|
ArrowRightLeft,
|
|||
|
|
BriefcaseBusiness,
|
|||
|
|
Building2,
|
|||
|
|
CheckCircle2,
|
|||
|
|
Search,
|
|||
|
|
ShieldAlert,
|
|||
|
|
Users,
|
|||
|
|
X,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import { useNavigate } from "react-router-dom";
|
|||
|
|
import ActionDialog from "@/components/ActionDialog";
|
|||
|
|
import { useIsMobileViewport } from "@/hooks/useIsMobileViewport";
|
|||
|
|
import {
|
|||
|
|
executeOwnerTransfer,
|
|||
|
|
getCurrentUser,
|
|||
|
|
getStoredCurrentUserId,
|
|||
|
|
listOwnerTransferTargetUsers,
|
|||
|
|
previewOwnerTransfer,
|
|||
|
|
type AdminUserSummary,
|
|||
|
|
type OwnerTransferItem,
|
|||
|
|
type OwnerTransferPayload,
|
|||
|
|
type OwnerTransferPreview,
|
|||
|
|
} from "@/lib/auth";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
type TransferTab = "opportunities" | "sales" | "channels";
|
|||
|
|
type TransferKind = "opportunity" | "sales" | "channel";
|
|||
|
|
type SelectionState = {
|
|||
|
|
opportunityIds: number[];
|
|||
|
|
salesExpansionIds: number[];
|
|||
|
|
channelExpansionIds: number[];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
type TransferConfirmState = {
|
|||
|
|
title: string;
|
|||
|
|
description: string;
|
|||
|
|
payload: OwnerTransferPayload;
|
|||
|
|
successText: string;
|
|||
|
|
confirmText: string;
|
|||
|
|
sourceLabel: string;
|
|||
|
|
targetLabel: string;
|
|||
|
|
subjectLabel?: string;
|
|||
|
|
badges: string[];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const TAB_META: Array<{
|
|||
|
|
key: TransferTab;
|
|||
|
|
label: string;
|
|||
|
|
icon: typeof BriefcaseBusiness;
|
|||
|
|
}> = [
|
|||
|
|
{ key: "opportunities", label: "商机", icon: BriefcaseBusiness },
|
|||
|
|
{ key: "sales", label: "拓展销售人员", icon: Users },
|
|||
|
|
{ key: "channels", label: "拓展渠道", icon: Building2 },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
function getActiveTenantId() {
|
|||
|
|
const rawValue = localStorage.getItem("activeTenantId");
|
|||
|
|
const tenantId = Number(rawValue || 0);
|
|||
|
|
return Number.isFinite(tenantId) ? tenantId : 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getDisplayUserName(user?: AdminUserSummary | null) {
|
|||
|
|
if (!user) {
|
|||
|
|
return "未选择";
|
|||
|
|
}
|
|||
|
|
return `${user.displayName || user.username} (${user.username})`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function filterTransferItems(items: OwnerTransferItem[], keyword: string) {
|
|||
|
|
const normalizedKeyword = keyword.trim().toLowerCase();
|
|||
|
|
if (!normalizedKeyword) {
|
|||
|
|
return items;
|
|||
|
|
}
|
|||
|
|
return items.filter((item) => `${item.name || ""} ${item.code || ""}`.toLowerCase().includes(normalizedKeyword));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function countLabel(value?: number) {
|
|||
|
|
return typeof value === "number" && Number.isFinite(value) ? value : 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createEmptySelectionState(): SelectionState {
|
|||
|
|
return {
|
|||
|
|
opportunityIds: [],
|
|||
|
|
salesExpansionIds: [],
|
|||
|
|
channelExpansionIds: [],
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getSelectionKey(kind: TransferKind) {
|
|||
|
|
if (kind === "sales") {
|
|||
|
|
return "salesExpansionIds";
|
|||
|
|
}
|
|||
|
|
if (kind === "channel") {
|
|||
|
|
return "channelExpansionIds";
|
|||
|
|
}
|
|||
|
|
return "opportunityIds";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getTransferTabKind(tab: TransferTab): TransferKind {
|
|||
|
|
if (tab === "sales") {
|
|||
|
|
return "sales";
|
|||
|
|
}
|
|||
|
|
if (tab === "channels") {
|
|||
|
|
return "channel";
|
|||
|
|
}
|
|||
|
|
return "opportunity";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function OwnerTransfer({
|
|||
|
|
embedded = false,
|
|||
|
|
onClose,
|
|||
|
|
onFooterChange,
|
|||
|
|
}: {
|
|||
|
|
embedded?: boolean;
|
|||
|
|
onClose?: () => void;
|
|||
|
|
onFooterChange?: (footer: ReactNode | null) => void;
|
|||
|
|
}) {
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const isMobileViewport = useIsMobileViewport();
|
|||
|
|
const [users, setUsers] = useState<AdminUserSummary[]>([]);
|
|||
|
|
const [currentUser, setCurrentUser] = useState<AdminUserSummary | null>(null);
|
|||
|
|
const [loadingUsers, setLoadingUsers] = useState(false);
|
|||
|
|
const [previewLoading, setPreviewLoading] = useState(false);
|
|||
|
|
const [executing, setExecuting] = useState(false);
|
|||
|
|
const [pageError, setPageError] = useState("");
|
|||
|
|
const [successMessage, setSuccessMessage] = useState("");
|
|||
|
|
const [preview, setPreview] = useState<OwnerTransferPreview | null>(null);
|
|||
|
|
const [fromUserId, setFromUserId] = useState(() => {
|
|||
|
|
const storedUserId = getStoredCurrentUserId();
|
|||
|
|
return storedUserId ? String(storedUserId) : "";
|
|||
|
|
});
|
|||
|
|
const [toUserId, setToUserId] = useState("");
|
|||
|
|
const [targetPickerOpen, setTargetPickerOpen] = useState(false);
|
|||
|
|
const [targetPickerKeyword, setTargetPickerKeyword] = useState("");
|
|||
|
|
const [activeTab, setActiveTab] = useState<TransferTab>("opportunities");
|
|||
|
|
const [searchKeyword, setSearchKeyword] = useState("");
|
|||
|
|
const [selection, setSelection] = useState<SelectionState>(createEmptySelectionState);
|
|||
|
|
const [detailsExpanded, setDetailsExpanded] = useState(false);
|
|||
|
|
const [confirmState, setConfirmState] = useState<TransferConfirmState | null>(null);
|
|||
|
|
|
|||
|
|
const activeTenantId = getActiveTenantId();
|
|||
|
|
const tenantSelected = activeTenantId > 0;
|
|||
|
|
const numericFromUserId = fromUserId ? Number(fromUserId) : undefined;
|
|||
|
|
const numericToUserId = toUserId ? Number(toUserId) : undefined;
|
|||
|
|
const fromUser = useMemo(
|
|||
|
|
() => users.find((item) => item.userId === numericFromUserId) ?? currentUser,
|
|||
|
|
[currentUser, numericFromUserId, users],
|
|||
|
|
);
|
|||
|
|
const toUser = useMemo(
|
|||
|
|
() => users.find((item) => item.userId === numericToUserId) ?? null,
|
|||
|
|
[numericToUserId, users],
|
|||
|
|
);
|
|||
|
|
const selectedPreviewHasSalesConflict = Boolean(preview?.salesConflicts?.length);
|
|||
|
|
|
|||
|
|
const loadCurrentUser = useCallback(async () => {
|
|||
|
|
try {
|
|||
|
|
const profile = await getCurrentUser();
|
|||
|
|
const nextCurrentUser: AdminUserSummary = {
|
|||
|
|
userId: profile.userId,
|
|||
|
|
username: profile.username,
|
|||
|
|
displayName: profile.displayName || profile.username,
|
|||
|
|
status: profile.status,
|
|||
|
|
tenantId: profile.tenantId,
|
|||
|
|
};
|
|||
|
|
setCurrentUser(nextCurrentUser);
|
|||
|
|
if (profile.userId) {
|
|||
|
|
setFromUserId(String(profile.userId));
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
setCurrentUser(null);
|
|||
|
|
setPageError(error instanceof Error ? error.message : "获取当前登录账号失败");
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const loadUsers = useCallback(async () => {
|
|||
|
|
if (!tenantSelected) {
|
|||
|
|
setUsers([]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setLoadingUsers(true);
|
|||
|
|
setPageError("");
|
|||
|
|
try {
|
|||
|
|
const response = await listOwnerTransferTargetUsers();
|
|||
|
|
setUsers(response ?? []);
|
|||
|
|
} catch (error) {
|
|||
|
|
setUsers([]);
|
|||
|
|
setPageError(error instanceof Error ? error.message : "加载用户列表失败");
|
|||
|
|
} finally {
|
|||
|
|
setLoadingUsers(false);
|
|||
|
|
}
|
|||
|
|
}, [activeTenantId, tenantSelected]);
|
|||
|
|
|
|||
|
|
const loadPreview = useCallback(async (sourceUserId?: number, targetUserId?: number) => {
|
|||
|
|
if (!currentUser?.userId) {
|
|||
|
|
setPreview(null);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
!tenantSelected
|
|||
|
|
|| !sourceUserId
|
|||
|
|
|| !targetUserId
|
|||
|
|
|| sourceUserId <= 0
|
|||
|
|
|| targetUserId <= 0
|
|||
|
|
|| sourceUserId === targetUserId
|
|||
|
|
|| sourceUserId !== currentUser.userId
|
|||
|
|
) {
|
|||
|
|
setPreview(null);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setPreviewLoading(true);
|
|||
|
|
setPageError("");
|
|||
|
|
try {
|
|||
|
|
const response = await previewOwnerTransfer(sourceUserId, targetUserId);
|
|||
|
|
setPreview(response);
|
|||
|
|
} catch (error) {
|
|||
|
|
setPreview(null);
|
|||
|
|
setPageError(error instanceof Error ? error.message : "加载转移预检失败");
|
|||
|
|
} finally {
|
|||
|
|
setPreviewLoading(false);
|
|||
|
|
}
|
|||
|
|
}, [currentUser?.userId, tenantSelected]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void loadCurrentUser();
|
|||
|
|
}, [loadCurrentUser]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void loadUsers();
|
|||
|
|
}, [loadUsers]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void loadPreview(numericFromUserId, numericToUserId);
|
|||
|
|
}, [loadPreview, numericFromUserId, numericToUserId]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setSearchKeyword("");
|
|||
|
|
}, [activeTab, preview?.fromUserId, preview?.toUserId]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setSelection(createEmptySelectionState());
|
|||
|
|
}, [preview?.fromUserId, preview?.toUserId]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!isMobileViewport) {
|
|||
|
|
setDetailsExpanded(true);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setDetailsExpanded(false);
|
|||
|
|
}, [isMobileViewport, preview?.fromUserId, preview?.toUserId]);
|
|||
|
|
|
|||
|
|
const selectableUsers = useMemo(
|
|||
|
|
() => users.filter((user) => String(user.userId) !== fromUserId && user.status !== 0),
|
|||
|
|
[fromUserId, users],
|
|||
|
|
);
|
|||
|
|
const filteredSelectableUsers = useMemo(() => {
|
|||
|
|
const normalizedKeyword = targetPickerKeyword.trim().toLowerCase();
|
|||
|
|
if (!normalizedKeyword) {
|
|||
|
|
return selectableUsers;
|
|||
|
|
}
|
|||
|
|
return selectableUsers.filter((user) => {
|
|||
|
|
const haystack = `${user.displayName || ""} ${user.username || ""}`.toLowerCase();
|
|||
|
|
return haystack.includes(normalizedKeyword);
|
|||
|
|
});
|
|||
|
|
}, [selectableUsers, targetPickerKeyword]);
|
|||
|
|
|
|||
|
|
const filteredItems = useMemo(() => {
|
|||
|
|
if (!preview) {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
if (activeTab === "sales") {
|
|||
|
|
return filterTransferItems(preview.salesExpansions || [], searchKeyword);
|
|||
|
|
}
|
|||
|
|
if (activeTab === "channels") {
|
|||
|
|
return filterTransferItems(preview.channelExpansions || [], searchKeyword);
|
|||
|
|
}
|
|||
|
|
return filterTransferItems(preview.opportunities || [], searchKeyword);
|
|||
|
|
}, [activeTab, preview, searchKeyword]);
|
|||
|
|
|
|||
|
|
const selectedIdsForActiveTab = useMemo(() => {
|
|||
|
|
if (activeTab === "sales") {
|
|||
|
|
return selection.salesExpansionIds;
|
|||
|
|
}
|
|||
|
|
if (activeTab === "channels") {
|
|||
|
|
return selection.channelExpansionIds;
|
|||
|
|
}
|
|||
|
|
return selection.opportunityIds;
|
|||
|
|
}, [activeTab, selection.channelExpansionIds, selection.opportunityIds, selection.salesExpansionIds]);
|
|||
|
|
|
|||
|
|
const selectableFilteredItems = useMemo(() => {
|
|||
|
|
if (activeTab === "sales") {
|
|||
|
|
return filteredItems.filter((item) => !item.conflict);
|
|||
|
|
}
|
|||
|
|
return filteredItems;
|
|||
|
|
}, [activeTab, filteredItems]);
|
|||
|
|
|
|||
|
|
const totalSelectedCount = selection.opportunityIds.length + selection.salesExpansionIds.length + selection.channelExpansionIds.length;
|
|||
|
|
const activeTabSelectedCount = selectedIdsForActiveTab.length;
|
|||
|
|
const selectedOpportunityCount = selection.opportunityIds.length;
|
|||
|
|
const selectedSalesCount = selection.salesExpansionIds.length;
|
|||
|
|
const selectedChannelCount = selection.channelExpansionIds.length;
|
|||
|
|
const selectableFilteredIds = selectableFilteredItems.map((item) => item.id);
|
|||
|
|
const areAllFilteredItemsSelected = selectableFilteredIds.length > 0
|
|||
|
|
&& selectableFilteredIds.every((id) => selectedIdsForActiveTab.includes(id));
|
|||
|
|
const activePreviewCount = activeTab === "sales"
|
|||
|
|
? countLabel(preview?.salesExpansionCount)
|
|||
|
|
: activeTab === "channels"
|
|||
|
|
? countLabel(preview?.channelExpansionCount)
|
|||
|
|
: countLabel(preview?.opportunityCount);
|
|||
|
|
const primaryActionLabel = executing
|
|||
|
|
? "执行中..."
|
|||
|
|
: totalSelectedCount > 0
|
|||
|
|
? `转移已勾选 ${totalSelectedCount} 条`
|
|||
|
|
: "请选择转移数据";
|
|||
|
|
const bottomActionSummary = totalSelectedCount > 0
|
|||
|
|
? `已勾选 ${totalSelectedCount} 条待转移数据`
|
|||
|
|
: "请先勾选需要转移的数据";
|
|||
|
|
|
|||
|
|
const runTransfer = useCallback(async (payload: OwnerTransferPayload, successText: string) => {
|
|||
|
|
setExecuting(true);
|
|||
|
|
setPageError("");
|
|||
|
|
setSuccessMessage("");
|
|||
|
|
try {
|
|||
|
|
const result = await executeOwnerTransfer(payload);
|
|||
|
|
setSuccessMessage(
|
|||
|
|
`${successText} 本次共转移：商机 ${countLabel(result.transferredOpportunityCount)} 条、拓展销售人员 ${countLabel(result.transferredSalesExpansionCount)} 条、拓展渠道 ${countLabel(result.transferredChannelExpansionCount)} 条。`,
|
|||
|
|
);
|
|||
|
|
setSelection(createEmptySelectionState());
|
|||
|
|
await loadUsers();
|
|||
|
|
await loadPreview(payload.fromUserId, payload.toUserId);
|
|||
|
|
} catch (error) {
|
|||
|
|
setPageError(error instanceof Error ? error.message : "执行归属人转移失败");
|
|||
|
|
} finally {
|
|||
|
|
setExecuting(false);
|
|||
|
|
}
|
|||
|
|
}, [loadPreview, loadUsers]);
|
|||
|
|
|
|||
|
|
const confirmTransfer = useCallback(async () => {
|
|||
|
|
if (!confirmState) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await runTransfer(confirmState.payload, confirmState.successText);
|
|||
|
|
setConfirmState(null);
|
|||
|
|
}, [confirmState, runTransfer]);
|
|||
|
|
|
|||
|
|
const handleExecute = async () => {
|
|||
|
|
if (!numericFromUserId || !numericToUserId) {
|
|||
|
|
setPageError("请先选择原归属人和新归属人");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (numericFromUserId === numericToUserId) {
|
|||
|
|
setPageError("原归属人和新归属人不能相同");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (totalSelectedCount <= 0) {
|
|||
|
|
setPageError("请先勾选需要转移的数据");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setConfirmState({
|
|||
|
|
title: "确认执行转移？",
|
|||
|
|
description: "",
|
|||
|
|
payload: {
|
|||
|
|
fromUserId: numericFromUserId,
|
|||
|
|
toUserId: numericToUserId,
|
|||
|
|
transferOpportunities: selection.opportunityIds.length > 0,
|
|||
|
|
transferSalesExpansions: selection.salesExpansionIds.length > 0,
|
|||
|
|
transferChannelExpansions: selection.channelExpansionIds.length > 0,
|
|||
|
|
selection: {
|
|||
|
|
opportunityIds: selection.opportunityIds,
|
|||
|
|
salesExpansionIds: selection.salesExpansionIds,
|
|||
|
|
channelExpansionIds: selection.channelExpansionIds,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
successText: "已勾选数据转移完成。",
|
|||
|
|
confirmText: "确认转移",
|
|||
|
|
sourceLabel: getDisplayUserName(fromUser),
|
|||
|
|
targetLabel: getDisplayUserName(toUser),
|
|||
|
|
badges: [
|
|||
|
|
selectedOpportunityCount > 0 ? `商机 ${selectedOpportunityCount} 条` : "",
|
|||
|
|
selectedSalesCount > 0 ? `拓展销售 ${selectedSalesCount} 条` : "",
|
|||
|
|
selectedChannelCount > 0 ? `拓展渠道 ${selectedChannelCount} 条` : "",
|
|||
|
|
].filter(Boolean),
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSingleTransfer = async (kind: TransferKind, item: OwnerTransferItem) => {
|
|||
|
|
if (!numericFromUserId || !numericToUserId) {
|
|||
|
|
setPageError("请先选择原归属人和新归属人");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (kind === "sales" && item.conflict) {
|
|||
|
|
setPageError("目标归属人下已存在相同工号的拓展销售人员，请先处理冲突后再试");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const itemTypeLabel = kind === "sales" ? "拓展销售人员" : kind === "channel" ? "拓展渠道" : "商机";
|
|||
|
|
setConfirmState({
|
|||
|
|
title: "确认转移当前数据？",
|
|||
|
|
description: "",
|
|||
|
|
payload: {
|
|||
|
|
fromUserId: numericFromUserId,
|
|||
|
|
toUserId: numericToUserId,
|
|||
|
|
transferOpportunities: kind === "opportunity",
|
|||
|
|
transferSalesExpansions: kind === "sales",
|
|||
|
|
transferChannelExpansions: kind === "channel",
|
|||
|
|
selection: {
|
|||
|
|
opportunityIds: kind === "opportunity" ? [item.id] : [],
|
|||
|
|
salesExpansionIds: kind === "sales" ? [item.id] : [],
|
|||
|
|
channelExpansionIds: kind === "channel" ? [item.id] : [],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
successText: "单条归属人转移已完成。",
|
|||
|
|
confirmText: "确认单条转移",
|
|||
|
|
sourceLabel: getDisplayUserName(fromUser),
|
|||
|
|
targetLabel: getDisplayUserName(toUser),
|
|||
|
|
subjectLabel: `${itemTypeLabel} · ${item.name || "未命名对象"}`,
|
|||
|
|
badges: [itemTypeLabel],
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleItemSelection = (kind: TransferKind, itemId: number) => {
|
|||
|
|
const selectionKey = getSelectionKey(kind);
|
|||
|
|
setSelection((current) => {
|
|||
|
|
const currentIds = current[selectionKey];
|
|||
|
|
const nextIds = currentIds.includes(itemId)
|
|||
|
|
? currentIds.filter((id) => id !== itemId)
|
|||
|
|
: [...currentIds, itemId];
|
|||
|
|
return {
|
|||
|
|
...current,
|
|||
|
|
[selectionKey]: nextIds,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleToggleSelectAllFiltered = () => {
|
|||
|
|
const kind = getTransferTabKind(activeTab);
|
|||
|
|
const selectionKey = getSelectionKey(kind);
|
|||
|
|
setSelection((current) => {
|
|||
|
|
const currentIds = current[selectionKey];
|
|||
|
|
const nextIds = areAllFilteredItemsSelected
|
|||
|
|
? currentIds.filter((id) => !selectableFilteredIds.includes(id))
|
|||
|
|
: Array.from(new Set([...currentIds, ...selectableFilteredIds]));
|
|||
|
|
return {
|
|||
|
|
...current,
|
|||
|
|
[selectionKey]: nextIds,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleClearActiveSelection = () => {
|
|||
|
|
const kind = getTransferTabKind(activeTab);
|
|||
|
|
const selectionKey = getSelectionKey(kind);
|
|||
|
|
setSelection((current) => ({
|
|||
|
|
...current,
|
|||
|
|
[selectionKey]: [],
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const embeddedFooter = useMemo(() => {
|
|||
|
|
if (!embedded) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|||
|
|
<div className="min-w-0 sm:flex-1">
|
|||
|
|
<p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
|
|||
|
|
{toUser ? `转移给 ${toUser.displayName || toUser.username}` : "请选择新归属人"}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
|||
|
|
{bottomActionSummary}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => onClose?.()}
|
|||
|
|
className="crm-btn crm-btn-secondary"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => void handleExecute()}
|
|||
|
|
disabled={!tenantSelected || executing || previewLoading || totalSelectedCount <= 0}
|
|||
|
|
className="crm-btn crm-btn-primary disabled:cursor-not-allowed disabled:opacity-60"
|
|||
|
|
>
|
|||
|
|
{primaryActionLabel}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}, [
|
|||
|
|
bottomActionSummary,
|
|||
|
|
embedded,
|
|||
|
|
executing,
|
|||
|
|
handleExecute,
|
|||
|
|
onClose,
|
|||
|
|
previewLoading,
|
|||
|
|
primaryActionLabel,
|
|||
|
|
tenantSelected,
|
|||
|
|
toUser,
|
|||
|
|
totalSelectedCount,
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!embedded || !onFooterChange) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
onFooterChange(embeddedFooter);
|
|||
|
|
return () => onFooterChange(null);
|
|||
|
|
}, [embedded, embeddedFooter, onFooterChange]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={embedded ? "crm-section-stack" : "crm-page-stack"}>
|
|||
|
|
{!embedded ? (
|
|||
|
|
<header className="crm-page-header">
|
|||
|
|
<div className="crm-page-heading">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => navigate("/profile")}
|
|||
|
|
className="mb-3 inline-flex items-center gap-2 text-sm font-medium text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
|
|||
|
|
>
|
|||
|
|
<ArrowLeft className="h-4 w-4" />
|
|||
|
|
返回我的
|
|||
|
|
</button>
|
|||
|
|
<h1 className="crm-page-title">项目归属转移</h1>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{!tenantSelected ? (
|
|||
|
|
<div className="crm-alert crm-alert-info">
|
|||
|
|
请先切换到具体租户后再操作归属人转移。
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{pageError ? (
|
|||
|
|
<div className="crm-alert crm-alert-error">{pageError}</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{successMessage ? (
|
|||
|
|
<div className="crm-alert crm-alert-success">{successMessage}</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 10 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
className="crm-card crm-card-pad-lg rounded-2xl"
|
|||
|
|
>
|
|||
|
|
<div className="crm-section-stack">
|
|||
|
|
<div className="flex items-start justify-between gap-3">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-base font-semibold text-slate-900 dark:text-white">转移设置</h2>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div className={cn(
|
|||
|
|
"flex items-center justify-center rounded-2xl bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-300",
|
|||
|
|
isMobileViewport ? "h-10 w-10" : "h-11 w-11",
|
|||
|
|
)}>
|
|||
|
|
<ArrowRightLeft className="h-5 w-5" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="crm-form-grid">
|
|||
|
|
<label className="space-y-2">
|
|||
|
|
<span className="text-sm font-medium text-slate-700 dark:text-slate-300">新归属人</span>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setTargetPickerOpen(true)}
|
|||
|
|
disabled={!tenantSelected || loadingUsers}
|
|||
|
|
className="crm-btn-sm crm-input-text flex w-full items-center justify-between border border-slate-200 bg-white text-left outline-none transition-colors hover:border-slate-300 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-800 dark:bg-slate-900/50 dark:hover:border-slate-700"
|
|||
|
|
>
|
|||
|
|
<span className={toUser ? "break-anywhere text-slate-900 dark:text-white" : "crm-field-note"}>
|
|||
|
|
{toUser ? getDisplayUserName(toUser) : "请选择新的归属人"}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-slate-400">⌄</span>
|
|||
|
|
</button>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{selectedPreviewHasSalesConflict ? (
|
|||
|
|
<div className="rounded-2xl border border-amber-200 bg-amber-50/80 px-4 py-3 text-sm text-amber-900 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-100">
|
|||
|
|
存在拓展销售人员工号冲突，请先处理冲突，或仅勾选下方可转移的数据后再执行。
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
<motion.div
|
|||
|
|
initial={{ opacity: 0, y: 10 }}
|
|||
|
|
animate={{ opacity: 1, y: 0 }}
|
|||
|
|
transition={{ delay: 0.05 }}
|
|||
|
|
className="crm-card crm-card-pad-lg rounded-2xl"
|
|||
|
|
>
|
|||
|
|
<div className="crm-section-stack">
|
|||
|
|
<div className="flex items-start justify-between gap-3">
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<div className="flex items-center justify-between gap-3">
|
|||
|
|
<h2 className="text-base font-semibold text-slate-900 dark:text-white">转移预检</h2>
|
|||
|
|
<div className="flex shrink-0 items-center gap-3 text-sm">
|
|||
|
|
{preview ? (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleToggleSelectAllFiltered}
|
|||
|
|
disabled={selectableFilteredIds.length === 0}
|
|||
|
|
className="inline-flex h-8 items-center justify-center rounded-full border border-slate-200 bg-white px-3 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800 dark:hover:text-white"
|
|||
|
|
>
|
|||
|
|
{areAllFilteredItemsSelected ? "取消全选" : "全选"}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={handleClearActiveSelection}
|
|||
|
|
disabled={activeTabSelectedCount === 0}
|
|||
|
|
className="inline-flex h-8 items-center justify-center rounded-full border border-slate-200 bg-white px-3 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800 dark:hover:text-white"
|
|||
|
|
>
|
|||
|
|
清空
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
{previewLoading ? <p className="text-sm text-slate-400 dark:text-slate-500">加载中...</p> : null}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">从 {preview?.fromUserName || getDisplayUserName(fromUser)} 转移到 {preview?.toUserName || getDisplayUserName(toUser)} 的预检结果。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{!preview && !previewLoading ? (
|
|||
|
|
<div className="crm-empty-panel">选择原归属人和新归属人后，系统会显示当前可转移数量及冲突检查结果。</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{preview ? (
|
|||
|
|
<>
|
|||
|
|
{isMobileViewport ? (
|
|||
|
|
<div className="grid grid-cols-3 gap-2">
|
|||
|
|
{TAB_META.map((tab) => {
|
|||
|
|
const count = tab.key === "sales"
|
|||
|
|
? countLabel(preview.salesExpansionCount)
|
|||
|
|
: tab.key === "channels"
|
|||
|
|
? countLabel(preview.channelExpansionCount)
|
|||
|
|
: countLabel(preview.opportunityCount);
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
key={tab.key}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setActiveTab(tab.key)}
|
|||
|
|
className={cn(
|
|||
|
|
"rounded-xl border px-3 py-2.5 text-left shadow-sm transition-all",
|
|||
|
|
activeTab === tab.key
|
|||
|
|
? "border-violet-400 bg-violet-50 shadow-[0_8px_20px_rgba(124,58,237,0.12)] ring-1 ring-violet-200 dark:border-violet-400/50 dark:bg-violet-500/15 dark:ring-violet-500/20"
|
|||
|
|
: "border-slate-200 bg-slate-50/40 opacity-75 dark:border-slate-800 dark:bg-slate-800/20 dark:opacity-80",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<p
|
|||
|
|
className={cn(
|
|||
|
|
"text-[11px] font-medium",
|
|||
|
|
activeTab === tab.key
|
|||
|
|
? "text-violet-600 dark:text-violet-300"
|
|||
|
|
: "text-slate-400 dark:text-slate-500",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{tab.key === "opportunities" ? "商机" : tab.key === "sales" ? "销售" : "渠道"}
|
|||
|
|
</p>
|
|||
|
|
<p
|
|||
|
|
className={cn(
|
|||
|
|
"mt-1 text-xl font-bold leading-none",
|
|||
|
|
activeTab === tab.key
|
|||
|
|
? "text-violet-700 dark:text-violet-100"
|
|||
|
|
: "text-slate-500 dark:text-slate-300",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{count}
|
|||
|
|
</p>
|
|||
|
|
</button>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|||
|
|
{TAB_META.map((tab) => {
|
|||
|
|
const count = tab.key === "sales"
|
|||
|
|
? countLabel(preview.salesExpansionCount)
|
|||
|
|
: tab.key === "channels"
|
|||
|
|
? countLabel(preview.channelExpansionCount)
|
|||
|
|
: countLabel(preview.opportunityCount);
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
key={tab.key}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setActiveTab(tab.key)}
|
|||
|
|
className={cn(
|
|||
|
|
"rounded-2xl border p-4 text-left shadow-sm transition-all",
|
|||
|
|
activeTab === tab.key
|
|||
|
|
? "border-violet-400 bg-violet-50 shadow-[0_10px_24px_rgba(124,58,237,0.12)] ring-1 ring-violet-200 dark:border-violet-400/50 dark:bg-violet-500/15 dark:ring-violet-500/20"
|
|||
|
|
: "border-slate-200 bg-slate-50/50 dark:border-slate-800 dark:bg-slate-800/20",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<p
|
|||
|
|
className={cn(
|
|||
|
|
"text-xs font-medium uppercase tracking-[0.16em]",
|
|||
|
|
activeTab === tab.key
|
|||
|
|
? "text-violet-500 dark:text-violet-300"
|
|||
|
|
: "text-slate-400 dark:text-slate-500",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{tab.key === "opportunities" ? "商机数量" : tab.key === "sales" ? "拓展销售" : "拓展渠道"}
|
|||
|
|
</p>
|
|||
|
|
<p
|
|||
|
|
className={cn(
|
|||
|
|
"mt-2 text-2xl font-bold",
|
|||
|
|
activeTab === tab.key
|
|||
|
|
? "text-violet-700 dark:text-violet-100"
|
|||
|
|
: "text-slate-900 dark:text-white",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{count}
|
|||
|
|
</p>
|
|||
|
|
</button>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{!isMobileViewport || detailsExpanded || isMobileViewport ? (
|
|||
|
|
<>
|
|||
|
|
<div className={cn("gap-2", isMobileViewport ? "space-y-2" : "grid grid-cols-[minmax(0,1fr)_auto] items-center")}>
|
|||
|
|
<div className="relative">
|
|||
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={searchKeyword}
|
|||
|
|
onChange={(event) => setSearchKeyword(event.target.value)}
|
|||
|
|
placeholder="搜索名称或工号"
|
|||
|
|
className={cn(
|
|||
|
|
"crm-input-text w-full border border-slate-200 bg-white pl-10 outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50",
|
|||
|
|
isMobileViewport ? "crm-input-box" : "h-10 rounded-xl px-3 text-sm",
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{!isMobileViewport ? <div /> : null}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{activeTab === "sales" && preview.salesConflicts.length > 0 ? (
|
|||
|
|
<div className="rounded-2xl border border-amber-200 bg-amber-50/80 p-4 dark:border-amber-500/20 dark:bg-amber-500/10">
|
|||
|
|
<div className="flex items-start gap-3">
|
|||
|
|
<ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-300" />
|
|||
|
|
<div className="min-w-0">
|
|||
|
|
<p className="text-sm font-semibold text-amber-900 dark:text-amber-100">拓展销售人员工号冲突</p>
|
|||
|
|
<p className="mt-1 text-sm text-amber-800 dark:text-amber-200">目标归属人名下已存在相同工号时，系统会阻止执行“拓展销售人员”转移。</p>
|
|||
|
|
<div className="mt-3 space-y-2">
|
|||
|
|
{preview.salesConflicts.map((conflict) => (
|
|||
|
|
<div key={`${conflict.employeeNo}-${conflict.candidateName}`} className="rounded-xl bg-white/80 px-3 py-2 text-sm text-amber-900 dark:bg-slate-900/40 dark:text-amber-100">
|
|||
|
|
工号 {conflict.employeeNo || "-"} · 人员姓名 {conflict.candidateName || "-"}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<div className="px-1 text-xs leading-5 text-slate-500 dark:text-slate-400">
|
|||
|
|
当前页签已选 {activeTabSelectedCount} 条，全部已选 {totalSelectedCount} 条。
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{filteredItems.length > 0 ? filteredItems.map((item) => (
|
|||
|
|
<div
|
|||
|
|
key={`${activeTab}-${item.id}`}
|
|||
|
|
className={cn(
|
|||
|
|
"rounded-xl border px-3 py-3 transition-colors sm:px-4 sm:py-3",
|
|||
|
|
selectedIdsForActiveTab.includes(item.id) && !item.conflict
|
|||
|
|
? "ring-2 ring-violet-400/40"
|
|||
|
|
: "",
|
|||
|
|
item.conflict
|
|||
|
|
? "border-amber-200 bg-amber-50/70 dark:border-amber-500/20 dark:bg-amber-500/10"
|
|||
|
|
: "border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/50",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center justify-between gap-3">
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={selectedIdsForActiveTab.includes(item.id)}
|
|||
|
|
disabled={item.conflict}
|
|||
|
|
onChange={() => toggleItemSelection(getTransferTabKind(activeTab), item.id)}
|
|||
|
|
className="h-4 w-4 accent-violet-600 disabled:cursor-not-allowed"
|
|||
|
|
/>
|
|||
|
|
<p className="min-w-0 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">{item.name || "未命名对象"}</p>
|
|||
|
|
{activeTab === "sales" ? (
|
|||
|
|
<span className="shrink-0 text-xs text-slate-500 dark:text-slate-400">工号 {item.code || "-"}</span>
|
|||
|
|
) : null}
|
|||
|
|
{item.conflict ? (
|
|||
|
|
<span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-500/15 dark:text-amber-200">
|
|||
|
|
<AlertTriangle className="h-3.5 w-3.5" />
|
|||
|
|
有冲突
|
|||
|
|
</span>
|
|||
|
|
) : (
|
|||
|
|
<span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">
|
|||
|
|
<CheckCircle2 className="h-3.5 w-3.5" />
|
|||
|
|
可转移
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => void handleSingleTransfer(
|
|||
|
|
activeTab === "sales" ? "sales" : activeTab === "channels" ? "channel" : "opportunity",
|
|||
|
|
item,
|
|||
|
|
)}
|
|||
|
|
disabled={executing || item.conflict}
|
|||
|
|
title="单条转移"
|
|||
|
|
aria-label="单条转移"
|
|||
|
|
className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 transition-colors hover:border-violet-300 hover:text-violet-700 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-300 dark:hover:border-violet-500/40 dark:hover:text-violet-300"
|
|||
|
|
>
|
|||
|
|
<ArrowRightLeft className="h-4 w-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)) : (
|
|||
|
|
<div className="crm-empty-panel">暂无数据</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
</motion.div>
|
|||
|
|
|
|||
|
|
{targetPickerOpen ? (
|
|||
|
|
<>
|
|||
|
|
<div
|
|||
|
|
className="fixed inset-0 z-[140] bg-slate-900/35 backdrop-blur-sm dark:bg-slate-950/70"
|
|||
|
|
onClick={() => setTargetPickerOpen(false)}
|
|||
|
|
/>
|
|||
|
|
<div className="fixed inset-0 z-[150] flex items-center justify-center p-4">
|
|||
|
|
<div className="w-full max-w-xl rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-900">
|
|||
|
|
<div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-base font-semibold text-slate-900 dark:text-white">选择新归属人</p>
|
|||
|
|
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400">搜索并选择接收归属数据的账号</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setTargetPickerOpen(false)}
|
|||
|
|
className="rounded-full p-2 text-slate-400 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
|
|||
|
|
>
|
|||
|
|
<X className="h-5 w-5" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-3 px-5 py-4">
|
|||
|
|
<div className="relative">
|
|||
|
|
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={targetPickerKeyword}
|
|||
|
|
onChange={(event) => setTargetPickerKeyword(event.target.value)}
|
|||
|
|
placeholder="搜索姓名或账号"
|
|||
|
|
className="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 pl-10 pr-24 text-sm text-slate-700 outline-none transition-colors focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-800/70 dark:text-slate-100"
|
|||
|
|
/>
|
|||
|
|
{targetPickerKeyword ? (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setTargetPickerKeyword("")}
|
|||
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full px-2 py-1 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
|
|||
|
|
>
|
|||
|
|
清空搜索
|
|||
|
|
</button>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
<div className="max-h-[min(60vh,28rem)] space-y-2 overflow-y-auto pr-1">
|
|||
|
|
{filteredSelectableUsers.length > 0 ? filteredSelectableUsers.map((user) => {
|
|||
|
|
const selected = String(user.userId) === toUserId;
|
|||
|
|
return (
|
|||
|
|
<button
|
|||
|
|
key={user.userId}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setToUserId(String(user.userId));
|
|||
|
|
setTargetPickerOpen(false);
|
|||
|
|
}}
|
|||
|
|
className={cn(
|
|||
|
|
"flex w-full items-center justify-between rounded-2xl px-4 py-3 text-left text-sm transition-colors",
|
|||
|
|
selected
|
|||
|
|
? "bg-violet-600 text-white shadow-sm"
|
|||
|
|
: "border border-transparent text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<span className="break-anywhere">{getDisplayUserName(user)}</span>
|
|||
|
|
{selected ? <CheckCircle2 className="h-4 w-4 shrink-0" /> : null}
|
|||
|
|
</button>
|
|||
|
|
);
|
|||
|
|
}) : (
|
|||
|
|
<div className="rounded-2xl border border-dashed border-slate-200 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
|
|||
|
|
未找到匹配的归属人
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<AnimatePresence>
|
|||
|
|
{confirmState ? (
|
|||
|
|
<ActionDialog
|
|||
|
|
title={confirmState.title}
|
|||
|
|
description={confirmState.description}
|
|||
|
|
tone="violet"
|
|||
|
|
icon={<ArrowRightLeft className="h-6 w-6" />}
|
|||
|
|
confirmText={confirmState.confirmText}
|
|||
|
|
loading={executing}
|
|||
|
|
onClose={() => setConfirmState(null)}
|
|||
|
|
onConfirm={confirmTransfer}
|
|||
|
|
>
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{confirmState.subjectLabel ? (
|
|||
|
|
<div className="rounded-2xl border border-slate-200/80 bg-white/90 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
|
|||
|
|
<p className="text-xs font-medium uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500">
|
|||
|
|
转移对象
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">
|
|||
|
|
{confirmState.subjectLabel}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] sm:items-center">
|
|||
|
|
<div className="rounded-2xl border border-slate-200/80 bg-white/90 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
|
|||
|
|
<p className="text-xs text-slate-400 dark:text-slate-500">原归属人</p>
|
|||
|
|
<p className="mt-1 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">
|
|||
|
|
{confirmState.sourceLabel}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex justify-center py-1 text-violet-500 dark:text-violet-300">
|
|||
|
|
<ArrowRightLeft className="h-4 w-4" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="rounded-2xl border border-violet-200/80 bg-violet-50/80 px-4 py-3 dark:border-violet-500/20 dark:bg-violet-500/10">
|
|||
|
|
<p className="text-xs text-violet-600 dark:text-violet-300">新归属人</p>
|
|||
|
|
<p className="mt-1 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">
|
|||
|
|
{confirmState.targetLabel}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{confirmState.badges.length > 0 ? (
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{confirmState.badges.map((badge) => (
|
|||
|
|
<span
|
|||
|
|
key={badge}
|
|||
|
|
className="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300"
|
|||
|
|
>
|
|||
|
|
{badge}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<div className="text-xs leading-5 text-slate-500 dark:text-slate-400">
|
|||
|
|
确认后将立即生效，请确保选择无误。
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</ActionDialog>
|
|||
|
|
) : null}
|
|||
|
|
</AnimatePresence>
|
|||
|
|
|
|||
|
|
{!embedded && !isMobileViewport ? (
|
|||
|
|
<div className="w-full shrink-0 border-t border-slate-200/80 bg-slate-50/95 backdrop-blur dark:border-slate-800/80 dark:bg-slate-900/90">
|
|||
|
|
<div className="px-4 py-4 sm:px-0">
|
|||
|
|
<div className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-4 dark:border-slate-800 dark:bg-slate-900/60">
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
|
|||
|
|
{toUser ? `转移给 ${toUser.displayName || toUser.username}` : "请选择新归属人"}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
|||
|
|
{bottomActionSummary}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => void handleExecute()}
|
|||
|
|
disabled={!tenantSelected || executing || previewLoading || totalSelectedCount <= 0}
|
|||
|
|
className="crm-btn crm-btn-primary shrink-0 px-5 disabled:cursor-not-allowed disabled:opacity-60"
|
|||
|
|
>
|
|||
|
|
{primaryActionLabel}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{!embedded && isMobileViewport ? <div className="h-28" aria-hidden="true" /> : null}
|
|||
|
|
|
|||
|
|
{!embedded && isMobileViewport ? (
|
|||
|
|
<div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 px-4 pb-[calc(0.9rem+env(safe-area-inset-bottom))] pt-3 shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur dark:border-slate-800 dark:bg-slate-950/92">
|
|||
|
|
<div className="mx-auto flex max-w-screen-sm items-center gap-3">
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
|
|||
|
|
{toUser ? `转移给 ${toUser.displayName || toUser.username}` : "请选择新归属人"}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
|
|||
|
|
{bottomActionSummary}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => void handleExecute()}
|
|||
|
|
disabled={!tenantSelected || executing || previewLoading || totalSelectedCount <= 0}
|
|||
|
|
className="crm-btn crm-btn-primary shrink-0 px-5 disabled:cursor-not-allowed disabled:opacity-60"
|
|||
|
|
>
|
|||
|
|
{primaryActionLabel}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|