uas手机版

通用列表封装优化

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

@@ -26,7 +26,13 @@ import { saveListState } from '../../../redux/actions/listState'
 import { LIST_PAGE_SIZE } from '../../../configs/constans.config'
 import CurrencyDetail from '../currencyDetail/CurrencyDetail'
 import { refreshFormState } from '../../../redux/actions/formState'
-import { getFormAndGrid } from '../../../utils/common/form.request'
+import {
+  getBillGroup,
+  getFormAndGrid,
+} from '../../../utils/common/form.request'
+import { fetchPostObj } from '../../../utils/common/fetchRequest'
+import { API } from '../../../configs/api.config'
+import { message } from 'antd'
 
 class CurrencyList extends Component {
 
@@ -56,27 +62,28 @@ class CurrencyList extends Component {
     })
 
     const {
-      requestList,
-      requestTab,
+      tabUrl,
+      listUrl,
       listState: { tabList, listData },
     } = this.props
 
-    if (isObjEmpty(tabList) && isObjEmpty(listData) && !isObjNull(requestTab)) {
-      requestTab()
-    } else if (isObjEmpty(listData) && !isObjNull(requestList)) {
+    if (isObjEmpty(tabList) && isObjEmpty(listData) && !isObjNull(tabUrl)) {
+      this.requestTab()
+    } else if (isObjEmpty(listData) && !isObjNull(listUrl)) {
       saveListState({
         pageIndex: 0,
       })
-      requestList()
+      this.requestList()
     } else {
       this.recoveryScroll()
     }
+
     const {
-      requestSearchConfig,
+      searchUrl,
       formState: { filterGroupList },
     } = this.props
-    if (isObjEmpty(filterGroupList) && !isObjNull(requestSearchConfig)) {
-      requestSearchConfig()
+    if (isObjEmpty(filterGroupList) && !isObjNull(searchUrl)) {
+      this.requestSearchConfig()
     }
   }
 
@@ -85,8 +92,24 @@ class CurrencyList extends Component {
   }
 
   render () {
-    const { listState: { tabList, tabSelect, listData, pageIndex }, rowCount, addAble } = this.props
-    const { listDataSource, height, hasNextPage, filterOpen } = this.state
+    const {
+      listState: {
+        tabList,
+        tabSelect,
+        listData,
+        pageIndex,
+        searchValue,
+      },
+      rowCount,
+      addAble,
+      filterAble,
+    } = this.props
+    const {
+      listDataSource,
+      height,
+      hasNextPage,
+      filterOpen,
+    } = this.state
 
     const refreshLayout = this.getRefreshLayout()
     const filterLayout = this.getFilterLayout()
@@ -117,11 +140,18 @@ class CurrencyList extends Component {
           <SearchBar
             className='currency-list-search-search'
             placeholder={'搜索'}
+            value={searchValue}
+            onSubmit={this.onSearchSubmit}
+            onChange={this.onSearchChange}
+            onCancel={this.onSearchCancel}
           />
-          <UasIcon
-            className='currency-list-search-filter'
-            type={'uas-search-filter'}
-            onClick={this.onFilterOpen}/>
+          {
+            filterAble && <UasIcon
+              className='currency-list-search-filter'
+              type={'uas-search-filter'}
+              onClick={this.onFilterOpen}/>
+          }
+
         </div>
         <div className='currency-list-tab-root'>
           {tabItems}
@@ -137,17 +167,15 @@ class CurrencyList extends Component {
             return <CurrencyListItem
               rowCount={rowCount}
               rowData={rowData}
-              onItemClick={this.onItemClick}/>
+              onItemClick={this.onItemClick}
+            />
           }}
           style={{
             height,
           }}
-          onContentSizeChange={() => {
-            console.log('onContentSizeChange', 'onContentSizeChange')
-          }}
           pullToRefresh={refreshLayout}
           onEndReachedThreshold={10}
-          onEndReached={hasNextPage ? this.loadDataList : null}
+          onEndReached={hasNextPage ? this.requestList : null}
           pageSize={LIST_PAGE_SIZE}
         />
         {this.props.children}
@@ -181,7 +209,7 @@ class CurrencyList extends Component {
           pageIndex: 0,
           listData: [],
         })
-        this.loadDataList()
+        this.requestList()
       }}
     />
   }
@@ -196,7 +224,7 @@ class CurrencyList extends Component {
         <CurrencyDetail
           onRef={ref => this.cd = ref}
           caller={params.caller}
-          id={params.id}
+          id={0}
           formData={filterGroupList}
         >
           <div className='currency-list-content-filter-func'>
@@ -223,23 +251,111 @@ class CurrencyList extends Component {
     })
     //Todo 解决redux修改数据不同步问题
     setTimeout(() => {
-      this.loadDataList()
+      this.requestList()
     }, 0)
   }
 
-  loadDataList = () => {
-    const { requestList, listState: { tabList, tabSelect } } = this.props
-
-    requestList && requestList(tabList ? tabList[tabSelect].CODE : '')
-      .then(() => {
-        this.setState({
-          refreshing: false,
-        })
-      }).catch(() => {
-        this.setState({
-          refreshing: false,
+  /**
+   * 获取应用状态列表
+   */
+  requestTab () {
+    const { tabUrl, params } = this.props
+    Toast.loading('', 0)
+    fetchPostObj(tabUrl, params).then(response => {
+      Toast.hide()
+      if (!isObjEmpty(response, response.data, response.data.list)) {
+        saveListState({
+          tabList: response.data.list,
+          tabSelect: 0,
         })
+        this.requestList()
+      } else {
+        this.requestList()
+      }
+    }).catch(error => {
+      Toast.hide()
+      if (typeof error === 'string') {
+        message.error(error)
+      } else {
+        message.error('应用状态获取失败')
+      }
+    })
+  }
+
+  /**
+   * 获取单据列表
+   * @param code
+   */
+  requestList = (extraParams) => {
+    let {
+      listUrl,
+      params,
+      listState: { listData, pageIndex, oldSearch, tabList, tabSelect },
+    } = this.props
+
+    pageIndex++
+    if (pageIndex === 1) {
+      listData = []
+    }
+    return fetchPostObj(listUrl, {
+      code: tabList ? tabList[tabSelect].CODE : '',
+      pageIndex,
+      pageSize: LIST_PAGE_SIZE,
+      condition: '1=1',
+      keyWords: oldSearch,
+      ...params,
+      ...extraParams,
+    }).then(response => {
+      if (!isObjEmpty(response, response.data, response.data.list)) {
+        listData = listData.concat(response.data.list)
+      } else {
+        pageIndex--
+      }
+      this.setState({
+        refreshing: false,
       })
+      saveListState({
+        listData,
+        pageIndex,
+      })
+    }).catch(error => {
+      pageIndex--
+      if (typeof error === 'string') {
+        message.error(error)
+      } else {
+        message.error('数据获取失败')
+      }
+      this.setState({
+        refreshing: false,
+      })
+      saveListState({
+        listData,
+        pageIndex,
+      })
+    })
+  }
+
+  /**
+   * 获取筛选条件配置
+   */
+  requestSearchConfig = () => {
+    const { searchUrl, params } = this.props
+    fetchPostObj(searchUrl, params).then(response => {
+      if (!isObjEmpty(response, response.data, response.data.list)) {
+        const formGroup = {
+          groupTitle: '筛选条件',
+          isForm: true,
+          fieldList: response.data.list,
+        }
+        const billGroup = getBillGroup(formGroup, 0)
+        const billGroupList = [billGroup]
+        refreshFormState({
+          filterGroupList: billGroupList,
+        })
+      }
+    }).catch(error => {
+
+    })
   }
 
   onItemClick = (rowData) => {
@@ -283,6 +399,38 @@ class CurrencyList extends Component {
     let formAndGrid = getFormAndGrid(filterGroupList)
     console.log(formAndGrid)
   }
+
+  onSearchChange = (val) => {
+    saveListState({
+      searchValue: val,
+    })
+  }
+
+  onSearchSubmit = (val) => {
+    this.searchSubmit(val)
+  }
+
+  onSearchCancel = (val) => {
+    saveListState({
+      searchValue: '',
+    })
+    const { oldSearch } = this.props.listState
+    if (!isObjEmpty(oldSearch)) {
+      this.searchSubmit('')
+    }
+  }
+
+  searchSubmit = (keyword) => {
+    saveListState({
+      pageIndex: 0,
+      listData: [],
+      oldSearch: keyword,
+    })
+    //Todo 解决redux修改数据不同步问题
+    setTimeout(() => {
+      this.requestList()
+    }, 0)
+  }
 }
 
 let mapStateToProps = (state) => ({

uas-office-web/uas-mobile/src/pages/private/report/ReportList.jsx

@@ -6,18 +6,11 @@ import ReactDOM from 'react-dom'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import CurrencyList from '../../../components/common/currencyList/CurrencyList'
-import { saveListState } from '../../../redux/actions/listState'
-import { fetchPostObj } from '../../../utils/common/fetchRequest'
 import { API } from '../../../configs/api.config'
-import { LIST_PAGE_SIZE } from '../../../configs/constans.config'
-import { isObjEmpty } from '../../../utils/common/common.util'
-import { message } from 'antd'
 import { Drawer } from 'antd-mobile'
 import CurrencyListItem
   from '../../../components/common/currencyList/CurrencyListItem'
 import './report.less'
-import { getBillGroup } from '../../../utils/common/form.request'
-import { refreshFormState } from '../../../redux/actions/formState'
 
 class ReportList extends Component {
 
@@ -31,9 +24,7 @@ class ReportList extends Component {
   }
 
   componentDidMount () {
-    this.caller = this.props.match.params.caller
     this.title = this.props.match.params.title
-    this.id = this.props.match.params.id
     document.title = this.title || '单据列表'
   }
 
@@ -56,13 +47,14 @@ class ReportList extends Component {
         />
         <CurrencyList
           rowCount={5}
-          requestList={this.requestList.bind(this)}
+          listUrl={API.REPORT_GETREPORTLIST}
+          searchUrl={API.REPORT_GETORDERSEARCHFORM}
           handlePrompt={this.handlePrompt.bind(this)}
-          requestSearchConfig={this.requestSearchConfig.bind(this)}
           onItemClick={this.onItemClick.bind(this)}
+          filterAble
           params={{
             caller: this.props.match.params.caller,
-            id: 0,
+            id: this.props.match.params.id,
           }}
           addAble={false}
         >
@@ -72,74 +64,6 @@ class ReportList extends Component {
     )
   }
 
-  /**
-   * 获取单据列表
-   * @param code
-   */
-  requestList = () => {
-    this.caller = this.props.match.params.caller
-    this.id = this.props.match.params.id
-    let { listState: { listData, pageIndex } } = this.props
-    pageIndex++
-    if (pageIndex === 1) {
-      listData = []
-    }
-
-    return fetchPostObj(API.REPORT_GETREPORTLIST, {
-      caller: this.caller,
-      id: this.id,
-      pageIndex,
-      pageSize: LIST_PAGE_SIZE,
-      condition: '1=1',
-    }).then(response => {
-      if (!isObjEmpty(response, response.data, response.data.list)) {
-        listData = listData.concat(response.data.list)
-      } else {
-        pageIndex--
-      }
-      saveListState({
-        listData,
-        pageIndex,
-      })
-    }).catch(error => {
-      pageIndex--
-      if (typeof error === 'string') {
-        message.error(error)
-      } else {
-        message.error('数据获取失败')
-      }
-      saveListState({
-        listData,
-        pageIndex,
-      })
-    })
-  }
-
-  /**
-   * 获取筛选条件配置
-   */
-  requestSearchConfig = () => {
-    fetchPostObj(API.REPORT_GETORDERSEARCHFORM, {
-      caller: this.props.match.params.caller,
-      id: this.props.match.params.id,
-    }).then(response => {
-      if (!isObjEmpty(response, response.data, response.data.list)) {
-        const formGroup = {
-          groupTitle: '筛选条件',
-          isForm: true,
-          fieldList: response.data.list,
-        }
-        const billGroup = getBillGroup(formGroup, 0)
-        const billGroupList = [billGroup]
-        refreshFormState({
-          filterGroupList: billGroupList,
-        })
-      }
-    }).catch(error => {
-
-    })
-  }
-
   /**
    * 详情布局
    */

uas-office-web/uas-mobile/src/pages/private/service/ServiceList.jsx

@@ -6,14 +6,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import CurrencyList from '../../../components/common/currencyList/CurrencyList'
-import { isObjEmpty } from '../../../utils/common/common.util'
-import { saveListState } from '../../../redux/actions/listState'
-import { Toast } from 'antd-mobile'
-import { fetchPostObj } from '../../../utils/common/fetchRequest'
 import { API } from '../../../configs/api.config'
-import { message } from 'antd'
-import { LIST_PAGE_SIZE } from '../../../configs/constans.config'
-import { refreshFormState } from '../../../redux/actions/formState'
 
 class ServiceList extends Component {
 
@@ -24,7 +17,6 @@ class ServiceList extends Component {
   }
 
   componentDidMount () {
-    this.caller = this.props.match.params.caller
     this.title = this.props.match.params.title
     document.title = this.title || '单据列表'
   }
@@ -38,9 +30,8 @@ class ServiceList extends Component {
       <div>
         <CurrencyList
           onRef={el => this.cl = el}
-          requestList={this.requestList.bind(this)}
-          requestTab={this.requestTab.bind(this)}
-          requestSearchConfig={this.requestSearchConfig.bind(this)}
+          tabUrl={API.SERVICES_GETORDERTAB}
+          listUrl={API.SETVICES_GETORDERLIST}
           onItemClick={this.onItemClick.bind(this)}
           onDocAdd={this.onDocAdd.bind(this)}
           params={{
@@ -53,87 +44,6 @@ class ServiceList extends Component {
     )
   }
 
-  /**
-   * 获取应用状态列表
-   */
-  requestTab () {
-    this.caller = this.props.match.params.caller
-    Toast.loading('', 0)
-    fetchPostObj(API.SERVICES_GETORDERTAB, {
-      caller: this.caller,
-    }).then(response => {
-      Toast.hide()
-      if (!isObjEmpty(response, response.data, response.data.list)) {
-        saveListState({
-          tabList: response.data.list,
-          tabSelect: 0,
-        })
-        this.requestList(response.data.list[0].CODE)
-      } else {
-        this.requestList()
-      }
-    }).catch(error => {
-      Toast.hide()
-      if (typeof error === 'string') {
-        message.error(error)
-      } else {
-        message.error('应用状态获取失败')
-      }
-    })
-  }
-
-  /**
-   * 获取单据列表
-   * @param code
-   */
-  requestList = (code) => {
-    this.caller = this.props.match.params.caller
-    let { listState: { listData, pageIndex } } = this.props
-
-    pageIndex++
-    if (pageIndex === 1) {
-      listData = []
-    }
-
-    return fetchPostObj(API.SETVICES_GETORDERLIST, {
-      caller: this.caller,
-      code: code,
-      pageIndex,
-      pageSize: LIST_PAGE_SIZE,
-    }).then(response => {
-      if (!isObjEmpty(response, response.data, response.data.list)) {
-        listData = listData.concat(response.data.list)
-      } else {
-        pageIndex--
-      }
-      saveListState({
-        listData,
-        pageIndex,
-      })
-    }).catch(error => {
-      pageIndex--
-      if (typeof error === 'string') {
-        message.error(error)
-      } else {
-        message.error('数据获取失败')
-      }
-      saveListState({
-        listData,
-        pageIndex,
-      })
-    })
-  }
-
-  /**
-   * 获取筛选条件配置
-   */
-  requestSearchConfig = () => {
-    // const filterTest = new visitApplyBill()
-    // refreshFormState({
-    //   filterGroupList: filterTest,
-    // })
-  }
-
   /**
    * 列表点击事件
    */