76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Form,
|
|
Input,
|
|
Button,
|
|
Grid,
|
|
Space, Divider, Select
|
|
} from '@arco-design/web-react';
|
|
import {IconRefresh, IconSearch} from '@arco-design/web-react/icon';
|
|
import {statusDict} from "@/enum/dict";
|
|
|
|
const {Row, Col} = Grid;
|
|
const {useForm} = Form;
|
|
|
|
function SearchForm(props: {
|
|
onSearch: (values: Record<string, any>) => void;
|
|
}) {
|
|
const [form] = useForm();
|
|
|
|
const handleSubmit = () => {
|
|
const values = form.getFieldsValue();
|
|
props.onSearch(values);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
form.resetFields();
|
|
props.onSearch({});
|
|
};
|
|
|
|
const colSpan = 6
|
|
|
|
return (
|
|
<>
|
|
<Form
|
|
form={form}
|
|
labelCol={{span: 5}}
|
|
wrapperCol={{span: 19}}
|
|
labelAlign="left"
|
|
>
|
|
<Row gutter={24}>
|
|
<Col span={colSpan}>
|
|
<Form.Item label="账号" field="account">
|
|
<Input placeholder="请输入账号" allowClear/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={colSpan}>
|
|
<Form.Item label="昵称" field="name">
|
|
<Input placeholder="请输入昵称" allowClear/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={colSpan}>
|
|
<Form.Item label="状态" field="status">
|
|
<Select placeholder="请选择" options={statusDict} allowClear/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={colSpan}>
|
|
<Form.Item>
|
|
<Space>
|
|
<Button type="primary" icon={<IconSearch/>} onClick={handleSubmit}>
|
|
搜索
|
|
</Button>
|
|
<Button icon={<IconRefresh/>} onClick={handleReset}>
|
|
重置
|
|
</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
<Divider style={{margin: '0 0 20px 0'}}/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SearchForm;
|