~liuwh/hugeOA.git

			@@ -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>
			)