表格组件化

src/product/lock_store/index.js

@@ -2,13 +2,13 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { BrowserRouter, Route,Link } from 'react-router-dom';
 import StaffHeader from '../../common/staffHeader'
-import LockDetail from '../../common/lockDetail'
+import DataTable from '../../common/dataTable';
 
 import { actionCreators } from './store';
 
 class lock_store extends PureComponent {
     render() {
-        const { lockStore } = this.props;
+        const {columns, columnsData} = this.props;
         return (
             <div>
         <StaffHeader />
@@ -120,7 +120,9 @@ class lock_store extends PureComponent {
                 <div className="panel-container show">
                   {/* <!--数据内容区--> */}
                   <div className="panel-content">
-                    <table className="table table-bordered table-hover table-striped">
+                  {/* 接口路径 */}
+                  <DataTable onRef={(ref) => dt = ref} url={`/contact/client`} columnsData={columnsData}/>
+                    {/* <table className="table table-bordered table-hover table-striped">
                       <thead>
                         <tr>
                           <th>锁号</th>
@@ -152,30 +154,11 @@ class lock_store extends PureComponent {
                       })
                 } 
                       </tbody>
-                    </table>
-                    {/* <!--翻页--> */}
-                    <div className="d-flex justify-content-center">
-                      <ul className="pagination pagination-sm">
-                        <li className="page-item disabled">
-                          <a className="page-link" href="#" aria-label="Previous">
-                											<span aria-hidden="true"><i className="fal fa-chevron-left"></i></span>
-                										</a>
-                        </li>
-                        <li className="page-item active" aria-current="page">
-                          <span className="page-link">
-                											1
-                											<span className="sr-only">(current)</span>
-                          </span>
-                        </li>
-                        <li className="page-item"><a className="page-link" href="#">2</a></li>
-                        <li className="page-item"><a className="page-link" href="#">3</a></li>
-                        <li className="page-item">
-                          <a className="page-link" href="#" aria-label="Next">
-                											<span aria-hidden="true"><i className="fal fa-chevron-right"></i></span>
-                										</a>
-                        </li>
-                      </ul>
-                    </div>
+                    </table> */}
+                    
+
+
+
                   </div>
                 </div>
               </div>
@@ -189,9 +172,9 @@ class lock_store extends PureComponent {
 
     //组件即将要被挂在的时候执行的方法--
     componentDidMount(){
-      const { lockStore,a } = this.props;
-      
-      a(lockStore);
+      this.props.handleColumnsAllShow();
+      // const { lockStore,a } = this.props;
+      // a(lockStore);
     }
 
 }
@@ -203,6 +186,8 @@ const mapStateToProps = (state) => {
 
     return {
       lockStore:state.getIn(['lockstore', 'lockStore']),
+      columns: state.getIn(['client', 'columns']),
+      columnsData: state.getIn(['client', 'columnsData']),
       menu: state.getIn(['submenu', 'menu']),
       list: state.getIn(['submenu', 'list']),
       inputValue: state.getIn(['submenu', 'inputValue']),
@@ -215,17 +200,33 @@ const mapStateToProps = (state) => {
  */
 const mapDispathToProps = (dispatch) => {
     return {
-        a(lockStore){
-          (lockStore.size === 0) && dispatch(actionCreators.getClientLIst());
-        },
+      handleClientData(list) {
+        (list.size === 0) && dispatch(actionCreators.getClientLIst());
+      },
+        // a(lockStore){
+        //   (lockStore.size === 0) && dispatch(actionCreators.getClientLIst());
+        // },
         handleInputFocus(list) {
             //发送给store--提取出action--避免发送重复的ajax请求
             (list.size === 0) && dispatch(actionCreators.getList());
             dispatch(actionCreators.searchFocus());
         },
-        handleInputChange(ivalueElem){
-           
-            dispatch(actionCreators.changeInputValue(ivalueElem.value));
+        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);
+          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>`;
+          }
+          return res;
         },
     }
 }

src/product/lock_store/store/actionCreators.js

@@ -10,19 +10,21 @@ import axios from '../../../common/axios_auth.js';
 
 export const getClientLIst = () => {
     return (dispatch) => {
-        //axios.get(config.CLD2API+'/product/lock_store').then((res) => {
-        axios.get('/api/lock_store.json').then((res) => {
+        axios.get(config.CLD2API+'/contact/client').then((res) => {
+        // axios.get('/api/lock_store.json').then((res) => {
             const data = res.data;
             
             if(data.code===200){
                 
                 let d2=data.data;
+                console.log(data.data);
+                dispatch(changeList(data.data));
                 //dispatch(changeList(JSON.parse(data.list)));
                 // console.log(d2);
-                dispatch({
-                    type: constants.CHANGE_LOCKSTORE_DATA,
-                    data: fromJS(d2),
-                });
+                // dispatch({
+                //     type: constants.CHANGE_LOCKSTORE_DATA,
+                //     data: fromJS(d2),
+                // });
             }else{
                 console.log(data);
             }

src/product/lock_store/store/reducer.js

@@ -5,6 +5,29 @@ import { fromJS } from 'immutable';
 
 const defaultState = fromJS({
 	lockStore:[],
+	columns: [
+		{ data: "clientname" },
+		{ data: "companyname" },
+		{ data: "telephone" },
+		{ data: "phone" },
+		{ data: "qq" },
+		{ data: "department" },
+		{ data: "position" },
+		{ data: "office" },
+		{ data: "local" },
+	],
+	columnsData:[
+		{columnsName:'锁号',columnsValue:true},
+		{columnsName:'产品',columnsValue:true},
+		{columnsName:'办事处',columnsValue:true},
+		{columnsName:'出库时间',columnsValue:true},
+		{columnsName:'销售/借出/赠送时间',columnsValue:true},
+		{columnsName:'责任人',columnsValue:true},
+		{columnsName:'状态',columnsValue:true},
+		{columnsName:'联系人',columnsValue:true},
+	],
+
+
 });
 
 
@@ -17,14 +40,5 @@ export default (state = defaultState, action) => {
 			return state;
 	}
     
-
-
-
-    // if(action.type===constants.SEARCH_FOCUS){
-    //     return state.set('menu','clicke me');
-    // }
-    // if(action.type===constants.CHANGE_LIST){
-    //     return state.set('list',action.data);
-    // }
     return state;
 }