Calculation/app/public/js/sp_push.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();
    }
};

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

    class PushObj {
        constructor() {
            this.spread = SpreadJsObj.createNewSpread($('#push-spread')[0]);
            this.sheet = this.spread.getActiveSheet();
            this.data = [];
            this.spreadSetting = {
                cols: [
                    { title: '序号', colSpan: '1', rowSpan: '1', field: 'push_order', hAlign: 1, width: 80, readOnly: true },
                    {
                        title: '日期', colSpan: '1', rowSpan: '1', field: 'push_date', hAlign: 2, width: 100, formatter: '@',
                        formatter: 'yyyy-MM-dd', cellType: 'activeImageBtn', normalImg: '#ellipsis-icon', indent: 5
                    },
                    {title: '记录内容', colSpan: '1', rowSpan: '1', field: 'push_content', hAlign: 0, width: 450, formatter: '@', wordWrap: true},
                    {title: '备注', colSpan: '1', rowSpan: '2', field: 'memo', hAlign: 0, width: 200, formatter: '@', cellType: 'ellipsisAutoTip'},
                ],
                emptyRows: 3,
                headRows: 1,
                headRowHeight: [32],
                defaultRowHeight: 21,
                headerFont: '12px 微软雅黑',
                font: '12px 微软雅黑',
                localCache: {
                    key: 'sub-proj-push',
                    colWidth: true,
                },
                forceLoadEmpty: true,
                readOnly: readOnly,
                imageClick: function (data, hitinfo) {
                    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 relaCol = hitinfo.sheet.zh_setting.cols[sels[0].col];

                                const updateData = {};
                                if (node) {
                                    updateData.update = { id: node.id };
                                    updateData.update[relaCol.field] = formattedDate;
                                } else {
                                    updateData.add = { push_order: hitinfo.sheet.zh_data.length + 1 };
                                    updateData.add[relaCol.field] = formattedDate;
                                }

                                postData('push/update', updateData, function (result) {
                                    pushObj.refreshData(result);
                                    SpreadJsObj.reLoadSheetData(pushObj.sheet);
                                }, 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);
                }
            };
            this.ckSpread = window.location.pathname + '-pushSelect';

            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.ClipboardPasting, this.clipboardPasting);
            SpreadJsObj.addDeleteBind(this.spread, this.deletePress);
        }
        initOtherEvent() {
            const self = this;
            // 增删上下移升降级
            $('a[name="base-opr"]').click(function () {
                self.baseOpr(this.getAttribute('type'));
            });
            $.contextMenu({
                selector: '#push-spread',
                build: function ($trigger, e) {
                    const target = SpreadJsObj.safeRightClickSelection($trigger, e, self.spread);
                    return target.hitTestType === spreadNS.SheetArea.viewport || target.hitTestType === spreadNS.SheetArea.rowHeader;
                },
                items: {
                    add: {
                        name: '插入',
                        icon: 'fa-plus',
                        callback: function (key, opt) {
                            pushObj.insert();
                        },
                    },
                    del: {
                        name: '删除',
                        icon: 'fa-remove',
                        callback: function (key, opt) {
                            pushObj.delete();
                        },
                        disabled: function (key, opt) {
                            const node = SpreadJsObj.getSelectObject(pushObj.sheet);
                            return !node;
                        },
                    },
                    sprDel: '------------',
                    upMove: {
                        name: '上移',
                        icon: 'fa-arrow-up',
                        callback: function (key, opt) {
                            pushObj.upMove();
                        },
                        disabled: function (key, opt) {
                            const sels = pushObj.sheet.getSelections();
                            if (!sels || !sels[0] || sels[0].row === 0) return true;
                        },
                    },
                    downMove: {
                        name: '下移',
                        icon: 'fa-arrow-down',
                        callback: function (key, opt) {
                            pushObj.downMove();
                        },
                        disabled: function (key, opt) {
                            const sels = pushObj.sheet.getSelections();
                            if (!sels || !sels[0] || sels[0].row >= pushObj.data.length - 1) return true;
                        },
                    }
                },
            })
        }
        loadRelaData() {
            SpreadJsObj.saveTopAndSelect(this.sheet, this.ckSpread);
            pushFile.getCurAttHtml(SpreadJsObj.getSelectObject(this.sheet));
        }
        refreshData(data) {
            if (data.add) {
                for (const a of data.add) {
                    this.data.push(a);
                }
            }
            if (data.update) {
                for (const u of data.update) {
                    const d = this.data.find(function (x) {
                        return u.id === x.id;
                    });
                    if (d) {
                        _.assign(d, u);
                    } else {
                        this.data.push(d);
                    }
                }
            }
            if (data.del) {
                _.remove(this.data, function (d) {
                    return data.del.indexOf(d.id) >= 0;
                });
            }
            this.resortData();
        }
        resortData() {
            this.data.sort(function (a, b) {
                return a.push_order - b.push_order;
            });
        }
        loadData(datas) {
            this.data.length = 0;
            this.data.push(...datas);
            this.resortData();
            SpreadJsObj.loadSheetData(this.sheet, SpreadJsObj.DataType.Data, this.data);
            SpreadJsObj.loadTopAndSelect(this.sheet, this.ckSpread);
        }
        // 事件
        selectionChanged(e, info) {
            if (info.newSelections) {
                if (!info.oldSelections || info.newSelections[0].row !== info.oldSelections[0].row) {
                    pushObj.loadRelaData();
                }
            }
        }
        topRowChanged(e, info) {
            SpreadJsObj.saveTopAndSelect(info.sheet, pushObj.ckBillsSpread);
        }
        editEnded(e, info) {
            if (!info.sheet.zh_setting || !info.sheet.zh_data) return;

            const node = info.sheet.zh_data[info.row];
            const col = info.sheet.zh_setting.cols[info.col];
            const data = {};

            if (node) {
                data.update = {};
                data.update.id = node.id;

                const oldValue = node ? node[col.field] : null;
                const newValue = col.wordWrap ? info.editingText : trimInvalidChar(info.editingText);
                if (oldValue == info.editingText || ((!oldValue || oldValue === '') && (newValue === ''))) {
                    SpreadJsObj.reLoadRowData(info.sheet, info.row);
                    return;
                }
                data.update[col.field] = newValue;
            } else {
                data.add = {};
                data.add.push_order = info.sheet.zh_data.length + 1;
                data.add[col.field] = col.wordWrap ? info.editingText : trimInvalidChar(info.editingText);
            }
            // 更新至服务器
            postData('push/update', data, function (result) {
                pushObj.refreshData(result);
                SpreadJsObj.reLoadSheetData(pushObj.sheet);
                if (data.add) pushObj.loadRelaData();
            }, function () {
                SpreadJsObj.reLoadRowData(info.sheet, info.row, 1);
            });
        }
        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('push/update', {update: datas}, function (result) {
                    pushObj.refreshData(result);
                    SpreadJsObj.reLoadSheetData(pushObj.sheet);
                }, function () {
                    SpreadJsObj.reLoadRowData(info.sheet, sel.row, sel.rowCount);
                });
            }
        }
        clipboardPasting(e, info) {
            info.cancel = true;
            const setting = info.sheet.zh_setting, sortData = info.sheet.zh_data;
            if (!setting || !sortData) return;

            const pasteData = info.pasteData.html
                ? SpreadJsObj.analysisPasteHtml(info.pasteData.html)
                : (info.pasteData.text === ''
                    ? SpreadJsObj.Clipboard.getAnalysisPasteText()
                    : SpreadJsObj.analysisPasteText(info.pasteData.text));
            const uDatas = [], iDatas = [];
            for (let iRow = 0; iRow < info.cellRange.rowCount; iRow++) {
                const curRow = info.cellRange.row + iRow;
                const node = sortData[curRow];

                let bPaste = false;
                const data = {};
                for (let iCol = 0; iCol < info.cellRange.colCount; iCol++) {
                    const curCol = info.cellRange.col + iCol;
                    const colSetting = setting.cols[curCol];
                    const value = colSetting.wordWrap ? pasteData[iRow][iCol] : trimInvalidChar(pasteData[iRow][iCol]);

                    if (colSetting.type === 'Number') {
                        const num = _.toNumber(value);
                        if (num) {
                            data[colSetting.field] = num;
                            bPaste = true;
                        }
                    } else {
                        data[colSetting.field] = value || '';
                        bPaste = true;
                    }
                }
                if (bPaste) {
                    if (node) {
                        data.id = node.id;
                        uDatas.push(data);
                    } else {
                        data.push_order = curRow + 1;
                        iDatas.push(data);
                    }
                }
            }
            const updateData = {};
            if (uDatas.length > 0) updateData.update = uDatas;
            if (iDatas.length > 0) updateData.add = iDatas;
            if (uDatas.length > 0 || iDatas.length > 0) {
                postData('push/update', updateData, function (result) {
                    pushObj.refreshData(result);
                    SpreadJsObj.reLoadSheetData(info.sheet);
                    if (updateData.add && !updateData.update) pushObj.loadRelaData();
                });
            } else {
                SpreadJsObj.reLoadSheetData(info.sheet);
            }
        }
        // 操作
        insert () {
            const sheet = this.sheet;
            const node = SpreadJsObj.getSelectObject(sheet);
            const push_order = node ? node.push_order : sheet.getRowCount() - 2;
            const add = { push_order };
            // 更新至服务器
            postData('push/update', { add }, function (result) {
                pushObj.refreshData(result);
                SpreadJsObj.reLoadSheetData(pushObj.sheet);
            }, function () {
                SpreadJsObj.reLoadRowData(info.sheet, info.row, 1);
            });
        }
        delete () {
            const sortData = this.sheet.zh_data;
            const datas = [];
            const sels = this.sheet.getSelections();
            if (!sels || !sels[0]) return;

            for (let iRow = sels[0].row, iLen = sels[0].row + sels[0].rowCount; iRow < iLen; iRow++) {
                const node = sortData[iRow];
                datas.push(node.id);
            }
            if (datas.length > 0) {
                postData('push/update', {del: datas}, function (result) {
                    pushObj.refreshData(result);
                    SpreadJsObj.reLoadSheetData(pushObj.sheet);
                    pushFile.deleteFileByNodeId(result.del);
                    pushObj.loadRelaData();
                }, function () {
                    SpreadJsObj.reLoadSheetData(pushObj.sheet);
                });
            }
        }
        upMove () {
            const sels = this.sheet.getSelections(), sortData = this.sheet.zh_data;
            const node = sortData[sels[0].row];
            const preNode = sortData[sels[0].row - 1];
            const data = [
                {id: node.id, push_order: preNode.push_order},
                {id: preNode.id, push_order: node.push_order}
            ];
            postData('push/update', {update: data}, function (result) {
                pushObj.refreshData(result);
                SpreadJsObj.reLoadRowsData(pushObj.sheet, [sels[0].row, sels[0].row - 1]);
                pushObj.sheet.setSelection(sels[0].row - 1, sels[0].col, sels[0].rowCount, sels[0].colCount);
            });
        }
        downMove () {
            const sels = this.sheet.getSelections(), sortData = this.sheet.zh_data;
            const node = sortData[sels[0].row];
            const nextNode = sortData[sels[0].row + 1];
            const data = [
                {id: node.id, push_order: nextNode.push_order},
                {id: nextNode.id, push_order: node.push_order}
            ];
            postData('push/update', {update: data}, function (result) {
                pushObj.refreshData(result);
                SpreadJsObj.reLoadRowsData(pushObj.sheet, [sels[0].row, sels[0].row + 1]);
                pushObj.sheet.setSelection(sels[0].row + 1, sels[0].col, sels[0].rowCount, sels[0].colCount);
            });
        }
    }
    const pushObj = new PushObj();

    const pushFile = $.ledger_att({
        selector: '#fujian',
        key: 'id',
        masterKey: 'rela_id',
        uploadUrl: 'push/file/upload',
        deleteUrl: 'push/file/delete',
        checked: false,
        zipName: `推进记录-附件.zip`,
        readOnly: readOnly,
        fileIdType: 'string',
        fileInfo: {
            user_name: 'user_name',
            user_id: 'user_id',
            create_time: 'create_time',
        },
        getCurHint: function(node) { return ''; },
        locate: function (att) {
            if (!att) return;
            SpreadJsObj.locateDataBy(pushObj.sheet, function(x) { return x.id === att.node.id; });
            pushFile.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'));
        }
        pushObj.spread.refresh();
    });

    postData('load', { filter: 'push;push_file'}, function(result) {
        pushObj.loadData(result.push);
        for (const f of result.push_file) {
            f.node = pushObj.data.find(x => { return x.id === f.rela_id; });
        }
        pushFile.loadDatas(result.push_file);
        pushFile.getCurAttHtml(SpreadJsObj.getSelectObject(pushObj.sheet));
    });

    // 工具栏spr
    $.divResizer({
        select: '#right-spr',
        callback: function () {
            pushObj.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();
            pushObj.spread.refresh();
        }
    });
});