Calculation/app/public/js/filing_template.js

$(document).ready(function() {
    autoFlashHeight();
    $('#filing').height($(".sjs-height-0").height() - $('#add-slibing').parent().parent().height() - 10);
    class FilingObj {
        constructor(setting) {
            // 原始数据整理后的树结构，用来整理zTree显示
            this.dragTree = createDragTree({
                id: 'id',
                pid: 'tree_pid',
                level: 'tree_level',
                order: 'tree_order',
                rootId: '-1'
            });
            // 界面显示的zTree
            this.setting = setting;
            this.filingTree = null;
            $('#filing').height($(".sjs-height-0").height()-$('.d-flex',".sjs-height-0").height() - 10);
        }
        _loadFilingSourceNode() {
            const self = this;
            const loadChildren = function(children) {
                for (const child of children) {
                    if (child.children && child.children.length > 0) loadChildren(child.children);
                    child.source_node = self.dragTree.getItems(child.id);
                }
            };
            const nodes = this.filingTree.getNodes();
            loadChildren(nodes);
        }
        loadFiling() {
            if (this.filingTree) $.fn.zTree.destroy(this.setting.treeId);
            const sortNodes = this.dragTree.nodes.map(x => {
                const result = {
                    id: x.id,
                    tree_pid: x.tree_pid,
                    name: x.name + (x.total_file_count > 0 ? `(${x.total_file_count})` : ''),
                    spid: x.spid,
                };
                return result;
            });
            this.filingTree = $.fn.zTree.init($('#filing'), this.setting, sortNodes);
            this._loadFilingSourceNode();
            const curCache = getLocalCache(this.curFilingKey);
            const curNode = curCache ? this.filingTree.getNodeByParam('id', curCache) : null;
            if (curNode){
                this.filingTree.selectNode(curNode);
                filingObj.setCurFiling(curNode);
            }
        }
        analysisFiling(data) {
            this.dragTree.loadDatas(data);
            this.loadFiling();
        }
        addSiblingFiling(node) {
            const self = this;
            postData(`${window.location.pathname}/update`, { updateType: 'add', tree_pid: node.tree_pid, tree_pre_id: node.id }, function(result) {
                const refreshData = self.dragTree.loadPostData(result);
                const newNode = refreshData.create[0];
                const nodes = self.filingTree.addNodes(node.getParentNode(), node.getIndex() + 1, [{ id: newNode.id, tree_pid: newNode.tree_pid, name: newNode.name, spid: newNode.spid }]);
                nodes[0].source_node = newNode;
            });
        }
        addChildFiling(node) {
            const self = this;
            postData(`${window.location.pathname}/update`, { updateType: 'add', tree_pid: node.id }, function(result) {
                const refreshData = self.dragTree.loadPostData(result);
                const newNode = refreshData.create[0];
                const nodes = self.filingTree.addNodes(node, -1, [{ id: newNode.id, tree_pid: newNode.tree_pid, name: newNode.name, spid: newNode.spid}]);
                nodes[0].source_node = newNode;
            });
        }
        delFiling(node, callback) {
            const parent = node.getParentNode();
            const self = this;
            postData(`${window.location.pathname}/update`, { updateType: 'del', id: node.id }, function(result) {
                self.dragTree.loadPostData(result);
                self.filingTree.removeNode(node);
                if (parent) {
                    const path = parent.getPath();
                    for (const p of path) {
                        p.name = p.source_node.name + (p.source_node.total_file_count > 0 ? `(${p.source_node.total_file_count})` : '');
                        filingObj.filingTree.updateNode(p);
                    }
                }
                if (callback) callback();
            });
        }
        async renameFiling(node, newName) {
            const result = await postDataAsync(`${window.location.pathname}/update`, { updateType:'save', id: node.id, name: newName });
            node.source_node.name = newName;
            node.name = node.source_node.name + (node.source_node.total_file_count > 0 ? `(${node.source_node.total_file_count})` : '');
            return result;
        }
        async setCurFiling(node) {
            filingObj.curFiling = node;
        }
        moveFiling(node, tree_pid, tree_order) {
            if (tree_pid === node.source_node.tree_pid && tree_order === node.source_node.tree_order) return;

            const self = this;
            postData(`${window.location.pathname}/update`, { updateType: 'move', id: node.id, tree_pid, tree_order }, function(result) {
                const refresh = self.dragTree.loadPostData(result);
                const updated = [];
                for (const u of refresh.update) {
                    if (!u) continue;
                    const node = self.filingTree.getNodeByParam('id', u.id);
                    if (node) {
                        const path = node.getPath();
                        for (const p of path) {
                            if (updated.indexOf(p.id) >= 0) continue;

                            p.name = p.source_node.name + (p.source_node.total_file_count > 0 ? `(${p.source_node.total_file_count})` : '');
                            filingObj.filingTree.updateNode(p);
                            updated.push(p.id);
                        }
                    }
                }
            });
        }
    }
    const levelTreeSetting = {
        treeId: 'filing',
        view: {
            selectedMulti: false,
            showIcon: false,
        },
        data: {
            simpleData: {
                idKey: 'id',
                pIdKey: 'tree_pid',
                rootPId: '-1',
                enable: true,
            }
        },
        edit: {
            enable: true,
            showRemoveBtn: !readOnly,
            showRenameBtn: !readOnly,
            renameTitle: '编辑',
            removeTitle: '删除',
            drag: {
                isCopy: false,
                isMove: true,
                pre: true,
                next: true,
                inner: false,
            },
            editNameSelectAll: true,
        },
        callback: {
            onClick: async function (e, key, node) {
                if (filingObj.curFiling && filingObj.curFiling.id === node.id) return;

                filingObj.setCurFiling(node);
            },
            beforeRename: async function(key, node, newName, isCancel) {
                if (!isCancel) await filingObj.renameFiling(node, newName);
                return true;
            },
            beforeRemove: function(key, node, isCancel) {
                filingObj.delFiling(node, function() {
                    $('#del-filing').modal('hide');
                });
                return false;
            },
            beforeDrop: function(key, nodes, target, moveType, isCopy) {
                if (readOnly) return false;
                if (!target) return false;

                const order = nodes[0].getIndex() + 1;
                const targetOrder = target.getIndex() + 1;
                const targetParent = target.getParentNode();
                const targetMax = targetParent ? targetParent.children.length : filingObj.dragTree.children.length;
                if (moveType === 'prev') {
                    if (target.tree_pid === nodes[0].tree_pid) {
                        if (targetOrder > order) {
                            filingObj.moveFiling(nodes[0], target.tree_pid, targetOrder === 1 ? 1 : targetOrder - 1);
                        } else {
                            filingObj.moveFiling(nodes[0], target.tree_pid, targetOrder === 1 ? 1 : targetOrder);
                        }
                    } else {
                        filingObj.moveFiling(nodes[0], target.tree_pid, targetOrder === 1 ? 1 : targetOrder);
                    }
                } else if (moveType === 'next') {
                    if (target.tree_pid === nodes[0].tree_pid) {
                        if (targetOrder < order) {
                            filingObj.moveFiling(nodes[0], target.tree_pid, targetOrder === targetMax ? targetMax : targetOrder + 1);
                        } else {
                            filingObj.moveFiling(nodes[0], target.tree_pid, targetOrder === targetMax ? targetMax : targetOrder);
                        }
                    } else {
                        filingObj.moveFiling(nodes[0], target.tree_pid, targetOrder + 1);
                    }
                } else if (moveType === 'inner') {
                    filingObj.moveFiling(nodes[0], target.tree_id, targetMax + 1);
                }
            }
        }
    };
    const filingObj = new FilingObj(levelTreeSetting);
    filingObj.analysisFiling(templateData);
    $('#add-slibing').click(() => {
        if (!filingObj.curFiling) return;
        filingObj.addSiblingFiling(filingObj.curFiling);
    });
    $('#add-child').click(() => {
        if (!filingObj.curFiling) return;
        filingObj.addChildFiling(filingObj.curFiling);
    });

    const hiddenSubmit = function(action, extraName, extraValue) {
        $('#hiddenForm').attr('action', action);
        if (extraName) {
            $('#extra').attr('name', extraName);
            $('#extra').val(extraValue);
        };
        $('#hiddenForm').submit();
    };
    $('body').on('mouseenter', ".table-file", function(){
        $(this).children(".btn-group-table").css("display","block");
    });
    $('body').on('mouseleave', ".table-file", function(){
        $(this).children(".btn-group-table").css("display","none");
    });
    $('body').on('click', 'a[name=renameTemplate]', function(e){
        $(this).parents('.table-file').attr('renaming', '1');
        $(`#${this.getAttribute('aria-describedby')}`).remove();
        const tempId = $(this).parents('.table-file').attr('tempId');
        const template = templateList.find(x => { return x.id === tempId; });
        if (!template) return;

        const html = [];
        html.push(`<div><input type="text" class="form-control form-control-sm" style="width: 300px" value="${template.name}"/></div>`);
        html.push('<div class="btn-group-table" style="display: none;">',
            `<a href="javascript: void(0)" name="renameOk" class="mr-1"><i class="fa fa-check fa-fw"></i></a>`,
            `<a href="javascript: void(0)" class="mr-1" name="renameCancel"><i class="fa fa-remove fa-fw text-danger"></i></a>`, '</div>');
        $(`.table-file[tempId=${tempId}]`).html(html.join(''));
        e.stopPropagation();
    });
    $('body').on('click', 'a[name=renameOk]', function(){
        const tempId = $(this).parents('.table-file').attr('tempId');
        const newName = $(this).parents('.table-file').find('input').val();
        hiddenSubmit('/file/template/save?id='+tempId, 'name', newName);
        $(this).parents('.table-file').attr('renaming', '0');
    });
    $('body').on('click', 'a[name=delTemplate]', function(e){
        e.stopPropagation();
        const tempId = $(this).parents('.table-file').attr('tempId');
        hiddenSubmit('/file/template/del?id='+tempId);
    });
    $('body').on('click', 'a[name=renameCancel]', function() {
        $(this).parents('.table-file').attr('renaming', '0');
        const tempId = $(this).parents('.table-file').attr('tempId');
        const template = templateList.find(x => { return x.id === tempId; });
        if (!template) return;

        const html = [];
        html.push(`<div>${template.name}</div>`);
        html.push('<div class="btn-group-table" style="display: none;">',
            '<a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="编辑" name="renameTemplate"><i class="fa fa-pencil fa-fw"></i></a>',
            '<a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="删除" name="delTemplate"><i class="fa fa-trash-o fa-fw text-danger"></i></a>',
            '</div>');
        $(`.table-file[tempId=${tempId}]`).html(html.join(''));
    });
});