Basic.tsx 2.74 KB
// @ts-ignore
import React, { useEffect, useState } from 'react';
import PandaDeviceTree from '../index';
import request from 'umi-request';

const Demo = () => {
  const [treeData, setTreeData] = useState([]);
  const [expandedKeys, setExpandedKeys] = useState(null);
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const fetchData = (params = {}) => {
    // eslint-disable-next-line no-use-before-define
    request(`${baseUrl}/Publish/Monitor/Device/DeviceTree`, {
      method: 'post',
      data: {
        PageIndex: 1,
        PageSize: 500,
        deviceTypes: '二供泵房,二供机组',
        getChild: true,
        userID: 1,
        queryInfo: params.queryInfo || '',
        sortFields: '',
        direction: '',
        isTop: true,
      },
    }).then(function (response) {
      // eslint-disable-next-line no-nested-ternary
      const data = response.data
        ? response.data.list && response.data.list.length > 0
          ? response.data.list[0].DeviceList
          : []
        : [];
      // eslint-disable-next-line no-use-before-define
      setTreeData(handleData(data));
    });
  };

  const handleData = (data) => {
    // eslint-disable-next-line array-callback-return
    data.map((item) => {
      // eslint-disable-next-line no-param-reassign
      item.title = item.DeviceName;
      // eslint-disable-next-line no-param-reassign
      item.key = item.StationID;
      // eslint-disable-next-line no-param-reassign
      item.children = handleData(item.children);
    });
    return data;
  };

  useEffect(() => {
    fetchData();
  }, []);

  const onExpand = (expandedKeysValue) => {
    console.log('onExpand', expandedKeysValue);
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue, info) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  const onSearch = (e) => {
    if (e.type == 'keydown') {
      fetchData({ queryInfo: e.target.value });
    }
    console.log(e.type, 'e.type');
    console.log(e.target.value, 'e.target.value');
  };

  return (
    <PandaDeviceTree
      onSearch={onSearch}
      checkable
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={treeData}
    />
  );
};

export default Demo;

const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';