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

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

import React , {Component} from 'react';
import ReactDOM from 'react-dom';
import { Radio } from 'antd';
// import { BaseShare } from 'joywok-business-components';
import BaseShare from 'joywok-material-components/lib/share/BaseShare';
import { CombineShareModal } from './CombineShareModal';
import { COMPONENT_DICT } from '../constants';
const RadioGroup = Radio.Group;

class UserScopeItem extends Component{
  constructor(props) {
    super(props);
    this.state = {
      radioValue: 1,               // Radio的value值    1:选择用户组   2:指定对象
    }
  }
  // Radio onChange
  selectRangeType(e){
    if(e.target.value==1){
      this.props.sharescope[this.props.groupIndex].type = 'usergroup';
      this.props.sharescope[this.props.groupIndex].objs = [];
    }else{
      this.props.sharescope[this.props.groupIndex].type = 'obj';
      this.props.sharescope[this.props.groupIndex].objs = [];
    }
    let data = {
      share_type: this.props.shareType,
      share_scope: this.props.sharescope
    }
    this.props.onChange(data);
    this.setState({
      radioValue: e.target.value,
    })
  }
  // 删除一组分享范围
  deleteGroup(){
    this.props.sharescope.splice(this.props.groupIndex,1);
    let data = {
      share_type: this.props.shareType,
      share_scope: this.props.sharescope
    }
    this.props.onChange(data);
  }
  // 选择用户组对象选择器调用
  selectGroup(){
    let self = this;
    let params = {
      title: this.props.groupItem.type == "usergroup" ? COMPONENT_DICT('lable.business.userscope.add.scope') : COMPONENT_DICT('lable.business.userscope.add.obj'),
      objTypes: this.props.groupItem.type == "usergroup" ? 'usergroup' : 'all',
      searchInput: true,
      select: this.props.groupItem.objs,
      searchUrl: this.props.groupItem.type == "usergroup" ? '/api/usergroups?s={s}' : '/api/suggestion/searchobjs?op=1&s={s}&type=15'
    }
    let a = CombineShareModal(params);
    a.events.on('save', function (objs) {
      self.props.sharescope[self.props.groupIndex].objs = objs;
      let data = {
        share_type: self.props.shareType,
        share_scope: self.props.sharescope
      }
      self.props.onChange(data);
    })
  }
  // BaseShare onchange
  BaseShareChange(data){
    this.props.sharescope[this.props.groupIndex].objs = data;
    let datas = {
      share_type: this.props.shareType,
      share_scope: this.props.sharescope
    }
    this.props.onChange(datas);
  }
  render(){
    return(
      <div className="add-range-share ">
        <RadioGroup onChange={(e)=>this.selectRangeType(e)} value={this.props.groupItem.objs&&this.props.groupItem.objs.length==0 && this.props.groupItem.type=="usergroup" ? (this.props.type=="default" ? 1:this.state.radioValue) : (this.props.groupItem.type=="obj" ? 2 : 1)}>
          <Radio value={1}>{COMPONENT_DICT('lable.business.userscope.select.scope')}</Radio>
          <Radio value={2}>{COMPONENT_DICT('lable.business.userscope.select.obj')}</Radio>
        </RadioGroup>
        <div className="app-base-share">
          <BaseShare
            className="jw-sharescope-baseshare"
            key={this.state.radioValue+this.props.index}
            url={this.props.groupItem.type == "usergroup" ? '/api/usergroups?s=' : '/api/suggestion/searchobjs?op=1&type=15&s='}
            placeholder={ this.props.groupItem.type == "usergroup" ? COMPONENT_DICT('lable.business.userscope.scope.placeholder') : COMPONENT_DICT('lable.business.userscope.obj.placeholder') }
            shareobj={ this.props.groupItem.objs || []}
            getPopupContainer={() => (document.body)}
            onChange={(data)=>this.BaseShareChange(data)}
          ></BaseShare>
          <div className="share-icon-w " onClick={()=>this.selectGroup()}>
            <i className={this.props.groupItem.type == "usergroup" ? "icon-share " : "icon-object"}></i>
          </div>
        </div>
        <i className={"icon-delete-group " + (this.props.sharescope.length==1 ? 'hide' : '')} onClick={()=>this.deleteGroup()}></i>
      </div>
    )
  }
}

export default UserScopeItem;