|
@@ -9,7 +9,10 @@ import tempTip from './TemplateItem/img/tempTip.png';
|
|
|
import tempTrd from './TemplateItem/img/tempTrd.png';
|
|
|
import tmpAllCircle from './TemplateItem/img/tmpAllCircle.png';
|
|
|
import tmpAllRight from './TemplateItem/img/tmpAllRight.png';
|
|
|
+import floderR from './TemplateItem/img/floderR.png';
|
|
|
+import floderD from './TemplateItem/img/floderD.png';
|
|
|
import Empty from '@components/Empty';
|
|
|
+import $ from 'jquery';
|
|
|
import {windowEventHandler,getWindowInnerHeight} from '@utils/tools'
|
|
|
|
|
|
class TemplateItems extends React.Component {
|
|
@@ -30,6 +33,7 @@ class TemplateItems extends React.Component {
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
|
this.clear = this.clear.bind(this);
|
|
|
this.showTipContent = this.showTipContent.bind(this);
|
|
|
+ this.getFloderLis = this.getFloderLis.bind(this);
|
|
|
}
|
|
|
componentDidMount(){
|
|
|
const height = getWindowInnerHeight()-195;
|
|
@@ -44,6 +48,16 @@ class TemplateItems extends React.Component {
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
+ $(document).click((event) => {
|
|
|
+ let _del = $('#floderAction')[0]; // 弹窗
|
|
|
+ let _dels = $(event.target).attr("id"); // 触发弹窗列表
|
|
|
+ if (_del) {//onMousedown的目标为滚动条时,删除弹窗不关闭
|
|
|
+ if (!event.target.isEqualNode(_del) && event.target.parentNode != _del &&_dels != 'floderActionBtn') {
|
|
|
+ this.floderAction(false,'none')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
}
|
|
|
showTipContent(){
|
|
|
let show = this.state.showTipContent
|
|
@@ -51,9 +65,89 @@ class TemplateItems extends React.Component {
|
|
|
showTipContent:!show
|
|
|
})
|
|
|
}
|
|
|
+ floderSlide(e,item){
|
|
|
+ const {floderSlide} = this.props
|
|
|
+ if(!item.templateInfo){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $(e.target).next().slideToggle()
|
|
|
+ let domLis = $(e.target).parent().siblings()
|
|
|
+ for(let i = 0;i < domLis.length;i++){
|
|
|
+ let tmpD = domLis[i]
|
|
|
+ $(tmpD).children().eq(1).slideUp()
|
|
|
+ }
|
|
|
+ floderSlide(item.id)
|
|
|
+ }
|
|
|
+ floderAction(e,id){
|
|
|
+ e&&e.stopPropagation()
|
|
|
+ const {floderAction} = this.props;
|
|
|
+ floderAction(id)
|
|
|
+ }
|
|
|
genItems(items,flg) {
|
|
|
const Items = [];
|
|
|
- const {admin,adminItems,checkItemsAdmin} = this.props;
|
|
|
+ const {admin,checkItems,allCheckShow,handleContentClick,handleTemplateDel,handleTitleChange,checkItemsAdmin,allCheckShowAdmin} = this.props;
|
|
|
+ items.forEach((v,idx) => {
|
|
|
+ Items.push(
|
|
|
+ <TemplateItem
|
|
|
+ {...v}
|
|
|
+ key={v.id}
|
|
|
+ idx={idx}
|
|
|
+ checkItems={checkItems}
|
|
|
+ allCheckShow={allCheckShow}
|
|
|
+ handleContentClick={handleContentClick}
|
|
|
+ handleTemplateDel={handleTemplateDel}
|
|
|
+ handleTitleChange={handleTitleChange}
|
|
|
+
|
|
|
+ admin={admin}
|
|
|
+ adminflg={flg}
|
|
|
+ checkItemsAdmin={checkItemsAdmin}
|
|
|
+ allCheckShowAdmin={allCheckShowAdmin}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ });
|
|
|
+ return Items;
|
|
|
+ }
|
|
|
+ floderRename(e){
|
|
|
+ e.stopPropagation()
|
|
|
+ this.props.floderAction(false,'none')
|
|
|
+ this.props.floderRename()
|
|
|
+ }
|
|
|
+ floderDelete(e){
|
|
|
+ e.stopPropagation()
|
|
|
+ this.props.floderAction(false,'none')
|
|
|
+ this.props.floderDelete()
|
|
|
+ }
|
|
|
+ genAdminItems(items,flg) {
|
|
|
+ const Floder=[],Items = [];
|
|
|
+ const {admin,checkItemsAdmin} = this.props;
|
|
|
+ for(let i = 0;i < items.length;i++){
|
|
|
+ let tmpItm = items[i]
|
|
|
+ Floder.push(
|
|
|
+ <div className={style.floderPart}>
|
|
|
+ <div className={style.floderPartFl} onClick={(e)=>this.floderSlide(e,tmpItm)}>
|
|
|
+ <img src={tmpItm.slide == 1?floderD:floderR} className={style.floderRD}/>
|
|
|
+ {tmpItm.name}
|
|
|
+ <span className={`${style.floderPartAction}`} id="floderActionBtn" onClick={(e)=>{this.floderAction(e,tmpItm.id)}}>...</span>
|
|
|
+ {tmpItm.action == 1&&<div className={style.floderAction} id="floderAction">
|
|
|
+ <p onClick={(e)=>{this.floderRename(e)}}>重命名文件夹</p>
|
|
|
+ <p onClick={(e)=>{this.floderDelete(e)}}>删除文件夹</p>
|
|
|
+ </div>}
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ tmpItm.templateInfo&&tmpItm.templateInfo.length>0&&<div className={style.floderPartFr}>
|
|
|
+ {
|
|
|
+ this.getFloderLis(tmpItm.templateInfo,flg)
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return Floder
|
|
|
+ }
|
|
|
+ getFloderLis(items,flg){//文件夹内的模板明细
|
|
|
+ const Items = [];
|
|
|
+ const {admin,checkItemsAdmin} = this.props;
|
|
|
items.forEach((v,idx) => {
|
|
|
Items.push(
|
|
|
<TemplateItem
|
|
@@ -223,9 +317,9 @@ class TemplateItems extends React.Component {
|
|
|
</div>
|
|
|
}
|
|
|
{
|
|
|
- <div style={{height:height-52+'px',overflow:'auto'}}>
|
|
|
+ <div style={{height:height-54+'px',overflow:'auto'}}>
|
|
|
{
|
|
|
- selectTemp==1&&this.genItems(items).length > 0?this.genItems(items):selectTemp==2&&this.genItems(adminItems,true).length > 0?this.genItems(adminItems,true): <Empty message={this.state.msg}></Empty>
|
|
|
+ selectTemp==1&&this.genItems(items).length > 0?this.genItems(items):selectTemp==2&&this.genAdminItems(adminItems,true).length > 0?this.genAdminItems(adminItems,true): <Empty message={this.state.msg}></Empty>
|
|
|
}
|
|
|
</div>
|
|
|
}
|
|
@@ -233,7 +327,7 @@ class TemplateItems extends React.Component {
|
|
|
{
|
|
|
admin&&<div className={style.tempLists} ref={this.$conts} style={{border:admin?'0':'1px solid #EAEDF1'}}>
|
|
|
<div style={{height:height+'px',overflow:'auto'}}>
|
|
|
- {this.genItems(adminItems,true).length > 0?this.genItems(adminItems,true): <Empty message={this.state.msg}></Empty>}
|
|
|
+ {this.genAdminItems(adminItems,true).length > 0?this.genAdminItems(adminItems,true): <Empty message={this.state.msg}></Empty>}
|
|
|
</div>
|
|
|
</div>
|
|
|
}
|