1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
// @ts-ignore
import React, { useEffect, useState } from 'react';
import PandaDeviceTree from '../index';
import request from 'umi-request';
const Demo = () => {
const [treeData, setTreeData] = useState([]);
const [expandedKeys, setExpandedKeys] = useState(null);
const [checkedKeys, setCheckedKeys] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]);
const [autoExpandParent, setAutoExpandParent] = useState(true);
const fetchData = (params = {}) => {
// eslint-disable-next-line no-use-before-define
request(`${baseUrl}/Publish/GCK/Device/DeviceTree`, {
method: 'post',
data: {
pageIndex: 1,
pageSize: 500,
deviceTypes: '二供泵房,二供机组',
getChild: true,
userID: 1,
queryInfo: params.queryInfo || '',
sortFields: '',
direction: '',
isTop: true,
},
}).then(function (response) {
// eslint-disable-next-line no-nested-ternary
const data = response.data
? response.data.list && response.data.list.length > 0
? response.data.list[0].deviceList
: []
: [];
// eslint-disable-next-line no-use-before-define
setTreeData(handleData(data));
});
};
const handleData = (data) => {
// eslint-disable-next-line array-callback-return
data.map((item) => {
// eslint-disable-next-line no-param-reassign
item.title = item.deviceName;
// eslint-disable-next-line no-param-reassign
item.key = item.stationID;
// eslint-disable-next-line no-param-reassign
item.children = handleData(item.children);
});
return data;
};
useEffect(() => {
fetchData();
}, []);
const onExpand = (expandedKeysValue) => {
console.log('onExpand', expandedKeysValue);
setExpandedKeys(expandedKeysValue);
setAutoExpandParent(false);
};
const onCheck = (checkedKeysValue) => {
console.log('onCheck', checkedKeysValue);
setCheckedKeys(checkedKeysValue);
};
const onSelect = (selectedKeysValue, info) => {
console.log('onSelect', info);
setSelectedKeys(selectedKeysValue);
};
const onSearch = (e) => {
if (e.type == 'keydown') {
fetchData({ queryInfo: e.target.value });
}
console.log(e.type, 'e.type');
console.log(e.target.value, 'e.target.value');
};
return (
<div style={{ width: '200px', height: '400px', border: '1px solid #eee' }}>
<PandaDeviceTree
onSearch={onSearch}
checkable
onExpand={onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
onCheck={onCheck}
checkedKeys={checkedKeys}
onSelect={onSelect}
selectedKeys={selectedKeys}
treeData={treeData}
/>
</div>
);
};
export default Demo;
const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';