shptjs/src/views/Ptjs/Czdbl/toolbar.js

51 lines
1.5 KiB
JavaScript

import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import NormalSelect from '../../../components/Form/NormalSelect';
import dayjs from 'dayjs';
const { RangePicker } = DatePicker;
const ToolBar = ({ setToolVal }) => {
const [form] = Form.useForm();
const onFinish = (values) => {
if (values.operTime) {
values.stm = values.operTime[0] ? dayjs(values.operTime[0]).format('YYYY-MM-DD') : "";
values.etm = values.operTime[1] ? dayjs(values.operTime[1]).format('YYYY-MM-DD') : "";
delete values.operTime
}
setToolVal(values);
}
useEffect(() => {
const defaultValue = [
dayjs().subtract(10, 'days'),
dayjs().subtract(1,'days')
]
form.setFieldsValue({ operTime: defaultValue })
setToolVal({stm:defaultValue[0].format('YYYY-MM-DD'), etm:defaultValue[1].format('YYYY-MM-DD')})
}, []);
return (
<div className='pageToolBar'>
<Form form={form} onFinish={onFinish} size='Default' layout="inline">
<Form.Item label="监测时间" name="operTime">
<RangePicker
placeholder={['开始日期', '结束日期']}
format='YYYY-MM-DD'
style={{ width: 300 }}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" size='Default'>查询</Button>
</Form.Item>
<Form.Item>
<Button size='Default' onClick={()=>form.resetFields()}>重置</Button>
</Form.Item>
</Form>
</div>
);
}
export default ToolBar;