Function Tools

web/packages/tca-layout/src/modules/tools/index.tsx:25–144

()

const DEFAULT_SIZE = 50;

const Tools = () => {
  const history = useHistory();
  const { orgSid }: any = useParams();
  const editable = useOrgAdminPerm();

  const [visible, setVisible] = useState(false);
  const [data, setData] = useState<any[]>([]);
  const [pager, setPager] = useState({ ...DEFAULT_PAGER, pageSize: DEFAULT_SIZE });
  const { count, pageStart } = pager;
  const { searchParams } = useURLParams(filterFields);


  const getData = useCallback((pageStart: number, pageSize: number, params: any, isMore = false) => {
    getTools(orgSid, {
      offset: pageStart,
      limit: pageSize,
      ...params,
    }).then(({ results, count }: any) => {
      const list = results || [];
      setData(pre => (isMore ? [...pre, ...list] : list));
      setPager({
        count,
        pageSize,
        pageStart,
      });
    });
  }, [orgSid]);

  useEffect(() => {
    getData(DEFAULT_PAGER.pageStart, DEFAULT_SIZE, searchParams);
  }, [getData, searchParams]);

  const onScroll = (e: any) => {
    // 滚动条触底加载更多数据
    if (e.target.scrollTop + e.target.clientHeight === e.target.scrollHeight) {
      if (data.length !== count) {
        getData(pageStart + DEFAULT_SIZE, DEFAULT_SIZE, searchParams, true);
      }
    }
  };

  return (
    <>
      <PageHeader title={t('工具管理')} description={`共 ${count} 个工具，包含公开工具 + 团队可用工具，团队成员可使用工具规则，仅团队管理员能添加工具和规则`} action={editable && (
        <Button type='primary' onClick={() => {
          setVisible(true);
        }}>{t('创建工具')}</Button>
      )} />
      <Search fields={TOOL_SEARCH_FIELDS}
        searchParams={searchParams} callback={(params: any) => {
          getData(DEFAULT_PAGER.pageStart, DEFAULT_SIZE, params);
        }} />
      <div className={style.tools}>
        <div
          className={style.contentWrapper}
          onScrollCapture={onScroll}
        >
          <div className={style.content}>