// @ts-nocheck
class SweetalertSystem {
constructor() {
this.fieldRegistry = {};
this.modalRegistry = {};
this.nestedModalStack = [];
this.buttonHandlers = new Map();
this.addEntityButtons = null;
this.initCoreComponents(); } // ===== 核心字段类型注册 ===== initCoreComponents() { this.registerFieldType('text', { render: (config) => this.renderTextField(config) }); this.registerFieldType('select', { render: (config) => this.renderSelectField(config), afterRender: (element, config) => this.handleSelectAfterRender(element, config) }); this.registerFieldType('number', { render: (config) => this.renderNumberField(config) }); this.registerFieldType('checkbox', { render: (config) => this.renderCheckboxField(config) }); } registerFieldType(type, definition) { if (!definition.render || typeof definition.render !== 'function') { throw new Error(`Field type '${type}' must have a render function`); } this.fieldRegistry[type] = definition; } // ===== 字段渲染方法 ===== renderTextField(config) { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="text" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} placeholder="${config.placeholder || ''}"> </div>`; } renderSelectField(config) { const options = (config.options || []) .map(opt => `<option value="${opt.value}" ${config.value == opt.value ? 'selected' : ''}>${opt.label}</option>`) .join(''); return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <div class="input-group"> <select class="form-select ${config.select2 ? 'select2-field' : ''}" name="${config.name}" ${config.required ? 'required' : ''} placeholder="${config.placeholder || '请选择'}"> <option value=""></option> ${options} </select> ${config.addButton ? ` <button class="btn btn-outline-secondary add-entity-btn" type="button" data-target-field="${config.name}" data-entity-type="${config.addButton.entityType}"> <i class="fa fa-plus"></i> ${config.addButton.label} </button> ` : ''} </div> </div>`; } renderNumberField(config) { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="number" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} step="${config.step || 1}" min="${config.min || 0}"> </div>`; } renderCheckboxField(config) { return `<div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" name="${config.name}" id="${config.name}" ${config.value ? 'checked' : ''}> <label class="form-check-label" for="${config.name}">${config.label}</label> </div>`; } // ===== Select2 处理 ===== handleSelectAfterRender(element, config) { if (config.select2) { const $ select = $(element).find('select'); this.safeInitSelect2($ select, { theme: 'bootstrap', placeholder: config.placeholder || '请选择', allowClear: true, dropdownParent: Swal.getContainer() || document.body }); } } // ===== 表单处理 ===== async openForm(config) { const { title, fields, onSubmit, onAddEntity } = config; const formHTML = fields.map(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; return fieldType ? fieldType.render(fieldConfig) : `<div class="error">Field type '${fieldConfig.type}' not supported</div>`; }).join(''); return new Promise((resolve) => { Swal.fire({ title, html: `<form>${formHTML}</form>`, focusConfirm: false, showCancelButton: true, confirmButtonText: config.confirmButtonText || '保存', cancelButtonText: config.cancelButtonText || '取消', preConfirm: () => this.collectFormData(), didOpen: () => { // 处理字段后渲染逻辑 fields.forEach(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; if (fieldType && fieldType.afterRender) { const element = Swal.getPopup().querySelector(`[name="${fieldConfig.name}"]`); if (element) { fieldType.afterRender(element, fieldConfig); } } }); // 设置按钮处理器 this.setupMultiButtonHandlers(config, onAddEntity); }, willClose: () => { this.cleanupMultiButtonHandlers(); this.destroyAllSelect2(); } }).then((result) => { if (result.isConfirmed && onSubmit) { onSubmit(result.value); } resolve(result.isConfirmed); }); }); } collectFormData() { const data = {}; const popup = Swal.getPopup(); const form = popup?.querySelector('form'); if (form) { const formData = new FormData(form); for (const [name, value] of formData.entries()) { // 处理多值字段 if (data[name]) { data[name] = Array.isArray(data[name]) ? [...data[name], value] : [data[name], value]; } else { data[name] = value; } } } return data; } // ===== 按钮事件处理 ===== setupMultiButtonHandlers(config, onAddEntity) { const popup = Swal.getPopup(); if (!popup) return; this.cleanupMultiButtonHandlers(); this.addEntityButtons = Array.from(popup.querySelectorAll('.add-entity-btn')); this.addEntityButtons.forEach(btn => { const handler = async () => { const targetField = btn.dataset.targetField; const entityType = btn.dataset.entityType; if (onAddEntity) { const newItem = await onAddEntity(entityType, targetField); if (newItem) { this.updateSelectField(popup, targetField, newItem); } } }; btn.addEventListener('click', handler); this.buttonHandlers.set(btn, handler); }); } cleanupMultiButtonHandlers() { if (this.addEntityButtons) { this.addEntityButtons.forEach(btn => { const handler = this.buttonHandlers.get(btn); if (handler) { btn.removeEventListener('click', handler); this.buttonHandlers.delete(btn); } }); this.addEntityButtons = null; } } updateSelectField(popup, fieldName, newItem) { if (!popup || !popup.isConnected) return; const select = popup.querySelector(`select[name="${fieldName}"]`); if (select) { const option = new Option(newItem.label, newItem.value, true, true); select.add(option); if ($(select).hasClass('select2-initialized')) { $(select).trigger('change'); } } } // ===== 模态框系统 ===== registerModalType(name, config) { this.modalRegistry[name] = { ...config, afterRender: (config, container) => { config.fields.forEach(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; if (fieldType && fieldType.afterRender) { const fieldElement = container.find(`[name="${fieldConfig.name}"]`).closest('.mb-3'); if (fieldElement.length && this.isElementInDOM(fieldElement[0])) { try { fieldType.afterRender(fieldElement[0], fieldConfig); } catch (error) { console.error(`AfterRender error for field ${fieldConfig.name}:`, error); } } } }); } }; } registerEntityForm(entityType, fields) { // 确保 fields 是数组 if (!Array.isArray(fields)) { console.error(`Fields must be an array for entity type: ${entityType}`); return; } this.registerModalType(entityType, { template: `<div class="modal fade" id="${entityType}Modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="${entityType}Title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body" id="${entityType}Body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="${entityType}Submit">保存</button> </div> </div> </div> </div>`, render: (config, container) => { container.find(`#${entityType}Title`).text(config.title); let formHTML = ''; // 使用注册时传入的 fields，而不是 config.fields fields.forEach(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; if (fieldType) { formHTML += fieldType.render(fieldConfig); } }); container.find(`#${entityType}Body`).html(formHTML); }, getFormData: (container) => { const formData = {}; container.find('input, select, textarea').each(function() { const $ el = $(this); const name = $ el.attr('name'); if (!name) return; if ($ el.attr('type') === 'checkbox') { formData[name] = $ el.is(':checked'); } else { formData[name] = $ el.val(); } }); return formData; }, bindEvents: (config, container, onSubmit) => { container.find(`#${entityType}Submit`).off('click').on('click', () => { const formData = this.getFormData(container); onSubmit(formData); }); } }); } open(modalType, config, callbacks = {}) { if (!this.modalRegistry[modalType]) { console.error(`Unregistered modal type: ${modalType}`); return null; } const modalConfig = this.modalRegistry[modalType]; const modalId = `${modalType}Modal`; let $ modal = $(`#${modalId}`); // 创建模态框如果不存在 if ($ modal.length === 0) { $ modal = $(modalConfig.template); $('body').append($ modal); } // 重新初始化模态框 if ($ modal.data('bs.modal')) { $ modal.data('bs.modal').dispose(); } // 渲染内容 modalConfig.render(config, $ modal); // 绑定事件 if (modalConfig.bindEvents) { modalConfig.bindEvents(config, $ modal, callbacks.onSubmit || (() => {})); } // 创建Bootstrap模态实例 const modalInstance = new bootstrap.Modal($ modal[0]); modalInstance.show(); // 执行后渲染逻辑 if (modalConfig.afterRender) { modalConfig.afterRender(config, $ modal); } // 添加到模态栈 const modalObj = { hide: () => modalInstance.hide(), show: () => modalInstance.show(), getElement: () => $ modal[0], config }; this.nestedModalStack.push(modalObj); return modalObj; } closeCurrentModal() { if (this.nestedModalStack.length > 0) { const currentModal = this.nestedModalStack.pop(); currentModal.hide(); // 显示上一个模态框 if (this.nestedModalStack.length > 0) { const prevModal = this.nestedModalStack[this.nestedModalStack.length - 1]; prevModal.show(); } } } // 添加辅助方法检查元素是否在 DOM 中 isElementInDOM(element) { return document.body.contains(element); } // 增强的安全 Select2 销毁方法 safeDestroySelect2($ select) { try { // 检查元素是否仍在 DOM 中 if (!$ select || $ select.length === 0 || !this.isElementInDOM($ select[0])) { return false; } // 检查 Select2 是否已初始化 if ($ select.data('select2')) { // 尝试使用官方销毁方法 $ select.select2('destroy'); // 手动清理残留数据 $ select.removeData('select2'); $ select.removeClass('select2-hidden-accessible'); $ select.next('.select2-container').remove(); } $ select.removeClass('select2-initialized'); return true; } catch (error) { console.error('Select2 destruction failed:', error); // 尝试回退清理 try { $ select.removeData('select2'); $ select.removeClass('select2-hidden-accessible'); $ select.next('.select2-container').remove(); } catch (fallbackError) { console.error('Fallback cleanup failed:', fallbackError); } return false; } } // 增强的安全 Select2 初始化方法 safeInitSelect2($ select, options) { try { // 检查元素是否在 DOM 中 if (!$ select || $ select.length === 0 || !this.isElementInDOM($ select[0])) { return false; } // 先尝试销毁已有的实例 this.safeDestroySelect2($ select); // 确保 Select2 可用 if (typeof $.fn.select2 !== 'function') { console.warn('Select2 not available, skipping initialization'); return false; } // 应用安全配置 const safeOptions = { ...options, dropdownParent: options.dropdownParent || document.body }; // 初始化 Select2 $ select.select2(safeOptions); $ select.addClass('select2-initialized'); return true; } catch (error) { console.error('Select2 initialization failed:', error); // 尝试回退到简单选择框 try { $ select.addClass('form-control'); $ select.removeClass('select2-field'); } catch (fallbackError) { console.error('Fallback styling failed:', fallbackError); } return false; } } // ... 其他代码 ... // 在弹窗关闭时清理所有 Select2 实例 destroyAllSelect2() { const popup = Swal.getPopup(); if (popup) { $(popup).find('.select2-initialized').each((index, element) => { this.safeDestroySelect2($(element)); }); } }
}完整优化
本文介绍了一个用于网页的遮罩层和弹出窗口的JavaScript脚本实现方法，包括自适应屏幕尺寸的功能。该脚本适用于IE和Firefox浏览器，并提供了一种简单的方式通过页面元素触发弹窗显示和关闭。
扫一扫
1783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
