瀏覽代碼

台账分解、台账审批,可以拖动更改左右布局大小

MaiXinRong 6 年之前
父節點
當前提交
f78b49d539
共有 7 個文件被更改,包括 123 次插入33 次删除
  1. 17 0
      app/public/css/main.css
  2. 12 7
      app/public/js/div_resizer.js
  3. 48 10
      app/public/js/ledger.js
  4. 36 7
      app/public/js/ledger_audit.js
  5. 3 2
      app/view/ledger/audit.ejs
  6. 7 6
      app/view/ledger/explode.ejs
  7. 0 1
      config/web.js

+ 17 - 0
app/public/css/main.css

@@ -259,6 +259,23 @@ body {
     overflow-y: auto;
     position: static;
 }
+/*结构宽度高度调整条*/
+.resize-y{
+  height:5px;
+  width:100%;
+  float: left;
+  margin-top:-5px;
+  cursor: s-resize;
+  z-index: 999
+}
+.resize-x{
+  width:5px;
+  height:100%;
+  float: left;
+  margin-left:-15px;
+  cursor: w-resize;
+  z-index: 999
+}
 /*头部*/
 .header .logo {
   float: left;

+ 12 - 7
app/public/js/div_resizer.js

@@ -30,11 +30,11 @@
     $.divResizer = function(setting) {
         const obj = $(setting.select);
         let drag, mouseMoveCount, startPos, orgSize1, orgSize2, newSize1, newSize2, objSize;
-        if (obj.attr('r-type') === 'height') {
-            obj.css('width', '100%').css('height', '1%').css('resize', 'vertical').css('cursor', 's-resize').css('float', 'top');
-        } else {
-            obj.css('width', '1%').css('height', '100%').css('resize', 'horizontal').css('cursor', 'w-resize').css('float', 'left');
-        }
+        // if (obj.attr('r-type') === 'height') {
+        //     obj.css('width', '100%').css('height', '1%').css('resize', 'vertical').css('cursor', 's-resize').css('float', 'top');
+        // } else {
+        //     obj.css('width', '1%').css('height', '100%').css('resize', 'horizontal').css('cursor', 'w-resize').css('float', 'left');
+        // }
         // 根据localStorage初始化
         if (obj.attr('store-id')) {
             const rType = obj.attr('r-type');
@@ -77,8 +77,13 @@
                     // 判断拖动范围不能超出
                     newSize1 = Math.min(Math.max(orgSize1 + moveSize, min), max);
                     newSize2 = Math.min(Math.max(orgSize2 - moveSize, min), max);
-                    $(obj.attr('div1')).css(rType, newSize1);
-                    $(obj.attr('div2')).css(rType, newSize2);
+                    $(obj.attr('div1'))[rType](newSize1);
+                    $(obj.attr('div2'))[rType](newSize2);
+                    // if (rType === 'height') {
+                    //     $(obj.attr('div1')).css(rType, newSize1);
+                    //     $(obj.attr('div2')).css(rType, newSize2);
+                    // } else {
+                    // }
 
                     if(setting.callback) { setting.callback(); }
                     mouseMoveCount = 0;

+ 48 - 10
app/public/js/ledger.js

@@ -15,6 +15,8 @@ function getTenderId() {
 
 $(document).ready(function() {
     autoFlashHeight();
+    $('#right-view').css('width', _.round($('#left-view').parent().width() / 3));
+    $('#left-view').css('width', $('#left-view').parent().width());
     // 初始化台账
     const ledgerSpread = SpreadJsObj.createNewSpread($('#ledger-spread')[0]);
     SpreadJsObj.addDeleteBind(ledgerSpread);
@@ -840,26 +842,60 @@ $(document).ready(function() {
     }
 
     let stdChapter, stdBills, dealBills, searchLedger;
+
+    $.divResizer({
+        select: '#right-spr',
+        callback: function () {
+            ledgerSpread.refresh();
+            if (posSpread) {
+                posSpread.refresh();
+            }
+            if (stdChapter) {
+                stdChapter.spread.refresh();
+            }
+            if (stdBills) {
+                stdBills.spread.refresh();
+            }
+            if (dealBills) {
+                dealBills.spread.refresh();
+            }
+            if (searchLedger) {
+                searchLedger.spread.refresh();
+            }
+        }
+    });
     // 展开收起标准清单
-    $('a', '#side-menu').bind('click', function () {
+    $('a', '#side-menu').bind('click', function (e) {
+        e.preventDefault();
         const tab = $(this), tabPanel = $(tab.attr('content'));
         const showSideTools = function (show) {
+            const left = $('#left-view'), right = $('#right-view'), parent = left.parent();
             if (show) {
-                $('.c-body.col-12').removeClass('col-12').addClass('col-8');
-                $('.c-body.col-0').removeClass('col-0').addClass('col-4').show();
+                right.show();
+                autoFlashHeight();
+                /**
+                 * right.show()后, parent被撑开成2倍left.height, 导致parent.width减少了10px
+                 * 第一次left.width调整后,parent的缩回left.height, 此时parent.width又增加了10px
+                 * 故需要通过最终的parent.width再计算一次left.width
+                 *
+                 * Q: 为什么不通过先计算left.width的宽度,以避免计算两次left.width?
+                 * A: 右侧工具栏不一定显示,当右侧工具栏显示过一次后,就必须使用parent和right来计算left.width
+                 *
+                 */
+                left.css('width', parent.width() - right.outerWidth());
+                left.css('width', parent.width() - right.outerWidth());
             } else {
-                $('.c-body.col-8').removeClass('col-8').addClass('col-12');
-                $('.c-body.col-4').removeClass('col-4').addClass('col-0').hide();
+                left.width(parent.width());
+                right.hide();
             }
         };
         // 展开工具栏、切换标签
         if (!tab.hasClass('active')) {
             $('a', '#side-menu').removeClass('active');
             tab.addClass('active');
+            $('.tab-content .tab-pane').removeClass('active');
+            tabPanel.addClass('active');
             showSideTools(tab.hasClass('active'));
-            $('.tab-content .tab-pane').hide();
-            tabPanel.show();
-            autoFlashHeight();
             if (tab.attr('content') === '#std-chapter') {
                 if (!stdChapter) {
                     stdChapter = new stdLib($('#std-chapter-spread')[0], 'chapter', {
@@ -948,11 +984,13 @@ $(document).ready(function() {
             }
         } else { // 收起工具栏
             tab.removeClass('active');
-            showSideTools(tab.hasClass('active'));
             tabPanel.hide();
+            showSideTools(tab.hasClass('active'));
         }
         ledgerSpread.refresh();
-        posSpread.refresh();
+        if (posSpread) {
+            posSpread.refresh();
+        }
     });
 
     class stdLib {

+ 36 - 7
app/public/js/ledger_audit.js

@@ -18,6 +18,8 @@ function checkTzMeasureType () {
 
 $(document).ready(() => {
     autoFlashHeight();
+    $('#right-view').css('width', _.round($('#left-view').parent().width() / 3));
+    $('#left-view').css('width', $('#left-view').parent().width());
     const ledgerSpread = SpreadJsObj.createNewSpread($('#ledger-spread')[0]);
     const ledgerTree = createNewPathTree('base', {
         id: 'ledger_id',
@@ -74,24 +76,48 @@ $(document).ready(() => {
     });
 
     let dealBills;
+    $.divResizer({
+        select: '#right-spr',
+        callback: function () {
+            ledgerSpread.refresh();
+            if (posSpread) {
+                posSpread.refresh();
+            }
+            if (dealBills) {
+                dealBills.spread.refresh();
+            }
+        }
+    });
     // 展开收起 签约清单|清单意见
     $('a', '.side-menu').bind('click', function () {
         const tab = $(this), tabPanel = $(tab.attr('content'));
         const showSideTools = function (show) {
+            const left = $('#left-view'), right = $('#right-view'), parent = left.parent();
             if (show) {
-                $('.c-body.col-12').removeClass('col-12').addClass('col-8');
-                $('.c-body.col-0').removeClass('col-0').addClass('col-4').show();
+                right.show();
+                autoFlashHeight();
+                /**
+                 * right.show()后, parent被撑开成2倍left.height, 导致parent.width减少了10px
+                 * 第一次left.width调整后,parent的缩回left.height, 此时parent.width又增加了10px
+                 * 故需要通过最终的parent.width再计算一次left.width
+                 *
+                 * Q: 为什么不通过先计算left.width的宽度,以避免计算两次left.width?
+                 * A: 右侧工具栏不一定显示,当右侧工具栏显示过一次后,就必须使用parent和right来计算left.width
+                 *
+                 */
+                left.css('width', parent.width() - right.outerWidth());
+                left.css('width', parent.width() - right.outerWidth());
             } else {
-                $('.c-body.col-8').removeClass('col-8').addClass('col-12');
-                $('.c-body.col-4').removeClass('col-4').addClass('col-0').hide();
+                left.width(parent.width());
+                right.hide();
             }
         };
         if (!tab.hasClass('active')) {
             $('a', '#side-menu').removeClass('active');
             tab.addClass('active');
+            $('.tab-content .tab-pane').removeClass('active');
+            tabPanel.addClass('active');
             showSideTools(tab.hasClass('active'));
-            $('.tab-content .tab-pane').hide();
-            tabPanel.show();
             if (tab.attr('content') === '#deal-bills' && !dealBills) {
                 dealBills = new DealBills($('#deal-bills-spread')[0], {
                     cols: [
@@ -110,10 +136,13 @@ $(document).ready(() => {
             }
         } else {
             tab.removeClass('active');
+            tabPanel.removeClass('active');
             showSideTools(tab.hasClass('active'));
-            tabPanel.hide();
         }
         ledgerSpread.refresh();
+        if (posSpread) {
+            posSpread.refresh();
+        }
     });
     class DealBills {
         constructor (obj, spreadSetting) {

+ 3 - 2
app/view/ledger/audit.ejs

@@ -25,7 +25,7 @@
         <!--核心内容(两栏)-->
         <div class="row w-100 sub-content">
             <!--左栏-->
-            <div class="c-body col-12">
+            <div class="c-body" id="left-view">
                 <div class="sjs-height-1" id="ledger-spread">
                 </div>
                 <% if (tender.measure_type === measureType.tz.value) { %>
@@ -44,7 +44,8 @@
                 <% } %>
             </div>
             <!--右栏-->
-            <div class="c-body col-0" style="display: none;">
+            <div class="c-body" id="right-view" style="display: none;">
+                <div class="resize-x" id="right-spr" r-Type="width" div1="#left-view" div2="#right-view" title="调整大小" a-type="percent"><!--调整左右高度条--></div>
                 <div class="tab-content">
                     <div id="deal-bills" class="tab-pane">
                         <div class="sjs-bar-1"></div>

+ 7 - 6
app/view/ledger/explode.ejs

@@ -56,11 +56,11 @@
         <!--核心内容(两栏)-->
         <div class="row w-100 sub-content">
             <!--左栏-->
-            <div class="c-body col-12">
+            <div class="c-body" id="left-view">
                 <div id="ledger-spread" class="<% if (tender.measure_type === measureType.tz.value) { %>sjs-height-1<% } else { %>sjs-height-0<% } %>"></div>
                 <% if (tender.measure_type === measureType.tz.value) { %>
-                <div id="main-resize" r-Type="height" div1="#ledger-spread" div2="#main-bottom" store-id="explode-main" min="100"></div>
                 <div class="bcontent-wrap" id="main-bottom">
+                    <div id="main-resize" class="resize-y" id="top-spr" r-Type="height" div1=".sjs-height-1" div2=".bcontent-wrap" title="调整大小"><!--调整上下高度条--></div>
                     <div class="bc-bar mb-1">
                         <ul class="nav nav-tabs">
                             <li class="nav-item">
@@ -73,9 +73,10 @@
                 </div>
                 <% } %>
             </div>
-            <div class="c-body col-0" style="display: none;">
+            <div class="c-body" id="right-view" style="display: none;">
+                <div class="resize-x" id="right-spr" r-Type="width" div1="#left-view" div2="#right-view" title="调整大小" a-type="percent"><!--调整左右高度条--></div>
                 <div class="tab-content">
-                    <div id="search" class="tab-pane active">
+                    <div id="search" class="tab-pane">
                         <div class="sjs-bar-1">
                             <div class="input-group input-group-sm">
                                 <input id="searchKeyword" type="text" class="form-control" placeholder="项目节编号/清单编号/名称" aria-label="Recipient's username" aria-describedby="button-addon2">
@@ -87,7 +88,7 @@
                         <div id="search-result" class="sjs-sh-1">
                         </div>
                     </div>
-                    <div id="std-chapter" class="tab-pane active">
+                    <div id="std-chapter" class="tab-pane">
                         <div class="sjs-bar-2">
                             <select class="form-control form-control-sm"><option>0号计量台帐部位参考(项目节)</option></select>
                         </div>
@@ -96,7 +97,7 @@
                     </div>
                     <div id="std-bills" class="tab-pane">
                         <div class="sjs-bar-3">
-                            <select class="form-control form-control-sm"><option>0号计量台帐部位参考(项目节)</option></select>
+                            <select class="form-control form-control-sm"><option>0号计量台帐清单参考(工程量清单)</option></select>
                         </div>
                         <div id="std-bills-spread" class="sjs-sh-3">
                         </div>

+ 0 - 1
config/web.js

@@ -70,7 +70,6 @@ const JsFiles = {
         ledger: {
             explode: {
                 files: [
-                    "/public/js/iframe-resizer/iframeResizer.js",
                     "/public/js/js-xlsx/xlsx.full.min.js",
                     "/public/js/js-xlsx/xlsx.utils.js",
                     "/public/js/spreadjs/sheets/gc.spread.sheets.all.10.0.1.min.js",