修改设备管理样式

src/components/TabsContent/index.js

@@ -6,7 +6,7 @@ const TabsContent = (props) => {
   const [active, setActive] = useState(defaultActiveKey);
   const renderContent = useMemo(() => {
     return items.find((item) => item.key == active).children;
-  }, [active]);
+  }, [active, items]);
   return (
     <div>
       <div

src/pages/DeviceManager/index.js

@@ -2,7 +2,7 @@ import PageContent from '@/components/PageContent';
 import TabsContent from '@/components/TabsContent';
 import { queryDeviceList } from '@/services/device';
 import { useParams, useRequest } from '@umijs/max';
-import { Button, Collapse, Space } from 'antd';
+import { Button, Collapse, List, Space } from 'antd';
 import { useMemo } from 'react';
 const img = require('@/assets/deviceManager/device01.png');
 const chartIcon = require('@/assets/deviceManager/chartIcon.png');
@@ -24,7 +24,7 @@ const DeviceManager = () => {
           {
             label: `设备管理`,
             key: '1',
-            children: <Device data={data} />,
+            children: <Device data={data} loading={loading} />,
           },
           {
             label: `备品管理`,
@@ -36,31 +36,39 @@ const DeviceManager = () => {
     </PageContent>
   );
 };
-const Device = ({ data }) => {
+const Device = ({ data = [] }) => {
+  //处理数据
   const dataSource = useMemo(() => {
     const total = data?.reduce((total, item) => item.Count, 0);
     const items = data?.map((item, idx) => {
+      const itemLen = item?.List?.length;
       return {
         key: idx,
-        label: item.Type,
-        children: <div>{data?.map((item) => item.Name)}</div>,
+        label: (
+          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <span>{item.Type}</span>
+            <span>{itemLen}个</span>
+          </div>
+        ),
+        children: (
+          <div style={{ position: 'relative' }}>
+            <List
+              header={null}
+              footer={null}
+              dataSource={item.List}
+              renderItem={(cur) => (
+                <List.Item style={{ justifyContent: 'left' }}>
+                  <span style={{ width: '30%' }}> {cur.Code} </span>
+                  <span> {cur.Name} </span>
+                </List.Item>
+              )}
+            />
+          </div>
+        ),
       };
     });
     return { total, items };
   }, [data]);
-  const items = [
-    {
-      key: '1',
-      label: 'This is panel header with arrow icon',
-      children: <p>aaaaaaaa</p>,
-    },
-    {
-      key: '2',
-      label: 'This is panel header with no arrow icon',
-      children: <p>aaaaaaaaa</p>,
-      showArrow: false,
-    },
-  ];
   const onChange = (key) => {
     console.log(key);
   };
@@ -138,6 +146,7 @@ const Device = ({ data }) => {
       <Collapse
         defaultActiveKey={['1']}
         bordered={false}
+        // expandIcon={() => <div> 个</div>}
         onChange={onChange}
         items={dataSource?.items}
       />