项目主视图之下面部分。

public/web/sheet/sheet_common.js

@@ -2,6 +2,33 @@
  * Created by Tony on 2017/4/28.
  */
 var sheetCommonObj = {
+    // CSL.2017.06.05
+    // createSpread、initSheet 在一个Spread多个Sheet分别调用时的情况下使用。
+    // buildSheet 在一个Spread、一个Sheet的情况下使用。
+    createSpread: function(container, SheetCount){
+        var me = this;
+        var spreadBook = new GC.Spread.Sheets.Workbook(container, { sheetCount: SheetCount });
+        spreadBook.options.tabStripVisible = false;
+        spreadBook.options.showHorizontalScrollbar = false;
+        return spreadBook;
+    },
+
+    initSheet: function(sheet, setting, rowCount) {
+        var me = this;
+        var spreadNS = GC.Spread.Sheets;
+        sheet.suspendPaint();
+        sheet.suspendEvent();
+        sheet.setRowCount(1, spreadNS.SheetArea.colHeader);
+        sheet.setColumnCount(setting.header.length, spreadNS.SheetArea.viewport);
+        sheet.options.colHeaderAutoTextIndex = 1;
+        sheet.options.colHeaderAutoText = spreadNS.HeaderAutoText.numbers;
+        sheet.showRowOutline(false);
+        me.buildHeader(sheet, setting);
+        if (rowCount > 0) sheet.setRowCount(rowCount);
+        sheet.resumeEvent();
+        sheet.resumePaint();
+    },
+
     buildSheet: function(container, setting, rowCount) {
         var me = this;
         var spreadBook = new GC.Spread.Sheets.Workbook(container, { sheetCount: 1 });

web/building_saas/main/html/main.html

@@ -129,63 +129,35 @@
                           <div class="bottom-content">
                               <ul class="nav nav-tabs" role="tablist">
                                   <li class="nav-item">
-                                      <a class="nav-link active" data-toggle="tab" href="#gl" role="tab">工料机</a>
+                                      <a class="nav-link active" id="linkGLJ" data-toggle="tab" href="#subSpread" role="tab">工料机</a>
                                   </li>
                                   <li class="nav-item">
-                                      <a class="nav-link" data-toggle="tab" href="#fzt" role="tab">附注条件</a>
+                                      <a class="nav-link" id="linkFZTJ" data-toggle="tab" href="#subSpread" role="tab">附注条件</a>
                                   </li>
                                   <li class="nav-item">
-                                      <a class="nav-link" data-toggle="tab" href="#fzd" role="tab">辅助定额</a>
+                                      <a class="nav-link" id="linkFZDE" data-toggle="tab" href="#subSpread" role="tab">辅助定额</a>
                                   </li>
                                   <li class="nav-item">
-                                      <a class="nav-link" data-toggle="tab" href="#gc" role="tab">工程量明细</a>
+                                      <a class="nav-link" id="linkGCLMX" data-toggle="tab" href="#subSpread" role="tab">工程量明细</a>
                                   </li>
                                   <li class="nav-item">
-                                      <a class="nav-link" data-toggle="tab" href="#dj" role="tab">单价构成</a>
+                                      <a class="nav-link" id="linkJSCX" data-toggle="tab" href="#subSpread" role="tab">计算程序</a>
                                   </li>
                                   <li class="nav-item">
-                                      <a class="nav-link" data-toggle="tab" href="#fx" role="tab">分项说明</a>
+                                      <a class="nav-link" id="linkFXSM" data-toggle="tab" href="#subSpread" role="tab">分项说明</a>
                                   </li>
                                   <li class="nav-item">
-                                      <a class="nav-link" data-toggle="tab" href="#des" role="tab">定额说明</a>
+                                      <a class="nav-link" id="linkDESM" data-toggle="tab" href="#subSpread" role="tab">定额说明</a>
                                   </li>
                               </ul>
                               <!-- Tab panes -->
                               <div class="tab-content">
                                   <div class="tab-pane active" id="gl" role="tabpanel">
-                                      <div class="main-data-bottom ovf-hidden" id="gljSpread">
-                                      </div>
-                                  </div>
-                                  <div class="tab-pane" id="fzt" role="tabpanel">
-                                      <div class="warp-p2">
-                                          附注条件的内容
-                                      </div>
-                                  </div>
-                                  <div class="tab-pane" id="fzd" role="tabpanel">
-                                      <div class="warp-p2">
-                                          辅助定额的内容
-                                      </div>
-                                  </div>
-                                  <div class="tab-pane" id="gc" role="tabpanel">
-                                      <div class="warp-p2">
-                                          工程量明细的内容
-                                      </div>
-                                  </div>
-                                  <div class="tab-pane" id="dj" role="tabpanel">
-                                      <div class="warp-p2">
-                                          单价构成的内容
-                                      </div>
-                                  </div>
-                                  <div class="tab-pane" id="fx" role="tabpanel">
-                                      <div class="warp-p2">
-                                          分项说明的内容
-                                      </div>
-                                  </div>
-                                  <div class="tab-pane" id="des" role="tabpanel">
-                                      <div class="warp-p2">
-                                          定额说明的内容
+                                      <div class="main-data-bottom ovf-hidden" id="subSpread">
                                       </div>
                                   </div>
+
+                                  
                               </div>
                           </div>
                       </div>
@@ -490,12 +462,13 @@
 
     <script src="/lib/tether/tether.min.js"></script>
     <script src="/lib/bootstrap/bootstrap.min.js"></script>
-    <script type="text/javascript" src="/lib/bootstrap/bootstrap-select.min.js"></script>
+    <!--<script type="text/javascript" src="/lib/bootstrap/bootstrap-select.min.js"></script>-->
     <script type="text/javascript" src="/lib/jquery-contextmenu/jquery.contextMenu.js"></script>
     <script type="text/javascript" src="/lib/jquery-contextmenu/jquery.ui.position.js"></script>
     <!-- Common -->
     <script type="text/javascript" src="/public/web/common_ajax.js"></script>
     <script type="text/javascript" src="/public/web/url_util.js"></script>
+    <script type="text/javascript" src="/public/web/sheet/sheet_common.js"></script>
     <!--报表 zTree -->
     <script type="text/javascript" src="/lib/ztree/jquery.ztree.core.js"></script>
     <script type="text/javascript" src="/lib/ztree/jquery.ztree.excheck.js"></script>
@@ -533,6 +506,8 @@
     <script type="text/javascript" src="/public/web/rpt_tpl_def.js"></script>
     <script type="text/javascript" src="/web/building_saas/main/js/rpt/rpt_main.js"></script>
     <script type="text/javascript" src="/web/building_saas/main/js/rpt/rpt_cfg_const.js"></script>
+    <script type="text/javascript" src="/web/building_saas/main/js/views/glj_view.js"></script>
+    <script type="text/javascript" src="/web/building_saas/main/js/views/sub_view.js"></script>
 
     <SCRIPT type="text/javascript">
   		<!--
@@ -584,6 +559,6 @@
   		});
   		//-->
   	</SCRIPT>
-    <script type="text/javascript" src="/web/building_saas/main/js/views/gljView.js"></script>
+
 </body>
 </html>

web/building_saas/main/js/views/gljView.js

@@ -1,117 +0,0 @@
-/**
- * Created by CSL on 2017-05-12.
- */
-
-var gljView = {
-    spreadBook: null,
-    setting: {
-        header: [
-            {headerName: "编码", headerWidth: 60, dataCode: "ID", dataType: "String", formatter: "@"},
-            {headerName: "名称", headerWidth: 80, dataCode: "name", dataType: "String"},
-            {headerName: "规格型号", headerWidth: 80, dataCode: "specs", dataType: "String", hAlign: "center"},
-            {headerName: "单位", headerWidth: 60, dataCode: "unit", dataType: "String", hAlign: "center"},
-            {headerName: "类别", headerWidth: 50, dataCode: "gljType", dataType: "String", hAlign: "center"},
-            {headerName: "定额消耗量", headerWidth: 80, dataCode: "orgRQuantity", dataType: "String", hAlign: "right"},    // dataType: "Number", formatter: "0.00"
-            {headerName: "自定义消耗量", headerWidth: 80, dataCode: "customQuantity", dataType: "String", hAlign: "right"},
-            {headerName: "消耗量", headerWidth: 80, dataCode: "quantity", dataType: "String", hAlign: "right"},
-            {headerName: "数量", headerWidth: 80, dataCode: "rationItemQuantity", dataType: "String", hAlign: "right"},
-            {headerName: "基价单价", headerWidth: 80, dataCode: "rationPrice", dataType: "String", hAlign: "right"},
-            {headerName: "调整基价", headerWidth: 80, dataCode: "adjustPrice", dataType: "String", hAlign: "right"},
-            {headerName: "市场单价", headerWidth: 80, dataCode: "marketPrice", dataType: "String", hAlign: "right"},
-            {headerName: "市场单价调整", headerWidth: 80, dataCode: "price", dataType: "String", hAlign: "right"}
-        ],
-        view: {
-            comboBox: [{row: -1, col: 2, rowCount: -1, colCount: 1}],
-            lockedCells: [{row: -1, col: 3, rowCount: -1, colCount: 1}]
-        }
-    },
-
-    buildSheet: function (container) {
-        var me = this;
-        me.spreadBook = new GC.Spread.Sheets.Workbook(container, { sheetCount: 1 });
-        me.spreadBook.options.tabStripVisible = false;
-        me.spreadBook.options.showHorizontalScrollbar = false;
-
-        var sheet = me.spreadBook.getSheet(0);
-        sheet.suspendPaint();
-        sheet.suspendEvent();
-        var shts = GC.Spread.Sheets;
-        sheet.setRowCount(1, shts.SheetArea.colHeader);
-        sheet.setColumnCount(me.setting.header.length, shts.SheetArea.viewport);
-        sheet.options.colHeaderAutoTextIndex = 1;
-        sheet.options.colHeaderAutoText = shts.HeaderAutoText.numbers;
-        sheet.showRowOutline(false);
-
-        for (var i = 0; i < me.setting.header.length; i++) {
-            sheet.setValue(0, i, me.setting.header[i].headerName, shts.SheetArea.colHeader);
-            sheet.setColumnWidth(i, me.setting.header[i].headerWidth? me.setting.header[i].headerWidth:100);
-        }
-
-        sheet.setRowCount(20);
-        sheet.resumeEvent();
-        sheet.resumePaint();
-
-        return me.spreadBook;
-    },
-
-    showDatas: function(datas) {
-        var me = this;
-        var sheet = me.spreadBook.getSheet(0);
-        sheet.suspendPaint();
-        sheet.suspendEvent();
-        for (var col = 0; col < me.setting.header.length; col++) {
-            var hAlign = "left", vAlign = "center";
-            if (me.setting.header[col].hAlign) {
-                hAlign = me.setting.header[col].hAlign;
-            } else if (me.setting.header[col].dataType !== "String"){
-                hAlign = "right";
-            }
-            vAlign = me.setting.header[col].vAlign?me.setting.header[col].vAlign:vAlign;
-            me.setAreaAlign(sheet.getRange(-1, col, -1, 1), hAlign, vAlign);
-            if (me.setting.header[col].formatter) {
-                sheet.setFormatter(-1, col, me.setting.header[col].formatter, GC.Spread.Sheets.SheetArea.viewport);
-            }
-            for (var row = 0; row < datas.length; row++) {
-                sheet.setValue(row, col, datas[row][me.setting.header[col].dataCode], GC.Spread.Sheets.SheetArea.viewport);
-            }
-        }
-        sheet.resumeEvent();
-        sheet.resumePaint();
-    },
-
-    setAreaAlign: function(area, hAlign, vAlign){
-        if (!(hAlign) || hAlign === "left") {
-            area.hAlign(GC.Spread.Sheets.HorizontalAlign.left);
-        } else if (hAlign === "right") {
-            area.hAlign(GC.Spread.Sheets.HorizontalAlign.right);
-        } else if (hAlign === "center") {
-            area.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
-        } else {
-            area.hAlign(GC.Spread.Sheets.HorizontalAlign.left);
-        }
-        if (!(vAlign) || vAlign === "center") {
-            area.vAlign(GC.Spread.Sheets.VerticalAlign.center);
-        } else if (vAlign === "top") {
-            area.vAlign(GC.Spread.Sheets.VerticalAlign.top);
-        } else if (vAlign === "bottom") {
-            area.vAlign(GC.Spread.Sheets.VerticalAlign.bottom);
-        } else {
-            area.vAlign(GC.Spread.Sheets.VerticalAlign.center);
-        }
-    }
-
-}
-
-function objTest(obj) {
-    var str = "";
-    var spr = "";
-    for (var x in obj) {
-        if (obj.hasOwnProperty(x)) {
-            if(str == ''){ spr = '' } else { spr = ', '};
-            str += spr + x + ':' + obj[x];
-        }
-    }
-    return str;
-}
-
-gljView.buildSheet($("#gljSpread")[0]);

web/building_saas/main/js/views/glj_view.js

@@ -0,0 +1,72 @@
+/**
+ * Created by CSL on 2017-05-12.
+ */
+
+var gljOprObj = {
+    sheet: null,
+    libID: null,
+    ration: null,
+    setting: {
+        header: [
+            {headerName: "编码", headerWidth: 60, dataCode: "ID", dataType: "String", formatter: "@"},
+            {headerName: "名称", headerWidth: 80, dataCode: "name", dataType: "String"},
+            {headerName: "规格型号", headerWidth: 80, dataCode: "specs", dataType: "String", hAlign: "center"},
+            {headerName: "单位", headerWidth: 60, dataCode: "unit", dataType: "String", hAlign: "center"},
+            {headerName: "类别", headerWidth: 50, dataCode: "gljType", dataType: "String", hAlign: "center"},
+            {headerName: "定额消耗量", headerWidth: 80, dataCode: "orgRQuantity", dataType: "String", hAlign: "right"},    // dataType: "Number", formatter: "0.00"
+            {headerName: "自定义消耗量", headerWidth: 80, dataCode: "customQuantity", dataType: "String", hAlign: "right"},
+            {headerName: "消耗量", headerWidth: 80, dataCode: "quantity", dataType: "String", hAlign: "right"},
+            {headerName: "数量", headerWidth: 80, dataCode: "rationItemQuantity", dataType: "String", hAlign: "right"},
+            {headerName: "基价单价", headerWidth: 80, dataCode: "rationPrice", dataType: "String", hAlign: "right"},
+            {headerName: "调整基价", headerWidth: 80, dataCode: "adjustPrice", dataType: "String", hAlign: "right"},
+            {headerName: "市场单价", headerWidth: 80, dataCode: "marketPrice", dataType: "String", hAlign: "right"},
+            {headerName: "市场单价调整", headerWidth: 80, dataCode: "price", dataType: "String", hAlign: "right"}
+        ],
+        view: {
+            comboBox: [{row: -1, col: 2, rowCount: -1, colCount: 1}],
+            lockedCells: [{row: -1, col: 3, rowCount: -1, colCount: 1}]
+        }
+    },
+
+    initSheet: function(sheet) {
+        var me = this;
+        me.sheet = sheet;
+        sheetCommonObj.initSheet(me.sheet, me.setting, 30);
+
+        var unit = new GC.Spread.Sheets.CellTypes.ComboBox();
+        unit.items(["米","千克"]);
+        me.sheet.getRange(-1, 3, -1, 1).cellType(unit);
+
+        sheet.bind(GC.Spread.Sheets.Events.ClipboardPasting, me.onClipboardPasting);
+        sheet.bind(GC.Spread.Sheets.Events.ClipboardPasted, me.onClipboardPasted);
+        sheet.bind(GC.Spread.Sheets.Events.EditEnded, me.onEditEnded);
+        sheet.bind(GC.Spread.Sheets.Events.RangeChanged, me.onRangeChanged);
+    },
+
+    onClipboardPasting: function(sender, args) {
+        var me = gljOprObj;
+        if (!me.ration) {
+            args.cancel = true;
+        }
+    },
+
+    onClipboardPasted: function(e, info) {
+        var me = gljOprObj;
+        if (!me.ration) {return;};
+        // your code...
+    },
+
+    onEditEnded: function(sender, args){
+        var me = gljOprObj;
+        if (!me.ration) {return;};
+        // your code...
+    },
+
+    onRangeChanged: function(sender, args) {
+        if (args.action == GC.Spread.Sheets.RangeChangedAction.clear) {
+            if (!confirm(`确定要删除选中的 ${args.rowCount} 条辅助定额吗？`)){return; }
+            // your code...
+        };
+    }
+}
+

web/building_saas/main/js/views/sub_view.js

@@ -0,0 +1,58 @@
+/**
+ * Created by CSL on 2017-07-04.
+ */
+
+// Tab panes 下有多个Spread时，相互之间不能正确显示。改成一个Spread下多个Sheet。
+var subSpread = sheetCommonObj.createSpread($("#subSpread")[0], 7);
+
+
+// 工料机
+gljOprObj.initSheet(subSpread.getSheet(0));
+sheetCommonObj.shieldAllCells(subSpread.getSheet(0), gljOprObj.setting);
+
+// assistOprObj.initSheet(subSpread.getSheet(1));
+// sheetCommonObj.shieldAllCells(subSpread.getSheet(1), assistOprObj.setting);
+
+
+
+$("#linkGLJ").click(function(){
+    subSpread.setActiveSheetIndex(0);
+    // for test
+    subSpread.getActiveSheet().setValue(0, 0, "工料机");
+});
+
+$("#linkFZDE").click(function(){
+    subSpread.setActiveSheetIndex(1);
+    // for test
+    subSpread.getActiveSheet().setValue(0, 0, "辅助定额");
+});
+
+$("#linkFZTJ").click(function(){
+    subSpread.setActiveSheetIndex(2);
+    // for test
+    subSpread.getActiveSheet().setValue(0, 0, "附注条件");
+});
+
+$("#linkGCLMX").click(function(){
+    subSpread.setActiveSheetIndex(3);
+    // for test
+    subSpread.getActiveSheet().setValue(0, 0, "工程量明细");
+});
+
+$("#linkJSCX").click(function(){
+    subSpread.setActiveSheetIndex(4);
+    // for test
+    subSpread.getActiveSheet().setValue(0, 0, "计算程序");
+});
+
+$("#linkFXSM").click(function(){
+    subSpread.setActiveSheetIndex(5);
+    // for test
+    subSpread.getActiveSheet().setValue(0, 0, "分项说明");
+});
+
+$("#linkDESM").click(function(){
+    subSpread.setActiveSheetIndex(6);
+    // for test
+    subSpread.getActiveSheet().setValue(0, 0, "定额说明");
+});