|
@@ -2,7 +2,7 @@ import PageContent from '@/components/PageContent';
|
|
import TabsContent from '@/components/TabsContent';
|
|
import TabsContent from '@/components/TabsContent';
|
|
import { queryDeviceList } from '@/services/device';
|
|
import { queryDeviceList } from '@/services/device';
|
|
import { useParams, useRequest } from '@umijs/max';
|
|
import { useParams, useRequest } from '@umijs/max';
|
|
-import { Button, Collapse, Space } from 'antd';
|
|
|
|
|
|
+import { Button, Collapse, List, Space } from 'antd';
|
|
import { useMemo } from 'react';
|
|
import { useMemo } from 'react';
|
|
const img = require('@/assets/deviceManager/device01.png');
|
|
const img = require('@/assets/deviceManager/device01.png');
|
|
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
|
|
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
|
|
@@ -24,7 +24,7 @@ const DeviceManager = () => {
|
|
{
|
|
{
|
|
label: `设备管理`,
|
|
label: `设备管理`,
|
|
key: '1',
|
|
key: '1',
|
|
- children: <Device data={data} />,
|
|
|
|
|
|
+ children: <Device data={data} loading={loading} />,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label: `备品管理`,
|
|
label: `备品管理`,
|
|
@@ -36,31 +36,39 @@ const DeviceManager = () => {
|
|
</PageContent>
|
|
</PageContent>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
-const Device = ({ data }) => {
|
|
|
|
|
|
+const Device = ({ data = [] }) => {
|
|
|
|
+ //处理数据
|
|
const dataSource = useMemo(() => {
|
|
const dataSource = useMemo(() => {
|
|
const total = data?.reduce((total, item) => item.Count, 0);
|
|
const total = data?.reduce((total, item) => item.Count, 0);
|
|
const items = data?.map((item, idx) => {
|
|
const items = data?.map((item, idx) => {
|
|
|
|
+ const itemLen = item?.List?.length;
|
|
return {
|
|
return {
|
|
key: idx,
|
|
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 };
|
|
return { total, items };
|
|
}, [data]);
|
|
}, [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) => {
|
|
const onChange = (key) => {
|
|
console.log(key);
|
|
console.log(key);
|
|
};
|
|
};
|
|
@@ -138,6 +146,7 @@ const Device = ({ data }) => {
|
|
<Collapse
|
|
<Collapse
|
|
defaultActiveKey={['1']}
|
|
defaultActiveKey={['1']}
|
|
bordered={false}
|
|
bordered={false}
|
|
|
|
+ // expandIcon={() => <div> 个</div>}
|
|
onChange={onChange}
|
|
onChange={onChange}
|
|
items={dataSource?.items}
|
|
items={dataSource?.items}
|
|
/>
|
|
/>
|