fix: 修改设备树业务组件

packages/extend-components/EC_DeviceTree/src/EC_DeviceTree.md

@@ -27,13 +27,34 @@ group:
 
 api 参考 Antd Tree 组件 https://ant.design/components/tree-cn/
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| prefix | 搜索框的前置图标 | ReactNode | 搜索 icon |
-| placeholder | 搜索框占位符 | string | 搜索设备名称 |
-| checkable | 节点前添加 Checkbox 复选框 | boolean | false |
-| pagination | 默认分页，false 取消分页 | boolean | true |
-| serviceParams | 服务参数 | object | { pageIndex: 1, pageSize: 500, deviceTypes: '二供泵房,二供机组', getChild: true, userID: 1, queryInfo: '', sortFields: '', direction: '', isTop: true } |
-| deviceTreeService `必需` | 设备树服务 | promise | - |
-| onTreeCheck | 点击复选框触发 | function(checkedNodes){ } | - |
-| onTreeSelect | 点击树节点触发 | function(selectedNodes){ } | - |
+| 参数          | 说明                             | 类型                  | 默认值   |
+| ------------- | -------------------------------- | --------------------- | -------- |
+| deviceTypes   | 设备类型, 多种设备逗号隔开       | string                | 二供泵房 |
+| userAccessor  | 是否启用设备权限过滤             | boolean               | false    |
+| getChild      | 是否查询子设备                   | boolean               | false    |
+| sortFields    | 设备排序字段, 设备台账表中的字段 | string                | -        |
+| direction     | 设备排序方向, asc/desc           | string                | -        |
+| classField    | 分组字段，设备台账表中的字段     | string                | -        |
+| customerName  | 服务参数                         | string                | -        |
+| onSelect      | 选择回调                         | function(data: []){ } | -        |
+| onCheck       | 多选回调                         | function(data: []){ } | -        |
+| setDeviceList | 返回设备回调                     | function(data: []){ } | -        |
+| setSearchStr  | 返回搜索字符串                   | function(val: ''){ }  | -        |
+| selectable    | 'Antd-Tree 属性'                 | function(data: []){ } | -        |
+| checkable     | 'Antd-Tree 属性'                 | function(data: []){ } | -        |
+| keepChecked   | 是否选择第一个                   | boolean               | false    |
+
+## 补充说明
+
+- keepChecked: boolean, 搜索之后保持之前的选中数据
+- 第一次加载数据后默认勾选第一条
+- 再次加载数据后保持之前的选中数据，不默认勾选第一条
+- 选中数据之后和之前的做合并处理，key 也做合并处理做保留
+- 潜在问题 1: 取消选中后，区分取消选中的数据 和 之前保留但不再树中的数据(利用 onCheck 会保留多余的 key)
+
+- singleType: boolean, 是否只能选单一类型设备, 其他类型设备会被禁用
+
+- 单选及多选说明：
+- 仅多选: 传递 checkable=true, selectable=false, 触发 onCheck
+- 仅单选: 传递 checkable=false, selectable=true, 触发 onSelect
+- 混合: 传递 checkable=true, selectable=true, 触发 onCheck(混合模式表现：点击前面多选框可多选设备, 点击设备名称可直接切换单选到该设备)

packages/extend-components/EC_DeviceTree/src/apis/index.js

+import { request } from '@wisdom-utils/utils/es';
+
+const REQUEST_METHOD_GET = 'get';
+const REQUEST_METHOD_POST = 'post';
+// eslint-disable-next-line no-undef
+const baseURI = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api' : '';
+
+export function getEquipmentInfo(data) {
+  return request({
+    url: `${baseURI}/PandaMonitor/Monitor/Device/GetEquipmentInfo`,
+    method: REQUEST_METHOD_POST,
+    data,
+  });
+}

packages/extend-components/EC_DeviceTree/src/demos/Basic.tsx

 import React from 'react';
-import PandaDeviceTree from '../index';
-import { service } from '@wisdom-utils/utils';
-
-const REQUEST_HTTP = 'http';
-const REQUEST_METHOD_POST = 'post';
-
-const GET_DEVICE_LIST =
-  'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表
-
-// const GET_DEVICE_LIST = '/api/Publish/GCK/Device/DeviceTree'; //获取设备树列表
-
-const deviceTreeService = {
-  getDeviceList: {
-    url: GET_DEVICE_LIST,
-    method: REQUEST_METHOD_POST,
-    type: REQUEST_HTTP,
-  },
-};
-
-const dtService = service(deviceTreeService);
-
-const getDeviceList = dtService.getDeviceList;
+import DeviceTree from '../index';
 
 const Demo = () => {
   const onTreeCheck = (checkedKeysValue) => {
@@ -33,23 +12,20 @@ const Demo = () => {
 
   return (
     <div style={{ width: '200px', height: '400px', border: '1px solid #eee' }}>
-      <PandaDeviceTree
-        checkable
-        onTreeCheck={onTreeCheck}
-        onTreeSelect={onTreeSelect}
-        deviceTreeService={getDeviceList}
-        serviceParams={{
-          pageIndex: 1,
-          pageSize: 20,
-          // deviceTypes: '二供泵房,二供机组',
-          getChild: true,
-          userID: 1,
-          // queryInfo: '',
-          // sortFields: '',
-          // direction: '',
-          // isTop: true,
-        }}
-        // pagination={false}
+      <DeviceTree
+        onCheck={(data) => {console.log(data)}}
+        onSelect={(data) => {console.log(data)}}
+        checkable={true}
+        selectable={true}
+        deviceTypes={'压力表,熊猫水表,二供泵房'}
+        sortFields={''}
+        direction={''}
+        classField={'所属分区'}
+        getChild={true}
+        userAccessor={false}
+        keepChecked
+        setDeviceList={() => {}}
+        setSearchStr={() => {}}
       />
     </div>
   );

packages/extend-components/EC_DeviceTree/src/index.less

@@ -3,70 +3,18 @@
 @ec-device-tree-prefix-cls: ~'@{ant-prefix}-ec-device-tree';
 
 .@{ec-device-tree-prefix-cls} {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
   height: 100%;
-  padding: 5px;
+  overflow: hidden;
+  padding: 10px;
 
-  &-divider {
-    margin: 6px 0 12px 0;
+  &-tree-wrap {
+    height: calc(100% - 48px);
+    overflow: auto;
   }
 
-  .@{ant-prefix}-tree-checkbox {
-    margin: 7px 2px 0 0;
+  :global {
+    .@{ant-prefix}-input-search {
+      margin-bottom: 16px;
+    }
   }
-
-  .@{ant-prefix}-tree-title {
+}
\ No newline at end of file
-    white-space: nowrap;
-  }
-
-  .@{ant-prefix}-tree-treenode {
-    width: 100%;
-  }
-
-  .@{ant-prefix}-tree-switcher {
-    line-height: 30px;
-  }
-
-  .@{ant-prefix}-tree-switcher-noop {
-    width: 14px;
-  }
-
-  .@{ant-prefix}-tree-node-content-wrapper {
-    flex: 1;
-    min-height: 30px;
-    overflow: hidden;
-    line-height: 30px;
-    text-overflow: ellipsis;
-    border-radius: 3px;
-  }
-
-  .@{ant-prefix}-tree .@{ant-prefix}-tree-node-content-wrapper.@{ant-prefix}-tree-node-selected {
-    color: #1890ff;
-    background-color: #eaf1fe;
-  }
-
-  &-content {
-    flex: 1;
-    overflow-y: scroll;
-  }
-
-  .@{ant-prefix}-spin-nested-loading {
-    height: 100%;
-  }
-
-  &-pagination {
-    margin: 10px auto;
-  }
-
-  &-total.@{ant-prefix}-divider-horizontal.@{ant-prefix}-divider-with-text {
-    margin: 10px auto;
-    color: #a4b1c7;
-  }
-
-  .@{ant-prefix}-divider-horizontal.@{ant-prefix}-divider-with-text::before,
-  .@{ant-prefix}-divider-horizontal.@{ant-prefix}-divider-with-text::after {
-    top: 0;
-  }
-}