common

Posted 2020-10-13 Exception+

/**
 * Created by gary.fu on 2015/7/6.
 */
(function (window, angular, undefined) {
    ‘use strict‘;
    angular.module(‘common.autocomplete‘, [‘ui.bootstrap.position‘])
        .constant(‘autocompleteConfig‘, {
            autocompleteTitle: "输入关键字查询",
            autocompleteWidth: "360px",
            idKey: "id",
            labelKey: "label",
            useIdModel: true,
            clearBeforeLoad: true,
            clearInvalid: true,
            closeOnSelect: true,
            keyWordKey: "keyWords",
            pageKey: "pageSetting",
            rowCount: 5,
            rowSize: 4,
            justified: false,
            enableInputAsValue: false
        })
        .controller("AutocompleteController", ["$scope", "$uibPosition", "$http", "$filter", "$timeout", function ($scope, $uibPosition, $http, $filter, $timeout) {
            var autocompleteCtrl = this;
            var initSelectPage = autocompleteCtrl.initSelectPage = function () {
                var pageSize = $scope.rowSize * $scope.rowCount, _defaultPage = {
                    pageNumber: 1,
                    pageSize: pageSize
                };
                if ($scope.clearBeforeLoad) {
                    $scope.currentSelectPageData = [];
                    _defaultPage.totalCount = 0;
                }
                $scope.selectPage = angular.extend($scope.selectPage || {}, _defaultPage);
            };

            autocompleteCtrl.configKeyEvent = function (input) {
                input.on("keydown.autocomplete", function (event) {
                    var selected, idx;
                    if (event.keyCode == 38) { // 上
                        if ($scope.items && $scope.items.length > 0) {
                            selected = $scope.items[0];
                            if ($scope.selectedData) {
                                idx = $scope.items.indexOf($scope.selectedData);
                                selected = $scope.items[idx > 0 ? idx - 1 : 0]
                            }
                            $scope.markSelectData(selected);
                            $scope.$apply();
                        }
                    } else if (event.keyCode == 40) {//下
                        if ($scope.items && $scope.items.length > 0) {
                            selected = $scope.items[0];
                            if ($scope.selectedData) {
                                idx = $scope.items.indexOf($scope.selectedData);
                                selected = $scope.items[idx < $scope.items.length - 1 ? idx + 1 : $scope.items.length - 1]
                            }
                            $scope.markSelectData(selected);
                            $scope.$apply();
                        }
                    } else if (event.keyCode == 13) {//回车
                        if ($scope.selectedData) {
                            $scope.selectData($scope.selectedData);
                            $scope.$apply();
                        }
                    } else if (event.keyCode == 8 || event.keyCode == 46) {//清空
                        if ($scope.ngReadonly) {
                            $scope.selectData();
                            $scope.$apply();
                            $scope.doLoadPageData();
                            event.preventDefault();
                        }
                    }
                });
            };
            $scope.parsePagedSelectData = this.parsePagedSelectData = function (selectPage) {
                if (!selectPage) {
                    initSelectPage();
                }
                var _selectPage = $scope.selectPage;
                if ($scope.selectPageData && $scope.selectPageData.length > 0) {
                    _selectPage.totalCount = $scope.selectPageData.length;
                    var start = _selectPage.pageSize * (_selectPage.pageNumber - 1),
                        end = _selectPage.pageSize * _selectPage.pageNumber - 1,
                        result = [];
                    for (var i = start; i < $scope.selectPageData.length; i++) {
                        if (i <= end) {
                            result.push($scope.selectPageData[i]);
                        } else {
                            break;
                        }
                    }
                    $scope.currentSelectPageData = result;
                }
            };
            autocompleteCtrl.loadSelectData = function (tab) {
                var dataUrl = $scope.selectPageConfig.dataUrl.replace("{id}", tab.id),
                    loadEnd = function () {
                        $scope.selectPageConfigLoading = false;
                    };
                angular.forEach($scope.selectPageConfig.appendParams, function (v, k) {
                    dataUrl = dataUrl.replace(k, v);
                });
                $scope.selectPageConfigLoading = true;
                return $http.get(dataUrl, {showLoading: false}).success(function (data) {
                    if (data && data.success) {
                        $scope.selectPageData = data.resultData;
                        $scope.parsePagedSelectData();
                    }
                }).then(loadEnd, loadEnd);
            };
            $scope.loadAutocompleteData = autocompleteCtrl.loadAutocompleteData = function () {
                if ($scope.autocompleteConfig && $scope.autocompleteConfig.dataUrl) {
                    var searchParam = $scope.autocompleteConfig.searchParam || {},
                        loadEnd = function () {
                            $scope.autocompleteConfigLoading = false;
                        };
                    $scope.page = searchParam.pageSetting || {};
                    searchParam[$scope.keyWordKey] = $scope.autocompleteLabel;
                    $scope.autocompleteConfigLoading = true;
                    $http.post($scope.autocompleteConfig.dataUrl, searchParam, {showLoading: false}).success(function (data) {
                        if (data && data.success) {
                            $scope.items = data.resultData;
                            angular.extend($scope.page, data.infos.pageSetting || {});
                            $timeout(function () {
                                $scope.markSelectData($scope.items[0]);
                            });
                        }
                    }).then(loadEnd, loadEnd);
                } else if ($scope.autocompleteConfig && $scope.autocompleteConfig.autocompleteDataMap) {
                    var filterParam = {};
                    filterParam[$scope.keyWordKey] = $scope.autocompleteLabel;
                    $scope.items = $filter(‘filter‘)($scope.autocompleteConfig.autocompleteDataMap.items || [], filterParam);
                }
            };

        }])
        .directive(‘commonAutocomplete‘, [‘$rootScope‘, ‘$templateCache‘, ‘$http‘, ‘$document‘, ‘$uibPosition‘, ‘autocompleteConfig‘, function ($rootScope, $templateCache, $http, $document, $uibPosition, autocompleteConfig) {
            return {
                restrict: ‘AE‘,
                replace: true,
                require: ["commonAutocomplete", "ngModel"],
                controller: "AutocompleteController",
                scope: {
                    selectPageConfig: "=?",
                    autocompleteConfig: "=?",
                    ngModel: "=?",
                    ngDisabled: ‘=‘,
                    ngReadonly: ‘=‘,
                    autocompleteLabel: "=?",
                    placeholder: "@",
                    onClearData: "&",
                    onSelectData: "&"
                },
                templateUrl: "template/autocomplete/common-autocomplete.html",
                link: function (scope, element, attrs, ctrls) {
                    var autocompleteCtrl = ctrls[0],
                        ngModelCtrl = ctrls[1],
                        popover = element.find(".popover"),
                        input = element.find(".js-value-field"),
                        parsers = ["autocompleteTitle", "autocompleteWidth", "rowCount", "rowSize", "justified",
                            "idKey", "labelKey", "keyWordKey", "pageKey", "useIdModel", "closeOnSelect", "enableInputAsValue", "clearInvalid"],
                        lastAutocompleteLabel = scope.autocompleteLabel || ‘‘,
                        autocompleteSelected = false;
                    var calcPosition = autocompleteCtrl.calcPosition = function () {
                        popover.show();
                        scope.$emit("showAutocomplete");
                        var cPosition = $uibPosition.positionElements(input, popover, ‘bottom-left‘, false);
                        cPosition.top += ‘px‘;
                        cPosition.left += ‘px‘;
                        popover.css(cPosition);
                    };
                    var _config = angular.copy(autocompleteConfig);
                    angular.forEach(parsers, function (v) {
                        if (angular.isDefined(attrs[v])) {
                            _config[v] = scope.$parent.$eval(attrs[v]);
                        }
                    });
                    autocompleteCtrl.configKeyEvent(input);
                    angular.extend(scope, _config);
                    if (scope.autocompleteConfig && scope.autocompleteConfig.config) {
                        angular.extend(scope, scope.autocompleteConfig.config);
                    }
                    scope.doLoadSelectPageData = function (tab) {
                        if (popover.is(":visible")) {
                            autocompleteCtrl.initSelectPage();
                            if (scope.selectPageConfig.selectPageDataMap) {
                                scope.selectPageData = scope.selectPageConfig.selectPageDataMap[tab.id];
                                autocompleteCtrl.parsePagedSelectData();
                                tab.active = true;
                            } else {
                                autocompleteCtrl.loadSelectData(tab).then(function () {
                                    tab.active = true;
                                });
                            }
                        }
                    };
                    scope.doLoadPageData = function () {
                        calcPosition();
                        if (!scope.showSelectPage || scope.autocompleteLabel) {
                            autocompleteCtrl.loadAutocompleteData();
                        }
                    };
                    scope.doShowAutocomplete = function (event) {
                        if (scope.ngReadonly && scope.autocompleteLabel) { // 只读的情况下选择之后不再查询
                            return;
                        }
                        calcPosition();
                        if (scope.showSelectPage && !scope.autocompleteLabel) {
                            if (!scope.selectPageData) {
                                scope.doLoadSelectPageData(scope.selectPageConfig.tabs[0]);
                            }
                        } else {
                            autocompleteCtrl.loadAutocompleteData();
                        }
                    };
                    scope.selectData = function (data) {//选择数据
                        var _data = angular.copy(data || {}),
                            value = scope.useIdModel ? _data[scope.idKey] : _data;
                        ngModelCtrl.$setViewValue(value);
                        scope.autocompleteLabel = _data[scope.labelKey];
                        lastAutocompleteLabel = scope.autocompleteLabel;
                        autocompleteSelected = true;
                        scope.onSelectData({"$data": _data, "$target": popover});
                        if (scope.closeOnSelect) {
                            scope.$emit("hideAutocomplete");
                            popover.hide();
                        }
                    };
                    scope.markSelectData = function (data) { //鼠标over选择
                        scope.selectedData = data;
                    };
                    scope.$watch("items", function () {
                        scope.selectedData = null;
                    }, true);
                    scope.$on("showAutocomplete", function (v) {
                        var triggerType = "click.autocomplete." + scope.$id;
                        $document.on(triggerType, function (e) {
                            var target = angular.element(e.target),
                                $autocomplete = target.parents(".autocomplete");
                            if ($autocomplete.length == 0 || ($autocomplete.length != 0 && !$autocomplete.is(element))) {
                                popover.hide();
                                scope.$emit("hideAutocomplete");
                            }
                        });
                    });
                    scope.$on("hideAutocomplete", function (v) {
                        var triggerType = "click.autocomplete." + scope.$id;
                        $document.off(triggerType);
                        if (!scope.ngModel && scope.clearInvalid) {
                            scope.autocompleteLabel = "";
                        }
                        if (lastAutocompleteLabel && scope.autocompleteLabel != lastAutocompleteLabel) {
                            scope.autocompleteLabel = lastAutocompleteLabel;
                        }
                        !scope.$$phase && !$rootScope.$$phase && scope.$apply();
                    });
                    scope.$watch("ngModel", function (v, lv) {
                        lastAutocompleteLabel = scope.autocompleteLabel || ‘‘;
                        if (!v && lv) {
                            scope.autocompleteLabel = "";
                            scope.onClearData({"$scope": scope});
                        }
                    }, true);
                    scope.$watch("autocompleteLabel", function (v, lv) {
                        if (scope.enableInputAsValue && !autocompleteSelected) {
                            scope.ngModel = v;
                        } else {
                            if (!v) {
                                scope.ngModel = "";
                            }
                            autocompleteSelected = false;
                        }
                    }, true);
                    scope.$watch("selectPageConfig", function (v) {
                        scope.selectPageData = undefined;
                        scope.showSelectPage = !!v;
                    });
                }
            }
        }]);
})(window, window.angular);