joywok-material-components/components/sharescope/UserScope.js

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

/**
 *
 * @api {} ShareScope
 * @apiName   ShareScope
 * @apiGroup 组件使用
 *
 * @apiParam {String } flag  组件样式  special:特殊样式（Beans） 如果没有flag，样式则为应用管理分享范围的样式
 * @apiParam {String } data  {share_type: 1,share_scope:[]}  share_type:分享范围类型   1：所有   2：自定义  share_scope:分享范围数据
 * @apiParam {Bool } onlyCustom  只支持自定义， true 只支持自定义， false 同时支持 所有 和 自定义， 默认为 false 同时支持
 * @apiParam {Function } onChange  数据变化的回调事件（传回Array）
 *
 * @apiSuccessExample {json} 使用案例:
 * import ShareScope from  'joywok-material-components/lib/sharescope/UserScope';
 * let item = {
   share_type: 2,
   share_scope: [
   {
     "type":"obj",
     "objs":[{
       "id":"S5dv0jysN2j9IR8R",
       "type":"jw_n_role",
       "name":"角色1"
     }]
   },
   {
     "type":"usergroup",
     "objs":[{
       "id":"c0a69feaddb031d72c7b3909c6c14257",
       "type":"jw_n_usergroup",
       "name":"用户组1",
     }]
   }
 ]}
 * <ShareScope
   type="default"
   data= { item }
   className={item.share_type==2 ? '' : 'hide'}
   onChange={(data)=>self.changeShare(data)}
  />
 *
 *
 */
// sharescope={item['share_scope']&&item['share_scope'].length==0 ? [] : item['share_scope']}


import React , {Component} from 'react';
import ReactDOM from 'react-dom';
import Select from 'joywok-material-components/lib/select';
import MenuItem from '@material-ui/core/MenuItem';
import UserScopeItem from './UserScopeItem';
import { COMPONENT_DICT } from '../constants';
require('./style/userscope.css');

class UserScope extends Component{
  constructor(props) {
    super(props);
    let onlyCustom = props.onlyCustom==true?true:false;
    this.state = {
      share_type: onlyCustom==true?2:1,
      // 只允许自定义，不能选择全部
      onlyCustom: onlyCustom
    }
  }
  // 再添加一组
  addGroup(){
    this.props.data.share_scope.push({type: 'usergroup',objs:[]});
    let data = {
      share_type: this.state.share_type*1,
      share_scope: this.props.data.share_scope
    }
    this.props.onChange(data);
    // this.props.onChange(this.props.data.share_scope);
  }
  // AppShareItem onChange
  groupChange(data){
    this.props.onChange(data);
  }
  // 更换分享范围类型
  changeScopeType(e){
    console.log('changeScopeType:',e.target.value)
    let data = {
      share_type: e.target.value,
      share_scope: this.props.data.share_scope.length==0&&e.target.value==2 ? [{type: "usergroup", objs: []}] : this.props.data.share_scope
    }
    this.setState({
      share_type: e.target.value
    },()=>this.props.onChange(data))
  }
  componentDidMount(){
    this.setState({
      share_type: this.props.data.share_type
    })
  }
  componentWillReceiveProps(newP){
    console.log('componentWillReceiveProps newP:',newP)
    if(newP.data==undefined) return;
    let changeData = {};
    if(newP.data.share_type != this.state.share_type){
      changeData.share_type = newP.data.share_type;
    }
    if(newP.data.share_scope != this.state.share_scope){
      changeData.share_scope = newP.data.share_scope;
    }
    if(JSON.stringify(changeData)!='{}'){
      this.setState(changeData)
    }
  }
  render() {
    let self = this;
    let data = this.props.data;
    if(data==undefined){
      data = {}
    }
    let shareScope = data.share_scope;
    if(data.share_scope.length==0){
      data.share_scope = [{type: 'usergroup',objs:[]}]
    }
    let curShareType = this.state.share_type*1;
    // console.log("shareScope:::::",shareScope,this.props)
    return (
      <div>
        {
          this.state.onlyCustom==true ? '' :
          <Select
            className={"jw-scope-select "}
            value={curShareType}
            onChange={(e)=>this.changeScopeType(e)}
          >
            <MenuItem className="jw-scope-dropdown" value={1}>{COMPONENT_DICT('label.business.userscope.all')}</MenuItem>
            <MenuItem className="jw-scope-dropdown" value={2}>{COMPONENT_DICT('label.business.userscope.custom.scope')}</MenuItem>
          </Select>
        }
        
        <div className={ "jw-user-scope " + (this.props.flag&&this.props.flag=="special" ? 'jw-user-scope-special ' : '') + this.props.className }>
          <div className="app-range-c">
            <div className={"app-range-share " + (curShareType == 1 ? 'hide' : '')}>
            {/* <div className={"app-range-share " }> */}
              {
                _.map(shareScope,function(item,index){
                  return <UserScopeItem shareType={self.state.share_type} key={index} type={self.props.type&&self.props.type} flag={self.props.flag&&self.props.flag} index={index} sharescope={shareScope} groupItem={item} groupIndex={index} onChange={(data)=>self.groupChange(data)}/>
                })
              }
              <div className="add-group-btn-w">
                <button className="add-group-btn" onClick={()=>this.addGroup()}>
                  <i className="icon-add-item"></i>
                  <span>{COMPONENT_DICT('label.business.userscope.add.group')}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default UserScope;