cards.js 8.61 KB
/**
 * Created by DEV005 on 2015/2/26.
 * 赵星
 */
angular.module("xn.directive.card",[])
    .directive("xnUserCard", ["$http",
    function ($http) {
        return {
            restrict: "A",
            template: "<div class=\"xn-user\"><div class=\"xn-user-name\"><span ng-transclude></span></div><div class=\"xn-user-card\" ></div></div>",
            transclude: true,
            link: function(scope,elem,attrs){

                var wrapper = elem.find(".xn-user");
                var card = elem.find(".xn-user-card");

                attrs.$observe("userId",function(value) {
                    /*   console.log("XN:用户卡片,获取到的userId=" + value);*/
                    if (value == null || value == undefined || value === "") {
                        return;
                    }
                    card.attr("user-id",value);
                });
                var of = wrapper.offset();
                wrapper.bind('mouseover',function(){

                    if(card.hasClass("loaded") === false  ) {
                        /*    console.log("未能成功加载");*/
                        card.html("");

                        var id=card.attr("user-id");
                        /*  console.log("id="+id);*/

                        var url = "/system/api.do?t=" + new Date().getTime();
                        $http({
                            method: 'POST',
                            url: url,
                            params: {"method": "api.system.usercard.get"},
                            data: {id: id}
                        }).success(
                            function (data) {
                                if (data.errors === null || data.errors.length > 0) {
                                    //noinspection JSHint
                                    /* console.error(data.errors[0].message);*/
                                } else {
                                    if (data.userCard == null || data.userCard == undefined) {
                                        /*  console.error("XN:无法获取到用户卡片信息");*/
                                        return;
                                    } else {
                                        /*console.log("XN:可以获取到用户卡片信息,userName=" + xn.convert.toString(data.userCard.name));*/
                                    }
                                    var user = data.userCard;

                                    var content = "<ul  style='dispaly:inline-block'>" +
                                        "<li class=\"title\">"  + xn.convert.toString(user.name) +"</li>" +
                                        "<li><span>部门 </span>" + ""+xn.convert.toString(user.organizationName) + "</li>" +
                                        "<li><span>职位 </span>" + xn.convert.toString(user.jobName) + "</li>" +
                                        "<li class='userNumber'><span>工号 </span>" + xn.convert.toString(user.employeeNumber) + "</li>"+
                                        "<div class='xn-user-card-info'>"+
                                        "<div class='xn-user-card-phone f-left'><i class='icon icon-phone'></i><span>" + xn.convert.toString(user.mobilePhone) + "</span>"+"</div>"+
                                        "<div class='xn-user-card-telephone f-left'><i class='icon icon-telephone'></i><span>" + xn.convert.toString(user.xtensionNumber) + "</span>"+"</div></div>";
                                    if(user.email != undefined) {
                                        content +=
                                            "<div class='xn-user-card-email f-left'><i class='icon icon-email'></i>" + "<a href=\"mailto:" + user.email + "\">"+xn.convert.toString(user.email)+"</a></div>";
                                    }
                                    content += "<img class='img' width='100' height='120' src='"+user.avatar+"'>" +
                                        "</ul>";
                                    card.html(content);
                                    card.addClass("loaded");
                                }
                            }
                        );
                    } else {
                        /*    console.log("已成功加载");*/
                    }

                    if (of.left + 320 > document.body.clientWidth) {
                        card.css("right", "5px");
                        card.addClass("left");
                    }
                    wrapper.addClass("hover");
                    //elem.css('background-color','red');
                    wrapper.css('cursor','pointer');
                });
                wrapper.bind('mouseout',function(){
                    //elem.css('background-color','white');
                    wrapper.css('cursor','pointer');
                    wrapper.removeClass("hover");
                });
            }
        };
    }])
    .directive("xnEmployeeCard", ["$http",
        function ($http) {
            return {
                restrict: "A",
                template: "<div class=\"xn-user\"><div class=\"xn-user-name\"><span ng-transclude></span></div><div class=\"xn-user-card\" ></div></div>",
                transclude: true,
                link: function(scope,elem,attrs){

                    var wrapper = elem.find(".xn-employee");
                    var card = elem.find(".xn-employee-card");

                    attrs.$observe("employeeId",function(value) {
                        /* 用户卡片,获取到的userId=" + value);*/
                        if (value == null || value == undefined || value === "") {
                            return;
                        }
                        card.attr("employee-id",value);
                    });
                    var of = wrapper.offset();
                    wrapper.bind('mouseover',function(){
                        if(card.hasClass("loaded") === false  ) {
                            card.html("");

                            var id=card.attr("employee-id");
                            var url = "/hr/api.do?t=" + new Date().getTime();
                            $http({
                                method: 'POST',
                                url: url,
                                params: {"method": "api.hr.employeecard.get"},
                                data: {id: id}
                            }).success(
                                function (data) {
                                    if (data.errors != null && data.errors.length == 0) {
                                        if (data.employeeCard == null || data.employeeCard == undefined) {
                                            return;
                                        }
                                        var user = data.employeeCard;

                                        var content = "<ul  >" +
                                            "<li class=\"title\">" + xn.convert.toString(user.name) +"</li>" +
                                            "<li><span>分机:</span>" + xn.convert.toString(user.extensionNumber) + "</li>" +
                                            "<li><span>手机:</span>" + xn.convert.toString(user.mobilePhone) + "</li>" +
                                            "<li><span>部门:</span>" + xn.convert.toString(user.organizationName) + "</li>" +
                                            "<li><span>职位:</span>" + xn.convert.toString(user.jobName) + "</li>" +
                                            "<li><span>工号:</span>" + xn.convert.toString(user.employeeNumber) + "</li>" +
                                            "<li><span>邮箱:</span>" +user.email + "<a href=\"mailto:" + user.email + "\">发送</a></li>" +
                                            "<img class='img' width='100' height='120' src='"+user.avatar+"'>"
                                        "</ul>";
                                        card.html(content);
                                        card.addClass("loaded");
                                    }
                                }
                            );
                        }
                        if (of.left + 320 > document.body.clientWidth) {
                            card.css("right", "5px");
                            card.addClass("left");
                        }
                        wrapper.addClass("hover");
                        wrapper.css('cursor','pointer');
                    });
                    wrapper.bind('mouseout',function(){
                        wrapper.css('cursor','pointer');
                        wrapper.removeClass("hover");
                    });
                }
            };
        }]);