车辆设备搜索添加高级选项功能-排序字段选取：

1、搜索框带箭头，点击弹出排序选项 2、点击排序选项，弹出排序字段选项对话框，对话框内部使用saOrderOption自定义指令

车辆设备搜索添加高级选项功能-排序字段选取：
1、搜索框带箭头，点击弹出排序选项 2、点击排序选项，弹出排序字段选项对话框，对话框内部使用saOrderOption自定义指令
徐烜
1 parent 58b5a128
Showing 9 changed files with 573 additions and 6 deletions
src/main/resources/static/pages/scheduleApp/Gruntfile.js
src/main/resources/static/pages/scheduleApp/module/basicInfo/deviceInfoManage/list.html
src/main/resources/static/pages/scheduleApp/module/basicInfo/deviceInfoManage/module.js
src/main/resources/static/pages/scheduleApp/module/basicInfo/deviceInfoManage/orderOptionOpen.html
src/main/resources/static/pages/scheduleApp/module/basicInfo/deviceInfoManage/service.js
src/main/resources/static/pages/scheduleApp/module/common/dts2/queryOption/saOrderOption.js
src/main/resources/static/pages/scheduleApp/module/common/dts2/queryOption/saOrderOptionTemplate.html
src/main/resources/static/pages/scheduleApp/module/common/prj-common-directive.js
src/main/resources/static/pages/scheduleApp/module/common/prj-common-globalservice.js
@@ -89,6 +89,7 @@ module.exports = function (grunt) {
                     'module/common/dts2/bcGroup/saBcgroup.js', // 班次选择整合指令
                     'module/common/dts2/ttinfotable/saTimeTable.js', // 时刻表显示指令
                     'module/common/dts2/ttinfotable/saTimeTableScrolly1.js', // 时刻表滚动1显示指令
+                    'module/common/dts2/queryOption/saOrderOption.js', // saOrderoption指令，搜索时的排序选项（在搜索时可以使用，通用的）
                     'module/common/dts2/scheduleplan/saScpdate.js', // saScpdate指令（非通用指令，只在排班计划form中使用）
                     'module/common/dts2/scheduleplan/saSrule.js', // saSrule指令（非通用指令，只在排班计划form中使用）
                     'module/common/dts2/scheduleplan/saPlaninfoedit.js', // saPlaninfoedit指令（非通用指令，只在调度执勤日报中使用）
 <!-- ui-route deviceInfoManage.list -->
 <div ng-controller="DeviceInfoManageListCtrl as ctrl">
+    <style>
+        .dropdown-menu {
+            border-color: #32c5d2;
+        }
+        .btn-group > .dropdown-menu:before {
+            border-bottom-color: #32c5d2;   
+        }
+    </style>
+
+
     <div style="width: 100%; height: 100%; overflow: auto">
         <table class="fixTable table table-striped table-bordered table-hover table-checkable order-column">
             <thead>
@@ -43,9 +53,24 @@
                     </label>
                 </td>
                 <td>
-                    <button class="btn btn-sm green btn-outline filter-submit margin-bottom"
-                            ng-click="ctrl.doPage()">
-                        <i class="fa fa-search"></i> 搜索</button>
+                    <div class="btn-group">
+                        <button class="btn btn-sm green btn-outline filter-submit margin-bottom" style="margin-right: 0;"
+                                ng-click="ctrl.doPage()">
+                            <i class="fa fa-search"></i> 搜索</button>
+                        <button class="btn btn-sm green btn-outline filter-submit margin-bottom dropdown-toggle"
+                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <span class="caret"></span>
+                            <span class="sr-only">dropdown</span>
+                        </button>
+                        <ul class="dropdown-menu pull-right">
+                            <li>
+                                <a href="javascript:" class="tool-action" ng-click="ctrl.customOrder()">
+                                    <i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
+                                    排序选项
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
                     <button class="btn btn-sm red btn-outline filter-cancel"
                             ng-click="ctrl.reset()">
@@ -20,6 +20,20 @@ angular.module(&#39;ScheduleApp&#39;).factory(
                 uiToRecord: 0 // 页面绑定，当前页到第几条记录
             };
+            // 字段描述
+            var columns = [
+                {name: "xl", desc: "线路名称"},
+                {name: "clZbh", desc: "车辆内部编号"},
+                {name: "qyrq", desc: "启用日期"},
+                {name: "oldDeviceNo", desc: "旧设备编号"},
+                {name: "newDeviceNo", desc: "新终端号"}
+            ];
+            // 排序字段
+            var orderColumns = {
+                order: "xl,clZbh,qyrq",
+                direction: "ASC,ASC,DESC"
+            };
+
             // 查询对象
             var queryClass = service;
@@ -27,6 +41,12 @@ angular.module(&#39;ScheduleApp&#39;).factory(
                 getQueryClass: function() {
                     return queryClass;
                 },
+                getColumns: function() {
+                    return columns;
+                },
+                getOrderColumns: function() {
+                    return orderColumns;
+                },
                 getSearchCondition: function() {
                     currentSearchCondition.page = currentPage.uiNumber - 1;
@@ -34,6 +54,10 @@ angular.module(&#39;ScheduleApp&#39;).factory(
                         currentSearchCondition["cgsbm_in"] = UserPrincipal.getGsStrs().join(",");
                     }
+                    // 重置排序字段条件
+                    currentSearchCondition.order = orderColumns.order;
+                    currentSearchCondition.direction = orderColumns.direction;
+
                     return currentSearchCondition;
                 },
                 getPage: function(page) {
@@ -92,7 +116,8 @@ angular.module(&#39;ScheduleApp&#39;).controller(
     'DeviceInfoManageListCtrl',
     [
         'DeviceInfoManageService',
-        function(service) {
+        '$uibModal',
+        function(service, $uibModal) {
             var self = this;
             var CarDevice = service.getQueryClass();
@@ -127,11 +152,55 @@ angular.module(&#39;ScheduleApp&#39;).controller(
             self.doPage();
+            self.customOrder = function() {
+                // large方式弹出模态对话框
+                var modalInstance = $uibModal.open({
+                    templateUrl: '/pages/scheduleApp/module/basicInfo/deviceInfoManage/orderOptionOpen.html',
+                    size: "sm",
+                    animation: true,
+                    backdrop: 'static',
+                    resolve: {
+                    },
+                    windowClass: 'center-modal',
+                    controller: "DeviceInfoManageListOrderOptionModalInstanceCtrl",
+                    controllerAs: "$ctrl",
+                    bindToController: true
+                });
+                modalInstance.result.then(
+                    function(result) {
+                        console.log("dataImport.html打开");
+                    },
+                    function() {
+                        console.log("dataImport.html消失");
+                    }
+                );
+            };
         }
     ]
 );
+angular.module('ScheduleApp').controller(
+    "DeviceInfoManageListOrderOptionModalInstanceCtrl",
+    [
+        "DeviceInfoManageService",
+        "$modalInstance",
+        function(service, $modalInstance) {
+            var self = this;
+
+            self.columns = service.getColumns();
+            self.orderColumns = service.getOrderColumns();
+
+            self.confirm = function(result) {
+                // console.log(result);
+                // console.log(service.getOrderColumns());
+                $modalInstance.dismiss("cancel");
+
+            }
+        }
+    ]
+);
+
 // form.html控制器
 angular.module('ScheduleApp').controller(
     'DeviceInfoManageFormCtrl',
+<div class="modal-header">
+    <div class="modal-title">
+        <h3>
+            <i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
+            <span class="caption-subject bold uppercase">排序字段选择</span>
+        </h3>
+    </div>
+</div>
+<div class="modal-body">
+    <!--order={{$ctrl.orderColumns.order}}-->
+    <!--<br>-->
+    <!--direction={{$ctrl.orderColumns.direction}}-->
+    <sa-Orderoption name="orderOptions" columns="$ctrl.columns" ordercolumns="$ctrl.orderColumns">
+    </sa-Orderoption>
+</div>
+<div class="modal-footer">
+    <button class="btn btn-primary" ng-click="$ctrl.confirm($ctrl.orderColumns)">确定</button>
+</div>
 \ No newline at end of file
@@ -2,7 +2,7 @@
 angular.module('ScheduleApp').factory('DeviceInfoManageService_g', ['$resource', function($resource) {
     return $resource(
         '/cde_sc/:id',
-        {order: 'xl,isCancel,cl,qyrq', direction: 'ASC,ASC,ASC,DESC', id: '@id'},
+        {order: 'xl,clZbh,qyrq', direction: 'ASC,ASC,DESC', id: '@id'},
         {
             list: {
                 method: 'GET',
+/**
+ * saOrderoption指令，搜索时的排序选项（在搜索时可以使用，通用的）
+ * 属性如下：
+ * name（必须）：控件的名字
+ * columns（必须，独立作用域）：字段名字列表，格式：[{name:[字段名],desc:[字段描述]}...]
+ * ordercolumns（必须，独立作用域）：字段排序列表，格式：{order: '字段1,字段2',direction: 'ASC,DESC'}
+ */
+angular.module('ScheduleApp').directive(
+    'saOrderoption',
+    [
+        function() {
+            return {
+                restrict: 'E',
+                templateUrl: '/pages/scheduleApp/module/common/dts2/queryOption/saOrderOptionTemplate.html',
+                scope: {
+                    columns: '=',
+                    ordercolumns: '='
+                },
+                controllerAs: '$saOrderOptionCtrl',
+                bindToController: true,
+                controller: function() {
+                    var self = this;
+
+                    // 字段列表是否预载入
+                    self.$$columns_loaded = false;
+                    // 字段排序是否预载入
+                    self.$$ordercolumns_loaded = false;
+
+
+                    // 每组选项内部数据源
+                    // 格式：[{column:[选中的字段名],dir:[ASC/DESC]}]
+                    self.$$selectgroupds = [];
+
+                    // TODO：选择事件
+
+                    self.$$select_column_change = function() {
+                        self.$$refresh_selectgroupds();
+                    };
+
+                    self.$$select_dir_change = function() {
+                        self.$$refresh_selectgroupds();
+                    };
+
+                    self.$$add_option_click = function(index) {
+                        self.$$selectgroupds.splice(index, 0, {
+                            column: self.columns[0].name,
+                            dir: "ASC"
+                        });
+                        self.$$refresh_selectgroupds();
+                    };
+                    self.$$del_option_click = function(index) {
+                        self.$$selectgroupds.splice(index, 1);
+                        self.$$refresh_selectgroupds();
+                    };
+
+                    // 刷新选项内部数据源
+                    self.$$refresh_selectgroupds = function() {
+                        if (!self.$$columns_loaded || !self.$$ordercolumns_loaded || self.columns.length == 0) {
+                            // 没有载入完成，或者字段列表为空
+                            return;
+                        }
+
+                        if (self.$$selectgroupds.length == 0) { // 默认添加一组排序
+                            self.$$selectgroupds.push({
+                                column: self.columns[0].name,
+                                dir: "ASC"
+                            });
+                        }
+
+                        // 重新计算ordercolumns
+
+                        var aColumn = [];
+                        var aDir = [];
+                        for (var i = 0; i < self.$$selectgroupds.length; i++) {
+                            aColumn.push(self.$$selectgroupds[i].column);
+                            aDir.push(self.$$selectgroupds[i].dir);
+                        }
+                        if (self.ordercolumns) {
+                            self.ordercolumns.order = aColumn.join(",");
+                            self.ordercolumns.direction = aDir.join(",");
+                        } else {
+                            self.ordercolumns = {order: aColumn.join(","), direction: aDir.join(",")}
+                        }
+
+                    }
+                },
+                compile: function(tElem, tAttrs) {
+                    // 获取所有属性，并验证
+                    var $name_attr = tAttrs['name']; // 控件的名字
+                    if (!$name_attr) {
+                        throw "必须有名称属性";
+                    }
+
+                    // controlAs名字
+                    var ctrlAs = '$saOrderOptionCtrl';
+
+                    // TODO：
+
+
+
+                    return {
+                        pre: function(scope, element, attr) {
+
+                        },
+
+                        post: function(scope, element, attr) {
+
+                            //--------------------- 监控属性方法 -------------------//
+                            // 监控字段名字列表
+                            scope.$watch(
+                                function() {
+                                    return scope[ctrlAs].columns;
+                                },
+                                function(newValue, oldValue) {
+                                    if (!scope[ctrlAs].$$columns_loaded) {
+                                        // TODO：格式判定以后做，假设格式是对的
+
+
+                                    }
+
+                                    scope[ctrlAs].$$columns_loaded = true;
+                                    scope[ctrlAs].$$refresh_selectgroupds();
+                                },
+                                true
+                            );
+                            // 监控字段排序列表
+                            scope.$watch(
+                                function() {
+                                    return scope[ctrlAs].ordercolumns;
+                                },
+                                function(newValue, oldValue) {
+                                    if (!scope[ctrlAs].$$ordercolumns_loaded) {
+                                        if (newValue) {
+                                            var aColumns = []; // 排序的字段
+                                            var aDirs = []; // 排序字段对应的排序方向
+
+                                            if (newValue.order) {
+                                                aColumns = newValue.order.split(",");
+                                            }
+                                            if (newValue.direction) {
+                                                aDirs = newValue.direction.split(",");
+                                            }
+
+                                            for (var i = 0; i < aColumns.length; i++) {
+                                                if (i < aDirs.length) {
+                                                    scope[ctrlAs].$$selectgroupds.push({
+                                                        column: aColumns[i],
+                                                        dir: aDirs[i]
+                                                    });
+                                                } else {
+                                                    scope[ctrlAs].$$selectgroupds.push({
+                                                        column: aColumns[i],
+                                                        dir: 'ASC'
+                                                    });
+                                                }
+                                            }
+                                        }
+                                    }
+                                    scope[ctrlAs].$$ordercolumns_loaded = true;
+                                    scope[ctrlAs].$$refresh_selectgroupds();
+
+                                },
+                                true
+                            );
+                        }
+
+                    };
+                }
+            };
+        }
+    ]
+);
 \ No newline at end of file
+<style>
+    .option_panel {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+    .option_panel .detail-wrap {
+        padding: 0;
+        max-height: 300px;
+        border: 1px solid #ddd;
+        background: #fafafa;
+        border-radius: 10px !important;
+        moz-user-select: -moz-none;
+        -moz-user-select: none;
+        -o-user-select: none;
+        -khtml-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        overflow: auto;
+    }
+
+    .option_panel .detail-wrap > .option {
+        margin-top: 5px;
+    }
+
+    .option_panel .detail-wrap > .option:nth-last-child(1) {
+        margin-bottom: 5px;
+    }
+
+    .option_panel .detail-wrap > .option .option_column {
+        padding-left: 3px;
+        padding-right: 5px;
+    }
+    .option_panel .detail-wrap > .option .option_dir {
+        padding-left: 0px;
+        padding-right: 5px;
+    }
+    .option_panel .detail-wrap > .option .option_opt {
+        width: 70px;
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    .option_panel .detail-wrap .option .form-control {
+        font-size: 10px;
+    }
+
+
+    .option_scrollbar::-webkit-scrollbar {
+        width: 18px;
+        height: 18px;
+    }
+
+    .option_scrollbar::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        border: 5px solid transparent;
+    }
+
+    .option_scrollbar::-webkit-scrollbar-track {
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
+    }
+
+    .option_scrollbar::-webkit-scrollbar-thumb {
+        min-height: 20px;
+        background-clip: content-box;
+        box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset;
+    }
+
+    .option_scrollbar::-webkit-scrollbar-corner {
+        background: transparent;
+    }
+
+</style>
+
+<div>
+    <div class="option_panel">
+        <div class="detail-wrap option_scrollbar">
+
+            <div class="col-md-12 option" ng-repeat="$option in $saOrderOptionCtrl.$$selectgroupds track by $index" ng-init="rowIndex = $index">
+                <div class="col-md-5 option_column">
+                    <select class="form-control aria-invalid="false" ng-model="$option.column" ng-change="$saOrderOptionCtrl.$$select_column_change()">
+                        <option ng-repeat="$column in $saOrderOptionCtrl.columns track by $index"
+                                ng-init="colIndex = $index"
+                                ng-selected="$option.column==$column.name"
+                                value="{{$column.name}}">
+                            {{$column.desc}}
+                        </option>
+                    </select>
+                </div>
+                <div class="col-md-3 option_dir">
+                    <select class="form-control aria-invalid="false" ng-model="$option.dir" ng-change="$saOrderOptionCtrl.$$select_dir_change()">
+                        <option value="ASC" ng-selected="$option.dir=='ASC'">升序</option>
+                        <option value="DESC" ng-selected="$option.dir=='DESC'">降序</option>
+                    </select>
+                </div>
+                <div class="col-md-3 btn-group option_opt">
+                    <button type="button" class="btn btn-default" ng-click="$saOrderOptionCtrl.$$add_option_click(rowIndex)">+</button>
+                    <button type="button" class="btn btn-default" ng-click="$saOrderOptionCtrl.$$del_option_click(rowIndex)">-</button>
+                </div>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+
+</div>
 \ No newline at end of file
@@ -4451,6 +4451,178 @@ angular.module(&#39;ScheduleApp&#39;).directive(
         }
     ]
 );
+/**
+ * saOrderoption指令，搜索时的排序选项（在搜索时可以使用，通用的）
+ * 属性如下：
+ * name（必须）：控件的名字
+ * columns（必须，独立作用域）：字段名字列表，格式：[{name:[字段名],desc:[字段描述]}...]
+ * ordercolumns（必须，独立作用域）：字段排序列表，格式：{order: '字段1,字段2',direction: 'ASC,DESC'}
+ */
+angular.module('ScheduleApp').directive(
+    'saOrderoption',
+    [
+        function() {
+            return {
+                restrict: 'E',
+                templateUrl: '/pages/scheduleApp/module/common/dts2/queryOption/saOrderOptionTemplate.html',
+                scope: {
+                    columns: '=',
+                    ordercolumns: '='
+                },
+                controllerAs: '$saOrderOptionCtrl',
+                bindToController: true,
+                controller: function() {
+                    var self = this;
+
+                    // 字段列表是否预载入
+                    self.$$columns_loaded = false;
+                    // 字段排序是否预载入
+                    self.$$ordercolumns_loaded = false;
+
+
+                    // 每组选项内部数据源
+                    // 格式：[{column:[选中的字段名],dir:[ASC/DESC]}]
+                    self.$$selectgroupds = [];
+
+                    // TODO：选择事件
+
+                    self.$$select_column_change = function() {
+                        self.$$refresh_selectgroupds();
+                    };
+
+                    self.$$select_dir_change = function() {
+                        self.$$refresh_selectgroupds();
+                    };
+
+                    self.$$add_option_click = function(index) {
+                        self.$$selectgroupds.splice(index, 0, {
+                            column: self.columns[0].name,
+                            dir: "ASC"
+                        });
+                        self.$$refresh_selectgroupds();
+                    };
+                    self.$$del_option_click = function(index) {
+                        self.$$selectgroupds.splice(index, 1);
+                        self.$$refresh_selectgroupds();
+                    };
+
+                    // 刷新选项内部数据源
+                    self.$$refresh_selectgroupds = function() {
+                        if (!self.$$columns_loaded || !self.$$ordercolumns_loaded || self.columns.length == 0) {
+                            // 没有载入完成，或者字段列表为空
+                            return;
+                        }
+
+                        if (self.$$selectgroupds.length == 0) { // 默认添加一组排序
+                            self.$$selectgroupds.push({
+                                column: self.columns[0].name,
+                                dir: "ASC"
+                            });
+                        }
+
+                        // 重新计算ordercolumns
+
+                        var aColumn = [];
+                        var aDir = [];
+                        for (var i = 0; i < self.$$selectgroupds.length; i++) {
+                            aColumn.push(self.$$selectgroupds[i].column);
+                            aDir.push(self.$$selectgroupds[i].dir);
+                        }
+                        if (self.ordercolumns) {
+                            self.ordercolumns.order = aColumn.join(",");
+                            self.ordercolumns.direction = aDir.join(",");
+                        } else {
+                            self.ordercolumns = {order: aColumn.join(","), direction: aDir.join(",")}
+                        }
+
+                    }
+                },
+                compile: function(tElem, tAttrs) {
+                    // 获取所有属性，并验证
+                    var $name_attr = tAttrs['name']; // 控件的名字
+                    if (!$name_attr) {
+                        throw "必须有名称属性";
+                    }
+
+                    // controlAs名字
+                    var ctrlAs = '$saOrderOptionCtrl';
+
+                    // TODO：
+
+
+
+                    return {
+                        pre: function(scope, element, attr) {
+
+                        },
+
+                        post: function(scope, element, attr) {
+
+                            //--------------------- 监控属性方法 -------------------//
+                            // 监控字段名字列表
+                            scope.$watch(
+                                function() {
+                                    return scope[ctrlAs].columns;
+                                },
+                                function(newValue, oldValue) {
+                                    if (!scope[ctrlAs].$$columns_loaded) {
+                                        // TODO：格式判定以后做，假设格式是对的
+
+
+                                    }
+
+                                    scope[ctrlAs].$$columns_loaded = true;
+                                    scope[ctrlAs].$$refresh_selectgroupds();
+                                },
+                                true
+                            );
+                            // 监控字段排序列表
+                            scope.$watch(
+                                function() {
+                                    return scope[ctrlAs].ordercolumns;
+                                },
+                                function(newValue, oldValue) {
+                                    if (!scope[ctrlAs].$$ordercolumns_loaded) {
+                                        if (newValue) {
+                                            var aColumns = []; // 排序的字段
+                                            var aDirs = []; // 排序字段对应的排序方向
+
+                                            if (newValue.order) {
+                                                aColumns = newValue.order.split(",");
+                                            }
+                                            if (newValue.direction) {
+                                                aDirs = newValue.direction.split(",");
+                                            }
+
+                                            for (var i = 0; i < aColumns.length; i++) {
+                                                if (i < aDirs.length) {
+                                                    scope[ctrlAs].$$selectgroupds.push({
+                                                        column: aColumns[i],
+                                                        dir: aDirs[i]
+                                                    });
+                                                } else {
+                                                    scope[ctrlAs].$$selectgroupds.push({
+                                                        column: aColumns[i],
+                                                        dir: 'ASC'
+                                                    });
+                                                }
+                                            }
+                                        }
+                                    }
+                                    scope[ctrlAs].$$ordercolumns_loaded = true;
+                                    scope[ctrlAs].$$refresh_selectgroupds();
+
+                                },
+                                true
+                            );
+                        }
+
+                    };
+                }
+            };
+        }
+    ]
+);
 /**
  * saScpdate指令（非通用指令，只在排班计划form中使用）。
  * 属性如下：
@@ -84,7 +84,7 @@ angular.module(&#39;ScheduleApp&#39;).factory(
 angular.module('ScheduleApp').factory('DeviceInfoManageService_g', ['$resource', function($resource) {
     return $resource(
         '/cde_sc/:id',
-        {order: 'xl,isCancel,cl,qyrq', direction: 'ASC,ASC,ASC,DESC', id: '@id'},
+        {order: 'xl,clZbh,qyrq', direction: 'ASC,ASC,DESC', id: '@id'},
         {
             list: {
                 method: 'GET',