diff --git a/nkebao/src/components/FriendSelection/data.ts b/nkebao/src/components/FriendSelection/data.ts index 5a7e2cbd5..42f57f743 100644 --- a/nkebao/src/components/FriendSelection/data.ts +++ b/nkebao/src/components/FriendSelection/data.ts @@ -5,3 +5,23 @@ export interface FriendSelectionItem { avatar: string; [key: string]: any; } + +// 组件属性接口 +export interface FriendSelectionProps { + selectedOptions: FriendSelectionItem[]; + onSelect: (friends: FriendSelectionItem[]) => void; + deviceIds?: string[]; + enableDeviceFilter?: boolean; + placeholder?: string; + className?: string; + visible?: boolean; // 新增 + onVisibleChange?: (visible: boolean) => void; // 新增 + selectedListMaxHeight?: number; + showInput?: boolean; + showSelectedList?: boolean; + readonly?: boolean; + onConfirm?: ( + selectedIds: number[], + selectedItems: FriendSelectionItem[], + ) => void; // 新增 +} diff --git a/nkebao/src/components/FriendSelection/index.tsx b/nkebao/src/components/FriendSelection/index.tsx index c416d0114..51fcc382f 100644 --- a/nkebao/src/components/FriendSelection/index.tsx +++ b/nkebao/src/components/FriendSelection/index.tsx @@ -7,38 +7,11 @@ import style from "./index.module.scss"; import Layout from "@/components/Layout/Layout"; import PopupHeader from "@/components/PopuLayout/header"; import PopupFooter from "@/components/PopuLayout/footer"; - -// 微信好友接口类型 -interface WechatFriend { - id: string; - nickname: string; - wechatId: string; - avatar: string; - customer: string; -} - -// 组件属性接口 -interface FriendSelectionProps { - selectedFriends: string[]; - onSelect: (friends: string[]) => void; - onSelectDetail?: (friends: WechatFriend[]) => void; - deviceIds?: string[]; - enableDeviceFilter?: boolean; - placeholder?: string; - className?: string; - visible?: boolean; // 新增 - onVisibleChange?: (visible: boolean) => void; // 新增 - selectedListMaxHeight?: number; - showInput?: boolean; - showSelectedList?: boolean; - readonly?: boolean; - onConfirm?: (selectedIds: string[], selectedItems: WechatFriend[]) => void; // 新增 -} +import { FriendSelectionProps, FriendSelectionItem } from "./data"; export default function FriendSelection({ - selectedFriends, + selectedOptions, onSelect, - onSelectDetail, deviceIds = [], enableDeviceFilter = true, placeholder = "选择微信好友", @@ -52,7 +25,7 @@ export default function FriendSelection({ onConfirm, }: FriendSelectionProps) { const [popupVisible, setPopupVisible] = useState(false); - const [friends, setFriends] = useState([]); + const [friends, setFriends] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const [currentPage, setCurrentPage] = useState(1); const [totalPages, setTotalPages] = useState(1); @@ -125,54 +98,37 @@ export default function FriendSelection({ }; // 处理好友选择 - const handleFriendToggle = (friendId: string) => { + const handleFriendToggle = (friend: FriendSelectionItem) => { if (readonly) return; - const newSelectedFriends = selectedFriends.includes(friendId) - ? selectedFriends.filter(id => id !== friendId) - : [...selectedFriends, friendId]; + const newSelectedFriends = selectedOptions + .map(v => v.id) + .includes(friend.id) + ? selectedOptions.filter(v => v.id !== friend.id) + : selectedOptions.concat(friend); onSelect(newSelectedFriends); - - // 如果有 onSelectDetail 回调,传递完整的好友对象 - if (onSelectDetail) { - const selectedFriendObjs = friends.filter(friend => - newSelectedFriends.includes(friend.id), - ); - onSelectDetail(selectedFriendObjs); - } }; // 获取显示文本 const getDisplayText = () => { - if (selectedFriends.length === 0) return ""; - return `已选择 ${selectedFriends.length} 个好友`; + if (selectedOptions.length === 0) return ""; + return `已选择 ${selectedOptions.length} 个好友`; }; - // 获取已选好友详细信息 - const selectedFriendObjs = [ - ...friends.filter(friend => selectedFriends.includes(friend.id)), - ...selectedFriends - .filter(id => !friends.some(friend => friend.id === id)) - .map(id => ({ - id, - nickname: id, - wechatId: id, - avatar: "", - customer: "", - })), - ]; - // 删除已选好友 - const handleRemoveFriend = (id: string) => { + const handleRemoveFriend = (id: number) => { if (readonly) return; - onSelect(selectedFriends.filter(d => d !== id)); + onSelect(selectedOptions.filter(v => v.id !== id)); }; // 确认选择 const handleConfirm = () => { if (onConfirm) { - onConfirm(selectedFriends, selectedFriendObjs); + onConfirm( + selectedOptions.map(v => v.id), + selectedOptions, + ); } setRealVisible(false); }; @@ -198,7 +154,7 @@ export default function FriendSelection({ )} {/* 已选好友列表窗口 */} - {showSelectedList && selectedFriendObjs.length > 0 && ( + {showSelectedList && selectedOptions.length > 0 && (
- {selectedFriendObjs.map(friend => ( + {selectedOptions.map(friend => (
setRealVisible(false)} onConfirm={handleConfirm} @@ -298,17 +254,17 @@ export default function FriendSelection({