|
@@ -1,9 +1,11 @@
|
|
|
-import React, { PureComponent } from 'react';
|
|
|
+import React, { PureComponent,Fragment } from 'react';
|
|
|
import { connect } from 'react-redux';
|
|
|
-import { BrowserRouter, Route,Link } from 'react-router-dom';
|
|
|
+// import { BrowserRouter, Route,Link } from 'react-router-dom';
|
|
|
|
|
|
import { actionCreators } from './store';
|
|
|
|
|
|
+import StaffHeader from '../../common/staffHeader'
|
|
|
+
|
|
|
class client extends PureComponent {
|
|
|
|
|
|
|
|
@@ -41,11 +43,406 @@ class client extends PureComponent {
|
|
|
render() {
|
|
|
//const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
|
|
|
return (
|
|
|
- <div>client</div>
|
|
|
+ <Fragment>
|
|
|
+ <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="姓名/公司/手机/QQ"/>
|
|
|
+ <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">
|
|
|
+ <button class="btn btn-sm btn-default" type="button" data-toggle="modal" data-target="#filter"><i class="fal fa-filter"></i> 筛选</button>
|
|
|
+ </div>
|
|
|
+ <div class="col-auto pr-0">
|
|
|
+ <span class="btn btn-sm btn-default" ><a href="#filter" class="text-primary" data-toggle="modal" data-target="#filter"><i class="fal fa-filter"></i> 3项</a><a href="#" class="ml-2 text-danger"><i class="fal fa-times"></i></a></span>
|
|
|
+ </div>
|
|
|
+ <div class="col-auto ml-auto">
|
|
|
+ <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">已显示5列</button>
|
|
|
+ <div class="dropdown-menu">
|
|
|
+ <ul class="list-unstyled px-3 pt-2 mb-0">
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie1"/>
|
|
|
+ <label class="custom-control-label" for="lie1">手机</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie2"/>
|
|
|
+ <label class="custom-control-label" for="lie2">电话</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie3"/>
|
|
|
+ <label class="custom-control-label" for="lie3">QQ</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie4" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie4">部门</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie5"/>
|
|
|
+ <label class="custom-control-label" for="lie5">职务</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie6"/>
|
|
|
+ <label class="custom-control-label" for="lie6">办公室</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie7"/>
|
|
|
+ <label class="custom-control-label" for="lie7">地区</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie8" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie8">个人标签</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie8" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie8">地址</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie8" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie8">乘车</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie8" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie8">地标</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie8" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie8">住宿</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie10" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie10">软件锁</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-2">
|
|
|
+ <div class="custom-control custom-switch">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="lie11" checked=""/>
|
|
|
+ <label class="custom-control-label" for="lie11">大司空</label>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </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" 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" 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 class="col-auto pl-0">
|
|
|
+ <button type="button" class="btn btn-sm btn-primary"><i class="far fa-plus"></i> 联系人</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="panel-container show">
|
|
|
+
|
|
|
+ <div class="panel-content">
|
|
|
+ <table class="table table-bordered table-hover table-striped">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>姓名</th>
|
|
|
+ <th>公司</th>
|
|
|
+ <th>部门</th>
|
|
|
+ <th>个人标签</th>
|
|
|
+ <th>软件锁</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td><a href="#detail" data-toggle="modal" data-target="#detail">张三8</a></td>
|
|
|
+ <td><a href="#com-detail" data-toggle="modal" data-target="#com-detail">xxxx公司</a></td>
|
|
|
+ <td>部门1</td>
|
|
|
+ <td><span class="badge tagcol-01"><span class="d-inline-block text-truncate text-truncate-xs">这是一条标签名字很长很长的标签</span></span><span class="badge tagcol-02"><span class="d-inline-block text-truncate text-truncate-xs">特别关注</span></span>
|
|
|
+ <a title="添加标签" class="badge badge-secondary tagcol-08" href="" data-toggle="dropdown"><i class="far fa-plus"></i></a>
|
|
|
+ <div class="dropdown-menu dropdown-menu-right">
|
|
|
+ <ul class="list-unstyled px-3 pt-2 mb-0">
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <div class="input-group-prepend">
|
|
|
+ <div class="input-group-text bg-transparent border-right-0">
|
|
|
+ <i class="fas fa-circle tagcol-01-s"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="请输入标签名" value="这是一条标签名字很长很长的标签" />
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <div class="input-group-prepend">
|
|
|
+ <div class="input-group-text bg-transparent border-right-0">
|
|
|
+ <i class="fas fa-circle tagcol-02-s"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="请输入标签名" value="标签2"/>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <div class="input-group-prepend">
|
|
|
+ <div class="input-group-text bg-transparent border-right-0">
|
|
|
+ <i class="fas fa-circle tagcol-03-s"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="请输入标签名" value="标签3"/>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <div class="input-group-prepend">
|
|
|
+ <div class="input-group-text bg-transparent border-right-0">
|
|
|
+ <i class="fas fa-circle tagcol-04-s"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="请输入标签名" value="标签4"/>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <div class="input-group-prepend">
|
|
|
+ <div class="input-group-text bg-transparent border-right-0">
|
|
|
+ <i class="fas fa-circle tagcol-05-s"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="请输入标签名" value="标签5"/>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <div class="input-group-prepend">
|
|
|
+ <div class="input-group-text bg-transparent border-right-0">
|
|
|
+ <i class="fas fa-circle tagcol-06-s"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="请输入标签名" value="标签6"/>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <div class="input-group-prepend">
|
|
|
+ <div class="input-group-text bg-transparent border-right-0">
|
|
|
+ <i class="fas fa-circle tagcol-07-s"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <input type="text" class="form-control border-left-0 bg-transparent pl-0" placeholder="请输入标签名" value="标签7"/>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <button type="button" class="btn btn-sm btn-primary">确定</button>
|
|
|
+ <button type="button" class="btn btn-sm btn-secondary">取消</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">HNYH-0654</a></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><a href="#detail" data-toggle="modal" data-target="#detail">张三8</a></td>
|
|
|
+ <td><a href="#com-detail" data-toggle="modal" data-target="#com-detail">xxxx公司</a></td>
|
|
|
+ <td>部门1</td>
|
|
|
+ <td>
|
|
|
+ <a title="添加标签" class="badge badge-secondary tagcol-08" href="" data-toggle="dropdown"><i class="far fa-plus"></i></a>
|
|
|
+ <div class="dropdown-menu dropdown-menu-right">
|
|
|
+ <ul class="list-unstyled px-3 pt-2 mb-0">
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-01-s mr-2"></i>这是一条标签名字很长很长的标签</span>
|
|
|
+ <div class="input-group-append">
|
|
|
+ <div class="input-group-text border-left-0 bg-transparent">
|
|
|
+ <div class="custom-control custom-checkbox">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="tabcheck1"/>
|
|
|
+ <label class="custom-control-label" for="tabcheck1"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-02-s mr-2"></i>标签2</span>
|
|
|
+ <div class="input-group-append">
|
|
|
+ <div class="input-group-text border-left-0 bg-transparent">
|
|
|
+ <div class="custom-control custom-checkbox">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="tabcheck2"/>
|
|
|
+ <label class="custom-control-label" for="tabcheck2"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-03-s mr-2"></i>标签3</span>
|
|
|
+ <div class="input-group-append">
|
|
|
+ <div class="input-group-text border-left-0 bg-transparent">
|
|
|
+ <div class="custom-control custom-checkbox">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="tabcheck3"/>
|
|
|
+ <label class="custom-control-label" for="tabcheck3"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-04-s mr-2"></i>标签4</span>
|
|
|
+ <div class="input-group-append">
|
|
|
+ <div class="input-group-text border-left-0 bg-transparent">
|
|
|
+ <div class="custom-control custom-checkbox">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="tabcheck4"/>
|
|
|
+ <label class="custom-control-label" for="tabcheck4"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-05-s mr-2"></i>标签5</span>
|
|
|
+ <div class="input-group-append">
|
|
|
+ <div class="input-group-text border-left-0 bg-transparent">
|
|
|
+ <div class="custom-control custom-checkbox">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="tabcheck5"/>
|
|
|
+ <label class="custom-control-label" for="tabcheck5"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-06-s mr-2"></i>标签6</span>
|
|
|
+ <div class="input-group-append">
|
|
|
+ <div class="input-group-text border-left-0 bg-transparent">
|
|
|
+ <div class="custom-control custom-checkbox">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="tabcheck6"/>
|
|
|
+ <label class="custom-control-label" for="tabcheck6"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <div class="input-group bg-white shadow-inset-2">
|
|
|
+ <span class="form-control text-truncate text-truncate-lg"><i class="fas fa-circle tagcol-07-s mr-2"></i>标签7</span>
|
|
|
+ <div class="input-group-append">
|
|
|
+ <div class="input-group-text border-left-0 bg-transparent">
|
|
|
+ <div class="custom-control custom-checkbox">
|
|
|
+ <input type="checkbox" class="custom-control-input" id="tabcheck7"/>
|
|
|
+ <label class="custom-control-label" for="tabcheck7"></label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="mb-1">
|
|
|
+ <a href="#">编辑标签</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <div class="d-flex justify-content-center">
|
|
|
+ <ul class="pagination pagination-sm">
|
|
|
+ <li class="page-item disabled">
|
|
|
+ <a class="page-link" href="#" aria-label="Previous">
|
|
|
+ <span aria-hidden="true"><i class="fal fa-chevron-left"></i></span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li class="page-item active" aria-current="page">
|
|
|
+ <span class="page-link">
|
|
|
+ 1
|
|
|
+ <span class="sr-only">(current)</span>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
|
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
|
+ <li class="page-item">
|
|
|
+ <a class="page-link" href="#" aria-label="Next">
|
|
|
+ <span aria-hidden="true"><i class="fal fa-chevron-right"></i></span>
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </Fragment>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
- //组件即将要被挂在的时候执行的方法--
|
|
|
+ //组件即将要被挂在的时候执行的方法--去掉
|
|
|
componentDidMount(){
|
|
|
//逻辑代码可以写在mapDispathToProps里 this.props.方法
|
|
|
|