修改软件锁显示组件

src/product/lock_store/index.js

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import { BrowserRouter, Route,Link } from 'react-router-dom';
+//import { BrowserRouter, Route,Link } from 'react-router-dom';
 import StaffHeader from '../../common/staffHeader'
-import DataTable from '../../common/dataTable';
+// import DataTable from '../../common/dataTable';
+import { Table } from 'antd';
 
 import { actionCreators } from './store';
 
@@ -10,7 +11,7 @@ let dt = null;
 
 class lock_store extends PureComponent {
     render() {
-        const { handleInputChange, handleSearch, columns, columnsData, handleColumnsShow, handleColumnBindEvent,columnsNum} = this.props;
+        const { handleInputChange,handleLockstoreDate, handleSearch, columns, columnsData, pagination,loading,handleColumnsShow,columnsNum,companyList} = this.props;
         return (
             <div>
         <StaffHeader />
@@ -84,47 +85,23 @@ class lock_store extends PureComponent {
                 <div className="panel-container show">
                   {/* <!--数据内容区--> */}
                   <div className="panel-content">
+                  <Table
+                      onChange={(pagination, filters, sorter) => handleLockstoreDate(pagination, filters, sorter, this.props)}
+                      pagination={pagination.toJS()}
+                      loading={loading}
+                      bordered
+                      columns={columns.toJS()}
+                      dataSource={companyList.toJS()}
+                  />
                   {/* 接口路径 */}
-                  <DataTable onRef={(ref) => dt = ref} url={`/contact/client`} columnBindEvent={handleColumnBindEvent} columnsData={columnsData} columns={columns.toJS()}/>
-                    {/* <table className="table table-bordered table-hover table-striped">
-                      <thead>
-                        <tr>
-                          <th>锁号</th>
-                          <th>产品</th>
-                          <th>办事处</th>
-                          <th>出库时间</th>
-                          <th>销售/借出/赠送时间</th>
-                          <th>责任人</th>
-                          <th>状态</th>
-                          <th>联系人</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                      {
-                           lockStore.map((item) => {
-                             return (
-                        <tr key={item.get('id')}>
-                          <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">{item.get('key_num')}</a></td>
-                          <td><span className="badge badge-primary mr-1">{item.get('product')}</span><span className="badge badge-primary mr-1">全国专业222</span></td>
-                          <td>{item.get('telephone')}</td>
-                          <td>{item.get('createTime')}</td>
-                          <td>{item.get('updatetime')}</td>
-                          <td><a href="#compe-detail" data-toggle="modal" data-target="#compe-detail">{item.get('category')}</a></td>
-                          <td>{item.get('status')}</td>
-                          <td><a href="#detail" data-toggle="modal" data-target="#detail">{item.get('client')}</a></td>
-                        </tr>
-                       
-                        )
-                      })
-                } 
-                      </tbody>
-                    </table> */}
+                  {/* <DataTable onRef={(ref) => dt = ref} url={`/contact/client`} columnBindEvent={handleColumnBindEvent} columnsData={columnsData} columns={columns.toJS()}/> */}
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </main>
+        <Popups mainView={'lock_store'} onRef={(ref) => popupsObj = ref} />
         {/* <LockDetail /> */}
             </div>
         );
@@ -132,9 +109,9 @@ class lock_store extends PureComponent {
 
     //组件即将要被挂在的时候执行的方法--
     componentDidMount(){
-      const { handleColumnsAllShow,columnsNum,columnsData } = this.props;
+      const {handleLockstoreDate,handleColumnsAllShow, pagination} = this.props;
       handleColumnsAllShow();
-      
+      handleLockstoreDate(pagination.toJS(), {}, {}, this.props);
     }
 
 }
@@ -145,15 +122,12 @@ let delaySwitch = null;
  * @param {*} state 
  */
 const mapStateToProps = (state) => {
-
     return {
-      lockStore:state.getIn(['lockstore', 'lockStore']),
+      handleLockstoreDate:state.getIn(['lockstore','handleLockstoreDate']),
+      pagination: state.getIn(['lockstore', 'pagination']),
+      loading: state.getIn(['lockstore', 'loading']),
       columns: state.getIn(['lockstore', 'columns']),
       columnsData: state.getIn(['lockstore', 'columnsData']),
-      menu: state.getIn(['submenu', 'menu']),
-      list: state.getIn(['submenu', 'list']),
-      inputValue: state.getIn(['submenu', 'inputValue']),
-      columnsNum: state.getIn(['lockstore', 'columnsNum']),
     }
 }
 
@@ -196,13 +170,24 @@ const mapDispathToProps = (dispatch) => {
         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;
+        handleLockstoreDate(pagination, filters, sorter, props) {
+          // console.log(pagination);
+          dispatch(actionCreators.changeLoading());
+          dispatch(actionCreators.getCompanyLIst(pagination, props));
+          //(list.size === 0) && dispatch(actionCreators.getCompanyLIst());
+        },
+        handleCompanyPopups(key) {
+          popupsObj.handleCompanyPopups(key);
+          // console.log(popupsObj);
+          // console.log(key);
         },
+        // 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

@@ -23,24 +23,33 @@ export const toggleColumnsAll = (dt) => {
     }
 };
 
-export const getClientLIst = () => {
+export const changeLoading = () => {
     return (dispatch) => {
-        axios.get(config.CLD2API+'/contact/client').then((res) => {
-        // axios.get('/api/lock_store.json').then((res) => {
+        dispatch({
+            type: constants.CHANGE_LOCKSTORE_LOADING,
+            data: true,
+        });
+    }
+}
+
+export const getCompanyLIst = (pagination,props) => {
+    return (dispatch) => {
+        axios.get(config.CLD2API + '/contact/client', {
+            params: {
+                current: pagination.current,
+                pageSize: pagination.pageSize,
+            },
+        }).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),
-                // });
-            }else{
+
+            if (data.code === 200) {
+                dispatch({
+                    type: constants.CHANGE_LOCKSTORE_DATA,
+                    data: data,
+                    pagination:pagination,
+                    props:props
+                });
+            } else {
                 console.log(data);
             }
         }).catch((e) => {
@@ -50,6 +59,33 @@ export const getClientLIst = () => {
     }
 };
 
+// export const getClientLIst = (pagination,props) => {
+//     return (dispatch) => {
+//         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),
+//                 // });
+//             }else{
+//                 console.log(data);
+//             }
+//         }).catch((e) => {
+//             console.log(e);
+//             console.log('error');
+//         })
+//     }
+// };
+
 
 const changeList = (data) => ({
     type: constants.CHANGE_LOCKSTORE_DATA,

src/product/lock_store/store/reducer.js

@@ -5,26 +5,79 @@ import { fromJS } from 'immutable';
 
 const defaultState = fromJS({
 	lockStore:[],
-	columnsNum:0,
+	pagination: {
+		current: 1,
+		pageSize: 10,
+		showSizeChanger: false
+	},
+	loading: false,
 	columns: [
-		{ data: "clientname" },
-		{ data: "companyname" },
-		{ data: "telephone" },
-		{ data: "phone" },
-		{ data: "qq" },
-		{ data: "department" },
-		{ data: "position" },
-		{ data: "office" },
+		{
+			title: '锁号',
+			dataIndex: 'clientname',
+			key: 'clientname',
+			visible: true
+		},
+		{
+			title: '产品',
+			dataIndex: 'companyname',
+			key: 'companyname',
+		},
+		{
+			title: '办事处',
+			dataIndex: 'telephone',
+			key: 'telephone',
+			visible: true
+		},
+		{
+			title: '出库时间',
+			dataIndex: 'phone',
+			key: 'phone',
+		},
+		{
+			title: '销售/借出/赠送时间',
+			dataIndex: 'qq',
+			key: 'qq',
+			visible: true
+		},
+		{
+			title: '责任人',
+			dataIndex: 'department',
+			key: 'department',
+		},
+		{
+			title: '状态',
+			dataIndex: 'position',
+			key: 'position',
+			visible: true
+		},
+		{
+			title: '联系人',
+			dataIndex: 'office',
+			key: 'office',
+		},
+		// { data: "clientname" },
+		// { data: "companyname" },
+		// { data: "telephone" },
+		// { data: "phone" },
+		// { data: "qq" },
+		// { data: "department" },
+		// { data: "position" },
+		// { data: "office" },
 	],
+	companyPopupsDetail: {
+		companyDetail: {},
+
+	},
 	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},
+		{columnsName:'锁号',columnsValue:true,dataKey: "clientname"},
+		{columnsName:'产品',columnsValue:true,dataKey: "companyname"},
+		{columnsName:'办事处',columnsValue:true,dataKey: "telephone"},
+		{columnsName:'出库时间',columnsValue:true,dataKey: "phone"},
+		{columnsName:'销售/借出/赠送时间',columnsValue:true,dataKey: "qq"},
+		{columnsName:'责任人',columnsValue:true,dataKey: "department"},
+		{columnsName:'状态',columnsValue:true,dataKey: "position"},
+		{columnsName:'联系人',columnsValue:true,dataKey: "office"},
 
 	],
 
@@ -33,18 +86,37 @@ const defaultState = fromJS({
 
 
 export default (state = defaultState, action) => {
+	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);
+			return state.merge({
+				columnsData: fromJS(columnsData),
+				columns: fromJS(columnsBak)
+			});
+			// 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++;
+			// 	}
+			// }
+			// console.log(countFalse);
+			//columnNumData=columnsData.length-countFalse;
 			//console.log(columnsData);
-			return state.set('columnsData', fromJS(columnsData));
+			//return state.set('columnsData', fromJS(columnsData));
+			// return state.merge({
+			// 	columnsNum: columnNumData,
+			// 	columnsData: fromJS(columnsData),
+			// });
 		case constants.TOGGLE_COLUMNS_ALL:
-			let countFalse=0;
+			countFalse=0;
 			for(var i=1;i<=columnsData.length;i++){
 				var isAccept=localStorage.getItem("product_lock_store_Column_"+i);
 				if(isAccept==="false"){
@@ -53,16 +125,35 @@ export default (state = defaultState, action) => {
 					countFalse++;
 				}
 			}
-			let columnNumData=columnsData.length-countFalse;
-			console.log(columnNumData);
+			columnNumData=columnsData.length-countFalse;
+			// console.log(columnNumData);
+			var columnsBak=refreshColumns(columnsData,columns);
 			return state.merge({
 				columnsNum: columnNumData,
 				columnsData: fromJS(columnsData),
+				columns: fromJS(columnsBak),
 			});
 			//return state.set('columnsNum', columnNumData);
 			//return state.set('columnsData', fromJS(columnsData));
+		case constants.CHANGE_LOCKSTORE_LOADING:
+			return state.set('loading', action.data);
 		case constants.CHANGE_LOCKSTORE_DATA:
-			return state.set('lockStore', action.data);
+			let columnsDetail = {
+				...columns[0],
+				render: (text, record) => <a href="#detail" data-toggle="modal" data-target="#detail" onClick={() => action.props.handleCompanyPopups(record.key)} >{text}</a>,
+			}
+			columns[0] = columnsDetail;
+			let pagination = {
+				...action.pagination,
+				total: action.data.recordsTotal,
+			}
+			return state.merge({
+				pagination: fromJS(pagination),
+				companyList: fromJS(action.data.data),
+				loading: false,
+				columns: fromJS(columns)
+			});
+			//return state.set('lockStore', action.data);
 		default:
 			return state;
 	}