1

src/common/popups/index.js

@@ -1,34 +1,42 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
+import { Spin } from 'antd';
+import { actionCreators } from './store';
 // import { BrowserRouter, Route,Link } from 'react-router-dom';
 
 // import { actionCreators } from './store';
 
 import Client from './client';
-
+import Company from './company';
 
 class popups extends PureComponent {
 
 
   render() {
+    const { companyDetail } = this.props;
+
     return (
 
       <div className="modal fade" id="detail" role="dialog" aria-hidden="true" data-backdrop="static">
+
+
         <div className="modal-dialog modal-xl">
           <div className="modal-content">
-            <div className="dialog-sheet">
-              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
-                <span aria-hidden="true"><i className="fal fa-times"></i></span>
-              </button>
-              <div className="sheet-box row m-0">
-                <div className="sheet-left-panel">
+            <Spin size="large" spinning={false} >
+              <div className="dialog-sheet">
+                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true"><i className="fal fa-times"></i></span>
+                </button>
+                <div className="sheet-box row m-0">
+                  <div className="sheet-left-panel">
 
 
 
 
 
 
-                  {this.props.mainView === 'client' && <Client />}
+                    {this.props.mainView === 'client' && <Client />}
+                    {this.props.mainView === 'company' && <Company />}
 
 
 
@@ -53,9 +61,8 @@ class popups extends PureComponent {
 
 
 
-
-                </div>
-                {/* <div class="sheet-right-panel col p-0">
+                  </div>
+                  {/* <div class="sheet-right-panel col p-0">
                   <div class="sheet-panel-tabs mx-4 mt-4">
                     <ul class="nav nav-tabs sheet-nav-tabs" role="tablist">
                       <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-yun" role="tab" aria-selected="true">养护云造价</a></li>
@@ -247,29 +254,44 @@ class popups extends PureComponent {
                     </div>
                   </div>
                 </div> */}
+                </div>
               </div>
-            </div>
+
+            </Spin>
           </div>
         </div>
+
       </div>
 
     );
   }
 
   componentDidMount() {
+    this.props.onRef(this);
     console.log('sdfsdf');
   }
 
+  handleCompanyPopups(key){
+    const { handleCompanyPopups } = this.props;
+    handleCompanyPopups(key);
+  }
+
 }
 
 const mapStateToProps = (state) => {
   return {
     popupsClientId: state.getIn(['popups', 'popupsClientId']),
+    companyDetail: state.getIn(['popups', 'companyDetail']),
   }
 }
 
 const mapDispathToProps = (dispatch) => {
-  return {}
+  return {
+    handleCompanyPopups(key) {
+      console.log('ajax data');
+      //dispatch(actionCreators.changeLoading());
+    },
+  }
 }
 
 export default connect(mapStateToProps, mapDispathToProps)(popups);

src/common/popups/store/reducer.js

@@ -3,30 +3,34 @@ import { fromJS } from 'immutable';
 
 
 const defaultState = fromJS({
-    popupsClientId: '',
+	popupsClientId: '',
+
+	companyDetail: { 
+		companyname: '2222',
+	 },
 });
 
 
 export default (state = defaultState, action) => {
 
-     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);
+	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;
 	}
-    
+
 }

src/contact/company/index.js

@@ -3,76 +3,78 @@ import { connect } from 'react-redux';
 import StaffHeader from '../../common/staffHeader';
 import { actionCreators } from './store';
 
-import { Table, Tag, Space } from 'antd';
+import { Table, Modal,Spin, Space, Tag } 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',
-  },
-
-];
+import Popups from '../../common/popups';
 
 
+// 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',
+//   },
+
+// ];
+
+let popupsObj=null;
 
 class company extends PureComponent {
 
   render() {
-    const { companyData, columnsData, companyList, pagination, handleCompanyData, loading, handleCompanyPopups } = this.props;
+    const { companyData, columnsData, companyList, pagination, handleCompanyData, loading, columns, handleCompanyPopups } = this.props;
 
     return (
       <Fragment>
@@ -199,7 +201,14 @@ value={searchValue} onChange={handleInputSearchValue}
                 <div className="panel-container show ">
                   <div className="panel-content " >
 
-                    <Table onChange={handleCompanyData} pagination={pagination.toJS()} loading={loading} bordered columns={columns} dataSource={companyList.toJS()} />
+                    <Table
+                      onChange={(pagination, filters, sorter) => handleCompanyData(pagination, filters, sorter, this.props)}
+                      pagination={pagination.toJS()}
+                      loading={loading}
+                      bordered
+                      columns={columns.toJS()}
+                      dataSource={companyList.toJS()}
+                    />
 
                     {/* <DataTable url={`/contact/client`} list={companyList} columnsData={columnsData} popups={handleCompanyPopups}  /> */}
 
@@ -285,14 +294,20 @@ value={searchValue} onChange={handleInputSearchValue}
           </div>
 
         </main>
+        
+        
+
+        <Popups mainView={'company'} onRef={(ref) => popupsObj = ref}  />
+        
 
       </Fragment>
     )
   }
 
   componentDidMount() {
-    const { handleCompanyData, companyList,pagination } = this.props;
-    handleCompanyData(pagination.toJS());
+    const { handleCompanyData, companyList, pagination, handleCompanyPopups } = this.props;
+
+    handleCompanyData(pagination.toJS(), {}, {}, this.props);
   }
 
 }
@@ -304,22 +319,28 @@ 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']),
+    columns: state.getIn(['company', 'columns']),
+
+    companyDetail: state.getIn(['popups', 'companyDetail']),
+
   }
 }
 
 const mapDispathToProps = (dispatch) => {
   return {
-    handleCompanyData(pagination,filters,sorter) {
+    handleCompanyData(pagination, filters, sorter, props) {
       dispatch(actionCreators.changeLoading());
-      dispatch(actionCreators.getCompanyLIst(pagination));
+      dispatch(actionCreators.getCompanyLIst(pagination, props));
       //(list.size === 0) && dispatch(actionCreators.getCompanyLIst());
     },
-    handleCompanyPopups(e) {
-      console.log('sdd');
-      console.log(e);
+    handleCompanyPopups(key) {
+      popupsObj.handleCompanyPopups(key);
+      // console.log(popupsObj);
+      // console.log(key);
     },
   }
 }

src/contact/company/store/actionCreators.js

@@ -31,7 +31,7 @@ export const changeLoading = () => {
     }
 }
 
-export const getCompanyLIst = (pagination) => {
+export const getCompanyLIst = (pagination,props) => {
     return (dispatch) => {
         axios.get(config.CLD2API + '/contact/company', {
             params: {
@@ -48,7 +48,8 @@ export const getCompanyLIst = (pagination) => {
                 dispatch({
                     type: constants.CHANGE_COMPANY_DATA,
                     data: data,
-                    pagination:pagination
+                    pagination:pagination,
+                    props:props
                 });
             } else {
                 console.log(data);

src/contact/company/store/reducer.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import * as constants from './constants';
 import { fromJS } from 'immutable';
 
@@ -9,25 +10,89 @@ const defaultState = fromJS({
 		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" },
+	columns:[
+		{
+			title: '客户名称',
+			dataIndex: 'clientname',
+			key: 'clientname',
+			visible:true
+		  },
+		  {
+			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',
+		  },
 	],
-	companyPopupsDetail: [],
+	companyPopupsDetail: {
+		companyDetail:{},
+		
+	},
+
+
+
+	// 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" },
+	// ],
 });
 
 export default (state = defaultState, action) => {
-	let columnsData = state.get('columnsData').toJS();
+	let columns = state.get('columns').toJS();
 
 	switch (action.type) {
 		// case constants.TOGGLE_COLUMNS:
@@ -47,6 +112,11 @@ export default (state = defaultState, action) => {
 		case constants.CHANGE_COMPANY_LOADING:
 			return state.set('loading', action.data);
 		case constants.CHANGE_COMPANY_DATA:
+			let columnsDetail={
+				...columns[0],
+				render: (text, record) => <a href="#detail" data-toggle="modal" data-target="#detail" onClick={()=>action.props.handleCompanyPopups(record.key)} >{text}</a>,
+			}
+			columns[0]=columnsDetail;
 			let pagination={
 				...action.pagination,
 				total:action.data.recordsTotal,
@@ -54,9 +124,9 @@ export default (state = defaultState, action) => {
 			return state.merge({
 				pagination: fromJS(pagination),
 				companyList: fromJS(action.data.data),
-				loading: false
+				loading: false,
+				columns:fromJS(columns)
 			});
-
 		default:
 			return state;
 	}