New file |
| | |
| | | |
| | | const Main = () => { |
| | | const [searchText, setSearchText] = useState(''); |
| | | const [searchedColumn, setSearchedColumn] = useState(''); |
| | | const searchInput = useRef(null); |
| | | const getColumnSearchProps = (dataIndex) => ({ |
| | | filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => ( |
| | | <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}> |
| | | <Input |
| | | ref={searchInput} |
| | | placeholder={`Search ${dataIndex}`} |
| | | value={selectedKeys[0]} |
| | | onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} |
| | | onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)} |
| | | style={{ marginBottom: 8, display: 'block' }} |
| | | /> |
| | | <Space> |
| | | <Button |
| | | type="primary" |
| | | onClick={() => handleSearch(selectedKeys, confirm, dataIndex)} |
| | | icon={<SearchOutlined />} |
| | | size="small" |
| | | style={{ width: 90 }} |
| | | > |
| | | Search |
| | | </Button> |
| | | <Button |
| | | onClick={() => clearFilters && handleReset(clearFilters)} |
| | | size="small" |
| | | style={{ width: 90 }} |
| | | > |
| | | Reset |
| | | </Button> |
| | | <Button |
| | | type="link" |
| | | size="small" |
| | | onClick={() => { |
| | | confirm({ closeDropdown: false }); |
| | | setSearchText((selectedKeys)[0]); |
| | | setSearchedColumn(dataIndex); |
| | | }} |
| | | > |
| | | Filter |
| | | </Button> |
| | | <Button |
| | | type="link" |
| | | size="small" |
| | | onClick={() => { |
| | | close(); |
| | | }} |
| | | > |
| | | close |
| | | </Button> |
| | | </Space> |
| | | </div> |
| | | ), |
| | | filterIcon: (filtered) => ( |
| | | <SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} /> |
| | | ), |
| | | onFilter: (value, record) => |
| | | record[dataIndex] |
| | | .toString() |
| | | .toLowerCase() |
| | | .includes((value).toLowerCase()), |
| | | onFilterDropdownOpenChange: (visible) => { |
| | | if (visible) { |
| | | setTimeout(() => searchInput.current?.select(), 100); |
| | | } |
| | | }, |
| | | render: (text) => |
| | | searchedColumn === dataIndex ? ( |
| | | <Highlighter |
| | | highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }} |
| | | searchWords={[searchText]} |
| | | autoEscape |
| | | textToHighlight={text ? text.toString() : ''} |
| | | /> |
| | | ) : ( |
| | | text |
| | | ), |
| | | }); |
| | | } |
| | | |
| | | export default Main; |
| | |
| | | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import { useIntl, FormattedMessage } from '@umijs/max'; |
| | | import { Button, message, Modal } from 'antd'; |
| | | import { Button, message, Modal, Input, Space } from 'antd'; |
| | | import { |
| | | FooterToolbar, PageContainer, ProTable, LightFilter, |
| | | FooterToolbar, |
| | | PageContainer, |
| | | ProTable, |
| | | LightFilter, |
| | | ProFormDatePicker, |
| | | } from '@ant-design/pro-components'; |
| | | import { PlusOutlined, ExportOutlined } from '@ant-design/icons'; |
| | | import { PlusOutlined, ExportOutlined, SearchOutlined } from '@ant-design/icons'; |
| | | import Http from '@/utils/http'; |
| | | import Edit from './components/edit' |
| | | |
| | | |
| | | const handleSave = async (val) => { |
| | | const hide = message.loading('正在添加'); |
| | |
| | | } |
| | | }; |
| | | |
| | | |
| | | const Main = () => { |
| | | const formTableRef = useRef(); |
| | | const actionRef = useRef(); |