完善搜索条件清空逻辑

src/components/dashboardDesigner/mobileFilterList.jsx

@@ -70,14 +70,19 @@ class MobileFilterList extends React.Component {
         const { filters } = this.props;
 
         return filters.map((filter, index) => {
-            let { type, label, operator, operatorLabel, value1, value2 } = filter;
+            let { key: fkey, type, label, operator, operatorLabel, value1, value2 } = filter;
             let filterItem;
 
             if(['index', 'string'].indexOf(type) !== -1) {
-                filterItem = <List key={`filter-value-${index}-${value1}`} renderHeader={() => `${label} (${operatorLabel}) :`}>
+                filterItem = <List key={`filter-value-${index}-${value1}`} renderHeader={() => `${label} (${operatorLabel}) :`} onClick={(a,b,c,d) => {
+                    console.log({a,b,c,d});
+                }}>
                     <InputItem
                         defaultValue={value1}
                         clear
+                        onClick={(a,b,c,d) => {
+                            console.log({a,b,c,d});
+                        }}
                         onBlur={(value) => {
                             if(value !== value1) {
                                 this.changeFilterValue(filter, value, 1)
@@ -130,25 +135,37 @@ class MobileFilterList extends React.Component {
                         <ListItem
                             onClick={() => {
                                 document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
-                                let obj = {};
+                                let obj = {},
+                                    startDate = value1 ? new Date(value1) : null,
+                                    endDate = value2 ? new Date(value2) : null;
                                 obj.showCalendar = true;
                                 obj.currentFilter = filter;
-                                obj.calendarValue = value1 && value2 ? [new Date(value1), new Date(value2)] : false;
+                                obj.calendarValue = startDate && endDate ? [startDate, endDate] : false;
+                                obj.calendarStartDate = startDate;
+                                obj.calendarEndDate = endDate;
+                                obj.calendarDatePickerStartDate = startDate;
+                                obj.calendarDatePickerEndDate = endDate;
+
                                 this.setState(obj);
                             }}
                         >{value1 ? `${moment(value1).format('YYYY-MM-DD')} 至 ${moment(value2).format('YYYY-MM-DD')}` : ''}</ListItem>
                     </List>
                 }else {
-                    filterItem = <List key={Math.random()} renderHeader={() => `${label} (${operatorLabel}) :`}>
+                    filterItem = <List className='date' key={`list-${fkey}-${value1}`} renderHeader={() => `${label} (${operatorLabel}) :`}>
                         <DatePicker
                             mode="date"
-                            defaultValue={value1}
-                            onChange={(value) => {
-                                this.changeFilterValue(filter, value, 1)
-                            }}
+                            value={value1 ? new Date(value1) : now}
+                            title={
+                                <div onClick={() => {
+                                    this.changeFilterValue(filter, undefined, 1);
+                                }}>清空</div>
+                            }
                             minDate={new Date(moment().subtract(50, 'years'))}
                             maxDate={new Date(moment().add(50, 'years'))}
                             locale={datePicker_zhCN}
+                            onOk={value => {
+                                this.changeFilterValue(filter, value, 1);
+                            }}
                         >
                             <ListItem>{value1 ? moment(value1).format('YYYY-MM-DD') : ''}</ListItem>
                         </DatePicker>
@@ -230,13 +247,15 @@ class MobileFilterList extends React.Component {
 
     onMenuCancel = () => {
         this.setState({
-            showMenu: false
+            showMenu: false,
+            menuSelected: []
         });
     }
 
     fetchColumnData = (filter, options) => {
+        const { menuSelected } = this.state;
         const { keyword, mandatory } = options || {};
-        const { key: fkey, combined : isCusMode, dataSource, value1 } = filter;
+        const { key: fkey, combined : isCusMode, dataSource } = filter;
         const menuData = this.state[`menuData-${fkey}`] || [];
         let columns;
         if(isCusMode) {
@@ -249,7 +268,9 @@ class MobileFilterList extends React.Component {
         if(!menuData || menuData.length === 0 || mandatory) {
             let obj = {};
             obj[`menuData-${fkey}`] = [];
-            this.setState({ ...obj, menuData: [{ value: 'nothing', label: <div><Spin size="small" />加载中...</div>, disabled: true }], fetching: true }, () => {
+            this.setState({ ...obj, menuData: [ ...menuSelected.map(d => ({
+                value: d, label: d
+            })), { value: 'nothing', label: <div><Spin size="small" />加载中...</div>, disabled: true }], fetching: true }, () => {
                 const body = isCusMode ? columns : {
                     id: dataSource.code,
                     columnName: filter.name,
@@ -269,41 +290,23 @@ class MobileFilterList extends React.Component {
                 }).then(r => {
                     const resData = r.data || [];
                     // 需要把已经选择的值作为选项展示出来
-                    if(value1) {
-                        if(value1 instanceof Array) { // 如果value1是数组
-                            value1.forEach(v => {
-                                let idx = resData.findIndex(r => r === v);
-                                if(idx > -1) {
-                                    resData.splice(idx, 1);
-                                }
-                            });
-                            let obj = {},
-                                data = value1.concat(resData).map(d => ({
-                                    value: d, label: d
-                                }));
-                            obj[`menuData-${fkey}`] = data;
-                            this.setState({
-                                ...obj,
-                                menuData: data,
-                                fetching: false
-                            });
-                        }else {
-                            let idx = resData.findIndex(r => r === value1);
-                            let obj = {},
-                                data = [value1].concat(resData).map(d => ({
-                                    value: d, label: d
-                                }));
+                    if(menuSelected && menuSelected.length > 0) {
+                        menuSelected.forEach(v => {
+                            let idx = resData.findIndex(r => r === v);
                             if(idx > -1) {
                                 resData.splice(idx, 1);
                             }
-
-                            obj[`menuData-${fkey}`] = data;
-                            this.setState({
-                                ...obj,
-                                menuData: data,
-                                fetching: false
-                            });
-                        }
+                        });
+                        let obj = {},
+                            data = menuSelected.concat(resData).map(d => ({
+                                value: d, label: d
+                            }));
+                        obj[`menuData-${fkey}`] = data;
+                        this.setState({
+                            ...obj,
+                            menuData: data,
+                            fetching: false
+                        });
                     }else {
                         let obj = {},
                         data = resData.map(d => ({ value: d, label: d }));
@@ -496,8 +499,6 @@ class MobileFilterList extends React.Component {
                             calendarEndDate: undefined
                         });
                     }}
-                    // onSelectHasDisableDate={this.onSelectHasDisableDate}
-                    // defaultDate={now}
                     renderHeader={this.renderCalendarHeader}
                     showShortcut={true}
                     renderShortcut={this.renderCalendarShortcut}
@@ -506,11 +507,26 @@ class MobileFilterList extends React.Component {
                 
                 {showMenu && <div className="menu-mask" onClick={() => {
                     this.setState({
-                        showMenu: false
+                        showMenu: false,
+                        menuSelected: []
                     })
                 }} />}
                 {showMenu && <div className='filter-menu-box'>
+                    <div className="am-picker-popup-header">
+                        <div className="am-picker-popup-item am-picker-popup-header-left" onClick={() => {
+                            this.setState({
+                                menuSelected: menuData.map(d => d.value)
+                            });
+                        }}>全选</div>
+                        <div className="am-picker-popup-item am-picker-popup-title"></div>
+                        <div className="am-picker-popup-item am-picker-popup-header-right" onClick={() => {
+                            this.setState({
+                                menuSelected: []
+                            });
+                        }}>清空</div>
+                    </div>
                     <InputItem
+                        className='search'
                         clear
                         placeholder='搜索'
                         onChange={(value) => {

src/components/dashboardDesigner/mobileFilterList.less

@@ -34,6 +34,11 @@
                 flex-direction: row;
             }
         }
+        &.date {
+            .am-list-extra {
+                display: none;
+            }
+        }
     }
 
     // .am-list-extra {
@@ -94,9 +99,33 @@
         width: 100%;
         bottom: 0;
         z-index: 1000;
-
+        background: white;
+        .menu-bar {
+            font-size: 17px;
+            padding: 9px 15px;
+            height: 42px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-bottom: 1px solid #f7f7f7;
+        }
+        .am-menu .am-flexbox .am-flexbox-item:first-child .am-list .am-list-body {
+            &:before {
+                display: none;
+            }
+        }
         .filter-menu .am-flexbox .am-flexbox-item:last-child .am-list .am-list-item {
             border-bottom: 1px solid #f7f7f7;
         }
+        .am-list-item.search {
+            border-bottom: 2px solid #f7f7f7;
+            .am-list-line {
+                border-bottom: none;
+                &:after {
+                    display: none;
+                }
+            }
+        }
     }
 }