push

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

@@ -0,0 +1,57 @@
+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,
+  };
+}