公司检索功能

src/contact/company/index.js

@@ -3,8 +3,12 @@ import { connect } from 'react-redux';
 import StaffHeader from '../../common/staffHeader';
 import { actionCreators } from './store';
 
-import { Table, Radio, Spin, Space, Tag } from 'antd';
+import { Table, Radio, Input, Space, Tag } from 'antd';
+import { AudioOutlined } from '@ant-design/icons';
 import 'antd/dist/antd.css';
+
+
+
 import Popups from '../../common/popups';
 
 const radioStyle = {
@@ -12,13 +16,14 @@ const radioStyle = {
   height: '30px',
   lineHeight: '30px',
 };
-
+const { Search } = Input;
 let popupsObj = null;
+
 class company extends PureComponent {
 
   render() {
-    const { columnsVisible, companyList, pagination, handleCompanyData, loading, columns, sortField, sort,
-      handleColumnsShow, handleInputChange, handleCompanySortField,handleCompanySort } = this.props;
+    const { columnsVisible, companyList, pagination, handleCompanyData, loading, columns, sortField, sort, searchValue,
+      handleColumnsShow, handleInputChange, handleCompanySortField, handleCompanySort, handleSearch } = this.props;
 
     return (
       <Fragment>
@@ -57,15 +62,16 @@ class company extends PureComponent {
                     </div>
                   </div>
 
-
-
-                  {/*   
-value={searchValue} onChange={handleInputSearchValue}
-                  */}
-
                   <div className="col-auto pr-0">
                     <div className="input-group input-group-sm bg-white shadow-inset-2">
-                      {/* <input type="text" ref={(input) => { this.searchValue = input }} onKeyUp={() => handleSearch(this.searchValue)} className="form-control bg-transparent" placeholder="姓名/客户/手机/QQ" /> */}
+                      <Search
+                        placeholder="客户名称"
+                        onSearch={value => handleSearch(pagination.toJS(), this.props, value)}
+                        onKeyUp={(e) => handleSearch(pagination.toJS(), this.props, e.target.value, 'keyup')}
+                        style={{ width: 200 }}
+                        loading={loading}
+                      />
+
                     </div>
                   </div>
 
@@ -102,8 +108,8 @@ value={searchValue} onChange={handleInputSearchValue}
                     <div className="dropdown-menu dropdown-menu-right" id="paixu">
                       <ul className="list-unstyled px-3 pt-2 mb-0">
                         <li className="mb-2">
-                        
-                          <Radio.Group onChange={(e) => handleCompanySortField(pagination.toJS(),this.props,e)} value={sortField}>
+
+                          <Radio.Group onChange={(e) => handleCompanySortField(pagination.toJS(), this.props, e)} value={sortField}>
                             <Radio style={radioStyle} value='CREATETIME'>
                               添加时间
                           </Radio>
@@ -115,7 +121,7 @@ value={searchValue} onChange={handleInputSearchValue}
                       </ul>
                       <ul className="list-unstyled px-3 pt-2 mb-0 border-top">
                         <li className="mb-2">
-                          <Radio.Group onChange={(e) => handleCompanySort(pagination.toJS(),this.props,e)} value={sort}>
+                          <Radio.Group onChange={(e) => handleCompanySort(pagination.toJS(), this.props, e)} value={sort}>
                             <Radio style={radioStyle} value='DESC'>
                               递减
                           </Radio>
@@ -171,7 +177,7 @@ value={searchValue} onChange={handleInputSearchValue}
 }
 
 
-
+let delaySwitch = null;//延迟检索开关
 
 const mapStateToProps = (state) => {
   return {
@@ -182,9 +188,9 @@ const mapStateToProps = (state) => {
     columns: state.getIn(['company', 'columns']),
     sortField: state.getIn(['company', 'sortField']),
     sort: state.getIn(['company', 'sort']),
+    searchValue: state.getIn(['company', 'searchValue']),
 
     companyDetail: state.getIn(['popups', 'companyDetail']),
-
   }
 }
 
@@ -204,16 +210,30 @@ const mapDispathToProps = (dispatch) => {
       dispatch(actionCreators.getCompanyLIst(pagination, props));
     },
     //排序设置
-    handleCompanySortField(pagination, props,e) {
+    handleCompanySortField(pagination, props, e) {
       dispatch(actionCreators.changeLoading());
       dispatch(actionCreators.changeSortField(e.target.value));
       dispatch(actionCreators.getCompanyLIst(pagination, props));//,{sortField:e.target.value,sort:props.sort}
     },
-    handleCompanySort(pagination, props,e){
+    handleCompanySort(pagination, props, e) {
       dispatch(actionCreators.changeLoading());
       dispatch(actionCreators.changeSort(e.target.value));
       dispatch(actionCreators.getCompanyLIst(pagination, props));//,{sortField:props.sortField,sort:e.target.value}
     },
+    //检索客户名称
+    handleSearch(pagination, props, searchValue, keyup) {
+      dispatch(actionCreators.changeLoading());
+      if (keyup === 'keyup') {
+        if (delaySwitch != null) {
+          clearTimeout(delaySwitch);
+        }
+        delaySwitch = setTimeout(() => {
+          dispatch(actionCreators.getCompanyLIst(pagination, props, searchValue));
+        }, 350);
+      } else {
+        dispatch(actionCreators.getCompanyLIst(pagination, props, searchValue));
+      }
+    },
     //弹出详情页点击触发
     handleCompanyPopups(key) {
       popupsObj.handleCompanyPopups(key);

src/contact/company/store/actionCreators.js

@@ -55,9 +55,9 @@ export const changeLoading = () => {
     }
 }
 //获得数据
-export const getCompanyLIst = (pagination, props) => {
+export const getCompanyLIst = (pagination, props,searchValue) => {
     return (dispatch) => {
-
+        
         // changeList(pagination,props,dispatch);
         let sortField = localStorage.getItem("contact_company_sortField");
         if(sortField===null){
@@ -67,6 +67,12 @@ export const getCompanyLIst = (pagination, props) => {
         if(sort===null){
             sort = props.sort;
         }
+        //检索
+        console.log(searchValue);
+        if(typeof searchValue==='undefined'){
+            console.log('到这里');
+            searchValue=props.searchValue;
+        }
 
         axios.get(config.CLD2API + '/contact/company', {
             params: {
@@ -74,6 +80,7 @@ export const getCompanyLIst = (pagination, props) => {
                 pageSize: pagination.pageSize,
                 sortField: sortField,
                 sort: sort,
+                searchValue:searchValue
             },
         }).then((res) => {
             const data = res.data;
@@ -84,7 +91,8 @@ export const getCompanyLIst = (pagination, props) => {
                     type: constants.CHANGE_COMPANY_DATA,
                     data: data,
                     pagination: pagination,
-                    props: props
+                    props: props,
+                    searchValue:searchValue
                 });
             } else {
                 console.log(data);

src/contact/company/store/reducer.js

@@ -12,6 +12,7 @@ const defaultState = fromJS({
 	loading: false,
 	sortField: 'CREATETIME',
 	sort: 'DESC',
+	searchValue:'',
 	columns: [
 		{
 			title: '客户名称',
@@ -163,7 +164,8 @@ export default (state = defaultState, action) => {
 				pagination: fromJS(pagination),
 				companyList: fromJS(action.data.data),
 				loading: false,
-				columns: fromJS(columnsBak)
+				columns: fromJS(columnsBak),
+				searchValue:action.searchValue
 			});
 		default:
 			return state;