|
@@ -14,9 +14,11 @@ class TemplateItems extends React.Component {
|
|
|
super(props);
|
|
|
this.state = {
|
|
|
msg:'还没有保存模板',
|
|
|
- val:''
|
|
|
+ val:'',
|
|
|
+ height:''
|
|
|
}
|
|
|
this.$cont = React.createRef();
|
|
|
+ this.$conts = React.createRef();
|
|
|
this.$search = React.createRef();
|
|
|
this.genItems = this.genItems.bind(this);
|
|
|
this.templateSearch = this.templateSearch.bind(this);
|
|
@@ -25,18 +27,56 @@ class TemplateItems extends React.Component {
|
|
|
this.clear = this.clear.bind(this);
|
|
|
}
|
|
|
componentDidMount(){
|
|
|
+ const {admin} = this.props;
|
|
|
+ console.log(admin)
|
|
|
+
|
|
|
const height = getWindowInnerHeight()-195;
|
|
|
- this.$cont.current.style.height = height+"px";
|
|
|
+ // this.$conts.current.style.height = height+"px";
|
|
|
+ this.setState({
|
|
|
+ height:height
|
|
|
+ })
|
|
|
windowEventHandler('resize', ()=>{
|
|
|
- if(this.$cont.current){
|
|
|
+ if(this.$conts.current){
|
|
|
const height = getWindowInnerHeight()-195;
|
|
|
- this.$cont.current.style.height = height+"px";
|
|
|
+ // this.$conts.current.style.height = height+"px";
|
|
|
+ this.setState({
|
|
|
+ height:height
|
|
|
+ })
|
|
|
}
|
|
|
});
|
|
|
+ // if(admin){
|
|
|
+ // const heights = getWindowInnerHeight()-195;
|
|
|
+ // this.$conts.current.style.height = heights+"px";
|
|
|
+ // windowEventHandler('resize', ()=>{
|
|
|
+ // if(this.$conts.current){
|
|
|
+ // const height = getWindowInnerHeight()-195;
|
|
|
+ // this.$conts.current.style.height = height+"px";
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }else{
|
|
|
+ // const height = getWindowInnerHeight()-195;
|
|
|
+ // this.$cont.current.style.height = height/2+"px";
|
|
|
+ // windowEventHandler('resize', ()=>{
|
|
|
+ // if(this.$cont.current){
|
|
|
+ // const height = getWindowInnerHeight()-195;
|
|
|
+ // this.$cont.current.style.height = height/2+"px";
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // const heights = getWindowInnerHeight()-195;
|
|
|
+ // this.$conts.current.style.height = heights/2+"px";
|
|
|
+ // windowEventHandler('resize', ()=>{
|
|
|
+ // if(this.$conts.current){
|
|
|
+ // const height = getWindowInnerHeight()-195;
|
|
|
+ // this.$conts.current.style.height = height/2+"px";
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+
|
|
|
+ // }
|
|
|
}
|
|
|
- genItems() {
|
|
|
+ genItems(items,flg) {
|
|
|
const Items = [];
|
|
|
- this.props.items.forEach((v,idx) => {
|
|
|
+ const {admin,adminItems,checkItemsAdmin} = this.props;
|
|
|
+ items.forEach((v,idx) => {
|
|
|
Items.push(
|
|
|
<TemplateItem
|
|
|
{...v}
|
|
@@ -47,13 +87,26 @@ class TemplateItems extends React.Component {
|
|
|
handleContentClick={this.props.handleContentClick}
|
|
|
handleTemplateDel={this.props.handleTemplateDel}
|
|
|
handleTitleChange={this.props.handleTitleChange}
|
|
|
+
|
|
|
+ admin={this.props.admin}
|
|
|
+ adminflg={flg}
|
|
|
+ checkItemsAdmin={checkItemsAdmin}
|
|
|
+ allCheckShowAdmin={this.props.allCheckShowAdmin}
|
|
|
/>
|
|
|
);
|
|
|
});
|
|
|
return Items;
|
|
|
}
|
|
|
getCheckIcon() {
|
|
|
- if (this.props.items.length == this.props.checkItems.length && this.props.checkItems.length != 0) {
|
|
|
+ const {admin,checkItems,items,checkItemsAdmin,adminItems} = this.props;
|
|
|
+ if(admin){
|
|
|
+ if (adminItems.length == checkItemsAdmin.length && checkItemsAdmin.length != 0) {
|
|
|
+ return check_right;
|
|
|
+ } else {
|
|
|
+ return check_circle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (items.length == checkItems.length && checkItems.length != 0) {
|
|
|
return check_right;
|
|
|
} else {
|
|
|
return check_circle;
|
|
@@ -83,16 +136,10 @@ class TemplateItems extends React.Component {
|
|
|
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(){
|
|
@@ -100,25 +147,25 @@ class TemplateItems extends React.Component {
|
|
|
this.setState({
|
|
|
val:''
|
|
|
})
|
|
|
-
|
|
|
this.$search.current.focus();
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- const { allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore } = this.props;
|
|
|
- // console.log(allCheckShow,7877877)
|
|
|
+ const { checkItemsAdmin,handleAllCheckboxAdmin,handleMangerTemplateAdmin,allCheckShowAdmin,admin,adminItems,allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore } = this.props;
|
|
|
+ const {height} = this.state
|
|
|
+ // console.log(checkItemsAdmin,7877877)
|
|
|
return (
|
|
|
- <div className={style.wrapper}>
|
|
|
- {
|
|
|
- items ? (allCheckShow ?
|
|
|
+ <div className={style.wrapper} >
|
|
|
+ {//管理员操作
|
|
|
+ adminItems&&admin ? (allCheckShowAdmin ?
|
|
|
<div className={style.wrapperTop}>
|
|
|
- <div className={style['check-wrap']} onClick={handleAllCheckbox}>
|
|
|
+ <div className={style['check-wrap']} onClick={handleAllCheckboxAdmin}>
|
|
|
<img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
|
|
|
</div>
|
|
|
- <span onClick={handleAllCheckbox}>全选</span>
|
|
|
- <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplate}>完成</span>
|
|
|
+ <span onClick={handleAllCheckboxAdmin}>全选</span>
|
|
|
+ <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplateAdmin}>完成</span>
|
|
|
{
|
|
|
- checkItems.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
|
|
|
+ checkItemsAdmin.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
|
|
|
<span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
|
|
|
}
|
|
|
</div> :
|
|
@@ -129,19 +176,75 @@ class TemplateItems extends React.Component {
|
|
|
<div className={style.search} onClick={this.templateSearch}>搜索</div>
|
|
|
</div>
|
|
|
{
|
|
|
- items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
|
|
|
+ adminItems.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplateAdmin}>管理</span>
|
|
|
+ }
|
|
|
+ </div>) : null
|
|
|
+ }
|
|
|
+ {//个人
|
|
|
+ items&&!admin ?
|
|
|
+ <div className={style.wrapperTop}>
|
|
|
+ <div className={style.templateSearch}>
|
|
|
+ <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>
|
|
|
+ </div> : null
|
|
|
+ }
|
|
|
+ {
|
|
|
+ <div className={style.comAdminWrp}>
|
|
|
+ <div className={style.tempLists} ref={this.$cont} style={{display:admin?'none':'block',height:height/2+'px'}}>
|
|
|
+ {//个人
|
|
|
+ allCheckShow&&!admin ?<div className={`${style.wrapperTop} ${style.wrapperTopM}`}>
|
|
|
+ <div className={style['check-wrap']} onClick={handleAllCheckbox}>
|
|
|
+ <img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
|
|
|
+ </div>
|
|
|
+ <span onClick={handleAllCheckbox}>全选</span>
|
|
|
+ <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplate}>完成</span>
|
|
|
+ {
|
|
|
+ checkItems.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
|
|
|
+ <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
|
|
|
+ }
|
|
|
+ </div>:null
|
|
|
+ }
|
|
|
+ {
|
|
|
+ items.length > 0&&!allCheckShow&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ this.genItems(items).length > 0?this.genItems(items): <Empty message={this.state.msg}></Empty>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div className={style.tempLists} ref={this.$conts} style={{height:admin?height+'px':height/2+'px'}}>
|
|
|
+ {//管理员
|
|
|
+ allCheckShowAdmin&&!admin ?<div className={`${style.wrapperTop} ${style.wrapperTopM}`}>
|
|
|
+ <div className={style['check-wrap']} onClick={handleAllCheckboxAdmin}>
|
|
|
+ <img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
|
|
|
+ </div>
|
|
|
+ <span onClick={handleAllCheckboxAdmin}>全选</span>
|
|
|
+ <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplateAdmin}>完成</span>
|
|
|
+ {
|
|
|
+ checkItems.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
|
|
|
+ <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
|
|
|
+ }
|
|
|
+ </div>:null
|
|
|
+ }
|
|
|
+ {
|
|
|
+ // adminItems.length > 0&&!admin&&!allCheckShowAdmin&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplateAdmin}>管理</span>
|
|
|
+ adminItems.length > 0&&!admin&&!allCheckShowAdmin&&<div>标准模板</div>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ this.genItems(adminItems,true).length > 0?this.genItems(adminItems,true): <Empty message={this.state.msg}></Empty>
|
|
|
}
|
|
|
- </div>) : <div style={{height:'36px'}}></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
}
|
|
|
- <div className={style.tempLists} ref={this.$cont}>
|
|
|
+ {/* <div className={style.tempLists} ref={this.$cont}>
|
|
|
{
|
|
|
this.genItems().length > 0?this.genItems(): <Empty message={this.state.msg}></Empty>
|
|
|
}
|
|
|
- {/* {//注释掉的暂时没有分也功能
|
|
|
+ {//注释掉的暂时没有分也功能
|
|
|
hasMore?<p onClick={()=>handleClickGetMore(current)} className={style.loadMore}>点击查看更多</p>:null
|
|
|
- } */}
|
|
|
-
|
|
|
- </div>
|
|
|
+ }
|
|
|
+ </div> */}
|
|
|
</div>
|
|
|
)
|
|
|
}
|