图表、报表筛选框逻辑细节优化

src/components/common/filterBox/filter.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Form, Input, InputNumber, DatePicker, Select, Spin, Divider, Icon } from 'antd'
+import { Form, Input, InputNumber, DatePicker, Select, Spin, Divider, Icon, Tag } from 'antd'
 import * as service from '../../../services/index'
 import URLS from '../../../constants/url'
 import moment from 'moment'
@@ -34,35 +34,43 @@ class Filter extends React.Component {
     }
 
     generateValueItem = (filter, index) => {
-        const { columns, fetching, columnData, dropdownOpen } = this.state;
+        const { fetching, columnData, dropdownOpen } = this.state;
         let field;
-        const { key, type, operator } = filter;
-        let defaultValue = type==='time' ? ( filter['value' + index] ? moment(filter['value' + index]) : null) : filter['value' + index]
+        const { type, operator } = filter;
+        let defaultValue = type==='time' ? ( filter['value' + index] ? ( filter['value' + index].label ? ( filter['value' + index].label ) : moment(filter['value' + index]) ) : null ) : filter['value' + index]
         const commonProps = { defaultValue }
 
         if(['index', 'string'].indexOf(type) !== -1) {
-            field = <Input { ...commonProps } onBlur={(e) => {
+            // 使用随机数作为key以保证每次修改都能重新渲染
+            field = <Input key={Math.random()} { ...commonProps } onBlur={(e) => {
                 if(e.target.value !== commonProps.defaultValue) {
                     this.changeFilterValue(filter, e.target.value, index)
                 }
             }}/>
         }else if(['scale', 'ordinal'].indexOf(type) !== -1) {
-            field = <InputNumber { ...commonProps } onBlur={(e) => {
+            field = <InputNumber key={Math.random()} { ...commonProps } onBlur={(e) => {
                 if(e.target.value !== commonProps.defaultValue) {
                     this.changeFilterValue(filter, e.target.value, index)
                 }
             }}/>
         }else if(type === 'time') {
-            field = <DatePicker { ...commonProps } onChange={(value) => {this.changeFilterValue(filter, value, index)}}/>
+            field = <DatePicker
+                key={Math.random()}
+                { ...commonProps }
+                showToday={false}
+                onChange={(value) => {this.changeFilterValue(filter, value, index)}}
+                // renderExtraFooter={() => this.generateTimeTags(filter, index)}
+            />
         }else if(type === 'categorical') { // 类别
             if(operator === 'include' || operator==='notInclude') { // 包含/不包含
-                field = <Input { ...commonProps } onBlur={(e) => {
+                field = <Input key={Math.random()} { ...commonProps } onBlur={(e) => {
                     if(e.target.value !== commonProps.defaultValue) {
                         this.changeFilterValue(filter, e.target.value, index)
                     }
                 }}/>
             }else if(operator === 'contain' || operator === 'notContain') { // 包括/不包括
                 field = (<Select
+                    key={Math.random()}
                     value={commonProps.defaultValue} // 使用defaultValue不能及时响应全选/取消全选的操作
                     open={dropdownOpen}
                     onDropdownVisibleChange={this.onDropdownVisibleChange}
@@ -101,6 +109,7 @@ class Filter extends React.Component {
                 </Select>)
             }else { // 等于/不等于
                 field = (<Select
+                    key={Math.random()} 
                     { ...commonProps }
                     allowClear
                     mode='single'
@@ -117,7 +126,7 @@ class Filter extends React.Component {
                 </Select>)
             }
         }else {
-            field = <Input onBlur={(e) => {
+            field = <Input key={Math.random()} onBlur={(e) => {
                 if(e.target.value !== commonProps.defaultValue) {
                     this.changeFilterValue(filter, e.target.value, index)
                 }
@@ -127,6 +136,24 @@ class Filter extends React.Component {
         return field;
     }
 
+    generateTimeTags = (filter, index) => {
+        const timeTypes = [
+            { label: '今天', name: 'today', format: () => {console.log(11);return 'today'} },
+            { label: '昨天', name: 'yesterday' },
+            { label: '本周', name: 'week' },
+            { label: '上周', name: 'lastweek' },
+            { label: '本月', name: 'month' },
+            { label: '上月', name: 'lastmonth' },
+            { label: '本季度', name: 'quarter' },
+            { label: '上季度', name: 'lastquarter' },
+            { label: '本年', name: 'year' },
+            { label: '上年', name: 'lastyear' },
+        ]
+        return timeTypes.map(t => <Tag key={t.name} onClick={() => {
+            this.changeFilterValue(filter, t, index);
+        }}>{t.label}</Tag>);
+    }
+
     lockClose = e => {
         clearTimeout(this.lock);
         this.lock = setTimeout(() => {

src/components/common/filterBox/filter2.jsx

@@ -35,33 +35,33 @@ class Filter extends React.Component {
     generateValueItem = (filter, index) => {
         const { fetching, columnData, dropdownOpen } = this.state;
         let field;
-        let { key, type, operator } = filter;
+        let { type, operator } = filter;
 
         let defaultValue = type==='time' ? ( filter['value' + index] ? moment(filter['value' + index]) : null) : filter['value' + index]
         const commonProps = { defaultValue }
 
         if(['index', 'string'].indexOf(type) !== -1) {
-            field = <Input { ...commonProps } onBlur={(e) => {
+            field = <Input key={Math.random()} { ...commonProps } onBlur={(e) => {
                 if(e.target.value !== commonProps.defaultValue) {
                     this.changeFilterValue(filter, e.target.value, index)
                 }
             }}/>
         }else if(['scale', 'ordinal'].indexOf(type) !== -1) {
-            field = <InputNumber { ...commonProps } onBlur={(e) => {
+            field = <InputNumber key={Math.random()} { ...commonProps } onBlur={(e) => {
                 if(e.target.value !== commonProps.defaultValue) {
                     this.changeFilterValue(filter, e.target.value, index)
                 }
             }}/>
         }else if(type === 'time') {
-            field = <DatePicker { ...commonProps } onChange={(value) => {this.changeFilterValue(filter, value, index)}}/>
+            field = <DatePicker key={Math.random()} { ...commonProps } onChange={(value) => {this.changeFilterValue(filter, value, index)}}/>
         }else if(type === 'categorical') { // 类别
             if(operator === 'include' || operator==='notInclude') { // 包含/不包含
-                field = <Input { ...commonProps } onBlur={(e) => {
+                field = <Input key={Math.random()} { ...commonProps } onBlur={(e) => {
                     this.changeFilterValue(filter, e.target.value, index)
                 }}/>
             }else if(operator === 'contain' || operator === 'notContain') { // 包括/不包括
                 field = (<Select
-                    key={key}
+                    key={Math.random()}
                     value={commonProps.defaultValue} // 使用defaultValue不能及时响应全选/取消全选的操作
                     allowClear
                     mode='multiple'
@@ -100,6 +100,7 @@ class Filter extends React.Component {
                 </Select>)
             }else { // 等于/不等于
                 field = (<Select
+                    key={Math.random()}
                     { ...commonProps }
                     allowClear
                     mode='single'
@@ -116,7 +117,7 @@ class Filter extends React.Component {
                 </Select>)
             }
         }else {
-            field = <Input { ...commonProps } onBlur={(e) => {
+            field = <Input key={Math.random()} { ...commonProps } onBlur={(e) => {
                 if(e.target.value !== commonProps.defaultValue) {
                     this.changeFilterValue(filter, e.target.value, index)
                 }

src/components/common/filterBox/filterBox.jsx

@@ -171,7 +171,7 @@ class FilterBox extends React.Component {
     }
 
     fetchColumnData = (column, keyword, mandatory) => {
-        const { type, code } = this.props;
+        const { code } = this.props;
         const columnData = this.state['columnData-' + column.name];
         if(!columnData || columnData.length === 0 || mandatory) {
             let obj = {fetching: true};

src/components/common/filterBox/filterBox2.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Modal, Form, Row, Col, Input, Icon, Button, Cascader, Select, InputNumber, DatePicker, Spin, Divider } from 'antd'
+import { Modal, Form, Row, Col, Input, Icon, Button, Cascader, Select, InputNumber, DatePicker, Spin } from 'antd'
 import OPERATORS from './filterOperators.js'
 import './filterBox.less'
 import * as service from '../../../services/index'
@@ -367,7 +367,7 @@ class FilterBox extends React.Component {
         const dropdownOpen = filter.key ? (this.state['dropdownOpen-' + filter.key] || false) : false;
         const columnData = filter.name ? (this.state['columnData-' + filter.dataSource.name + '-' + filter.name] || []) : [];
         let field;
-        const { key, type, operator } = filter;
+        const { type, operator } = filter;
 
         const commonProps = { placeholder: '无默认值' }
 

src/components/dashboardDesigner/layout.less

@@ -67,6 +67,7 @@
                     flex-wrap: wrap;
                     border-top: 1px solid #ccc;
                     border-bottom: 1px solid #ccc;
+                    padding-left: 8px;
                     .filter-tag {
                         max-width: 200px;
                         overflow: hidden;