软件锁列表搜索

src/product/lock_store/index.js

@@ -2,17 +2,18 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 //import { BrowserRouter, Route,Link } from 'react-router-dom';
 import StaffHeader from '../../common/staffHeader'
-import { Table, Pagination } from 'antd';
+import { Table, Input } from 'antd';
 import 'antd/dist/antd.css';
 import { actionCreators } from './store';
-import Search from 'antd/lib/transfer/search';
+import { AudioOutlined } from '@ant-design/icons';
 
 
+const { Search } = Input;
 
 class lock_store extends PureComponent {
     render() {
-      const {dataSource,columns,pagination,handleLockstoreList} = this.props;
-      // console.log(pagination.toJS());
+      const {dataSource,columns,pagination,handleLockstoreList,handleSearch} = this.props;
+     
         return (
         <div>
         <StaffHeader />
@@ -24,6 +25,10 @@ class lock_store extends PureComponent {
                   <div className="col-auto pr-0">
                     <div className="input-group input-group-sm bg-white shadow-inset-2">
                       <Search
+                        placeholder="锁号"
+                        onSearch={value => handleSearch(pagination.toJS(),this.props,value)}
+                        onKeyUp={(e) => handleSearch(pagination.toJS(),this.props,e.target.value,'keyup')}
+                        style={{ width: 200 }}
                       />
                       {/* <input type="text" ref={(input) => { this.searchValue = input }} onKeyUp={() => handleSearch(this.searchValue)} className="form-control bg-transparent" placeholder="锁号" /> */}
                     </div>
@@ -89,7 +94,7 @@ class lock_store extends PureComponent {
                   {/* <!--数据内容区--> */}
                   <div className="panel-content">
                    <Table
-                   onChange={(pagination) => handleLockstoreList(pagination, this.props)}
+                   onChange={(pagination) => handleLockstoreList(pagination,this.props)}
                     pagination={pagination.toJS()}
                     bordered
                     dataSource={dataSource.toJS()}
@@ -117,7 +122,7 @@ class lock_store extends PureComponent {
     }
 }
 
-// let delaySwitch = null;
+let delaySwitch = null;
 /**
  * store里的数据映射到这个组件里的state
  * @param {*} state 
@@ -127,6 +132,7 @@ const mapStateToProps = (state) => {
       dataSource: state.getIn(['lockstore', 'dataSource']),
       columns: state.getIn(['lockstore', 'columns']),
       pagination: state.getIn(['lockstore', 'pagination']),
+      searchValue: state.getIn(['lockstore', 'searchValue']),
     }
 }
 
@@ -136,9 +142,22 @@ const mapStateToProps = (state) => {
  */
 const mapDispathToProps = (dispatch) => {
     return {
-      handleLockstoreList(pagination, props){
-        dispatch(actionCreators.getLockstoreList(pagination, props));
-      }
+      handleLockstoreList(pagination,support,){
+        dispatch(actionCreators.getLockstoreList(pagination,support));
+      },
+      handleSearch(pagination,support,searchValue,keyup){
+        if(keyup === 'keyup'){
+          if(delaySwitch != null){
+            clearTimeout(delaySwitch);
+          }
+          delaySwitch = setTimeout(() => {
+            dispatch(actionCreators.getCompanyLIst(pagination, support, searchValue));
+          },350);
+        }
+        else{
+          dispatch(actionCreators.getLockstoreList(pagination,support,searchValue));
+        }
+      },
     }
 }
 

src/product/lock_store/store/actionCreators.js

@@ -3,27 +3,31 @@ import { fromJS } from 'immutable';
 import * as config from '../../../common/config.js';
 import axios from '../../../common/axios_auth.js';
 
-export const getLockstoreList = (pagination) =>{
+export const getLockstoreList = (pagination,props,searchValue) =>{
     return(dispatch) =>{
+        // console.log('searchValue:'+searchValue);
+        // console.log('support:'+searchValue);
+        // console.log('typeof:'+typeof searchValue);
+        if(typeof searchValue === 'undefined'){
+            searchValue = props.searchValue;
+        }
         // console.log(config.CLD2API + '/contact/company')
         axios.get(config.CLD2API + '/contact/company', {
             params: {
                 current: pagination.current,
                 pageSize: pagination.pageSize,
-                // sortField: sortField,
-                // sort: sort,
-                // searchValue:searchValue,
+                searchValue:searchValue,
             },
         }).then((res) => {
             const data = res.data;
             if (data.code === 200) {
-                // console.log(data.recordsTotal);
+                // console.log(searchValue);
                 dispatch({
                     type: constants.CHANGE_LOCKSTORE_DATA,
                     data: fromJS(data.data),
                     pagination: pagination,
                     recordsTotal:data.recordsTotal,
-                    // searchValue:searchValue
+                    searchValue:searchValue,
                 });
             } else {
                 console.log(data);
@@ -36,8 +40,6 @@ export const getLockstoreList = (pagination) =>{
 }
 
 
-
-
     // current: pagination.current,    //当前页
     // pageSize: pagination.pageSize,  //每页多少条
     // sortField: sortField,           //排序字段

src/product/lock_store/store/reducer.js

@@ -1,5 +1,5 @@
 import * as constants from './constants';
-import React from 'react';
+// import React from 'react';
 //锁定state不可修改，导致错误y
 import { fromJS } from 'immutable';
 
@@ -10,6 +10,7 @@ const defaultState = fromJS({
 		position:['bottomCenter'],
 		showSizeChanger: false
 	},
+	searchValue:'',
 	dataSource:[],
 	  columns:[
 		{
@@ -67,6 +68,7 @@ export default (state = defaultState, action) => {
 			return state.merge({
 				pagination:fromJS(pagination),
 				dataSource:fromJS(action.data),
+				searchValue:action.searchValue,
 			});
 		default:
 			return state;