软件锁弹窗相关

dist/api/lock_service.json

@@ -0,0 +1,30 @@
+{
+    "code": 200,
+    "draw": null,
+    "recordsTotal": 0,
+    "recordsFiltered": 0,
+    "data": [
+        {
+            "key":"0",
+            "id":"0",
+            "number":"1",
+            "status": "销售",
+            "client": "张三8",
+            "category": "陈特",
+            "product": "固化清单全功能",
+            "createTime": "2019年5月6日 14:55",
+            "updatetime": "2019年5月7日 14:55"
+        },
+{
+            "key":"1",
+            "id":"1",
+            "number":"2",
+            "status": "借出",
+            "client": "张三811",
+            "category": "陈特11",
+            "product": "固化清单全功能+全国专业+全国专业（新定额）",
+            "createTime": "2019年5月6日 14:55",
+            "updatetime": "2019年5月7日 14:55"
+        }
+    ]
+}

dist/api/lock_store.json

@@ -1,8 +1,8 @@
 {
     "code": 200,
     "draw": null,
-    "recordsTotal": 30303,
-    "recordsFiltered": 30303,
+    "recordsTotal": 0,
+    "recordsFiltered": 0,
     "data": [
         {
             "id":"0",
@@ -26,6 +26,5 @@
             "status": "销售",
             "client": "张三811"
         }
-        
     ]
 }

src/common/config.js

@@ -1 +1,7 @@
-export const CLD2API = 'http://cld2.com:9090/cld2';
+export const CLD2API = 'http://cld2.com:9090/cld2';
+
+export const LOCALAPI = 'http://cld2.com:9090/';
+export const PATHAPI = 'api/';
+
+//例子
+// config.LOCALAPI+config.PATHAPI +'lock_store.json'

src/common/lockBinding/index.js

@@ -0,0 +1,75 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+// import { BrowserRouter, Route,Link } from 'react-router-dom';
+import { actionCreators } from './store';
+import { message,Tag,Spin, Table } from 'antd';
+
+const error = (msg) => {
+  message.error(msg);
+};
+
+class lockBinding extends PureComponent {
+  render() {
+    //const {locksotreDetail,loading,columns,data,pagination} = this.props;
+    //let lockDetail2 = locksotreDetail.toJS();
+    // console.log(lockDetail2)
+    return (
+      <div className="modal fade" id="lock-binding" role="dialog" aria-hidden="true" data-backdrop="static">
+        <div className="modal-dialog modal-lg">
+          <div className="modal-content clearfix">
+            <div className="dialog-sheet">
+              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true"><i className="fal fa-times"></i></span>
+              </button>
+              <div className="m-4">
+                <div className="input-group bg-white shadow-inset-2">
+                  <div className="input-group-prepend">
+                    <span className="input-group-text bg-transparent border-right-0">
+                      <i className="fal fa-search"></i>
+                    </span>
+                  </div>
+                  <input type="text" className="form-control border-left-0 bg-transparent pl-0" placeholder="搜索联系人（姓名、手机、QQ、公司名称）"/>
+                </div>
+              </div>
+            </div>
+            <div className="p-4 border-top d-flex justify-content-center">
+              <ul className="nav nav-pills" role="tablist">
+                <li className="nav-item"><a className="nav-link active" data-toggle="tab" href="#">借出</a></li>
+                <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#2">销售</a></li>
+                <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#">赠送</a></li>
+              </ul>
+            </div>
+            <div className="modal-search-height border-top border-bottom">
+              <div className="slimScrol2 p-4 modal-search-result">
+                <div className="card p-3 mb-3" title="点击关联该联系人">
+                  <div className="row"><div className="col-1 pr-0">张三</div><div className="col-1 pr-0">处长</div><div className="col-2 pr-0">15800000001</div><div className="col-2 pr-0">1231233</div><div className="col-4 pr-0">珠海纵横创新软件有限公司</div><div className="col-auto ml-auto pl-0"><a href="#" className="btn btn-xs btn-outline-primary waves-effect waves-themed">选择ta</a></div></div>
+                </div>
+                <div className="card pointer-hover p-3 mb-3" title="点击关联该联系人">
+                  <div className="row"><div className="col-1 pr-0">张三</div><div className="col-1 pr-0"></div><div className="col-2 pr-0">15800000001</div><div className="col-2 pr-0">1231233</div><div className="col-4 pr-0">珠海纵横创新软件有限公司</div><div className="col-auto ml-auto pl-0"><a href="#" className="btn btn-xs btn-outline-primary waves-effect waves-themed">选择ta</a></div></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 渲染完成时调回
+  componentDidMount() {
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+// 要改变store里的内容需要调用dispatch方法
+const mapDispathToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispathToProps)(lockBinding);
+

src/common/lockBinding/store/actionCreators.js

@@ -0,0 +1,61 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+import * as config from '../../../common/config.js';
+import axios from '../../axios_auth.js';
+// import axios from 'axios';
+
+//Loading
+export const changeLoading = () => {
+    return (dispatch) => {
+        dispatch({
+            type: constants.CHANGE_LOCK_DETAIL_LOADING,
+            data: true,
+        });
+    }
+}
+
+export const getlocksotreDetail = (key,error) => {
+    return (dispatch) => {
+        //console.log(data)
+        axios.get(config.CLD2API + '/product/longleDetail/'+key).then((res) => {
+            const data = res.data;
+            if (data.code === 200) {
+                data.data.productList=data.data.product.split("+");
+                //console.log(data.data.productList);
+                dispatch({
+                    type: constants.CHANGE_LOCK_DETAIL,
+                    data: data.data,
+                });
+            } else {
+                error('软件锁详情请求失败');
+            }
+        }).catch((e) => {
+            error('软件锁详情请求失败');
+        })
+    }
+};
+
+//获取记录内容
+export const getLockService = (error) => {
+    return (dispatch) => {
+        axios.get(config.LOCALAPI+config.PATHAPI +'lock_service.json').then((res) => {
+            const data = res.data;
+            for(var i=0;i < data.data.length;i++){
+                //console.log(data.data[i].product);
+                //console.log(data.data[i].product.split("+"));
+                data.data[i].productService=data.data[i].product.split("+");
+            }
+            if (data.code === 200) {
+                //console.log(data.data[0].product);
+                dispatch({
+                    type: constants.CHANGE_LOCK_RECORD,
+                    data: data.data,
+                });
+            } else {
+                error("请求数据失败");
+            }
+        }).catch((e) => {
+            error(e);
+        })
+    }
+};

src/common/lockBinding/store/constants.js

@@ -0,0 +1,4 @@
+export const CHANGE_LOCK_DETAIL = 'lockDetail/change_lock_detail';
+export const CHANGE_INPUT_VALUE = 'lockDetail/change_input_value';
+export const CHANGE_LOCK_DETAIL_LOADING = 'lockDetail/change_lock_detail_loading';
+export const CHANGE_LOCK_RECORD = 'lockDetail/change_lock_record';

src/common/lockBinding/store/index.js

@@ -0,0 +1,5 @@
+import reducer from './reducer';
+import * as actionCreators from './actionCreators';
+import * as constants from './constants';
+
+export { reducer,actionCreators,constants }

src/common/lockBinding/store/reducer.js

@@ -0,0 +1,111 @@
+import * as constants from './constants';
+import React from 'react';
+//锁定state不可修改，导致错误y
+import { fromJS } from 'immutable';
+import { Tag } from 'antd';
+
+const defaultState = fromJS({
+	locksotreDetail: {},
+	loading: true,
+	pagination:false,
+	columns:[
+		{
+			title: '',
+			dataIndex: 'number',
+			key: 'number',
+		},
+		{
+			title: '类型/时间',
+			dataIndex: 'status',
+			key: 'status',
+		},
+		{
+			title: '服务内容',
+			dataIndex: 'product',
+			key: 'product',
+		},
+	],
+	data: [
+	],
+});
+
+
+export default (state = defaultState, action) => {
+	let columns = state.get('columns').toJS();
+    switch (action.type) {
+		case constants.CHANGE_LOCK_DETAIL_LOADING:
+			return state.set('loading', action.data);
+		case constants.CHANGE_LOCK_DETAIL:
+			return state.merge({
+				loading: false,
+				locksotreDetail: fromJS(action.data)
+			});
+		case constants.CHANGE_LOCK_RECORD:
+			let reCord='';
+			columns.forEach((element,value) => {
+				if(element.title==='类型/时间'){
+					reCord=value;
+				}
+				//console.log(value)
+			});
+			//console.log(columnsBak);
+			if(reCord!==''){
+				columns[reCord]=renderRecord(columns[reCord]);
+			}
+			let serVice='';
+			columns.forEach((element,value) => {
+				if(element.title==='服务内容'){
+					serVice=value;
+				}
+				//console.log(value)
+			});
+			if(serVice!==''){
+				columns[serVice]=renderService(columns[serVice]);
+			}
+			return state.merge({
+				loading: false,
+				data: fromJS(action.data),
+				//更新记录内容
+				columns: fromJS(columns),
+			});
+		default:
+			return state;
+	}
+}
+
+function renderRecord(columns){
+	let columnsTypeTime=columns;
+	if(columns.title==='类型/时间'){
+		columnsTypeTime = {
+			...columns,
+			render: (text, record) =>{
+				//console.log(record)
+				return (
+					<div key="2"  >
+					{text} <a href="#">{record.client}</a><br></br><a href="#">@{record.category}</a> <span className="text-muted">{record.createTime}</span>
+					</div>
+			)}
+		}
+	}
+	return columnsTypeTime;
+}
+
+function renderService(columns){
+	let columnsService=columns;
+	if(columns.title==='服务内容'){
+		columnsService = {
+			...columns,
+			render: (text, record) =>{
+				//console.log(record)
+				return (
+					<div key="2">
+					{/* <Tag color="#886ab5">{record.productService}</Tag> */}
+					{record.productService.map((tag,index) => (
+						<Tag className="mb-1" color="#886ab5" key={tag+index}>{tag}</Tag>
+					))}
+					</div>
+			)}
+		}
+	}
+	return columnsService;
+}

src/common/popupstockDetail/index.js

@@ -1,216 +1,165 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 // import { BrowserRouter, Route,Link } from 'react-router-dom';
-
 import { actionCreators } from './store';
-import { message,Tag,Spin } from 'antd';
+import { message, Tag, Spin, Table } from 'antd';
+import Lockbinding from '../../common/lockBinding';
 
 const error = (msg) => {
   message.error(msg);
 };
 
 class lockDetailPopups extends PureComponent {
-
   getTag(productList) {
-    if(typeof productList==='undefined'){
+    if (typeof productList === 'undefined') {
       return null
-    }else{
+    } else {
       return (
         <>
-            {
-              productList.map((item,index) => {
-                return <Tag color="#886ab5" key={index}>{item}</Tag>
-              })
-            }
+          {
+            productList.map((item, index) => {
+              return <Tag color="#886ab5" key={index}>{item}</Tag>
+            })
+          }
         </>
       );
     }
-
   }
 
   render() {
-    const {locksotreDetail,loading} = this.props;
+    const { locksotreDetail, loading, columns, data, pagination } = this.props;
     let lockDetail2 = locksotreDetail.toJS();
     // console.log(lockDetail2)
     return (
+
       <div className="modal fade" id="lockDetail" role="dialog" aria-hidden="true" data-backdrop="static">
-    <div className="modal-dialog modal-xl">
-      <div className="modal-content">
-        <div className="dialog-sheet">
-          <button type="button" className="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="true"><i className="fal fa-times"></i></span>
-          </button>
-          <Spin size="large" spinning={loading} >
-          <div className="sheet-box row m-0">
-            <div className="sheet-left-panel">
-              <div className="sheet-panel-header d-flex justify-content-between mx-4">
-                <div>
-                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="上一条记录" className="mr-2 disabled"><i className="far fa-chevron-up"></i></a>
-                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="下一条记录" className="mr-2"><i className="far fa-chevron-down"></i></a>
-                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i className="fal fa-external-link"></i></a>
-                </div>
-                <div>
-                </div>
-              </div>
-              <div className="sheet-panel-content">
-                <div className="sheet-panel-form slimScroll1 mx-4">
-                  <div className="form-header mt-3">
-                    <div className="d-flex justify-content-between"><span className="text-muted">软件锁</span><span className="text-muted">出库于 {lockDetail2.make_day}</span></div>
-                    <legend>{lockDetail2.key_num}</legend>
-                  </div>
-                  <div className="cldform clearfix">
-                    <div className="cldform-line"></div>
-                    <div className="cldform-item">
-                      <div className="cldform-label">锁号</div>
-                      <div className="cldform-control">
-                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>{lockDetail2.key_num}</span></div>
+        <div className="modal-dialog modal-xl">
+          <div className="modal-content">
+            <div className="dialog-sheet">
+              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true"><i className="fal fa-times"></i></span>
+              </button>
+              <Spin size="large" spinning={loading} >
+                <div className="sheet-box row m-0">
+                  <div className="sheet-left-panel">
+                    <div className="sheet-panel-header d-flex justify-content-between mx-4">
+                      <div>
+                        <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="上一条记录" className="mr-2 disabled"><i className="far fa-chevron-up"></i></a>
+                        <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="下一条记录" className="mr-2"><i className="far fa-chevron-down"></i></a>
+                        <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i className="fal fa-external-link"></i></a>
                       </div>
-                    </div>
-                    <div className="cldform-line"></div>
-                    <div className="cldform-item">
-                      <div className="cldform-label">产品</div>
-                      <div className="cldform-control">
-                      {/* <Tag color="#886ab5">{lockDetail2.productList}</Tag> */}
-                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank">{this.getTag(lockDetail2.productList)}</div>
+                      <div>
                       </div>
                     </div>
-                    <div className="cldform-line"></div>
-                    <div className="cldform-item">
-                      <div className="cldform-label">期限</div>
-                      <div className="cldform-control">
-                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>{lockDetail2.alloted_time}</span></div>
+                    <div className="sheet-panel-content">
+                      <div className="sheet-panel-form slimScroll1 mx-4">
+                        <div className="form-header mt-3">
+                          <div className="d-flex justify-content-between"><span className="text-muted">软件锁</span><span className="text-muted">出库于 {lockDetail2.make_day}</span></div>
+                          <legend>{lockDetail2.key_num}</legend>
+                        </div>
+                        <div className="cldform clearfix">
+                          <div className="cldform-line"></div>
+                          <div className="cldform-item">
+                            <div className="cldform-label">锁号</div>
+                            <div className="cldform-control">
+                              <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>{lockDetail2.key_num}</span></div>
+                            </div>
+                          </div>
+                          <div className="cldform-line"></div>
+                          <div className="cldform-item">
+                            <div className="cldform-label">产品</div>
+                            <div className="cldform-control">
+                              {/* <Tag color="#886ab5">{lockDetail2.productList}</Tag> */}
+                              <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank">{this.getTag(lockDetail2.productList)}</div>
+                            </div>
+                          </div>
+                          <div className="cldform-line"></div>
+                          <div className="cldform-item">
+                            <div className="cldform-label">期限</div>
+                            <div className="cldform-control">
+                              <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>{lockDetail2.alloted_time}</span></div>
+                            </div>
+                          </div>
+                          <div className="cldform-line"></div>
+                          <div className="cldform-item">
+                            <div className="cldform-label">使用状态</div>
+                            <div className="cldform-control">
+                              <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>{lockDetail2.statusT}</span></div>
+                            </div>
+                          </div>
+                          <div className="cldform-line"></div>
+                          <div className="cldform-item">
+                            <div className="cldform-label">负责人</div>
+                            <div className="cldform-control">
+                              <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">@{lockDetail2.responsible}</a></span></div>
+                            </div>
+                          </div>
+                          <div className="cldform-line"></div>
+                          <div className="cldform-item">
+                            <div className="cldform-label">联系人</div>
+                            <div className="cldform-control">
+                              <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">{lockDetail2.client}</a></span></div>
+                            </div>
+                          </div>
+                          <div className="cldform-line"></div>
+                          <div className="cldform-item">
+                            <div className="cldform-label">公司</div>
+                            <div className="cldform-control">
+                              <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">珠海纵横创新软件有限公司</a></span></div>
+                            </div>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div className="cldform-line"></div>
-                    <div className="cldform-item">
-                      <div className="cldform-label">使用状态</div>
-                      <div className="cldform-control">
-                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>{lockDetail2.statusT}</span></div>
+                  </div>
+                  <div className="sheet-right-panel col p-0">
+                    <div className="sheet-panel-tabs mx-4 mt-4">
+                      <ul className="nav nav-tabs sheet-nav-tabs" role="tablist">
+                        <li className="nav-item"><a className="nav-link active" data-toggle="tab" href="#tab-lserver" role="tab" aria-selected="false">记录内容</a></li>
+                      </ul>
+                      <div className="tab-content">
+                        <div className="tab-pane fade sheet-panel-righttop show  active" id="tab-lserver" role="tabpanel" aria-labelledby="tab-server">
+                          <div className="slimScrol3">
+                            <Table
+                              columns={columns.toJS()}
+                              dataSource={data.toJS()}
+                              pagination={pagination}
+                            />
+                          </div>
+                        </div>
                       </div>
-                    </div>
-                    <div className="cldform-line"></div>
-                    <div className="cldform-item">
-                      <div className="cldform-label">负责人</div>
-                      <div className="cldform-control">
-                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">@{lockDetail2.responsible}</a></span></div>
+                      <div className="sheet-btns mt-3">
+                        <a href="#lock-binding" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lock-binding">借出/销售/赠送</a>
+                        <a href="#lokc-update" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-update">升级</a>
+                        <a href="#lokc-replace" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-replace">更换</a>
+                        <a href="#add-retrieve" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-retrieve">收回</a>
+                        <a href="#add-remark" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-remark">备注</a>
                       </div>
                     </div>
-                    <div className="cldform-line"></div>
-                    <div className="cldform-item">
-                      <div className="cldform-label">联系人</div>
-                      <div className="cldform-control">
-                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">{lockDetail2.client}</a></span></div>
+                    <div className="sheet-panel-record">
+                      <ul className="nav nav-tabs nav-tabs-clean sheet-nav-tabs" role="tablist">
+                        <li className="nav-item ml-4"><a className="nav-link text-center active" data-toggle="tab" href="#tab-log" role="tab" aria-selected="true">日志</a></li>
+                      </ul>
+                      <div className="tab-content p-3">
+                        <div className="tab-pane fade active show sheet-panel-log" id="tab-log" role="tabpanel" aria-labelledby="tab-log">
+                          <div className="slimScrol4">
+                            <p><a href="#">@陈特</a> 移除联系人 张三<br /><span className="text-muted">5月5日 14:55</span></p>
+                            <p><a href="#">@陈特</a> 绑定联系人 张三<br /><span className="text-muted">5月5日 14:55</span></p>
+                            <p><a href="#">@陈特</a> 接收<br /><span className="text-muted">5月5日 14:55</span></p>
+                            <p>系统 生成<br /><span className="text-muted">5月5日 14:55</span></p>
+                          </div>
+                        </div>
                       </div>
                     </div>
-                    <div className="cldform-line"></div>
-                    <div className="cldform-item">
-                      <div className="cldform-label">公司</div>
-                      <div className="cldform-control">
-                        <div className="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">珠海纵横创新软件有限公司</a></span></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="sheet-right-panel col p-0">
-              <div className="sheet-panel-tabs mx-4 mt-4">
-                <ul className="nav nav-tabs sheet-nav-tabs" role="tablist">
-                  <li className="nav-item"><a className="nav-link active" data-toggle="tab" href="#tab-lserver" role="tab" aria-selected="false">记录内容</a></li>
-                </ul>
-                <div className="tab-content">
-                  <div className="tab-pane fade sheet-panel-righttop show  active" id="tab-lserver" role="tabpanel" aria-labelledby="tab-server">
-                    <div className="slimScrol3">
-                      {/* <table className="table">
-                        <thead>
-                          <tr>
-                            <th className="border-0"></th>
-                            <th className="border-0">类型/时间</th>
-                            <th className="border-0">服务内容</th>
-                          </tr>
-                        </thead>
-                        <tr>
-                          <td width="20">1</td>
-                          <td width="150">销售 <a href="#">张三</a>
-                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
-                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
-                        </tr>
-                        <tr>
-                          <td width="20">2</td>
-                          <td width="140">借出 <a href="#">张三</a>
-                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
-                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
-                        </tr>
-                        <tr>
-                          <td width="20">3</td>
-                          <td width="140">赠送 <a href="#">张三</a>
-                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
-                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
-                        </tr>
-                        <tr>
-                          <td width="20">4</td>
-                          <td width="140">升级 <a href="#">张三</a>
-                            <br/><span className="text-muted">系统 5月5日 14:55</span></td>
-                          <td><span className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="badge badge-primary">全国专业（新定额）</span></td>
-                        </tr>
-                        <tr>
-                          <td width="20">5</td>
-                          <td width="140">延期 <a href="#">张三</a>
-                            <br/><span className="text-muted">系统 5月5日 14:55</span></td>
-                          <td>由2018-09-10延期至2019-09-10</td>
-                        </tr>
-                        <tr>
-                          <td width="20">6</td>
-                          <td width="140">收回 <a href="#">张三</a>
-                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
-                          <td></td>
-                        </tr>
-                        <tr>
-                          <td width="20">7</td>
-                          <td width="140">更换 <a href="#">张三</a>
-                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
-                          <td><a href="#">ZH-03905</a></td>
-                        </tr>
-                        <tr>
-                          <td width="20">8</td>
-                          <td width="140">备注 <a href="#">张三</a>
-                            <br/><span className="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
-                          <td>备注内容</td>
-                        </tr>
-                      </table> */}
-                    </div>
                   </div>
                 </div>
-                <div className="sheet-btns mt-3">
-                  <a href="#lock-binding" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lock-binding">借出/销售/赠送</a>
-                  <a href="#lokc-update" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-update">升级</a>
-                  <a href="#lokc-replace" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-replace">更换</a>
-                  <a href="#add-retrieve" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-retrieve">收回</a>
-                  <a href="#add-remark" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-remark">备注</a>
-                </div>
-              </div>
-              <div className="sheet-panel-record">
-                <ul className="nav nav-tabs nav-tabs-clean sheet-nav-tabs" role="tablist">
-                  <li className="nav-item ml-4"><a className="nav-link text-center active" data-toggle="tab" href="#tab-log" role="tab" aria-selected="true">日志</a></li>
-                </ul>
-                <div className="tab-content p-3">
-                  <div className="tab-pane fade active show sheet-panel-log" id="tab-log" role="tabpanel" aria-labelledby="tab-log">
-                    <div className="slimScrol4">
-                      <p><a href="#">@陈特</a> 移除联系人 张三<br/><span className="text-muted">5月5日 14:55</span></p>
-                      <p><a href="#">@陈特</a> 绑定联系人 张三<br/><span className="text-muted">5月5日 14:55</span></p>
-                      <p><a href="#">@陈特</a> 接收<br/><span className="text-muted">5月5日 14:55</span></p>
-                      <p>系统 生成<br/><span className="text-muted">5月5日 14:55</span></p>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              </Spin>
             </div>
           </div>
-          </Spin>
         </div>
+        <Lockbinding  />
       </div>
-    </div>
-  </div>
+
     );
   }
 
@@ -228,6 +177,9 @@ const mapStateToProps = (state) => {
   return {
     locksotreDetail: state.getIn(['popupstock', 'locksotreDetail']),
     loading: state.getIn(['popupstock', 'loading']),
+    columns: state.getIn(['popupstock', 'columns']),
+    data: state.getIn(['popupstock', 'data']),
+    pagination: state.getIn(['popupstock', 'pagination']),
   }
 }
 
@@ -236,7 +188,8 @@ const mapDispathToProps = (dispatch) => {
     handlelockDetailPopups(key) {
       //  console.log('dndn');
       dispatch(actionCreators.changeLoading());
-      dispatch(actionCreators.getlocksotreDetail(key,error));
+      dispatch(actionCreators.getlocksotreDetail(key, error));
+      dispatch(actionCreators.getLockService(error));
     },
   }
 }

src/common/popupstockDetail/store/actionCreators.js

@@ -16,7 +16,7 @@ export const changeLoading = () => {
 
 export const getlocksotreDetail = (key,error) => {
     return (dispatch) => {
-        // console.log(key)
+        //console.log(data)
         axios.get(config.CLD2API + '/product/longleDetail/'+key).then((res) => {
             const data = res.data;
             if (data.code === 200) {
@@ -35,3 +35,27 @@ export const getlocksotreDetail = (key,error) => {
     }
 };
 
+//获取记录内容
+export const getLockService = (error) => {
+    return (dispatch) => {
+        axios.get(config.LOCALAPI+config.PATHAPI +'lock_service.json').then((res) => {
+            const data = res.data;
+            for(var i=0;i < data.data.length;i++){
+                //console.log(data.data[i].product);
+                //console.log(data.data[i].product.split("+"));
+                data.data[i].productService=data.data[i].product.split("+");
+            }
+            if (data.code === 200) {
+                //console.log(data.data[0].product);
+                dispatch({
+                    type: constants.CHANGE_LOCK_RECORD,
+                    data: data.data,
+                });
+            } else {
+                error("请求数据失败");
+            }
+        }).catch((e) => {
+            error(e);
+        })
+    }
+};

src/common/popupstockDetail/store/constants.js

@@ -1,3 +1,4 @@
 export const CHANGE_LOCK_DETAIL = 'lockDetail/change_lock_detail';
-export const CHANGE_INPUT_VALUE = 'lockDetail/value';
+export const CHANGE_INPUT_VALUE = 'lockDetail/change_input_value';
 export const CHANGE_LOCK_DETAIL_LOADING = 'lockDetail/change_lock_detail_loading';
+export const CHANGE_LOCK_RECORD = 'lockDetail/change_lock_record';

src/common/popupstockDetail/store/reducer.js

@@ -1,15 +1,37 @@
 import * as constants from './constants';
+import React from 'react';
 //锁定state不可修改，导致错误y
 import { fromJS } from 'immutable';
-
+import { Tag } from 'antd';
 
 const defaultState = fromJS({
 	locksotreDetail: {},
 	loading: true,
+	pagination:false,
+	columns:[
+		{
+			title: '',
+			dataIndex: 'number',
+			key: 'number',
+		},
+		{
+			title: '类型/时间',
+			dataIndex: 'status',
+			key: 'status',
+		},
+		{
+			title: '服务内容',
+			dataIndex: 'product',
+			key: 'product',
+		},
+	],
+	data: [
+	],
 });
 
 
 export default (state = defaultState, action) => {
+	let columns = state.get('columns').toJS();
     switch (action.type) {
 		case constants.CHANGE_LOCK_DETAIL_LOADING:
 			return state.set('loading', action.data);
@@ -18,7 +40,72 @@ export default (state = defaultState, action) => {
 				loading: false,
 				locksotreDetail: fromJS(action.data)
 			});
+		case constants.CHANGE_LOCK_RECORD:
+			let reCord='';
+			columns.forEach((element,value) => {
+				if(element.title==='类型/时间'){
+					reCord=value;
+				}
+				//console.log(value)
+			});
+			//console.log(columnsBak);
+			if(reCord!==''){
+				columns[reCord]=renderRecord(columns[reCord]);
+			}
+			let serVice='';
+			columns.forEach((element,value) => {
+				if(element.title==='服务内容'){
+					serVice=value;
+				}
+				//console.log(value)
+			});
+			if(serVice!==''){
+				columns[serVice]=renderService(columns[serVice]);
+			}
+			return state.merge({
+				loading: false,
+				data: fromJS(action.data),
+				//更新记录内容
+				columns: fromJS(columns),
+			});
 		default:
 			return state;
 	}
+}
+
+function renderRecord(columns){
+	let columnsTypeTime=columns;
+	if(columns.title==='类型/时间'){
+		columnsTypeTime = {
+			...columns,
+			render: (text, record) =>{
+				//console.log(record)
+				return (
+					<div key="2"  >
+					{text} <a href="#">{record.client}</a><br></br><a href="#">@{record.category}</a> <span className="text-muted">{record.createTime}</span>
+					</div>
+			)}
+		}
+	}
+	return columnsTypeTime;
+}
+
+function renderService(columns){
+	let columnsService=columns;
+	if(columns.title==='服务内容'){
+		columnsService = {
+			...columns,
+			render: (text, record) =>{
+				//console.log(record)
+				return (
+					<div key="2">
+					{/* <Tag color="#886ab5">{record.productService}</Tag> */}
+					{record.productService.map((tag,index) => (
+						<Tag className="mb-1" color="#886ab5" key={tag+index}>{tag}</Tag>
+					))}
+					</div>
+			)}
+		}
+	}
+	return columnsService;
 }

src/common/shAre/index.js

@@ -0,0 +1,36 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+// import { BrowserRouter, Route,Link } from 'react-router-dom';
+
+import { actionCreators } from './store';
+import { message,Tag,Spin, Table } from 'antd';
+
+const error = (msg) => {
+  message.error(msg);
+};
+
+class lockDetailPopups extends PureComponent {
+  render() {
+    //const {locksotreDetail,loading,columns,data,pagination} = this.props;
+    //let lockDetail2 = locksotreDetail.toJS();
+    // console.log(lockDetail2)
+    return (
+      <div></div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    // locksotreDetail: state.getIn(['popupstock', 'locksotreDetail']),
+  }
+}
+
+// 要改变store里的内容需要调用dispatch方法
+const mapDispathToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispathToProps)(lockDetailPopups);
+

src/common/shAre/store/actionCreators.js

@@ -0,0 +1,61 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+import * as config from '../../../common/config.js';
+import axios from '../../axios_auth.js';
+// import axios from 'axios';
+
+//Loading
+export const changeLoading = () => {
+    return (dispatch) => {
+        dispatch({
+            type: constants.CHANGE_LOCK_DETAIL_LOADING,
+            data: true,
+        });
+    }
+}
+
+export const getlocksotreDetail = (key,error) => {
+    return (dispatch) => {
+        //console.log(data)
+        axios.get(config.CLD2API + '/product/longleDetail/'+key).then((res) => {
+            const data = res.data;
+            if (data.code === 200) {
+                data.data.productList=data.data.product.split("+");
+                //console.log(data.data.productList);
+                dispatch({
+                    type: constants.CHANGE_LOCK_DETAIL,
+                    data: data.data,
+                });
+            } else {
+                error('软件锁详情请求失败');
+            }
+        }).catch((e) => {
+            error('软件锁详情请求失败');
+        })
+    }
+};
+
+//获取记录内容
+export const getLockService = (error) => {
+    return (dispatch) => {
+        axios.get(config.LOCALAPI+config.PATHAPI +'lock_service.json').then((res) => {
+            const data = res.data;
+            for(var i=0;i < data.data.length;i++){
+                //console.log(data.data[i].product);
+                //console.log(data.data[i].product.split("+"));
+                data.data[i].productService=data.data[i].product.split("+");
+            }
+            if (data.code === 200) {
+                //console.log(data.data[0].product);
+                dispatch({
+                    type: constants.CHANGE_LOCK_RECORD,
+                    data: data.data,
+                });
+            } else {
+                error("请求数据失败");
+            }
+        }).catch((e) => {
+            error(e);
+        })
+    }
+};

src/common/shAre/store/constants.js

@@ -0,0 +1 @@
+export const CHANGE_LOCK_DETAIL = 'lockDetail/change_lock_detail';

src/common/shAre/store/index.js

@@ -0,0 +1,5 @@
+import reducer from './reducer';
+import * as actionCreators from './actionCreators';
+import * as constants from './constants';
+
+export { reducer,actionCreators,constants }

src/common/shAre/store/reducer.js

@@ -0,0 +1,42 @@
+import * as constants from './constants';
+import React from 'react';
+//锁定state不可修改，导致错误y
+import { fromJS } from 'immutable';
+
+const defaultState = fromJS({
+	locksotreDetail: {},
+	loading: true,
+	pagination:false,
+	columns:[
+		{
+			title: '',
+			dataIndex: 'number',
+			key: 'number',
+		},
+		{
+			title: '类型/时间',
+			dataIndex: 'status',
+			key: 'status',
+		},
+		{
+			title: '服务内容',
+			dataIndex: 'product',
+			key: 'product',
+		},
+	],
+	data: [
+	],
+});
+
+
+export default (state = defaultState, action) => {
+    switch (action.type) {
+		case constants.CHANGE_LOCK_DETAIL:
+			return state.merge({
+				loading: false,
+				locksotreDetail: fromJS(action.data)
+			});
+		default:
+			return state;
+	}
+}

src/product/lock_store/store/reducer.js

@@ -246,13 +246,24 @@ function renderTag(columns){
 	if(columns.title==='产品'){
 		columnsProduct = {
 			...columns,
-			render: (text, record) =>(
-				<>
+			// render: (text, record) =>(
+			// 	<>
+			// 		{record.productList.map((tag,index) => (
+			// 			<Tag color="#886ab5" key={tag+index}>{tag}</Tag>
+			// 		))}
+
+
+			// 	</>
+			// )
+			render: (text, record) =>{
+				//console.log(record)
+				return (
+					<>
 					{record.productList.map((tag,index) => (
 						<Tag color="#886ab5" key={tag+index}>{tag}</Tag>
 					))}
-				</>
-			)
+					</>
+			)}
 		}
 	}
 	return columnsProduct;
@@ -260,7 +271,6 @@ function renderTag(columns){
 
 function renderAtext(columns,action){
 	//console.log(columns.title);
-
 	let columnsDetail=columns;
 	if(columns.title==='锁号'){
 		columnsDetail = {

src/product/store/reducer.js

@@ -3,6 +3,7 @@ import { reducer as commonReducer } from '../common/store';
 import { reducer as lockStoreReducer } from '../lock_store/store';
 import { reducer as lockCountReducer } from '../lock_count/store';
 import { reducer as popupstockReducer } from '../../common/popupstockDetail/store';
+import { reducer as lockbindingReducer } from '../../common/lockBinding/store';
 
 
 
@@ -11,6 +12,7 @@ const reducer = combineReducers({
     lockstore: lockStoreReducer,
     lockcount: lockCountReducer,
     popupstock:popupstockReducer,
+    lockbinding:lockbindingReducer,
 });
 
 export default reducer;