高效管理带优先级数组：插入与更新时的自动优先级调整策略

// 假设这是我们的规则数组，在React中它会是stateLinhas
let rules = []; // 初始为空，或包含现有规则

/**
 * 添加或更新规则，并自动调整优先级以避免冲突。
 * @param {object} newRule - 待添加或更新的规则对象，至少包含一个 priority 属性。
 * @param {Array<object>} currentRules - 当前的规则数组。
 * @returns {Array<object>} - 调整后的新规则数组。
 */
function addOrUpdateRuleWithPriority(newRule, currentRules) {
    // 为了遵循React的不可变性原则，我们先复制一份数组
    const updatedRules = [...currentRules];
    const newPriority = parseInt(newRule.priority);

    // 查找是否存在相同优先级的规则
    const index = updatedRules.findIndex(rule => parseInt(rule.priority) === newPriority);

    if (index !== -1) {
        // 存在优先级冲突，将新规则插入到冲突位置
        updatedRules.splice(index, 0, { ...newRule, priority: newPriority }); // 确保插入的是新对象，并使用解析后的优先级

        let currentShiftedPriority = newPriority;
        // 从插入点之后开始，调整后续规则的优先级
        for (let i = index + 1; i < updatedRules.length; i++) {
            if (parseInt(updatedRules[i].priority) === currentShiftedPriority) {
                updatedRules[i] = { ...updatedRules[i], priority: currentShiftedPriority + 1 };
                currentShiftedPriority++; // 更新下一个需要检查的优先级
            } else if (parseInt(updatedRules[i].priority) > currentShiftedPriority) {
                // 如果当前规则的优先级已经大于 currentShiftedPriority，
                // 那么后续规则的优先级也应该不会再与 currentShiftedPriority 冲突了
                // 除非它们与 updatedRules[i] 的新优先级冲突，但这超出了当前逻辑的范围
                // 在本场景中，我们只关心紧密的连续冲突
                break; // 优化：如果遇到一个比当前shiftedPriority大的，说明不再有连续冲突，可以提前退出
            }
        }
    } else {
        // 不存在优先级冲突，直接添加新规则
        updatedRules.push({ ...newRule, priority: newPriority });
    }

    // 最终对整个数组进行排序，确保所有规则都按优先级升序排列
    // 这对于处理非连续插入或确保初始状态的正确性非常重要
    updatedRules.sort((a, b) => parseInt(a.priority) - parseInt(b.priority));

    return updatedRules;
}

import React, { useState, useEffect } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
import filterFactory from 'react-bootstrap-table2-filter';

function RuleTable() {
    const [stateLinhas, setStateLinhas] = useState([
        { id: 1, name: 'Rule A', priority: 1 },
        { id: 2, name: 'Rule B', priority: 2 },
        { id: 3, name: 'Rule C', priority: 4 },
    ]);

    const colunas = [
        { dataField: 'id', text: 'ID', editable: false },
        { dataField: 'name', text: 'Rule Name' },
        { dataField: 'priority', text: 'Priority' }
    ];

    const cellEdit = cellEditFactory({
        mode: 'click',
        blurToSave: true,
        // 在单元格保存前处理优先级调整逻辑
        beforeSaveCell: (oldValue, newValue, row, column) => {
            if (column.dataField === 'priority') {
                const newPriority = parseInt(newValue);
                // 如果新值无效或与旧值相同，则不进行处理
                if (isNaN(newPriority) || newPriority < 1 || newPriority === parseInt(oldValue)) {
                    return true; // 允许保存，但可能需要额外的验证或用户反馈
                }

                // 创建一个模拟的新规则对象，用于传递给处理函数
                const updatedRow = { ...row, [column.dataField]: newPriority };

                // 调用核心逻辑函数来处理优先级调整
                const newLinhas = addOrUpdateRuleWithPriority(updatedRow, stateLinhas.filter(item => item.id !== row.id));
                // 注意：这里我们过滤掉了当前正在编辑的行，因为addOrUpdateRuleWithPriority会重新插入它。
                // 如果是编辑现有行，并且没有改变优先级，则可能需要更精细的逻辑。
                // 这里的例子假设每次编辑优先级都会触发潜在的插入和调整。

                setStateLinhas(newLinhas);
                return false; // 返回 false 阻止 BootstrapTable 内部的默认保存行为，因为我们已经手动更新了 state
            }
            return true; // 对于非优先级的列，允许默认保存
        },
        // afterSaveCell 可以在状态更新后进行一些副作用操作，例如发送API请求等。
        // 在这里，由于 beforeSaveCell 已经处理了排序和状态更新，afterSaveCell 可能不再需要额外的排序。
        // 但如果需要确保最终排序，可以再次调用排序。
        afterSaveCell: (oldValue, newValue, row, column) => {
            // 确保 stateLinhas 已经更新，然后可以执行其他操作
            console.log('Cell saved, updated state:', stateLinhas);
        }
    });

    const defaultSorted = [{
        dataField: 'priority',
        order: 'asc'
    }];

    return (
        <BootstrapTable
            cellEdit={cellEdit}
            keyField={"id"}
            responsive
            bordered={false}
            striped={false}
            defaultSorted={defaultSorted}
            classes={"table align-middle table-wrap"}
            headerWrapperClasses={"thead-light"}
            columns={colunas}
            data={stateLinhas}
            filter={filterFactory()}
        />
    );
}

export default RuleTable;