index.js

import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Spin, Input, Tree, Divider, message, Pagination, 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,
    pagination,
  } = props;

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

  const [treeData, setTreeData] = useState([]);
  const [params, setParams] = useState({});
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(false);
  const [expandedKeys, setExpandedKeys] = useState([]);
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);

  useEffect(() => {
    setParams(serviceParams);
  }, []);

  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;
  };

  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] : [];
        setLoading(false);
        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);
      }
    });
  };

  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 { 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);
  };

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

  const onExpand = (expandedKeysValue) => {
    setExpandedKeys(expandedKeysValue);
  };

  const onPaginationChange = (page) => {
    setParams({ ...params, pageIndex: page });
  };

  return (
    <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`)}>
        <Spin spinning={loading}>
          {!!treeData.length && (
            <Tree
              checkedKeys={checkedKeys}
              expandedKeys={expandedKeys}
              selectedKeys={selectedKeys}
              treeData={treeData}
              onExpand={onExpand}
              onCheck={onCheck}
              onSelect={onSelect}
              checkStrictly
              {...props}
            />
          )}
          {!treeData.length && !loading && <Empty />}
        </Spin>
      </div>
      {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>
      )}
    </div>
  );
};

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

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

export default DeviceTree;