Calculation/app/public/js/sp_progress.js

const showSideTools = function (show) {
    const left = $('#left-view'), right = $('#right-view'), parent = left.parent();
    if (show) {
        right.show();
        autoFlashHeight();
        /**
         * right.show()后, parent被撑开成2倍left.height, 导致parent.width减少了10px
         * 第一次left.width调整后，parent的缩回left.height, 此时parent.width又增加了10px
         * 故需要通过最终的parent.width再计算一次left.width
         *
         * Q: 为什么不通过先计算left.width的宽度，以避免计算两次left.width?
         * A: 右侧工具栏不一定显示，当右侧工具栏显示过一次后，就必须使用parent和right来计算left.width
         *
         */
            //left.css('width', parent.width() - right.outerWidth());
            //left.css('width', parent.width() - right.outerWidth());
        const percent = 100 - right.outerWidth() /parent.width() * 100;
        left.css('width', percent + '%');
    } else {
        left.width(parent.width());
        right.hide();
    }
};
const progressCombo = [{ text: '', value: '' }, { text: '进行中', value: '进行中' }, { text: '已完成', value: '已完成' }];

$(document).ready(() => {
    autoFlashHeight();
    let datepicker;

    class ProgressObj {
        constructor() {
            this.spread = SpreadJsObj.createNewSpread($('#progress-spread')[0]);
            this.sheet = this.spread.getActiveSheet();
            this.treeSetting = {
                id: 'tree_id',
                pid: 'tree_pid',
                order: 'tree_order',
                level: 'tree_level',
                isLeaf: 'tree_is_leaf',
                fullPath: 'tree_full_path',
                rootId: -1,
                calcFields: [],
                keys: ['id', 'spid', 'tree_id'],
            };
            this.tree = createNewPathTree('ledger', this.treeSetting);
            this.spreadSetting = {
                cols: [
                    {title: '序号', colSpan: '1', rowSpan: '2', field: 'code', hAlign: 0, width: 165, formatter: '@', cellType: 'tree'},
                    {title: '阶段/项目名称', colSpan: '1', rowSpan: '2', field: 'name', hAlign: 0, width: 210, formatter: '@', cellType: 'autoTip'},
                    {title: '成果编制|进度', colSpan: '3|1', rowSpan: '1|1', field: 'edit_progress', hAlign: 1, width: 80, formatter: '@', cellType: 'customizeCombo', comboItems: progressCombo },
                    {
                        title: '|日期', colSpan: '|1', rowSpan: '|1', field: 'edit_date', hAlign: 2, width: 80, readOnly: true,
                        formatter: 'yyyy-MM-dd', cellType: 'activeImageBtn', normalImg: '#ellipsis-icon', indent: 5,
                        showImage: function (data) {
                            return data !== undefined && data !== null;
                        }
                    },
                    {title: '|部门', colSpan: '|1', rowSpan: '|1', field: 'edit_department', hAlign: 2, width: 120, formatter: '@', },
                    {title: '报审情况|进度', colSpan: '3|1', rowSpan: '1|1', field: 'submit_progress', hAlign: 1, width: 80, formatter: '@', cellType: 'customizeCombo', comboItems: progressCombo },
                    {
                        title: '|日期', colSpan: '|1', rowSpan: '|1', field: 'submit_date', hAlign: 2, width: 80, readOnly: true,
                        formatter: 'yyyy-MM-dd', cellType: 'activeImageBtn', normalImg: '#ellipsis-icon', indent: 5,
                        showImage: function (data) {
                            return data !== undefined && data !== null;
                        }
                    },
                    {title: '|部门', colSpan: '|1', rowSpan: '|1', field: 'submit_department', hAlign: 2, width: 120, formatter: '@', },
                    {title: '批复情况|进度', colSpan: '4|1', rowSpan: '1|1', field: 'reply_progress', hAlign: 1, width: 80, formatter: '@', cellType: 'customizeCombo', comboItems: progressCombo },
                    {
                        title: '|日期', colSpan: '|1', rowSpan: '|1', field: 'reply_date', hAlign: 2, width: 80, readOnly: true,
                        formatter: 'yyyy-MM-dd', cellType: 'activeImageBtn', normalImg: '#ellipsis-icon', indent: 5,
                        showImage: function (data) {
                            return data !== undefined && data !== null;
                        }
                    },
                    {title: '|部门', colSpan: '|1', rowSpan: '|1', field: 'reply_department', hAlign: 2, width: 120, formatter: '@', },
                    {title: '|文号', colSpan: '|1', rowSpan: '|1', field: 'reply_code', hAlign: 2, width: 120, formatter: '@', },
                    {title: '备注', colSpan: '1', rowSpan: '2', field: 'memo', hAlign: 0, width: 120, formatter: '@', cellType: 'ellipsisAutoTip'},
                ],
                emptyRows: 0,
                headRows: 2,
                headRowHeight: [25, 25],
                defaultRowHeight: 21,
                headerFont: '12px 微软雅黑',
                font: '12px 微软雅黑',
                localCache: {
                    key: 'sub-proj-progress',
                    colWidth: true,
                },
                readOnly: false,
                imageClick: function (data, hitinfo) {
                    if (!data) return;

                    const setting = hitinfo.sheet.zh_setting;
                    if (!setting) return;
                    const col = setting.cols[hitinfo.col];
                    if (!col || col.field.indexOf('_date') < 0) return;

                    const pos = SpreadJsObj.getObjPos(hitinfo.sheet.getParent().qo);
                    if (!datepicker) {
                        datepicker = $('.datepicker-here').datepicker({
                            language: 'zh',
                            dateFormat: 'yyyy-MM-dd',
                            autoClose: true,
                            onSelect: function (formattedDate, date, inst) {
                                if (!inst.visible) return;
                                const sels = hitinfo.sheet.getSelections();
                                if (!sels || !sels[0]) return;
                                const node = SpreadJsObj.getSelectObject(hitinfo.sheet);
                                const uData = {id: node.id};
                                const relaCol = hitinfo.sheet.zh_setting.cols[sels[0].col];
                                uData[relaCol.field] = formattedDate;

                                postData('progress/update', {postType: 'update', postData: uData}, function (result) {
                                    const refreshNode = progressObj.tree.loadPostData(result);
                                    progressObj.refreshTree(refreshNode);
                                }, function () {
                                    SpreadJsObj.reLoadRowData(hitinfo.sheet, sels[0].row, 1);
                                });
                            }
                        }).data('datepicker');
                    }
                    const value = hitinfo.sheet.getValue(hitinfo.row, hitinfo.col);
                    if (value) {
                        datepicker.selectDate(value);
                    } else {
                        datepicker.clear();
                    }
                    datepicker.show();
                    $('#datepickers-container').css('top', hitinfo.cellRect.y + pos.y).css('left', hitinfo.cellRect.x + pos.x);
                    // $('#datepickers-container').css('top', pos.y).css('left', pos.x);
                }
            };
            this.ckSpread = window.location.pathname + '-progressSelect';

            this.initSpread();
            this.initOtherEvent();
        }
        initSpread() {
            SpreadJsObj.initSheet(this.sheet, this.spreadSetting);
            this.spread.bind(spreadNS.Events.SelectionChanged, this.selectionChanged);
            this.spread.bind(spreadNS.Events.topRowChanged, this.topRowChanged);
            this.spread.bind(spreadNS.Events.ClipboardChanging, function (e, info) {
                const copyText = SpreadJsObj.getFilterCopyText(info.sheet);
                SpreadJsObj.Clipboard.setCopyData(copyText);
            });
            this.spread.bind(spreadNS.Events.EditEnded, this.editEnded);
            this.spread.bind(spreadNS.Events.EditStarting, this.editStarting);
            this.spread.bind(spreadNS.Events.ClipboardPasting, this.clipboardPasting);
            SpreadJsObj.addDeleteBind(this.spread, this.deletePress);
        }
        initOtherEvent() {
            const self = this;
            // 增删上下移升降级
            $('a[name="base-opr"]').click(function () {
                self.baseOpr(this.getAttribute('type'));
            });
        }
        refreshOperationValid() {
            const setObjEnable = function (obj, enable) {
                if (enable) {
                    obj.removeClass('disabled');
                } else {
                    obj.addClass('disabled');
                }
            };
            const invalidAll = function () {
                setObjEnable($('a[name=base-opr][type=add]'), false);
                setObjEnable($('a[name=base-opr][type=delete]'), false);
                setObjEnable($('a[name=base-opr][type=up-move]'), false);
                setObjEnable($('a[name=base-opr][type=down-move]'), false);
                setObjEnable($('a[name=base-opr][type=up-level]'), false);
                setObjEnable($('a[name=base-opr][type=down-level]'), false);
            };
            const sel = this.sheet.getSelections()[0];
            const row = sel ? sel.row : -1;
            const tree = this.sheet.zh_tree;
            if (!tree) {
                invalidAll();
                return;
            }
            const first = tree.nodes[row];
            if (!first) {
                invalidAll();
                return;
            }
            let last = first, sameParent = true;
            if (sel.rowCount > 1 && first) {
                for (let r = 1; r < sel.rowCount; r++) {
                    const rNode = tree.nodes[sel.row + r];
                    if (!rNode) {
                        sameParent = false;
                        break;
                    }
                    if (rNode.tree_level > first.tree_level) continue;
                    if ((rNode.tree_level < first.tree_level) || (rNode.tree_level === first.tree_level && rNode.tree_pid !== first.tree_pid)) {
                        sameParent = false;
                        break;
                    }
                    last = rNode;
                }
            }
            const preNode = tree.getPreSiblingNode(first);
            const valid = !this.sheet.zh_setting.readOnly;

            setObjEnable($('a[name=base-opr][type=add]'), valid && first);
            setObjEnable($('a[name=base-opr][type=delete]'), valid && first && sameParent && first.tree_level > 1);
            setObjEnable($('a[name=base-opr][type=up-move]'), valid && first && sameParent && first.tree_level > 1 && preNode);
            setObjEnable($('a[name=base-opr][type=down-move]'), valid && first && sameParent && first.tree_level > 1 && !tree.isLastSibling(last));
            setObjEnable($('a[name=base-opr][type=up-level]'), valid && first && sameParent && tree.getParent(first) && first.tree_level > 2);
            setObjEnable($('a[name=base-opr][type=down-level]'), valid && first && sameParent && first.tree_level > 1 && preNode );
        }
        loadRelaData() {
            this.refreshOperationValid();
            SpreadJsObj.saveTopAndSelect(this.sheet, this.ckSpread);
            progressFile.getCurAttHtml(SpreadJsObj.getSelectObject(this.sheet));
        }
        refreshTree(data) {
            const sheet = this.sheet;
            SpreadJsObj.massOperationSheet(sheet, function () {
                const tree = sheet.zh_tree;
                // 处理删除
                if (data.delete) {
                    data.delete.sort(function (a, b) {
                        return b.deleteIndex - a.deleteIndex;
                    });
                    for (const d of data.delete) {
                        sheet.deleteRows(d.deleteIndex, 1);
                    }
                }
                // 处理新增
                if (data.create) {
                    const newNodes = data.create;
                    if (newNodes) {
                        newNodes.sort(function (a, b) {
                            return a.index - b.index;
                        });

                        for (const node of newNodes) {
                            sheet.addRows(node.index, 1);
                            SpreadJsObj.reLoadRowData(sheet, tree.nodes.indexOf(node), 1);
                        }
                    }
                }
                // 处理更新
                if (data.update) {
                    const rows = [];
                    for (const u of data.update) {
                        rows.push(tree.nodes.indexOf(u));
                    }
                    SpreadJsObj.reLoadRowsData(sheet, rows);
                }
                // 处理展开
                if (data.expand) {
                    const expanded = [];
                    for (const e of data.expand) {
                        if (expanded.indexOf(e) === -1) {
                            const posterity = tree.getPosterity(e);
                            for (const p of posterity) {
                                sheet.setRowVisible(tree.nodes.indexOf(p), p.visible);
                                expanded.push(p);
                            }
                        }
                    }
                }
            });
        }
        loadData(datas) {
            this.tree.loadDatas(datas);
            SpreadJsObj.loadSheetData(this.sheet, SpreadJsObj.DataType.Tree, this.tree);
            SpreadJsObj.loadTopAndSelect(this.sheet, this.ckSpread);
            this.refreshOperationValid();
        }
        getDefaultSelectInfo() {
            if (!this.tree) return;
            const sel = this.sheet.getSelections()[0];
            const node = this.sheet.zh_tree.nodes[sel.row];
            if (!node) return;
            let count = 1;
            if (sel.rowCount > 1) {
                for (let r = 1; r < sel.rowCount; r++) {
                    const rNode = this.sheet.zh_tree.nodes[sel.row + r];
                    if (rNode.tree_level > node.tree_level) continue;
                    if ((rNode.tree_level < node.tree_level) || (rNode.tree_level === node.tree_level && rNode.tree_pid !== node.tree_pid)) {
                        toastr.warning('请选择同一节点下的节点，进行该操作');
                        return;
                    }
                    count += 1;
                }
            }
            return [this.tree, node, count];
        }
        baseOpr(type, addCount = 1) {
            const self = this;
            const sheet = self.sheet;
            const sel = sheet.getSelections()[0];
            const [tree, node, count] = this.getDefaultSelectInfo();
            if (!tree || !node || !count) return;

            const updateData = {
                postType: type,
                postData: {
                    id: node.tree_id,
                    count: type === 'add' ? addCount : count,
                }
            };
            if (type === 'delete') {
                deleteAfterHint(function () {
                    postData('progress/update', updateData, function (result) {
                        progressFile.deleteFileByNodeId(result.delete.map(x => { return x.id; }));
                        const refreshData = tree.loadPostData(result);
                        self.refreshTree(refreshData);
                        if (sel) {
                            sheet.setSelection(sel.row, sel.col, 1, sel.colCount);
                        }
                        self.refreshOperationValid();
                        self.loadRelaData();
                    });
                });
            } else {
                postData('progress/update', updateData, function (result) {
                    const refreshData = tree.loadPostData(result);
                    self.refreshTree(refreshData);
                    if (['up-move', 'down-move'].indexOf(type) > -1) {
                        if (sel) {
                            sheet.setSelection(tree.nodes.indexOf(node), sel.col, sel.rowCount, sel.colCount);
                        }
                    } else if (type === 'add') {
                        const sel = sheet.getSelections()[0];
                        if (sel) {
                            sheet.setSelection(tree.nodes.indexOf(refreshData.create[0]), sel.col, sel.rowCount, sel.colCount);
                        }
                    }
                    self.refreshOperationValid();
                });
            }
        }
        // 事件
        selectionChanged(e, info) {
            if (info.newSelections) {
                if (!info.oldSelections || info.newSelections[0].row !== info.oldSelections[0].row) {
                    progressObj.loadRelaData();
                }
            }
        }
        topRowChanged(e, info) {
            SpreadJsObj.saveTopAndSelect(info.sheet, progressObj.ckBillsSpread);
        }
        editEnded(e, info) {
            if (!info.sheet.zh_setting) return;

            const tree = info.sheet.zh_tree;
            const node = SpreadJsObj.getSelectObject(info.sheet);
            const data = { id: node.id, spid: node.spid, tree_id: node.tree_id };
            // 未改变值则不提交
            const col = info.sheet.zh_setting.cols[info.col];
            const orgValue = node[col.field];
            const newValue = trimInvalidChar(info.editingText);
            if (orgValue == info.editingText || ((!orgValue || orgValue === '') && (newValue === ''))) return;

            if (info.editingText) {
                const text = newValue;
                if (col.type === 'Number') {
                    const num = _.toNumber(text);
                    if (_.isFinite(num)) {
                        data[col.field] = num;
                    } else {
                        try {
                            data[col.field] = ZhCalc.mathCalcExpr(transExpr(text));
                        } catch(err) {
                            toastr.error('输入的表达式非法');
                            SpreadJsObj.reLoadRowData(info.sheet, info.row);
                            return;
                        }
                    }
                } else {
                    data[col.field] = text;
                }
            } else {
                data[col.field] = col.type === 'Number' ? 0 : '';
            }
            // 更新至服务器
            postData('progress/update', {postType: 'update', postData: data}, function (result) {
                const refreshNode = progressObj.tree.loadPostData(result);
                progressObj.refreshTree(refreshNode);
            }, function () {
                SpreadJsObj.reLoadRowData(info.sheet, info.row, 1);
            });
        }
        editStarting(e, info) {
            if (!info.sheet.zh_setting || !info.sheet.zh_tree) return;

            const col = info.sheet.zh_setting.cols[info.col];
            const node = info.sheet.zh_tree.nodes[info.row];
            if (!node) {
                info.cancel = true;
                return;
            }

            switch (col.field) {
                case 'edit_progress':
                case 'edit_date':
                case 'edit_department':
                case 'submit_progress':
                case 'submit_date':
                case 'submit_department':
                case 'reply_progress':
                case 'reply_date':
                case 'reply_department':
                case 'reply_code':
                    info.cancel = node.tree_level <= 1;
                    break;
            }
        }
        deletePress (sheet) {
            if (!sheet.zh_setting) return;
            const sel = sheet.getSelections()[0], datas = [];
            for (let iRow = sel.row; iRow < sel.row + sel.rowCount; iRow++) {
                let bDel = false;
                const node = sheet.zh_tree.nodes[iRow];
                const data = sheet.zh_tree.getNodeKeyData(node);
                for (let iCol = sel.col; iCol < sel.col + sel.colCount; iCol++) {
                    const col = sheet.zh_setting.cols[iCol];
                    const style = sheet.getStyle(iRow, iCol);
                    if (style.locked) continue;

                    data[col.field] = col.type === 'Number' ? 0 : '';
                    bDel = true;
                }
                if (bDel) datas.push(data);
            }
            if (datas.length > 0) {
                postData('progress/update', {postType: 'update', postData: datas}, function (result) {
                    const refreshNode = sheet.zh_tree.loadPostData(result);
                    progressObj.refreshTree(refreshNode);
                }, function () {
                    SpreadJsObj.reLoadRowData(info.sheet, sel.row, sel.rowCount);
                });
            }
        }
        clipboardPasting(e, info) {
            info.cancel = true;
            const tree = info.sheet.zh_tree, setting = info.sheet.zh_setting;
            if (!setting || !tree) return;

            const pasteData = info.pasteData.html
                ? SpreadJsObj.analysisPasteHtml(info.pasteData.html)
                : (info.pasteData.text === ''
                    ? SpreadJsObj.Clipboard.getAnalysisPasteText()
                    : SpreadJsObj.analysisPasteText(info.pasteData.text));
            const hint = {
                invalidExpr: {type: 'warning', msg: '粘贴的表达式非法'},
                parent: {type: 'warning', msg: '含有子项的清单，不可粘贴成果编制、报审情况、批复情况'},
            };
            const datas = [], filterNodes = [];

            let level, filterRow = 0;
            for (let iRow = 0; iRow < info.cellRange.rowCount; iRow ++) {
                const curRow = info.cellRange.row + iRow;
                const node = tree.nodes[curRow];
                if (!node) continue;

                if (!level) level = node.level;
                if (node.level < level) break;

                let bPaste = false;
                const data = info.sheet.zh_tree.getNodeKeyData(node);
                for (let iCol = 0; iCol < info.cellRange.colCount; iCol++) {
                    const curCol = info.cellRange.col + iCol;
                    const colSetting = info.sheet.zh_setting.cols[curCol];
                    const value = trimInvalidChar(pasteData[iRow-filterRow][iCol]);
                    if (node.children && node.children.length > 0 && invalidFields.parent.indexOf(colSetting.field) >= 0) {
                        toastMessageUniq(hint.parent);
                        continue;
                    }

                    if (colSetting.type === 'Number') {
                        const num = _.toNumber(value);
                        if (num) {
                            data[colSetting.field] = num;
                        } else {
                            try {
                                data[colSetting.field] = ZhCalc.mathCalcExpr(transExpr(value));
                                bPaste = true;
                            } catch (err) {
                                toastMessageUniq(hint.invalidExpr);
                                continue;
                            }
                        }
                    } else {
                        data[colSetting.field] = value;
                    }
                    bPaste = true;
                }
                if (bPaste) {
                    datas.push(data);
                } else {
                    filterNodes.push(node);
                }
            }
            if (datas.length > 0) {
                postData('progress/update', {postType: 'update', postData: datas}, function (result) {
                    const refreshNode = tree.loadPostData(result);
                    if (refreshNode.update) refreshNode.update = refreshNode.update.concat(filterNodes);
                    progressObj.refreshTree(refreshNode);
                }, function () {
                    SpreadJsObj.reLoadRowData(info.sheet, info.cellRange.row, info.cellRange.rowCount);
                });
            } else {
                SpreadJsObj.reLoadRowData(info.sheet, info.cellRange.row, info.cellRange.rowCount);
            }
        }
    }
    const progressObj = new ProgressObj();

    const progressFile = $.ledger_att({
        selector: '#fujian',
        key: 'id',
        masterKey: 'rela_id',
        uploadUrl: 'progress/file/upload',
        deleteUrl: 'progress/file/delete',
        checked: false,
        zipName: `阶段进度-附件.zip`,
        readOnly: false,
        fileIdType: 'string',
        fileInfo: {
            user_name: 'user_name',
            user_id: 'user_id',
            create_time: 'create_time',
        },
        locate: function (att) {
            if (!att) return;
            SpreadJsObj.locateTreeNode(progressObj.sheet, att.node.tree_id, true);
            progressFile.getCurAttHtml(att.node);
        }
    });
    // 展开收起标准清单
    $('a', '#side-menu').bind('click', function (e) {
        e.preventDefault();
        const tab = $(this), tabPanel = $(tab.attr('content'));
        // 展开工具栏、切换标签
        if (!tab.hasClass('active')) {
            // const close = $('.active', '#side-menu').length === 0;
            $('a', '#side-menu').removeClass('active');
            $('.tab-content .tab-select-show.tab-pane.active').removeClass('active');
            tab.addClass('active');
            tabPanel.addClass('active');
            // $('.tab-content .tab-pane').removeClass('active');
            showSideTools(tab.hasClass('active'));
        } else { // 收起工具栏
            tab.removeClass('active');
            tabPanel.removeClass('active');
            showSideTools(tab.hasClass('active'));
        }
        progressObj.spread.refresh();
    });

    postData('load', { filter: 'progress;progress_file'}, function(result) {
        progressObj.loadData(result.progress);
        for (const f of result.progress_file) {
            f.node = progressObj.tree.datas.find(x => { return x.id === f.rela_id; });
        }
        progressFile.loadDatas(result.progress_file);
        progressFile.getCurAttHtml(SpreadJsObj.getSelectObject(progressObj.sheet));
    });

    // 工具栏spr
    $.divResizer({
        select: '#right-spr',
        callback: function () {
            progressObj.spread.refresh();
        }
    });
    // 导航Menu
    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
            progressObj.spread.refresh();
        }
    });
    // 显示层次
    (function (select, sheet) {
        $(select).click(function () {
            if (!sheet.zh_tree) return;
            const tag = $(this).attr('tag');
            const tree = sheet.zh_tree;
            setTimeout(() => {
                showWaitingView();
                switch (tag) {
                    case "1":
                    case "2":
                    case "3":
                    case "4":
                        tree.expandByLevel(parseInt(tag));
                        SpreadJsObj.refreshTreeRowVisible(sheet);
                        break;
                    case "last":
                        tree.expandByCustom(() => { return true; });
                        SpreadJsObj.refreshTreeRowVisible(sheet);
                        break;
                }
                closeWaitingView();
            }, 100);
        });
    })('a[name=showLevel]', progressObj.sheet);
});