标段列表折叠功能

app/public/js/tender_list.js

@@ -45,6 +45,7 @@ const levelTreeSetting = {
 };
 const levelNodes =[];
 const tenderTree = [];
+let parentId = 0;
 function createTree() {
     const zTree = $.fn.zTree.getZTreeObj('treeLevel');
     if (zTree) {
@@ -77,7 +78,6 @@ function onDropNode(event, treeId, treeNodes, targetNode, moveType) {
     }
     resetFixNode(1);
     resetFixNode(2);
-    console.log(targetNode);
     if (targetNode.lid === 1 && treeNodes[0].children && treeNodes[0].children.length !== 0) {
         moveChildren(treeNodes[0].children, zTree.getNodeByParam('lid', 1));
     } else if (targetNode.lid !== 1) {
@@ -177,6 +177,7 @@ function getCategoryHtml() {
     }
     return html.join('');
 }
+
 // 初始化TenderTree数据
 function initTenderTree () {
     const levelCategory = category.filter(function (c) {
@@ -201,6 +202,7 @@ function initTenderTree () {
                 name: cateValue.value,
                 children: [],
                 level: category.level,
+                sort_id: ++parentId,
             };
             array.push(cate);
         }
@@ -246,13 +248,13 @@ function initTenderTree () {
         }
     }
 }
-function recursiveGetTenderNodeHtml (node, arr) {
+function recursiveGetTenderNodeHtml (node, arr, pid) {
     const html = [];
-    html.push('<tr>');
+    html.push('<tr pid="' + pid + '">');
     // 名称
     html.push('<td class="in-' + node.level + '">');
     if (node.cid) {
-        html.push('<i class="fa fa-folder-o"></i> ', node.name);
+        html.push('<span class="fold-switch mr-1" title="收起" cid="'+ node.sort_id +'"><i class="fa fa-minus-square-o"></i></span></i> <i class="fa fa-folder-o"></i> ', node.name);
     } else {
         html.push('<span class="text-muted mr-2">');
         html.push(arr.indexOf(node) === arr.length - 1 ? '└' : '├');
@@ -284,7 +286,7 @@ function recursiveGetTenderNodeHtml (node, arr) {
     html.push('</tr>');
     if (node.children) {
         for (const c of node.children) {
-            html.push(recursiveGetTenderNodeHtml(c, node.children));
+            html.push(recursiveGetTenderNodeHtml(c, node.children, node.sort_id));
         }
     }
     return html.join('');
@@ -302,7 +304,7 @@ function getTenderTreeHtml () {
         html.push('<th>', '审批状态', '</th>');
         html.push('</tr>', '</thead>');
         for (const t of tenderTree) {
-            html.push(recursiveGetTenderNodeHtml(t, tenderTree));
+            html.push(recursiveGetTenderNodeHtml(t, tenderTree, ''));
         }
         html.push('</table>');
         return html.join('');
@@ -335,6 +337,7 @@ $(document).ready(() => {
     $('.modal-body', '#add-bd').append(getCategoryHtml());
     // 初始化标段树结构
     initTenderTree();
+    console.log(tenderTree);
     $('.c-body').html(getTenderTreeHtml());
     bindTenderUrl();
     // 分类
@@ -378,11 +381,11 @@ $(document).ready(() => {
         }
         for (const c of category) {
             const cate = {cid: c.id};
-            if (c.type === categoryType.key.dropDown) {
+            // if (c.type === categoryType.key.dropDown) {
                 cate.value = parseInt($('select', '[cate-id=' + c.id + ']').val());
-            } else if (c.type === categoryType.key.radio) {
-                cate.value = parseInt($('input:checked', '[cate-id=' + c.id + ']').val());
-            }
+            // } else if (c.type === categoryType.key.radio) {
+            //     cate.value = parseInt($('input:checked', '[cate-id=' + c.id + ']').val());
+            // }
             data.category.push(cate);
         }
         $('#hide-all').show();
@@ -396,4 +399,51 @@ $(document).ready(() => {
             $('#hide-all').hide();
         });
     });
+
+    // 展开和收起
+    $('body').on('click', '.fold-switch', function () {
+        if ($(this).children('i').hasClass('fa-minus-square-o')) {
+            $(this).children('i').removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
+            $(this).attr('title', '展开');
+            const cid = $(this).attr('cid');
+            const node = findTenderTreeNode(parseInt(cid), tenderTree);
+            doTrStatus(returnItem, 'hide');
+        } else {
+            $(this).children('i').removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
+            $(this).attr('title', '收起');
+            const cid = $(this).attr('cid');
+            const node = findTenderTreeNode(parseInt(cid), tenderTree);
+            doTrStatus(returnItem, 'show');
+        }
+    })
 });
+
+function doTrStatus(node, status) {
+    if (status === 'show') {
+        $('.c-body').find('tr[pid="'+ node.sort_id +'"]').show();
+        $('.c-body').find('tr[pid="'+ node.sort_id +'"] .fold-switch').attr('title', '收起');
+        $('.c-body').find('tr[pid="'+ node.sort_id +'"] .fold-switch i').removeClass('fa-plus-square-o').removeClass('fa-minus-square-o').addClass('fa-minus-square-o');
+    } else {
+        $('.c-body').find('tr[pid="'+ node.sort_id +'"]').hide();
+        $('.c-body').find('tr[pid="'+ node.sort_id +'"] .fold-switch').attr('title', '展开');
+        $('.c-body').find('tr[pid="'+ node.sort_id +'"] .fold-switch i').removeClass('fa-minus-square-o').removeClass('fa-plus-square-o').addClass('fa-plus-square-o');
+
+    }
+    // 判断是否还有一层
+    if (node.children) {
+        for (const c of node.children) {
+            doTrStatus(c, status);
+        }
+    }
+}
+let returnItem;
+const findTenderTreeNode = function(sortId, tree) {
+    tree.forEach((item) => {
+        if (item.sort_id !== undefined && item.sort_id === sortId) {
+            returnItem = item;
+            return item;
+        } else if (item.children && item.children.length > 0) {
+            findTenderTreeNode(sortId, item.children);
+        }
+    });
+}