|
@@ -0,0 +1,221 @@
|
|
|
+import React, { PureComponent } from 'react';
|
|
|
+import { connect } from 'react-redux';
|
|
|
+// import { BrowserRouter, Route,Link } from 'react-router-dom';
|
|
|
+import { actionCreators } from './store';
|
|
|
+import { message,Input,List,Radio} from 'antd';
|
|
|
+
|
|
|
+const { Search } = Input;
|
|
|
+const error = (msg) => {
|
|
|
+ message.error(msg);
|
|
|
+};
|
|
|
+
|
|
|
+class lockType extends PureComponent {
|
|
|
+ render() {
|
|
|
+ const {loading,handlelockTypeSearch,data,lead,handleChangeLSGraido} = this.props;
|
|
|
+ let locksearchlist2 = data.toJS();
|
|
|
+ //console.log(locksearchlist2)
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {/* 借出、赠送、销售 */}
|
|
|
+ <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">
|
|
|
+ <Search
|
|
|
+ placeholder="搜索联系人(姓名、手机、QQ、公司名称)"
|
|
|
+ onSearch={value => handlelockTypeSearch(value)}
|
|
|
+ onKeyUp={(e) => handlelockTypeSearch(e.target.value,'keyup')}
|
|
|
+ loading={loading}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {/* <div className="ml-4 mr-4 alert alert-warning">暂时没有搜索的数据</div> */}
|
|
|
+ <div className="p-4 border-top d-flex justify-content-center">
|
|
|
+ <Radio.Group buttonStyle="solid" onChange={(e) => handleChangeLSGraido(e)}value={lead}>
|
|
|
+ <Radio.Button value="lead">借出</Radio.Button>
|
|
|
+ <Radio.Button value="sale">销售</Radio.Button>
|
|
|
+ <Radio.Button value="give">赠送</Radio.Button>
|
|
|
+ </Radio.Group>
|
|
|
+ {/* <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="#3">赠送</a></li>
|
|
|
+ </ul> */}
|
|
|
+ </div>
|
|
|
+ <div className="modal-search-height border-top border-bottom">
|
|
|
+ <div className="slimScrol2 p-4 modal-search-result">
|
|
|
+ {
|
|
|
+ locksearchlist2.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <List.Item key={index}>
|
|
|
+ <div className="card p-3 width100" title="点击关联该联系人">
|
|
|
+ <div className="row"><div className="col-1 pr-0">{item.clientname}</div><div className="col-1 pr-0">{item.position}</div><div className="col-2 pr-0">{item.telephone}</div><div className="col-2 pr-0">{item.phone}</div><div className="col-4 pr-0">{item.companyname}</div><div className="col-auto ml-auto pl-0"><button className="btn btn-xs btn-outline-primary waves-effect waves-themed" value="a">选择ta</button></div></div>
|
|
|
+ </div>
|
|
|
+ </List.Item>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 升级软件锁 */}
|
|
|
+ <div className="modal fade" id="lokc-update" role="dialog" aria-hidden="true" data-backdrop="static">
|
|
|
+ <div className="modal-dialog modal-dialog-centered">
|
|
|
+ <div className="modal-content">
|
|
|
+ <div className="modal-header">
|
|
|
+ <h4 className="modal-title">升级软件锁</h4>
|
|
|
+ <button type="button" className="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true"><i className="fal fa-times"></i></span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div className="modal-body">
|
|
|
+ <div className="form-group">
|
|
|
+ <label className="form-label">新增产品</label>
|
|
|
+ {/* <label className="form-label" for="example-datec">新增产品</label> */}
|
|
|
+ <select className="form-control" id="example-datec">
|
|
|
+ <option>重庆养护(营改增)</option>
|
|
|
+ <option>广东业主专业(新定额)</option>
|
|
|
+ <optgroup label="广东业主专业(新定额)">
|
|
|
+ <option>广东业主专业(新定额)</option>
|
|
|
+ </optgroup>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="modal-footer">
|
|
|
+ <button type="button" className="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
|
|
|
+ <button type="button" className="btn btn-primary waves-effect waves-themed">确认升级</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 更换软件锁 */}
|
|
|
+ <div className="modal fade" id="lokc-replace" role="dialog" aria-hidden="true" data-backdrop="static">
|
|
|
+ <div className="modal-dialog modal-dialog-centered">
|
|
|
+ <div className="modal-content">
|
|
|
+ <div className="modal-header">
|
|
|
+ <h4 className="modal-title">更换软件锁</h4>
|
|
|
+ <button type="button" className="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true"><i className="fal fa-times"></i></span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div className="modal-body">
|
|
|
+ <div className="form-group">
|
|
|
+ <label className="form-label">新锁号</label>
|
|
|
+ <input className="form-control" id="example-date" type="text"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="modal-footer">
|
|
|
+ <button type="button" className="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
|
|
|
+ <button type="button" className="btn btn-primary waves-effect waves-themed">确认更换</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 收回软件锁 */}
|
|
|
+ <div className="modal fade" id="add-retrieve" role="dialog" aria-hidden="true" data-backdrop="static">
|
|
|
+ <div className="modal-dialog modal-dialog-centered">
|
|
|
+ <div className="modal-content">
|
|
|
+ <div className="modal-header">
|
|
|
+ <h4 className="modal-title">确认收回</h4>
|
|
|
+ <button type="button" className="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true"><i className="fal fa-times"></i></span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div className="modal-body">
|
|
|
+ 收回锁号 <b>HNYH-0654</b>
|
|
|
+ </div>
|
|
|
+ <div className="modal-footer">
|
|
|
+ <button type="button" className="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
|
|
|
+ <button type="button" className="btn btn-primary waves-effect waves-themed">确认收回</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 备注 */}
|
|
|
+ <div className="modal fade" id="add-remark" role="dialog" aria-hidden="true" data-backdrop="static">
|
|
|
+ <div className="modal-dialog modal-dialog-centered">
|
|
|
+ <div className="modal-content">
|
|
|
+ <div className="modal-header">
|
|
|
+ <h4 className="modal-title">备注信息</h4>
|
|
|
+ <button type="button" className="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true"><i className="fal fa-times"></i></span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div className="modal-body">
|
|
|
+ <div className="form-group">
|
|
|
+ <label className="form-label">备注</label>
|
|
|
+ <textarea className="form-control" id="example-textarea" rows="3" placeholder="填写详细服务内容"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="modal-footer">
|
|
|
+ <button type="button" className="btn btn-secondary waves-effect waves-themed" data-dismiss="modal">关闭</button>
|
|
|
+ <button type="button" className="btn btn-primary waves-effect waves-themed">确认添加</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染完成时调回
|
|
|
+ componentDidMount() {
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let delaySwitch = null;
|
|
|
+
|
|
|
+const mapStateToProps = (state) => {
|
|
|
+ return {
|
|
|
+ loading: state.getIn(['locktype', 'loading']),
|
|
|
+ data: state.getIn(['locktype', 'data']),
|
|
|
+ locksearchValue: state.getIn(['locktype', 'locksearchValue']),
|
|
|
+ lead: state.getIn(['locktype', 'lead']),
|
|
|
+ sale: state.getIn(['locktype', 'sale']),
|
|
|
+ give: state.getIn(['locktype', 'give']),
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 要改变store里的内容需要调用dispatch方法
|
|
|
+const mapDispathToProps = (dispatch) => {
|
|
|
+ return {
|
|
|
+ handlelockTypeSearch(locksearchValue,keyup) {
|
|
|
+ //借出、销售、赠送搜索
|
|
|
+ dispatch(actionCreators.changeLoading());
|
|
|
+ // 获得用户需要的数据并更新渲染页面
|
|
|
+ //dispatch(actionCreators.getSearchlist(locksearchValue));
|
|
|
+ if(keyup === 'keyup'){
|
|
|
+ if(delaySwitch != null){
|
|
|
+ clearTimeout(delaySwitch);
|
|
|
+ }
|
|
|
+ delaySwitch = setTimeout(() => {
|
|
|
+ dispatch(actionCreators.getSearchlist(locksearchValue));
|
|
|
+ },350);
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ dispatch(actionCreators.getSearchlist(locksearchValue));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //借出选中返回值
|
|
|
+ handleChangeLSGraido(e) {
|
|
|
+ dispatch(actionCreators.changeLead(e.target.value));
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default connect(mapStateToProps, mapDispathToProps)(lockType);
|
|
|
+
|