vue3-mgt-template/demoHtml/flex/js/index.js

(function () {
    let initData = null;
    let grid = null;
    let currentComponent = null;
    let cellHeight = 40;

    // 生成唯一id
    var generateUniqueId = function () {
        const timestamp = Date.now().toString(36);
        const randomNum = Math.random().toString(36).substring(2);
        return timestamp + randomNum;
    };

    /** 初始化 */
    var init = function () {
        const initDataStorage = localStorage.getItem('initData');
        if (!initDataStorage) {
            initData = {
                id: `grid_${generateUniqueId()}`,
                children: [],
            };
        } else {
            initData = JSON.parse(initDataStorage);
        }
        console.log(initData, 'initData');

        // 让gridstack知道如何渲染，组件children中的content直接渲染html
        GridStack.renderCB = function (el, w) {
            el.innerHTML = w.content;
        };
        grid = GridStack.init({
            // 一行高度
            cellHeight,
            // 间距
            margin: 5,
            minRow: Math.floor(($(window).height() - 80) / cellHeight),
            acceptWidgets: true,
            float: true,
            removable: '#trash',
            // subGridOpts: subOptions,
            // subGridDynamic: true,
            children: initData.children,
        });
        GridStack.setupDragIn('#components-panel .component-item', undefined, [
            {
                w: 12,
                h: 1,
                type: 'banner',
                name: '我是轮播图',
                fontSize: 14,
                color: '#333',
                background: '#fff',
                detail: '',
                icon: 'fa-image',
                link: '',
            },
            { w: 2, h: 1 },
        ]);
        console.log(grid, 'grid实例');

        // grid.load(initData.children);

        grid.engine.nodes.forEach((item) => {
            handleAddComponent(item);
        });

        grid.on('added', function (_event, itemArray) {
            console.log(itemArray, '这里触发了添加了added事件');
            itemArray.forEach((item) => {
                handleAddComponent(item);
            });
        });

        grid.on('removed', function (_event, itemArray) {
            console.log(itemArray, '这里触发了移除removed事件');
            itemArray.forEach((item) => {
                handleRemoveComponent(item);
            });
        });
    };

    // 处理添加组件之后的操作
    var handleAddComponent = (component) => {
        if (!component.id) {
            component.id = `${component.type}_${generateUniqueId()}`;
        }
        setComponentView(component);
        component.el.addEventListener('click', () => {
            console.log('点击组件', component);
            if (currentComponent && currentComponent.id === component.id) {
                return;
            }
            currentComponent = component;
            // 右侧显示组件属性列表
            if (!$('#props-panel').find('form').is(':visible')) {
                $('#props-panel').find('.wait-box').hide();
                $('#props-panel').find('form').show();
            }
            // 将当前选中组件的属性显示在右侧列表中
            setCurrentComponentProps(currentComponent);
        });
    };

    var handleRemoveComponent = (component) => {
        if (currentComponent && currentComponent.id === component.id) {
            currentComponent = null;
            // 右侧显示请选择组件
            if (!$('#props-panel').find('wait-box').is(':visible')) {
                console.log('111');
                $('#props-panel').find('.wait-box').show();
                $('#props-panel').find('form').hide();
            }
        }
    };

    //将当前选中组件的属性显示在右侧列表中
    var setCurrentComponentProps = function (component) {
        const form = $('#props-panel').find('form');
        form.find('#name').val(component.name);
        form.find('#background').val(component.background);
        form.find('#fontSize').val(component.fontSize);
        form.find('#color').val(component.color);
        form.find('#icon').val(component.icon);
        form.find('#detail').val(component.detail);
        form.find('#link').val(component.link);
    };

    // 定义组件设置配置策略
    const componentStrategies = {
        name: function (el, value) {
            el.find('span').text(value);
        },
        background: function (el, value) {
            el.find('.grid-stack-item-content').css('background', value);
        },
        fontSize: function (el, value) {
            el.find('span').css('font-size', value + 'px');
        },
        color: function (el, value) {
            el.find('span').css('color', value);
        },
        icon: function (el, value) {
            el.find('i').attr('class', `fas ${value}`);
        },
        // detail, link不需要反显页面所有不需要修改dom
    };

    // 设置当前传递组件的视图展示
    var setComponentView = function (component, fields = null) {
        const el = $(component.el);

        // 确定要处理的属性
        const propsToHandle = fields || Object.keys(componentStrategies);

        // 遍历并执行对应的策略
        propsToHandle.forEach((prop) => {
            if (componentStrategies[prop] && component[prop] !== undefined) {
                componentStrategies[prop](el, component[prop]);
            }
        });
    };

    // 定义映射关系：元素ID -> 事件类型 -> 组件属性
    const elementMappings = {
        name: { event: 'blur', property: 'name' },
        background: { event: 'blur', property: 'background' },
        fontSize: { event: 'blur', property: 'fontSize' },
        color: { event: 'blur', property: 'color' },
        icon: { event: 'blur', property: 'icon' },
        detail: { event: 'blur', property: 'detail' },
        link: { event: 'blur', property: 'link' },
        // icon: { event: 'change', property: 'icon' }, // select使用change
    };

    // 统一绑定函数
    var bindComponentEvents = function () {
        Object.keys(elementMappings).forEach((elementId) => {
            const mapping = elementMappings[elementId];
            const $element = $('#' + elementId);

            if ($element.length) {
                // 组件名称添加失去焦点事件或者change事件
                $element.off(mapping.event).on(mapping.event, function () {
                    const value = $(this).val();
                    currentComponent[mapping.property] = value;
                    setComponentView(currentComponent, [mapping.property]);
                });
            }
        });
    };

    $('.save-container').click(function () {
        // grid.addWidget({ w: 2, content: 'item 1' });
        console.log(grid.save());
        console.log(grid);
        initData.children = grid.save();
        localStorage.setItem('initData', JSON.stringify(initData));
    });

    /** 执行方法 */
    $(function () {
        init();
        // 调用绑定
        bindComponentEvents();
    });
})();