service.hrmbrowser_wev8.js 11.7 KB
define("mService/hrmbrowser", ["mUtil", "mService/hrmbrowser/result"], function(mUtil, hrmResult) {
	
	return {
		mounted: function($page, cfg){
			var defCfg = {
				browserType : "1", //浏览框类型 1.单选  2.多选
				selectedIds : "",	//选中的id,逗号分隔,如:1,2,3
				closeCallback : function(){mUtil.back();},
				success : function(){}
			};
			
			$.extend(defCfg, cfg);
			
			var isMulti = defCfg.browserType != "1" || defCfg.isMulti;
			$(".page-content", $page).addClass(isMulti ? "multi" : "single");
			
			var $search = $(".wev-search", $page),
				$searchKey = $("input[type='search']", $page),
		 		$clear = $(".wev-clear-btn", $page);
			
			
			$("form[disabledEnterSubmit]", $page).keydown(function(event){
                if(event.keyCode == 13){return false;}
            });
			
			$searchKey.on("input", function(){
                var v = this.value;
                $search.toggleClass("wev-has-value", v != "");
                if(v == ""){
                	_list.cancelSearch();
                }
            }).keyup(function(event){
                if(event.keyCode == 13){
                	if(this.value != ""){
                		searchKey = this.value;
                		_list.search();
                	}
                    this.blur();
                }
            });
            
            $clear.click(function(){
                $searchKey.val("").triggerHandler("input");
            });
            
            $(".browser-type > a", $page).click(function(){
            	var s = $(this).data("service");
            	var t = $(this).data("type");
            	require(["mService"], function(mService){
            		mService.show("hrmbrowser/"+s, $.extend(true, {}, defCfg, {
            			"dataType": t,
            			"selectedIds": _result.getSelectedIds(),
            			"_parentResult": _result,
            			"closeCallback": function(){
            				var stack = require("pageStack");
            				stack && stack.pop();
            				history.go(-2);
            			}
            		}));
            	});
            });
            
            var listPageNo = 0;
            var pageSize = 50;
            var searchKey = "";
            var $onceContainer = $(".once-container", $page),
	            $refreshLoading = $(".wev-refresh-loading", $onceContainer),
		 		$moreLoading = $(".wev-more-loading", $onceContainer),
		 		$moreBtn = $(".wev-more-btn", $onceContainer),
		 		$noData = $(".wev-no-data", $onceContainer);
            
            $moreBtn.click(function(){
            	_list.loadMore();
            });
            
            var _list = {
        		search: function(){
                	listPageNo = 0;
                	$onceContainer.show().addClass("wev-refreshing");
                    $refreshLoading.show().removeClass("wev-hide").addClass("wev-show");
                    
                    var beginstamp = (new Date()).valueOf(); 
                    function hideLoading(){
                    	var endstamp = (new Date()).valueOf();
                    	if((endstamp - beginstamp) >= 300){
                    		$refreshLoading.removeClass("wev-show").addClass("wev-hide");
                    		$onceContainer.removeClass("wev-refreshing");
                    	}else{
                    		setTimeout(hideLoading, 100);
                    	}
                    } 
                    _list.loadData(function($newList){
                    	hideLoading();
                    });
        		},
        		cancelSearch: function(){
        			$onceContainer.hide();
        			var $list = $(".wev-table-view", $onceContainer);
                	$list.find("*").remove();
        		},
        		loadMore: function(){
                	$moreLoading.show();
                	_list.loadData(function(){
                		$moreLoading.hide();
                	});
        		},
        		loadData: function(callback){
                	listPageNo++;
                    var pageNo = listPageNo;
                    $moreBtn.hide();
                    $noData.hide();
                	var url = mUtil.jionActionUrl("com.api.mobilemode.web.mobile.browser.HrmBrowserAction", "action=getListData&type=all");
                	mUtil.getJSON(url, {"searchKey":searchKey, "pageNo":pageNo, "pageSize":pageSize}, function(result){
                		var data = result["data"];
                		var totalSize = data.totalSize;
                		var templateHtml = [
    	                    '{@each datas as d}',
    	                        '<li class="wev-table-view-cell wev-media ${d.id|hrmbrowser_selected}" data-id="${d.id}" data-lastname="${d.lastname}" data-fontcolor = "${d.avatar.fontColor}" data-background = "${d.avatar.background}" data-headformat = "${d.avatar.headFormat}"  data-messagerurl="${d.avatar.messagerUrls}" data-shortname="${d.avatar.shortname}">',
    	                              '<a href="javascript:void(0);">',
    	                                  '<i class="wev-css-icon '+(isMulti ? 'wev-multi-check' : 'wev-single-check') + '"></i>',
    	                                  '<div class="wev-media-object wev-pull-left">',
							   				  '{@if d.avatar.headFormat == "1" || d.avatar.headFormat == "3"}',
												'<div style="background:${d.avatar.background};color:${d.avatar.fontColor}">${d.avatar.shortname}</div>',
											  '{@else}',
												'<img src="${d.avatar.messagerUrls}">',
											  '{@/if}',
    	                                  '</div>',
    	                                  '<div class="wev-media-body">',
    	                                  	'<div class="data-table">',
    											'<div class="data-row">',
    												'<div class="data-lastname"><div class="wev-ellipsis">${d.lastname}</div></div>',
    												'<div class="data-jobTitle"><div class="wev-ellipsis">${d.jobTitle}</div></div>',
    											'</div>',
    											'<div class="data-row">',
    												'<div class="data-subCompany"><div class="wev-ellipsis">${d.subCompany}</div></div>',
    												'<div class="data-department"><div class="wev-ellipsis">${d.department}</div></div>',
    											'</div>',
    										'</div>',
    	                                  '</div>',
    	                              '</a>',
    	                        '</li>',
    	                    '{@/each}'    
    	                ].join('');
                		
                		var html = mUtil.parseTemplate(templateHtml, data);
                		var $newList = $(html);
                		
                		var $list = $(".wev-table-view", $onceContainer);
                		if(pageNo == 1){
                        	$list.find("*").remove();
                        }
                        $list.append($newList);
                        
                        $newList.click(function(){
                        	if(isMulti){	//多选
                        		_result[$(this).hasClass("selected") ? "remove" : "add"](this.dataset);
                        	}else{	//单选
                        		_result.onOk($(this).data("id"), $(this).data("lastname"));
                        	}
                        });
                        
                        var totalPageCount = (totalSize % pageSize) == 0 ? parseInt(totalSize / pageSize) : (parseInt(totalSize / pageSize) + 1);;
                        if(pageNo >= totalPageCount){
                			$moreBtn.hide();
                		}else{
                			$moreBtn.show();
                		}
                        
                        if(totalSize <= 0){
            				$noData.show();
            			}
                        
                        if(mUtil.isFunction(callback)){
                        	callback();
                        }
                	});
                }
            };
            
            var _history = {
            	init: function(){
            		var hd = localStorage.getItem("mobilemode_hrm_history");
        			if(hd == null || hd == ""){
        				$(".history-empty", $page).show();
        			}else{
        				var $listWrap = $(".history-container .list-wrap", $page);
        				//$listWrap.show();
        				
        				var ids = "";
        				hd = JSON.parse(hd);
        				$.each(hd, function(i, d){
        					ids += d + ",";
        				});
        				if(ids != ""){
        					ids = ids.substring(0, ids.length - 1);
        				}
        				var url = mUtil.jionActionUrl("com.api.mobilemode.web.mobile.browser.HrmBrowserAction", "action=getHistoryDatas");
                    	mUtil.getJSON(url, {"ids": ids}, function(result){
                    		var templateHtml = [
        	                    '{@each datas as d}',
        	                        '<li class="wev-table-view-cell wev-media ${d.id|hrmbrowser_selected}" data-id="${d.id}" data-lastname="${d.lastname}" data-fontcolor = "${d.avatar.fontColor}" data-background = "${d.avatar.background}" data-headformat = "${d.avatar.headFormat}" data-messagerurl="${d.avatar.messagerUrls}" data-shortname="${d.avatar.shortname}">',
        	                              '<a href="javascript:void(0);">',
        	                                  '<i class="wev-css-icon '+(isMulti ? 'wev-multi-check' : 'wev-single-check') + '"></i>',
        	                                  '<div class="wev-media-object wev-pull-left">',
													'{@if d.avatar.headFormat == "1" || d.avatar.headFormat == "3"}',
													'<div style="background:${d.avatar.background};color:${d.avatar.fontColor}">${d.avatar.shortname}</div>',
													'{@else}',
													'<img src="${d.avatar.messagerUrls}">',
													'{@/if}',
        	                                  '</div>',
        	                                  '<div class="wev-media-body">',
        	                                  	'<div class="data-table">',
        											'<div class="data-row">',
        												'<div class="data-lastname"><div class="wev-ellipsis">${d.lastname}</div></div>',
        												'<div class="data-jobTitle"><div class="wev-ellipsis">${d.jobTitle}</div></div>',
        											'</div>',
        											'<div class="data-row">',
        												'<div class="data-subCompany"><div class="wev-ellipsis">${d.subCompany}</div></div>',
        												'<div class="data-department"><div class="wev-ellipsis">${d.department}</div></div>',
        											'</div>',
        										'</div>',
        	                                  '</div>',
        	                              '</a>',
        	                        '</li>',
        	                    '{@/each}'    
        	                ].join('');
                    		
                    		var html = mUtil.parseTemplate(templateHtml, result);
                    		var $newList = $(html);
                    		var $list = $(".wev-table-view", $listWrap);
                    		$list.append($newList);
                    		
                    		$newList.click(function(){
                            	if(isMulti){	//多选
                            		_result[$(this).hasClass("selected") ? "remove" : "add"](this.dataset);
                            	}else{	//单选
                            		_result.onOk($(this).data("id"), $(this).data("lastname"));
                            	}
                            });
                    	});
        			}
            	}	
            };
            
            var _result = new hrmResult($page, defCfg.success, defCfg.closeCallback);
            
            var juicer = require("juicer");
            juicer.unregister('hrmbrowser_selected');
            juicer.register('hrmbrowser_selected', function(id){
            	return _result.indexOfSelectedData(id) == -1 ? "" : "selected";
            });
            
            _history.init();
            
            _result.init(defCfg.selectedIds);
		}
	};
});