From 227089fcb8f0facbc0d4456f876a75a747ee6af3 Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Fri, 29 May 2020 20:44:30 +0800
Subject: [PATCH] 绩效考核
---
src/components/common/SearchFormView/index.jsx | 249 +++++++++++++++++++++++++++++--------------------
1 files changed, 145 insertions(+), 104 deletions(-)
diff --git a/src/components/common/SearchFormView/index.jsx b/src/components/common/SearchFormView/index.jsx
index dbe59c9..24d7197 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;
+const { RangePicker, MonthPicker } = 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,124 +106,141 @@
});
};
+ //月份选择器
+ 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">
<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 }} 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={size}
+ 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.value}
+ key={item.value}>
+ {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={size}
+ 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={size}
+ 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={size}
+ 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':
+ case 'monthPicker':
return (
- <Col span={24} style={{ marginBottom: '10px' }} />
- );
+ <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' }} />
+ // );
default:
return null;
}
})()}
- </React.Fragment>
+ </Card.Grid>
))}
-
- <Col>
- <Row type="flex" gutter={20} align="middle" align="middle">
+ <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');
@@ -208,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>
@@ -224,11 +267,9 @@
</Col>
}
</Row>
- </Col>
- </Row>
-
+ </Card.Grid>
+ </Card>
</div>
-
<Divider />
</div>
)
--
Gitblit v1.8.0