动态投资，列显示

app/public/js/budget_compare.js

@@ -1,12 +1,42 @@
 'use strict';
+/**
+ * 从cookie中读取缓存的列显示设置，没有则取默认
+ * @returns {*[]}
+ */
+function customColDisplay () {
+    const defaultSetting = [
+        { title: '投资估算', fields: ['gu_dgn_qty', 'gu_dgn_price', 'gu_tp'], visible: true },
+        { title: '设计概算', fields: ['gai_dgn_qty', 'gai_dgn_price', 'gai_tp'], visible: true },
+        { title: '施工图预算', fields: ['yu_dgn_qty', 'yu_dgn_price', 'yu_tp'], visible: true },
+        { title: '招标预算', fields: ['zb_dgn_qty', 'zb_dgn_price', 'zb_tp'], visible: true },
+        { title: '台账', fields: ['dgn_qty', 'dgn_price', 'total_price'], visible: true },
+        { title: '预估决算', fields: ['final_dgn_qty', 'final_dgn_price', 'final_tp'], visible: true },
+    ];
+    const settingStr = Cookies.get(ckColSetting);
+    if (settingStr) {
+        const customSetting = JSON.parse(settingStr);
+        for (const ds of defaultSetting) {
+            const cs = customSetting.find(x => {return x.title === ds.title});
+            if (cs) ds.visible = cs.visible;
+        }
+    }
+    return defaultSetting;
+}
 
 /**
- *
- *
- * @author Mai
- * @date
- * @version
+ * 根据列显示设置，调整setting中的列是否显示
+ * @param setting
+ * @param customDisplay
  */
+function customizeTreeSetting(setting, customDisplay) {
+    for (const cd of customDisplay) {
+        for (const c of setting.cols) {
+            if (cd.fields.indexOf(c.field) !== -1) {
+                c.visible = c.defaultVisible === undefined ? cd.visible : c.defaultVisible && cd.visible;
+            }
+        }
+    }
+}
 
 $(document).ready(() => {
     const compareTypeKey = 'budget-compareType';
@@ -244,9 +274,11 @@ $(document).ready(() => {
             $('[name=showType]').removeClass('active');
             $(`[tag=${this.compareType}]`).addClass('active');
             if (this.compareType === 'grid') {
-                $('.ml-auto').show();
+                $('.ml-grid').show();
+                $('.ml-number').hide();
             } else {
-                $('.ml-auto').hide();
+                $('.ml-grid').hide();
+                $('.ml-number').show();
             }
             spreadSetting.cols.forEach(x => {
                 if (!x.bc_type) return;
@@ -339,7 +371,6 @@ $(document).ready(() => {
         });
     })('a[name=showLevel]', compareSheet);
 
-
     class sfObject {
         constructor() {
             const self = this;
@@ -459,4 +490,31 @@ $(document).ready(() => {
             }
         });
     });
+
+    $('#row-view').on('show.bs.modal', function () {
+        const html = [], customDisplay = customColDisplay();
+        for (const cd of customDisplay) {
+            html.push('<tr>');
+            html.push('<td>', cd.title, '</td>');
+            html.push('<td>', '<input type="checkbox"' + (cd.visible ? ' checked=""' : '') + '>', '</td>');
+            html.push('</tr>');
+        }
+        $('#row-view-list').html(html.join(''));
+    });
+    $('#row-view-ok').click(function () {
+        const customDisplay = customColDisplay();
+        const cvl = $('#row-view-list').children();
+        for (const cv of cvl) {
+            const title = $(cv).children()[0].innerHTML;
+            const check = $('input', cv)[0].checked;
+            const cd = customDisplay.find(function (c) {
+                return c.title === title;
+            });
+            cd.visible = check;
+        }
+        customizeTreeSetting(spreadSetting, customDisplay);
+        SpreadJsObj.refreshColumnVisible(compareSheet);
+        Cookies.set(ckColSetting, JSON.stringify(customDisplay), 30*24*60*60*1000);
+        $('#row-view').modal('hide');
+    });
 });

app/view/budget/compare.ejs

@@ -35,7 +35,7 @@
                 <div class="d-inline-block ml-2" id="final-info">
                 </div>
             </div>
-            <div class="ml-auto">
+            <div class="ml-auto ml-grid">
                 <div class="d-inline-block">
                     <div class="dropdown">
                         <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dp-stackedBar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -88,6 +88,11 @@
                     </div>
                 </div>
             </div>
+            <div class="ml-auto ml-number">
+                <div class="d-inline-block">
+                    <button href="#row-view" class="btn btn-sm btn-ligth text-primary" data-toggle="modal" data-target="#row-view"><i class="fa fa-table"></i> 列显示</button>
+                </div>
+            </div>
         </div>
     </div>
     <div class="content-wrap">
@@ -102,4 +107,5 @@
 <script>
     const category = JSON.parse(unescape('<%- escape(JSON.stringify(categoryData)) %>'));
     const tenderList = JSON.parse(unescape('<%- escape(JSON.stringify(tenderList)) %>'));
+    const ckColSetting = 'budget-col-visible-1.0.0';
 </script>

app/view/budget/compare_modal.ejs

@@ -20,4 +20,33 @@
             </div>
         </div>
     </div>
+</div>
+<!--列设置-->
+<div class="modal fade" id="row-view" data-backdrop="static">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">列显示</h5>
+            </div>
+            <div class="modal-body">
+                <table class="table table-bordered table-sm">
+                    <thead>
+                    <tr><th>列项</th><th width="90">显示</th></tr>
+                    </thead>
+                    <tbody id="row-view-list">
+                    <tr><td>投资估算</td><td><input type="checkbox" checked=""></td></tr>
+                    <tr><td>设计概算</td><td><input type="checkbox" checked=""></td></tr>
+                    <tr><td>施工图预算</td><td><input type="checkbox" checked=""></td></tr>
+                    <tr><td>招标预算</td><td><input type="checkbox" checked=""></td></tr>
+                    <tr><td>台账</td><td><input type="checkbox" checked=""></td></tr>
+                    <tr><td>预估决算</td><td><input type="checkbox"></td></tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary btn-sm" id="row-view-ok">确认</button>
+            </div>
+        </div>
+    </div>
 </div>