120 lines
4.0 KiB
TypeScript
120 lines
4.0 KiB
TypeScript
|
'use client'
|
||
|
|
import {Button, Col, Form, Input, Row, Select, Space, theme} from "antd";
|
||
|
|
import React, {useState} from "react";
|
||
|
|
import {DownOutlined} from "@ant-design/icons";
|
||
|
|
import {OperationButtonProps} from "@/app/ui/task/project/OperationButton";
|
||
|
|
|
||
|
|
const AdvancedSearchForm = () => {
|
||
|
|
const { token } = theme.useToken();
|
||
|
|
const [form] = Form.useForm();
|
||
|
|
const [expand, setExpand] = useState(false);
|
||
|
|
const [searchFields, setSearchFields] = useState<any[]>([
|
||
|
|
<Form.Item>
|
||
|
|
<Select
|
||
|
|
defaultValue="state"
|
||
|
|
style={{ width: 120 }}
|
||
|
|
allowClear
|
||
|
|
options={[{ value: 'state', label: '任务状态' }]}
|
||
|
|
/>,
|
||
|
|
<Select
|
||
|
|
defaultValue="="
|
||
|
|
style={{ width: 120 }}
|
||
|
|
allowClear
|
||
|
|
options={[{ value: '=', label: '等于' },{value:'IN',label:"多个选择"}]}
|
||
|
|
/>,
|
||
|
|
<Select
|
||
|
|
mode="tags"
|
||
|
|
defaultValue={['8','9']}
|
||
|
|
style={{ width: 180 }}
|
||
|
|
allowClear
|
||
|
|
options={[{ value: '8', label: '新建' },{ value: '9', label: '进行中' },{ value: '7', label: '完成' },]}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
|
||
|
|
])
|
||
|
|
|
||
|
|
const formStyle: React.CSSProperties = {
|
||
|
|
maxWidth: 'none',
|
||
|
|
background: token.colorFillAlter,
|
||
|
|
borderRadius: token.borderRadiusLG,
|
||
|
|
};
|
||
|
|
|
||
|
|
const getFields = () => {
|
||
|
|
const count = expand ? 10 : 6;
|
||
|
|
const children = [];
|
||
|
|
for (let i = 0; i < count; i++) {
|
||
|
|
children.push(
|
||
|
|
<Col span={8} key={i}>
|
||
|
|
{i % 3 !== 1 ? (
|
||
|
|
<Form.Item
|
||
|
|
name={`field-${i}`}
|
||
|
|
label={`Field ${i}`}
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: 'Input something!',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<Input placeholder="placeholder" />
|
||
|
|
</Form.Item>
|
||
|
|
) : (
|
||
|
|
<Form.Item
|
||
|
|
name={`field-${i}`}
|
||
|
|
label={`Field ${i}`}
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: 'Select something!',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
initialValue="1"
|
||
|
|
>
|
||
|
|
<Select>
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
)}
|
||
|
|
</Col>,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return children;
|
||
|
|
};
|
||
|
|
|
||
|
|
const onFinish = (values: any) => {
|
||
|
|
console.log('Received values of form: ', values);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
|
||
|
|
<Row gutter={24}>{searchFields}</Row>
|
||
|
|
{/*<div style={{ textAlign: 'right' }}>*/}
|
||
|
|
{/* <Space size="small">*/}
|
||
|
|
<Form.Item>
|
||
|
|
<Button type="primary">
|
||
|
|
添加
|
||
|
|
</Button>
|
||
|
|
<Button type="primary" htmlType="submit">
|
||
|
|
搜索
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
onClick={() => {
|
||
|
|
form.resetFields();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
清空
|
||
|
|
</Button>
|
||
|
|
</Form.Item>
|
||
|
|
{/*<a*/}
|
||
|
|
{/* style={{ fontSize: 12 }}*/}
|
||
|
|
{/* onClick={() => {*/}
|
||
|
|
{/* setExpand(!expand);*/}
|
||
|
|
{/* }}*/}
|
||
|
|
{/*><DownOutlined rotate={expand ? 180 : 0} /> Collapse*/}
|
||
|
|
{/*</a>*/}
|
||
|
|
{/* </Space>*/}
|
||
|
|
{/*</div>*/}
|
||
|
|
</Form>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default AdvancedSearchForm;
|