129 lines
3.5 KiB
TypeScript
129 lines
3.5 KiB
TypeScript
import { Box, HStack, VStack } from '@chakra-ui/react';
|
|
import type { OrgListItemType, OrgType } from '@fastgpt/global/support/user/team/org/type';
|
|
import Avatar from '@fastgpt/web/components/common/Avatar';
|
|
import { useToggle } from 'ahooks';
|
|
import { useState } from 'react';
|
|
import IconButton from './IconButton';
|
|
import { useUserStore } from '@/web/support/user/useUserStore';
|
|
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
|
import { getOrgList } from '@/web/support/user/team/org/api';
|
|
import { getChildrenByOrg } from '@fastgpt/service/support/permission/org/controllers';
|
|
import { getOrgChildrenPath } from '@fastgpt/global/support/user/team/org/constant';
|
|
|
|
function OrgTreeNode({
|
|
org,
|
|
selectedOrg,
|
|
setSelectedOrg,
|
|
index = 0,
|
|
movingOrg
|
|
}: {
|
|
org: OrgListItemType;
|
|
selectedOrg?: OrgListItemType;
|
|
setSelectedOrg: (org?: OrgListItemType) => void;
|
|
index?: number;
|
|
movingOrg: OrgListItemType;
|
|
}) {
|
|
const [isExpanded, toggleIsExpanded] = useToggle(index === 0);
|
|
const [canBeExpanded, setCanBeExpanded] = useState(true);
|
|
const { data: orgs = [], runAsync: getOrgs } = useRequest2(() =>
|
|
getOrgList({ orgId: org._id, withPermission: false })
|
|
);
|
|
const onClickExpand = async () => {
|
|
const data = await getOrgs();
|
|
if (data.length < 1) {
|
|
setCanBeExpanded(false);
|
|
}
|
|
toggleIsExpanded.toggle();
|
|
};
|
|
|
|
if (org._id === movingOrg._id) {
|
|
return <></>;
|
|
}
|
|
return (
|
|
<Box userSelect={'none'}>
|
|
<HStack
|
|
borderRadius="sm"
|
|
_hover={{ bg: 'myGray.100' }}
|
|
py={1}
|
|
pr={2}
|
|
pl={index === 0 ? '0.5rem' : `${1.75 * (index - 1) + 0.5}rem`}
|
|
cursor={'pointer'}
|
|
{...(selectedOrg?._id === org._id
|
|
? {
|
|
bg: 'primary.50 !important',
|
|
onClick: () => setSelectedOrg(undefined)
|
|
}
|
|
: {
|
|
onClick: () => setSelectedOrg(org)
|
|
})}
|
|
>
|
|
<IconButton
|
|
name={isExpanded ? 'common/downArrowFill' : 'common/rightArrowFill'}
|
|
color={'myGray.500'}
|
|
p={0}
|
|
w={'1.25rem'}
|
|
visibility={canBeExpanded ? 'visible' : 'hidden'}
|
|
onClick={(e) => {
|
|
onClickExpand();
|
|
e.stopPropagation();
|
|
}}
|
|
/>
|
|
<HStack
|
|
flex={'1 0 0'}
|
|
onClick={() => setSelectedOrg(org)}
|
|
cursor={'pointer'}
|
|
borderRadius={'xs'}
|
|
>
|
|
<Avatar src={org.avatar} w={'1.25rem'} borderRadius={'xs'} />
|
|
<Box>{org.name}</Box>
|
|
</HStack>
|
|
</HStack>
|
|
{isExpanded &&
|
|
orgs.length > 0 &&
|
|
orgs.map((child) => (
|
|
<Box key={child._id} mt={0.5}>
|
|
<OrgTreeNode
|
|
movingOrg={movingOrg}
|
|
org={child}
|
|
index={index + 1}
|
|
selectedOrg={selectedOrg}
|
|
setSelectedOrg={setSelectedOrg}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function OrgTree({
|
|
selectedOrg,
|
|
setSelectedOrg,
|
|
movingOrg
|
|
}: {
|
|
selectedOrg?: OrgListItemType;
|
|
setSelectedOrg: (org?: OrgListItemType) => void;
|
|
movingOrg: OrgListItemType;
|
|
}) {
|
|
const { userInfo } = useUserStore();
|
|
const root: OrgListItemType = {
|
|
_id: '',
|
|
path: '',
|
|
pathId: '',
|
|
name: userInfo?.team.teamName || '',
|
|
avatar: userInfo?.team.avatar || ''
|
|
} as any;
|
|
|
|
return (
|
|
<OrgTreeNode
|
|
movingOrg={movingOrg}
|
|
key={'root'}
|
|
org={root}
|
|
selectedOrg={selectedOrg}
|
|
setSelectedOrg={setSelectedOrg}
|
|
index={1}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default OrgTree;
|