joywok-material-components/components/teamscope/TeamScope.js

<h1 align="center"> Joywok Material Components </h1>

/**
 * Jw ShareScope 分享范围组件 
 * 使用场景：搭配 自定义用户组组件 使用
 * 功能描述：1、根据选择条件(所属团队、所属品牌、所属办公室、所属区域、所属地区、用户性别、用户类别、用户角色、用户岗位、职能等级、安全等级、指定用户)不同，
              显示出对应的“添加XX”，点击icon可以呼起对应的对象选择器或者下拉列表，进行数据回填；
           2、一条规则可以添加多个条件，可以新增多条规则；
 * 输入参数：1、otypeOptions：对象类型的option列表
           2、onChange：组件onChange事件
 * 输出参数：1、scope： 每个用户组设置的条件集合
 * author：zss
 */

 import React , {Component} from 'react';
 import AddRules from './AddRules.js';
 import JwDialog from './../dialog/index';
 import Button from './../button/index';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';

 class TeamScope extends Component{
   constructor(props) {
     super(props);
     this.state = {
       dataid: '',
       open: false
     }
   }
   // 样式处理  index: 要操作的条件索引   cls:需要改变样式的className  action：add：添加className  remove：移除className
   combineStyles(indexs,oldCls,action,newCls){
     let targetEle = $('.jw-share-scope').eq(indexs);
     if(action=="add"){
       targetEle.find(oldCls).addClass(newCls);
     }else{
       targetEle.find(oldCls).removeClass(newCls);
     }
   }
   // 新增规则
   addRules(){
     let self = this;
     $('.jw-share-scope .jw-share-delete-rules').removeClass('hide');
     this.props.scope.push([])
     self.props.onChange(self.props.scope);
   }
   // 规则的onChange事件
   rulesOnChange(){
     let self = this;
     console.log("self.props.scope:::::",self.props.scope)
     self.props.onChange(self.props.scope);
   }
   combineDelete(index){
     let self = this;
     self.props.onChange([[]]);
     this.combineStyles(index,'.jw-share-group .jw-share-add','remove','jw-share-add-other');
     this.combineStyles(index,'.jw-share-group .jw-share-and','add','hide');
     this.combineStyles(index,'.jw-share-group .jw-share-delete-cond','add','hide');
     this.combineStyles(index,'.jw-share-group .jw-share-select','remove','jw-share-select-other');
   }
   // 删除规则
   showDialog(index){
    // 原用户组删除规则时 不会弹确认框，此处也先按照原来的交互,直接删除规则就好
    this.setState({
     curIndex: index
    },()=>this.deleteRules())
    return;
     // this.setState({
     //   open: true,
     //   curIndex: index
     // })
   }
   deleteRules(){
     let self = this;
     if(this.props.scope.length!=0){
       this.props.scope.splice(this.state.curIndex,1);
       if(this.props.scope.length==1){
         $('.jw-share-scope .jw-share-delete-rules').addClass('hide');
       }
       self.props.onChange(self.props.scope);
     }
     this.setState({
       open: false,
     })
   }
   // 关闭弹框
   closeDialog(){
     this.setState({
       open: false
     })
   }
   render(){
     let self = this;
     let scope = this.props.scope&&this.props.scope.length==0 ? [[]] : this.props.scope;
     console.log("render-----::::",scope)
     return(
       <div className="jw-share-scope-w">
         {
            _.map(scope,function(item,index){
              return  <AddRules
                         rulesNum={index}
                         otypeOptions={self.props.otypeOptions}
                         deleteRules={()=>self.showDialog(index)}
                         onChange={()=>self.rulesOnChange()}
                         rule={item}
                         rulesLength={scope.length}
                       />
            })
         }
         <button className="jw-share-add-btn">
           <i className="icon-add-item"></i>
           <span className="jw-share-add-rules " onClick={()=>this.addRules()}>{i18n('btn.usergroup.add.rules')}</span>
         </button>
         <JwDialog
            open={this.state.open}
            onClose={()=>self.closeDialog()}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
          >
            <DialogTitle id="alert-dialog-title" className="jw-delete-rules-dialog">{i18n('tip.usergroup.delete.prompt')}</DialogTitle>
            <DialogContent>
              <DialogContentText id="alert-dialog-description">
                {i18n('label.delete.usergroup.tips').replace('{num}',Number(this.state.curIndex+1))}
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={()=>self.closeDialog()} color="primary">
                {i18n('btn.cancel')}
              </Button>
              <Button onClick={()=>self.deleteRules()} color="primary" autoFocus>
                {i18n('btn.remove')}
              </Button>
            </DialogActions>
          </JwDialog>
       </div>
     )
   }
 }

 export default TeamScope;