sharepoint - peoplepicker

//初始化peoplepicker组件
function initializePeoplePicker(param){
	// Create a schema to store picker properties, and set the properties.
	var schema = {};
	schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
	schema['SearchPrincipalSource'] = 15;
	schema['ResolvePrincipalSource'] = 15;
	schema['AllowMultipleValues'] = true;
	schema['MaximumEntitySuggestions'] = 50;
	schema['Width'] = '100%';

	// Render and initialize the picker. 
	// Pass the ID of the DOM element that contains the picker, an array of initial
	// PickerEntity objects to set the picker value, and a schema that defines
    // picker properties.
    console.log(param)
    window.SPClientPeoplePicker_InitStandaloneControlWrapper(param, null, schema);
	//document.getElementById(param + '_TopSpan_InitialHelpText').innerHTML = "";
}

function unique(arr){
	var newArr = [];
	for(var i in arr){
		if(newArr.indexOf(arr[i]) == -1){
		newArr.push(arr[i])
		}
	}
	return newArr;
}

//监控组件数据变化
function watchBlur(){
	console.log("go watchblur")
    $('#peoplePickerDiv1_TopSpan_EditorInput').blur(function(){
		if(document.getElementById('peoplePickerDiv1_TopSpan_HiddenInput').value.indexOf('true') !== -1){
			getNameIdValue('peoplePickerDiv1');
			console.log(window.peopleId1);
		}else if(document.getElementById('peoplePickerDiv1_TopSpan_HiddenInput').value == '[]'){
			window.peopleId1 = [];
		}
	});
	
	$('#peoplePickerDiv2_TopSpan_EditorInput').blur(function(){
		if(document.getElementById('peoplePickerDiv2_TopSpan_HiddenInput').value.indexOf('true') !== -1){
			getNameIdValue('peoplePickerDiv2');
			console.log(window.peopleId2);
		}else if(document.getElementById('peoplePickerDiv2_TopSpan_HiddenInput').value == '[]'){
			window.peopleId2 = [];
		}
	}); 
	
	$('#peoplePickerDiv3_TopSpan_EditorInput').blur(function(){
		if(document.getElementById('peoplePickerDiv3_TopSpan_HiddenInput').value.indexOf('true') !== -1){
			getNameIdValue('peoplePickerDiv3');
			console.log(window.peopleId3);
		}else if(document.getElementById('peoplePickerDiv3_TopSpan_HiddenInput').value == '[]'){
			window.peopleId3 = [];
		}
	});

	$('#peoplePickerDiv4_TopSpan_EditorInput').blur(function(){
		if(document.getElementById('peoplePickerDiv4_TopSpan_HiddenInput').value.indexOf('true') !== -1){
			getNameIdValue('peoplePickerDiv4');
			console.log(window.peopleId4);
		}else if(document.getElementById('peoplePickerDiv4_TopSpan_HiddenInput').value == '[]'){
			window.peopleId4 = [];
		}
	});

	$('#peoplePickerDiv5_TopSpan_EditorInput').blur(function(){
		if(document.getElementById('peoplePickerDiv5_TopSpan_HiddenInput').value.indexOf('true') !== -1){
			getNameIdValue('peoplePickerDiv5');
			console.log(window.peopleId5);
		}else if(document.getElementById('peoplePickerDiv5_TopSpan_HiddenInput').value == '[]'){
			window.peopleId5 = [];
		}
	});
}

function getItem(context,users,_eleID) {
	var deferred = $.Deferred();
	var userTemp = "";
	userTemp = context.get_web().ensureUser(users.Key);
	context.load(userTemp);
	console.log(context);
	context.executeQueryAsync(
		Function.createDelegate(null, function () {
			if(_eleID == 'peoplePickerDiv1'){
				if(window.peopleId1.indexOf(userTemp.get_id()) == -1){
					window.peopleId1.push(userTemp.get_id());
				}
			}else if(_eleID == 'peoplePickerDiv2'){
				if(window.peopleId2.indexOf(userTemp.get_id()) == -1){
					window.peopleId2.push(userTemp.get_id());
				}
			}else if(_eleID == 'peoplePickerDiv3'){
				if(window.peopleId3.indexOf(userTemp.get_id()) == -1){
					window.peopleId3.push(userTemp.get_id());
				}
			}else if(_eleID == 'peoplePickerDiv4'){
				if(window.peopleId4.indexOf(userTemp.get_id()) == -1){
					window.peopleId4.push(userTemp.get_id());
				}
			}else if(_eleID == 'peoplePickerDiv5'){
				if(window.peopleId5.indexOf(userTemp.get_id()) == -1){
					window.peopleId5.push(userTemp.get_id());
				}
				console.log("里边执行")
			}
			deferred.resolve();
		}),
		Function.createDelegate(null,function () { 
			deferred.reject(); 
		})
	);
    return deferred.promise();
};

//根据domid获取userid
function getNameIdValue(_eleID) {
	SP.SOD.executeFunc("sp.js", 'SP.ClientContext', async () => {
		console.log("go getnameidvalue")
		var peoplePicker = window.SPClientPeoplePicker.SPClientPeoplePickerDict[_eleID + "_TopSpan"];
		var users = peoplePicker.GetAllUserInfo();
		console.log("==users start==")
		console.log(users)
		console.log("==users end==")
		if(_eleID == 'peoplePickerDiv1'){
			window.peopleId1 = [];
		}else if(_eleID == 'peoplePickerDiv2'){
			window.peopleId2 = [];
		}else if(_eleID == 'peoplePickerDiv3'){
			window.peopleId3 = [];
		}else if(_eleID == 'peoplePickerDiv4'){
			window.peopleId4 = [];
		}else if(_eleID == 'peoplePickerDiv5'){
			window.peopleId5 = [];
		}

		for(var i=0; i<users.length; i++){
			var context = new SP.ClientContext.get_current();
			getItem(context,users[i],_eleID).then(
				function () {
					console.log("外边执行")
				},
				function () {
					console.log('error');
				}
			);
		}
	});
}
		
//根据取回信息进行信息回显
function setWiw(domId,userid) {
	var dtd = $.Deferred();
	var userInfo = undefined;
	var requestUri = window._spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
	var requestHeaders = {
		"accept": "application/json;odata=verbose"
	};
	$.ajax({
		async: false,
		url: requestUri,
		contentType: "application/json;odata=verbose",
		headers: requestHeaders,
		success: function (data, request) {
			userInfo = data.d;
			dtd.resolve(userInfo).then(function (data) {
				var keyvalue = data.LoginName;
				if(data && data.LoginName && data.LoginName.indexOf('|')>-1)
				{
					keyvalue=data.LoginName.split('|')[1];
				}
				SP.SOD.executeFunc("clientpeoplepicker.js", 'SPClientPeoplePicker', function () {
					var peoplePicker = window.SPClientPeoplePicker.SPClientPeoplePickerDict[domId + "_TopSpan"];
					peoplePicker.AddUserKeys(keyvalue);
					console.log(peoplePicker);
				});
			})
		},
		error: function () {

		}
	});
	return dtd.promise();
}


export {
	initializePeoplePicker
}
export{
	watchBlur
}
export { 
	getNameIdValue
}
export {
	setWiw
}
export {
	unique
}

//css
/*peoplepicker组件样式*/
	#buid_TopSpan,#dhid_TopSpan,#poid_TopSpan{
		border-radius:4px;
		height:40px;
		line-height:20px;
		width:300px !important;
		margin-top:30px;
		font-size:15px;
		text-decoration:underline;
	}
	#buid_TopSpan_EditorInput,#dhid_TopSpan_EditorInput,#poid_TopSpan_EditorInput{
		margin-top:8px;
		margin-left:15px;
	}
	.sp-peoplepicker-userSpan{
		margin-left:15px;
		margin-top:-7px;
	}
	.sp-peoplepicker-autoFillContainer{
		z-index:9999;
	}
	.sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled{
		cursor:text;
		position:relative;
		padding:3px 25px 3px 0px;
	}
	
	.ms-fullWidth{
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	
	input[type=password], input[type=text], input[type=file], input:not([type]), select, textarea, .sp-peoplepicker-topLevel, .sp-peoplepicker-topLevelDisabled, .sp-peoplepicker-autoFillContainer, .ms-inputBox{
		border:1px solid #ababab;
		background-color:rgba(255, 255, 255, 0.85);
		color:#000000;
	}
	
	input, select, label, textarea, button, option{
		font-family:inherit;
		font-size:inherit;
		color:inherit;
		vertical-align:middle;
	}
	
	.sp-peoplepicker-autoFillContainer{
		padding:0px;
		display:none;
		cursor:default;
		max-width:300px;
		min-width:300px;
		position:absolute;
		border-color:#c6c6c6;
	}
	
	.sp-peoplepicker-autoFillContainer .sp-autoFill-scroll{
		width:100%;
		border:none;
		margin:0px;
		padding:0px;
		max-height:200px;
		min-width:100%;
		padding-top:3px;
		overflow-y:auto;
		overflow-x:hidden;
		margin-right:10px;
		list-style-type:none;
		box-shadow:0px 0px 0px 0px transparent;
		background-color:#ffffff;
	}
	
	.sp-peoplepicker-autoFillContainer .ms-core-menu-item{
		white-space:nowrap;
		padding:1px 5px 3px 5px;
	}
	
	.ms-core-menu-item{
		margin:0px;
		cursor:pointer;
		border:1px solid transparent;
	}
	
	.sp-peoplepicker-autoFillContainer .sp-autoFill-scroll{
		list-style-type:none;
	}
	
	.ms-core-menu-link:link, .ms-core-menu-link:visited{
		color:#000000;
	}
	
	.sp-peoplepicker-autoFillContainer .ms-core-menu-link{
		padding:0px;
	}
	
	a.ms-core-menu-link{
		text-decoration:none;
		display:block;
		position:relative;
	}
	
	.sp-peoplepicker-autoFillContainer .ms-core-menu-item{
		white-space:nowrap;
	}
	
	.sp-autoFill-scroll .ms-core-menu-label{
		border:none;
	}
	
	.sp-peoplepicker-autoFillContainer .ms-core-menu-label{
		display:block;
	}
	
	.ms-core-menu-link:link, .ms-core-menu-link:visited{
		color:#000000;
	}
	
	.sp-peoplepicker-initialHelpText{
		top:3px;
		left:4px;
		position:absolute;
	}
	
	.ms-helperText, input.ms-helperText{
		color:#666666;
	}
	
	.sp-peoplepicker-waitImg{
		width:16px;
		height:16px;
		font-size:0px;
		position:absolute;
		display:none;
	}
	
	img{
		border:none;
		-webkit-tap-highlight-color:transparent;
	}
	
	input[type=text].sp-peoplepicker-editorInput:focus{
		outline:0px;
	}
	
	input[type=text].sp-peoplepicker-editorInput{
		border:0px;
		padding:0px 1px;
		vertical-align:inherit;
		background-color:transparent;
	}
	
	.sp-peoplepicker-delImage{
		margin-left:4px;
	}
	/**/