feat: 设备树组件

.umirc.js

@@ -107,7 +107,7 @@ export default {
       },
       {
         title: '数据展示',
-        children: ['Empty'],
+        children: ['DeviceTree'],
       },
     ],
   },

packages/DeviceTree/README.md

+# `@wisdom-components/DeviceTree`
+
+> TODO: description
+
+## Usage
+
+```
+const devicetree = require('@wisdom-components/DeviceTree');
+
+// TODO: DEMONSTRATE API
+```
+
+## API
+
+api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array<{key, title, children, [disabled, selectable]}> | - |
+| onSearch | 搜索框输入事件的回调，会返回搜索框输入信息 | function(value){ } | - |

packages/DeviceTree/package.json

+{
+  "name": "@wisdom-components/devicetree",
+  "version": "1.0.1",
+  "description": "> TODO: description",
+  "author": "tuqian <webtuqian@163.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/DeviceTree/src/DeviceTree.md

+---
+title: DeviceTree - 设备树
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# DeviceTree 设备树
+
+基础业务组件
+
+- 允许单设备选择
+- 允许多设备选择
+- 允许搜索设备树
+
+## 何时使用
+
+- 在设备树选择时。
+
+## 代码演示
+
+<code src="./demos/Basic.js">
+
+## API
+
+api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| prefix | 搜索框的前置图标 | ReactNode | 搜索 icon |
+| placeholder | 搜索框占位符 | string | 搜索设备名称 |
+| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array<{key, title, children, [disabled, selectable]}> | - |
+| onSearch | 搜索框输入事件的回调，会返回搜索框输入信息 | function(value){ } | - |

packages/DeviceTree/src/demos/Basic.js

+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 = {}) => {
+    request(baseUrl + '/Publish/Monitor/Device/DeviceTree', {
+      method: 'post',
+      data: {
+        PageIndex: 1,
+        PageSize: 500,
+        deviceTypes: '二供泵房,二供机组',
+        getChild: true,
+        userID: 1,
+        queryInfo: params.queryInfo || '',
+        sortFields: '',
+        direction: '',
+        isTop: true,
+      },
+    }).then(function (response) {
+      let data = response.data
+        ? response.data.list && response.data.list.length > 0
+          ? response.data.list[0].DeviceList
+          : []
+        : [];
+      setTreeData(handleData(data));
+    });
+  };
+
+  const handleData = (data) => {
+    data.map((item) => {
+      item.title = item.DeviceName;
+      item.key = item.StationID;
+      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 (
+    <PandaDeviceTree
+      onSearch={onSearch}
+      checkable
+      onExpand={onExpand}
+      expandedKeys={expandedKeys}
+      autoExpandParent={autoExpandParent}
+      onCheck={onCheck}
+      checkedKeys={checkedKeys}
+      onSelect={onSelect}
+      selectedKeys={selectedKeys}
+      treeData={treeData}
+    />
+  );
+};
+
+export default Demo;
+
+const baseUrl = 'http://192.168.10.150:8777';

packages/DeviceTree/src/index.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input, Divider, Tree } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import Empty from '@wisdom-components/Empty';
+import styles from './index.less';
+
+const DeviceTree = (props) => {
+  const { prefix, placeholder, treeData, onSearch } = props;
+
+  return (
+    <div className={styles.DeviceTree}>
+      <Input
+        prefix={prefix}
+        placeholder={placeholder}
+        bordered={false}
+        onChange={onSearch}
+        onPressEnter={onSearch}
+      />
+      <Divider />
+      {!!treeData.length && <Tree {...props} />}
+      {!treeData.length && <Empty />}
+    </div>
+  );
+};
+
+DeviceTree.defaultProps = {
+  prefix: <SearchOutlined />,
+  placeholder: '搜索设备名称',
+  treeData: [],
+  onSearch: () => {},
+};
+
+DeviceTree.propTypes = {
+  prefix: PropTypes.node,
+  placeholder: PropTypes.string,
+  treeData: PropTypes.array,
+  onSearch: PropTypes.func,
+};
+
+export default DeviceTree;

packages/DeviceTree/src/index.less

+.DeviceTree {
+  padding: 5px;
+
+  :global {
+    .ant-divider {
+      margin: 6px 0 12px 0;
+    }
+  }
+}