joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
747 lines (740 loc) • 29.4 kB
JavaScript
/**
*
* @api {} 自定义用户组
* @apiName 自定义用户组
* @apiGroup 组件使用
*
* @apiParam { String } oid 对象id 比如是某个订阅号 或 某个应用下的自定义用户组
* @apiParam { String } otype 对象类别 比如是订阅号 subscription
* @apiParam { Bool } openExportDepts 是否开启导入团队的功能， true 开启 false 不开启, 默认 不开启
* @apiParam { Bool } openExportUsers 是否开启导入用户的功能， true 开启 false 不开启，默认 不开启
* @apiParam { String } className 自定义样式名
* @apiParam { function } onChange 数据变化后回调，会回传1个参数， onChange(usergroup) ,usergroup: 自定义用户组数据
*
* @apiSuccessExample {json} 使用案例:
*import { CustomUserGroup } from 'joywok-material-components'; //路径需要自行更改
<CustomUserGroup
oid={'xxxx'}
otype={'subscription'}
openExportDepts={true}
openExportUsers={true}
className=''
onChange={(usergroup)=>self.onChangeCustomGroup(usergroup)}
/>
*
*
*/
import React from 'react';
import ReactDOM from 'react-dom';
import request from '../utils/request';
import Button from './../button/index';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import AloneTip from './../tips/aloneTip';
import Menu from './../menu/customMenu';
import DialogFD from './../utils/Dialog';
import LoadingView from './../loading/horizontalLoading';
import SimpleDialog from './../dialog/simpleDialog';
import AddGroupDialog from './AddGroupDialog';
import AddUserGroup from './AddUserGroup';
import TeamScope from './../teamscope/TeamScope';
const curLang = (window.language || window.cur_lang) || 'zh';
require('./style/index.css');
class CustomUserGroup extends React.Component{
constructor(props) {
super(props);
let objectInfo = {
oid: props.oid || '',
otype: props.otype || ''
}
let defaultUserGroupData = {
name:'',
cid:''
}
this.state = _.extend({
loadingList:true, // 获取自定义用户组分组及自定义用户组列表
loadingDetail: true, // 获取自定义用户组详细信息
oid: '',
otype: '',
openExportDepts: false,
openExportUsers: false,
className: '',
addGroupDialog: false, //false:隐藏 true：显示
addUserGroupDialog: false, //false:隐藏 true：显示
objectInfo: $.extend(true,{},objectInfo),
defaultGroupData: $.extend(true,{},objectInfo),
defaultUserGroupData: $.extend(true,{},defaultUserGroupData),
// 用户组分组表单
groupData: $.extend(true,{},objectInfo),
// 用户组表单
userGroupData: $.extend(true,{},defaultUserGroupData),
// 用户组列表
usergroup_list: [],
// 用户组条件
conditions: [
// {
// "id": 0,
// "name": i18n('label.form.select.placeholder'), //'请选择'
// "type": "jw_select_please"
// },
// {
// "id": 1,
// "name": i18n('label.usergroup.belong.team'),
// "type": "jw_n_dept",
// "placeholder": i18n('label.usergroup.team.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&type=2&s=",
// },
// {
// "id": 2,
// "name": i18n('label.usergroup.belong.brand'),
// "type": "jw_n_brand",
// "placeholder": i18n('label.usergroup.brand.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=2048&s=",
// },
// {
// "id": 3,
// "name": i18n('label.usergroup.belong.office'),
// "type": "jw_n_office",
// "placeholder": i18n('label.usergroup.office.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=1024&s=",
// },
// {
// "id": 4,
// "name": i18n('label.usergroup.belong.area'),
// "type": "jw_n_region",
// "placeholder": i18n('label.usergroup.area.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=64&s=",
// },
// {
// "id": 5,
// "name": i18n('label.usergroup.location'),
// "type": "jw_n_area",
// "placeholder": i18n('label.usergroup.add.address'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&type=32&s=",
// },
// {
// "id": 6,
// "name": i18n('label.usergroup.sex'),
// "type": "jw_n_sex",
// "placeholder": i18n('label.usergroup.sex.placeholder'),
// "url": "",
// },
// {
// "id": 7,
// "name": i18n('label.usergroup.category'),
// "type": "jw_n_user_category",
// "placeholder": i18n('label.usergroup.category.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=16&s=",
// },
// {
// "id": 8,
// "name": i18n('label.usergroup.role'),
// "type": "jw_n_role",
// "placeholder": i18n('label.usergroup.role.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&type=8&s=",
// },
// {
// "id": 9,
// "name": i18n('label.usergroup.post'),
// "type": "jw_n_post",
// "placeholder": i18n('label.usergroup.post.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=4&s=",
// },
// {
// "id": 10,
// "name": i18n('label.console.iam.member.category'),
// "type": "jw_n_personnel_category",
// "placeholder": i18n('label.usergroup.add.personnel'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=128&s=",
// },
// {
// "id": 11,
// "name": i18n('label.usergroup.function'),
// "type": "jw_n_function_level",
// "placeholder": i18n('label.usergroup.function.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=512&s=",
// },
// {
// "id": 12,
// "name": i18n('label.usergroup.safety'),
// "type": "jw_n_safety_level",
// "placeholder": i18n('label.usergroup.safety.placeholder'),
// "url": "",
// },
// {
// "id": 13,
// "name": i18n('label.usergroup.user'),
// "type": "jw_n_user",
// "placeholder": i18n('label.usergroup.user.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&type=1&s=",
// },
// {
// "id": 14,
// "name": i18n('label.console.iam.blolegal'),
// "type": "jw_n_corporation",
// "placeholder": i18n('label.console.iam.add.blolegal'),
// "url": "/api/suggestion/searchobjs?op=1&pagesize=100&show_entry=0&type=16384&s=",
// },
// {
// "id": 15,
// "name": i18n('label.console.iam.personnel.group'),
// "type": "jw_n_personnel_group",
// "placeholder": i18n('label.console.iam.personnel.group.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&show_entry=0&type=32768&s=",
// },
// {
// "id": 16,
// "name": i18n('label.console.iam.assign.category'),
// "type": "jw_n_assign_category",
// "placeholder": i18n('label.console.iam.assign.category.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&show_entry=0&type=65536&s=",
// },
// {
// "id": 17,
// "name": i18n('label.console.usergroup.org.category'),
// "type": "jw_n_origanization",
// "placeholder": i18n('label.console.usergroup.org.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&show_entry=0&type=131072&s=",
// },
// {
// "id": 18,
// "name": i18n('label.console.usergroup.dept.category'),
// "type": "jw_n_teamtype",
// "placeholder": i18n('label.console.usergroup.dept.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&show_entry=0&type=256&s=",
// },
// {
// "id": 19,
// "name": i18n('label.console.iam.store.category'),
// "type": "jw_n_store_category",
// "placeholder": i18n('label.console.usergroup.store.placeholder'),
// "url": "/api/suggestion/searchobjs?op=1&show_entry=0&type=4096&s=",
// },
],
// 每组条件
// user_scope: [],
// 当前展开的菜单（展开的用户组分组）
openedMenuIDs: [],
// 选中的用户组id
selectedUserGroupID: '',
// 选中的用户组信息
usergroup_info:{}
}, props)
// console.log('this.props:',this.props);
}
// 用户组 选中
menuClick(childItem){
this.setState({
selectedUserGroupID: childItem&&childItem.id || ''
},()=>this.getUserGroupInfo())
}
// 展开 / 收起 用户组分组
toggleMenu(item){
let self = this;
let newIDs = this.state.openedMenuIDs;
if(_.indexOf(this.state.openedMenuIDs,item.id)==-1){
newIDs.push(item.id)
}else{
newIDs = _.filter(newIDs,function(i){return i != item.id})
}
self.setState({
openedMenuIDs: newIDs
})
}
// 关闭弹框
closeDialog(type){
if(type=='group'){
this.setState({
addGroupDialog: false
})
}else{
this.setState({
addUserGroupDialog: false
})
}
}
confirmDlg(title,content,agreeCallback){
let a = DialogFD({
app: window.dvaApp,
data: {
open: true,
title: title,
content: content,
actions: [
{
key: 'cancel', value: i18n('btn.cancel'), className: 'jw-portal-confirm-cancel'
}, {
key: 'agree', value: i18n("btn.sure"), className: 'jw-portal-confirm-sure'
}
],
onClose:()=>{
a.close();
}
},
component: SimpleDialog,
})
a.events.on('click', function (target, datas) {
if (datas['key'] == 'agree') {
a.close();
target.setState({open: false})
agreeCallback();
} else {
a.close();
target.setState({open: false})
}
})
a.events.on('cancel', function (target, datas) {
a.close();
target.setState({open: false})
})
}
// 用户组分组 添加
addGroup(){
this.setState({
addGroupDialog: true,
groupData: $.extend(true,{},this.state.defaultGroupData)
})
}
// 用户组分组 编辑/删除
groupActions(action,item){
let self = this;
if(action.key=='edit'){
this.setState({
addGroupDialog: true,
groupData: _.extend({},this.state.defaultGroupData,{id:item.id, name:item.name})
})
}else if(action.key=='delete'){
// '确认删除分组{ name }吗？其中的用户组也将同时被删除'
let delTip = i18n('label.usergroup.delete.grouping');
self.confirmDlg(
i18n('tip.usergroup.delete.prompt'), // '删除提示',
delTip.replace('{ name }',item.name),
()=>{
let url = '/api/customusergroup/'+item.id+'/class';
if(self.state.objectInfo.otype == 'raffle'){
url = '/api/raffleconsole/usergroupclass?id=' + item.id + '&oid=' + self.state.objectInfo.oid + '&utype=' + self.props.utype;
}
request(url, {
method: 'DELETE'
}).then((resp) => {
let data = resp.data;
if (data.JMStatus && data.JMStatus.code == 0) {
let groupList = self.state.usergroup_list;
groupList = _.filter(groupList,(group)=>{return group.id!=item.id})
let selectedUserGroupID = '';
if(groupList.length > 0){
groupList.map(function(item){
if(_.find(item.groups,{id:self.state.selectedUserGroupID})){
selectedUserGroupID = self.state.selectedUserGroupID;
}
})
}
self.setState({
usergroup_list: groupList,
selectedUserGroupID: selectedUserGroupID,
});
AloneTip({ type: 'success', duration: 2000, hasclose: false, autoHideDuration: 2000, message: i18n('label.form.del.success') }) //'删除成功'
} else {
// request中有错误提示
}
});
}
)
}
}
// 用户组分组 保存成功
addGroupDataSuccess(data){
this.closeDialog('group')
let groupList = this.state.usergroup_list;
// 编辑
if(this.state.groupData.id){
let editIndex = _.findIndex(groupList,{id:this.state.groupData.id});
if(editIndex==-1) return;
groupList[editIndex] = _.extend(groupList[editIndex],data)
// 新建
}else{
groupList.push(data);
}
this.setState({
usergroup_list: groupList
},()=>this.scrollToGroup(data))
}
// 用户组 添加
addUserGroup(data){
if(data){
this.setState({
addUserGroupDialog: true,
userGroupData: {name:'',cid:data.id}
})
}else{
this.setState({
addUserGroupDialog: true,
userGroupData: $.extend(true,{},this.state.defaultUserGroupData)
})
}
}
// 用户组 编辑/删除
usergroupActions(action,item){
let self = this;
if(action.key=='edit'){
this.setState({
addUserGroupDialog: true,
userGroupData: _.extend({},this.state.defaultUserGroupData,{id:item.id, name:item.name,cid:item.cid})
})
}else if(action.key=='delete'){
let delTip = i18n('label.usergroup.delete.group'); //'确认删除{ name }吗？'
self.confirmDlg(
i18n('tip.usergroup.delete.prompt'), //'删除提示',
delTip.replace('{ name }',item.name),
()=>{
let url = '/api/customusergroup/usergroup/'+item.id;
if(self.state.objectInfo.otype == 'raffle'){
url = '/api/raffleconsole/usergroup?id=' + item.id + '&oid=' + self.state.objectInfo.oid + '&utype=' + self.props.utype;
}
request(url, {
method: 'DELETE'
}).then((resp) => {
let data = resp.data;
if (data.JMStatus && data.JMStatus.code == 0) {
// 把列表中的该条用户组数据移除
let groupList = self.state.usergroup_list;
let curGroupClassIndex = _.findIndex(groupList,{id:item.cid})
if(curGroupClassIndex==-1) return;
if(!groupList[curGroupClassIndex]['groups']) return;
groupList[curGroupClassIndex]['groups'] = _.filter(groupList[curGroupClassIndex]['groups'],(tmp)=>{ return tmp.id!=item.id })
let newdata = {usergroup_list: groupList};
if(self.state.selectedUserGroupID == item.id){
newdata.selectedUserGroupID = '';
newdata.usergroup_info = {};
}
self.setState(newdata);
AloneTip({ type: 'success', duration: 2000, hasclose: false, autoHideDuration: 2000, message: i18n('label.form.del.success') }) // '删除成功'
} else {
// request中已有错误提示
}
});
}
)
}
}
// 用户组 保存成功
addUserGroupDataSuccess(data,groupData){
this.closeDialog('usergroup');
let self = this;
let usergroup_list = this.state.usergroup_list;
let id = groupData ? groupData.cid : this.state.userGroupData.cid;
let groupIndex = _.findIndex(usergroup_list,{id: id});
if(groupIndex==-1) return;
if(!usergroup_list[groupIndex].groups) usergroup_list[groupIndex].groups=[];
// 编辑
if(this.state.userGroupData.id){
let usergroupIndex = _.findIndex(usergroup_list[groupIndex].groups,{id:this.state.userGroupData.id});
if(usergroupIndex==-1) return;
usergroup_list[groupIndex].groups[usergroupIndex] = _.extend(usergroup_list[groupIndex].groups[usergroupIndex],data)
// 新建
}else{
usergroup_list[groupIndex].groups.push(data);
}
this.state.openedMenuIDs.push(data.cid);
// 只有新增的会默认选中，编辑的，不做选中操作
let params = {};
if(!this.state.userGroupData.id){
params.selectedUserGroupID = data.id;
params.usergroup_info = {};
}
this.setState(_.extend({
usergroup_list: usergroup_list,
openedMenuIDs: this.state.openedMenuIDs,
userGroupData: {
name: groupData.name,
cid: groupData.cid
}
},params),()=>{
if(params.selectedUserGroupID){
self.getUserGroupInfo()
}
self.scrollToGroup(data)
})
}
// 使用户组分组跳转到视野中
scrollToGroup(data){
setTimeout(()=>{
if($('#'+data.id).length==0) return;
// 如果元素在视野范围外，那么让页面滚动到露出该元素的位置
let curHeight = $('#'+data.id).offset().top;
if(($(window).scrollTop() + $(window).height())<curHeight){
$(document).scrollTop(curHeight)
}
})
}
// BaseShare onchange 改变已有对象
changeShare(data){
let curGroupInfo = this.state.usergroup_info;
curGroupInfo.scope = data;
this.setState({
usergroup_info: curGroupInfo
})
}
// 获取自定义用户组的详细信息
getUserGroupInfo(){
if(!this.state.selectedUserGroupID) return;
let self = this;
let url = '/api/customusergroup/usergroup/'+this.state.selectedUserGroupID;
if(self.state.objectInfo.otype == 'raffle'){
url = '/api/raffleconsole/usergroup?id=' + this.state.selectedUserGroupID;
}
request(url,{
method:"GET",
})
.then(function(resp){
let params = {loadingDetail:false}
if (resp.data &&resp.data.JMStatus && resp.data.JMStatus.code == 0) {
params.usergroup_info = resp.data.JMUsergroup||{};
}else{
// request 中对错误有输出，所以这里不需要再出错误提示
}
self.setState(params)
})
}
// 保存自定义用户组的范围
saveUserGroupScope(){
let self = this;
let newdata = this.state.usergroup_info.scope ? this.state.usergroup_info.scope : [];
let empty = false;
if(newdata.length>0){
_.each(newdata,(item)=>{
for(let i = 0; i <item.length; i++){
if(JSON.stringify(item[i]) == "{}") {
item.splice(i,1);
i--;
}else {
if(item[i].objs==undefined || (item[i].objs && item[i].objs.length==0)){
empty = true;
break;
}
}
}
})
}
if(empty==true){
let a = AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: i18n('tip.usergroup.save.check') }) //'请给每个条件选择对象后再保存'
return;
}
let saveData = [];
saveData = _.filter(newdata,(item)=>{
return item.length!=0
})
this.state.usergroup_info.scope = saveData;
this.setState({saving:true});
let params = this.state.usergroup_info;
let url = '/api/customusergroup/usergroup/'+this.state.usergroup_info.id;
if(self.state.objectInfo.otype == 'raffle'){
url = '/api/raffleconsole/usergroup';
params.utype = this.props.utype;
params.oid = self.state.objectInfo.oid;
}
request(url,{
method:"PUT",
body: JSON.stringify(params)
})
.then(function(resp){
let params = {
saving: false
}
if(resp.data &&resp.data.JMStatus && resp.data.JMStatus.code == 0){
let a = AloneTip({ type: 'success', duration: 2000, hasclose: false, autoHideDuration: 2000, message: i18n('label.save-success') }) //'保存成功'
}else{
// request 中对错误有输出，所以这里不需要再出错误提示
}
self.setState(params)
})
}
componentWillReceiveProps(nextProps){
let datas = nextProps;
this.setState(nextProps);
}
componentDidMount(){
let self = this;
let url = '/api/customusergroup/usergroupclasses';
let params = _.extend({show_members_numoptional: 0},this.state.objectInfo);
if(this.props.otype == "raffle"){
url = "/api/raffleconsole/usergroupclasses";
params.utype = this.props.utype;
}
// 获取自定义用户组分组及自定义用户组列表
request(url,{
method:"GET",
body: params
})
.then(function(resp){
if(resp.data&&resp.data.JMStatus && resp.data.JMStatus.errmemo){
// request 中对错误有输出，所以这里不需要再出错误提示
self.setState({
loadingList:false
})
}else if(resp.data){
let defaultUserGroupData = self.state.defaultUserGroupData;
let openedMenuIDs = [];
let selectedUserGroupID = '';
// 把那会来的数据更新到state中
if(resp.data.JMUsergroupclasses){
openedMenuIDs = resp.data.JMUsergroupclasses.length>0 ? [resp.data.JMUsergroupclasses[0].id] : [];
selectedUserGroupID = resp.data.JMUsergroupclasses.length>0 ?
(resp.data.JMUsergroupclasses[0].groups&&resp.data.JMUsergroupclasses[0].groups.length>0 ? resp.data.JMUsergroupclasses[0].groups[0].id : '') :
''
}
self.setState({
loadingList:false,
usergroup_list:resp.data.JMUsergroupclasses||[],
openedMenuIDs: openedMenuIDs,
selectedUserGroupID: selectedUserGroupID,
defaultUserGroupData: _.extend(defaultUserGroupData,{
cid: resp.data.JMUsergroupclasses.length>0 ? resp.data.JMUsergroupclasses[0].id : ''
})
})
// 获取选中的用户组的详细范围
if(selectedUserGroupID){
self.getUserGroupInfo()
}
}
})
let conditions = [
{
"id": 0,
"name": i18n('label.form.select.placeholder'), //'请选择'
"type": "jw_select_please"
},
]
request('/api/dict/choiceattrs',{
method:"GET",
}).then(function(resp){
// conditions.push(resp.data.JMAttrs)
self.setState({
conditions: conditions.concat(resp.data.JMAttrs)
})
})
}
combineLeft(){
if(this.state.usergroup_list.length==0){
return <div></div>
}
let self = this;
let openedMenuIDs = this.state.openedMenuIDs;
return <div>
{
_.map(this.state.usergroup_list,function(item,index){
let curmenushow = _.indexOf(openedMenuIDs,item.id)!=-1 ? true : false;
return <div className="usergroup-menu-list" key={index}>
<MenuItem onClick={(items)=>self.toggleMenu(item)} id={item.id}>
<span className={curmenushow ? "menu-show" : "menu-hide"}></span>
<span className="menu-name ellipsis">{item.name}</span>
{
// default_flag = 1 代表是默认生成的(系统的，系统的不允许编辑和删除)。0是新增的
item.default_flag*1==1 ?
<div className="usergroup-operation" onClick={(e)=>{e.stopPropagation()}}>
<i className="icon-add-usergroup" onClick={()=>self.addUserGroup(item)}></i>
<MoreVertIcon className={""}/>
</div> :
<div className="usergroup-operation" onClick={(e)=>{e.stopPropagation()}}>
<i className="icon-add-usergroup" onClick={()=>self.addUserGroup(item)}></i>
<Menu className="usergroup-manage-menu" options={[{key:'edit',value:i18n('btn.edit')},{key:'delete',value:i18n('btn.remove')}]} onChange={(action)=>self.groupActions(action,item)}></Menu>
</div>
}
</MenuItem>
{
item.groups&&item.groups.length>0 ?
<MenuList id={item.id} className={"child-menus " + (curmenushow ? '' : 'child-menus-hidden')} >
{_.map(item.groups,function(childItem,childIndex){
return <MenuItem key={childItem.id} id={childItem.id} onClick={()=>self.menuClick(childItem)} className={self.state.selectedUserGroupID==childItem.id ? 'jwm-usergroup-active' : ''} >
<span className="menu-name ellipsis">{childItem.name}</span>
<Menu options={[{key:'edit',value:i18n('btn.edit')},{key:'delete',value:i18n('btn.remove')}]} onChange={(action)=>self.usergroupActions(action,childItem)} onClick={(e)=>{e.stopPropagation()}}></Menu>
</MenuItem>
})}
</MenuList>
: ''
}
</div>
})
}
</div>
}
combineRight(){
let self = this;
// this.state.selectedUserGroupID = '';
let curGroupInfo = this.state.usergroup_info;
let user_scope = curGroupInfo.scope&&curGroupInfo.scope.length>0 ? curGroupInfo.scope : [[]];
let equalFlag = false;
return <div className="define-usergroup-right">
{
this.state.selectedUserGroupID=='' ?
<div className="usergroup-empty-page ">
<i className="icon-user-empty"></i>
<p className="usergroup-empty-desc1">{i18n('tip.usergroup.uncheck.prompt')} </p>
{
curLang == 'en' ? <p className="usergroup-empty-desc2">Click <span className="add-usergroup-btn1" onClick={()=>this.addUserGroup()}> here </span> to add a user group</p> : <p className="usergroup-empty-desc2">{i18n('tip.usergroup.click.here')}<span className="add-usergroup-btn1" onClick={()=>this.addUserGroup()}> {i18n('btn.usergroup.add')} </span>{i18n('label.usergroup.title')}</p>
}
</div> :
<div className="usergroup-right-content">
<div className="define-usergroup-title">
<span className="title-name ellipsis">{curGroupInfo.name||''}</span>
{
(this.state.saving==true||equalFlag==true) ?
<Button color="primary" className="usergroup-save" disabled>
{this.state.saving==true ? i18n('btn.saving'):i18n('btn.save')}
</Button> :
<Button color="primary" className="usergroup-save" onClick={()=>this.saveUserGroupScope()}>
{i18n('btn.save')}
</Button>
}
<Button color="primary" className="usergroup-view-member hide" >
查看人员
</Button>
</div>
<p className="user-obj-select-rules">{i18n('label.usergroup.rules.title')}</p>
<p className="user-obj-select-rules-desc">{i18n('label.usergroup.rules.details')}</p>
<TeamScope otypeOptions={this.state.conditions} scope={user_scope} onChange={(data)=>this.changeShare(data)} openExportDepts={this.state.openExportDepts} openExportUsers={this.state.openExportUsers}/>
</div>
}
</div>
}
render(){
let self = this;
let openedMenuIDs = this.state.openedMenuIDs;
// this.state.usergroup_list=[];
// loading 状态
if(this.state.loadingList==true){
return (
<div>
<div className="jw-m-define-usergroup">
<LoadingView />
</div>
</div>
)
}
// loading 结束
return (
<div>
<div className="jw-m-define-usergroup">
<div className="define-usergroup-left">
<Button color="primary" className="users-add-group-btn" onClick={()=>this.addGroup()}>
+ {i18n('label.usergroup.add.groupclass')}
</Button>
<Button color="primary" className="users-add-usegroup-btn" onClick={()=>this.addUserGroup()}>
+ {i18n('label.usergroup.add.group')}
</Button>
{
this.combineLeft()
}
</div>
<div className="define-usergroup-line"></div>
{
this.combineRight()
}
</div>
<AddGroupDialog open={this.state.addGroupDialog} data={this.state.groupData} utype={this.props.utype} onSubmitSuccess={(data)=>{ self.addGroupDataSuccess(data) }} onClose={()=>this.closeDialog('group')}/>
<AddUserGroup open={this.state.addUserGroupDialog} data={this.state.userGroupData} utype={this.props.utype} groupClasses={this.state.usergroup_list} objectInfo={this.state.objectInfo} onSubmitSuccess={(data,groupData)=>this.addUserGroupDataSuccess(data,groupData)} onClose={()=>this.closeDialog('usergroup')}/>
</div>)
}
}
export default CustomUserGroup;