增加软件锁弹窗

src/common/lockDetail/index.js

@@ -0,0 +1,195 @@
+import React, { PureComponent } from 'react';
+// import { connect } from 'react-redux';
+// import { BrowserRouter, Route,Link } from 'react-router-dom';
+
+// import { actionCreators } from './store';
+
+class clientPopups extends PureComponent {
+
+
+  render() {
+    return (
+      <div class="modal fade" id="lock-detail" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="dialog-sheet">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true"><i class="fal fa-times"></i></span>
+          </button>
+          <div class="sheet-box row m-0">
+            <div class="sheet-left-panel">
+              <div class="sheet-panel-header d-flex justify-content-between mx-4">
+                <div>
+                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="上一条记录" class="mr-2 disabled"><i class="far fa-chevron-up"></i></a>
+                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="下一条记录" class="mr-2"><i class="far fa-chevron-down"></i></a>
+                  <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i class="fal fa-external-link"></i></a>
+                </div>
+                <div>
+                </div>
+              </div>
+              <div class="sheet-panel-content">
+                <div class="sheet-panel-form slimScroll1 mx-4">
+                  <div class="form-header mt-3">
+                    <div class="d-flex justify-content-between"><span class="text-muted">软件锁</span><span class="text-muted">出库于 2019年5月6日 14:55</span></div>
+                    <legend>HNYH-0654</legend>
+                  </div>
+                  <div class="cldform clearfix">
+                    <div class="cldform-line"></div>
+                    <div class="cldform-item">
+                      <div class="cldform-label">锁号</div>
+                      <div class="cldform-control">
+                        <div class="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>HNYH-0654</span></div>
+                      </div>
+                    </div>
+                    <div class="cldform-line"></div>
+                    <div class="cldform-item">
+                      <div class="cldform-label">产品</div>
+                      <div class="cldform-control">
+                        <div class="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span class="badge badge-primary mr-1">固化清单全功能</span><span class="badge badge-primary mr-1">全国专业</span><span class="badge badge-primary">全国专业（新定额）</span></div>
+                      </div>
+                    </div>
+                    <div class="cldform-line"></div>
+                    <div class="cldform-item">
+                      <div class="cldform-label">期限</div>
+                      <div class="cldform-control">
+                        <div class="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span></span></div>
+                      </div>
+                    </div>
+                    <div class="cldform-line"></div>
+                    <div class="cldform-item">
+                      <div class="cldform-label">使用状态</div>
+                      <div class="cldform-control">
+                        <div class="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span>销售</span></div>
+                      </div>
+                    </div>
+                    <div class="cldform-line"></div>
+                    <div class="cldform-item">
+                      <div class="cldform-label">负责人</div>
+                      <div class="cldform-control">
+                        <div class="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">@陈特</a></span></div>
+                      </div>
+                    </div>
+                    <div class="cldform-line"></div>
+                    <div class="cldform-item">
+                      <div class="cldform-label">联系人</div>
+                      <div class="cldform-control">
+                        <div class="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">张三</a></span></div>
+                      </div>
+                    </div>
+                    <div class="cldform-line"></div>
+                    <div class="cldform-item">
+                      <div class="cldform-label">公司</div>
+                      <div class="cldform-control">
+                        <div class="cldform-contarl-box cldform-contarl-textareabox cldform-contarl-blank"><span><a href="#">珠海纵横创新软件有限公司</a></span></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="sheet-right-panel col p-0">
+              <div class="sheet-panel-tabs mx-4 mt-4">
+                <ul class="nav nav-tabs sheet-nav-tabs" role="tablist">
+                  <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-lserver" role="tab" aria-selected="false">记录内容</a></li>
+                </ul>
+                <div class="tab-content">
+                  <div class="tab-pane fade sheet-panel-righttop show  active" id="tab-lserver" role="tabpanel" aria-labelledby="tab-server">
+                    <div class="slimScrol3">
+                      <table class="table">
+                        <thead>
+                          <tr>
+                            <th class="border-0"></th>
+                            <th class="border-0">类型/时间</th>
+                            <th class="border-0">服务内容</th>
+                          </tr>
+                        </thead>
+                        <tr>
+                          <td width="20">1</td>
+                          <td width="150">销售 <a href="#">张三</a>
+                            <br/><span class="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
+                          <td><span class="badge badge-primary mr-1">固化清单全功能</span><span class="badge badge-primary mr-1">全国专业</span><span class="badge badge-primary">全国专业（新定额）</span></td>
+                        </tr>
+                        <tr>
+                          <td width="20">2</td>
+                          <td width="140">借出 <a href="#">张三</a>
+                            <br/><span class="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
+                          <td><span class="badge badge-primary mr-1">固化清单全功能</span><span class="badge badge-primary mr-1">全国专业</span><span class="badge badge-primary">全国专业（新定额）</span></td>
+                        </tr>
+                        <tr>
+                          <td width="20">3</td>
+                          <td width="140">赠送 <a href="#">张三</a>
+                            <br/><span class="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
+                          <td><span class="badge badge-primary mr-1">固化清单全功能</span><span class="badge badge-primary mr-1">全国专业</span><span class="badge badge-primary">全国专业（新定额）</span></td>
+                        </tr>
+                        <tr>
+                          <td width="20">4</td>
+                          <td width="140">升级 <a href="#">张三</a>
+                            <br/><span class="text-muted">系统 5月5日 14:55</span></td>
+                          <td><span class="badge badge-primary mr-1">固化清单全功能</span><span class="badge badge-primary mr-1">全国专业</span><span class="badge badge-primary">全国专业（新定额）</span></td>
+                        </tr>
+                        <tr>
+                          <td width="20">5</td>
+                          <td width="140">延期 <a href="#">张三</a>
+                            <br/><span class="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 class="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 class="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 class="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
+                          <td>备注内容</td>
+                        </tr>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+                <div class="sheet-btns mt-3">
+                  <a href="#lock-binding" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lock-binding">借出/销售/赠送</a>
+                  <a href="#lokc-update" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-update">升级</a>
+                  <a href="#lokc-replace" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#lokc-replace">更换</a>
+                  <a href="#add-retrieve" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-retrieve">收回</a>
+                  <a href="#add-remark" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-remark">备注</a>
+                </div>
+              </div>
+              <div class="sheet-panel-record">
+                <ul class="nav nav-tabs nav-tabs-clean sheet-nav-tabs" role="tablist">
+                  <li class="nav-item ml-4"><a class="nav-link text-center active" data-toggle="tab" href="#tab-log" role="tab" aria-selected="true">日志</a></li>
+                </ul>
+                <div class="tab-content p-3">
+                  <div class="tab-pane fade active show sheet-panel-log" id="tab-log" role="tabpanel" aria-labelledby="tab-log">
+                    <div class="slimScrol4">
+                      <p><a href="#">@陈特</a> 移除联系人 张三<br/><span class="text-muted">5月5日 14:55</span></p>
+                      <p><a href="#">@陈特</a> 绑定联系人 张三<br/><span class="text-muted">5月5日 14:55</span></p>
+                      <p><a href="#">@陈特</a> 接收<br/><span class="text-muted">5月5日 14:55</span></p>
+                      <p>系统 生成<br/><span class="text-muted">5月5日 14:55</span></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+    );
+  }
+
+}
+
+
+
+
+export default clientPopups;

src/common/lockDetail/store/actionCreators.js

@@ -0,0 +1,52 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+
+import axios from '../../../common/axios_auth.js';
+// import axios from 'axios';
+
+
+
+//actionType
+export const searchFocus = () => ({
+    type: constants.SEARCH_FOCUS
+});
+
+export const getList = () => {
+    return (dispatch) => {
+        axios.get('/api/submenuList.json').then((res) => {
+            const data = res.data;
+            dispatch(changeList(data.data));
+        }).catch(() => {
+            console.log('error');
+        })
+    }
+};
+
+export const changeInputValue = (value) => (  {
+    type: constants.CHANGE_INPUTVALUE,
+    data:fromJS(value),
+});
+
+const changeList = (data) => ({
+    type: constants.CHANGE_LIST,
+    data: fromJS(data),
+    // totalPage: Math.ceil(data.length / 10)
+});
+
+// export const searchBlur = () => ({
+// 	type: constants.SEARCH_BLUR
+// });
+
+// export const mouseEnter = () => ({
+// 	type: constants.MOUSE_ENTER
+// });
+
+// export const mouseLeave = () => ({
+// 	type: constants.MOUSE_LEAVE
+// });
+
+// export const changePage = (page) => ({
+// 	type: constants.CHANGE_PAGE,
+// 	page
+// });
+

src/common/lockDetail/store/constants.js

@@ -0,0 +1,5 @@
+export const SEARCH_FOCUS = 'submenu/SEARCH_FOCUS';
+export const CHANGE_LIST ='submenu/CHANGE_LIST';
+export const CHANGE_INPUTVALUE ='submenu/CHANGE_INPUTVALUE';
+
+

src/common/lockDetail/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/lockDetail/store/reducer.js

@@ -0,0 +1,58 @@
+import * as constants from './constants';
+//锁定state不可修改，导致错误y
+import { fromJS } from 'immutable';
+
+
+const defaultState = fromJS({
+    menu: 'hello submenu-t!!!',
+    list:[],
+    inputValue:'',
+
+});
+
+
+export default (state = defaultState, action) => {
+
+    // switch(action.type) {
+	// 	case constants.SEARCH_FOCUS:
+	// 		return state.set('focused', true);
+	// 	case constants.SEARCH_BLUR:
+	// 		return state.set('focused', false);
+	// 	case constants.CHANGE_LIST:
+	// 		return state.merge({
+	// 			list: action.data,
+	// 			totalPage: action.totalPage
+	// 		});
+	// 	case constants.MOUSE_ENTER:
+	// 		return state.set('mouseIn', true);
+	// 	case constants.MOUSE_LEAVE:
+	// 		return state.set('mouseIn', false);
+	// 	case constants.CHANGE_PAGE:
+	// 		return state.set('page', action.page);
+	// 	default:
+	// 		return state;
+	// }
+    if(action.type===constants.CHANGE_INPUTVALUE){
+        return state.set('inputValue',action.data);
+
+    }
+
+
+
+    if(action.type===constants.SEARCH_FOCUS){
+        return state.set('menu','clicke me');
+        // return {
+        //     menu:'clicke me'
+        // }
+    }
+    if(action.type===constants.CHANGE_LIST){
+        return state.set('list',action.data);
+        //return state.set('menu','clicke me');
+
+        // return state.merge({
+        //     list: action.data,
+        //     //totalPage: action.totalPage
+        // });
+    }
+    return state;
+}

src/product/lock_store/index.js

@@ -1,6 +1,8 @@
 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 { actionCreators } from './store';
 
@@ -31,70 +33,7 @@ class lock_store extends PureComponent {
         //const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
         return (
             <div>
-                <header className="page-header" role="banner">
-          {/* <!-- DOC: 侧栏收起工具 --> */}
-          <div className="hidden-md-down dropdown-icon-menu position-relative">
-            <a href="#" className="header-btn btn js-waves-off" data-action="toggle" data-class="nav-function-hidden" title="隐藏侧栏">
-     						<i className="ni ni-menu"></i>
-     					</a>
-            <ul>
-              <li>
-                <a href="#" className="btn js-waves-off" data-action="toggle" data-class="nav-function-minify" title="迷你侧栏">
-     								<i className="ni ni-minify-nav"></i>
-     							</a>
-              </li>
-            </ul>
-          </div>
-          <div className="hidden-lg-up">
-            <a href="#" className="header-btn btn press-scale-down waves-effect waves-themed" data-action="toggle" data-class="mobile-nav-on">
-     						<i className="ni ni-menu"></i>
-     					</a>
-          </div>
-          {/* <!--页面标题--> */}
-          <h1 className="subheader-title">
-     					公共锁库
-     				</h1>
-          {/* <!--顶部右栏--> */}
-          <div className="ml-auto d-flex">
-            {/* <!-- 信息提示 -->
-            <!--信息提示被移除-->
-            <!-- 用户菜单 --> */}
-            <div>
-              <a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com" className="header-icon d-flex align-items-center justify-content-center ml-2">
-     							<img src="img/demo/avatars/avatar-admin.png" className="profile-image rounded-circle" alt="Dr. Codex Lantern"/>
-                                {/* <!-- you can also add username next to the avatar with the codes below:
-                                <span className="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
-                                <i className="ni ni-chevron-down hidden-xs-down"></i> --> */}
-                            </a>
-              <div className="dropdown-menu dropdown-menu-animated dropdown-lg">
-                <div className="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
-                  <div className="d-flex flex-row align-items-center mt-1 mb-1 color-white">
-                    <span className="mr-2">
-                            				<img src="img/demo/avatars/avatar-admin.png" className="rounded-circle profile-image" alt="Dr. Codex Lantern"/>
-                            			</span>
-                    <div className="info-card-text">
-                      <div className="fs-lg text-truncate text-truncate-lg">张三</div>
-                      <span className="text-truncate text-truncate-md opacity-80">工号：0001</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="dropdown-divider m-0"></div>
-                <a href="#" className="dropdown-item" data-action="app-fullscreen">
-                            		<span>员工信息</span>
-                            	</a>
-                <div className="dropdown-divider m-0"></div>
-                <a href="#" className="dropdown-item" data-action="app-fullscreen">
-                            		<span>全屏</span>
-                            		<i className="float-right text-muted fw-n">F11</i>
-                            	</a>
-                <div className="dropdown-divider m-0"></div>
-                <a className="dropdown-item fw-500 pt-3 pb-3" href="page_login_alt.html">
-                            		<span>退出登录</span>
-                            	</a>
-              </div>
-            </div>
-          </div>
-        </header>
+        <StaffHeader />
         <main id="js-page-content" role="main" className="page-content">
           <div className="row">
             <div className="col-xl-12">
@@ -269,6 +208,7 @@ class lock_store extends PureComponent {
             </div>
           </div>
         </main>
+        <LockDetail />
             </div>
         );
     }