1. 导入Excel清单，调整

2. 侧栏调整
3. 树结构绘制调整

app/public/css/main.css

@@ -1,12 +1,12 @@
 /*building SAAS 0.1*/
 /*bootstrap 初始化*/
 body {
-  font-size: 0.9rem;
-  overflow: hidden;
-  background: #e4e7ea
+    font-size: 0.9rem;
+    overflow: hidden;
+    background: #e4e7ea
 }
 .dropdown-menu {
-  font-size: 0.9rem
+    font-size: 0.9rem
 }
 .btn.disabled, .btn:disabled {
   color:#999
@@ -29,30 +29,30 @@ body {
 /*滚动条*/
 /* 滚动条 */
 ::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
-  width: 5px;
-  background-color: #ddd;
-  -webkit-border-radius: 6px;
+	width: 5px;
+	background-color: #ddd;
+	-webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-track-piece {
-  background-color: #fff; /*滚动条的背景颜色*/
-  -webkit-border-radius: 0; /*滚动条的圆角宽度*/
+	background-color: #fff; /*滚动条的背景颜色*/
+	-webkit-border-radius: 0; /*滚动条的圆角宽度*/
 }
 ::-webkit-scrollbar {
-  width: 10px; /*滚动条的宽度*/
-  height: 8px; /*滚动条的高度*/
+	width: 10px; /*滚动条的宽度*/
+	height: 8px; /*滚动条的高度*/
 }
 ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
-  height: 50px;
-  background-color: #ddd;
-  -webkit-border-radius: 6px;
-  outline: 1px solid #fff;
-  outline-offset: -1px;
-  border: 1px solid #fff;
+	height: 50px;
+	background-color: #ddd;
+	-webkit-border-radius: 6px;
+	outline: 1px solid #fff;
+	outline-offset: -1px;
+	border: 1px solid #fff;
 }
 ::-webkit-scrollbar-thumb:hover { /*滚动条的hover样式*/
-  height: 50px;
-  background-color: #999;
-  -webkit-border-radius: 6px;
+	height: 50px;
+	background-color: #999;
+	-webkit-border-radius: 6px;
 }
 .sjs-height-1,.sjs-height-2,.sjs-sh-1,.sjs-sh-2,.sjs-sh-3,.sjs-sh-4,.sjs-sh-5{
   overflow: hidden;
@@ -69,46 +69,46 @@ body {
   overflow-y: auto;
 }
 .form-signin {
-  max-width: 500px;
-  margin: 150px auto;
+    max-width: 500px;
+    margin: 150px auto;
 }
 .has-danger {
-  -webkit-animation: shake 1s .2s ease both;
-  -moz-animation: shake 1s .2s ease both;
-  animation: shake 1s .2s ease both;
+    -webkit-animation: shake 1s .2s ease both;
+    -moz-animation: shake 1s .2s ease both;
+    animation: shake 1s .2s ease both;
 }
 @-webkit-keyframes shake {
-  0%, 100% {
-    -webkit-transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    -webkit-transform: translateX(-10px);
-  }
-  20%, 40%, 60%, 80% {
-    -webkit-transform: translateX(10px);
-  }
+    0%, 100% {
+        -webkit-transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        -webkit-transform: translateX(-10px);
+    }
+    20%, 40%, 60%, 80% {
+        -webkit-transform: translateX(10px);
+    }
 }
 @-moz-keyframes shake {
-  0%, 100% {
-    -moz-transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    -moz-transform: translateX(-10px);
-  }
-  20%, 40%, 60%, 80% {
-    -moz-transform: translateX(10px);
-  }
+    0%, 100% {
+        -moz-transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        -moz-transform: translateX(-10px);
+    }
+    20%, 40%, 60%, 80% {
+        -moz-transform: translateX(10px);
+    }
 }
 @keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-10px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(10px);
-  }
+    0%, 100% {
+        transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-10px);
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(10px);
+    }
 }
 /*2.主体框架*/
 .header {
@@ -166,6 +166,9 @@ body {
   height:50px;
   line-height: 50px
 }
+.panel-title .dropdown-item,.panel-title .dropdown-item-text,.panel-title .form-group {
+  line-height: normal;
+}
 .panel-title{
   position: fixed;
   top:0px;
@@ -214,7 +217,7 @@ body {
 .side-menu{
   position: fixed;
   right:15px;
-  top:66px
+  top:65px
 }
 .side-menu .nav-link{
   line-height: 16px;
@@ -224,34 +227,37 @@ body {
   margin:0;
 }
 .pr-46{
-  padding-right:46px
+  padding-right:36px
 }
 .bcontent-wrap{
-  height: 350px
-}
+    height: 350px
+  }
 @media only screen and (max-height: 768px) {
   .bcontent-wrap{
     height: 250px
   }
 }
+.modal-xl {
+  max-width: 1000px
+}
 /*滚动*/
 .scrollbar-auto {
-  overflow-y: auto;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  top: 0;
-  right: 0;
+    overflow-y: auto;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    top: 0;
+    right: 0;
 }
 .panel-sidebar .scrollbar-auto{
-  padding-top: 20px;
-  box-sizing: border-box;
+    padding-top: 20px;
+    box-sizing: border-box;
 }
 .panel-sidebar .scrollbar-auto {
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-  position: static;
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    position: static;
 }
 /*头部*/
 .header .logo {
@@ -371,9 +377,9 @@ body {
 }
 .bg-nav > li.active a span{
   display: block;
-}
+  }
 .bg-nav > li + li {
-  margin-top:0;
+    margin-top:0;
 }
 .bg-nav .sub-menu {
   list-style:none;
@@ -404,6 +410,13 @@ body {
 .nav-box > .sub-list > li > a{
   padding-left: 40px
 }
+.nav-box .tips-dot {
+  right:20px;
+  top:8px
+}
+.nav-box .nav-list li{
+  position: relative;
+}
 .nav-list li a{
   color: #333;
   display: block;
@@ -429,6 +442,9 @@ body {
   background:#e4e7ea;
   font-weight: 600
 }
+.side-menu .nav-link{
+  padding:.5rem .6rem;
+}
 /*内容区*/
 .c-header {
   padding:0 0 5px
@@ -438,7 +454,7 @@ body {
   background:#fff;
 }
 .right-nav{
-  width:46px
+  width:36px
 }
 .right-nav .nav-link.active{
   background: #fff;
@@ -449,7 +465,7 @@ body {
   color:#f90000
 }
 .bg-gray {
-  background-color:#bbb!important;
+ background-color:#bbb!important;
 }
 .datepickers-container {
   z-index: 9999
@@ -544,8 +560,10 @@ body {
   width:inherit;
   height: inherit;
 }
-
-#tablist .active {
-  background: #e4e7ea;
-  font-weight: 600;
-}
+.m-close-side{
+  position: absolute;
+  left:-6px;
+  top:250px;
+  background: #f2f2f2;
+  padding:30px 3px;
+}

app/public/css/spreadjs/sheets/gc.spread.sheets.excelsmartcost.css

@@ -127,11 +127,11 @@
     border-right-color: #ababab !important;
 }
 .gc-horizontal-scrollbar {
-    background-color: #efefef;
+    background-color: #fff;
     border-top-color: #efefef;
 }
 .gc-vertical-scrollbar {
-    background-color: #efefef;
+    background-color: #fff;
     border-left-color: #efefef;
 }
 .gc-footer-corner {

app/public/js/global.js

@@ -29,10 +29,10 @@ function autoFlashHeight(){
     $(".sp-wrap").height(bcontent-40);
     /*侧栏高度*/
     $(".sjs-sh-1").height($(window).height()-cHeader-sBar1-110);
-    $(".sjs-sh-2").height($(window).height()-cHeader-sBar1-110);
-    $(".sjs-sh-3").height($(window).height()-cHeader-sBar1-110);
-    $(".sjs-sh-4").height($(window).height()-cHeader-sBar1-110);
-    $(".sjs-sh-5").height($(window).height()-cHeader-sBar1-110);
+    $(".sjs-sh-2").height($(window).height()-cHeader-sBar2-110);
+    $(".sjs-sh-3").height($(window).height()-cHeader-sBar3-110);
+    $(".sjs-sh-4").height($(window).height()-cHeader-sBar4-110);
+    $(".sjs-sh-5").height($(window).height()-cHeader-sBar5-110);
 };
 $(window).resize(autoFlashHeight);
 /*全局自适应高度结束*/

app/public/js/ledger.js

@@ -1275,17 +1275,24 @@ $(document).ready(function() {
             xlsxUtils.import(this.files[0], (excelData) => {
                 if (excelData.SheetNames.length > 0) {
                     const html = [];
-                    html.push('<label for="exampleFormControlFile1">勾选要导入的工作簿</label>');
-                    html.push('<div class="form-control">')
+                    html.push('<hr></hr>');
+                    html.push('<h6>选择导入的工作表</h6>');
                     for (const iName in excelData.SheetNames) {
                         const name = excelData.SheetNames[iName];
-                        html.push('<div class="form-group form-check">');
-                        html.push('<input type="radio" class="form-check-input" name="sheetName"', (iName == 0 ? ' checked=""' : ''), ' value="' + name + '"',  '>');
-                        html.push('<label class="form-check-label" for="ledger-dgn-qty">', name, '</label>');
+                        html.push('<div class="card p-2 mb-2">');
+                        html.push('<div class="form-check">');
+                        html.push('<input class="form-check-input" type="radio" name="sheetName" id="excel-sheet' + iName + '"', (iName == 0 ? ' checked=""' : ''), ' value="' + name + '"',  '>');
+                        html.push('<label class="form-check-label" for="excel-sheet' + iName + '">', name, '</label>');
+                        html.push('</div>');
                         html.push('</div>');
                     }
-                    html.push('</div>');
                     $('#upload-ledger-sheets').html(html.join('')).show();
+                    $('.mb-2.p-2').mouseenter(function () {
+                        $(this).addClass('border-primary');
+                    });
+                    $('.mb-2.p-2').mouseleave(function () {
+                        $(this).removeClass('border-primary');
+                    })
                 } else {
                     toast('选择的Excel无有效数据，请重新选择', 'hint');
                     $('#upload-ledger-sheets').hide();

app/public/js/spreadjs_rela/spreadjs_zh.js

@@ -6,6 +6,27 @@
  * @version
  */
 
+// 定义画点线的方法
+const proto = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
+proto.dottedLine = function (x1, y1, x2, y2, interval = 4) {
+    const isHorizontal = x1 == x2 ? false : true;
+    const dotLen = 1;
+    let len = isHorizontal ? x2 - x1 : y2 - y1;
+    this.moveTo(x1, y1);
+    let progress = 0;
+    while (len > progress) {
+        if (progress > len) { progress = len; }
+        if (isHorizontal) {
+            this.moveTo(x1 + progress, y1);
+            this.lineTo(x1 + progress + dotLen, y1);
+        } else {
+            this.moveTo(x1, y1 + progress);
+            this.lineTo(x1, y1 + progress + dotLen);
+        }
+        progress += interval;
+    }
+};
+
 const spreadNS = GC.Spread.Sheets;
 const SpreadJsObj = {
     DataType: {
@@ -534,6 +555,25 @@ const SpreadJsObj = {
             const halfExpandLength = 3;
 
             /**
+             * 画一条点线段
+             * @param canvas - 画布
+             * @param x1 - 线段起点 x
+             * @param y1 - 线段起点 y
+             * @param x2 - 线段终点 x
+             * @param y2 - 线段终点 y
+             * @param color - 线段颜色
+             */
+            const drawDotLine = function (canvas, x1, y1, x2, y2, color) {
+                canvas.save();
+                // 设置偏移量
+                canvas.translate(0.5, 0.5);
+                canvas.beginPath();
+                canvas.strokeStyle = color;
+                canvas.dottedLine(x1, y1, x2, y2);
+                canvas.stroke();
+                canvas.restore();
+            };
+            /**
              * 画一条线段
              * @param canvas - 画布
              * @param x1 - 线段起点 x
@@ -599,18 +639,18 @@ const SpreadJsObj = {
                 if (rect.left < x + w) {
                     // 方框超出单元格宽度时，超出部分不画。
                     rect.right = Math.min(rect.right, x + w);
-                    drawBox(canvas, rect, 'black', 'white');
+                    drawBox(canvas, rect, '#808080', 'white');
 
                     // 画中心十字
                     // 画十字横线
                     h1 = centerX - halfExpandLength;
                     h2 = Math.min(centerX + halfExpandLength, x + w);
                     if (h2 > h1) {
-                        drawLine(canvas, h1, centerY, h2, centerY, 'black');
+                        drawLine(canvas, h1, centerY, h2, centerY, '#808080');
                     }
                     // 画十字竖线
                     if (!expanded && (centerX < x + w)) {
-                        drawLine(canvas, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, 'black');
+                        drawLine(canvas, centerX, centerY - halfExpandLength, centerX, centerY + halfExpandLength, '#808080');
                     }
                 }
             };
@@ -654,7 +694,8 @@ const SpreadJsObj = {
                             // Draw Horizontal Line
                             if (centerX < x + w) {
                                 const x1 = centerX + indent / 2;
-                                drawLine(canvas, centerX, centerY, Math.min(x1, x + w), centerY, 'gray');
+                                //drawLine(canvas, centerX, centerY, Math.min(x1, x + w), centerY, 'gray');
+                                drawDotLine(canvas, centerX, centerY, Math.min(x1, x + w), centerY, '#ccc');
                             }
                             // Draw Vertical Line
                             if (centerX < x + w) {
@@ -662,9 +703,11 @@ const SpreadJsObj = {
                                 const parent = tree.getParent(node);
                                 const y2 = y1 - centerY;
                                 if (node.order === 1 && !parent) {
-                                    drawLine(canvas, centerX, centerY, centerX, y1, 'gray');
+                                    //drawLine(canvas, centerX, centerY, centerX, y1, 'gray');
+                                    drawDotLine(canvas, centerX, centerY, centerX, y1, '#ccc');
                                 } else {
-                                    drawLine(canvas, centerX, y, centerX, y1, 'gray');
+                                    //drawLine(canvas, centerX, y, centerX, y1, 'gray');
+                                    drawDotLine(canvas, centerX, y, centerX, y1, '#ccc');
                                 }
                             }
                         }
@@ -678,7 +721,8 @@ const SpreadJsObj = {
                             while (parent) {
                                 if (!tree.isLastSibling(parent)) {
                                     if (parentCenterX < x + w) {
-                                        drawLine(canvas, parentCenterX, y, parentCenterX, y + h, 'gray');
+                                        //drawLine(canvas, parentCenterX, y, parentCenterX, y + h, 'gray');
+                                        drawDotLine(canvas, parentCenterX, y, parentCenterX, y + h, '#ccc');
                                     }
                                 }
                                 parent = tree.getParent(parent);

app/view/ledger/explode_modal.ejs

@@ -3,19 +3,17 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">导入清单Excel</h5>
+                <h5 class="modal-title">导入</h5>
             </div>
             <div class="modal-body">
+                <p>请上传符合格式的 <b>0号台帐</b> 格式的 .xls和.xlsx 文件，<a id="downloadLedgerTemplate" href="/tender/<%- ctx.tender.id %>/ledger/download/template">下载示例</a>。</p>
                 <div class="form-group">
-                    <label for="exampleFormControlFile1">Excel模板</label>
-                    <div class="form-control"><a id="downloadLedgerTemplate" href="/tender/<%- ctx.tender.id %>/ledger/download/template" class="btn btn-sm btn-link">下载</a></div>
-                </div>
-                <div class="form-group">
-                    <label for="exampleFormControlFile1">导入清单Excel文件</label>
-                    <div class="form-control"><input type="file" class="form-control-file" id="upload-ledger-file" accept="*.xls"></div>
+                    <label for="exampleFormControlFile1">选择文件</label>
+                    <input type="file" class="form-control-file" id="upload-ledger-file" accept="*.xls">
                 </div>
-                <div class="form-group" id="upload-ledger-sheets" style="display: none;">
-                    <label for="exampleFormControlFile1">勾选要导入的Sheet</label>
+                <div id="upload-ledger-sheets" style="display: none;">
+                    <hr></hr>
+                    <h6>选择导入的工作表</h6>
                 </div>
             </div>
             <div class="modal-footer">