index.js 5.03 KB
Newer Older
李纪文's avatar
李纪文 committed
1
import React, { useContext, useEffect, useState } from 'react';
涂茜's avatar
涂茜 committed
2 3
import PropTypes from 'prop-types';
import classNames from 'classnames';
李纪文's avatar
李纪文 committed
4 5 6
import { Spin, Input, Tree, Divider, message, Pagination, ConfigProvider } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import Empty from '@wisdom-components/empty';
涂茜's avatar
涂茜 committed
7 8 9 10
import './index.less';

const DeviceTree = (props) => {
  const {
李纪文's avatar
李纪文 committed
11 12 13 14 15 16 17
    prefix,
    placeholder,
    deviceTreeService,
    serviceParams,
    onTreeCheck,
    onTreeSelect,
    pagination,
涂茜's avatar
涂茜 committed
18 19 20 21 22
  } = props;

  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('ec-device-tree');

李纪文's avatar
李纪文 committed
23 24 25 26 27
  const [treeData, setTreeData] = useState([]);
  const [params, setParams] = useState({});
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(false);
  const [expandedKeys, setExpandedKeys] = useState([]);
涂茜's avatar
涂茜 committed
28 29
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
涂茜's avatar
涂茜 committed
30

涂茜's avatar
涂茜 committed
31
  useEffect(() => {
李纪文's avatar
李纪文 committed
32 33
    setParams(serviceParams);
  }, []);
涂茜's avatar
涂茜 committed
34

李纪文's avatar
李纪文 committed
35 36 37 38 39 40 41 42 43 44 45 46
  useEffect(() => {
    setParams(serviceParams);
  }, [serviceParams]);

  const handleData = (data) => {
    data.map((item) => {
      item.title = item.deviceName;
      item.key = item.stationID;
      item.children = handleData(item.children);
    });
    return data;
  };
涂茜's avatar
涂茜 committed
47

李纪文's avatar
李纪文 committed
48 49 50 51 52 53 54 55 56 57 58
  const fetchData = (param = {}) => {
    setLoading(true);
    deviceTreeService(param).then((response) => {
      if (response.code === 0) {
        const data = response.data
          ? response.data.list && response.data.list.length > 0
            ? response.data.list[0].deviceList
            : []
          : [];
        const newData = handleData(data);
        const keys = newData.length > 0 ? [newData[0].key] : [];
59
        setLoading(false);
李纪文's avatar
李纪文 committed
60 61 62 63 64 65 66 67 68 69 70 71
        setTreeData(newData);
        setTotalCount(response.data.totalCount);
        onTreeCheck(newData.length > 0 ? [newData[0]] : []);
        onTreeSelect(newData.length > 0 ? [newData[0]] : []);
        setCheckedKeys(keys);
        setExpandedKeys(keys);
        setSelectedKeys(keys);
      } else {
        message.error(response.msg);
      }
    });
  };
涂茜's avatar
涂茜 committed
72

李纪文's avatar
李纪文 committed
73 74 75
  useEffect(() => {
    if (JSON.stringify(params) !== '{}') {
      fetchData(params);
76
    }
李纪文's avatar
李纪文 committed
77
  }, [params]);
涂茜's avatar
涂茜 committed
78

李纪文's avatar
李纪文 committed
79 80 81 82 83 84
  const onSearch = (e) => {
    if (e.type === 'keydown' || e.target.value === '') {
      const param = { ...params, queryInfo: e.target.value };
      setParams(param);
    }
  };
85

李纪文's avatar
李纪文 committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
  // 选中复选框
  const onCheck = (checkedKeysValue) => {
    const { checked } = checkedKeysValue;
    const checkedTree = [];
    treeData.forEach((item) => {
      if (checked.includes(item.key)) {
        checkedTree.push(item);
      }
      if (item.children.length > 0) {
        item.children.forEach((child) => {
          if (checked.includes(child.key)) {
            checkedTree.push(child);
          }
        });
      }
    });
    setCheckedKeys(checked);
    onTreeCheck(checkedTree);
  };
105

李纪文's avatar
李纪文 committed
106 107 108 109
  const onSelect = (selectedKeysValue, info) => {
    setSelectedKeys(selectedKeysValue);
    onTreeSelect(info.selectedNodes);
  };
110

李纪文's avatar
李纪文 committed
111 112
  const onExpand = (expandedKeysValue) => {
    setExpandedKeys(expandedKeysValue);
涂茜's avatar
涂茜 committed
113 114
  };

李纪文's avatar
李纪文 committed
115 116
  const onPaginationChange = (page) => {
    setParams({ ...params, pageIndex: page });
涂茜's avatar
涂茜 committed
117 118
  };

涂茜's avatar
涂茜 committed
119
  return (
李纪文's avatar
李纪文 committed
120 121 122 123 124 125 126 127 128 129
    <div className={classNames(prefixCls)}>
      <Input
        prefix={prefix}
        placeholder={placeholder}
        bordered={false}
        onChange={onSearch}
        onPressEnter={onSearch}
      />
      <Divider className={classNames(`${prefixCls}-divider`)} />
      <div className={classNames(`${prefixCls}-content`)}>
涂茜's avatar
涂茜 committed
130
        <Spin spinning={loading}>
李纪文's avatar
李纪文 committed
131
          {!!treeData.length && (
涂茜's avatar
涂茜 committed
132
            <Tree
涂茜's avatar
涂茜 committed
133
              checkedKeys={checkedKeys}
李纪文's avatar
李纪文 committed
134
              expandedKeys={expandedKeys}
涂茜's avatar
涂茜 committed
135
              selectedKeys={selectedKeys}
涂茜's avatar
涂茜 committed
136
              treeData={treeData}
李纪文's avatar
李纪文 committed
137 138 139 140 141
              onExpand={onExpand}
              onCheck={onCheck}
              onSelect={onSelect}
              checkStrictly
              {...props}
涂茜's avatar
涂茜 committed
142 143
            />
          )}
李纪文's avatar
李纪文 committed
144
          {!treeData.length && !loading && <Empty />}
涂茜's avatar
涂茜 committed
145
        </Spin>
涂茜's avatar
涂茜 committed
146
      </div>
李纪文's avatar
李纪文 committed
147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
      {pagination && (
        <div className={classNames(`${prefixCls}-pagination`)}>
          <Pagination
            simple
            hideOnSinglePage
            current={params.pageIndex || 1}
            pageSize={params.pageSize || 20}
            total={totalCount}
            onChange={onPaginationChange}
          />
        </div>
      )}
      {!pagination && (
        <Divider plain className={classNames(`${prefixCls}-total`)}>
           {totalCount} 记录
        </Divider>
      )}
涂茜's avatar
涂茜 committed
164 165 166 167 168
    </div>
  );
};

DeviceTree.defaultProps = {
李纪文's avatar
李纪文 committed
169 170 171 172 173 174
  prefix: <SearchOutlined />,
  placeholder: '搜索设备名称',
  pagination: true,
  serviceParams: {},
  onTreeCheck: () => {},
  onTreeSelect: () => {},
涂茜's avatar
涂茜 committed
175 176 177
};

DeviceTree.propTypes = {
李纪文's avatar
李纪文 committed
178 179 180 181 182 183 184
  prefix: PropTypes.node,
  placeholder: PropTypes.string,
  pagination: PropTypes.bool,
  serviceParams: PropTypes.object,
  onTreeCheck: PropTypes.func,
  onTreeSelect: PropTypes.func,
  deviceTreeService: PropTypes.any,
涂茜's avatar
涂茜 committed
185 186 187
};

export default DeviceTree;