|
|
@@ -1,6 +1,8 @@
|
|
|
import React from 'react'
|
|
|
import PropTypes from 'prop-types'
|
|
|
-import { Modal, Form, Row, Col, Input, Icon, Button, Select, InputNumber, DatePicker, Spin, Divider } from 'antd'
|
|
|
+import { Modal, Form, Row, Col, Input, Icon, Button, Select, InputNumber, DatePicker, Spin, Tag,
|
|
|
+ // Divider
|
|
|
+} from 'antd'
|
|
|
import OPERATORS from './filterOperators.js';
|
|
|
import './filterBox.less'
|
|
|
import * as service from '../../../services/index'
|
|
|
@@ -208,27 +210,71 @@ class FilterBox extends React.Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- getFilterValueField = (key, type, operator, index) => {
|
|
|
+ generateTimeTags = (filter, index, defaultValue) => {
|
|
|
+ const timeTypes = [
|
|
|
+ { dynamic: true, label: '今天', name: 'today', format: () => {console.log(11);return 'today'} },
|
|
|
+ { dynamic: true, label: '昨天', name: 'yesterday' },
|
|
|
+ { dynamic: true, label: '本周', name: 'week' },
|
|
|
+ { dynamic: true, label: '上周', name: 'lastweek' },
|
|
|
+ { dynamic: true, label: '本月', name: 'month' },
|
|
|
+ { dynamic: true, label: '上月', name: 'lastmonth' },
|
|
|
+ { dynamic: true, label: '本季度', name: 'quarter' },
|
|
|
+ { dynamic: true, label: '上季度', name: 'lastquarter' },
|
|
|
+ { dynamic: true, label: '本年', name: 'year' },
|
|
|
+ { dynamic: true, label: '上年', name: 'lastyear' },
|
|
|
+ ]
|
|
|
+ return timeTypes.map(t => <Tag key={t.name} className={`cus-time-tag${defaultValue.name === t.name ? ' current' : ''}`} onClick={() => {
|
|
|
+ this.changeFilterValue(filter, t, index);
|
|
|
+ let obj = {};
|
|
|
+ obj['datePickerOpen' + index] = false;
|
|
|
+ this.setState(obj);
|
|
|
+ }}>{t.label}</Tag>);
|
|
|
+ }
|
|
|
+
|
|
|
+ getFilterValueField = (filter, index) => {
|
|
|
const { columns, fetching } = this.state;
|
|
|
|
|
|
let field;
|
|
|
- const { form } = this.props;
|
|
|
- const filters = form.getFieldValue('filters');
|
|
|
- let filter = filters.filter((f) => {return f.key === key})[0];
|
|
|
+ const { type, operator } = filter;
|
|
|
let column = columns.filter((c) => {return c.name === filter.name});
|
|
|
column = column.length > 0 ? column[0] : { selection: [] };
|
|
|
column.selection = column.selection || [];
|
|
|
|
|
|
- let dropdownOpen = this.state['dropdownOpen-' + filter.key] || false;
|
|
|
+ // let dropdownOpen = this.state['dropdownOpen-' + filter.key] || false;
|
|
|
let columnData = this.state['columnData-' + filter.name] || [];
|
|
|
|
|
|
- const commonProps = { placeholder: '无默认值' }
|
|
|
+ let defaultValue = type==='time' ? ( filter['value' + index] ? ( filter['value' + index].dynamic ? ( filter['value' + index] ) : moment(filter['value' + index]) ) : null ) : filter['value' + index]
|
|
|
+ const commonProps = { placeholder: '无默认值', defaultValue }
|
|
|
if(['index', 'string'].indexOf(type) !== -1) {
|
|
|
field = <Input { ...commonProps } onBlur={(e) => {this.changeFilterValue(filter, e.target.value, index)}}/>
|
|
|
}else if(['scale', 'ordinal'].indexOf(type) !== -1) {
|
|
|
field = <InputNumber { ...commonProps } onBlur={(e) => {this.changeFilterValue(filter, e.target.value, index)}}/>
|
|
|
}else if(type === 'time') {
|
|
|
- field = <DatePicker { ...commonProps } onChange={(value) => {this.changeFilterValue(filter, value, index)}}/>
|
|
|
+ field = <div className='cus-time-picker' >
|
|
|
+ <Input
|
|
|
+ key={Math.random()}
|
|
|
+ suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
|
|
|
+ defaultValue={ commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD') }
|
|
|
+ onFocus={() => {
|
|
|
+ let obj = {};
|
|
|
+ obj['datePickerOpen' + index] = true;
|
|
|
+ this.setState(obj);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <DatePicker
|
|
|
+ key={Math.random()}
|
|
|
+ defaultValue={commonProps.defaultValue.dynamic ? null : commonProps.defaultValue}
|
|
|
+ showToday={false}
|
|
|
+ open={this.state['datePickerOpen' + index]}
|
|
|
+ onOpenChange={status => {
|
|
|
+ let obj = {};
|
|
|
+ obj['datePickerOpen' + index] = status;
|
|
|
+ this.setState(obj);
|
|
|
+ }}
|
|
|
+ onChange={(value) => {this.changeFilterValue(filter, value, index)}}
|
|
|
+ renderExtraFooter={() => this.generateTimeTags(filter, index, commonProps.defaultValue)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
}else if(type === 'categorical') { // 类别
|
|
|
if(operator === 'include' || operator==='notInclude') { // 包含/不包含
|
|
|
field = <Input { ...commonProps } onBlur={(e) => {this.changeFilterValue(filter, e.target.value, index)}}/>
|
|
|
@@ -304,12 +350,12 @@ class FilterBox extends React.Component {
|
|
|
}, 100);
|
|
|
};
|
|
|
|
|
|
- onDropdownVisibleChange = (filter, open) => {
|
|
|
- if (this.lock) return;
|
|
|
- let obj = {};
|
|
|
- obj['dropdownOpen-' + filter.key] = open;
|
|
|
- this.setState(obj);
|
|
|
- };
|
|
|
+ // onDropdownVisibleChange = (filter, open) => {
|
|
|
+ // if (this.lock) return;
|
|
|
+ // let obj = {};
|
|
|
+ // obj['dropdownOpen-' + filter.key] = open;
|
|
|
+ // this.setState(obj);
|
|
|
+ // };
|
|
|
|
|
|
/**
|
|
|
* 生成过滤规则文本
|
|
|
@@ -378,7 +424,7 @@ class FilterBox extends React.Component {
|
|
|
getFieldDecorator('filters', { initialValue: [] });
|
|
|
const filters = getFieldValue('filters');
|
|
|
const filterItems = filters.map((f, index) => {
|
|
|
- let { key, name, type, operator, value1, value2 } = f;
|
|
|
+ let { key, name, type, operator } = f;
|
|
|
return (
|
|
|
<Row key={`filterDiv[${key}]`}>
|
|
|
<Col span={22}>
|
|
|
@@ -448,9 +494,7 @@ class FilterBox extends React.Component {
|
|
|
key={key}
|
|
|
className='filterValueOne'
|
|
|
>
|
|
|
- {getFieldDecorator(`filterValueOne${key}`, {
|
|
|
- initialValue: type==='time' ? ( value1 ? moment(value1) : null) : value1,
|
|
|
- })(this.getFilterValueField(key, type, operator, 1))}
|
|
|
+ {this.getFilterValueField(f, 1)}
|
|
|
</FormItem>
|
|
|
</Col>
|
|
|
{operator==='between' && <Col span={6}>
|
|
|
@@ -458,9 +502,7 @@ class FilterBox extends React.Component {
|
|
|
key={key}
|
|
|
className='filterValueTwo'
|
|
|
>
|
|
|
- {getFieldDecorator(`filterValueTwo${key}`, {
|
|
|
- initialValue: type==='time' ? ( value2 ? moment(value2) : null) : value2,
|
|
|
- })(this.getFilterValueField(key, type, operator, 2))}
|
|
|
+ {this.getFilterValueField(f, 2)}
|
|
|
</FormItem>
|
|
|
</Col>}
|
|
|
</Col>
|
zhuth