报表页面，拖动控制侧栏宽度

app/public/js/div_resizer.js

@@ -71,18 +71,22 @@
                 mouseMoveCount += moveSize;
                 //当累计移动超过5个像素时，才刷新，减少刷新次数
                 if(Math.abs(mouseMoveCount) >= 5){
-                    const min = obj.attr('min') ? obj.attr('min') : parseInt(((orgSize1 + orgSize2) / 10).toFixed(0));
-                    const max = orgSize1 + orgSize2 - min;
-
-                    // 判断拖动范围不能超出
-                    newSize1 = Math.min(Math.max(orgSize1 + moveSize, min), max);
-                    newSize2 = Math.min(Math.max(orgSize2 - moveSize, min), max);
                     if (aType === 'percent') {
-                        const percent1 =  (orgSize1 + moveSize) / (orgSize1 + orgSize2) * 100;
+                        const min = obj.attr('min') ? obj.attr('min') : 10;
+                        const max = 100 - min;
+
+                        const percent1 = Math.min(Math.max((orgSize1 + moveSize) / (orgSize1 + orgSize2) * 100, 10), 90);
                         $(obj.attr('div1')).css(rType, percent1 + '%');
-                        const percent2 = (orgSize2 - moveSize) / (orgSize1 + orgSize2) * 100;
+                        const percent2 = Math.min(Math.max((orgSize2 - moveSize) / (orgSize1 + orgSize2) * 100, 10), 90);
                         $(obj.attr('div2')).css(rType, percent2 + '%');
                     } else {
+                        const min = obj.attr('min') ? obj.attr('min') : parseInt(((orgSize1 + orgSize2) / 10).toFixed(0));
+                        const max = orgSize1 + orgSize2 - min;
+
+                        // 判断拖动范围不能超出
+                        newSize1 = Math.min(Math.max(orgSize1 + moveSize, min), max);
+                        newSize2 = Math.min(Math.max(orgSize2 - moveSize, min), max);
+
                         $(obj.attr('div1'))[rType](newSize1);
                         $(obj.attr('div2'))[rType](newSize2);
                     }

app/view/report/index.ejs

@@ -25,13 +25,14 @@
         <div class="c-header p-0"></div>
         <div class="c-body">
             <div class="row">
-                <div class="col-2">
+                <div class="col-auto pr-0" id="tree-view" style="width: 17%">
                     <div class="sjs-height-1">
                         <div class="text-center"></div>
                         <ul id="rptTplTree" class="ztree"></ul>
                     </div>
                 </div>
-                <div class="col-10">
+                <div class="col-auto" id="main-view" style="width: 83%">
+                    <div class="resize-x" id="right-spr" r-Type="width" div1="#tree-view" div2="#main-view" title="调整大小" a-type="percent"><!--调整左右高度条--></div>
                     <div class="toolsbar-f d-flex justify-content-between">
                         <div class="print-toolsbar">
                             <div class="panel">
@@ -144,6 +145,7 @@
 </div>
 
 <script src="/public/js/sub_menu.js"></script>
+<script src="/public/js/div_resizer.js"></script>
 <script>
     $.subMenu({
         menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
@@ -161,6 +163,12 @@
             autoFlashHeight();
         }
     });
+    $.divResizer({
+        select: '#right-spr',
+        callback: function () {
+            autoFlashHeight();
+        }
+    });
 </script>
 
 <script type="text/javascript">  autoFlashHeight();</script>
@@ -343,14 +351,18 @@
         const parentDom = $(dom).parent().parent();
         const brotherDom = parentDom.prev();
         const nextDom = $(dom).children();
+        const left = $('#tree-view'), right = $('#main-view'), parent = left.parent();
         if (dom.title === '收起侧栏') {
             dom.title = '展开侧栏';
             brotherDom[0].style = 'display:none';
-            parentDom[0].className = 'col-12';
+            left.hide();
+            right.css('width', '100%');
             nextDom[0].className = 'fa fa-chevron-right';
         } else {
             dom.title = '收起侧栏';
-            parentDom[0].className = 'col-10';
+            left.show();
+            const percent = 100 - left.outerWidth() /parent.width() * 100;
+            right.css('width', percent + '%');
             brotherDom[0].style = 'display:';
             nextDom[0].className = 'fa fa-chevron-left';
         }