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

(function () {
    let locale = 'en';

    // 获取模版列表
    var getTemplateList = function () {
        requestFN({ url: 'list' }, function (data) {
            data.forEach(function (item) {
                item.content = JSON.parse(item.content);
            });
            console.log(data);
            renderListItem(data);
        });
    };

    var renderListItem = function (list) {
        var listPanel = $('#list-panel');
        listPanel.empty();
        $.each(list, function (index, item) {
            let background = item.content?.welcomeData?.background || item.content?.mainData?.background || '';
            let isImage = background.indexOf('http') !== -1;
            let backgroundImage = isImage ? `url(${background})` : background;
            var listItem = `
                    <div class="list-item" data-id="${item.id}">
                        <div class="list-item-image" style="background: ${backgroundImage} no-repeat center center / cover"></div>
                        <div class="list-item-content">
                            <span class="list-item-name">${item.name}</span>
                            <div class="list-item-actions">
                                <button class="action-btn">...</button>
                                <div class="action-menu">
                                    <button class="copy-btn">${userLangConfig[locale].list.copy}</button>
                                    <button class="delete-btn">${userLangConfig[locale].list.delete}</button>
                                    <button class="edit-btn">${userLangConfig[locale].list.edit}</button>
                                    <button class="apply-btn">${userLangConfig[locale].list.apply}</button>
                                </div>
                            </div>
                        </div>
                        <div class="list-item-date">
                            <span>${userLangConfig[locale].list.update_time}：${item.createTime}</span>
                        </div>
                    </div>
                `;
            listPanel.append(listItem);
        });
    };

    // 统一的事件处理函数，在文档加载后只绑定一次
    var bindEvents = function () {
        $(document).on('click', '.action-btn', function (e) {
            e.stopPropagation();
            var menu = $(this).siblings('.action-menu');
            $('.action-menu').not(menu).hide();
            menu.toggle();
        });

        $(document).on('click', function () {
            $('.action-menu').hide();
        });

        $(document).on('click', '.copy-btn', function () {
            var id = $(this).closest('.list-item').data('id');
            requestFN({ type: 'POST', url: `copy?id=${id}` }, function (data) {
                getTemplateList();
            });
        });

        $(document).on('click', '.delete-btn', function () {
            var id = $(this).closest('.list-item').data('id');
            requestFN({ type: 'POST', url: `deleteById?id=${id}` }, function (data) {
                getTemplateList();
            });
        });

        $(document).on('click', '.edit-btn', function () {
            var id = $(this).closest('.list-item').data('id');
            window.location.href = `index.html?id=${id}`;
        });

        $(document).on('click', '.apply-btn', function () {
            var id = $(this).closest('.list-item').data('id');
            requestFN({ type: 'POST', url: `apply?id=${id}` }, function (data) {
                layer.msg(`${userLangConfig[locale].base.success}`);
            });
        });
    };

    var i18n = function () {
        return new Promise((resolve) => {
            setTimeout(() => {
                locale = 'zh-CN';
                // locale = 'en';
                // 设置语言
                layui.i18n.set({
                    locale: locale,
                    messages: {
                        // 扩展其他语言包
                        en: userLangConfig.en,
                        'zh-CN': userLangConfig['zh-CN'],
                    },
                });
                // 渲染页面模板
                const template = $('#template').html();
                const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
                $('#root').html(html);
                resolve();
            }, 500);
        });
    };

    $(function () {
        (async function () {
            // 国际化
            await i18n();

            getTemplateList();

            bindEvents();
        })();
    });
})();