// @ts-ignore 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 = () => { request(baseUrl + '/Publish/GCK/Device/GetQuotaList', { method: 'get', params: { accountName: '二供泵房', addrSchemeID: '', }, }) .then(function (response) { if (response.code == '0') { let curData = response.data; setQuotaList(curData); } }) .catch(function (error) { console.log(error); }); }; useEffect(() => { fetchData(); }, []); const onModalOk = () => { console.log('onModalOk'); }; const onModalClose = () => { console.log('onModalClose'); }; const onModalCancel = () => { setSelectData([]); console.log('onModalCancel'); }; const onCheckboxChange = ({ selectList }) => { setSelectData(selectList); console.log(selectList, 'onCheckboxChange'); }; const onCancelSelect = ({ selectList }) => { setSelectData(selectList); console.log(selectList, 'onCancelSelect'); }; const onTreeDrop = ({ selectList }) => { setSelectData(selectList); console.log(selectList, 'onTreeDrop'); }; return ( <PandaQuotaSelect buttonProps={{ icon: <UnorderedListOutlined />, children: `指标选择(${selectData.length})`, }} onModalCancel={onModalCancel} onModalOk={onModalOk} onModalClose={onModalClose} maximum={3} dataSource={quotaList} selectData={selectData} onCheckboxChange={onCheckboxChange} onCancelSelect={onCancelSelect} onTreeDrop={onTreeDrop} /> ); }; export default Demo; const baseUrl = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api';