filterBox时间介于组件使用RangePicker

src/components/chartDesigner/header.jsx

@@ -117,10 +117,10 @@ class Header extends React.Component {
                                 let status, help;
                                 if(val.trim().length === 0) {
                                     status = 'error';
-                                    help = '数据源名称不能为空';
+                                    help = '图表名称不能为空';
                                 }else if(val.trim().length > 50) {
                                     status = 'error';
-                                    help = '数据源名称不能超过50个字符';
+                                    help = '图表名称不能超过50个字符';
                                 }else {
                                     status = 'success';
                                     help = '';

src/components/common/dataPreview/dataPreview.jsx

@@ -21,7 +21,6 @@ class DataPreview extends React.Component {
 
     componentDidMount() {
         const { fetchFunction } = this.props;
-        window.setTimeout(this.onWindowResize, 200);
         window.addEventListener('resize', this.onWindowResize);
         typeof fetchFunction === 'function' && fetchFunction();
     }

src/components/common/filterBox/filter.jsx

@@ -6,6 +6,7 @@ import moment from 'moment'
 import './filter.less'
 const { Option: SelectOption } = Select
 const FormItem = Form.Item
+const { RangePicker } = DatePicker
 
 class Filter extends React.Component {
     constructor(props) {
@@ -22,14 +23,14 @@ class Filter extends React.Component {
 
     generatFilter = () => {
         const { filter } = this.props;
-        const { label, operator, operatorLabel } = filter;
+        const { label, type, operator, operatorLabel } = filter;
         
         return <div className='filter'>
             <span className='filter-name'>{label + ' ' + operatorLabel + ' : '}</span>
             <FormItem className='filter-value filter-value1'>
                 { this.generateValueItem(filter, 1) }
             </FormItem>
-            { operator === 'between' && <FormItem className='filter-value filter-value2'>
+            { operator === 'between' && type !== 'time' && <FormItem className='filter-value filter-value2'>
                 { this.generateValueItem(filter, 2) }
             </FormItem> }
         </div>
@@ -39,7 +40,12 @@ class Filter extends React.Component {
         const { fetching, columnData, dropdownOpen } = this.state;
         let field;
         const { key, type, operator } = filter;
-        let defaultValue = type==='time' ? ( filter['value' + index] ? ( filter['value' + index].dynamic ? ( filter['value' + index] ) : moment(filter['value' + index]) ) : null ) : filter['value' + index]
+        let defaultValue = type==='time' ? (
+            operator === 'between' ? (
+                filter['value1'] ? [filter['value1'], filter['value2']] : null
+            ) :
+            (filter['value' + index] ? ( filter['value' + index].dynamic ? ( filter['value' + index] ) : moment(filter['value' + index]) ) : null)
+        ) : filter['value' + index];
         const commonProps = { defaultValue }
 
         if(['index', 'string'].indexOf(type) !== -1) {
@@ -64,38 +70,57 @@ class Filter extends React.Component {
                 }
             }}/>
         }else if(type === 'time') {
-            field = <div className='cus-time-picker' >
-                <Input
-                    key={Math.random()}
-                    allowClear
-                    // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
-                    defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
-                    onFocus={() => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = true;
-                        this.setState(obj);
+            if(operator === 'between') {
+                field = <RangePicker
+                    defaultValue={defaultValue}
+                    ranges={{
+                        '今天': [moment().startOf('day'), moment().endOf('day')],
+                        '本月': [moment().startOf('month'), moment().endOf('month')],
+                        '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
+                        '近半年': [moment().subtract(6, "months").startOf('day'), moment().endOf('day')],
+                        '本年': [moment().startOf('year'), moment().endOf('year')],
+                        '上年': [moment().subtract(1, "years").startOf('year'), moment().subtract(1, "years").endOf('year')],
                     }}
-                    onChange={() => {
-                        // 因为onFocus方法弹出了浮层，onChange方法只在点击清楚图标时会调用（相当于不可编辑的input），所以这里只做清除
-                        this.changeFilterValue(filter, null, index)
-                    }}
-                />
-                <DatePicker
-                    key={Math.random()}
-                    defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
-                    showToday={operator !== '='}
-                    open={this.state['datePickerOpen' + index]}
-                    onOpenChange={status => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = status;
-                        this.setState(obj);
+                    showTime={false}
+                    format="YYYY-MM-DD"
+                    onChange={values => {
+                        this.changeFilterValues(filter, [values[0], values[1]]);
                     }}
-                    getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
-                    onChange={(value) => {this.changeFilterValue(filter, value, index)}}
-                    renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
-                />
-            </div>
-
+                >
+                </RangePicker>
+            }else {
+                field = <div className='cus-time-picker' >
+                    <Input
+                        key={Math.random()}
+                        allowClear
+                        // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
+                        defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
+                        onFocus={() => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = true;
+                            this.setState(obj);
+                        }}
+                        onChange={() => {
+                            // 因为onFocus方法弹出了浮层，onChange方法只在点击清除图标时会调用（相当于不可编辑的input），所以这里只做清除
+                            this.changeFilterValue(filter, null, index)
+                        }}
+                    />
+                    <DatePicker
+                        key={Math.random()}
+                        defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
+                        showToday={operator !== '='}
+                        open={this.state['datePickerOpen' + index]}
+                        onOpenChange={status => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = status;
+                            this.setState(obj);
+                        }}
+                        getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
+                        onChange={(value) => {this.changeFilterValue(filter, value, index)}}
+                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
+                    />
+                </div>
+            }
         }else if(type === 'categorical') { // 类别
             if(operator === 'include' || operator==='notInclude') { // 包含/不包含
                 field = <Input key={Math.random()} { ...commonProps } onBlur={(e) => {
@@ -216,6 +241,15 @@ class Filter extends React.Component {
         }
     }
 
+    changeFilterValues = (filter, values) => {
+        const { changeFilterValue: propsChangeFilterValue } = this.props;
+        filter['value1'] = values[0];
+        filter['value2'] = values[1];
+        if(propsChangeFilterValue && typeof propsChangeFilterValue === 'function') {
+            propsChangeFilterValue({ ...filter });
+        }
+    }
+
     fetchColumnData = (filter, options) => {
         const { keyword, mandatory } = options || {};
         const { code } = this.props;

src/components/common/filterBox/filter2.jsx

@@ -6,6 +6,7 @@ import moment from 'moment'
 import './filter.less'
 const { Option: SelectOption } = Select
 const FormItem = Form.Item
+const { RangePicker } = DatePicker
 
 class Filter extends React.Component {
     constructor(props) {
@@ -19,14 +20,14 @@ class Filter extends React.Component {
 
     generatFilter = () => {
         const { filter } = this.props;
-        const { label, operator, operatorLabel } = filter;
+        const { label, type, operator, operatorLabel } = filter;
         
         return <div className='filter'>
             <span className='filter-name'>{label + ' ' + operatorLabel + ' : '}</span>
             <FormItem className='filter-value filter-value1'>
                 { this.generateValueItem(filter, 1) }
             </FormItem>
-            { operator === 'between' && <FormItem className='filter-value filter-value2'>
+            { operator === 'between' && type !== 'time' && <FormItem className='filter-value filter-value2'>
                 { this.generateValueItem(filter, 2) }
             </FormItem> }
         </div>
@@ -54,7 +55,12 @@ class Filter extends React.Component {
         let field;
         let { key, type, operator } = filter;
 
-        let defaultValue = type==='time' ? ( filter['value' + index] ? ( filter['value' + index].dynamic ? ( filter['value' + index] ) : moment(filter['value' + index]) ) : null ) : filter['value' + index]
+        let defaultValue = type==='time' ? (
+            operator === 'between' ? (
+                filter['value1'] ? [filter['value1'], filter['value2']] : null
+            ) :
+            (filter['value' + index] ? ( filter['value' + index].dynamic ? ( filter['value' + index] ) : moment(filter['value' + index]) ) : null)
+        ) : filter['value' + index];
         const commonProps = { defaultValue }
 
         if(['index', 'string'].indexOf(type) !== -1) {
@@ -78,37 +84,57 @@ class Filter extends React.Component {
                 }
             }}/>
         }else if(type === 'time') {
-            field = <div className='cus-time-picker' >
-                <Input
-                    key={Math.random()}
-                    allowClear
-                    // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
-                    defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
-                    onFocus={(e) => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = true;
-                        this.setState(obj);
+            if(operator === 'between') {
+                field = <RangePicker
+                    defaultValue={defaultValue}
+                    ranges={{
+                        '今天': [moment().startOf('day'), moment().endOf('day')],
+                        '本月': [moment().startOf('month'), moment().endOf('month')],
+                        '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
+                        '近半年': [moment().subtract(6, "months").startOf('day'), moment().endOf('day')],
+                        '本年': [moment().startOf('year'), moment().endOf('year')],
+                        '上年': [moment().subtract(1, "years").startOf('year'), moment().subtract(1, "years").endOf('year')],
                     }}
-                    onChange={() => {
-                        // 因为onFocus方法弹出了浮层，onChange方法只在点击清楚图标时会调用（相当于不可编辑的input），所以这里只做清除
-                        this.changeFilterValue(filter, null, index)
-                    }}
-                />
-                <DatePicker
-                    key={Math.random()}
-                    defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
-                    showToday={operator !== '='}
-                    open={this.state['datePickerOpen' + index]}
-                    onOpenChange={status => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = status;
-                        this.setState(obj);
+                    showTime={false}
+                    format="YYYY-MM-DD"
+                    onChange={values => {
+                        this.changeFilterValues(filter, [values[0], values[1]]);
                     }}
-                    getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
-                    onChange={(value) => {this.changeFilterValue(filter, value, index)}}
-                    renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
-                />
-            </div>
+                >
+                </RangePicker>
+            }else {
+                field = <div className='cus-time-picker' >
+                    <Input
+                        key={Math.random()}
+                        allowClear
+                        // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
+                        defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
+                        onFocus={(e) => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = true;
+                            this.setState(obj);
+                        }}
+                        onChange={() => {
+                            // 因为onFocus方法弹出了浮层，onChange方法只在点击清除图标时会调用（相当于不可编辑的input），所以这里只做清除
+                            this.changeFilterValue(filter, null, index)
+                        }}
+                    />
+                    <DatePicker
+                        key={Math.random()}
+                        defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
+                        showToday={operator !== '='}
+                        open={this.state['datePickerOpen' + index]}
+                        onOpenChange={status => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = status;
+                            this.setState(obj);
+                        }}
+                        getCalendarContainer={trigger => {return trigger.parentNode.parentNode}}
+                        onChange={(value) => {this.changeFilterValue(filter, value, index)}}
+                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
+                    />
+                </div>
+            }
         }else if(type === 'categorical') { // 类别
             if(operator === 'include' || operator==='notInclude') { // 包含/不包含
                 field = <Input key={Math.random()} { ...commonProps } onBlur={(e) => {
@@ -210,6 +236,15 @@ class Filter extends React.Component {
         }
     }
 
+    changeFilterValues = (filter, values) => {
+        const { changeFilterValue: propsChangeFilterValue } = this.props;
+        filter['value1'] = values[0];
+        filter['value2'] = values[1];
+        if(propsChangeFilterValue && typeof propsChangeFilterValue === 'function') {
+            propsChangeFilterValue({ ...filter });
+        }
+    }
+
     fetchColumnData = (filter, options) => {
         const { columnData } = this.state;
         const { keyword, mandatory } = options || {};

src/components/common/filterBox/filterBox.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Modal, Form, Row, Col, Input, Icon, Button, Select, InputNumber, DatePicker, Spin, Tag,
-    // Divider
-} from 'antd'
+import { Modal, Form, Row, Col, Input, Icon, Button, Select, InputNumber, DatePicker, Spin, Tag } from 'antd'
 import OPERATORS from './filterOperators.js';
 import './filterBox.less'
 import * as service from '../../../services/index'
@@ -10,7 +8,8 @@ import URLS from '../../../constants/url'
 import moment from 'moment'
 const FormItem = Form.Item
 const SelectOption = Select.Option
-const OptionGroup = Select.OptGroup 
+const OptionGroup = Select.OptGroup
+const { RangePicker } = DatePicker
 
 let uuid = Math.ceil(Math.random() * 1000);
 class FilterBox extends React.Component {
@@ -140,6 +139,25 @@ class FilterBox extends React.Component {
         });
     }
 
+    /** 
+     * 改变过滤条件的值（一次改两个）
+     */
+    changeFilterValues = (filter, values) => {
+        const { form } = this.props;
+        const filters = form.getFieldValue('filters');
+
+        form.setFieldsValue({
+            filters: filters.map((f) => {
+                if (f.key === filter.key) {
+                    // f.key = uuid++;
+                    f[`value1`] = values[0];
+                    f[`value2`] = values[1];
+                }
+                return f;
+            })
+        });
+    }
+
     /**
      * 通过列名从数据列中获得其类型
      */
@@ -239,43 +257,69 @@ class FilterBox extends React.Component {
         // let dropdownOpen = this.state['dropdownOpen-' + filter.key] || false;
         let columnData = this.state['columnData-' + filter.name] || [];
 
-        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 }
+        let defaultValue = type==='time' ? (
+            operator === 'between' ? (
+                filter['value1'] ? [filter['value1'], filter['value2']] : null
+            ) :
+            (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 = <div className='cus-time-picker' >
-                <Input
+            if(operator === 'between') {
+                field = <RangePicker
                     key={Math.random()}
-                    allowClear
-                    // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
-                    defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
-                    onFocus={() => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = true;
-                        this.setState(obj);
-                    }}
-                    onChange={() => {
-                        // 因为onFocus方法弹出了浮层，onChange方法只在点击清楚图标时会调用（相当于不可编辑的input），所以这里只做清除
-                        this.changeFilterValue(filter, null, index)
+                    defaultValue={defaultValue}
+                    ranges={{
+                        '今天': [moment().startOf('day'), moment().endOf('day')],
+                        '本月': [moment().startOf('month'), moment().endOf('month')],
+                        '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
+                        '近半年': [moment().subtract(6, "months").startOf('day'), moment().endOf('day')],
+                        '本年': [moment().startOf('year'), moment().endOf('year')],
+                        '上年': [moment().subtract(1, "years").startOf('year'), moment().subtract(1, "years").endOf('year')],
                     }}
-                />
-                <DatePicker
-                    key={Math.random()}
-                    defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
-                    showToday={operator !== '='}
-                    open={this.state['datePickerOpen' + index]}
-                    onOpenChange={status => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = status;
-                        this.setState(obj);
+                    showTime={false}
+                    format="YYYY-MM-DD"
+                    onChange={values => {
+                        this.changeFilterValues(filter, [values[0], values[1]]);
                     }}
-                    onChange={(value) => {this.changeFilterValue(filter, value, index)}}
-                    renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
-                />
-            </div>
+                >
+                </RangePicker>
+            }else {
+                field = <div className='cus-time-picker' >
+                    <Input
+                        key={Math.random()}
+                        allowClear
+                        // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
+                        defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
+                        onFocus={() => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = true;
+                            this.setState(obj);
+                        }}
+                        onChange={() => {
+                            // 因为onFocus方法弹出了浮层，onChange方法只在点击清除图标时会调用（相当于不可编辑的input），所以这里只做清除
+                            this.changeFilterValue(filter, null, index)
+                        }}
+                    />
+                    <DatePicker
+                        key={Math.random()}
+                        defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
+                        showToday={operator !== '='}
+                        open={this.state['datePickerOpen' + index]}
+                        onOpenChange={status => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = status;
+                            this.setState(obj);
+                        }}
+                        onChange={(value) => {this.changeFilterValue(filter, value, index)}}
+                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
+                    />
+                </div>
+            }
         }else if(type === 'categorical') { // 类别
             if(operator === 'include' || operator==='notInclude') { // 包含/不包含
                 field = <Input { ...commonProps } onBlur={(e) => {this.changeFilterValue(filter, e.target.value, index)}}/>
@@ -472,7 +516,7 @@ class FilterBox extends React.Component {
                                 )}
                             </FormItem>
                         </Col>
-                        <Col span={(operator&&operator!=='null'&&operator!=='notNull')?(operator==='between'?6:12):0}>
+                        <Col span={(operator&&operator!=='null'&&operator!=='notNull')?(operator==='between'?(type === 'time' ? 12: 6):12):0}>
                             <FormItem
                                 key={key}
                                 className='filterValueOne'
@@ -480,7 +524,7 @@ class FilterBox extends React.Component {
                                 {this.getFilterValueField(f, 1)}
                             </FormItem>
                         </Col>
-                        {operator==='between' && <Col span={6}>
+                        {operator==='between' && type !== 'time' && <Col span={6}>
                             <FormItem
                                 key={key}
                                 className='filterValueTwo'

src/components/common/filterBox/filterBox2.jsx

@@ -13,6 +13,7 @@ import URLS from '../../../constants/url'
 import moment from 'moment'
 const FormItem = Form.Item
 const SelectOption = Select.Option
+const { RangePicker } = DatePicker
 
 let uuid = Math.ceil(Math.random() * 1000);
 class FilterBox extends React.Component {
@@ -163,6 +164,25 @@ class FilterBox extends React.Component {
         });
     }
 
+    /** 
+     * 改变过滤条件的值（一次改两个）
+     */
+    changeFilterValues = (filter, values) => {
+        const { form } = this.props;
+        const filters = form.getFieldValue('filters');
+
+        form.setFieldsValue({
+            filters: filters.map((f) => {
+                if (f.key === filter.key) {
+                    // f.key = uuid++;
+                    f[`value1`] = values[0];
+                    f[`value2`] = values[1];
+                }
+                return f;
+            })
+        });
+    }
+
     /**
      * 获得设定的过滤条件规则
      */
@@ -272,7 +292,7 @@ class FilterBox extends React.Component {
         const filters = getFieldValue('filters');
 
         const filterItems = filters.map((f, index) => {
-            let { key, name, dataSource, operator } = f;
+            let { key, name, type, dataSource, operator } = f;
             return (
                 <Row key={`filterDiv[${key}]`}>
                     <Col span={22}>
@@ -296,7 +316,7 @@ class FilterBox extends React.Component {
                                 )}
                             </FormItem>
                         </Col>
-                        <Col span={(operator&&operator!=='null'&&operator!=='notNull')?(operator==='between'?6:12):0}>
+                        <Col span={(operator&&operator!=='null'&&operator!=='notNull')?(operator==='between'?(type === 'time' ? 12: 6):12):0}>
                             <FormItem
                                 key={key}
                                 className='filterValueOne'
@@ -304,7 +324,7 @@ class FilterBox extends React.Component {
                                 {this.generateValueItem(f, 1)}
                             </FormItem>
                         </Col>
-                        {operator==='between' && <Col span={6}>
+                        {operator==='between' && type !== 'time' && <Col span={6}>
                             <FormItem
                                 key={key}
                                 className='filterValueTwo'
@@ -379,7 +399,12 @@ class FilterBox extends React.Component {
         let field;
         const { type, operator } = filter;
 
-        let defaultValue = type==='time' ? ( filter['value' + index] ? ( filter['value' + index].dynamic ? ( filter['value' + index] ) : moment(filter['value' + index]) ) : null ) : filter['value' + index]
+        let defaultValue = type==='time' ? (
+            operator === 'between' ? (
+                filter['value1'] ? [filter['value1'], filter['value2']] : null
+            ) :
+            (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) {
@@ -387,36 +412,57 @@ class FilterBox extends React.Component {
         }else if(['scale', 'ordinal'].indexOf(type) !== -1) {
             field = <InputNumber { ...commonProps } onBlur={(e) => {this.changeFilterValue(filter, e.target.value, index)}}/>
         }else if(type === 'time') {
-            field = <div className='cus-time-picker' >
-                <Input
+            if(operator === 'between') {
+                field = <RangePicker
                     key={Math.random()}
-                    allowClear
-                    // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
-                    defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
-                    onFocus={() => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = true;
-                        this.setState(obj);
-                    }}
-                    onChange={() => {
-                        // 因为onFocus方法弹出了浮层，onChange方法只在点击清楚图标时会调用（相当于不可编辑的input），所以这里只做清除
-                        this.changeFilterValue(filter, null, index)
+                    defaultValue={defaultValue}
+                    ranges={{
+                        '今天': [moment().startOf('day'), moment().endOf('day')],
+                        '本月': [moment().startOf('month'), moment().endOf('month')],
+                        '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
+                        '近半年': [moment().subtract(6, "months").startOf('day'), moment().endOf('day')],
+                        '本年': [moment().startOf('year'), moment().endOf('year')],
+                        '上年': [moment().subtract(1, "years").startOf('year'), moment().subtract(1, "years").endOf('year')],
                     }}
-                />
-                <DatePicker
-                    key={Math.random()}
-                    defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
-                    showToday={operator !== '='}
-                    open={this.state['datePickerOpen' + index]}
-                    onOpenChange={status => {
-                        let obj = {};
-                        obj['datePickerOpen' + index] = status;
-                        this.setState(obj);
+                    showTime={false}
+                    format="YYYY-MM-DD"
+                    onChange={values => {
+                        this.changeFilterValues(filter, [values[0], values[1]]);
                     }}
-                    onChange={(value) => {this.changeFilterValue(filter, value, index)}}
-                    renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
-                />
-            </div>
+                >
+                </RangePicker>
+            }else {
+                field = <div className='cus-time-picker' >
+                    <Input
+                        key={Math.random()}
+                        allowClear
+                        // suffix={<Icon style={{ color: 'rgba(0, 0, 0, 0.25)' }} type="calendar" />}
+                        defaultValue={ commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? commonProps.defaultValue.label : moment(commonProps.defaultValue).format('YYYY-MM-DD')) : '' }
+                        onFocus={() => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = true;
+                            this.setState(obj);
+                        }}
+                        onChange={() => {
+                            // 因为onFocus方法弹出了浮层，onChange方法只在点击清楚图标时会调用（相当于不可编辑的input），所以这里只做清除
+                            this.changeFilterValue(filter, null, index)
+                        }}
+                    />
+                    <DatePicker
+                        key={Math.random()}
+                        defaultValue={commonProps.defaultValue ? (commonProps.defaultValue.dynamic ? null : commonProps.defaultValue) : null}
+                        showToday={operator !== '='}
+                        open={this.state['datePickerOpen' + index]}
+                        onOpenChange={status => {
+                            let obj = {};
+                            obj['datePickerOpen' + index] = status;
+                            this.setState(obj);
+                        }}
+                        onChange={(value) => {this.changeFilterValue(filter, value, index)}}
+                        renderExtraFooter={operator === '=' ? () => this.generateTimeTags(filter, index, commonProps.defaultValue) : null}
+                    />
+                </div>
+            }
         }else if(type === 'categorical') { // 类别
             if(operator === 'include' || operator==='notInclude') { // 包含/不包含
                 field = <Input { ...commonProps } onBlur={(e) => {this.changeFilterValue(filter, e.target.value, index)}}/>

src/components/common/listFilter/index.jsx

@@ -77,7 +77,7 @@ class ListFilter extends React.Component {
 
                 }}
             >
-            </RangePicker> 
+            </RangePicker>
         }else if(type === 'string') {
             return <Input
                 style={{ width: 150 }}

src/models/dashboardDesigner.js

@@ -666,6 +666,12 @@ export default {
                         { name: 'pageSize', value: pageSize },
                         { name: 'total', value: total }
                     ] });
+                    // 主动触发一次window的resize事件
+                    yield window.setTimeout(() => {
+                        var e = document.createEvent("Event");
+                        e.initEvent("resize", true, true);
+                        window.dispatchEvent(e);
+                    }, 20);
                 }else {
                     message.error('请求图表展示数据失败: ' + (res.err || res.data.msg));
                     return false;

src/models/dataSource.js

@@ -800,12 +800,12 @@ export default {
                         { name: 'pageSize', value: pageSize },
                         { name: 'total', value: total }
                     ] });
-                    // // 主动触发一次window的resize事件
-                    // yield window.setTimeout(() => {
-                    //     var e = document.createEvent("Event");
-                    //     e.initEvent("resize", true, true);
-                    //     window.dispatchEvent(e);
-                    // }, 20);
+                    // 主动触发一次window的resize事件
+                    yield window.setTimeout(() => {
+                        var e = document.createEvent("Event");
+                        e.initEvent("resize", true, true);
+                        window.dispatchEvent(e);
+                    }, 20);
                 }else {
                     message.error('请求数据列表失败: ' + (res.err || res.data.msg));
                 }