列表搜索逻辑完成

uas-office-web/wxuasapproval/src/configs/router.config.js

@@ -1,61 +1,61 @@
-import React from 'react'
-import {
-  BrowserRouter as Router,
-  Route,
-  Redirect,
-  Switch,
-} from 'react-router-dom'
-// import {browserHistory} from 'react-router'
-import BindPhone from '../pages/bindPhone/BindPhone'
-import Approval from '../pages/approval/Approval'
-import BindResult from '../pages/bindPhone/BindResult'
-import RedirectPage from '../pages/RedirectPage'
-import ApprovalHome from '../pages/approval/ApprovalHome'
-import UseStatus from '../pages/useStatus/UseStatus'
-import WorkSummary from '../pages/workSummary/WorkSummary'
-import ApprovalAdd from '../pages/approval/ApprovalAdd'
-import UasApproval from '../pages/approval/UasApproval'
-
-export class Routes extends React.Component {
-
-  componentWillUnmount () {
-    let storage = window.localStorage
-    storage.removeItem('paramJson')
-  }
-
-  render () {
-    return <Router
-      basename={(process.env.REACT_APP_ROUTER_BASE_NAME || '/ERP') + '/uas'}>
-      <div style={{ width: '100%', height: '100%' }}>
-        <Switch>
-          {/*U审批过渡页面（入口页面）*/}
-          <Route path='/uasApproval/:master/:type?' component={UasApproval}/>
-          {/*U审批首页*/}
-          <Route path='/approvalHome/:master/:type?' component={ApprovalHome}/>
-          {/*U审批详情页*/}
-          <Route path='/approval/:paramsStr?' component={Approval}/>
-          {/*U审批新增页面*/}
-          <Route path='/approvalAdd/:caller/:master/:id?'
-                 component={ApprovalAdd}/>
-          <Route path='/redirect/:paramsStr?' component={RedirectPage}/>
-
-          {/*<Route exact path='/bindPhone' component={BindPhone}/>*/}
-          <Route path='/bindPhone/:openId?' component={BindPhone}/>
-          <Route path='/bindResult/:result' component={BindResult}/>
-
-          <Route path='/usestatus/:instanceId' component={UseStatus}/>
-          <Route path='/worksummary' component={WorkSummary}/>
-          {/*<Redirect path='/' to={{pathname: '/bindPhone'}}/>*/}
-
-          {/*404页面*/}
-          <Route render={() => (
-            // <Redirect to={'/redirect'}/>
-            <Redirect to={'/uasApproval'}/>
-          )}/>
-        </Switch>
-      </div>
-    </Router>
-  }
-}
-
-
+import React from 'react'
+import {
+  BrowserRouter as Router,
+  Route,
+  Redirect,
+  Switch,
+} from 'react-router-dom'
+// import {browserHistory} from 'react-router'
+import BindPhone from '../pages/bindPhone/BindPhone'
+import Approval from '../pages/approval/Approval'
+import BindResult from '../pages/bindPhone/BindResult'
+import RedirectPage from '../pages/RedirectPage'
+import ApprovalHome from '../pages/approval/ApprovalHome'
+import UseStatus from '../pages/useStatus/UseStatus'
+import WorkSummary from '../pages/workSummary/WorkSummary'
+import ApprovalAdd from '../pages/approval/ApprovalAdd'
+import UasApproval from '../pages/approval/UasApproval'
+
+export class Routes extends React.Component {
+
+  componentWillUnmount () {
+    let storage = window.localStorage
+    storage.removeItem('paramJson')
+  }
+
+  render () {
+    return <Router
+      basename={(process.env.REACT_APP_ROUTER_BASE_NAME || '/ERP') + '/uas'}>
+      <div style={{ width: '100%', height: '100%' }}>
+        <Switch>
+          {/*U审批过渡页面（入口页面）*/}
+          <Route path='/uasApproval/:master/:type?' component={UasApproval}/>
+          {/*U审批首页*/}
+          <Route path='/approvalHome/:master/:type?' component={ApprovalHome}/>
+          {/*U审批详情页*/}
+          <Route path='/approval/:paramsStr?' component={Approval}/>
+          {/*U审批新增页面*/}
+          <Route path='/approvalAdd/:caller/:master/:id?'
+                 component={ApprovalAdd}/>
+          <Route path='/redirect/:paramsStr?' component={RedirectPage}/>
+
+          {/*<Route exact path='/bindPhone' component={BindPhone}/>*/}
+          <Route path='/bindPhone/:openId?' component={BindPhone}/>
+          <Route path='/bindResult/:result' component={BindResult}/>
+
+          <Route path='/usestatus/:instanceId' component={UseStatus}/>
+          <Route path='/worksummary' component={WorkSummary}/>
+          {/*<Redirect path='/' to={{pathname: '/bindPhone'}}/>*/}
+
+          {/*404页面*/}
+          <Route render={() => (
+            // <Redirect to={'/redirect'}/>
+            <Redirect to={'/uasApproval'}/>
+          )}/>
+        </Switch>
+      </div>
+    </Router>
+  }
+}
+
+

uas-office-web/wxuasapproval/src/index.css

@@ -103,3 +103,25 @@ textarea::-webkit-scrollbar {
     align-items: center;
 }
 
+
+.search-bar-root {
+    width: 100%;
+    height: 40px;
+    padding: 6px;
+    background: #F6F6F6;
+}
+
+.search-bar-layout {
+    width: 100%;
+    height: 100%;
+    background: white;
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #8C8C8C;
+    display: flex;
+    align-items: center;
+    padding-left: 14px;
+    border-radius: 6px;
+}
+
+

uas-office-web/wxuasapproval/src/pages/approval/ApprovalHome.jsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
-import { TabBar } from 'antd-mobile'
+import { TabBar, SearchBar } from 'antd-mobile'
 import { List, Icon, Skeleton, message } from 'antd'
 import './approval.css'
 import Swiper from 'swiper/js/swiper.min'
@@ -41,8 +41,6 @@ let mBaseUrl = window.location.origin
   // && 'http://erp.yitoa.com:8888/ERP'
   // && 'http://29226oq576.qicp.vip/erp'
 
-// process.env.REACT_APP_ROUTER_BASE_NAME || '/ERP'
-
 class ApprovalHome extends Component {
 
   constructor () {
@@ -60,6 +58,8 @@ class ApprovalHome extends Component {
       // sendHeight: document.documentElement.clientHeight,
       isSendRefresh: false,
       isSendLoading: true,
+      receiveKey: '',
+      sendKey: '',
     }
   }
 
@@ -94,6 +94,11 @@ class ApprovalHome extends Component {
 
     this.initSwiper(receiveState)
 
+    this.setState({
+      receiveKey: receiveState.searchKey,
+      sendKey: sendState.searchKey,
+    })
+
     let pageType = this.props.match.params.type
     if (pageType == 'receive') {
       selectedTab = 1
@@ -129,7 +134,7 @@ class ApprovalHome extends Component {
     this.mySwiper = new Swiper('.swiper-container', {
       autoplay: false,
       loop: false,
-      noSwiping: false,
+      noSwiping: true,
       initialSlide: receiveState.tabIndex,
       on: {
         slideChangeTransitionEnd: function () {
@@ -432,12 +437,37 @@ class ApprovalHome extends Component {
   }
 
   renderReceiveTab = () => {
-    const { homeState: { receiveState: { tabIndex } } } = this.props
+    const { homeState: { receiveState } } = this.props
+    const { tabIndex } = receiveState
     const todoItems = this.renderReceiveTodoItems()
     const doneItems = this.renderReceiveDoneItems()
     return (
       <div className='receive-root'>
-        <div className='line'></div>
+        <SearchBar
+          value={this.state.receiveKey}
+          placeholder={'搜索单据'}
+          maxLength={16}
+          onChange={value => {
+            this.setState({
+              receiveKey: value,
+            })
+          }}
+          onClear={value => {
+            this.setState({
+              receiveKey: value,
+            })
+          }}
+          onCancel={() => {
+            this.setState({
+              receiveKey: '',
+            })
+            if (!isObjEmpty(receiveState.searchKey)) {
+              this.searchSubmit(0, '')
+            }
+          }}
+          onSubmit={this.searchSubmit.bind(this, 0, this.state.receiveKey)}
+        />
+        {/*<div className='line'></div>*/}
         <div className='identity-select'>
           <div className={tabIndex === 0 ?
             'identity-item-select' : 'identity-item-normal'}
@@ -473,10 +503,10 @@ class ApprovalHome extends Component {
                this.contain = el
              }}>
           <div className="swiper-wrapper">
-            <div className="swiper-slide">
+            <div className="swiper-slide swiper-no-swiping">
               {todoItems}
             </div>
-            <div className="swiper-slide">
+            <div className="swiper-slide swiper-no-swiping">
               {doneItems}
             </div>
           </div>
@@ -516,6 +546,8 @@ class ApprovalHome extends Component {
   }
 
   renderSendTab = () => {
+    const { homeState: { sendState } } = this.props
+
     return (
       <div className='receive-content-root'>
         {/*<RefreshLayout*/}
@@ -537,30 +569,57 @@ class ApprovalHome extends Component {
         {/*          )}/>*/}
         {/*  </Skeleton>*/}
         {/*</RefreshLayout>*/}
-
-        <InfiniteScroll
-          initialLoad={false}
-          pageStart={0}
-          ref={el => {
-            this.sendList = el
+        <SearchBar
+          value={this.state.sendKey}
+          placeholder={'搜索单据'}
+          maxLength={16}
+          onChange={value => {
+            this.setState({
+              sendKey: value,
+            })
+          }}
+          onClear={value => {
+            this.setState({
+              sendKey: value,
+            })
           }}
-          loadMore={this.loadSendList}
-          hasMore={this.props.homeState.sendState.sendHasMore}
-          loader={<LoadingMore/>}
-          threshold={1}
-          useWindow={false}>
-          <Skeleton loading={this.state.isSendLoading} active
-                    paragraph={{ rows: 4 }}>
-            <List split={false}
-                  dataSource={this.props.homeState.sendState.sendList}
-                  renderItem={(item, index) => (
-                    <ApprovalItem approval={item}
-                                  type={3}
-                                  onItemClick={this.onSendItemClick.bind(this)}
-                                  index={index}/>
-                  )}/>
-          </Skeleton>
-        </InfiniteScroll>
+          onCancel={() => {
+            this.setState({
+              sendKey: '',
+            })
+            if (!isObjEmpty(sendState.searchKey)) {
+              this.searchSubmit(1, '')
+            }
+          }}
+          onSubmit={this.searchSubmit.bind(this, 1, this.state.sendKey)}
+        />
+        <div className='receive-content-root'>
+          <InfiniteScroll
+            initialLoad={false}
+            pageStart={0}
+            ref={el => {
+              this.sendList = el
+            }}
+            loadMore={this.loadSendList}
+            hasMore={sendState.sendHasMore}
+            loader={<LoadingMore/>}
+            threshold={1}
+            useWindow={false}>
+            <Skeleton loading={this.state.isSendLoading} active
+                      paragraph={{ rows: 4 }}>
+              <List split={false}
+                    dataSource={sendState.sendList}
+                    renderItem={(item, index) => (
+                      <ApprovalItem approval={item}
+                                    type={3}
+                                    onItemClick={this.onSendItemClick.bind(
+                                      this)}
+                                    index={index}/>
+                    )}/>
+            </Skeleton>
+          </InfiniteScroll>
+        </div>
+
       </div>
     )
   }
@@ -683,6 +742,49 @@ class ApprovalHome extends Component {
     return newMenu
   }
 
+  searchSubmit = (type, value) => {
+    if (type === 0) {
+      const { isReceiveTodoLoading, isReceiveDoneLoading } = this.state
+      this.setState({
+        receiveKey: value,
+      })
+      clearReceiveState({
+        searchKey: value,
+        tabIndex: this.props.homeState.receiveState.tabIndex,
+      })()
+      // this.mySwiper.slideTo(0, 0, false)
+      if (!isReceiveTodoLoading) {
+        this.setState({
+          isReceiveTodoLoading: true,
+        })
+        mTodoIndex = 0
+        this.loadTodoList(value)
+      }
+      if (!isReceiveDoneLoading) {
+        this.setState({
+          isReceiveDoneLoading: true,
+        })
+        mDoneIndex = 0
+        this.loadDoneList(value)
+      }
+    } else if (type === 1) {
+      const { isSendLoading } = this.state
+      this.setState({
+        sendKey: value,
+      })
+      clearSendState({
+        searchKey: value,
+      })()
+      if (!isSendLoading) {
+        this.setState({
+          isSendLoading: true,
+        })
+        mSendIndex = 0
+        this.loadSendList(value)
+      }
+    }
+  }
+
   onFuncClick = (obj) => {
     this.cacheScrollState()
     this.props.history.push('/approvalAdd/' + obj.sv_caller + '/' + mMaster)
@@ -772,8 +874,9 @@ class ApprovalHome extends Component {
     })
   }
 
-  loadTodoList = () => {
-    let { homeState: { receiveState: { listData } } } = this.props
+  loadTodoList = (keyword) => {
+    let { homeState: { receiveState } } = this.props
+    let { listData } = receiveState
     if (isObjEmpty(listData)) {
       mTodoIndex = 0
     }
@@ -791,6 +894,7 @@ class ApprovalHome extends Component {
     fetchGet(mBaseUrl + '/common/desktop/process/uapproval/toDo.action', {
       pageSize: mPageSize,
       page: mTodoIndex,
+      keyword: !isObjNull(keyword) ? keyword : receiveState.searchKey,
     }).then(response => {
       this.setState({
         isReceiveTodoLoading: false,
@@ -815,6 +919,7 @@ class ApprovalHome extends Component {
         mTodoIndex--
       }
       saveReceiveState({
+        hasMore1: false,
         listData,
         pageIndex: mTodoIndex,
       })()
@@ -830,8 +935,9 @@ class ApprovalHome extends Component {
     })
   }
 
-  loadDoneList = () => {
-    let { homeState: { receiveState: { listData2 } } } = this.props
+  loadDoneList = (keyword) => {
+    let { homeState: { receiveState } } = this.props
+    let { listData2 } = receiveState
     if (isObjEmpty(listData2)) {
       mDoneIndex = 0
     }
@@ -849,6 +955,7 @@ class ApprovalHome extends Component {
     fetchGet(mBaseUrl + '/common/desktop/process/uapproval/alreadyDo.action', {
       pageSize: mPageSize,
       page: mDoneIndex,
+      keyword: !isObjNull(keyword) ? keyword : receiveState.searchKey,
       isMobile: 1,
       _do: 1,
     }).then(response => {
@@ -875,6 +982,7 @@ class ApprovalHome extends Component {
         mDoneIndex--
       }
       saveReceiveState({
+        hasMore2: false,
         listData2,
         pageIndex: mDoneIndex,
       })()
@@ -890,8 +998,9 @@ class ApprovalHome extends Component {
     })
   }
 
-  loadSendList = () => {
-    let { homeState: { sendState: { sendList } } } = this.props
+  loadSendList = (keyword) => {
+    let { homeState: { sendState } } = this.props
+    let { sendList } = sendState
     if (isObjEmpty(sendList)) {
       mSendIndex = 0
     }
@@ -911,6 +1020,7 @@ class ApprovalHome extends Component {
       {
         pageSize: mPageSize,
         page: mSendIndex,
+        keyword: !isObjNull(keyword) ? keyword : sendState.searchKey,
         isMobile: 1,
         _do: 1,
       }).then(response => {
@@ -936,6 +1046,7 @@ class ApprovalHome extends Component {
         mSendIndex--
       }
       saveSendState({
+        sendHasMore: false,
         sendList,
         pageIndex: mSendIndex,
       })()

uas-office-web/wxuasapproval/src/pages/approval/approval.css

@@ -248,8 +248,8 @@
     font-size: 14px;
     letter-spacing: 1.88px;
     text-align: center;
-    height: 42px;
-    line-height: 42px;
+    height: 38px;
+    line-height: 38px;
 }
 
 .identity-item-normal {

uas-office-web/wxuasapproval/src/redux/actions/searchState.js

@@ -0,0 +1,50 @@
+/**
+ * Created by RaoMeng on 2020/2/26
+ * Desc: 操作搜索数据
+ */
+
+import store from '../store/store'
+import {
+  SEARCH_RECEIVE_STATE,
+  SEARCH_SEND_STATE,
+} from '../constants/actionTypes'
+
+/**
+ * 保存我审批的搜索数据
+ * @param data
+ * @returns {Function}
+ */
+export const saveSearchReceiveState = (data) => {
+  return () => {
+    store.dispatch({
+      type: SEARCH_RECEIVE_STATE,
+      ...data,
+    })
+  }
+}
+/**
+ * 保存我发起的搜索数据
+ * @param data
+ * @returns {Function}
+ */
+export const saveSearchSendState = (data) => {
+  return () => {
+    store.dispatch({
+      type: SEARCH_SEND_STATE,
+      ...data,
+    })
+  }
+}
+/**
+ * 删除搜索数据
+ * @param data
+ * @returns {Function}
+ */
+export const clearSearchState = (data) => {
+  return () => {
+    store.dispatch({
+      type: SEARCH_RECEIVE_STATE,
+      ...data,
+    })
+  }
+}

uas-office-web/wxuasapproval/src/redux/constants/actionTypes.js

@@ -1,9 +1,15 @@
-export const USER_LOGIN = 'USER_LOGIN'
-export const FRESH_HOME_STATE = 'FRESH_HOME_STATE'
-export const NEW_TAB_STATE = 'NEW_TAB_STATE'
-export const RECEIVE_TAB_STATE = 'RECEIVE_TAB_STATE'
-export const SEND_TAB_STATE = 'SEND_TAB_STATE'
-export const CLEAR_NEW_STATE = 'CLEAR_NEW_STATE'
-export const CLEAR_RECEIVE_STATE = 'CLEAR_RECEIVE_STATE'
-export const CLEAR_SEND_STATE = 'CLEAR_SEND_STATE'
-export const CLEAR_HOME_STATE = 'CLEAR_HOME_STATE'
+export const USER_LOGIN = 'USER_LOGIN'
+export const FRESH_HOME_STATE = 'FRESH_HOME_STATE'
+export const NEW_TAB_STATE = 'NEW_TAB_STATE'
+export const RECEIVE_TAB_STATE = 'RECEIVE_TAB_STATE'
+export const SEND_TAB_STATE = 'SEND_TAB_STATE'
+export const CLEAR_NEW_STATE = 'CLEAR_NEW_STATE'
+export const CLEAR_RECEIVE_STATE = 'CLEAR_RECEIVE_STATE'
+export const CLEAR_SEND_STATE = 'CLEAR_SEND_STATE'
+export const CLEAR_HOME_STATE = 'CLEAR_HOME_STATE'
+
+export const SEARCH_RECEIVE_STATE = 'SEARCH_RECEIVE_STATE'
+export const SEARCH_SEND_STATE = 'SEARCH_SEND_STATE'
+export const CLEAR_SEARCH_RECEIVE_STATE = 'CLEAR_SEARCH_RECEIVE_STATE'
+export const CLEAR_SEARCH_SEND_STATE = 'CLEAR_SEARCH_SEND_STATE'
+export const CLEAR_SEARCH_STATE = 'CLEAR_SEARCH_STATE'

uas-office-web/wxuasapproval/src/redux/reducers/index.js

@@ -1,10 +1,11 @@
-/*合并reducer*/
-
-import { combineReducers } from 'redux'
-
-import { user } from './user'
-import redHomeState from './redHomeState'
-
-export const appReducer = combineReducers({
-  user, redHomeState,
-})
+/*合并reducer*/
+
+import { combineReducers } from 'redux'
+
+import { user } from './user'
+import redHomeState from './redHomeState'
+import redSearchState from './redSearchState'
+
+export const appReducer = combineReducers({
+  user, redHomeState, redSearchState,
+})

uas-office-web/wxuasapproval/src/redux/reducers/redHomeState.js

@@ -16,6 +16,7 @@ const initNewState = {
 const initReceiveState = {
   tabIndex: 0,
   itemIndex: -1,
+  searchKey: '',
 
   scrollTop: 0,
   listData: [],
@@ -29,6 +30,7 @@ const initReceiveState = {
 }
 
 const initSendState = {
+  searchKey: '',
   sendList: [],
   sendHasMore: true,
   scrollTop: 0,
@@ -57,7 +59,7 @@ const redHomeState = (state = initListState, action) => {
         },
       }
     case RECEIVE_TAB_STATE:
-      //更新新建菜单数据
+      //更新【我审批的】数据
       return {
         ...state,
         receiveState: {
@@ -66,7 +68,7 @@ const redHomeState = (state = initListState, action) => {
         },
       }
     case SEND_TAB_STATE:
-      //更新新建菜单数据
+      //更新【我发起的】数据
       return {
         ...state,
         sendState: {
@@ -78,19 +80,28 @@ const redHomeState = (state = initListState, action) => {
       //清除新建菜单数据
       return {
         ...state,
-        newState: initNewState,
+        newState: {
+          ...initNewState,
+          ...action,
+        },
       }
     case CLEAR_RECEIVE_STATE:
       //清除[我审批的]数据
       return {
         ...state,
-        receiveState: initReceiveState,
+        receiveState: {
+          ...initReceiveState,
+          ...action,
+        },
       }
     case CLEAR_SEND_STATE:
       //清除[我发起的]数据
       return {
         ...state,
-        sendState: initSendState,
+        sendState: {
+          ...initSendState,
+          ...action,
+        },
       }
     case FRESH_HOME_STATE:
       //更新首页数据

uas-office-web/wxuasapproval/src/redux/reducers/redSearchState.js

@@ -0,0 +1,69 @@
+import redHomeState from './redHomeState'
+import {
+  CLEAR_HOME_STATE,
+  CLEAR_SEARCH_RECEIVE_STATE,
+  CLEAR_SEARCH_STATE,
+  RECEIVE_TAB_STATE,
+  SEND_TAB_STATE,
+} from '../constants/actionTypes'
+
+const initReceiveState = {
+  tabIndex: 0,
+  itemIndex: -1,
+  keyword: '',
+
+  scrollTop: 0,
+  listData: [],
+  hasMore1: true,
+  pageIndex: 1,
+
+  scrollTop2: 0,
+  listData2: [],
+  hasMore2: true,
+  pageIndex2: 1,
+}
+
+const initSendState = {
+  keyword: '',
+  sendList: [],
+  sendHasMore: true,
+  scrollTop: 0,
+}
+const initSearchState = {
+  receiveState: initReceiveState,
+  sendState: initSendState,
+}
+
+const redSearchState = (state = initSearchState, action) => {
+  if (action === undefined) {
+    return state
+  }
+
+  switch (action.type) {
+    case RECEIVE_TAB_STATE:
+      //更新【我审批的】搜索数据
+      return {
+        ...state,
+        receiveState: {
+          ...state.receiveState,
+          ...action,
+        },
+      }
+    case SEND_TAB_STATE:
+      //更新【我发起的】搜索数据
+      return {
+        ...state,
+        sendState: {
+          ...state.sendState,
+          ...action,
+        },
+      }
+    case CLEAR_SEARCH_STATE:
+      //清空搜索数据
+      return initSearchState
+    default:
+      return state
+  }
+}
+
+export default redSearchState