软件锁列表显示

src/product/lock_store/index.js

@@ -10,7 +10,7 @@ let dt = null;
 
 class lock_store extends PureComponent {
     render() {
-        const {columns, columnsData,handleColumnBindEvent} = this.props;
+        const { handleInputChange, handleSearch, columns, columnsData, handleColumnsShow, handleColumnBindEvent,columnsNum} = this.props;
         return (
             <div>
         <StaffHeader />
@@ -21,69 +21,31 @@ class lock_store extends PureComponent {
                 <div className="panel-hdr">
                   <div className="col-auto pr-0">
                     <div className="input-group input-group-sm bg-white shadow-inset-2">
-                      <input type="text" className="form-control bg-transparent" placeholder="锁号"/>
-                      <div className="input-group-append">
-                        <button className="btn btn-default waves-effect waves-themed" type="button" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="搜索"><i className="fal fa-search"></i></button>
-                      </div>
+                      <input type="text" ref={(input) => { this.searchValue = input }} onKeyUp={() => handleSearch(this.searchValue)} className="form-control bg-transparent" placeholder="锁号" />
                     </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">已显示7列</button>
-                      {/* <div className="dropdown-menu">
+                      <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">
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie1" checked=""/>
-                              <label className="custom-control-label" >锁号</label>
-                            </div>
-                          </li>
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie2" checked=""/>
-                              <label className="custom-control-label">产品</label>
-                            </div>
-                          </li>
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie3" checked=""/>
-                              <label className="custom-control-label" >办事处</label>
-                            </div>
-                          </li>
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie4" checked=""/>
-                              <label className="custom-control-label" >出库时间</label>
-                            </div>
-                          </li>
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie5" checked=""/>
-                              <label className="custom-control-label">责任人</label>
-                            </div>
-                          </li>
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie6" checked=""/>
-                              <label className="custom-control-label" >状态</label>
-                            </div>
-                          </li>
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie7" checked=""/>
-                              <label className="custom-control-label">客户</label>
-                            </div>
-                          </li>
-                          <li className="mb-2">
-                            <div className="custom-control custom-switch">
-                              <input type="checkbox" className="custom-control-input" id="lie8"/>
-                              <label className="custom-control-label">客户</label>
-                            </div>
-                          </li>
+                        {
+                          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>
+                                  {/* onClick={() => handleColumnsShow(index)} */}
+                                </div>
+                              </li>
+                            )
+                          })
+                        }
                         </ul>
-                      </div> */}
+                      </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>
@@ -157,10 +119,6 @@ class lock_store extends PureComponent {
                 } 
                       </tbody>
                     </table> */}
-                    
-
-
-
                   </div>
                 </div>
               </div>
@@ -174,12 +132,14 @@ class lock_store extends PureComponent {
 
     //组件即将要被挂在的时候执行的方法--
     componentDidMount(){
-      //this.props.handleColumnsAllShow();
-      // const { lockStore,a } = this.props;
-      // a(lockStore);
+      const { handleColumnsAllShow,columnsNum,columnsData } = this.props;
+      handleColumnsAllShow();
+      
     }
 
 }
+
+let delaySwitch = null;
 /**
  * store里的数据映射到这个组件里的state
  * @param {*} state 
@@ -193,6 +153,7 @@ const mapStateToProps = (state) => {
       menu: state.getIn(['submenu', 'menu']),
       list: state.getIn(['submenu', 'list']),
       inputValue: state.getIn(['submenu', 'inputValue']),
+      columnsNum: state.getIn(['lockstore', 'columnsNum']),
     }
 }
 
@@ -205,27 +166,38 @@ const mapDispathToProps = (dispatch) => {
       handleClientData(list) {
         (list.size === 0) && dispatch(actionCreators.getClientLIst());
       },
-        // a(lockStore){
-        //   (lockStore.size === 0) && dispatch(actionCreators.getClientLIst());
-        // },
+
+      handleSearch(serchValue) {
+        //e.target --可以获得dom
+        if (delaySwitch != null) {
+          clearTimeout(delaySwitch);
+        }
+        delaySwitch = setTimeout(() => {
+          let filter = {
+            searchValue: serchValue.value
+          };
+          dt.handleSearch(filter);
+        }, 350);
+      },
+
         handleInputFocus(list) {
             //发送给store--提取出action--避免发送重复的ajax请求
             (list.size === 0) && dispatch(actionCreators.getList());
             dispatch(actionCreators.searchFocus());
         },
 
-        // handleInputChange(e, index){
-        //   // dispatch(actionCreators.changeInputValue(ivalueElem.value));
-        //   dt.handleColumnVisible(index, e.target.value);
-        // },
-        // handleColumnsShow(index) {
-        //   dispatch(actionCreators.toggleColumns(index));
-        // },
-        // handleColumnsAllShow() {
-        //   dispatch(actionCreators.toggleColumnsAll(dt));
-        // },
+        handleInputChange(e, index){
+          // dispatch(actionCreators.changeInputValue(ivalueElem.value));
+          dt.handleColumnVisible(index, e.target.value);
+        },
+        handleColumnsShow(index) {
+          dispatch(actionCreators.toggleColumns(index));
+        },
+        handleColumnsAllShow() {
+          dispatch(actionCreators.toggleColumnsAll(dt));
+        },
         handleColumnBindEvent(res) {
-          console.log(this);
+          // console.log(this);
           for (var i = 0 ; i < res.data.length; i++) {
             res.data[i].clientname = `<a onClick="abc()" href="#detail" data-toggle="modal" data-target="#detail">${res.data[i].clientname}</a>`;
           }

src/product/lock_store/store/actionCreators.js

@@ -6,7 +6,22 @@ import axios from '../../../common/axios_auth.js';
 
 
 
-//actionType
+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 getClientLIst = () => {
     return (dispatch) => {

src/product/lock_store/store/constants.js

@@ -2,6 +2,10 @@ export const SEARCH_FOCUS = 'submenu/SEARCH_FOCUS';
 export const CHANGE_LIST ='submenu/CHANGE_LIST';
 export const CHANGE_INPUTVALUE ='submenu/CHANGE_INPUTVALUE';
 export const CHANGE_LOCKSTORE_DATA = 'product/change_lockstore_data';
+export const TOGGLE_COLUMNS = 'client/toggle_columns';
+export const TOGGLE_COLUMNS_ALL = 'client/toggle_columns_all';
+
+export const CHANGE_CLIENT_DATA = 'client/change_client_data';
 
 
 

src/product/lock_store/store/reducer.js

@@ -5,6 +5,7 @@ import { fromJS } from 'immutable';
 
 const defaultState = fromJS({
 	lockStore:[],
+	columnsNum:0,
 	columns: [
 		{ data: "clientname" },
 		{ data: "companyname" },
@@ -32,8 +33,34 @@ const defaultState = fromJS({
 
 
 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('product_lock_store_Column_'+action.data, columnsData[action.data].columnsValue);
+			//console.log(columnsData);
+			return state.set('columnsData', fromJS(columnsData));
+		case constants.TOGGLE_COLUMNS_ALL:
+			let countFalse=0;
+			for(var i=1;i<=columnsData.length;i++){
+				var isAccept=localStorage.getItem("product_lock_store_Column_"+i);
+				if(isAccept==="false"){
+					columnsData[i].columnsValue=false;
+					action.dt.handleColumnVisible(i,false);
+					countFalse++;
+				}
+			}
+			let columnNumData=columnsData.length-countFalse;
+			console.log(columnNumData);
+			return state.merge({
+				columnsNum: columnNumData,
+				columnsData: fromJS(columnsData),
+			});
+			//return state.set('columnsNum', columnNumData);
+			//return state.set('columnsData', fromJS(columnsData));
 		case constants.CHANGE_LOCKSTORE_DATA:
 			return state.set('lockStore', action.data);
 		default: