Browse Source

feat: 首页采购单列表对接

xyh 2 years ago
parent
commit
b2924c4a4b

+ 20 - 6
packages/app/src/pages/home/main/hooks.tsx

@@ -8,6 +8,16 @@ import {DragEndEvent} from '@dnd-kit/core';
 import {arrayMove} from '@dnd-kit/sortable';
 import {shallowEqual} from '@utils';
 
+(window as any).tabAddDispatch = function (options: {
+  key: string;
+  url: string;
+  label: string;
+}) {
+  const {dispatch} = tabStore.getState();
+
+  dispatch({type: 'ADD', payload: options});
+};
+
 export type Tab = {
   key: string;
   label: ReactNode;
@@ -16,12 +26,16 @@ export type Tab = {
 export function useTabItems() {
   const {host} = location;
 
-  const {originalTab, dispatch} = useStore(tabStore, function (state) {
-    return {
-      dispatch: state.dispatch,
-      originalTab: state.tabList,
-    };
-  });
+  const {originalTab, dispatch} = useStore(
+    tabStore,
+    function (state) {
+      return {
+        dispatch: state.dispatch,
+        originalTab: state.tabList,
+      };
+    },
+    shallowEqual,
+  );
 
   const tabs = useMemo(
     function () {

+ 56 - 0
packages/app/src/pages/main/date/hooks.ts

@@ -0,0 +1,56 @@
+import {getReceiveOrderList} from '@apis';
+import {PURCHASE_PATH} from '@routes';
+import {menuStore} from '@stores';
+import {useQuery} from '@tanstack/react-query';
+import {Dayjs} from 'dayjs';
+import {find} from 'lodash-es';
+import {useMemo} from 'react';
+import {useStore} from 'zustand';
+
+export function useMoreLink() {
+  const pages = useStore(menuStore, state => state.menus);
+  const data = useMemo(
+    function () {
+      return find(pages, val => val.url === PURCHASE_PATH);
+    },
+    [pages],
+  );
+
+  function onMoreClick() {
+    if (!data) return;
+
+    (parent as any).tabAddDispatch({
+      key: data.id,
+      url: data.url,
+      label: data.name,
+    });
+  }
+
+  return onMoreClick;
+}
+
+export function useQueryList(date: Dayjs) {
+  return useQuery({
+    queryKey: [getReceiveOrderList.name, 'main', date],
+    async queryFn({signal}) {
+      const data = await getReceiveOrderList(
+        {
+          startTime: date.format('YYYY-MM-DD'),
+          endTime: date.add(1, 'day').format('YYYY-MM-DD'),
+          orderCode: '',
+          materialName: '',
+          wllbCode: '',
+          supplierId: '',
+          page: '1',
+          limit: '8',
+        },
+        signal,
+      );
+
+      if (data.msg === '200') return data.data.list;
+
+      return [];
+    },
+    initialData: [],
+  });
+}

+ 49 - 84
packages/app/src/pages/main/date/index.tsx

@@ -1,102 +1,67 @@
-import {Card, Calendar, Button} from 'antd';
+import {Card, Calendar, Button, Skeleton} from 'antd';
 import css from './index.module.css';
 import pcss from '../index.module.css';
-import {FC} from 'react';
+import {FC, useState} from 'react';
 import classNames from 'classnames';
 import {CheckCircleFilled, ClockCircleFilled} from '@ant-design/icons';
-import {Link} from 'react-router-dom';
+import {useMoreLink, useQueryList} from './hooks';
+import dayjs from 'dayjs';
 
 const DatePanel: FC = function () {
+  const onMoreClick = useMoreLink();
+  const [date, setDate] = useState(dayjs());
+  const {data, isFetching} = useQueryList(date);
+
   return (
     <Card className={classNames(css.panel, pcss.flexCard)}>
       <div className={css.panelContent}>
-        <Calendar fullscreen={false} />
+        <Calendar fullscreen={false} onChange={setDate} value={date} />
 
         <div className={css.panelTitle}>
           <h4>采购单列表</h4>
-          <Link to='/'>
-            <Button type='text' className='ant-text-btn-color-primary'>
-              查看更多
-            </Button>
-          </Link>
+          <Button
+            type='text'
+            className='ant-text-btn-color-primary'
+            onClick={onMoreClick}
+          >
+            查看更多
+          </Button>
         </div>
 
         <ul className={css.panelList}>
-          <li>
-            <CheckCircleFilled
-              style={{
-                color: 'var(--primary-color)',
-                fontSize: '30px',
-                height: '30px',
-              }}
-            />
-            <p>
-              <span>DH1231291234</span>
-              <span>2020-12-22</span>
-            </p>
-          </li>
-          <li>
-            <CheckCircleFilled
-              style={{
-                color: 'var(--primary-color)',
-                fontSize: '30px',
-                height: '30px',
-              }}
-            />
-            <p>
-              <span>DH1231291234</span>
-              <span>2020-12-22</span>
-            </p>
-          </li>
-          <li>
-            <ClockCircleFilled
-              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
-            />
-            <p>
-              <span>DH1231291234</span>
-              <span>2020-12-22</span>
-            </p>
-          </li>
-          <li>
-            <CheckCircleFilled
-              style={{
-                color: 'var(--primary-color)',
-                fontSize: '30px',
-                height: '30px',
-              }}
-            />
-            <p>
-              <span>DH1231291234</span>
-              <span>2020-12-22</span>
-            </p>
-          </li>
-          <li>
-            <ClockCircleFilled
-              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
-            />
-            <p>
-              <span>DH1231291234</span>
-              <span>2020-12-22</span>
-            </p>
-          </li>
-          <li>
-            <ClockCircleFilled
-              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
-            />
-            <p>
-              <span>DH1231291234</span>
-              <span>2020-12-22</span>
-            </p>
-          </li>
-          <li>
-            <ClockCircleFilled
-              style={{color: '#bbcdc5', fontSize: '30px', height: '30px'}}
-            />
-            <p>
-              <span>DH1231291234</span>
-              <span>2020-12-22</span>
-            </p>
-          </li>
+          {isFetching ? (
+            <Skeleton active />
+          ) : (
+            <>
+              {data.map(function ({id, type, orderCode, arrivalTime}) {
+                return (
+                  <li key={id}>
+                    {type === '0' ? (
+                      <ClockCircleFilled
+                        style={{
+                          color: '#bbcdc5',
+                          fontSize: '30px',
+                          height: '30px',
+                        }}
+                      />
+                    ) : (
+                      <CheckCircleFilled
+                        style={{
+                          color: 'var(--primary-color)',
+                          fontSize: '30px',
+                          height: '30px',
+                        }}
+                      />
+                    )}
+                    <p>
+                      <span>{orderCode}</span>
+                      <span>{arrivalTime}</span>
+                    </p>
+                  </li>
+                );
+              })}
+            </>
+          )}
         </ul>
       </div>
     </Card>

+ 7 - 1
packages/app/src/stores/menu.ts

@@ -10,8 +10,14 @@ type Action = {
 };
 
 export const menuStore = createStore<State & Action>(function (set) {
+  const menusStorage = sessionStorage.getItem(MENU_STORAGE);
+
+  const menus = menusStorage
+    ? (JSON.parse(menusStorage) as TreeRoleMenuData[])
+    : [];
+
   return {
-    menus: [],
+    menus,
     setMenu(menus) {
       sessionStorage.setItem(MENU_STORAGE, JSON.stringify(menus));
       set({menus});