joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
122 lines (119 loc) • 5 kB
JavaScript
/**
* 自定义用户组 - 添加规则
*/
import React , {Component} from 'react';
import AddCond from './AddCond.js';
import request from './../utils/request';
class AddRules extends Component{
constructor(props) {
super(props);
this.state = {
// addBtnCls: 'hide', //添加条件按钮是否显示 "": 显示 hide: 隐藏
conditions: [], //点击添加按钮一次，新增一个条件
condIndex: 0, //添加条件时的索引
dropdownList: [], //办公室、品牌、职能等级、安全等级、用户性别下拉列表数据
}
}
// 样式处理 index: 要操作的条件索引 cls:需要改变样式的className action：add：添加className remove：移除className
combineStyles(indexs,oldCls,action,newCls){
let targetEle = $('.jw-share-scope').eq(this.props.rulesNum).find('.jw-share-group').eq(indexs);
if(action=="add"){
targetEle.find(oldCls).addClass(newCls);
}else{
targetEle.find(oldCls).removeClass(newCls);
}
}
// 条件被选中时调用
selectCond(e,indexs){
let self = this;
let targetEle = $('.jw-share-scope').eq(this.props.rulesNum).find('.jw-share-group').eq(indexs);
let data = _.findWhere(this.props.otypeOptions,{type:e.target.value});
let obj = {otype:e.target.value,objs:[]};
if(this.props.rule.length!=0){
this.props.rule[indexs]={};
}
this.props.rule[indexs] = obj;
if(indexs>0 && indexs == this.props.rule.length-1){
setTimeout(function(){
self.combineStyles(indexs,'.jw-share-delete-cond','add','jw-share-delete-cond-margin');
})
}
this.combineStyles(indexs,'.jw-share-add','add','jw-share-add-other');
this.combineStyles(indexs,'.jw-share-select','add','jw-share-select-other');
this.props.onChange(this.props.rule);
}
// 添加条件
addCond(){
this.props.rule.push({});
this.combineStyles(this.props.rule.length==0 ? this.state.condIndex : this.props.rule.length-2,'.jw-share-delete-cond','remove','jw-share-delete-cond-margin');
this.setState({
condIndex: this.state.condIndex + 1,
})
this.props.onChange(this.props.rule)
}
// 删除某个条件
deleteCond(indexs){
this.props.rule.splice(indexs,1);
// 如果删除的是最后一条数据，需要将页面恢复成原始的样子，隐藏掉BaseShare 且 和删除按钮
if(this.props.rule.length == 0){
this.combineStyles(indexs,'.jw-share-add','remove','jw-share-add-other');
this.combineStyles(indexs,'.jw-share-and','add','hide');
this.combineStyles(indexs,'.jw-share-delete-cond','add','hide');
this.combineStyles(indexs,'.jw-share-select','remove','jw-share-select-other');
this.setState({
condIndex:0
})
}
this.props.onChange(this.props.rule);
}
// 调用对象选择器回填数据
condOnChange(items,indexs){
if(items.length>0 && items[0] ){
let newValues = items&&items.length>0 ? items.map(function(item){
return _.extend(item,{ id: item.id||item.key,name: item.label||item.name})
}) : [];
this.props.rule[indexs].objs = newValues;
}else{
this.props.rule[indexs].objs = items.list ? _.union(items.list,this.props.rule[indexs].objs) :items ;
}
this.props.onChange(this.props.rule);
if(items.list){
this.setState({
dropdownList: items.list
})
}
}
render(){
let self = this;
let rule = this.props.rule.length==0 ? [{}] : this.props.rule;
return(
<div className="jw-share-scope">
<div className="jw-share-rules-w">
<div className="jw-share-rules-title">
<span>{i18n('label.usergroup.rules') + ' ' + Number(this.props.rulesNum+1)}</span>
</div>
{
_.map(rule,function(item,index){
return <AddCond
otypeOptions={self.props.otypeOptions}
condition = { item }
lastCondFlag = { rule.length == index + 1 ? true : false }
dropdownList = { JSON.parse(JSON.stringify(self.state.dropdownList)) }
onChange={(items,indexs)=>self.condOnChange(items,index)}
onSelect={(e,indexs)=>self.selectCond(e,index)}
onDeselect={(e,indexs)=>self.selectCond(e,index)}
deleteCond={(indexs)=>self.deleteCond(index)}
/>
})
}
<button className={ "jw-share-add-btn " } onClick={()=>this.addCond()}>
<i className="icon-add-item"></i>
<span className="jw-share-add-rules">{i18n('btn.usergroup.add.conditions')}</span>
</button>
<div className={"jw-share-delete-rules " + (this.props.rulesNum==0 && this.props.rulesLength==1 ? 'hide' : '')} onClick={this.props.deleteRules}></div>
</div>
</div>
)
}
}
export default AddRules;