添加巡检路线多选下拉框组件

mrzcc

2020-02-18 b8edbf5bb6f23926e6eab0c59a88f2af3173ae9d

添加巡检路线多选下拉框组件

 WebService/src/main/resources/components/inspectionRoutePackage/inspectionRoute-select2/inspectionRouteSelect2.html

New file
@@ -0,0 +1,5 @@
<select class="form-control" id = "inspectionRouteSelector">
    <option value="">请选择巡检路线</option>


</select>

 WebService/src/main/resources/components/inspectionRoutePackage/inspectionRoute-select2/inspectionRouteSelect2.js

New file
@@ -0,0 +1,105 @@
(function (vc) {
    vc.extends({
        propTypes: {
            parentModal: vc.propTypes.string
        },
        data: {
            inspectionRouteSelect2Info: {
                inspectionRoutes: [],
                inspectionRouteId: '-1',
                routeName: '',
                inspectionRouteSelector: {}
            }
        },
        watch: {
            inspectionRouteSelect2Info: {
                deep: true,
                handler: function () {
                    vc.emit($props.callBackListener, $props.callBackFunction, this.inspectionRouteSelect2Info);
                }
            }
        },
        _initMethod: function () {
            this._initinspectionRouteSelect2();
        },
        _initEvent: function () {
            vc.on('inspectionRouteSelect2', 'setInspectionRoute', function (_param) {
                vc.copyObject(_param, this.inspectionRouteSelect2Info);
                var option = new Option(_param.routeName, _param.inspectionRouteId, true, true);
                this.inspectionRouteSelect2Info.inspectionRouteSelector.append(option);
            });

            vc.on('inspectionRouteSelect2', 'clearInspectionRoute', function (_param) {
                this.inspectionRouteSelect2Info = {
                    inspectionRoutes: [],
                    inspectionRouteId: '-1',
                    routeName: '',
                    inspectionRouteSelector: {}
                };
            });
        },
        methods: {
            _initinspectionRouteSelect2: function () {
                $.fn.modal.Constructor.prototype.enforceFocus = function () {};
                $.fn.select2.defaults.set('width', '100%');
                this.inspectionRouteSelect2Info.inspectionRouteSelector = $('#inspectionRouteSelector').select2({
                    placeholder: '必填，请选择巡检路线',
                    allowClear: true,//允许清空
                    multiple: true,//允许多选
                    escapeMarkup: function (markup) {
                        return markup;
                    }, // 自定义格式化防止xss注入
                    ajax: {
                        url: "/callComponent/inspectionRouteManage/list",
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            console.log("param", params);
                            var _term = "";
                            if (params.hasOwnProperty("term")) {
                                _term = params.term;
                            }
                            return {
                                routeName: _term,
                                page: 1,
                                row: 10,
                                communityId: vc.getCurrentCommunity().communityId
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: this._filterInspectionRouteData(data.inspectionRoutes)
                            };
                        },
                        cache: true
                    }
                });
                $('#inspectionRouteSelector').on("select2:select", function (evt) {
                    //这里是选中触发的事件
                    //evt.params.data 是选中项的信息
                    this.inspectionRouteSelect2Info.inspectionRouteId = evt.params.data.id;
                    this.inspectionRouteSelect2Info.routeName = evt.params.data.text;
                });

                $('#inspectionRouteSelector').on("select2:unselect", function (evt) {
                    //这里是取消选中触发的事件
                    //如配置allowClear: true后，触发
                    this.inspectionRouteSelect2Info.inspectionRouteId = '-1';
                    this.inspectionRouteSelect2Info.routeName = '';

                });
            },
            _filterInspectionRouteData: function (_InspectionRoute) {
                var _tmpInspectionRoutes = [];
                for (var i = 0; i < _InspectionRoute.length; i++) {
                    var _tmpInspectionRoute = {
                        id: _InspectionRoute[i].inspectionRouteId,
                        text: _InspectionRoute[i].routeName
                    };
                    _tmpInspectionRoutes.push(_tmpInspectionRoute);
                }
                return _tmpInspectionRoutes;
            }
        }
    });
})(window.vc);