1

src/common/dataTable/index.js

@@ -4,26 +4,35 @@ import * as config from '../config.js';
 const $ = require('jquery');
 $.DataTable = require('datatables.net');
 
-class dataTable extends PureComponent {
 
+let td = null;
 
+class dataTable extends PureComponent {
     render() {
+        const { columnsData } = this.props;
         return (
             <div>
                 <table ref={el => this.el = el} className="table table-bordered table-hover table-striped w-100">
-                <thead dangerouslySetInnerHTML={{__html: this.props.thead}} /> 
+                    {/* <thead dangerouslySetInnerHTML={{__html: this.props.thead}} />  */}
+                    <thead>
+                        <tr>
+                            {
+                                columnsData.map((item,index) => {
+                                    //console.log(item.get('联系人'));
+                                    return (<th key={index}>{item.get('columnsName')}</th>)
+                                })
+                            }
+                        </tr>
+                    </thead>
                 </table>
             </div>
         );
     }
 
-
     componentDidMount() {
-
         this.props.onRef(this)
-
         this.$el = $(this.el);
-        const td2 = this.$el.DataTable(
+        td = this.$el.DataTable(
             {
                 ordering: false,
                 processing: true,
@@ -43,36 +52,29 @@ class dataTable extends PureComponent {
             }
         );
 
-
         // td2.clear();
         //console.log(td2.search('123', false, false));
-        td2.search('123').draw();
 
         //td2.row.add({ 'DT_RowId': '0', 'clientname': '21dd23' });
         //td2.draw();
         //console.log($.DataTable.column(2));
         //this.$el.dataTable().search('123').draw();
         //dt.search('123').draw();
-
-    }
-    handleSearch() {
-        console.log('ddd3');
     }
 
+    handleSearch(filter) {
+        td.search(JSON.stringify(filter)).draw();
+        // console.log(value);
+    }
 }
 
 const mapStateToProps = (state) => {
     return {
-        // clientList: state.getIn(['contact', 'clientList']),
-        // dataSet: state.getIn(['contact', 'dataSet']),
     }
 }
 
 const mapDispathToProps = (dispatch) => {
     return {
-        handleSearch() {
-            console.log('ddd2');
-        },
     }
 }
 

src/contact/client/index.js

@@ -21,7 +21,7 @@ import '../style.css';
 //     );
 // }
 
-
+let dt = null;
 
 class client extends PureComponent {
 
@@ -137,7 +137,7 @@ class client extends PureComponent {
 
 
   render() {
-    const {  columns, clientThead, handleSearch } = this.props;
+    const { columns,  columnsData, handleSearch, handleColumnsShow } = this.props;
 
     return (
       <Fragment>
@@ -185,10 +185,7 @@ 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" />
-                      <div className="input-group-append">
-                        <button className="btn btn-default waves-effect waves-themed" type="button" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="搜索"><i className="fal fa-search"></i></button>
-                      </div>
+                      <input type="text" ref={(input) => { this.searchValue = input }} onKeyUp={() => handleSearch(this.searchValue)} className="form-control bg-transparent" placeholder="姓名/客户/手机/QQ" />
                     </div>
                   </div>
 
@@ -197,104 +194,26 @@ value={searchValue} onChange={handleInputSearchValue}
 
 
 
-
-
-
-
-
-
-
                   <div className="col-auto ml-auto">
-                    <button className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">已显示5列</button>
-                    {/* <div className="dropdown-menu">
-                      <ul className="list-unstyled px-3 pt-2 mb-0">
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie1" />
-                            <label className="custom-control-label" forHtml="lie1">手机</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie2" />
-                            <label className="custom-control-label" forHtml="lie2">电话</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie3" />
-                            <label className="custom-control-label" forHtml="lie3">QQ</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie4" checked="" />
-                            <label className="custom-control-label" forHtml="lie4">部门</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie5" />
-                            <label className="custom-control-label" forHtml="lie5">职务</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie6" />
-                            <label className="custom-control-label" forHtml="lie6">办公室</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie7" />
-                            <label className="custom-control-label" forHtml="lie7">地区</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie8" checked="" />
-                            <label className="custom-control-label" forHtml="lie8">个人标签</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie8" checked="" />
-                            <label className="custom-control-label" forHtml="lie8">地址</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie8" checked="" />
-                            <label className="custom-control-label" forHtml="lie8">乘车</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie8" checked="" />
-                            <label className="custom-control-label" forHtml="lie8">地标</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie8" checked="" />
-                            <label className="custom-control-label" forHtml="lie8">住宿</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie10" checked="" />
-                            <label className="custom-control-label" forHtml="lie10">软件锁</label>
-                          </div>
-                        </li>
-                        <li className="mb-2">
-                          <div className="custom-control custom-switch">
-                            <input type="checkbox" className="custom-control-input" id="lie11" checked="" />
-                            <label className="custom-control-label" forHtml="lie11">大司空</label>
-                          </div>
-                        </li>
+                    <button className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">显示列</button>
 
+                    <div className="dropdown-menu">
+                      <ul className="list-unstyled px-3 pt-2 mb-0">
+                        {
+                          columnsData.map((item, index) => {
+                            return (
+                              <li key={index} className="mb-2">
+                                <div className="custom-control custom-switch">
+                                  <input type="checkbox" name={index} onChange={() => handleInputChange()} value={item.get('columnsValue')} checked={item.get('columnsValue')}  className="custom-control-input" id={"lie" + index} />
+                                  <label onClick={() => handleColumnsShow(index)} className="custom-control-label" >{item.get('columnsName')}</label>
+                                </div>
+                              </li>
+                            )
+                          })
+                        }
                       </ul>
-                    </div> */}
+                    </div>
+
                   </div>
 
                   <div className="col-auto pl-0">
@@ -345,7 +264,7 @@ value={searchValue} onChange={handleInputSearchValue}
                 <div className="panel-container show ">
                   <div className="panel-content " >
                     {/* this.constructClientColumns()  this.constructClientThead()   */}
-                    <DataTable onRef={(ref) => this.dt = ref} url={`/contact/client`} thead={clientThead} columns={columns.toJS()} />
+                    <DataTable onRef={(ref) => dt = ref} url={`/contact/client`} columnsData={columnsData} columns={columns.toJS()} />
 
                     {/* <table id="dt-basic-example"  className="table table-bordered table-hover table-striped w-100">
                       <thead>
@@ -446,8 +365,7 @@ value={searchValue} onChange={handleInputSearchValue}
 }
 
 
-let delaySwitch=null;
-
+let delaySwitch = null;//延迟检索开关
 
 /**
  * store里的数据映射到这个组件里的state
@@ -455,11 +373,8 @@ let delaySwitch=null;
  */
 const mapStateToProps = (state) => {
   return {
-    clientList: state.getIn(['contact', 'clientList']),
-
-    //searchValue: state.getIn(['contact', 'searchValue']),
     columns: state.getIn(['contact', 'columns']),
-    clientThead: state.getIn(['contact', 'clientThead']),
+    columnsData: state.getIn(['contact', 'columnsData']),
   }
 }
 
@@ -473,19 +388,27 @@ const mapDispathToProps = (dispatch) => {
     handleClientData(list) {
       (list.size === 0) && dispatch(actionCreators.getClientLIst());
     },
+    //检索联系人
     handleSearch(serchValue) {
       //e.target --可以获得dom
-      if(delaySwitch != null){
+      if (delaySwitch != null) {
         clearTimeout(delaySwitch);
       }
-      delaySwitch = setTimeout(()=>{
-        this.dt.handleSearch();
+      delaySwitch = setTimeout(() => {
+        let filter = {
+          searchValue: serchValue.value
+        };
+        dt.handleSearch(filter);
       }, 350);
-
-      
-      ;
     },
-
+    handleInputChange(e){
+      // const target = event.target;
+      // const value =  target.checked;
+      // console.log(value);
+    },
+    handleColumnsShow(index) {
+      dispatch(actionCreators.toggleColumns(index));
+    },
     // handleInputFocus(list) {
 
     //   // const action = {

src/contact/client/store/actionCreators.js

@@ -4,12 +4,26 @@ import * as config from '../../../common/config.js';
 import axios from '../../../common/axios_auth.js';
 // import axios from 'axios';
 
-export const getClientLIst = () => {
+//显示隐藏列
+export const toggleColumns = (index) => {
     return (dispatch) => {
+        dispatch({
+            type: constants.TOGGLE_COLUMNS,
+            data: index,
+        });
+    }
+};
+
+
+
 
 
 
 
+
+
+export const getClientLIst = () => {
+    return (dispatch) => {
         axios.get(config.CLD2API+'/contact/client').then((res) => {
             const data = res.data;
             if(data.code===200){
@@ -23,6 +37,8 @@ export const getClientLIst = () => {
     }
 };
 
+
+
 //actionType
 // export const searchFocus = () => ({
 //     type: constants.SEARCH_FOCUS

src/contact/client/store/constants.js

@@ -1 +1,3 @@
+export const TOGGLE_COLUMNS = 'client/toggle_columns';
+
 export const CHANGE_CLIENT_DATA = 'client/change_client_data';

src/contact/client/store/reducer.js

@@ -3,7 +3,6 @@ import { fromJS } from 'immutable';
 
 const defaultState = fromJS({
 	clientList: [],
-	searchValue: '',
 	columns: [
 		{ data: "clientname" },
 		{ data: "companyname" },
@@ -29,33 +28,37 @@ const defaultState = fromJS({
 		{ data: "mark" },
 		{ data: "mark" },
 	],
-	clientThead:`
-		<tr>
-		  <th>联系人</th>
-		  <th>客户名称</th>
-		  <th>手机</th>
-		  <th>电话</th>
-		  <th>QQ</th>
-		  <th>部门</th>
-		  <th>职务</th>
-		  <th>办公室</th>
-		  <th>地区</th>
-		  <th>个人标签</th>
-		  <th>协作标签</th>
-		  <th>地址</th>
-		  <th>乘车</th>
-		  <th>地标</th>
-		  <th>住宿</th>
-		  <th>备注</th>
-		  <th>软件锁</th>
-		  <th>大司空</th>
-		  <th>养护云</th>
-		  <th>创建人</th>
-		</tr>`,
+	columnsData:[
+		{columnsName:'联系人',columnsValue:true},
+		{columnsName:'客户名称',columnsValue:true},
+		{columnsName:'手机',columnsValue:true},
+		{columnsName:'电话',columnsValue:true},
+		{columnsName:'QQ',columnsValue:true},
+		{columnsName:'部门',columnsValue:true},
+		{columnsName:'职务',columnsValue:true},
+		{columnsName:'办公室',columnsValue:true},
+		{columnsName:'地区',columnsValue:true},
+		{columnsName:'个人标签',columnsValue:true},
+		{columnsName:'协作标签',columnsValue:true},
+		{columnsName:'地址',columnsValue:true},
+		{columnsName:'乘车',columnsValue:true},
+		{columnsName:'地标',columnsValue:true},
+		{columnsName:'住宿',columnsValue:true},
+		{columnsName:'备注',columnsValue:true},
+		{columnsName:'软件锁',columnsValue:true},
+		{columnsName:'大司空',columnsValue:true},
+		{columnsName:'养护云',columnsValue:true},
+		{columnsName:'创建人',columnsValue:true},
+	],
+	
 });
 
 export default (state = defaultState, action) => {
 	switch (action.type) {
+		case constants.TOGGLE_COLUMNS:
+			let columnsData=state.get('columnsData').toJS();
+			columnsData[action.data].columnsValue=!columnsData[action.data].columnsValue;
+			return state.set('columnsData', fromJS(columnsData));
 		case constants.CHANGE_CLIENT_DATA:
 			return state.set('clientList', action.data);
 		default: