joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
359 lines (356 loc) • 15.3 kB
JavaScript
/**
* 自定义用户组 - 添加条件
*/
import React , {Component} from 'react';
// import { Select } from 'antd';
import request from './../utils/request';
import BaseShare from './../share/BaseShare';
import { CombineShareModal } from './../sharescope/CombineShareModal';
import Select from './../select/index';
import SelectMultple from './../select/multiple';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from './../menu/customMenu';
import AloneTip from './../tips/aloneTip';
import UploadDialog from './UploadDialog';
import NotFoundDialog from './NotFoundDialog';
import UploadExcel from './UploadExcel';
// const Option = Select.Option;
const curLang = (window.language || window.cur_lang) || 'zh';
class AddCond extends Component{
constructor(props) {
super(props);
this.state = {
business_role:[],
dropdownList:[],
pageno: 0,
listNum: 0,
loadMoreText: i18n('btn.load-more'),
radomId: Math.ceil(Math.random()*10000),
exporting: false,
bad_data:[],
fine_data:[],
show_not_found: false
}
}
// select onChange
selectOnChange(value){
}
// 加载更多
combineLoadMore(s,num,text){
if(s!="jw_n_sex" && num>20 && $(".jw-sharescope-select.jw-select-down div").hasClass('jw-scope-load-more')==false){
$(".jw-sharescope-select.jw-select-down div").append("<div class=\"jw-scope-load-more\">"+text+"</div>")
// if(text=="加载更多"){
// let top = $(".jw-sharescope-select.jw-select-down")[0].style.top.replace('px','')-38 + 'px';
// $(".jw-sharescope-select.jw-select-down").css("top",top);
// }
}
}
removeLoadMore(){
$(".jw-sharescope-select.jw-select-down .jw-scope-load-more").remove();
}
// 办公室、品牌、职能等级、安全等级、用户性别文本框值变化时回调
getValues(s){
let self = this;
clearTimeout(this.timer);
this.timer=setTimeout(function(){
request('/api/suggestion/objs?type='+self.props.condition.otype.replace('jw_n_','')+"&pagesize=20&pageno="+self.state.pageno+"&s=",{
method:'GET'
})
.then(function(resp){
let dropdownList = resp.data.JMObjs.list.length>0 ? resp.data.JMObjs.list.map(function(item){
let name = (curLang && curLang == 'en' && item.en_name) ? item.en_name : item.name;
return {key:item.id,value: name}
}) : [];
setTimeout(function(){
self.combineLoadMore(s,resp.data.JMObjs.page.num,i18n('btn.load-more'))
},200)
self.setState({
dropdownList: dropdownList,
listNum: resp.data.JMObjs.page.num
})
})
},200)
setTimeout(function () {
$('.jw-sharescope-select.jw-select-down .ant-select-dropdown-menu').unbind('scroll').on('scroll', function (evt) {
// console.log("sjaksdjkasjdsajdlkasjdlsak")
let clientHeight = $(this).height();
let scrollHeight = $(this)[0].scrollHeight;
let scrollTop = $(this).scrollTop();
// console.log("clientHeight::::",clientHeight,"scrollHeight:::",scrollHeight,"scrollTop::::",scrollTop)
if (clientHeight + scrollTop + 50 >= scrollHeight && self.state.dropdownList.length < self.state.listNum) {
self.removeLoadMore();
self.combineLoadMore(s,self.state.listNum,i18n('label.loading-hard'))
self.setState({
pageno: self.state.pageno + 1,
})
request('/api/suggestion/objs?type='+self.props.condition.otype.replace('jw_n_','')+(s?"&s="+s: "")+"&pagesize=20&pageno="+self.state.pageno,{
method:'GET'
})
.then(function(resp){
let newList = self.state.dropdownList.concat(resp.data.JMObjs.list);
self.setState({
dropdownList: newList,
pageno: 0,
},()=>{
if(self.state.dropdownList.length == self.state.listNum){
self.removeLoadMore();
self.combineLoadMore(s,self.state.listNum,i18n('label.no-more'))
}else{
self.removeLoadMore();
self.combineLoadMore(s,self.state.listNum,i18n('btn.load-more'))
}
})
})
}
});
},300)
}
// 下拉列表失去焦点，移除“加载更多”DOM节点
selectOnBlur(){
let self = this;
setTimeout(function(){
self.removeLoadMore();
},200)
}
// 取消选中时调用
cancelSelect(values){
let newValues = _.reject(this.props.condition.objs,{id:values.key});
this.props.onChange(newValues);
}
// BaseShare onChange
changeShare(e){
this.props.onChange(e);
}
// 调用对象选择器
selectObj(type,objs,title){
console.log("selectObjselectObjselectObjselectObj")
let self = this;
let newType = type=='jw_n_user_category' ? 'category' : type.replace('jw_n_','');
let url = '/api/suggestion/objs?type=' + newType + '&pageno=0'+'&pagesize=100'+'&show_entry=0&s={s}'
let params ={
title: title,
category: title,
type: newType,
// objTypes: newType,
objTypes: 'dictParent',
searchInput: true,
select: objs,
searchUrl: url,
flag: type=='dept' ? 'onlydept' : 'usergroup',
isSelectGroup: true,
dictId: '',
show_entry: 0,
}
let a = CombineShareModal(params);
a.events.on('save', function (objs) {
// _.each(objs, (item, i) => { item.type = item.obj_type; });
self.changeData(objs, type)
$('body').css('overflow','auto')
})
a.events.on('cancel', function (objs) {
$('body').css('overflow','auto')
})
}
changeData(objs, type) {
this.props.onChange(objs);
// this.setState({'originCondition': .JSON.parse(JSON.stringify({'otype':type,'objs':objs}))});
}
// 用户性别、安全等级 onChange事件
dropDownOnChange(values){
this.setState({
business_role:values
})
this.props.onChange(values);
}
// 转换成 key label的格式，注：select只认这种格式
combineNewObjs(condition,selectedCondition){
let newObjs = [];
if(selectedCondition!=undefined && _.indexOf(['jw_n_sex','jw_n_safety_level'],selectedCondition.type)!=-1){
newObjs = condition.objs&&condition.objs.length>0 ? condition.objs.map(function(item){
return { key: item.id,value: item.value||((curLang && curLang == 'en' && item.en_name) ? item.en_name : item.name) }
}) : [];
}
return newObjs;
}
// 选择添加方式
selectType(e,type,objs,title,url){
// 选择添加
if(e.key=='select'){
this.selectObj(type,objs,title)
// 下载excel模版
}else if(e.key=='download'){
if(type=='jw_n_dept'){
window.location.href="/public/customusergroup/dept_template"+(curLang=='zh'||curLang=='zh-cn' ? '' : '_'+curLang)+".xlsx"
}else if(type=='jw_n_user'){
window.location.href="/public/customusergroup/user_template"+(curLang=='zh'||curLang=='zh-cn' ? '' : '_'+curLang)+".xlsx"
}else{
// '暂不支持此类模版下载'
AloneTip({ type: 'error', duration: 2000, hasclose: false, autoHideDuration: 2000, message: i18n('label.exportmodel.kind.notsupport') })
}
// excel导入
}else if(e.key=='import'){
$('#jwm-scope-export-'+this.state.radomId).find('input').click()
}
}
unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(JSON.stringify(arr[i]) == JSON.stringify(arr[j]) || arr[i].id == arr[j].id){
arr.splice(j,1);
j--;
}
}
}
return arr;
}
//上传文件
fileChange(data) {
let self = this
console.log(data,JSON.stringify(data),'fileChange');
let params = {exporting:false}
if(data.JMStatus && data.JMStatus.code==0){
let exportdata = {bad_data:[],fine_data:[],show_not_found:false};
if (data.JMStatus && data.JMStatus.code === 0) {
exportdata = data&&data.JMUsergroupclasses ? data.JMUsergroupclasses : exportdata;
exportdata.show_not_found = true;
}
if(exportdata.fine_data && exportdata.fine_data.length > 0){
exportdata.fine_data = self.unique(exportdata.fine_data);
}
params = _.extend(params,exportdata);
}else{
// 这里没有走 request，所以需要提示错误
AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: data.JMStatus && data.JMStatus.errmemo ? data.JMStatus.errmemo : i18n('label.fileupload.uploaderror') })
}
this.setState(params,()=>{
if(self.state.bad_data.length==0&&self.state.fine_data.length!=0){
self.submitExport(self.props.condition||{})
}
});
}
// 文件校验
fileBeforeUpload(file){
let maxSize = 20*1024*1024;
if(file.size>maxSize){
// '不能导入超过20M的数据'
AloneTip({ type: 'error', duration: 3000, hasclose: false, autoHideDuration: 3000, message: i18n('label.customusergroupexport.filesize.overlimit') })
return true
}else{
this.setState({exporting:true})
}
}
// 确认导入
submitExport(condition){
let objsIds = _.pluck(condition.objs,'id')
let updateFlag = false;
// this.state.fine_data = [{id:'8kt4unrfFQcGOYcf',name:'部门1'}]
if(this.state.fine_data){
_.each(this.state.fine_data,(item)=>{
if(_.indexOf(objsIds,item.id)==-1){
condition.objs.push(item);
updateFlag = true;
}
})
}
// 导入成功后，就把之前的数据清掉
if(this.state.bad_data.length>0 || this.state.show_not_found==true) this.setState({bad_data:[],fine_data:[],show_not_found: false})
if(updateFlag==true) this.changeData(condition.objs, condition.otype)
}
componentWillReceiveProps(newProps){
$(".jw-teamscope-baseshare .custom-shareselect-search-input input").attr('disabled',true)
}
render(){
let self = this;
let condition = this.props.condition||{};
let selectedCondition = _.findWhere(this.props.otypeOptions,{type:condition.otype});
// 拼接父级数据
if(condition.objs&&condition.objs.length>0&&condition.objs[0]!=undefined){
_.each(condition.objs,function(item){
if(item.parent_path!=undefined&&item.parent_path!=''&&item.name.indexOf(item.parent_path)==-1){
item.name = item.parent_path + '-' + item.name;
}
})
}
console.log('this.state:',this.state)
return(
<div className="jw-share-group">
<div className={"jw-share-select " + (_.isEmpty(condition) ? '' : 'jw-share-select-other')}>
<Select
placeholder={i18n('label.usergroup.conditions.placeholder')}
onChange={this.props.onSelect}
value={condition.otype ? condition.otype : 'jw_select_please'}
className='jw-select-inner'
>
{
_.map(this.props.otypeOptions,function(item){
return <MenuItem className='jw-sharescope-select' value={item.type} disabled={item.type=="jw_select_please" ? true : false}>
{ curLang && curLang == 'en' && item.en_name ? item.en_name : item.name }
</MenuItem>
})
}
</Select>
</div>
<div className={"jw-share-add " + (_.isEmpty(condition) ? '' : 'jw-share-add-other')}>
{
selectedCondition!=undefined && _.indexOf(['jw_n_sex','jw_n_safety_level'],selectedCondition.type)== -1 ?
<div>
<BaseShare
className="jw-teamscope-baseshare"
url={selectedCondition!=undefined ? selectedCondition.url : ''}
placeholder={ selectedCondition!=undefined ? (condition.objs!=undefined && condition.objs.length>0 ? "" : (curLang == 'en' ? i18n('btn.add') + ' ' +selectedCondition.name : i18n('btn.add') + selectedCondition.name)) : i18n('label.usergroup.default.placeholder')}
shareobj={condition.objs||[]}
removeInput={true}
getPopupContainer={() => (document.getElementsByClassName('jw-share-add')[0]||document.body)}
onChange={(e)=>self.changeShare(e)}
></BaseShare>
<div className='jw-share-icon' >
{
condition.otype&&(condition.otype=='jw_n_sex'||condition.otype=='jw_n_safety_level') ?
<i className='icon-scope-down'></i> :
(
condition.otype&&(condition.otype=='jw_n_dept'||condition.otype=='jw_n_user') ?
<div>
<Menu className='jw-usergroup-export-menu' flag={'shareobj'} options={[{key:'select',value:i18n('label.btn.chooseandadd')},{key:'import',value:i18n('label.export.by.uploadexcel')},{key:'download',value:i18n('label.export.by.downloadexcelmodel')}]} onChange={(e,type,objs,title,url)=>self.selectType(e,condition.otype,condition.objs,selectedCondition&&selectedCondition.name||'')}>
</Menu>
<div id={'jwm-scope-export-'+this.state.radomId}>
<UploadExcel accept={".xlsx,.xls"} change={(e, data) => self.fileChange(e, data)} beforeCheck={(e) => self.fileBeforeUpload(e)} type={'icon'} baseUrl={'/api/customusergroup/uploadexcel?type='+condition.otype+'&jwfile='} >
</UploadExcel>
</div>
</div> :
<i className='icon-new' onClick={()=>{self.selectObj(condition.otype,condition.objs,selectedCondition.name)}}></i>
)
}
</div>
</div>:
<div>
<SelectMultple
className='jw-share-multiple-select'
placeholder={ selectedCondition!=undefined ? (condition.objs!=undefined && condition.objs.length>0 ? "" : "+ " + selectedCondition.name) : i18n('label.usergroup.default.placeholder')}
value={ _.isEmpty(condition)==false ? this.combineNewObjs(condition,selectedCondition) : this.state.business_role }
onFocus={this.getValues.bind(this)}
onChange={(values)=>this.dropDownOnChange(values)}
options={this.state.dropdownList}
>
</SelectMultple>
</div>
}
</div>
<div className={"jw-share-and " + (condition.otype==undefined || this.props.lastCondFlag==true ? 'hide' : '')}>{i18n('label.usergroup.and')}</div>
<i className={"jw-share-delete-cond " + (condition.otype ? '' : 'hide ') + (this.props.lastCondFlag==true ? 'jw-share-delete-cond-margin' : '')} onClick={this.props.deleteCond}></i>
{
this.state.exporting==true ?
<UploadDialog
open={true}
dialogTitle={i18n('label.file.uploading.wating')}
onChange={()=>this.dialogChange()}
/> : ''
}
{
this.state.show_not_found == true && this.state.bad_data&&this.state.bad_data.length>0 ?
<NotFoundDialog data={this.state.bad_data} open={true} type={condition.otype} onSubmit={()=>self.submitExport(condition)} handleClose={()=>self.setState({show_not_found:false})}/> : ''
}
</div>
)
}
}
export default AddCond;