From c0c820559b46f3a5ede6fbd7f66e77d09981829f Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Wed, 29 Apr 2020 11:56:31 +0800
Subject: [PATCH] 提升菜单栏体验，升级公共查询表单组件
---
src/components/common/SearchFormView/index.jsx | 200 ++++++++++++++++++++++++++-----------------------
1 files changed, 106 insertions(+), 94 deletions(-)
diff --git a/src/components/common/SearchFormView/index.jsx b/src/components/common/SearchFormView/index.jsx
index dbe59c9..f187baa 100644
--- a/src/components/common/SearchFormView/index.jsx
+++ b/src/components/common/SearchFormView/index.jsx
@@ -6,13 +6,37 @@
/** 表单搜索组件 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
-import { Row, Col, Form, Input, Button, Select, DatePicker, Divider } from 'antd';
+import { Row, Col, Form, Input, Button, Select, DatePicker, Divider, Card } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
import './index.scss';
-
+// data参数：数据模板
+// [
+// { type: 'input', name: '姓名', label: '姓名', key: 'name' }, //inpu类型
+// {
+// type: 'select',
+// name: '所属部门',
+// label: '所属部门',
+// key: 'deptId',
+// desc: 'deptName',
+// list: [{ name: '1', value: '选项1' }, { name: '2', value: '选项2' }],
+// }, //select 类型
+// {
+// type: 'rangePicker',
+// label: '时间范围',
+// name: JSON.stringify(['开始时间', '结束时间']),
+// key: JSON.stringify(['startTime', 'endTime']),
+// keylistName: 'rangeTimelist',
+// }, //时间范围选择器
+// {
+// type: 'datePicker',
+// label: '指定时间',
+// name: '指定日期',
+// key: 'date'
+// } //时间选择器
+// ]
export default class SearchFormView extends Component {
constructor(props) {
super(props);
@@ -27,7 +51,6 @@
componentDidMount() { }
onClick = type => {
- const { pathName } = this.props;
let data;
switch (type) {
case 'search':
@@ -83,121 +106,112 @@
});
};
-
render() {
const { formData = {}, data = [], children } = this.props;
return (
<div className="search-form-view-main">
<div className="search-form-view-main-margin-bottom">
- <Row type="flex" align="middle" gutter={20}>
+ <Card bordered={false}>
{data.length > 0 &&
data.map((item, idx) => (
- <React.Fragment key={idx}>
+ <Card.Grid key={idx} style={{ width: '20%' }} hoverable={false} >
{(() => {
switch (item.type) {
case 'select':
return (
- <Col span={4}>
- <Form.Item label={item.label}>
- <Select
- size="small"
- style={{ width: '100%' }}
- placeholder={item.name}
- value={formData[item.key]}
- allowClear
- onChange={this.handleSelectChange(item.key)}>
- {item.list &&
- item.list.map(item => (
- <Select.Option
- value={item.id}
- key={item.id}>
- {item.name}
- </Select.Option>
- ))}
- </Select>
- </Form.Item>
- </Col>
+ <Form.Item label={item.label}>
+ <Select
+ size="small"
+ style={{ width: '100%' }}
+ placeholder={item.name}
+ value={formData[item.key]}
+ allowClear
+ onChange={this.handleSelectChange(item.key)}>
+ {item.list &&
+ item.list.map(item => (
+ <Select.Option
+ value={item.id}
+ key={item.id}>
+ {item.name}
+ </Select.Option>
+ ))}
+ </Select>
+ </Form.Item>
);
case 'input':
return (
- <Col span={4}>
- <Form.Item label={item.label}>
- <Input
- size="small"
- placeholder={item.name}
- name={item.key}
- value={formData[item.key]}
- onChange={this.handleInput}
- />
- </Form.Item>
- </Col>
+ <Form.Item label={item.label}>
+ <Input
+ size="small"
+ placeholder={item.name}
+ name={item.key}
+ value={formData[item.key]}
+ onChange={this.handleInput}
+ />
+ </Form.Item>
);
case 'datePicker':
return (
- <Col span={4}>
- <Form.Item label={item.label}>
- <DatePicker
- size="small"
- style={{ width: '100%' }}
- placeholder={item.name}
- onChange={(date, dateString) => {
- this.datePickerChange(item.key, dateString);
- }}
- value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM-DD') : undefined}
- />
- </Form.Item>
- </Col>
+ <Form.Item label={item.label}>
+ <DatePicker
+ size="small"
+ style={{ width: '100%' }}
+ placeholder={item.name}
+ onChange={(date, dateString) => {
+ this.datePickerChange(item.key, dateString);
+ }}
+ value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM-DD') : undefined}
+ />
+ </Form.Item>
);
case 'rangePicker':
return (
- <Col span={6}>
- <Form.Item label={item.label}>
- <RangePicker
- size="small"
- ranges={{
- Today: [moment(), moment()],
- 'This Month': [
- moment().startOf('month'),
- moment().endOf('month'),
- ],
- }}
- value={
- item.keylistName &&
- formData[item.keylistName] &&
- typeof formData[item.keylistName] == 'string'
- ? formData[item.keylistName]
- .split(',')
- .map(item => moment(item, 'YYYY-MM-DD'))
- : []
- }
- onChange={(date, dateString) => {
- this.rangePickerChange(
- item.keylistName,
- item.key,
- date,
- dateString
- );
- }}
- placeholder={JSON.parse(item.name)}
- />
- </Form.Item>
- </Col>
+ <Form.Item label={item.label}>
+ <RangePicker
+ style={{ width: '100%'}}
+ size="small"
+ ranges={{
+ Today: [moment(), moment()],
+ 'This Month': [
+ moment().startOf('month'),
+ moment().endOf('month'),
+ ],
+ }}
+ value={
+ item.keylistName &&
+ formData[item.keylistName] &&
+ typeof formData[item.keylistName] == 'string'
+ ? formData[item.keylistName]
+ .split(',')
+ .map(item => moment(item, 'YYYY-MM-DD'))
+ : []
+ }
+ onChange={(date, dateString) => {
+ this.rangePickerChange(
+ item.keylistName,
+ item.key,
+ date,
+ dateString
+ );
+ }}
+ placeholder={JSON.parse(item.name)}
+ />
+ </Form.Item>
);
- case 'br':
- return (
- <Col span={24} style={{ marginBottom: '10px' }} />
- );
+ // case 'br':
+ // return (
+ // <Col span={24} style={{ marginBottom: '10px' }} />
+ // );
default:
return null;
}
})()}
- </React.Fragment>
+ </Card.Grid>
))}
-
- <Col>
- <Row type="flex" gutter={20} align="middle" align="middle">
+ <Card.Grid style={{ width: '20%' }}>
+ <Row type="flex" gutter={20} align="middle" align="middle" style={{ height: 40 }}>
<Col>
<Button
size="small"
@@ -224,11 +238,9 @@
</Col>
}
</Row>
- </Col>
- </Row>
-
+ </Card.Grid>
+ </Card>
</div>
-
<Divider />
</div>
)
--
Gitblit v1.8.0