Basic.tsx 1.97 KB
Newer Older
邓晓峰's avatar
邓晓峰 committed
1
// @ts-ignore
涂茜's avatar
涂茜 committed
2 3 4 5 6 7 8 9 10 11
import React, { useEffect, useState } from 'react';
import request from 'umi-request';
import { UnorderedListOutlined, SearchOutlined } from '@ant-design/icons';
import PandaQuotaSelect from '../index';

const Demo = () => {
  const [quotaList, setQuotaList] = useState([]);
  const [selectData, setSelectData] = useState([]);

  const fetchData = () => {
涂茜's avatar
涂茜 committed
12
    request(baseUrl + '/Publish/GCK/Device/GetQuotaList', {
涂茜's avatar
涂茜 committed
13 14 15 16 17 18 19 20
      method: 'get',
      params: {
        accountName: '二供泵房',
        addrSchemeID: '',
      },
    })
      .then(function (response) {
        if (response.code == '0') {
涂茜's avatar
涂茜 committed
21
          let curData = response.data;
涂茜's avatar
涂茜 committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
          setQuotaList(curData);
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

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

  const onModalOk = () => {
    console.log('onModalOk');
  };

38 39 40 41
  const onModalClose = () => {
    console.log('onModalClose');
  };

涂茜's avatar
涂茜 committed
42 43 44 45 46
  const onModalCancel = () => {
    setSelectData([]);
    console.log('onModalCancel');
  };

涂茜's avatar
涂茜 committed
47 48 49
  const onCheckboxChange = ({ selectList }) => {
    setSelectData(selectList);
    console.log(selectList, 'onCheckboxChange');
涂茜's avatar
涂茜 committed
50 51
  };

涂茜's avatar
涂茜 committed
52 53 54
  const onCancelSelect = ({ selectList }) => {
    setSelectData(selectList);
    console.log(selectList, 'onCancelSelect');
涂茜's avatar
涂茜 committed
55 56
  };

涂茜's avatar
涂茜 committed
57 58 59
  const onTreeDrop = ({ selectList }) => {
    setSelectData(selectList);
    console.log(selectList, 'onTreeDrop');
涂茜's avatar
涂茜 committed
60 61 62 63 64 65 66 67 68 69
  };

  return (
    <PandaQuotaSelect
      buttonProps={{
        icon: <UnorderedListOutlined />,
        children: `指标选择(${selectData.length})`,
      }}
      onModalCancel={onModalCancel}
      onModalOk={onModalOk}
70
      onModalClose={onModalClose}
涂茜's avatar
涂茜 committed
71 72 73 74 75
      maximum={3}
      dataSource={quotaList}
      selectData={selectData}
      onCheckboxChange={onCheckboxChange}
      onCancelSelect={onCancelSelect}
涂茜's avatar
涂茜 committed
76
      onTreeDrop={onTreeDrop}
涂茜's avatar
涂茜 committed
77 78 79 80 81 82
    />
  );
};

export default Demo;

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