Basic.tsx 2.84 KB
Newer Older
邓晓峰's avatar
邓晓峰 committed
1
// @ts-ignore
涂茜's avatar
涂茜 committed
2 3 4 5 6 7 8 9 10 11 12 13
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 = {}) => {
邓晓峰's avatar
邓晓峰 committed
14
    // eslint-disable-next-line no-use-before-define
涂茜's avatar
涂茜 committed
15
    request(`${baseUrl}/Publish/GCK/Device/DeviceTree`, {
涂茜's avatar
涂茜 committed
16 17
      method: 'post',
      data: {
涂茜's avatar
涂茜 committed
18 19
        pageIndex: 1,
        pageSize: 500,
涂茜's avatar
涂茜 committed
20 21 22 23 24 25 26 27 28
        deviceTypes: '二供泵房,二供机组',
        getChild: true,
        userID: 1,
        queryInfo: params.queryInfo || '',
        sortFields: '',
        direction: '',
        isTop: true,
      },
    }).then(function (response) {
邓晓峰's avatar
邓晓峰 committed
29 30
      // eslint-disable-next-line no-nested-ternary
      const data = response.data
涂茜's avatar
涂茜 committed
31
        ? response.data.list && response.data.list.length > 0
涂茜's avatar
涂茜 committed
32
          ? response.data.list[0].deviceList
涂茜's avatar
涂茜 committed
33 34
          : []
        : [];
邓晓峰's avatar
邓晓峰 committed
35
      // eslint-disable-next-line no-use-before-define
涂茜's avatar
涂茜 committed
36 37 38 39 40
      setTreeData(handleData(data));
    });
  };

  const handleData = (data) => {
邓晓峰's avatar
邓晓峰 committed
41
    // eslint-disable-next-line array-callback-return
涂茜's avatar
涂茜 committed
42
    data.map((item) => {
邓晓峰's avatar
邓晓峰 committed
43
      // eslint-disable-next-line no-param-reassign
涂茜's avatar
涂茜 committed
44
      item.title = item.deviceName;
邓晓峰's avatar
邓晓峰 committed
45
      // eslint-disable-next-line no-param-reassign
涂茜's avatar
涂茜 committed
46
      item.key = item.stationID;
邓晓峰's avatar
邓晓峰 committed
47
      // eslint-disable-next-line no-param-reassign
涂茜's avatar
涂茜 committed
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
      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 (
涂茜's avatar
涂茜 committed
82
    <div style={{ width: '200px', height: '400px', border: '1px solid #eee' }}>
涂茜's avatar
涂茜 committed
83 84 85 86 87 88 89 90 91 92 93 94 95
      <PandaDeviceTree
        onSearch={onSearch}
        checkable
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onCheck={onCheck}
        checkedKeys={checkedKeys}
        onSelect={onSelect}
        selectedKeys={selectedKeys}
        treeData={treeData}
      />
    </div>
涂茜's avatar
涂茜 committed
96 97 98 99 100
  );
};

export default Demo;

涂茜's avatar
涂茜 committed
101
const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';