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 Popups from '../../common/popupstockDetail';
//import { AudioOutlined } from '@ant-design/icons';

const radioStyle = {
  display: 'block',
  height: '30px',
  lineHeight: '30px',
};
const { Search } = Input;
let popupsObj = null;

class lock_store extends PureComponent {
    render() {
      const {dataSource,columns,pagination,handleLockstoreList,loading,handleSearch,columnsData,columnsNum,handleInputChange,handleColumnsShow,sortField,sort,handleLockstoreSortField,handleLockstoreSort} = 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 }}
                        loading={loading}
                      />
                    </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,this.props)} 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={(e) => handleLockstoreSortField(pagination.toJS(), this.props, e)}value={sortField}>
                            <Radio style={radioStyle} value='KEYNUM'>
                              锁号
                            </Radio>
                            <Radio style={radioStyle} value='UPDATETIME'>
                              出库时间
                            </Radio>
                          </Radio.Group>
                        </li>
                      </ul>
                      <ul className="list-unstyled px-3 pt-2 mb-0 border-top">
                        <li className="mb-2">
                          <Radio.Group onChange={(e) => handleLockstoreSort(pagination.toJS(), this.props,e)} value={sort}>
                            <Radio style={radioStyle} value='DESC'>
                              降序
                            </Radio>
                            <Radio style={radioStyle} value='ASC'>
                              升序
                            </Radio>
                          </Radio.Group>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="panel-container show">
                  <div className="panel-content">
                   <Table
                    onChange={(pagination,sorter) => handleLockstoreList(pagination,this.props)}
                    pagination={pagination.toJS()}
                    loading={loading}
                    bordered
                    dataSource={dataSource.toJS()}
                    columns={columns.toJS()}
                  />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
        <Popups  onRef={(ref) => popupsObj = ref} />
            </div>
        );
    }

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

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

/**
 * 要改变store里的内容需要调用dispatch方法
 * @param {*} dispatch 
 */
const mapDispathToProps = (dispatch) => {
    return {
      //列隐藏显示
      handleColumnsShow(index,support) {
        dispatch(actionCreators.toggleColumns(index,support));
      },
      initData(){
        dispatch(actionCreators.toggleColumnsAll());
        dispatch(actionCreators.toggleSorter());
      },
      //获得表格数据
      handleLockstoreList(pagination,support){
        //console.log(support)
        dispatch(actionCreators.changeLoading());
        dispatch(actionCreators.getLockstoreList(pagination,support));
        
      },
      //排序设置
    handleLockstoreSortField(pagination, support, e) {
      dispatch(actionCreators.changeLoading());
      dispatch(actionCreators.changeSortField(e.target.value));
      dispatch(actionCreators.getLockstoreList(pagination, support));
    },
    handleLockstoreSort(pagination, support, e) {
      dispatch(actionCreators.changeLoading());
      dispatch(actionCreators.changeSort(e.target.value));
      dispatch(actionCreators.getLockstoreList(pagination, support));
    },
    //搜索
      handleSearch(pagination,support,searchValue,keyup){
        dispatch(actionCreators.changeLoading());
        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);
      },
      handlelockDetailPopups(key) {
        popupsObj.handlelockDetailPopups(key);
        // console.log(255);
      },
    }
}
//mapStateToProps接收，mapDispathToProps发送
export default connect(mapStateToProps, mapDispathToProps)(lock_store);