Skip to content

W
wisdom-components
Commit 0c89916f authored by 李纪文's avatar 李纪文
Browse files
Options

fix: 修改设备树业务组件

parent de5c1917
Expand all Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 108 deletions
packages/extend-components/EC_DeviceTree/src/EC_DeviceTree.md
View file @ 0c89916f
......@@ -28,12 +28,33 @@ 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 0 → 100644
View file @ 0c89916f
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
View file @ 0c89916f
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
View file @ 0c89916f
......@@ -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;
&-divider {
margin: 6px 0 12px 0;
}
.@{ant-prefix}-tree-checkbox {
margin: 7px 2px 0 0;
}
.@{ant-prefix}-tree-title {
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;
}
padding: 10px;
.@{ant-prefix}-tree .@{ant-prefix}-tree-node-content-wrapper.@{ant-prefix}-tree-node-selected {
color: #1890ff;
background-color: #eaf1fe;
&-tree-wrap {
height: calc(100% - 48px);
overflow: auto;
}
&-content {
flex: 1;
overflow-y: scroll;
}
.@{ant-prefix}-spin-nested-loading {
height: 100%;
:global {
.@{ant-prefix}-input-search {
margin-bottom: 16px;
}
&-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;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment