SaaS-lib/lib/component/table/use-table-refresh.ts

import { onBeforeUnmount } from 'vue';
interface UseTableRefresh {
  reload: Function;
  props: Recordable;
}
export function useTableRefresh({ props, reload }: UseTableRefresh) {
  let refreshInterval: NodeJS.Timer;

  /**
   * 页面自动刷新函数，第一次触发为请求时候
   * @param immediate
   */
  function delayFetch(immediate = false) {
    const { refreshTime } = props;
    if (refreshTime > 0) {
      console.log(`页面自动刷新开启，间隔${refreshTime}秒`);
      refreshInterval && clearInterval(refreshInterval);
      refreshInterval = setInterval(reload.bind(undefined, false), refreshTime * 1000);
      immediate && reload.bind(undefined, false)();
    }
  }

  /**
   * 清除定时器
   */
  function clearRefreshInterval() {
    const { refreshTime } = props;
    if (refreshTime > 0) {
      console.log(`页面自动刷新停止`);
      refreshInterval && clearInterval(refreshInterval);
    }
  }

  /**
   * 页面切换事件
   */
  function visibilitychange() {
    if (document.visibilityState === 'visible') {
      delayFetch(true);
    } else {
      console.log(`转入后台`);
      clearRefreshInterval();
    }
  }

  document.addEventListener('visibilitychange', visibilitychange);

  onBeforeUnmount(() => {
    console.log(`页面退出`);
    clearRefreshInterval();
    document.removeEventListener('visibilitychange', visibilitychange);
  });

  return {
    delayFetch,
  };
}