uas手机版

通用列表筛选弹出框

uas-office-web/uas-mobile/src/configs/theme.config.less

@@ -60,5 +60,5 @@
   position: fixed;
   bottom: 22px;
   right: 22px;
-  z-index: 10;
+  z-index: 2;
 }

uas-office-web/uas-mobile/src/pages/common/currencyList/CurrencyList.jsx

@@ -7,11 +7,12 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import CurrencyListItem
   from '../../../components/common/currencyListItem/CurrencyListItem'
-import { SearchBar, PullToRefresh, ListView } from 'antd-mobile'
+import { SearchBar, PullToRefresh, ListView, Drawer } from 'antd-mobile'
 import './currency-list.less'
 import UasIcon from '../../../configs/iconfont.conig'
 import LoadingMore from '../../../components/common/loading/LoadingMore'
 import ReactDOM from 'react-dom'
+import { Prompt } from 'react-router-dom'
 
 const currencyArray = [
   [{}, {}, {}, {}, {}, {}],
@@ -48,6 +49,7 @@ class CurrencyList extends Component {
     this.setState({
       height: hei,
       refreshing: false,
+      filterOpen: false,
       listDataSource: this.state.listDataSource.cloneWithRows(
         currencyArray),
     })
@@ -58,23 +60,30 @@ class CurrencyList extends Component {
   }
 
   render () {
-    const { listDataSource, height, hasNextPage } = this.state
+    const { listDataSource, height, hasNextPage, filterOpen } = this.state
 
     const refreshLayout = this.getRefreshLayout()
-    const listItems = []
-    currencyArray.forEach((parentItem, parentIndex) => {
-      listItems.push(<CurrencyListItem rowList={parentItem}/>)
-    })
+    const filterLayout = this.getFilterLayout()
     return (
       <div className='currency-list-root'>
+        <Prompt message={this.handlePrompt}/>
+        <Drawer
+          sidebar={filterLayout}
+          onOpenChange={this.onFilterOpen}
+          open={filterOpen}
+          position={'right'}
+          className='currency-list-content-filter-root'
+        />
         <div className='currency-list-search-root'>
           <SearchBar
             className='currency-list-search-search'
             placeholder={'搜索'}
           />
+
           <UasIcon
             className='currency-list-search-filter'
-            type={'uas-search-filter'}/>
+            type={'uas-search-filter'}
+            onClick={this.onFilterOpen}/>
         </div>
         <ListView
           ref={el => this.lv = el}
@@ -96,9 +105,6 @@ class CurrencyList extends Component {
           onEndReached={hasNextPage ? this.loadDataList : null}
           pageSize={mPageSize}
         />
-        <div className='currency-list-content-root'>
-          {listItems}
-        </div>
         <UasIcon
           type={'uas-add-doc'}
           className='com-hover-button'
@@ -122,6 +128,13 @@ class CurrencyList extends Component {
     />
   }
 
+  getFilterLayout = () => {
+    return (
+      <div
+        className='currency-list-content-filter-content'>筛选条件</div>
+    )
+  }
+
   loadDataList = () => {
     this.setState({
       refreshing: false,
@@ -133,6 +146,23 @@ class CurrencyList extends Component {
   onItemClick = () => {
     this.props.history.push('/currencyDetail')
   }
+
+  onFilterOpen = () => {
+    this.setState({
+      filterOpen: !this.state.filterOpen,
+    })
+  }
+
+  handlePrompt = (location) => {
+    if (this.state.filterOpen) {
+      this.setState({
+        filterOpen: !this.state.filterOpen,
+      })
+      return false
+    } else {
+      return true
+    }
+  }
 }
 
 let mapStateToProps = (state) => ({})

uas-office-web/uas-mobile/src/pages/common/currencyList/currency-list.less

@@ -16,12 +16,27 @@
     .currency-list-search-filter {
       font-size: (@com-search-bar-height)-20;
       padding-right: 8px;
+      z-index: 2;
     }
   }
 
-  .currency-list-content-root {
+
+  .currency-list-content-filter-root {
     width: 100%;
-    flex: 1;
-    overflow-y: scroll;
+
+    .am-drawer-sidebar {
+      width: 100%;
+
+      .currency-list-content-filter-content {
+        width: 100vw;
+        height: 100vh;
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
   }
+
 }