1

src/common/dataTable/dataTable.react.js

@@ -0,0 +1,139 @@
+import React, { PureComponent,Fragment } from 'react';
+import { connect } from 'react-redux';
+
+import * as config from '../config.js';
+
+const DataTableTD = (props) => {
+    const { tdData, columnsData,popups } = props;
+    return (
+        <Fragment>
+            {
+                columnsData.map((item,index) => {
+                    return (
+                    <td key={index}  >
+                        {/* {tdData.get(item.get('dataKey'))}  (e) => popups(e, index) */}
+                        {item.get('columnsValue')?<a onClick={(e) => popups(e)} href="#detail" data-toggle="modal" data-target="#detail">{tdData.get(item.get('dataKey'))}</a>:tdData.get(item.get('dataKey'))}
+                        </td>
+                    )
+                })
+            }
+        </Fragment>
+        );
+}
+
+
+class dataTable extends PureComponent {
+    // constructor(props){
+    //     super(props);
+    //     this.handleColumnVisible=this.handleColumnVisible.bind(this);
+    // }
+
+    getListArea(list) {
+        const { columnsData, companyList } = this.props;
+
+        const newList = companyList;
+        const pageList = [];
+        let html = null;
+        console.log(list); columnsData;
+        if (newList.length) {
+            for (let i = 0; i < newList.length; i++) {
+
+                html = (<tr key={newList[i].DT_RowId} ></tr>);
+
+                pageList.push(
+                    <tr key={newList[i].DT_RowId}>
+
+                        <td>123123123123123123</td>
+                    </tr>
+
+                )
+            }
+            console.log(pageList);
+        }
+
+        return pageList;
+    }
+
+    render() {
+        const { columnsData, list,popups } = 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>
+                        <tr>
+                            {
+                                columnsData.map((item, index) => {
+                                    return (<th key={index}>{item.get('columnsName')}</th>)
+                                })
+                            }
+                        </tr>
+                    </thead>
+                    <tbody>
+
+                        {
+
+                            list.map((item) => {
+                                return (
+                                    <tr key={item.get('id')} >
+
+                                        <DataTableTD tdData={item} columnsData={columnsData} popups={popups} />
+
+                                    </tr>
+                                )
+                            })
+                        }
+                    </tbody>
+
+
+                </table>
+
+                <div className="d-flex justify-content-center">
+                    <ul className="pagination pagination-sm">
+                        <li className="page-item disabled">
+                            <a className="page-link" href="#" aria-label="Previous">
+                                <span aria-hidden="true"><i className="fal fa-chevron-left"></i></span>
+                            </a>
+                        </li>
+                        <li className="page-item active" aria-current="page">
+                            <span className="page-link">
+                                1
+                											<span className="sr-only">(current)</span>
+                            </span>
+                        </li>
+                        <li className="page-item"><a className="page-link" href="#">2</a></li>
+                        <li className="page-item"><a className="page-link" href="#">3</a></li>
+                        <li className="page-item">
+                            <a className="page-link" href="#" aria-label="Next">
+                                <span aria-hidden="true"><i className="fal fa-chevron-right"></i></span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+        );
+    }
+
+    componentDidMount() {
+
+    }
+
+
+}
+
+const mapStateToProps = (state) => {
+    return {
+        companyList: state.getIn(['company', 'companyList']),
+    }
+}
+
+const mapDispathToProps = (dispatch) => {
+    return {
+
+    }
+}
+
+
+export default connect(mapStateToProps, mapDispathToProps)(dataTable);
+//export default dataTable;

src/common/popups/client.js

@@ -0,0 +1,280 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'react-redux';
+
+class client extends PureComponent {
+    render() {
+        return (
+<Fragment>
+<div className="save-tips">
+                    <div className="alert bg-warning-700 text-white p-2 m-1" role="alert">
+                      <div className="d-flex align-items-center">
+                        <div className="alert-icon">
+                          <i className="fal fa-info-circle"></i>
+                        </div>
+                        <div className="flex-1">
+                          <span className="h5">内容已经修改</span>
+                        </div>
+                        <a href="#" className="btn btn-sm text-white width-8">取消</a>
+                        <a href="#" className="btn btn-light btn-sm width-8">保存</a>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="sheet-panel-header d-flex justify-content-between mx-4">
+                    <div>
+                      <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="上一条记录" className="mr-2 disabled"><i className="far fa-chevron-up"></i></a>
+                      <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="下一条记录" className="mr-2"><i className="far fa-chevron-down"></i></a>
+                      <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i className="fal fa-external-link"></i></a>
+                    </div>
+                    <div>
+                    </div>
+                  </div>
+                  <div className="sheet-panel-content">
+                    <div className="sheet-panel-form slimScroll1 mx-4">
+                      <div className="form-header mt-3">
+                        <div className="d-flex justify-content-between"><span className="text-muted">联系人</span><span className="text-muted">陈特 创建于 2019年5月6日 14:55</span></div>
+                        <legend>张三</legend>
+                      </div>
+                      <div className="cldform clearfix">
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">姓名</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>张三</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">姓名</div>
+                          <div className="cldform-control">
+                            {/* <textarea className="cldform-contarl-textarea" style="height:36px;width:100%">张三</textarea> */}
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item cldform-item-wauto">
+                          <div className="cldform-label">联系人地区</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox" data-toggle="dropdown"><span className="cldform-contarl-dropdown">广东省 / 珠海市 / 香洲区<i className="far fa-map-marker-alt mt-1"></i></span></div>
+                            <div className="dropdown-menu" >
+                              <ul className="nav nav-tabs nav-tabs-clean justify-content-center" role="tablist">
+                                <li className="nav-item"><a className="nav-link text-center active" data-toggle="tab" href="#tab-province2" role="tab" aria-selected="true">省份</a></li>
+                                <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-city2" role="tab" aria-selected="false">市区</a></li>
+                                <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-area2" role="tab" aria-selected="false">县区</a></li>
+                              </ul>
+                              <div className="tab-content p-3">
+                                <div className="tab-pane city-item fade active show" id="tab-province2" role="tabpanel" aria-labelledby="tab-province">
+
+                                  <button type="button" className="btn btn-xs btn-outline-default">北京市</button><button type="button" className="btn btn-xs btn-outline-default">天津市</button><button type="button" className="btn btn-xs btn-outline-default">河北省</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">山西省</button><button type="button" className="btn btn-xs btn-outline-default">内蒙古自治区</button>
+
+                                  <button type="button" className="btn btn-xs btn-outline-default">黑龙江省</button><button type="button" className="btn btn-xs btn-outline-default">吉林省</button><button type="button" className="btn btn-xs btn-outline-default">辽宁省</button>
+
+                                  <button type="button" className="btn btn-xs btn-outline-default">山东省</button><button type="button" className="btn btn-xs btn-outline-default">江苏省</button><button type="button" className="btn btn-xs btn-outline-default">安徽省</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">上海市</button><button type="button" className="btn btn-xs btn-outline-default">浙江省</button><button type="button" className="btn btn-xs btn-outline-default">江西省</button><button type="button" className="btn btn-xs btn-outline-default">福建省</button>
+
+                                  <button type="button" className="btn btn-xs btn-outline-default">河南省</button><button type="button" className="btn btn-xs btn-outline-default">湖北省</button><button type="button" className="btn btn-xs btn-outline-default">湖南省</button>
+
+                                  <button type="button" className="btn btn-xs btn-primary">广东省</button><button type="button" className="btn btn-xs btn-outline-default">广西壮族自治区</button><button type="button" className="btn btn-xs btn-outline-default">海南省</button>
+                                  <button type="button" className="btn btn-xs btn-outline-default">四川省</button><button type="button" className="btn btn-xs btn-outline-default">贵州省</button><button type="button" className="btn btn-xs btn-outline-default">云南省</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">重庆市</button><button type="button" className="btn btn-xs btn-outline-default">西藏自治区</button>
+
+                                  <button type="button" className="btn btn-xs btn-outline-default">陕西省</button><button type="button" className="btn btn-xs btn-outline-default">甘肃省</button><button type="button" className="btn btn-xs btn-outline-default">宁夏回族自治区</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">青海省</button><button type="button" className="btn btn-xs btn-outline-default">新疆维吾尔自治区</button>
+
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">台湾省</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">香港特别行政区</button><button type="button" className="btn btn-xs btn-outline-default">澳门特别行政区</button>
+                                </div>
+                                <div className="tab-pane city-item fade" id="tab-city2" role="tabpanel" aria-labelledby="tab-city"><button type="button" className="btn btn-xs btn-outline-default">广州市</button><button type="button" className="btn btn-xs btn-outline-default">深圳市</button><button type="button" className="btn btn-xs btn-primary">珠海市</button><button type="button"
+                                  className="btn btn-xs btn-outline-default">汕头市</button><button type="button" className="btn btn-xs btn-outline-default">佛山市</button><button type="button" className="btn btn-xs btn-outline-default">韶关市</button><button type="button" className="btn btn-xs btn-outline-default">湛江市</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">肇庆市</button><button type="button" className="btn btn-xs btn-outline-default">江门市</button><button type="button" className="btn btn-xs btn-outline-default">茂名市</button><button type="button" className="btn btn-xs btn-outline-default">惠州市</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">梅州市</button><button type="button" className="btn btn-xs btn-outline-default">汕尾市</button><button type="button" className="btn btn-xs btn-outline-default">河源市</button><button type="button" className="btn btn-xs btn-outline-default">阳江市</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">清远市</button><button type="button" className="btn btn-xs btn-outline-default">东莞市</button><button type="button" className="btn btn-xs btn-outline-default">中山市</button><button type="button" className="btn btn-xs btn-outline-default">潮州市</button>
+                                  <button
+                                    type="button" className="btn btn-xs btn-outline-default">揭阳市</button><button type="button" className="btn btn-xs btn-outline-default">云浮市</button></div>
+                                <div className="tab-pane city-item fade" id="tab-area2" role="tabpanel" aria-labelledby="tab-area"><button type="button" className="btn btn-xs btn-primary">香洲区</button><button type="button" className="btn btn-xs btn-outline-default">金湾区</button><button type="button" className="btn btn-xs btn-outline-default">斗门区</button></div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">客户名称</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><div className="card p-2 text-primary"><div className="d-flex justify-content-between"><a href="#com-detail" data-toggle="modal" data-target="#com-detail">珠海纵横创新软件有限公司1</a><span>
+                              <a href="#" className="btn btn-outline-danger btn-xs btn-icon mr-1" data-toggle="modal" data-target="#remover-com"><i className="far fa-unlink" data-toggle="tooltip" data-placement="left" data-original-title="移除客户"></i></a>
+                              <a href="#" className="btn btn-outline-primary btn-xs btn-icon" data-toggle="modal" data-target="#link-com"><i className="far fa-retweet" data-toggle="tooltip" data-placement="left" data-original-title="更换客户"></i></a></span></div></div></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">客户名称</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span><a href="#link-com" data-toggle="modal" data-target="#link-com"><i className="far fa-link"></i> 关联客户</a></span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item cldform-item-half pr-3">
+                          <div className="cldform-label">性别</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox" data-toggle="dropdown"><span className="cldform-contarl-dropdown">男<i className="far fa-angle-down mt-1"></i></span></div>
+                            <div className="dropdown-menu" >
+                              <button className="dropdown-item">男</button>
+                              <button className="dropdown-item">女</button>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="cldform-item cldform-item-half pl-3">
+                          <div className="cldform-label">昵称</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>陈（特）工：</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item cldform-item-half pr-3">
+                          <div className="cldform-label">手机</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>15800000001</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-item cldform-item-half pl-3">
+                          <div className="cldform-label">QQ</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>1234567</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item cldform-item-half pr-3">
+                          <div className="cldform-label">电话</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>0756-3850891</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-item cldform-item-half pl-3">
+                          <div className="cldform-label">邮箱</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>914630468@qq.com</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item cldform-item-half pr-3">
+                          <div className="cldform-label">传真</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>0756-3850891</span></div>
+                          </div>
+                        </div>
+
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item cldform-item-half pr-3">
+                          <div className="cldform-label">部门</div>
+                          <div className="cldform-control">
+                            {/* <textarea class="cldform-contarl-textarea " data-toggle="dropdown" style="height:36px;width:100%" placeholder="输入新部门"></textarea> */}
+                            {/* <div class="dropdown-menu" style="width:320px">
+                              <div class="row m-3">
+                                <div class="custom-control custom-radio custom-control-inline col-4 mr-0 mb-1">
+                                  <input type="radio" class="custom-control-input" id="department1" name="departmentradio" />
+                                  <label class="custom-control-label" for="department1">部门1</label>
+                                </div>
+                                <div class="custom-control custom-radio custom-control-inline col-4 mr-0 mb-1">
+                                  <input type="radio" class="custom-control-input" id="department2" name="departmentradio" />
+                                  <label class="custom-control-label" for="department2">部门2</label>
+                                </div>
+                                <div class="custom-control custom-radio custom-control-inline col-4 mr-0 mb-1">
+                                  <input type="radio" class="custom-control-input" id="department3" name="departmentradio" />
+                                  <label class="custom-control-label" for="department3">部门3</label>
+                                </div>
+                              </div>
+                            </div> */}
+                          </div>
+                        </div>
+                        <div className="cldform-item cldform-item-half pl-3">
+                          <div className="cldform-label">职务</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>科长</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">办公室</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>2楼</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">联系人地址</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox"><span>银桦路8号深发展大厦24D</span></div>
+                          </div>
+                        </div>
+
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">联系人乘车</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox text-muted"><span>填写文本内容</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">联系人地标</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox text-muted"><span>填写文本内容</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">联系人住宿</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox text-muted"><span>填写文本内容</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">备注</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox text-muted"><span>填写文本内容</span></div>
+                          </div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">个人标签</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span className="badge badge-pill tagcol-01">标签</span><span className="badge badge-pill tagcol-02">特别关注</span><a title="添加标签" className="badge badge-secondary tagcol-08" href="" data-toggle="dropdown"><i className="far fa-plus"></i></a><div className="dropdown-menu"></div></div></div>
+                        </div>
+                        <div className="cldform-line"></div>
+                        <div className="cldform-item">
+                          <div className="cldform-label">协作标签</div>
+                          <div className="cldform-control">
+                            <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span className="badge tagcol-11">协作标签1</span><span className="badge tagcol-12">协作标签2</span><a title="添加标签" className="badge badge-secondary tagcol-08" href="" data-toggle="dropdown"><i className="far fa-plus"></i></a><div className="dropdown-menu">
+
+                            </div>
+                            </div></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  </Fragment>
+
+        );
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+      popupsClientId: state.getIn(['popups', 'popupsClientId']),
+    }
+  }
+  
+  const mapDispathToProps = (dispatch) => {
+    return {}
+  }
+
+export default connect(mapStateToProps, mapDispathToProps)(client);

src/contact/company/index.js

@@ -0,0 +1,326 @@
+import React, { PureComponent, Fragment } from 'react';
+import { connect } from 'react-redux';
+import StaffHeader from '../../common/staffHeader';
+import { actionCreators } from './store';
+
+import { Table, Tag, Space } from 'antd';
+import 'antd/dist/antd.css';
+
+// import DataTable from '../../common/dataTable/dataTable.react';
+const columns = [
+  {
+    title: '客户名称',
+    dataIndex: 'clientname',
+    key: 'clientname',
+    render: text => <a>{text}</a>,
+  },
+  {
+    title: '地区',
+    dataIndex: 'companyname',
+    key: 'companyname',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+  {
+    title: '标签',
+    dataIndex: 'telephone',
+    key: 'telephone',
+  },
+
+];
+
+
+
+class company extends PureComponent {
+
+  render() {
+    const { companyData, columnsData, companyList, pagination, handleCompanyData, loading, handleCompanyPopups } = this.props;
+
+    return (
+      <Fragment>
+        <StaffHeader />
+        <main id="js-page-content" role="main" className="page-content">
+          <div className="row ">
+            <div className="col-xl-12 ">
+              <div id="panel-1" className="panel ">
+                <div className="panel-hdr ">
+
+
+
+                  <div className="col-auto pr-0">
+                    <button className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">省/市/区</button>
+                    <div className="dropdown-menu width300" >
+                      <ul className="nav nav-tabs nav-tabs-clean justify-content-center" role="tablist">
+                        <li className="nav-item"><a className="nav-link text-center active" data-toggle="tab" href="#tab-province2" role="tab" aria-selected="true">省份</a></li>
+                        <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-city2" role="tab" aria-selected="false">市区</a></li>
+                        <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-area2" role="tab" aria-selected="false">县区</a></li>
+                      </ul>
+                      <div className="tab-content p-3">
+                        <div className="tab-pane city-item fade active show" id="tab-province2" role="tabpanel" aria-labelledby="tab-province">
+
+                          <p className="mb-1"><button type="button" className="btn btn-xs btn-outline-default">黑龙江省</button><button type="button" className="btn btn-xs btn-outline-default">吉林省</button><button type="button" className="btn btn-xs btn-outline-default">辽宁省</button></p>
+
+                        </div>
+                        <div className="tab-pane city-item fade" id="tab-city2" role="tabpanel" aria-labelledby="tab-city">
+                          <button type="button" className="btn btn-xs btn-outline-default">广州市</button>
+
+                        </div>
+
+                        <div className="tab-pane city-item fade" id="tab-area2" role="tabpanel" aria-labelledby="tab-area">
+                          <button type="button" className="btn btn-xs btn-primary">香洲区</button>
+                        </div>
+                      </div>
+                    </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" /> */}
+                    </div>
+                  </div>
+
+
+
+
+
+
+                  <div className="col-auto ml-auto">
+                    <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={(e) => handleInputChange(e, index)} value={item.get('columnsValue')} checked={item.get('columnsValue')} className="custom-control-input" id={"lie" + index} />
+                                                                    <label onClick={() => handleColumnsShow(index)} htmlFor={"lie" + index} className="custom-control-label" >{item.get('columnsName')}</label>
+                                                                   
+                                                                </div>
+                                                            </li>
+                                                        )
+                                                    })
+                                                }
+                                            </ul> */}
+                    </div>
+
+                  </div>
+
+                  <div className="col-auto pl-0">
+                    <button className="btn btn-sm btn-default" data-toggle="dropdown"><i className="fal fa-sort-amount-down"></i> 排序</button>
+                    <div className="dropdown-menu dropdown-menu-right" id="paixu">
+                      {/* <ul className="list-unstyled px-3 pt-2 mb-0">
+                        <li className="mb-2">
+                          <div className="custom-control custom-radio">
+                            <input type="radio" className="custom-control-input" id="pai1" name="paizhi" checked="" />
+                            <label className="custom-control-label" forHtml="pai1">添加时间</label>
+                          </div>
+                        </li>
+                        <li className="mb-2">
+                          <div className="custom-control custom-radio">
+                            <input type="radio" className="custom-control-input" id="pai2" name="paizhi" />
+                            <label className="custom-control-label" forHtml="pai2">编辑时间</label>
+                          </div>
+                        </li>
+                        <li className="mb-2">
+                          <div className="custom-control custom-radio">
+                            <input type="radio" className="custom-control-input" id="pai3" name="paizhi" />
+                            <label className="custom-control-label" forHtml="pai3">记录时间</label>
+                          </div>
+                        </li>
+                      </ul>
+                      <ul className="list-unstyled px-3 pt-2 mb-0 border-top">
+                        <li className="mb-2">
+                          <div className="custom-control custom-radio">
+                            <input type="radio" className="custom-control-input" id="pdown" name="paixu" checked="" />
+                            <label className="custom-control-label" forHtml="pdown">降序</label>
+                          </div>
+                        </li>
+                        <li className="mb-2">
+                          <div className="custom-control custom-radio">
+                            <input type="radio" className="custom-control-input" id="pup" name="paixu" />
+                            <label className="custom-control-label" forHtml="pup">升序</label>
+                          </div>
+                        </li>
+                      </ul> */}
+                    </div>
+                  </div>
+
+                  <div className="col-auto pl-0">
+                    <button type="button" className="btn btn-sm btn-primary"><i className="far fa-plus"></i> 联系人</button>
+                  </div>
+
+                </div>
+                <div className="panel-container show ">
+                  <div className="panel-content " >
+
+                    <Table onChange={handleCompanyData} pagination={pagination.toJS()} loading={loading} bordered columns={columns} dataSource={companyList.toJS()} />
+
+                    {/* <DataTable url={`/contact/client`} list={companyList} columnsData={columnsData} popups={handleCompanyPopups}  /> */}
+
+
+
+                    {/* this.constructClientColumns()  this.constructClientThead()   */}
+
+                    {/* <table id="dt-basic-example"  className="table table-bordered table-hover table-striped w-100">
+                      <thead>
+                        <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>
+                      </thead>
+                      <tbody>
+
+                         {
+                           
+                           companyList.map((item) => {
+                            return (
+                              <tr key={item.get('id')} >
+                                <td><a href="#detail" data-toggle="modal" data-target="#detail">{item.get('clientname')}</a></td>
+                                <td><a href="#com-detail" data-toggle="modal" data-target="#com-detail">{item.get('companyname')}</a></td>
+                                <td>{item.get('telephone')}</td>
+                                <td>{item.get('phone')}</td>
+                                <td>{item.get('qq')}</td>
+                                <td>{item.get('department')}</td>
+                                <td>{item.get('position')}</td>
+                                <td>{item.get('office')}</td>
+                                <td>{item.get('local')}</td>
+                                <td>个人标签</td>
+                                <td><span className="badge tagcol-01">
+                                  <span className="d-inline-block text-truncate text-truncate-xs">这是一条标签名字很长很长的标签</span></span><span className="badge tagcol-02">
+                                    <span className="d-inline-block text-truncate text-truncate-xs">特别关注</span>
+                                  </span>
+                                  <a data="添加标签" className="badge badge-secondary tagcol-08" href="" data-toggle="dropdown"><i className="far fa-plus"></i></a>
+                                </td>
+                                <td>{item.get('address')}</td>
+                                <td>{item.get('ride')}</td>
+                                <td>{item.get('landmarks')}</td>
+                                <td>{item.get('stay')}</td>
+                                <td>{item.get('mark')}</td>
+                                <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">HNYH-0654</a></td>
+                                <td>大司空</td>
+                                <td>养护云</td>
+                                <td>创建人</td>
+                              </tr>
+                            )
+                          })
+                        } 
+                      </tbody>
+
+                    </table> */}
+
+
+
+
+
+
+
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </main>
+
+      </Fragment>
+    )
+  }
+
+  componentDidMount() {
+    const { handleCompanyData, companyList,pagination } = this.props;
+    handleCompanyData(pagination.toJS());
+  }
+
+}
+
+
+
+
+const mapStateToProps = (state) => {
+  return {
+    companyData: state.getIn(['company', 'companyData']),
+    columnsData: state.getIn(['company', 'columnsData']),
+    companyList: state.getIn(['company', 'companyList']),
+    pagination: state.getIn(['company', 'pagination']),
+    loading: state.getIn(['company', 'loading']),
+  }
+}
+
+const mapDispathToProps = (dispatch) => {
+  return {
+    handleCompanyData(pagination,filters,sorter) {
+      dispatch(actionCreators.getCompanyLIst(pagination));
+      //(list.size === 0) && dispatch(actionCreators.getCompanyLIst());
+    },
+    handleCompanyPopups(e) {
+      console.log('sdd');
+      console.log(e);
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispathToProps)(company);

src/contact/company/store/actionCreators.js

@@ -0,0 +1,86 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+import * as config from '../../../common/config.js';
+import axios from '../../../common/axios_auth.js';
+// import axios from 'axios';
+
+//显示隐藏列
+// export const toggleColumns = (index) => {
+//     return (dispatch) => {
+//         dispatch({
+//             type: constants.TOGGLE_COLUMNS,
+//             data: index,
+//         });
+//     }
+// };
+// export const toggleColumnsAll = (dt) => {
+//     return (dispatch) => {
+//         dispatch({
+//             type: constants.TOGGLE_COLUMNS_ALL,
+//             dt:dt
+//         });
+//     }
+// };
+
+export const getCompanyLIst = (pagination) => {
+    return (dispatch) => {
+
+        
+
+        axios.get(config.CLD2API + '/contact/company', {
+            params: {
+                current: pagination.current,
+                pageSize: pagination.pageSize,
+            },
+        }).then((res) => {
+            const data = res.data;
+
+            if (data.code === 200) {
+                //let d2=JSON.parse(data.list);
+                //console.log(d2);
+                //dispatch(changeList(JSON.parse(d2)));
+                dispatch({
+                    type: constants.CHANGE_COMPANY_DATA,
+                    data: data,
+                    pagination:pagination
+                });
+            } else {
+                console.log(data);
+            }
+        }).catch((e) => {
+            console.log(e);
+            console.log('error');
+        })
+    }
+};
+
+
+
+//actionType
+// export const searchFocus = () => ({
+//     type: constants.SEARCH_FOCUS
+// });
+
+// export const getList = () => {
+//     return (dispatch) => {
+//         axios.get('/api/submenuList.json').then((res) => {
+//             const data = res.data;
+//             dispatch(changeList(data.data));
+//         }).catch(() => {
+//             console.log('error');
+//         })
+//     }
+// };
+
+// export const changeInputValue = (value) => (  {
+//     type: constants.CHANGE_INPUTVALUE,
+//     data:fromJS(value),
+// });
+
+const changeList = (data) => ({
+    type: constants.CHANGE_COMPANY_DATA,
+    data: fromJS(data),
+});
+
+
+

src/contact/company/store/constants.js

@@ -0,0 +1 @@
+export const CHANGE_COMPANY_DATA = 'client/change_company_data';

src/contact/company/store/index.js

@@ -0,0 +1,5 @@
+import reducer from './reducer';
+import * as actionCreators from './actionCreators';
+import * as constants from './constants';
+
+export { reducer,actionCreators,constants }

src/contact/company/store/reducer.js

@@ -0,0 +1,83 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+
+const defaultState = fromJS({
+	companyList: [],
+	pagination: {
+		current: 1,
+		pageSize: 10,
+		showSizeChanger:false
+	},
+	loading:false,
+	companyData: {},
+	columnsData: [
+		{ columnsName: '客户名称', columnsValue: true, dataKey: "clientname" },
+		{ columnsName: '地区', columnsValue: true, dataKey: "companyname" },
+		{ columnsName: '标签', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '单位性质', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '公司地址', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '公司传真', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '网址', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '乘车路线', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '地标建筑', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '参考住宿', columnsValue: true, dataKey: "telephone" },
+		{ columnsName: '备注', columnsValue: true, dataKey: "telephone" },
+	],
+	companyPopupsDetail: [],
+});
+
+export default (state = defaultState, action) => {
+	let columnsData = state.get('columnsData').toJS();
+
+	switch (action.type) {
+		// case constants.TOGGLE_COLUMNS:
+		// 	columnsData[action.data].columnsValue=!columnsData[action.data].columnsValue;
+		// 	//存储
+		// 	localStorage.setItem('contact_client_Column_'+action.data, columnsData[action.data].columnsValue);
+		// 	return state.set('columnsData', fromJS(columnsData));
+		// case constants.TOGGLE_COLUMNS_ALL:
+		// 	for(var i=1;i<=columnsData.length;i++){
+		// 		var isAccept=localStorage.getItem("contact_client_Column_"+i);
+		// 		if(isAccept==='false'){
+		// 			columnsData[i].columnsValue=false;
+		// 			action.dt.handleColumnVisible(i,false);
+		// 		}
+		// 	}
+		// 	return state.set('columnsData', fromJS(columnsData));
+		case constants.CHANGE_COMPANY_DATA:
+			//console.log(action.data.data);
+			let pagination={
+				...action.pagination,
+				total:action.data.recordsTotal,
+			}
+
+			return state.merge({
+				pagination: fromJS(pagination),
+				companyList: fromJS(action.data.data)
+			});
+
+			//return state.set('companyList', fromJS(action.data.data));
+		default:
+			return state;
+	}
+	// switch(action.type) {
+	// 	case constants.SEARCH_FOCUS:
+	// 		return state.set('focused', true);
+	// 	case constants.SEARCH_BLUR:
+	// 		return state.set('focused', false);
+	// 	case constants.CHANGE_LIST:
+	// 		return state.merge({
+	// 			list: action.data,
+	// 			totalPage: action.totalPage
+	// 		});
+	// 	case constants.MOUSE_ENTER:
+	// 		return state.set('mouseIn', true);
+	// 	case constants.MOUSE_LEAVE:
+	// 		return state.set('mouseIn', false);
+	// 	case constants.CHANGE_PAGE:
+	// 		return state.set('page', action.page);
+	// 	default:
+	// 		return state;
+	// }
+
+}