软件锁页面

src/common/lockDetail/index.js

@@ -9,171 +9,171 @@ 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>
+      <div className="modal fade" id="lock-detail" tabindex="-1" 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>
-          <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 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="上一条记录" 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>
+                  <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 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>
+              <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">出库于 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 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>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 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 className="badge badge-primary mr-1">固化清单全功能</span><span className="badge badge-primary mr-1">全国专业</span><span className="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 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></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 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>销售</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 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 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 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 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 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 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>
+            <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 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">
+                <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 class="border-0"></th>
-                            <th class="border-0">类型/时间</th>
-                            <th class="border-0">服务内容</th>
+                            <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 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>
+                            <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 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>
+                            <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 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>
+                            <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 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>
+                            <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 class="text-muted">系统 5月5日 14:55</span></td>
+                            <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 class="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
+                            <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 class="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
+                            <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 class="text-muted"><a href="#">@陈特</a> 5月5日 14:55</span></td>
+                            <br/><span className="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 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 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>
+              <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 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 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>

src/product/lock_count/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { BrowserRouter, Route,Link } from 'react-router-dom';
+import StaffHeader from '../../common/staffHeader'
 
 import { actionCreators } from './store';
 
@@ -30,7 +31,111 @@ class lock_count extends PureComponent {
     render() {
         //const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
         return (
-            <div>lock_count</div>
+            <div>
+                <StaffHeader />
+                <main id="js-page-content" role="main" class="page-content">
+          <div class="row">
+            <div class="col-xl-12">
+              <div id="panel-1" class="panel">
+                <div class="panel-hdr">
+                  <div class="col-auto pr-0">
+                    <div class="input-group input-group-sm bg-white shadow-inset-2">
+                      <input type="text" class="form-control bg-transparent" placeholder="锁号"/>
+                      <div class="input-group-append">
+                        <button class="btn btn-default waves-effect waves-themed" type="button" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="搜索"><i class="fal fa-search"></i></button>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-auto pr-0">
+                    <select class="custom-select form-control custom-select-sm">
+                      <option selected="">办事处</option>
+                      <option value="1">广东办</option>
+                      <option value="2">总部</option>
+                      <option value="3">江西办</option>
+                    </select>
+                  </div>
+                  <div class="col-auto ml-auto">
+                  </div>
+                  <div class="col-auto pl-0">
+                    <button class="btn btn-sm btn-default" data-toggle="dropdown"><i class="fal fa-sort-amount-down"></i> 排序</button>
+                    <div class="dropdown-menu dropdown-menu-right" id="paixu">
+                      <ul class="list-unstyled px-3 pt-2 mb-0">
+                        <li class="mb-2">
+                          <div class="custom-control custom-radio">
+                            <input type="radio" class="custom-control-input" id="pai1" name="paizhi" id="on" checked/>
+                            <label class="custom-control-label" for="pai1">已使用</label>
+                          </div>
+                        </li>
+                        <li class="mb-2">
+                          <div class="custom-control custom-radio">
+                            <input type="radio" class="custom-control-input" id="pai2" name="paizhi"/>
+                            <label class="custom-control-label" for="pai2">未使用</label>
+                          </div>
+                        </li>
+                        <li class="mb-2">
+                          <div class="custom-control custom-radio">
+                            <input type="radio" class="custom-control-input" id="pai3" name="paizhi"/>
+                            <label class="custom-control-label" for="pai3">合计</label>
+                          </div>
+                        </li>
+                      </ul>
+                      <ul class="list-unstyled px-3 pt-2 mb-0 border-top">
+                        <li class="mb-2">
+                          <div class="custom-control custom-radio">
+                            <input type="radio" class="custom-control-input" id="pdown" name="paixu" id="on" checked/>
+                            <label class="custom-control-label" for="pdown">降序</label>
+                          </div>
+                        </li>
+                        <li class="mb-2">
+                          <div class="custom-control custom-radio">
+                            <input type="radio" class="custom-control-input" id="pup" name="paixu"/>
+                            <label class="custom-control-label" for="pup">升序</label>
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="panel-container show">
+                  {/* <!--数据内容区--> */}
+                  <div class="panel-content">
+                    <table class="table table-bordered table-hover table-striped">
+                      <thead>
+                        <tr>
+                          <th rowspan="2">办事处</th>
+                          <th rowspan="2">员工</th>
+                          <th colspan="3" class="text-center">锁合计</th>
+                        </tr>
+                        <tr>
+                          <th title="接收">未使用</th>
+                          <th title="销售、赠送、借出、升级、收回、更换">已使用</th>
+                          <th>合计</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td>总部</td>
+                          <td>王晶</td>
+                          <td>30</td>
+                          <td>70</td>
+                          <td>100</td>
+                        </tr>
+                        <tr>
+                          <td>总部</td>
+                          <td>黄嘉玲</td>
+                          <td>41</td>
+                          <td>71</td>
+                          <td>101</td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+            </div>
         );
     }