归档变更搜索框

app/view/report/index_archive.ejs

@@ -1,3 +1,6 @@
+<link href="/public/css/bootstrap/select2.min.css" rel="stylesheet" />
+<link rel="stylesheet" href="/public/css/bootstrap/select2-bootstrap4.min.css">
+<script src="/public/js/bootstrap/select2.min.js"></script>
 <% if (stg_id === -1) {%>
 <% include ../tender/tender_sub_menu.ejs %>
 <% } else { %>
@@ -33,10 +36,42 @@
                     </div>
                 </div>
                 <div class="d-inline-block">
-                    <div class="dropdown" id="divSelectableChanges" style="display: none">
-                        <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="btnCurrentChange" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="optionSelectableChanges"></div>
+                    <style>
+                        .select2-container {
+                            display: inline-block!important;
+                        }
+                        .select2-container--bootstrap4 .select2-selection--single {
+                            height: calc(0.9em + 0.75rem + 2px) !important;
+                        }
+                        .select2-container--bootstrap4 .select2-selection {
+                            background-color: #f8f9fa;
+                            /*border-color: #f8f9fa;*/
+                            border: 1px solid #f8f9fa;
+                        }
+                        .select2-container--bootstrap4 .select2-selection:hover {
+                            background-color: #e2e6ea;
+                            border-color: #dae0e5;
+                        }
+                        .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
+                            line-height: calc(0.9em + .75rem);
+                            color: #007bff!important;
+                            background-color: #f8f9fa;
+                            border-color: #f8f9fa;
+                        }
+                        .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
+                            border-color: #007bff transparent transparent transparent;
+                        }
+                        .select2-search--dropdown .select2-search__field {
+                            padding: 0.175rem 0.5rem;
+                        }
+                    </style>
+                    <div id="divSelectableChanges" class="" style="display: none;">
+                        <select id="optionSelectableChanges" class="form-control form-control-sm"></select>
                     </div>
+<!--                    <div class="dropdown" id="divSelectableChanges" style="display: none">-->
+<!--                        <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="btnCurrentChange" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>-->
+<!--                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="optionSelectableChanges"></div>-->
+<!--                    </div>-->
                 </div>
                 <% if (ctx.session.sessionUser.accountId === ctx.tender.data.user_id) { %>
                 <div class="d-inline-block">
@@ -315,24 +350,42 @@
         }
     }
 
+    // $('#divSelectableChanges').select2();
+
     function buildChangeSelection() {
         if (CHANGE_LIST.length === 0) {
-            $("#optionSelectableChanges")[0].style.display = 'none';
-            $("#btnCurrentChange")[0].innerText = '';
+            $('#optionSelectableChanges').html('');
         } else {
-            $("#optionSelectableChanges")[0].style.display = '';
-            $("#btnCurrentChange")[0].innerText = current_change_code;
-
-            $("#optionSelectableChanges").empty();
-            if (CHANGE_LIST.length > 0) {
-                for (let i = 0; i < CHANGE_LIST.length; i++) {
-                    if (parseInt(CHANGE_LIST[i].status) === 3 && CHANGE_LIST[i].code !== current_change_code) {
-                        const str = '<a class="dropdown-item" style="cursor:pointer" onclick="changeCurrentChange(this)" change_id = "' + CHANGE_LIST[i].id + '" change_code = "' + CHANGE_LIST[i].code + '">' + CHANGE_LIST[i].code + '</a>';
-                        $("#optionSelectableChanges").append(str);
-                    }
-                }
+            let html = '';
+            for (let i = 0; i < CHANGE_LIST.length; i++) {
+                html += '<option value = "' + CHANGE_LIST[i].id + '">'+ CHANGE_LIST[i].code +'</option>';
             }
+            $('#optionSelectableChanges').html(html);
         }
+        $('#optionSelectableChanges').select2({
+            language: 'zh-CN',
+            theme: 'bootstrap4',
+            selectOnClose: true,
+            // width: '150',
+        });
+        $('#optionSelectableChanges').val(current_change_id ? current_change_id : '').trigger("change");
+        // if (CHANGE_LIST.length === 0) {
+        //     $("#optionSelectableChanges")[0].style.display = 'none';
+        //     $("#btnCurrentChange")[0].innerText = '';
+        // } else {
+        //     $("#optionSelectableChanges")[0].style.display = '';
+        //     $("#btnCurrentChange")[0].innerText = current_change_code;
+        //
+        //     $("#optionSelectableChanges").empty();
+        //     if (CHANGE_LIST.length > 0) {
+        //         for (let i = 0; i < CHANGE_LIST.length; i++) {
+        //             if (parseInt(CHANGE_LIST[i].status) === 3 && CHANGE_LIST[i].code !== current_change_code) {
+        //                 const str = '<a class="dropdown-item" style="cursor:pointer" onclick="changeCurrentChange(this)" change_id = "' + CHANGE_LIST[i].id + '" change_code = "' + CHANGE_LIST[i].code + '">' + CHANGE_LIST[i].code + '</a>';
+        //                 $("#optionSelectableChanges").append(str);
+        //             }
+        //         }
+        //     }
+        // }
         // if (CHANGE_ID > 0) {
         //     $("#divSelectableChanges")[0].style.display = 'none';
         // }
@@ -369,12 +422,18 @@
         );
     }
 
-    function changeCurrentChange(ele) {
+    $('body').on('select2:select', '#optionSelectableChanges', function (e) {
+        const change_id = $(this).val();
+        const change_code = e.params.data.text;
+        changeCurrentChange(change_id, change_code);
+    });
+
+    function changeCurrentChange(change_id, change_code) {
         // alert('you are selecting: ' + ele.innerText);
-        current_change_id = ele.attributes.change_id.value;
-        current_change_code = ele.attributes.change_code.value;
-        CHANGE_ID = ele.attributes.change_id.value;
-        BUSINESS_ID = ele.attributes.change_id.value;
+        current_change_id = change_id;
+        current_change_code = change_code;
+        CHANGE_ID = change_id;
+        BUSINESS_ID = change_id;
         buildChangeSelection();
         //还有必要触发归档报表刷新！
         //rptArchiveObj.onClick(null, null, rptArchiveObj.currentNode);
@@ -484,10 +543,16 @@
            if (type === 'stage') {
                $('#divSelectableStages').show();
                $('#divSelectableChanges').hide();
-               current_stage_order = STAGE_LIST[i - 1].order;
-               const info = _.find(STAGE_LIST, { order: current_stage_order });
-               current_stage_id = info ? info.id : STAGE_LIST[i -1].id;
-               current_stage_order = info ? info.order : STAGE_LIST[i - 1].order;
+               // const info = _.find(STAGE_LIST, { order: current_stage_order });
+               for (let i = STAGE_LIST.length; i > 0; i--) {
+                   if (parseInt(STAGE_LIST[i - 1].status) === 3) {
+                       current_stage_order = STAGE_LIST[i - 1].order;
+                       current_stage_id = STAGE_LIST[i - 1].id;
+                       break;
+                   }
+               }
+               // current_stage_id = info ? info.id : STAGE_LIST[i -1].id;
+               // current_stage_order = info ? info.order : STAGE_LIST[i - 1].order;
                // 下列树结构重新加载
                //还有必要触发归档报表刷新！
                //rptArchiveObj.onClick(null, null, rptArchiveObj.currentNode);
@@ -500,6 +565,7 @@
                        ARCHIVE_LIST = result.data;
                        ARCHIVE_ENCRYPTION_LIST = result.encryptionData;
                        TOP_TREE_NODES = JSON.parse(JSON.stringify(ORG_TOP_TREE_NODES));
+                       buildStageSelection();
                        buildTplTree();
                        rptArchiveObj.iniPage();
                    }, function(err){
@@ -531,9 +597,9 @@
                        TOP_TREE_NODES = JSON.parse(JSON.stringify(result.rpt_tpl_data));
                        CHANGE_ID = CHANGE_LIST.length > 0 ? CHANGE_LIST[0].id : -1;
                        BUSINESS_ID = CHANGE_LIST.length > 0 ? CHANGE_LIST[0].id : -1;
+                       buildChangeSelection();
                        buildTplTree();
                        rptArchiveObj.iniPage();
-                       buildChangeSelection();
                        current_stage_id = result.stgId;
                    }, function(err){
                        $.bootstrapLoading.end();