软件锁显示列

src/contact/company/index.js

@@ -3,12 +3,8 @@ import { connect } from 'react-redux';
 import StaffHeader from '../../common/staffHeader';
 import { actionCreators } from './store';
 
-import { Table, Radio, Input, Space, Tag } from 'antd';
-import { AudioOutlined } from '@ant-design/icons';
+import { Table, Radio, Spin, Space, Tag } from 'antd';
 import 'antd/dist/antd.css';
-
-
-
 import Popups from '../../common/popups';
 
 const radioStyle = {
@@ -16,14 +12,13 @@ const radioStyle = {
   height: '30px',
   lineHeight: '30px',
 };
-const { Search } = Input;
-let popupsObj = null;
 
+let popupsObj = null;
 class company extends PureComponent {
 
   render() {
-    const { columnsVisible, companyList, pagination, handleCompanyData, loading, columns, sortField, sort, searchValue,
-      handleColumnsShow, handleInputChange, handleCompanySortField, handleCompanySort, handleSearch } = this.props;
+    const { columnsVisible, companyList, pagination, handleCompanyData, loading, columns, sortField, sort,
+      handleColumnsShow, handleInputChange, handleCompanySortField } = this.props;
 
     return (
       <Fragment>
@@ -62,16 +57,15 @@ class company extends PureComponent {
                     </div>
                   </div>
 
+
+
+                  {/*   
+value={searchValue} onChange={handleInputSearchValue}
+                  */}
+
                   <div className="col-auto pr-0">
                     <div className="input-group input-group-sm bg-white shadow-inset-2">
-                      <Search
-                        placeholder="客户名称"
-                        onSearch={value => handleSearch(pagination.toJS(), this.props, value)}
-                        onKeyUp={(e) => handleSearch(pagination.toJS(), this.props, e.target.value, 'keyup')}
-                        style={{ width: 200 }}
-                        loading={loading}
-                      />
-
+                      {/* <input type="text" ref={(input) => { this.searchValue = input }} onKeyUp={() => handleSearch(this.searchValue)} className="form-control bg-transparent" placeholder="姓名/客户/手机/QQ" /> */}
                     </div>
                   </div>
 
@@ -108,8 +102,8 @@ class company extends PureComponent {
                     <div className="dropdown-menu dropdown-menu-right" id="paixu">
                       <ul className="list-unstyled px-3 pt-2 mb-0">
                         <li className="mb-2">
-
-                          <Radio.Group onChange={(e) => handleCompanySortField(pagination.toJS(), this.props, e)} value={sortField}>
+                        
+                          <Radio.Group onChange={(e) => handleCompanySortField(pagination.toJS(),this.props,e)} value={sortField}>
                             <Radio style={radioStyle} value='CREATETIME'>
                               添加时间
                           </Radio>
@@ -121,7 +115,7 @@ class company extends PureComponent {
                       </ul>
                       <ul className="list-unstyled px-3 pt-2 mb-0 border-top">
                         <li className="mb-2">
-                          <Radio.Group onChange={(e) => handleCompanySort(pagination.toJS(), this.props, e)} value={sort}>
+                          <Radio.Group onChange={this.onChange} value={sort}>
                             <Radio style={radioStyle} value='DESC'>
                               递减
                           </Radio>
@@ -169,15 +163,15 @@ class company extends PureComponent {
   }
 
   componentDidMount() {
-    const { handleCompanyData, initData, pagination } = this.props;
+    const { handleCompanyData, handleColumnsAllShow, pagination } = this.props;
     handleCompanyData(pagination.toJS(), {}, {}, this.props);
-    initData();
+    //handleColumnsAllShow();
   }
 
 }
 
 
-let delaySwitch = null;//延迟检索开关
+
 
 const mapStateToProps = (state) => {
   return {
@@ -188,9 +182,9 @@ const mapStateToProps = (state) => {
     columns: state.getIn(['company', 'columns']),
     sortField: state.getIn(['company', 'sortField']),
     sort: state.getIn(['company', 'sort']),
-    searchValue: state.getIn(['company', 'searchValue']),
 
     companyDetail: state.getIn(['popups', 'companyDetail']),
+
   }
 }
 
@@ -200,39 +194,16 @@ const mapDispathToProps = (dispatch) => {
     handleColumnsShow(index) {
       dispatch(actionCreators.toggleColumns(index));
     },
-    initData() {
-      dispatch(actionCreators.toggleColumnsAll());
-      dispatch(actionCreators.toggleSorter());
-    },
     //获得客户数据
     handleCompanyData(pagination, filters, sorter, props) {
       dispatch(actionCreators.changeLoading());
       dispatch(actionCreators.getCompanyLIst(pagination, props));
     },
     //排序设置
-    handleCompanySortField(pagination, props, e) {
-      dispatch(actionCreators.changeLoading());
+    handleCompanySortField(pagination, props,e) {
       dispatch(actionCreators.changeSortField(e.target.value));
-      dispatch(actionCreators.getCompanyLIst(pagination, props));//,{sortField:e.target.value,sort:props.sort}
-    },
-    handleCompanySort(pagination, props, e) {
-      dispatch(actionCreators.changeLoading());
-      dispatch(actionCreators.changeSort(e.target.value));
-      dispatch(actionCreators.getCompanyLIst(pagination, props));//,{sortField:props.sortField,sort:e.target.value}
-    },
-    //检索客户名称
-    handleSearch(pagination, props, searchValue, keyup) {
-      dispatch(actionCreators.changeLoading());
-      if (keyup === 'keyup') {
-        if (delaySwitch != null) {
-          clearTimeout(delaySwitch);
-        }
-        delaySwitch = setTimeout(() => {
-          dispatch(actionCreators.getCompanyLIst(pagination, props, searchValue));
-        }, 350);
-      } else {
-        dispatch(actionCreators.getCompanyLIst(pagination, props, searchValue));
-      }
+      props.sortField;
+      //dispatch(actionCreators.getCompanyLIst(pagination, props));
     },
     //弹出详情页点击触发
     handleCompanyPopups(key) {

src/product/lock_store/index.js

@@ -2,17 +2,21 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 //import { BrowserRouter, Route,Link } from 'react-router-dom';
 import StaffHeader from '../../common/staffHeader'
-import { Table, Input } from 'antd';
+import { Table, Input,Radio } from 'antd';
 import 'antd/dist/antd.css';
 import { actionCreators } from './store';
-import { AudioOutlined } from '@ant-design/icons';
-
+//import { AudioOutlined } from '@ant-design/icons';
 
+const radioStyle = {
+  display: 'block',
+  height: '30px',
+  lineHeight: '30px',
+};
 const { Search } = Input;
 
 class lock_store extends PureComponent {
     render() {
-      const {dataSource,columns,pagination,handleLockstoreList,handleSearch} = this.props;
+      const {dataSource,columns,pagination,handleLockstoreList,handleSearch,columnsData,columnsNum,handleInputChange,handleColumnsShow} = this.props;
      
         return (
         <div>
@@ -30,68 +34,62 @@ class lock_store extends PureComponent {
                         onKeyUp={(e) => handleSearch(pagination.toJS(),this.props,e.target.value,'keyup')}
                         style={{ width: 200 }}
                       />
-                      {/* <input type="text" ref={(input) => { this.searchValue = input }} onKeyUp={() => handleSearch(this.searchValue)} className="form-control bg-transparent" placeholder="锁号" /> */}
                     </div>
                   </div>
                   <div className="col-auto pr-0">
                     <button className="btn btn-sm btn-default" type="button" data-toggle="modal" data-target="#filter"><i className="fal fa-filter"></i> 筛选</button>
                   </div>
                   <div className="col-auto ml-auto">
-                      <button className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">已显示列</button>
+                      <button className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">已显示{columnsNum}列</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">
+                    <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" >锁号</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" >出库时间</label>
-                          </div>
+                          {/* <Radio.Group onChange={this.onChange} value={value}> */}
+                          <Radio.Group onChange={this.onChange}>
+                            <Radio style={radioStyle} value={1}>
+                              锁号
+                            </Radio>
+                            <Radio style={radioStyle} value={2}>
+                              出库时间
+                            </Radio>
+                          </Radio.Group>
                         </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">降序</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" >升序</label>
-                          </div>
+                          <Radio.Group onChange={this.onChange}>
+                            <Radio style={radioStyle} value={3}>
+                              降序
+                            </Radio>
+                            <Radio style={radioStyle} value={4}>
+                              升序
+                            </Radio>
+                          </Radio.Group>
                         </li>
                       </ul>
-                    </div> */}
+                    </div>
                   </div>
                 </div>
                 <div className="panel-container show">
-                  {/* <!--数据内容区--> */}
                   <div className="panel-content">
                    <Table
                    onChange={(pagination) => handleLockstoreList(pagination,this.props)}
@@ -99,9 +97,7 @@ class lock_store extends PureComponent {
                     bordered
                     dataSource={dataSource.toJS()}
                     columns={columns.toJS()}
-                  /> 
-                  {/* 接口路径 */}
-                  {/* <DataTable onRef={(ref) => dt = ref} url={`/contact/client`} columnBindEvent={handleColumnBindEvent} columnsData={columnsData} columns={columns.toJS()}/> */}
+                  />
                   </div>
                 </div>
               </div>
@@ -116,9 +112,10 @@ class lock_store extends PureComponent {
 
     //组件即将要被挂在的时候执行的方法--
     componentDidMount(){
-      const{handleLockstoreList,pagination}= this.props;
+      const{handleLockstoreList,pagination,initData}= this.props;
       // console.log(pagination.toJS());
       handleLockstoreList(pagination.toJS(),this.props);
+      initData();
     }
 }
 
@@ -133,6 +130,8 @@ const mapStateToProps = (state) => {
       columns: state.getIn(['lockstore', 'columns']),
       pagination: state.getIn(['lockstore', 'pagination']),
       searchValue: state.getIn(['lockstore', 'searchValue']),
+      columnsData: state.getIn(['lockstore', 'columnsData']),
+      columnsNum:state.getIn(['lockstore', 'columnsNum']),
     }
 }
 
@@ -142,7 +141,14 @@ const mapStateToProps = (state) => {
  */
 const mapDispathToProps = (dispatch) => {
     return {
-      handleLockstoreList(pagination,support,){
+      handleColumnsShow(index) {
+        // console.log('kkk');
+        dispatch(actionCreators.toggleColumns(index));
+      },
+      initData(){
+        dispatch(actionCreators.toggleColumnsAll());
+      },
+      handleLockstoreList(pagination,support){
         dispatch(actionCreators.getLockstoreList(pagination,support));
       },
       handleSearch(pagination,support,searchValue,keyup){
@@ -151,13 +157,20 @@ const mapDispathToProps = (dispatch) => {
             clearTimeout(delaySwitch);
           }
           delaySwitch = setTimeout(() => {
-            dispatch(actionCreators.getCompanyLIst(pagination, support, searchValue));
+            dispatch(actionCreators.getLockstoreList(pagination, support, searchValue));
           },350);
         }
         else{
           dispatch(actionCreators.getLockstoreList(pagination,support,searchValue));
         }
       },
+      handleInputChange(e, index){
+        // dispatch(actionCreators.changeInputValue(columnsNum));
+        // dt.handleColumnVisible(index, e.target.value);
+      },
+      // handleColumnsAllShow() {
+      //   dispatch(actionCreators.toggleColumnsAll(dt));
+      // },
     }
 }
 

src/product/lock_store/store/actionCreators.js

@@ -3,13 +3,29 @@ import { fromJS } from 'immutable';
 import * as config from '../../../common/config.js';
 import axios from '../../../common/axios_auth.js';
 
-export const getLockstoreList = (pagination,props,searchValue) =>{
+export const toggleColumns = (index) => {
+    return (dispatch) => {
+        dispatch({
+            type: constants.TOGGLE_COLUMNS,
+            data: index,
+        });
+    }
+};
+export const toggleColumnsAll = () => {
+    return (dispatch) => {
+        dispatch({
+            type: constants.TOGGLE_COLUMNS_ALL,
+        });
+    }
+};
+
+export const getLockstoreList = (pagination,support,searchValue) =>{
     return(dispatch) =>{
         // console.log('searchValue:'+searchValue);
         // console.log('support:'+searchValue);
         // console.log('typeof:'+typeof searchValue);
         if(typeof searchValue === 'undefined'){
-            searchValue = props.searchValue;
+            searchValue = support.searchValue;
         }
         // console.log(config.CLD2API + '/contact/company')
         axios.get(config.CLD2API + '/contact/company', {
@@ -37,7 +53,7 @@ export const getLockstoreList = (pagination,props,searchValue) =>{
             console.log('error');
         })
     }
-}
+};
 
 
     // current: pagination.current,    //当前页

src/product/lock_store/store/constants.js

@@ -1 +1,3 @@
-export const CHANGE_LOCKSTORE_DATA = 'product/change_lockstore_data';
+export const CHANGE_LOCKSTORE_DATA = 'product/change_lockstore_data';
+export const TOGGLE_COLUMNS = 'product/toggle_columns';
+export const TOGGLE_COLUMNS_ALL = 'product/toggle_columns_all';

src/product/lock_store/store/reducer.js

@@ -4,73 +4,148 @@ import * as constants from './constants';
 import { fromJS } from 'immutable';
 
 const defaultState = fromJS({
-	pagination:{
+	pagination: {
 		current: 1,
 		pageSize: 10,
-		position:['bottomCenter'],
+		position: ['bottomCenter'],
 		showSizeChanger: false
 	},
-	searchValue:'',
-	dataSource:[],
-	  columns:[
+	columnsNum: 0,
+	searchValue: '',
+	dataSource: [],
+	columns: [
 		{
 			title: '锁号',
 			dataIndex: 'companyname',
 			key: 'companyname',
-		  },
-		  {
+		},
+		{
 			title: '产品',
 			dataIndex: 'nature',
 			key: 'nature',
-		  },
-		  {
+		},
+		{
 			title: '办事处',
 			dataIndex: 'local',
 			key: 'local',
-		  },
-		  {
+		},
+		{
 			title: '出库时间',
 			dataIndex: 'address',
 			key: 'address',
-		  },
-		  {
+		},
+		{
 			title: '销售/借出/赠送时间',
 			dataIndex: 'ride',
 			key: 'ride',
-		  },
-		  {
+		},
+		{
 			title: '责任人',
 			dataIndex: 'stay',
 			key: 'stay',
-		  },
-		  {
+		},
+		{
 			title: '状态',
 			dataIndex: 'remarks',
 			key: 'remarks',
-		  },
-		  {
+		},
+		{
 			title: '联系人',
 			dataIndex: 'webservice',
 			key: 'webservice',
-		  },
-	  ],
+		},
+	],
+	columnsData: [
+		{ columnsName: '锁号', columnsValue: true, dataKey: "companyname" },
+		{ columnsName: '产品', columnsValue: true, dataKey: "nature" },
+		{ columnsName: '办事处', columnsValue: true, dataKey: "local" },
+		{ columnsName: '出库时间', columnsValue: true, dataKey: "address" },
+		{ columnsName: '销售/借出/赠送时间', columnsValue: true, dataKey: "ride" },
+		{ columnsName: '责任人', columnsValue: true, dataKey: "stay" },
+		{ columnsName: '状态', columnsValue: true, dataKey: "remarks" },
+		{ columnsName: '联系人', columnsValue: true, dataKey: "webservice" },
+
+	],
 });
 
 export default (state = defaultState, action) => {
-    switch(action.type) {
+	let columns = state.get('columns').toJS();
+	let columnsData = state.get('columnsData').toJS();
+	let countFalse = 0;
+	let columnNumData = 0;
+
+	switch (action.type) {
+		//排序
+		case constants.TOGGLE_COLUMNS:
+			columnsData[action.data].columnsValue = !columnsData[action.data].columnsValue;
+			localStorage.setItem('product_lock_store_Column_' + action.data, columnsData[action.data].columnsValue);
+			var columnsBak = refreshColumns(columnsData, columns);
+			countFalse = 0;
+			for (var i = 0; i < columnsData.length; i++) {
+				var isAccept = localStorage.getItem("product_lock_store_Column_" + i);
+				if (isAccept === "true") {
+					countFalse++;
+				}
+			}
+			// console.log(countFalse);
+			columnNumData = countFalse;
+			return state.merge({
+				columnsData: fromJS(columnsData),
+				columns: fromJS(columnsBak),
+				columnsNum: columnNumData,
+			});
+		case constants.TOGGLE_COLUMNS_ALL:
+			countFalse = 0;
+			//console.log(columns.length)
+			for (var i = 0; i <= columnsData.length; i++) {
+				var isAccept = localStorage.getItem("product_lock_store_Column_" + i);
+				if (isAccept === "false") {
+					columnsData[i].columnsValue = false;
+					countFalse++;
+				}
+			}
+			columnNumData = columnsData.length - countFalse;
+			var columnsBak = refreshColumns(columnsData, columns);
+			return state.merge({
+				columnsNum: columnNumData,
+				columnsData: fromJS(columnsData),
+			});
+		//表格
 		case constants.CHANGE_LOCKSTORE_DATA:
-			let pagination ={
+			let pagination = {
 				...action.pagination,
-				total:action.recordsTotal,
+				total: action.recordsTotal,
+			}
+			for (var i = 0; i <= columnsData.length; i++) {
+				var isAccept = localStorage.getItem("product_lock_store_Column_" + i);
+				if (isAccept === 'false') {
+					columnsData[i].columnsValue = false;
+				}
 			}
+			var columnsBak = refreshColumns(columnsData, columns);
 			// console.log(pagination);
 			// return state.set('dataSource', action.data);
 			return state.merge({
-				pagination:fromJS(pagination),
-				dataSource:fromJS(action.data),
-				searchValue:action.searchValue,
+				pagination: fromJS(pagination),
+				dataSource: fromJS(action.data),
+				searchValue: action.searchValue,
+				columns: fromJS(columnsBak),
 			});
 		default:
 			return state;
 	}
 }
+function refreshColumns(columnsData) {
+	let columnsBak = [];
+	//columnsBak.push(columns[0]);
+	for (var i = 0; i < columnsData.length; i++) {
+		if (columnsData[i].columnsValue) {
+			columnsBak.push({
+				title: columnsData[i].columnsName,
+				dataIndex: columnsData[i].dataKey,
+				key: columnsData[i].dataKey,
+			});
+		}
+	}
+	return columnsBak;
+};