chore: team, orgs, search and so on (#3807)

* feat: clb search support username, memberName, contacts

* feat: popup org names

* feat: update team member table

* feat: restore the member

* feat: search user in team member table

* feat: bind contact

* feat: export members

* feat: org tab could delete member

* feat: org table search

* feat: team notification account bind

* feat: permission tab search

* fix: wecom sso

* chore(init): copy notificationAccount to user.contact

* chore: adjust

* fix: ts error

* fix: useConfirm iconColor customization

* pref: fe

* fix: style

* fix: fix team member manage

* pref: enlarge team member pagesize

* pref: initv4822

* fix: pageSize

* pref: initscritpt

projects/app/src/pageComponents/account/team/MemberTable.tsx

@@ -11,15 +11,15 @@ import {
   Th,
   Thead,
   Tr,
-  useDisclosure
+  useDisclosure,
+  VStack
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { delRemoveMember } from '@/web/support/user/team/api';
+import { delRemoveMember, updateStatus } from '@/web/support/user/team/api';
 import Tag from '@fastgpt/web/components/common/Tag';
 import Icon from '@fastgpt/web/components/common/Icon';
-import GroupTags from '@/components/support/permission/Group/GroupTags';
 import { useContextSelector } from 'use-context-selector';
 import { TeamContext } from './context';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
@@ -29,9 +29,17 @@ import { useToast } from '@fastgpt/web/hooks/useToast';
 import { TeamErrEnum } from '@fastgpt/global/common/error/code/team';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { delLeaveTeam } from '@/web/support/user/team/api';
-import { postSyncMembers } from '@/web/support/user/api';
+import { GetSearchUserGroupOrg, postSyncMembers } from '@/web/support/user/api';
 import MyLoading from '@fastgpt/web/components/common/MyLoading';
-import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
+import {
+  TeamMemberRoleEnum,
+  TeamMemberStatusEnum
+} from '@fastgpt/global/support/user/team/constant';
+import format from 'date-fns/format';
+import OrgTags from '@/components/support/user/team/OrgTags';
+import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
+import { useState } from 'react';
+import { downloadFetch } from '@/web/common/system/utils';
 
 const InviteModal = dynamic(() => import('./InviteModal'));
 const TeamTagModal = dynamic(() => import('@/components/support/user/team/TeamTagModal'));
@@ -43,14 +51,14 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
   const { feConfigs, setNotSufficientModalType } = useSystemStore();
 
   const {
-    groups,
     refetchGroups,
     myTeams,
     refetchTeams,
     members,
     refetchMembers,
     onSwitchTeam,
-    MemberScrollData
+    MemberScrollData,
+    orgs
   } = useContextSelector(TeamContext, (v) => v);
 
   const {
@@ -64,8 +72,25 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
     type: 'delete'
   });
 
+  const { ConfirmModal: ConfirmRestoreMemberModal, openConfirm: openRestoreMember } = useConfirm({
+    type: 'common',
+    title: t('account_team:restore_tip_title'),
+    iconSrc: 'common/confirm/restoreTip',
+    iconColor: 'primary.500'
+  });
+
+  const [searchText, setSearchText] = useState<string>('');
   const isSyncMember = feConfigs.register_method?.includes('sync');
 
+  const { data: searchMembersData } = useRequest2(
+    () => GetSearchUserGroupOrg(searchText, { members: true, orgs: false, groups: false }),
+    {
+      manual: false,
+      throttleWait: 500,
+      refreshDeps: [searchText]
+    }
+  );
+
   const { runAsync: onLeaveTeam } = useRequest2(
     async () => {
       const defaultTeam = myTeams.find((item) => item.defaultTeam) || myTeams[0];
@@ -92,12 +117,28 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
     errorToast: t('account_team:sync_member_failed')
   });
 
+  const { runAsync: onRestore, loading: isUpdateInvite } = useRequest2(updateStatus, {
+    onSuccess() {
+      refetchMembers();
+    },
+    successToast: t('common:user.team.invite.Accepted'),
+    errorToast: t('common:user.team.invite.Reject')
+  });
+
+  const isLoading = isUpdateInvite || isSyncing;
+
   return (
     <>
-      {isSyncing && <MyLoading />}
+      {isLoading && <MyLoading />}
       <Flex justify={'space-between'} align={'center'} pb={'1rem'}>
         {Tabs}
-        <HStack>
+        <HStack alignItems={'center'}>
+          <Box width={'200px'}>
+            <SearchInput
+              placeholder={t('account_team:search_member')}
+              onChange={(e) => setSearchText(e.target.value)}
+            />
+          </Box>
           {userInfo?.team.permission.hasManagePer && feConfigs?.show_team_chat && (
             <Button
               variant={'whitePrimary'}
@@ -165,6 +206,23 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
               {t('account_team:user_team_leave_team')}
             </Button>
           )}
+          {userInfo?.team.permission.hasManagePer && (
+            <Button
+              variant={'whitePrimary'}
+              size="md"
+              borderRadius={'md'}
+              ml={3}
+              leftIcon={<MyIcon name="export" w={'16px'} />}
+              onClick={() => {
+                downloadFetch({
+                  url: '/api/proApi/support/user/team/member/export',
+                  filename: `${userInfo.team.teamName}-${format(new Date(), 'yyyyMMddHHmmss')}.csv`
+                });
+              }}
+            >
+              {t('account_team:export_members')}
+            </Button>
+          )}
         </HStack>
       </Flex>
 
@@ -177,45 +235,66 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
                   <Th borderLeftRadius="6px" bgColor="myGray.100">
                     {t('account_team:user_name')}
                   </Th>
-                  <Th bgColor="myGray.100">{t('account_team:member_group')}</Th>
-                  {!isSyncMember && (
-                    <Th borderRightRadius="6px" bgColor="myGray.100">
-                      {t('common:common.Action')}
-                    </Th>
-                  )}
+                  <Th bgColor="myGray.100">{t('account_team:contact')}</Th>
+                  <Th bgColor="myGray.100">{t('account_team:org')}</Th>
+                  <Th bgColor="myGray.100">{t('account_team:join_update_time')}</Th>
+                  <Th borderRightRadius="6px" bgColor="myGray.100">
+                    {t('common:common.Action')}
+                  </Th>
                 </Tr>
               </Thead>
               <Tbody>
-                {members?.map((item) => (
-                  <Tr key={item.userId} overflow={'unset'}>
-                    <Td>
-                      <HStack>
-                        <Avatar src={item.avatar} w={['18px', '22px']} borderRadius={'50%'} />
-                        <Box className={'textEllipsis'}>
-                          {item.memberName}
-                          {item.status === 'waiting' && (
-                            <Tag ml="2" colorSchema="yellow">
-                              {t('account_team:waiting')}
-                            </Tag>
-                          )}
-                        </Box>
-                      </HStack>
-                    </Td>
-                    <Td maxW={'300px'}>
-                      <GroupTags
-                        names={groups
-                          ?.filter((group) =>
-                            group.members.map((m) => m.tmbId).includes(item.tmbId)
-                          )
-                          .map((g) => g.name)}
-                        max={3}
-                      />
-                    </Td>
-                    {!isSyncMember && (
+                {(searchText && searchMembersData ? searchMembersData.members : members).map(
+                  (member) => (
+                    <Tr key={member.tmbId} overflow={'unset'}>
+                      <Td>
+                        <HStack>
+                          <Avatar src={member.avatar} w={['18px', '22px']} borderRadius={'50%'} />
+                          <Box className={'textEllipsis'}>
+                            {member.memberName}
+                            {member.status === 'waiting' && (
+                              <Tag ml="2" colorSchema="yellow">
+                                {t('account_team:waiting')}
+                              </Tag>
+                            )}
+                            {member.status === 'leave' && (
+                              <Tag ml="2" colorSchema="gray">
+                                {t('account_team:leave')}
+                              </Tag>
+                            )}
+                          </Box>
+                        </HStack>
+                      </Td>
+                      <Td maxW={'300px'}>{member.contact || '-'}</Td>
+                      <Td maxWidth="300px">
+                        {(() => {
+                          const memberOrgs = orgs.filter((org) =>
+                            org.members.find((v) => String(v.tmbId) === String(member.tmbId))
+                          );
+                          const memberPathIds = memberOrgs.map((org) =>
+                            (org.path + '/' + org.pathId).split('/').slice(0)
+                          );
+                          const memberOrgNames = memberPathIds.map((pathIds) =>
+                            pathIds.map((id) => orgs.find((v) => v.pathId === id)?.name).join('/')
+                          );
+                          return <OrgTags orgs={memberOrgNames} type="tag" />;
+                        })()}
+                      </Td>
+                      <Td maxW={'300px'}>
+                        <VStack gap={0}>
+                          <Box>{format(new Date(member.createTime), 'yyyy-MM-dd HH:mm:ss')}</Box>
+                          <Box>
+                            {member.updateTime
+                              ? format(new Date(member.updateTime), 'yyyy-MM-dd HH:mm:ss')
+                              : '-'}
+                          </Box>
+                        </VStack>
+                      </Td>
                       <Td>
                         {userInfo?.team.permission.hasManagePer &&
-                          item.role !== TeamMemberRoleEnum.owner &&
-                          item.tmbId !== userInfo?.team.tmbId && (
+                          member.role !== TeamMemberRoleEnum.owner &&
+                          member.tmbId !== userInfo?.team.tmbId &&
+                          (member.status !== TeamMemberStatusEnum.leave ? (
                             <Icon
                               name={'common/trash'}
                               cursor={'pointer'}
@@ -229,24 +308,50 @@ function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
                               onClick={() => {
                                 openRemoveMember(
                                   () =>
-                                    delRemoveMember(item.tmbId).then(() =>
+                                    delRemoveMember(member.tmbId).then(() =>
                                       Promise.all([refetchGroups(), refetchMembers()])
                                     ),
                                   undefined,
                                   t('account_team:remove_tip', {
-                                    username: item.memberName
+                                    username: member.memberName
                                   })
                                 )();
                               }}
                             />
-                          )}
+                          ) : (
+                            <Icon
+                              name={'common/confirm/restoreTip'}
+                              cursor={'pointer'}
+                              w="1rem"
+                              p="1"
+                              borderRadius="sm"
+                              _hover={{
+                                color: 'primary.500',
+                                bgColor: 'myGray.100'
+                              }}
+                              onClick={() => {
+                                openRestoreMember(
+                                  () =>
+                                    onRestore({
+                                      tmbId: member.tmbId,
+                                      status: TeamMemberStatusEnum.active
+                                    }),
+                                  undefined,
+                                  t('account_team:restore_tip', {
+                                    username: member.memberName
+                                  })
+                                )();
+                              }}
+                            />
+                          ))}
                       </Td>
-                    )}
-                  </Tr>
-                ))}
+                    </Tr>
+                  )
+                )}
               </Tbody>
             </Table>
             <ConfirmRemoveMemberModal />
+            <ConfirmRestoreMemberModal />
           </TableContainer>
         </MemberScrollData>
       </Box>