|
@@ -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);
|