From cb0a06de99bd629c2021e3d9b32fe8eae8c54879 Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Wed, 24 Jun 2020 17:36:39 +0800
Subject: [PATCH] 文本回填
---
src/components/common/SearchFormView/index.jsx | 73 +++++++++++++++++++++++++-----------
1 files changed, 51 insertions(+), 22 deletions(-)
diff --git a/src/components/common/SearchFormView/index.jsx b/src/components/common/SearchFormView/index.jsx
index f187baa..24d7197 100644
--- a/src/components/common/SearchFormView/index.jsx
+++ b/src/components/common/SearchFormView/index.jsx
@@ -9,7 +9,7 @@
import { Row, Col, Form, Input, Button, Select, DatePicker, Divider, Card } from 'antd';
import moment from 'moment';
-const { RangePicker } = DatePicker;
+const { RangePicker, MonthPicker } = DatePicker;
import './index.scss';
// data参数：数据模板
@@ -106,8 +106,17 @@
});
};
+ //月份选择器
+ monthPickerChange = (name, m, d) => {
+ this.props.setFormData({
+ ...this.props.formData,
+ [name]: d
+ })
+ }
+
render() {
- const { formData = {}, data = [], children } = this.props;
+ const { formData = {}, data = [], children, width = "25%", showReset = true } = this.props;
+ let size = 'default';
return (
<div className="search-form-view-main">
@@ -116,24 +125,24 @@
{data.length > 0 &&
data.map((item, idx) => (
- <Card.Grid key={idx} style={{ width: '20%' }} hoverable={false} >
+ <Card.Grid key={idx} style={{ width }} hoverable={false} >
{(() => {
switch (item.type) {
case 'select':
return (
<Form.Item label={item.label}>
<Select
- size="small"
+ size={size}
style={{ width: '100%' }}
placeholder={item.name}
value={formData[item.key]}
- allowClear
+ // allowClear
onChange={this.handleSelectChange(item.key)}>
{item.list &&
item.list.map(item => (
<Select.Option
- value={item.id}
- key={item.id}>
+ value={item.value}
+ key={item.value}>
{item.name}
</Select.Option>
))}
@@ -144,7 +153,7 @@
return (
<Form.Item label={item.label}>
<Input
- size="small"
+ size={size}
placeholder={item.name}
name={item.key}
value={formData[item.key]}
@@ -156,7 +165,7 @@
return (
<Form.Item label={item.label}>
<DatePicker
- size="small"
+ size={size}
style={{ width: '100%' }}
placeholder={item.name}
onChange={(date, dateString) => {
@@ -170,8 +179,8 @@
return (
<Form.Item label={item.label}>
<RangePicker
- style={{ width: '100%'}}
- size="small"
+ style={{ width: '100%' }}
+ size={size}
ranges={{
Today: [moment(), moment()],
'This Month': [
@@ -200,6 +209,23 @@
/>
</Form.Item>
);
+ case 'monthPicker':
+ return (
+ <Form.Item label={item.label}>
+ <MonthPicker
+ style={{ width: '100%' }}
+ size={size}
+ placeholder={item.name}
+ onChange={(date, dateString) => {
+ console.log(date, dateString);
+ this.monthPickerChange(item.key, date, dateString);
+ }}
+ disabledDate={item.disabledDate || false}
+ value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM') : undefined}
+ />
+ </Form.Item>
+
+ )
// case 'br':
// return (
// <Col span={24} style={{ marginBottom: '10px' }} />
@@ -210,11 +236,11 @@
})()}
</Card.Grid>
))}
- <Card.Grid style={{ width: '20%' }}>
+ <Card.Grid style={{ width }}>
<Row type="flex" gutter={20} align="middle" align="middle" style={{ height: 40 }}>
<Col>
<Button
- size="small"
+ size={size}
type="primary"
onClick={() => {
this.onClick('search');
@@ -222,15 +248,18 @@
查询
</Button>
</Col>
- <Col>
- <Button
- size="small"
- onClick={() => {
- this.onClick('reset');
- }}>
- 重置
- </Button>
- </Col>
+ {
+ showReset ?
+ <Col>
+ <Button
+ size={size}
+ onClick={() => {
+ this.onClick('reset');
+ }}>
+ 重置
+ </Button>
+ </Col> : null
+ }
{
children &&
<Col>
--
Gitblit v1.8.0