feat: 同步备品备件

src/pages/DeviceManager/detail.js

@@ -7,13 +7,13 @@ import {
 import { useParams, useRequest } from '@umijs/max';
 import { Table } from 'antd';
 import dayjs from 'dayjs';
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PageType } from '.';
 const SparePartDetail = () => {
   const { projectId, type } = useParams();
-  const titles = ['入库详情', '出库详情', '报废详情', '库存详情'];
+  const titles = ['入库详情', '出库详情', '报废详情', '库存详情', '基础库存'];
 
-  const params = {
+  const defaultParams = {
     type: Number(type),
     project_id: Number(projectId),
     check_result: 0,
@@ -22,27 +22,15 @@ const SparePartDetail = () => {
     end_time: '',
     name: '',
   };
-  const paramsExit = {
+
+  const defaultParamsOfExit = {
     category_id: 0,
     name: '',
-    warning_state: 0,
+    model_number: '',
+    warning_state: Number(type) === PageType.warning ? 2 : 0,
     project_id: Number(projectId),
   };
 
-  useEffect(() => {
-    type !== PageType.existing ? run(params) : runExist(paramsExit);
-  }, [type]);
-  const { data, run, loading } = useRequest((data) => queryStoreList(data), {
-    manual: true,
-  });
-
-  const {
-    data: dataExist,
-    loading: loadingExist,
-    run: runExist,
-  } = useRequest((data) => queryInventoryList(data), {
-    manual: true,
-  });
   const columns = [
     {
       title: '仓储类型',
@@ -63,6 +51,7 @@ const SparePartDetail = () => {
       align: 'center',
     },
   ];
+
   const columnsIn = [
     ...columns,
     {
@@ -91,6 +80,7 @@ const SparePartDetail = () => {
       align: 'center',
     },
   ];
+
   const columnsOut = [
     ...columns,
     {
@@ -125,6 +115,7 @@ const SparePartDetail = () => {
       align: 'center',
     },
   ];
+
   const columnsScrap = [
     ...columns,
     {
@@ -188,6 +179,7 @@ const SparePartDetail = () => {
       },
     },
   ];
+
   const columnsExit = [
     {
       title: '类型',
@@ -210,12 +202,14 @@ const SparePartDetail = () => {
     {
       title: '在库',
       align: 'center',
-      render: (record) => (
-        <div>
-          {record.in_amount - record.out_amount - record.scrap_amount}
-          {record.unit}
-        </div>
-      ),
+      render: (record) => {
+        return (
+          <div>
+            {record.in_amount - record.out_amount - record.scrap_amount}
+            {record.unit}
+          </div>
+        );
+      },
     },
     {
       title: '入库',
@@ -267,27 +261,237 @@ const SparePartDetail = () => {
       align: 'center',
     },
   ];
-  const columnsList = [columnsIn, columnsOut, columnsScrap, columnsExit];
+
+  const columnsBase = [
+    {
+      title: '类型',
+      dataIndex: 'category_name',
+      key: 'category_name',
+      align: 'center',
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+    },
+    {
+      title: '型号',
+      dataIndex: 'model_number',
+      key: 'model_number',
+      align: 'center',
+    },
+    {
+      title: '在库',
+      align: 'center',
+      render: (record) => {
+        return (
+          <div>
+            {record.in_amount - record.out_amount - record.scrap_amount}
+            {record.unit}
+          </div>
+        );
+      },
+    },
+    {
+      title: '入库',
+      align: 'center',
+      render: (recode) => (
+        <div>
+          {recode.in_amount}
+          {recode.unit}
+        </div>
+      ),
+    },
+    {
+      title: '出库',
+      align: 'center',
+      render: (recode) => (
+        <div>
+          {recode.out_amount}
+          {recode.unit}
+        </div>
+      ),
+    },
+    {
+      title: '报废',
+      align: 'center',
+      render: (recode) => (
+        <div>
+          {recode.scrap_amount}
+          {recode.unit}
+        </div>
+      ),
+    },
+    {
+      title: '预警状态',
+      dataIndex: 'warning_state',
+      align: 'warning_state',
+      align: 'center',
+      render: (warn) => {
+        return warn == 2 ? (
+          <div style={{ color: 'red' }}>报警</div>
+        ) : (
+          <div>正常</div>
+        );
+      },
+    },
+  ];
+
+  const columnsList = [
+    columnsIn,
+    columnsOut,
+    columnsScrap,
+    columnsExit,
+    columnsBase,
+  ];
+
+  const [dataSource, setDataSource] = useState([]);
+
+  const [pagination, setPagination] = useState({
+    current: 1,
+    total: 0,
+    pageSize: 20,
+  });
+
+  const isLoadAll = useRef(false);
+
+  const bottomAreaOfTable = useRef();
+
+  const { run, loading } = useRequest(
+    (data) => {
+      data.page = pagination?.current || defaultParams.currentPage;
+      data.page_size = pagination?.pageSize || defaultParams.pageSize;
+      return queryStoreList(data);
+    },
+    {
+      manual: true,
+      formatResult: (result) => {
+        if (pagination.current === 1) {
+          setDataSource(result?.data);
+        } else {
+          setDataSource([...dataSource, ...result?.data]);
+        }
+
+        if (pagination.current * pagination.pageSize >= result.total) {
+          isLoadAll.current = true;
+        }
+
+        // 每次请求完成后 current + 1
+        setPagination({
+          ...pagination,
+          total: result?.total || 0,
+          current: pagination.current + 1,
+        });
+      },
+    },
+  );
+
+  const { loading: loadingExist, run: runExist } = useRequest(
+    (data) => {
+      data.page = pagination?.current || defaultParamsOfExit.currentPage;
+      data.page_size = pagination?.pageSize || defaultParamsOfExit.pageSize;
+      return queryInventoryList(data);
+    },
+    {
+      manual: true,
+      formatResult: (result) => {
+        if (pagination.current === 1) {
+          setDataSource(result?.data);
+        } else {
+          setDataSource([...dataSource, ...result?.data]);
+        }
+
+        if (pagination.current * pagination.pageSize >= result.total) {
+          isLoadAll.current = true;
+        }
+
+        // 每次请求完成后 current + 1
+        setPagination({
+          ...pagination,
+          total: result?.total || 0,
+          current: pagination.current + 1,
+        });
+      },
+    },
+  );
+
+  useEffect(() => {
+    Number(type) !== PageType.warning && Number(type) !== PageType.base
+      ? run(defaultParams)
+      : runExist(defaultParamsOfExit);
+  }, [type]);
+
+  const handleScroll = () => {
+    if (bottomAreaOfTable.current === null) {
+      return;
+    }
+    const rect = bottomAreaOfTable.current.getBoundingClientRect();
+
+    console.log();
+    const isVisible =
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+    if (isVisible) {
+      if (isLoadAll.current || loadingExist || loading) {
+        return;
+      }
+
+      if (Number(type) !== PageType.warning && Number(type) !== PageType.base) {
+        run(defaultParams);
+      } else {
+        runExist(defaultParamsOfExit);
+      }
+    }
+  };
+
+  // 监听滚动事件
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [loadingExist, loading]);
 
   return (
     <PageContent closeable={false}>
       <PageTitle children={titles[type]} returnable />
-      {type !== PageType.existing ? (
-        <Table
-          loading={loading}
-          style={{ marginTop: '10px' }}
-          dataSource={data}
-          columns={columnsList[type]}
-          pagination={false}
-        />
+      {Number(type) !== PageType.warning && Number(type) !== PageType.base ? (
+        <>
+          <Table
+            loading={loading}
+            style={{ marginTop: '10px' }}
+            dataSource={dataSource}
+            columns={columnsList[type]}
+            pagination={false}
+          />
+          <div
+            ref={bottomAreaOfTable}
+            style={{
+              height: '1px',
+            }}
+          />
+        </>
       ) : (
-        <Table
-          loading={loadingExist}
-          style={{ marginTop: '10px' }}
-          dataSource={dataExist}
-          columns={columnsList[type]}
-          pagination={false}
-        />
+        <>
+          <Table
+            loading={loadingExist}
+            style={{ marginTop: '10px' }}
+            dataSource={dataSource}
+            columns={columnsList[type]}
+            pagination={false}
+          />
+          <div
+            ref={bottomAreaOfTable}
+            style={{
+              height: '1px',
+            }}
+          />
+        </>
       )}
     </PageContent>
   );

src/pages/DeviceManager/index.js

@@ -22,7 +22,8 @@ export const PageType = {
   in: 0, //入库管理
   out: 1, //出库管理
   scrap: 2, //报废处置
-  existing: 3, //基础库存
+  warning: 3, //报警数量
+  base: 4, //基础库存
 };
 
 const DeviceManager = () => {
@@ -291,13 +292,14 @@ const Device = ({ projectId }) => {
 const SparePart = ({ projectId }) => {
   const navigate = useNavigate();
   const year = dayjs().format('YYYY');
-  const params = {
+  const currentMonth = dayjs().format('MM');
+  const defaultParams = {
     project_id: Number(projectId),
-    month: 0,
+    month: Number(currentMonth),
     year: Number(year),
   };
   //请求备品列表
-  const { data, loading } = useRequest(() => queryMainChartList(params));
+  const { data, loading } = useRequest(() => queryMainChartList(defaultParams));
 
   const changePage = (type) => {
     navigate(`/device/detail/${projectId}/${type}`);
@@ -313,6 +315,10 @@ const SparePart = ({ projectId }) => {
 
   const list = useMemo(() => {
     const result = [
+      {
+        title: '基础库存',
+        type: PageType.base,
+      },
       {
         title: '入库数量',
         type: PageType.in,
@@ -330,7 +336,7 @@ const SparePart = ({ projectId }) => {
       },
       {
         title: '报警数量',
-        type: PageType.existing,
+        type: PageType.warning,
         num: data?.warning_stat || 0,
       },
     ];
@@ -357,7 +363,7 @@ const SparePart = ({ projectId }) => {
           >
             <span className={styles.spareText}>{item.title}</span>
             <Space size={30}>
-              <span className={styles.spareText}>{item.num}个</span>
+              {/* <span className={styles.spareText}>{item.num}个</span> */}
               <RightOutlined style={{ fontSize: '28px' }} />
             </Space>
           </div>

src/services/StorageManagement.js

@@ -20,7 +20,7 @@ export async function queryStoreList(data) {
     method: 'POST',
     data: data,
   });
-  return { data: res?.data?.data };
+  return { data: res?.data?.data || [], total: res?.data?.count || 0 };
 }
 
 /**
@@ -39,7 +39,7 @@ export async function queryInventoryList(data) {
     method: 'POST',
     data: data,
   });
-  return { data: res?.data?.list };
+  return { data: res?.data?.list || [], total: res?.data?.count || 0 };
 }
 
 /**