add log search

Author: gggaaallleee

projects/app/src/pageComponents/account/team/OperationLog/index.tsx

@@ -8,41 +8,134 @@ import {
   Td,
   Th,
   Thead,
-  Tr
+  Tr,
+  HStack
 } from '@chakra-ui/react';
-import { useState } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'next-i18next';
 import MyBox from '@fastgpt/web/components/common/MyBox';
-import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
 import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
 import { getOperationLogs } from '@/web/support/user/team/operantionLog/api';
 import { TeamPermission } from '@fastgpt/global/support/permission/user/controller';
 import { operationLogI18nMap } from '@fastgpt/service/support/operationLog/constants';
 import { OperationLogEventEnum } from '@fastgpt/global/support/operationLog/constants';
 import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time';
 import UserBox from '@fastgpt/web/components/common/UserBox';
+import MultipleSelect, {
+  useMultipleSelect
+} from '@fastgpt/web/components/common/MySelect/MultipleSelect';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import { getTeamMembers } from '@/web/support/user/team/api';
 
 function OperationLogTable({ Tabs }: { Tabs: React.ReactNode }) {
   const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useState<{
+    tmbIds?: string[];
+    events?: OperationLogEventEnum[];
+  }>({});
+
+  const {
+    value: selectedTmbIds,
+    setValue: setSelectedTmbIds,
+    isSelectAll: isSelectAllTmb,
+    setIsSelectAll: setIsSelectAllTmb
+  } = useMultipleSelect<string>();
+
+  const {
+    value: selectedEvents,
+    setValue: setSelectedEvents,
+    isSelectAll: isSelectAllEvent,
+    setIsSelectAll: setIsSelectAllEvent
+  } = useMultipleSelect<OperationLogEventEnum>();
+
+  const { data: members, ScrollData } = useScrollPagination(getTeamMembers, {});
+  const tmbList = useMemo(
+    () =>
+      members.map((item) => ({
+        label: (
+          <HStack spacing={1} color={'myGray.500'}>
+            <Avatar src={item.avatar} w={'1.2rem'} mr={1} rounded={'full'} />
+            <Box>{item.memberName}</Box>
+          </HStack>
+        ),
+        value: item.tmbId
+      })),
+    [members]
+  );
+
+  const eventOptions = useMemo(
+    () =>
+      Object.values(OperationLogEventEnum).map((event) => ({
+        label: t(operationLogI18nMap[event].typeLabel),
+        value: event
+      })),
+    [t]
+  );
 
-  const [searchKey, setSearchKey] = useState<string>('');
   const {
     data: operationLogs = [],
     isLoading: loadingLogs,
     ScrollData: LogScrollData
   } = useScrollPagination(getOperationLogs, {
     pageSize: 20,
-    refreshDeps: [searchKey],
     throttleWait: 500,
-    debounceWait: 200
+    debounceWait: 200,
+    refreshDeps: [searchParams],
+    params: searchParams
   });
 
+  useEffect(() => {
+    setSearchParams({
+      tmbIds: selectedTmbIds.length > 0 && !isSelectAllTmb ? selectedTmbIds : undefined,
+      events: selectedEvents.length > 0 && !isSelectAllEvent ? selectedEvents : undefined
+    });
+  }, [selectedTmbIds, selectedEvents, isSelectAllTmb, isSelectAllEvent]);
+
   const isLoading = loadingLogs;
 
   return (
     <>
-      <Flex justify={'space-between'} align={'center'} pb={'1rem'}>
+      <Flex justify={'flex-start'} align={'center'} pb={'1rem'} gap={2} wrap="wrap">
         {Tabs}
+        <Flex alignItems={'center'} gap={2}>
+          <Box fontSize={'mini'} fontWeight={'medium'} color={'myGray.900'}>
+            {t('account_team:log_user')}
+          </Box>
+          <Box>
+            <MultipleSelect<string>
+              list={tmbList}
+              value={selectedTmbIds}
+              onSelect={(val) => {
+                setSelectedTmbIds(val as string[]);
+              }}
+              itemWrap={false}
+              height={'32px'}
+              bg={'myGray.50'}
+              w={'160px'}
+              ScrollData={ScrollData}
+              isSelectAll={isSelectAllTmb}
+              setIsSelectAll={setIsSelectAllTmb}
+            />
+          </Box>
+        </Flex>
+        <Flex alignItems={'center'} gap={2}>
+          <Box fontSize={'mini'} fontWeight={'medium'} color={'myGray.900'}>
+            {t('account_team:log_type')}
+          </Box>
+          <Box>
+            <MultipleSelect
+              list={eventOptions}
+              value={selectedEvents}
+              onSelect={setSelectedEvents}
+              isSelectAll={isSelectAllEvent}
+              setIsSelectAll={setIsSelectAllEvent}
+              itemWrap={false}
+              height={'32px'}
+              bg={'myGray.50'}
+              w={'160px'}
+            />
+          </Box>
+        </Flex>
       </Flex>
 
       <MyBox isLoading={isLoading} flex={'1 0 0'} overflow={'auto'}>

projects/app/src/web/support/user/team/operantionLog/api.ts

@@ -1,8 +1,13 @@
 import { GET, POST, PUT } from '@/web/common/api/request';
 import type { PaginationProps, PaginationResponse } from '@fastgpt/web/common/fetch/type';
 import type { OperationListItemType } from '@fastgpt/global/support/operationLog/type';
-
-export const getOperationLogs = (props: PaginationProps<PaginationProps>) =>
+import { OperationLogEventEnum } from '@fastgpt/global/support/operationLog/constants';
+export const getOperationLogs = (
+  props: PaginationProps & {
+    tmbIds?: string[];
+    events?: OperationLogEventEnum[];
+  }
+) =>
   POST<PaginationResponse<OperationListItemType>>(
     `/proApi/support/user/team/operationLog/list`,
     props