feats

package.json

@@ -47,6 +47,7 @@
     "@tarojs/shared": "3.5.7",
     "@tarojs/taro": "3.5.7",
     "@tarojs/taro-h5": "3.5.7",
+    "@zjxpcyc/js_event": "^1.0.0",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
     "echarts": "5.4.1",
     "echarts-for-weixin": "^1.0.2",

src/components/PowerList/index.jsx

@@ -58,18 +58,18 @@ export default React.forwardRef((props, ref) => {
     return queryData({pageNum : pageNumRef.current});
   }, [queryData]);
 
-  // React.useEffect(() => {
-  //   refresh();
-  // }, [refresh]);
+  useShow(() => {
+    refresh();
+  })
+
+  React.useEffect(() => {
+    refresh();
+  }, [refresh]);
 
   React.useImperativeHandle(ref, () => ({
     refresh,
     updateData: (dt) => setList(dt),
   }));
-
-  useShow(() => {
-    refresh();
-  }, [refresh]);
   
   return (
     <PowerScrollView

src/layouts/hooks/useHide.js

@@ -0,0 +1,34 @@
+import React from "react";
+import evtBus from '@/utils/event_bus';
+
+/**
+ * 页面显示, 隐藏 hook, 可以在 component 中使用
+ */
+export default (fn, deps) => {
+  const fnRef = React.useRef();
+  fnRef.current = fn;
+
+  const [evt, func] = React.useMemo(() => {
+    const evt1 = evtBus.current();
+    const func1 = () => fnRef.current();
+
+    evt1.addEventListener('hide', func1);
+    evt1.addEventListener('unload', func1);
+
+    return [
+      evt1,
+      func1,
+    ];
+  }, []);
+
+  React.useEffect(() => {
+    evt.addEventListener('hide', func);
+    evt.addEventListener('unload', func);
+
+    return () => {
+      evt.removeEventListener('hide', func);
+      evt.removeEventListener('unload', func);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}

src/layouts/hooks/useShow.js

@@ -1,22 +1,31 @@
 import React from "react";
-import { useModel } from '@/store';
+import evtBus from '@/utils/event_bus';
 
 /**
  * 页面显示, 隐藏 hook, 可以在 component 中使用
  */
-export default (fn, deps = []) => {
+export default (fn, deps) => {
   const fnRef = React.useRef();
   fnRef.current = fn;
 
-  const { getPageCtx } = useModel('page');
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const ctx = React.useMemo(getPageCtx, []);
-  const { show } = React.useContext(ctx);
+  const [evt, func] = React.useMemo(() => {
+    const evt1 = evtBus.current();
+    const func1 = () => console.log('--show-->') || fnRef.current();
+
+    evt1.addEventListener('show', func1);
+
+    return [
+      evt1,
+      func1,
+    ];
+  }, []);
 
   React.useEffect(() => {
-    if (show) {
-      fnRef.current();
-    }
+    evt.addEventListener('show', func);
+
+    return () => {
+      evt.removeEventListener('show', func);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [show, ...deps]);
+  }, deps);
 }

src/layouts/index.jsx

@@ -5,6 +5,7 @@ import { useModel } from '@/store';
 import { Loading, Notify, Dialog } from '@antmjs/vantui';
 import NavLoading from '@/components/NavLoading';
 import Auth from '@/components/Auth';
+import evtBus from '@/utils/event_bus';
 import TabBar from './TabBar';
 import laySty from './layout.module.less';
 
@@ -12,18 +13,12 @@ export default (props) => {
   const { className, style, roles, tabBar = false, loading } = props;
 
   const { person, user, duty } = useModel('user');
-  const { setPageCtx } = useModel('page');
-  const [pageShow, setPageShow] = React.useState(false);
-  const PageContext = React.useMemo(() => {
-    const ctx = React.createContext({show: false});
-    setPageCtx(ctx);
+  const containerClass = `${laySty['page-conatiner']} ${tabBar ? laySty['with-tabbar'] : ''} ${className}`;
 
-    return ctx;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const evt = React.useMemo(() => {
+    return evtBus.current();
   }, []);
 
-  const containerClass = `${laySty['page-conatiner']} ${tabBar ? laySty['with-tabbar'] : ''} ${className}`;
-
   React.useEffect(() => {
     if (person && !user) {
       const currentPage = Taro.getCurrentPages().slice().pop();
@@ -45,18 +40,23 @@ export default (props) => {
     // useDidShow 比 React Hook 要早
     // 所以使用 nextTick
     Taro.nextTick(() => {
-      setPageShow(true);
+      evt.dispatchEvent('show');
     });
   });
 
   Taro.useDidHide(() => {
     Taro.nextTick(() => {
-      setPageShow(false);
+      evt.dispatchEvent('hide');
+    });
+  })
+
+  Taro.useUnload(() => {
+    Taro.nextTick(() => {
+      evt.dispatchEvent('unload');
     });
   })
 
   return (
-    <PageContext.Provider value={{ show: pageShow }}>
       <View className={laySty['page-wrapper']}>
         <Notify id="vanNotify" />
         <Dialog id="vanDialog" />
@@ -85,6 +85,5 @@ export default (props) => {
           tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} duty={duty} />
         }
       </View>
-    </PageContext.Provider>
   )
 }

src/pages/home/components/StatCard.jsx

@@ -17,11 +17,11 @@ export default React.forwardRef((props, ref) => {
     ].filter(Boolean).join(' ');
   }, [duty])
 
-  // React.useEffect(() => {
-  //   if (duty) {
-  //     getIndexData(duty).then(setList);
-  //   }
-  // }, [duty]);
+  React.useEffect(() => {
+    if (duty) {
+      getIndexData(duty).then(setList);
+    }
+  }, [duty]);
 
   React.useImperativeHandle(ref, () => ({
     refresh: () => {

src/pages/issue/list/index.jsx

@@ -22,25 +22,35 @@ export default (props) => {
   const router = Taro.useRouter();
   const { mine = '' } = router.params;
 
+  const [active, setActive] = React.useState(0);
+
   const onClick = (item) => {
     Taro.navigateTo({
       url: `/pages/issue/edit/index?id=${item.issueId}`
     })
   }
 
+  const onTabChange = (e) => {
+    const { index } = e.detail;
+    setActive(index)
+  }
+
   return (
     <Page roles={[ROLE_INSPECTOR]}>
-      <Tabs sticky>
+      <Tabs sticky onChange={onTabChange}>
         <Tab title="全部" style={tabStyle}>
-          <PowerList
-            request={getTaIssue}
-            params={{ mine }}
-            renderItem={(item) => (
-              <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
-            )}
-          />
+          {active == 0 && (
+            <PowerList
+              request={getTaIssue}
+              params={{ mine }}
+              renderItem={(item) => (
+                <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
+              )}
+            />
+          )}
         </Tab>
         <Tab title="未交办" style={tabStyle}>
+        {active == 1 && (
           <PowerList
             request={getTaIssue}
             params={{ mine, bizStatus: PROCESS_START }}
@@ -48,8 +58,10 @@ export default (props) => {
               <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
             )}
           />
+          )}
         </Tab>
         <Tab title="已交办" style={tabStyle}>
+          {active == 2 && (
           <PowerList
             request={getTaIssue}
             params={{ mine, bizStatus: PROCESS_ASSIGNED }}
@@ -57,8 +69,10 @@ export default (props) => {
               <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
             )}
           />
+          )}
         </Tab>
         <Tab title="已办结" style={tabStyle}>
+          {active == 3 && (
           <PowerList
             request={getTaIssue}
             params={{ mine, bizStatus: PROCESS_END }}
@@ -66,8 +80,10 @@ export default (props) => {
               <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
             )}
           />
+          )}
         </Tab>
         <Tab title="已逾期" style={tabStyle}>
+          {active == 4 && (
           <PowerList
             request={getTaIssue}
             params={{ mine, bizStatus: 'expired' }}
@@ -75,8 +91,10 @@ export default (props) => {
               <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
             )}
           />
+          )}
         </Tab>
         <Tab title="已打回" style={tabStyle}>
+          {active == 5 && (
           <PowerList
             request={getTaIssue}
             params={{ mine, bizStatus: 'reject' }}
@@ -84,6 +102,7 @@ export default (props) => {
               <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
             )}
           />
+          )}
         </Tab>
       </Tabs>
     </Page>

src/utils/event_bus.js

@@ -0,0 +1,38 @@
+import Taro from '@tarojs/taro';
+import createEvent from "@zjxpcyc/js_event";
+
+function evtBus() {
+  const bus = {};
+
+  const currentPath = () => {
+    const currentPage = Taro.getCurrentPages().slice().pop();
+    return currentPage.route;
+  }
+
+  // 没有则新建一个
+  const current = () => {
+    const path = currentPath();
+    const target = bus[path];
+    
+    if (target) {
+      return target;
+    }
+
+    const evt = createEvent();
+    bus[path] = evt;
+    return evt;
+  }
+
+  const remove = () => {
+    const path = currentPath();
+    delete bus[path];
+  }
+
+  return {
+    remove,
+    current,
+  }
+}
+
+const bus = evtBus();
+export default bus;

yarn.lock

@@ -2255,10 +2255,15 @@
   resolved "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zjxpcyc/js_event@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/@zjxpcyc/js_event/-/js_event-1.0.0.tgz#25688d9ac263700a8ed8d702c1517bcd827934d1"
+  integrity sha512-Nz9bHp0DcdWbgNQQ54uFXoAONvOcrzzqbNUxMp6GTOWP4y14jOZowsLwb1mYNcVxBlkar4Ds0WTIoRyx8sOpRw==
+
 "@zjxpcyc/react-tiny-store@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/-/react-tiny-store-2.0.1.tgz#a83813d3ebd90050eeb0238af16fa355c034ab40"
-  integrity sha512-+MTTcQ9aU8OMl7YrmX8UVnM5qUDktdHl0wpxmI5dVIwZxvHsKRKZuQn+ExOeCvJAVC2l+ubS7afT9rzTHPuPrA==
+  version "2.0.3"
+  resolved "https://registry.npmmirror.com/@zjxpcyc/react-tiny-store/-/react-tiny-store-2.0.3.tgz#99cc712c2bc1cecc2b5bdaf2bb15cf3a60a4fbbe"
+  integrity sha512-YL0s2wlxfF3QrGy4J7PlU2HUtVUOZMMUeTWx2gEKoEtKjLVtRxq4+8gGZA4K4ZYvbAyZ9PHqc1hi8gv7gQ8k5Q==
 
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"