cld2_react/src/product/lock_store/index.js

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,Radio } from 'antd';
import 'antd/dist/antd.css';
import { actionCreators } from './store';
//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,columnsData,columnsNum,handleInputChange,handleColumnsShow} = this.props;
     
        return (
        <div>
        <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">
                    <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 }}
                      />
                    </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">已显示{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">
                      <ul className="list-unstyled px-3 pt-2 mb-0">
                        <li className="mb-2">
                          {/* <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">
                          <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 className="panel-container show">
                  <div className="panel-content">
                   <Table
                   onChange={(pagination) => handleLockstoreList(pagination,this.props)}
                    pagination={pagination.toJS()}
                    bordered
                    dataSource={dataSource.toJS()}
                    columns={columns.toJS()}
                  />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
        {/* <Popups mainView={'lock_store'} onRef={(ref) => popupsObj = ref} /> */}
        {/* <LockDetail /> */}
            </div>
        );
    }

    //组件即将要被挂在的时候执行的方法--
    componentDidMount(){
      const{handleLockstoreList,pagination,initData}= this.props;
      // console.log(pagination.toJS());
      handleLockstoreList(pagination.toJS(),this.props);
      initData();
    }
}

let delaySwitch = null;
/**
 * store里的数据映射到这个组件里的state
 * @param {*} state 
 */
const mapStateToProps = (state) => {
    return {
      dataSource: state.getIn(['lockstore', 'dataSource']),
      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']),
    }
}

/**
 * 要改变store里的内容需要调用dispatch方法
 * @param {*} dispatch 
 */
const mapDispathToProps = (dispatch) => {
    return {
      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){
        if(keyup === 'keyup'){
          if(delaySwitch != null){
            clearTimeout(delaySwitch);
          }
          delaySwitch = setTimeout(() => {
            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));
      // },
    }
}

export default connect(mapStateToProps, mapDispathToProps)(lock_store);