Calculation/app/public/js/project_spread.js

$(document).ready(() => {
    autoFlashHeight();
    const colSpread = SpreadJsObj.createNewSpread($('#spread-col')[0]);
    const colSheet = colSpread.getActiveSheet();
    const canCheck = function(data, col) {
        return data && data[col.relaField];
    };
    const colSpreadSetting = {
        cols: [
            { title: 'key', colSpan: '1', rowSpan: '2', field: 'key', hAlign: 0, width: 0, visible: false, formatter: '@', readOnly: true, },
            { title: '可显示列', colSpan: '1', rowSpan: '2', field: 'name', hAlign: 0, width: 200, formatter: '@', readOnly: true, },
            { title: '项目节\n清单', colSpan: '1', rowSpan: '2', field: 'bills_valid', hAlign: 1, width: 80, readOnly: true, cellType: 'signalCheckbox', show: canCheck, relaField: 'bills', },
            { title: '计量单元', colSpan: '1', rowSpan: '2', field: 'pos_valid', hAlign: 1, width: 80, readOnly: true, cellType: 'signalCheckbox', show: canCheck, relaField: 'pos', },
            { title: '配置项|是否显示', colSpan: '2|1', rowSpan: '1|1', field: 'valid', hAlign: 1, width: 60, cellType: 'checkbox', readOnly: true },
            { title: '|别名', colSpan: '|1', rowSpan: '1|1', field: 'alias', hAlign: 0, width: 120, formatter: '@',  },
        ],
        headRows: 2,
        headRowHeight: [25, 25],
        defaultRowHeight: 21,
        headerFont: '12px 微软雅黑',
        font: '12px 微软雅黑',
        emptyRows: 0,
        getColor: function (sheet, data, row, col, defaultColor) {
            if (!data) return defaultColor;
            switch (col.field) {
                case 'bills_valid':
                case 'pos_valid':
                case 'valid':
                    return data.fixed.indexOf('valid') >= 0 ? '#eeeeee' : defaultColor;
                case 'alias':
                    return data.fixed.indexOf(col.field) >= 0 ? '#eeeeee' : defaultColor;
                default:
                    return defaultColor;
            }
        },
    };
    SpreadJsObj.initSheet(colSheet, colSpreadSetting);

    const reloadData = function () {
        const data = [];
        colSet.forEach(x => {
            const baseCol = BaseSetCol.find(b => { return x.key === b.key });
            if (!baseCol) return;
            const colData = { ...x, ...baseCol };
            if (colData.bills && colData.bills_valid === undefined) colData.bills_valid = colData.valid;
            if (colData.pos && colData.pos_valid === undefined) colData.pos_valid = colData.valid;
            data.push(colData);
        });
        BaseSetCol.forEach(x => {
            const col = colSet.find(c => { return c.key === x.key });
            if (!col) data.push({ ...x, valid: 0});
        });
        SpreadJsObj.loadSheetData(colSheet, SpreadJsObj.DataType.Data, data);
    };

    const colSpreadObj = {
        refreshOperationValid: function (sheet, selection) {
            const setObjEnable = function (obj, enable) {
                if (enable) {
                    obj.removeClass('disabled');
                } else {
                    obj.addClass('disabled');
                }
            };
            const invalidAll = function () {
                setObjEnable($('a[name=base-opr][type=up-move]'), false);
                setObjEnable($('a[name=base-opr][type=down-move]'), false);
            };
            const sel = selection ? selection[0] : sheet.getSelections()[0];
            const row = sel ? sel.row : -1;
            const data = sheet.zh_data;
            const select = sheet.zh_data[row];
            if (!select) {
                invalidAll();
                return;
            }

            const pre = data[row-1];
            const next = data[row + 1];

            setObjEnable($('a[name=base-opr][type=up-move]'), !!pre && pre.fixed.indexOf('move') < 0 && select.fixed.indexOf('move') < 0);
            setObjEnable($('a[name=base-opr][type=down-move]'), !!next && next.fixed.indexOf('move') < 0 && select.fixed.indexOf('move') < 0);
        },
        selectionChanged: function (e, info) {
            if (info.newSelections) {
                if (!info.oldSelections || info.newSelections[0].row !== info.oldSelections[0].row) {
                    colSpreadObj.refreshOperationValid(info.sheet, info.newSelections);
                }
            }
        },
        baseOpr: function (sheet, type) {
            const sel = sheet.getSelections()[0];
            const data = sheet.zh_data;
            if (type === 'up-move') {
                [data[sel.row - 1], data[sel.row]] = [data[sel.row], data[sel.row - 1]];
                SpreadJsObj.reLoadRowsData(sheet, [sel.row - 1, sel.row]);
                sheet.setSelection(sel.row - 1, sel.col, sel.rowCount, sel.colCount);
                SpreadJsObj.reloadRowsBackColor(sheet, [sel.row, sel.row - 1]);
            } else if (type === 'down-move') {
                [data[sel.row + 1], data[sel.row]] = [data[sel.row], data[sel.row + 1]];
                SpreadJsObj.reLoadRowsData(sheet, [sel.row, sel.row + 1]);
                sheet.setSelection(sel.row + 1, sel.col, sel.rowCount, sel.colCount);
                SpreadJsObj.reloadRowsBackColor(sheet, [sel.row, sel.row + 1]);
            }
            colSpreadObj.refreshOperationValid(sheet);
        },
        editStarting(e, info) {
            if (!info.sheet.zh_setting || !info.sheet.zh_data) return;
            const col = info.sheet.zh_setting.cols[info.col];
            const node = info.sheet.zh_data[info.row];
            if (!node) {
                info.cancel = true;
                return;
            }
            switch (col.field) {
                case 'bills_valid':
                    info.cancel = !node.bills;
                    break;
                case 'pos_valid':
                    info.cancel = !node.pos;
                    break;
                case 'alias':
                    info.cancel = node.fixed.indexOf('alias') >= 0;
                    break;
            }
        },
        editEnded: function (e, info) {
            if (!info.sheet.zh_setting) return;

            const col = info.sheet.zh_setting.cols[info.col];
            const sortData = info.sheet.zh_dataType === 'tree' ? info.sheet.zh_tree.nodes : info.sheet.zh_data;
            const node = sortData[info.row];

            // 未改变值则不提交
            const orgValue = node[col.field];
            const newValue = trimInvalidChar(info.editingText);
            if (orgValue == info.editingText || ((!orgValue || orgValue === '') && (newValue === ''))) {
                return;
            }
            node[col.field] = newValue;
        },
        deletePress: function (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 || (['dgn_qty1', 'dgn_qty2'].indexOf(col.field) >= 0 && node.b_code)) continue;
                    if (col.type === 'Number' && node.settle_status === settleStatus.finish) continue;

                    if (['dgn_qty1', 'dgn_qty2'].indexOf(col.field) < 0 && sheet.zh_tree.checkNodeUsed(node, pos)) {
                        toastr.warning('"' + (node.code || '') + (node.b_code || '') + ' ' + node.name +'"已计量，请勿修改');
                        return;
                    }

                    data[col.field] = null;
                    const exprInfo = getExprInfo(col.field);
                    if (exprInfo) {
                        data[exprInfo.expr] = '';
                    }
                    bDel = true;
                }
                if (bDel) datas.push(data);
            }
            if (datas.length > 0) {
                postData(window.location.pathname + '/update', {postType: 'update', postData: datas}, function (result) {
                    const refreshNode = sheet.zh_tree.loadPostData(result);
                    colSpreadObj.refreshTree(sheet, refreshNode);
                    colSpreadObj.loadExprToInput(sheet);
                });
            }
        },
        buttonClicked: function(e, info) {
            if (!info.sheet.zh_setting) return;

            const col = info.sheet.zh_setting.cols[info.col];
            if (col.field.indexOf('valid') < 0) return;

            const node = SpreadJsObj.getSelectObject(info.sheet);
            if (col.field === 'pos_valid' && !node.pos) return;
            if (col.field === 'bills_valid' && !node.bills) return;
            if (node.fixed.indexOf('valid') >= 0) return;
            if (col.field === 'valid') {
                node.valid = !node.valid;
                node.bills_valid = node.valid && node.bills;
                node.pos_valid = node.valid && node.pos;
            } else {
                node[col.field] = !node[col.field];
                if (node.bills_valid || node.pos_valid) node.valid = 1;
                if (!node.bills_valid && !node.pos_valid) node.valid = 0;
            }
            SpreadJsObj.reLoadRowData(info.sheet, info.row);
        },
    };

    reloadData();
    colSpreadObj.refreshOperationValid(colSheet);
    colSpread.bind(spreadNS.Events.SelectionChanged, colSpreadObj.selectionChanged);
    colSpread.bind(spreadNS.Events.EditStarting, colSpreadObj.editStarting);
    colSpread.bind(spreadNS.Events.EditEnded, colSpreadObj.editEnded);
    colSpread.bind(spreadNS.Events.ButtonClicked, colSpreadObj.buttonClicked);
    $('a[name="base-opr"]').click(function () {
        colSpreadObj.baseOpr(colSheet, this.getAttribute('type'));
    });

    const getCurrentColSet = function() {
        const cols = { key: 0, name: 1, bills_valid: 2, pos_valid: 3, valid: 4, alias: 5};
        const rowCount = colSheet.getRowCount();
        const result = [];
        for (let iRow = 0; iRow < rowCount; iRow++) {
            const keyName = colSheet.getText(iRow, cols.key);
            const baseCol = BaseSetCol.find(x => { return x.key === keyName; });
            if (!baseCol) continue;

            const valid = colSheet.getText(iRow, cols.valid);
            const colSet = { key: keyName, valid: valid === '1' || valid === 'TRUE' ? 1 : 0 };
            if (baseCol.bills) {
                const bills_valid = colSheet.getText(iRow, cols.bills_valid);
                colSet.bills_valid = bills_valid === '1' || bills_valid === 'TRUE' ? 1 : 0;
            }
            if (baseCol.pos) {
                const pos_valid = colSheet.getText(iRow, cols.pos_valid);
                colSet.pos_valid = pos_valid === '1' || pos_valid === 'TRUE' ? 1 : 0;
            }
            if (baseCol.fixed.indexOf('alias') < 0) {
                const alias = colSheet.getText(iRow, cols.alias);
                if (alias) colSet.alias = alias;
            }
            result.push(colSet);
        }
        console.log(result);
        return result;
    };
    let previewSpreadSetting, previewBillsSpread, previewPosSpread;
    $('#preview-spread').on('shown.bs.modal', function () {
        if (!previewBillsSpread) {
            previewBillsSpread = SpreadJsObj.createNewSpread($('#preview-bills-spread')[0]);
        }
        const previewBillsSheet = previewBillsSpread.getActiveSheet();
        SpreadJsObj.initSheet(previewBillsSheet, previewSpreadSetting.billsSpread);

        if (!previewPosSpread) {
            previewPosSpread = SpreadJsObj.createNewSpread($('#preview-pos-spread')[0]);
        }
        const previewPosSheet = previewPosSpread.getActiveSheet();
        SpreadJsObj.initSheet(previewPosSheet, previewSpreadSetting.posSpread);
    });

    $('#spread-save').click(() => {
        const data = { sType, code: sCode, colSet: getCurrentColSet() };
        postData('/setting/spread/save', data, function(result) {
            colSet.length = 0;
            colSet.push(...result.colSet);
            reloadData();
        });
    });
    $('#spread-preview').click(() => {
        const data = { sType, colSet: getCurrentColSet() };
        postData('/setting/spread/preview', data, function(result) {
            previewSpreadSetting = result;
            $('#preview-spread').modal('show');
        })
    });
    $('#spread-reset').click(() => {
        const data = { sType, code: sCode };
        postData('/setting/spread/reset', data, function(result) {
            colSet.length = 0;
            colSet.push(...result.colSet);
            reloadData();
        });
    });
});