index.js

import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Input, Tree, Divider, message, ConfigProvider } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import Empty from '@wisdom-components/empty';
import './index.less';

const DeviceTree = (props) => {
  const {
    prefix,
    placeholder,
    deviceTreeService,
    serviceParams,
    onTreeCheck,
    onTreeSelect,
  } = props;

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

  const [treeData, setTreeData] = useState([]);
  const [params, setParams] = useState({});

  useEffect(() => {
    const param = {
      pageIndex: serviceParams.pageIndex || 1,
      pageSize: serviceParams.pageSize || 500,
      deviceTypes: serviceParams.deviceTypes || '二供泵房,二供机组',
      getChild: serviceParams.getChild || true,
      userID: serviceParams.userID || 0,
      queryInfo: serviceParams.queryInfo || '',
      sortFields: serviceParams.sortFields || '',
      direction: serviceParams.direction || '',
      isTop: serviceParams.isTop || true,
    };
    setParams(param);
  }, []);

  const handleData = (data) => {
    data.forEach((item) => {
      item.title = item.deviceName;
      item.key = item.stationID;
      item.children = handleData(item.children);
    });
    return data;
  };

  const fetchData = (param = {}) => {
    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
            : []
          : [];
        setTreeData(handleData(data));
      } else {
        message.error(response.msg);
      }
    });
  };

  useEffect(() => {
    if (JSON.stringify(params) !== '{}') {
      fetchData(params);
    }
  }, [params]);

  const onSearch = (e) => {
    if (e.type === 'keydown' || e.target.value === '') {
      const param = { ...params, queryInfo: e.target.value };
      setParams(param);
    }
  };

  // 选中复选框
  const onCheck = (checkedKeysValue) => {
    const checkedTree = [];
    treeData.forEach((item) => {
      if (checkedKeysValue.includes(item.key)) {
        checkedTree.push(item);
      }
      if (item.children.length > 0) {
        item.children.forEach((child) => {
          if (checkedKeysValue.includes(child.key)) {
            checkedTree.push(child);
          }
        });
      }
    });
    onTreeCheck(checkedTree);
  };

  const onSelect = (selectedKeysValue, info) => {
    onTreeSelect(info.selectedNodes);
  };

  return (
    <div className={classNames(prefixCls)}>
      <Input
        prefix={prefix}
        placeholder={placeholder}
        bordered={false}
        onChange={onSearch}
        onPressEnter={onSearch}
      />
      <Divider />
      <div className={classNames(`${prefixCls}-content`)}>
        {!!treeData.length && (
          <Tree treeData={treeData} onCheck={onCheck} onSelect={onSelect} {...props} />
        )}
        {!treeData.length && <Empty />}
      </div>
    </div>
  );
};

DeviceTree.defaultProps = {
  prefix: <SearchOutlined />,
  placeholder: '搜索设备名称',
  serviceParams: {},
  onTreeCheck: () => {},
  onTreeSelect: () => {},
};

DeviceTree.propTypes = {
  prefix: PropTypes.node,
  placeholder: PropTypes.string,
  serviceParams: PropTypes.object,
  onTreeCheck: PropTypes.func,
  onTreeSelect: PropTypes.func,
  deviceTreeService: PropTypes.any,
};

export default DeviceTree;