|  | @@ -0,0 +1,311 @@
 | 
	
		
			
				|  |  | +import React, { PureComponent } from 'react';
 | 
	
		
			
				|  |  | +import { connect } from 'react-redux';
 | 
	
		
			
				|  |  | +import { Spin,message  } from 'antd';
 | 
	
		
			
				|  |  | +import 'antd/dist/antd.css';
 | 
	
		
			
				|  |  | +import { actionCreators } from './store';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +import Company from './company';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const error = (msg) => {
 | 
	
		
			
				|  |  | +  message.error({
 | 
	
		
			
				|  |  | +    content: msg,
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +class popups extends PureComponent {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  
 | 
	
		
			
				|  |  | +  render() {
 | 
	
		
			
				|  |  | +    const { companyDetail,loading } = this.props;
 | 
	
		
			
				|  |  | +    
 | 
	
		
			
				|  |  | +    return (
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <div className="modal fade" id="detail" 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">
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                  <Company />
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                    
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                  </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-yun" role="tab" aria-selected="true">养护云造价</a></li>
 | 
	
		
			
				|  |  | +                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-yun2" role="tab" aria-selected="true">大司空云计价</a></li>
 | 
	
		
			
				|  |  | +                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-lock" role="tab" aria-selected="false">软件锁</a></li>
 | 
	
		
			
				|  |  | +                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-sso" role="tab" aria-selected="false">通行账号</a></li>
 | 
	
		
			
				|  |  | +                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-server" role="tab" aria-selected="false">服务记录</a></li>
 | 
	
		
			
				|  |  | +                    </ul>
 | 
	
		
			
				|  |  | +                    <div class="tab-content">
 | 
	
		
			
				|  |  | +                      <div class="tab-pane fade active show sheet-panel-righttop" id="tab-yun" role="tabpanel" aria-labelledby="tab-yun">
 | 
	
		
			
				|  |  | +                        <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>1</td>
 | 
	
		
			
				|  |  | +                              <td>重庆养护(2018)</td>
 | 
	
		
			
				|  |  | +                              <td>已升级(<a href="#">@刘飞</a> 6月5日 13:32)<a href="#degrade-confirm" class="btn btn-xs btn-outline-danger waves-effect waves-themed" data-toggle="modal" data-target="#degrade-confirm">降级</a></td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>2</td>
 | 
	
		
			
				|  |  | +                              <td>广东养护(2018)</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#update-confirm" class="btn btn-xs btn-outline-primary waves-effect waves-themed" data-toggle="modal" data-target="#update-confirm">升级</a></td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                          </table>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                      <div class="tab-pane fade sheet-panel-righttop" id="tab-yun2" role="tabpanel" aria-labelledby="tab-yun">
 | 
	
		
			
				|  |  | +                        <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>1</td>
 | 
	
		
			
				|  |  | +                              <td>重庆</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#update-confirm" class="btn btn-xs btn-outline-primary waves-effect waves-themed" data-toggle="modal" data-target="#update-confirm">升级</a></td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>2</td>
 | 
	
		
			
				|  |  | +                              <td>江西</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#update-confirm" class="btn btn-xs btn-outline-primary waves-effect waves-themed" data-toggle="modal" data-target="#update-confirm">升级</a></td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>3</td>
 | 
	
		
			
				|  |  | +                              <td>内蒙</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#update-confirm" class="btn btn-xs btn-outline-primary waves-effect waves-themed" data-toggle="modal" data-target="#update-confirm">升级</a></td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                          </table>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                      <div class="tab-pane fade sheet-panel-righttop" id="tab-lock" role="tabpanel" aria-labelledby="tab-lock">
 | 
	
		
			
				|  |  | +                        <div class="slimScrol3">
 | 
	
		
			
				|  |  | +                          <table class="table">
 | 
	
		
			
				|  |  | +                            <thead>
 | 
	
		
			
				|  |  | +                              <tr>
 | 
	
		
			
				|  |  | +                                <th class="border-0"></th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">锁号</th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">产品</th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">状态</th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">责任人</th>
 | 
	
		
			
				|  |  | +                              </tr>
 | 
	
		
			
				|  |  | +                            </thead>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>1</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">HNYH-0654</a></td>
 | 
	
		
			
				|  |  | +                              <td>固化清单全功能+全国专业+全国专业(新定额)</td>
 | 
	
		
			
				|  |  | +                              <td>借出</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#">@刘飞</a></td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>2</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">HNYH-0655</a></td>
 | 
	
		
			
				|  |  | +                              <td>+全国专业(新定额)</td>
 | 
	
		
			
				|  |  | +                              <td>借出</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#">@刘飞</a></td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                          </table>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                      <div class="tab-pane fade sheet-panel-righttop" id="tab-sso" role="tabpanel" aria-labelledby="tab-yun">
 | 
	
		
			
				|  |  | +                        <div class="slimScrol3">
 | 
	
		
			
				|  |  | +                          <table class="table">
 | 
	
		
			
				|  |  | +                            <thead>
 | 
	
		
			
				|  |  | +                              <tr>
 | 
	
		
			
				|  |  | +                                <th class="border-0"></th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">手机</th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">邮箱</th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">QQ</th>
 | 
	
		
			
				|  |  | +                                <th class="border-0">称呼</th>
 | 
	
		
			
				|  |  | +                              </tr>
 | 
	
		
			
				|  |  | +                            </thead>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>1</td>
 | 
	
		
			
				|  |  | +                              <td><a href="">15812345678</a></td>
 | 
	
		
			
				|  |  | +                              <td></td>
 | 
	
		
			
				|  |  | +                              <td>123456</td>
 | 
	
		
			
				|  |  | +                              <td>张三</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>1</td>
 | 
	
		
			
				|  |  | +                              <td><a href="">13900623512</a></td>
 | 
	
		
			
				|  |  | +                              <td>123456@qq.com</td>
 | 
	
		
			
				|  |  | +                              <td>123456</td>
 | 
	
		
			
				|  |  | +                              <td>张三</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                          </table>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                      <div class="tab-pane fade sheet-panel-righttop" id="tab-server" 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="140"><a href="#">@陈特</a> 上门服务
 | 
	
		
			
				|  |  | +                            <br /><span class="text-muted">5月5日 14:55</span></td>
 | 
	
		
			
				|  |  | +                              <td>1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>2</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#">@陈特</a> 上门服务
 | 
	
		
			
				|  |  | +                            <br /><span class="text-muted">5月5日 14:55</span></td>
 | 
	
		
			
				|  |  | +                              <td>1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>3</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#">@陈特</a> 上门服务
 | 
	
		
			
				|  |  | +                            <br /><span class="text-muted">5月5日 14:55</span></td>
 | 
	
		
			
				|  |  | +                              <td>1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>4</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#">@陈特</a> 上门服务
 | 
	
		
			
				|  |  | +                            <br /><span class="text-muted">5月5日 14:55</span></td>
 | 
	
		
			
				|  |  | +                              <td>1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>5</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#">@陈特</a> 上门服务
 | 
	
		
			
				|  |  | +                            <br /><span class="text-muted">5月5日 14:55</span></td>
 | 
	
		
			
				|  |  | +                              <td>1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                            <tr>
 | 
	
		
			
				|  |  | +                              <td>6</td>
 | 
	
		
			
				|  |  | +                              <td><a href="#">@陈特</a> 上门服务
 | 
	
		
			
				|  |  | +                            <br /><span class="text-muted">5月5日 14:55</span></td>
 | 
	
		
			
				|  |  | +                              <td>1-给彭工更新了软件程序,安装演示了软。2-单位彭工要考甲乙级考试,给他带了资料过去。3-表示论文发表评职称也可以随时联系我。</td>
 | 
	
		
			
				|  |  | +                            </tr>
 | 
	
		
			
				|  |  | +                          </table>
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                    <div class="sheet-btns mt-3"><a href="#add-server" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-server"><i class="far fa-plus"></i> 添加服务记录</a><a href="#add-lock" class="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-lock"><i class="far fa-link"></i> 绑定加密锁</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> 移除 通行账号 15812345678<br /><span class="text-muted">5月5日 14:55</span></p>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                          <p><a href="#">@陈特</a> 关联 通行账号 15812345678<br /><span class="text-muted">5月5日 14:55</span></p>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                          <p><a href="#">@陈特</a> 将手机 15800000000 改为 15812345678;将客户 珠海纵横创新软件有限公司 改为 北京旺圣干科技有限公司<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>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                        </div>
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                    </div>
 | 
	
		
			
				|  |  | +                  </div>
 | 
	
		
			
				|  |  | +                </div> */}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +                </Spin>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +           
 | 
	
		
			
				|  |  | +          </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    );
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  componentDidMount() {
 | 
	
		
			
				|  |  | +    this.props.onRef(this);
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  handleCompanyPopups(key) {
 | 
	
		
			
				|  |  | +    const { handleCompanyPopups } = this.props;
 | 
	
		
			
				|  |  | +    handleCompanyPopups(key);
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const mapStateToProps = (state) => {
 | 
	
		
			
				|  |  | +  return {
 | 
	
		
			
				|  |  | +    popupsClientId: state.getIn(['popups', 'popupsClientId']),
 | 
	
		
			
				|  |  | +    companyDetail: state.getIn(['popups', 'companyDetail']),
 | 
	
		
			
				|  |  | +    loading: state.getIn(['popups', 'loading']),
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const mapDispathToProps = (dispatch) => {
 | 
	
		
			
				|  |  | +  return {
 | 
	
		
			
				|  |  | +    handleCompanyPopups(key) {
 | 
	
		
			
				|  |  | +      dispatch(actionCreators.changeLoading());
 | 
	
		
			
				|  |  | +      dispatch(actionCreators.getCompanyDetail(key,error));
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +export default connect(mapStateToProps, mapDispathToProps)(popups);
 |