|
|
@@ -3,6 +3,7 @@ import React from "react"
|
|
|
import style from "./index.less"
|
|
|
import TemplateItem from './TemplateItem'
|
|
|
import check_circle from './TemplateItem/img/check-circle.png';
|
|
|
+import delIcon from '@common/images/del_nor.png';
|
|
|
import check_right from './TemplateItem/img/check-right.png';
|
|
|
import Empty from '@components/Empty';
|
|
|
import {windowEventHandler,getWindowInnerHeight} from '@utils/tools'
|
|
|
@@ -11,17 +12,24 @@ import {windowEventHandler,getWindowInnerHeight} from '@utils/tools'
|
|
|
class TemplateItems extends React.Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
+ this.state = {
|
|
|
+ msg:'还没有保存模板',
|
|
|
+ val:''
|
|
|
+ }
|
|
|
this.$cont = React.createRef();
|
|
|
this.$search = React.createRef();
|
|
|
this.genItems = this.genItems.bind(this);
|
|
|
this.templateSearch = this.templateSearch.bind(this);
|
|
|
+ this.handleEnter = this.handleEnter.bind(this);
|
|
|
+ this.handleChange = this.handleChange.bind(this);
|
|
|
+ this.clear = this.clear.bind(this);
|
|
|
}
|
|
|
componentDidMount(){
|
|
|
- const height = getWindowInnerHeight()-226;
|
|
|
+ const height = getWindowInnerHeight()-235;
|
|
|
this.$cont.current.style.height = height+"px";
|
|
|
windowEventHandler('resize', ()=>{
|
|
|
if(this.$cont.current){
|
|
|
- const height = getWindowInnerHeight()-226;
|
|
|
+ const height = getWindowInnerHeight()-235;
|
|
|
this.$cont.current.style.height = height+"px";
|
|
|
}
|
|
|
});
|
|
|
@@ -54,7 +62,48 @@ class TemplateItems extends React.Component {
|
|
|
templateSearch(){
|
|
|
const {templateSearch} = this.props
|
|
|
templateSearch(this.$search.current.value)
|
|
|
+ if(this.$search.current.value.trim()){
|
|
|
+ this.setState({
|
|
|
+ msg:'暂无模板信息'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.setState({
|
|
|
+ msg:'还没有保存模板'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleEnter(e){
|
|
|
+ if(e.keyCode==13){
|
|
|
+ this.templateSearch();
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ handleChange(){
|
|
|
+ const value = (this.$search.current.value).substring(0,30);
|
|
|
+ // this.$search.current.value = value
|
|
|
+ setTimeout(() => {
|
|
|
+
|
|
|
+ this.setState({
|
|
|
+ val: value
|
|
|
+ });
|
|
|
+ }, 30);
|
|
|
+ // if (value === '') {
|
|
|
+ // this.setState({
|
|
|
+ // val: ''
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ clear(){
|
|
|
+ this.$search.current.value = '';
|
|
|
+ this.setState({
|
|
|
+ val:''
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$search.current.focus();
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
const { allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore } = this.props;
|
|
|
// console.log(allCheckShow,7877877)
|
|
|
@@ -75,25 +124,18 @@ class TemplateItems extends React.Component {
|
|
|
</div> :
|
|
|
<div className={style.wrapperTop}>
|
|
|
<div className={style.templateSearch}>
|
|
|
- <input ref={this.$search} type="text" />
|
|
|
- <div className={style.search} onClick={this.templateSearch}>检索</div>
|
|
|
+ <input placeholder="模板搜索" maxLength="30" ref={this.$search} type="text" onInput={this.handleChange} onPropertyChange={this.handleChange} onKeyUp={this.handleEnter}/>
|
|
|
+ {this.state.val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
|
|
|
+ <div className={style.search} onClick={this.templateSearch}>搜索</div>
|
|
|
</div>
|
|
|
{
|
|
|
items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
|
|
|
}
|
|
|
</div>) : <div style={{height:'36px'}}></div>
|
|
|
- // <div className={style.emptyWrap}>
|
|
|
- // <div className={`${style.templateSearch}`}>
|
|
|
- // <input ref={this.$search} type="text" />
|
|
|
- // <div className={style.search} onClick={this.templateSearch}>检索</div>
|
|
|
-
|
|
|
- // </div>
|
|
|
- // <span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
|
|
|
- // </div>
|
|
|
}
|
|
|
<div className={style.tempLists} ref={this.$cont}>
|
|
|
{
|
|
|
- this.genItems().length > 0?this.genItems(): <Empty message={'还没有保存模板'}></Empty>
|
|
|
+ this.genItems().length > 0?this.genItems(): <Empty message={this.state.msg}></Empty>
|
|
|
}
|
|
|
{/* {//注释掉的暂时没有分也功能
|
|
|
hasMore?<p onClick={()=>handleClickGetMore(current)} className={style.loadMore}>点击查看更多</p>:null
|
luolei