فهرست منبع

feat: 清单精灵,增加搜索清单

vian 3 سال پیش
والد
کامیت
9604d481f6
2فایلهای تغییر یافته به همراه188 افزوده شده و 8 حذف شده
  1. 33 1
      web/maintain/billsGuidance_lib/html/zhiyin.html
  2. 155 7
      web/maintain/billsGuidance_lib/js/billsGuidance.js

+ 33 - 1
web/maintain/billsGuidance_lib/html/zhiyin.html

@@ -11,6 +11,19 @@
     <link rel="stylesheet" href="/web/maintain/billsGuidance_lib/css/main.css">
     <link rel="stylesheet" href="/lib/font-awesome/font-awesome.min.css">
     <link rel="stylesheet" href="/lib/jquery-contextmenu/jquery.contextMenu.css" type="text/css">
+    <style>
+        #searchBillsResult .search-item{
+            margin-right: 20px;
+        }
+        #searchBillsResult .search-item.go-to {
+            border-color: rgb(108, 117, 125);
+            background-color: #6c757d;
+            color: white;
+        }
+        #searchBillsResult .search-item.go-to:hover {
+            background-color: #5a6268;;
+        }
+    </style>
     <script>
         let userAccount = '<%= userAccount %>';
     </script>
@@ -35,6 +48,25 @@
             <div class="container-fluid">
                 <div class="row" id="dataRow">
                     <div class="main-side p-0" id="leftContent" style="width: 33%">
+                        <div class="side-tools-bar" >
+                            <div style="display: flex; align-items: center; height: 36px;">
+                                <a id="expandToSecond" href="javascript:void(0);" class="btn btn-sm" data-toggle="tooltip" data-placement="bottom" title="收起"><i class="fa fa-minus-square-o" aria-hidden="true"></i> 收起</a>
+                                <div class="input-group col-5 pl-0">
+                                    <input id="searchBillText" type="text" class="form-control form-control-sm" placeholder="搜索清单">
+                                    <span class="input-group-btn">
+                                    <button id="searchBillBtn" class="btn btn-secondary btn-sm" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
+                                </span>
+                                </div>
+                            </div>
+                            <div id="searchBillsResult" style="display: none;">
+                                <div style="display: flex; align-items: center; height: 36px;">
+                                    <span class="search-item">搜索结果: <span id="searchBillsCount"></span></span>
+                                    <a class="search-item go-to btn btn-secondary btn-sm" href="javascript:void(0);" id="preBill">上一条</a>
+                                    <a class="search-item go-to btn btn-secondary btn-sm" href="javascript:void(0);" id="nextBills">下一条</a>
+                                    <a class="search-item btn btn-link btn-sm" data-toggle="tooltip" data-placement="bottom" title="关闭搜索" href="javascript:void(0);" id="closeSearchBills"><i class="fa fa-remove" aria-hidden="true"></i></a>
+                                </div>
+                            </div>
+                        </div>
                         <div id="billsSpread" class="main-side-top">
                         </div>
                         <div class="main-side-bottom">
@@ -45,7 +77,7 @@
                       <div class="resize" id="slideResizeLeft" style="width: 1%; height: 100%; resize:horizontal; cursor: w-resize; float: left; background: #F1F1F1"></div>
                       <div style="width: 99%; float: left">
                           <div class="toolsbar px-1 d-flex justify-content-between">
-                              <div class="tools-btn btn-group align-top">
+                              <div class="tools-btn btn-group align-top" style="display: flex; align-items: center; height: 36px; overflow: hidden;">
                                   <a id="insert" href="javascript:void(0);" class="btn btn-sm lock-btn-control" data-toggle="tooltip" data-placement="bottom" title="插入"><i class="fa fa-reply-all" aria-hidden="true"></i> 插入</a>
                                   <a id="del" href="javascript:void(0);" class="btn btn-sm lock-btn-control" data-toggle="tooltip" data-placement="bottom" title="删除"><i class="fa fa-remove" aria-hidden="true"></i></a>
                                   <a id="upLevel" href="javascript:void(0);" class="btn btn-sm lock-btn-control disabled" data-toggle="tooltip" data-placement="bottom" title="升级"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>

+ 155 - 7
web/maintain/billsGuidance_lib/js/billsGuidance.js

@@ -115,7 +115,8 @@ const billsGuidance = (function () {
             }
         }
     };
-    const bgColor = '#DFE8F9';
+    const selectedBgColor = '#DFE8F9';
+    const searchBgColor = 'lemonChiffon';
 
     //项目指引类型
     const itemType = {
@@ -411,15 +412,16 @@ const billsGuidance = (function () {
     function billsInitSel(row, oldSel){
         let guideSheet = guideItem.workBook.getActiveSheet();
         cleanData(guideSheet, guideItem.headers, -1);
-        const billSheet = bills.workBook.getActiveSheet();
-        setBgColor(billSheet, row, bgColor);
-        if (oldSel) {
-            setBgColor(billSheet, oldSel.row, 'white');
-        }
         let node = bills.tree.items[row];
         if(!node){
             return;
         }
+        const billSheet = bills.workBook.getActiveSheet();
+        setBgColor(billSheet, row, selectedBgColor);
+        if (oldSel && row !== oldSel.row) {
+            const orgNode = bills.tree.items[oldSel.row]
+            setBgColor(billSheet, oldSel.row, orgNode && orgNode.isSearch ? searchBgColor : 'white');
+        }
         bills.tree.selected = node;
         //显示备注
         $('.main-side-bottom').find('textarea').val(node.data.comment ? node.data.comment : '');
@@ -514,7 +516,7 @@ const billsGuidance = (function () {
         renderSheetFunc(sheet, function () {
             for(let node of nodes){
                 const nDepth = node.depth();
-                const color = nDepth % 2 == 0 && _isDef(node.data.type) && node.data.type === itemType.job ? bgColor : 'White';
+                const color = nDepth % 2 == 0 && _isDef(node.data.type) && node.data.type === itemType.job ? selectedBgColor : 'White';
                 setBgColor(sheet, node.serialNo(), color);
             }
         });
@@ -1665,6 +1667,137 @@ const billsGuidance = (function () {
             }
         });
     }
+
+    //展开至搜索出来点的节点
+    //@param {Array}nodes @return {void}
+    function expandSearchNodes(sheet, nodes, roots){
+        renderSheetFunc(sheet, function () {
+            function expParentNode(node){
+                if(node.parent){
+                    if (!node.parent.expanded) {
+                        node.parent.setExpanded(true);
+                    }
+                    expParentNode(node.parent);
+                }
+            }
+            for(let node of nodes){
+                expParentNode(node);
+            }
+            TREE_SHEET_HELPER.refreshNodesVisible(roots, sheet, true);
+        });
+    }
+
+    // 清空搜索高亮
+    function clearHighLight(sheet) {
+        renderSheetFunc(sheet, () => {
+            for (let i = 0; i < sheet.getRowCount(); i++){
+                setBgColor(sheet, i, 'white')
+            }
+        });
+    }
+
+    // 清空搜索状态
+
+    // 关闭搜索清单结果
+    function closeSearchBills(sheet) {
+        if (!bills.tree) {
+            return;
+        }
+        $('#searchBillsResult').hide();
+        bills.tree.items.forEach(node => {
+            node.isSearch = false;
+        });
+        clearHighLight(sheet);
+        setBgColor(sheet, sheet.getActiveRowIndex(), selectedBgColor);
+    }
+
+    // 搜索清单
+    function searchBills() {
+        if (!bills.tree || !bills.workBook) {
+            return;
+        }
+        const sheet = bills.workBook.getActiveSheet();
+        const str = $('#searchBillText').val().trim();
+        // 空搜索字符,关闭搜索
+        if (!str) {
+            if ($('#searchBillsResult').is(':visible')) {
+                closeSearchBills(sheet);
+            }
+            return;
+        }
+
+        // 过滤清单
+        const result = bills.tree.items.filter(item => {
+            const codeIs = item.data.code ? item.data.code.indexOf(str) !== -1 : false;
+            const nameIs = item.data.name ? item.data.name.indexOf(str) !== -1 : false;
+            return codeIs || nameIs;
+        });
+        if (!result.length) {
+            closeSearchBills(sheet);
+            return;
+        }
+        // 显示搜索结果
+        $("#searchBillsResult").show();
+        $('#searchBillsCount').text(result.length);
+
+        //展开搜索出来的节点
+        expandSearchNodes(sheet, result, bills.tree.roots);
+        // 标黄结果
+        clearHighLight(sheet);
+        const col = sheet.getActiveColumnIndex();
+        renderSheetFunc(sheet, function () {
+            bills.controller.setTreeSelected(result[0]);
+            bills.tree.items.forEach(node => {
+                if (result.includes(node)) {
+                    setBgColor(sheet, node.serialNo(), searchBgColor);
+                    node.isSearch = true; // 标记为搜索结果,防止被焦点行变更恢复颜色
+                } else {
+                    node.isSearch = false;
+                }
+            })
+        });
+        //搜索初始定位
+        const row = sheet.getActiveRowIndex();
+        sheet.setSelection(result[0].serialNo(), col, 1, 1);
+        billsInitSel(result[0].serialNo(), { row });
+        sheet.showRow(result[0].serialNo(), GC.Spread.Sheets.VerticalPosition.center);
+
+        let curIndex = 0;
+
+        // 上一条
+        $('#preBill').unbind('click');
+        $('#preBill').bind('click', () => {
+            const node = result[curIndex - 1];
+            if (!node) {
+                return;
+            }
+            curIndex -= 1;
+            const col = sheet.getActiveColumnIndex();
+            const row = node.serialNo();
+            const orgRow = sheet.getActiveRowIndex();
+            sheet.setSelection(row, col, 1, 1);
+            billsInitSel(row, { row: orgRow });
+            sheet.showRow(row, GC.Spread.Sheets.VerticalPosition.center);
+        });
+
+        // 下一条
+        $('#nextBills').unbind('click');
+        $('#nextBills').bind('click', () => {
+            const node = result[curIndex + 1];
+            if (!node) {
+                return;
+            }
+            curIndex += 1;
+            const col = sheet.getActiveColumnIndex();
+            const row = node.serialNo();
+            const orgRow = sheet.getActiveRowIndex();
+            sheet.setSelection(row, col, 1, 1);
+            billsInitSel(row, { row: orgRow });
+            sheet.showRow(row, GC.Spread.Sheets.VerticalPosition.center);
+        });
+
+    }
+
     //初始化个按钮点击
     //@return {void}
     function initBtn(){
@@ -1751,6 +1884,21 @@ const billsGuidance = (function () {
                 insert(insertDatas, false);
             }
         });
+        // 搜索清单
+        $("#searchBillBtn").click(searchBills);
+        $('#searchBillText').keyup(function (e) {
+            delayKeyup(function () {
+                $('#searchBillBtn').click();
+            });
+        });
+        // 关闭搜索清单
+        $('#closeSearchBills').click(() => {
+            if (!bills.workBook) {
+                return;
+            }
+            const sheet = bills.workBook.getActiveSheet();
+            closeSearchBills(sheet);
+        })
         //搜索定额
         $('#searchBtn').click(function () {
             let searchStr = $('#searchText').val();