显示隐藏列

src/common/popups/index.js

@@ -268,7 +268,6 @@ class popups extends PureComponent {
 
   componentDidMount() {
     this.props.onRef(this);
-    console.log('sdfsdf');
   }
 
   handleCompanyPopups(key){

src/common/popups/store/reducer.js

@@ -6,7 +6,16 @@ const defaultState = fromJS({
 	popupsClientId: '',
 
 	companyDetail: { 
-		companyname: '2222',
+		companyname: '',
+		local:'',
+		nature:'',
+		address:'',
+		fax:'',
+		webservice:'',
+		ride:'',
+		stay:'',
+		landmarks:'',
+		remark:'',
 	 },
 });
 

src/contact/company/index.js

@@ -3,78 +3,15 @@ import { connect } from 'react-redux';
 import StaffHeader from '../../common/staffHeader';
 import { actionCreators } from './store';
 
-import { Table, Modal,Spin, Space, Tag } from 'antd';
+import { Table, Modal, Spin, Space, Tag } from 'antd';
 import 'antd/dist/antd.css';
 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;
-
+let popupsObj = null;
 class company extends PureComponent {
 
   render() {
-    const { companyData, columnsData, companyList, pagination, handleCompanyData, loading, columns, handleCompanyPopups } = this.props;
+    const { handleInputChange, columnsVisible, companyList, pagination, handleCompanyData, loading, columns, handleColumnsShow } = this.props;
 
     return (
       <Fragment>
@@ -134,21 +71,21 @@ value={searchValue} onChange={handleInputSearchValue}
                     <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> */}
+                      <ul className="list-unstyled px-3 pt-2 mb-0">
+                        {
+                          columnsVisible.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>
@@ -294,19 +231,19 @@ value={searchValue} onChange={handleInputSearchValue}
           </div>
 
         </main>
-        
-        
 
-        <Popups mainView={'company'} onRef={(ref) => popupsObj = ref}  />
-        
+
+
+        <Popups mainView={'company'} onRef={(ref) => popupsObj = ref} />
+
 
       </Fragment>
     )
   }
 
   componentDidMount() {
-    const { handleCompanyData, companyList, pagination, handleCompanyPopups } = this.props;
-
+    const { handleCompanyData, handleColumnsAllShow, pagination, handleCompanyPopups } = this.props;
+    handleColumnsAllShow();
     handleCompanyData(pagination.toJS(), {}, {}, this.props);
   }
 
@@ -318,13 +255,14 @@ value={searchValue} onChange={handleInputSearchValue}
 const mapStateToProps = (state) => {
   return {
     companyData: state.getIn(['company', 'companyData']),
-    columnsData: state.getIn(['company', 'columnsData']),
 
+    columnsVisible: state.getIn(['company', 'columnsVisible']),
     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']),
 
   }
@@ -332,11 +270,24 @@ const mapStateToProps = (state) => {
 
 const mapDispathToProps = (dispatch) => {
   return {
+    //列隐藏显示
+    handleInputChange(e, index) {//---此方法可能废弃
+
+      //dt.handleColumnVisible(index, e.target.value);
+    },
+    handleColumnsShow(index) {
+      dispatch(actionCreators.toggleColumns(index));
+    },
+    handleColumnsAllShow() {
+      dispatch(actionCreators.toggleColumnsAll());
+    },
+    //获得客户数据
     handleCompanyData(pagination, filters, sorter, props) {
       dispatch(actionCreators.changeLoading());
       dispatch(actionCreators.getCompanyLIst(pagination, props));
       //(list.size === 0) && dispatch(actionCreators.getCompanyLIst());
     },
+    //弹出详情页点击触发
     handleCompanyPopups(key) {
       popupsObj.handleCompanyPopups(key);
       // console.log(popupsObj);

src/contact/company/store/actionCreators.js

@@ -5,23 +5,23 @@ 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 toggleColumns = (index) => {
+    return (dispatch) => {
+        dispatch({
+            type: constants.TOGGLE_COLUMNS,
+            data: index,
+        });
+    }
+};
+export const toggleColumnsAll = (dt) => {
+    return (dispatch) => {
+        dispatch({
+            type: constants.TOGGLE_COLUMNS_ALL,
+        });
+    }
+};
 
+//获得数据
 export const changeLoading = () => {
     return (dispatch) => {
         dispatch({
@@ -30,7 +30,6 @@ export const changeLoading = () => {
         });
     }
 }
-
 export const getCompanyLIst = (pagination,props) => {
     return (dispatch) => {
         axios.get(config.CLD2API + '/contact/company', {

src/contact/company/store/constants.js

@@ -1,2 +1,5 @@
-export const CHANGE_COMPANY_DATA = 'client/change_company_data';
-export const CHANGE_COMPANY_LOADING= 'client/change_company_loading';
+export const CHANGE_COMPANY_DATA = 'company/change_company_data';
+export const CHANGE_COMPANY_LOADING= 'company/change_company_loading';
+
+export const TOGGLE_COLUMNS = 'company/toggle_columns';
+export const TOGGLE_COLUMNS_ALL = 'company/toggle_columns_all';

src/contact/company/store/reducer.js

@@ -7,125 +7,151 @@ const defaultState = fromJS({
 	pagination: {
 		current: 1,
 		pageSize: 10,
-		showSizeChanger:false
+		showSizeChanger: false
 	},
-	loading:false,
-	columns:[
+	loading: false,
+	columns: [
 		{
 			title: '客户名称',
 			dataIndex: 'clientname',
 			key: 'clientname',
-			visible:true
-		  },
-		  {
+			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: {
-		companyDetail:{},
-		
-	},
-
+		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" },
-	// ],
+	columnsVisible: [
+		// { 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" },
+	],
 });
 
+function refreshColumns(columnsVisible,columns){
+	let columnsBak=[];
+	columnsBak.push(columns[1]);
+	for (var i = 0; i < columnsVisible.length; i++) {
+		if(columnsVisible[i].columnsValue){
+			columnsBak.push({
+				title: columnsVisible[i].columnsName,
+				dataIndex: columnsVisible[i].dataKey,
+				key: columnsVisible[i].dataKey,
+			});
+		}
+	}
+	return columnsBak;
+};
+
 export default (state = defaultState, action) => {
 	let columns = state.get('columns').toJS();
+	let columnsVisible = state.get('columnsVisible').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.TOGGLE_COLUMNS:
+			columnsVisible[action.data].columnsValue = !columnsVisible[action.data].columnsValue;
+			//存储
+			localStorage.setItem('contact_company_Column_' + action.data, columnsVisible[action.data].columnsValue);
+			var columnsBak=refreshColumns(columnsVisible,columns);
+			
+			return state.merge({
+				columnsVisible: fromJS(columnsVisible),
+				columns: fromJS(columnsBak)
+			});
+		case constants.TOGGLE_COLUMNS_ALL:
+			for (var i = 0,ci=1; i <= columnsVisible.length; i++,ci++) {
+				var isAccept = localStorage.getItem("contact_company_Column_" + i);
+				if (isAccept === 'false') {
+					columnsVisible[i].columnsValue = false;
+					//columns.splice(ci,1);
+				}
+			}
+			var columnsBak=refreshColumns(columnsVisible,columns);
+
+			return state.merge({
+				columnsVisible: fromJS(columnsVisible),
+				columns: fromJS(columnsBak)
+			});
+			//return state.set('columnsVisible', fromJS(columnsVisible));
+		//读取锁定-获得客户data
 		case constants.CHANGE_COMPANY_LOADING:
 			return state.set('loading', action.data);
 		case constants.CHANGE_COMPANY_DATA:
-			let columnsDetail={
+			let columnsDetail = {
 				...columns[0],
-				render: (text, record) => <a href="#detail" data-toggle="modal" data-target="#detail" onClick={()=>action.props.handleCompanyPopups(record.key)} >{text}</a>,
+				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={
+			columns[0] = columnsDetail;
+			let pagination = {
 				...action.pagination,
-				total:action.data.recordsTotal,
+				total: action.data.recordsTotal,
 			}
 			return state.merge({
 				pagination: fromJS(pagination),
 				companyList: fromJS(action.data.data),
 				loading: false,
-				columns:fromJS(columns)
+				columns: fromJS(columns)
 			});
 		default:
 			return state;