// @ts
-nocheck
class SweetalertSystem {
c
onstructor() {
th
is.fieldReg
istry = {};
th
is.modalReg
istry = {}; // 添加模态类型注册表
th
is.nestedModalStack = []; // 添加嵌套模态栈
th
is.initCoreComp
onents();
// 初始化事件处理器映射
th
is.butt
onHandlers = new Map();
th
is.addEntityButt
ons = null;
}
initCoreComp
onents() {
// 注册核心字段类型
th
is.reg
isterFieldType('text', {
render
: (c
onfig) => {
return `<div class="mb
-3">
<label class="form
-label">${c
onfig
.label}${c
onfig
.required ? '*'
: ''}</label>
<
input type="text" class="form
-c
ontrol" name="${c
onfig
.name}"
value="${c
onfig
.value || ''}" ${c
onfig
.required ? 'required'
: ''}
placeholder="${c
onfig
.placeholder || ''}">
</div>`;
}
});
th
is.reg
isterFieldType('select', {
render
: (c
onfig) => {
c
onst opti
ons = (c
onfig
.opti
ons || [])
.map(opt => `<opti
on value="${opt
.value}" ${c
onfig
.value == opt
.value ? 'selected'
: ''}>${opt
.label}</opti
on>`)
.join('');
return `<div class="mb
-3">
<label class="form
-label">${c
onfig
.label}${c
onfig
.required ? '*'
: ''}</label>
<div class="
input
-group">
<select class="form
-select" name="${c
onfig
.name}" ${c
onfig
.required ? 'required'
: ''}>
<opti
on value="">${c
onfig
.placeholder || '请选择'}</opti
on>
${opti
ons}
</select>
${c
onfig
.addButt
on ? `
<butt
on class="btn btn
-outl
ine
-sec
ondary add
-entity
-btn" type="butt
on"
data
-target
-field="${c
onfig
.name}">
<i class="fa fa
-plus"></i> ${c
onfig
.addButt
on.label}
</butt
on>
`
: ''}
</div>
</div>`;
},
// 更新 afterRender 方法
afterRender
: (element, c
onfig) => {
if (c
onfig
.select2) {
c
onst $select = $(element)
.f
ind('select');
c
onst swalC
onta
iner = Swal
.getC
onta
iner();
th
is.safe
InitSelect2($select, {
theme
: 'bootstrap',
placeholder
: c
onfig
.placeholder || '请选择',
allowClear
: true,
dropdownParent
: swalC
onta
iner || document
.body
});
}
}
});
th
is.reg
isterFieldType('number', {
render
: (c
onfig) => {
return `<div class="mb
-3">
<label class="form
-label">${c
onfig
.label}${c
onfig
.required ? '*'
: ''}</label>
<
input type="number" class="form
-c
ontrol" name="${c
onfig
.name}"
value="${c
onfig
.value || ''}" ${c
onfig
.required ? 'required'
: ''}
step="${c
onfig
.step || 1}" m
in="${c
onfig
.m
in || 0}">
</div>`;
}
});
th
is.reg
isterFieldType('checkbox', {
render
: (c
onfig) => {
return `<div class="mb
-3 form
-check">
<
input type="checkbox" class="form
-check
-input" name="${c
onfig
.name}"
id="${c
onfig
.name}" ${c
onfig
.value ? 'checked'
: ''}>
<label class="form
-check
-label" for="${c
onfig
.name}">${c
onfig
.label}</label>
</div>`;
}
});
}
// 修改注册方法
- 接受对象而不是函数
reg
isterFieldType(type, def
initi
on) {
if (!def
initi
on.render || typeof def
initi
on.render !== '
function') {
throw new
Error(`Field type '${type}' must have a render
function`);
}
th
is.fieldReg
istry[type] = def
initi
on;
}
// === 字段渲染方法 ===
renderTextField(c
onfig) {
return `<div class="mb
-3">
<label class="form
-label">${c
onfig
.label}${c
onfig
.required ? '*'
: ''}</label>
<
input type="text" class="form
-c
ontrol" name="${c
onfig
.name}"
value="${c
onfig
.value || ''}" ${c
onfig
.required ? 'required'
: ''}
placeholder="${c
onfig
.placeholder || ''}">
</div>`;
}
renderSelectField(c
onfig) {
c
onst opti
ons = (c
onfig
.opti
ons || [])
.map(opt => `<opti
on value="${opt
.value}" ${c
onfig
.value == opt
.value ? 'selected'
: ''}>${opt
.label}</opti
on>`)
.join('');
return `<div class="mb
-3">
<label class="form
-label">${c
onfig
.label}${c
onfig
.required ? '*'
: ''}</label>
<div class="
input
-group">
<select class="form
-select" name="${c
onfig
.name}" ${c
onfig
.required ? 'required'
: ''}>
<opti
on value="">${c
onfig
.placeholder || '请选择'}</opti
on>
${opti
ons}
</select>
${c
onfig
.addButt
on ? `
<butt
on class="btn btn
-outl
ine
-sec
ondary add
-entity
-btn" type="butt
on"
data
-target
-field="${c
onfig
.name}">
<i class="fa fa
-plus"></i> ${c
onfig
.addButt
on.label}
</butt
on>
`
: ''}
</div>
</div>`;
}
renderNumberField(c
onfig) {
return `<div class="mb
-3">
<label class="form
-label">${c
onfig
.label}${c
onfig
.required ? '*'
: ''}</label>
<
input type="number" class="form
-c
ontrol" name="${c
onfig
.name}"
value="${c
onfig
.value || ''}" ${c
onfig
.required ? 'required'
: ''}
step="${c
onfig
.step || 1}" m
in="${c
onfig
.m
in || 0}">
</div>`;
}
renderCheckboxField(c
onfig) {
return `<div class="mb
-3 form
-check">
<
input type="checkbox" class="form
-check
-input" name="${c
onfig
.name}"
id="${c
onfig
.name}" ${c
onfig
.value ? 'checked'
: ''}>
<label class="form
-check
-label" for="${c
onfig
.name}">${c
onfig
.label}</label>
</div>`;
}
// === 核心方法 ===// === 核心方法 ===
/**
* 打开表单弹窗（支持多个新建按钮）
* @param {Object} c
onfig
- 配置对象
*/
async openForm(c
onfig) {
c
onst { title, fields,
onSubmit,
onAddEntity } = c
onfig;
// 生成表单HTML
c
onst formHTML = fields
.map(fieldC
onfig => {
if (!fieldC
onfig
.type) return '<div class="
error">M
iss
ing field type</div>';
c
onst fieldType = th
is.fieldReg
istry[fieldC
onfig
.type];
if (!fieldType) return `<div class="
error">Field type '${fieldC
onfig
.type}'
not supported</div>`;
return fieldType
.render(fieldC
onfig);
})
.join('');
// 创建弹窗
return new Prom
ise((resolve) => {
Swal
.fire({
title,
html
: `<form>${formHTML}</form>`,
focusC
onfirm
: false,
showCancelButt
on: true,
c
onfirmButt
onText
: c
onfig
.c
onfirmButt
onText || '保存',
cancelButt
onText
: c
onfig
.cancelButt
onText || '取消',
preC
onfirm
: () => th
is.collectFormData(),
//
... 配置
...
didOpen
: () => {
// 使用 Mutati
onObserver 确保 DOM 完全渲染
c
onst observer = new Mutati
onObserver(() => {
if (Swal
.getPopup()
.querySelectorAll('
.add
-entity
-btn')
.length > 0) {
observer
.d
isc
onnect();
th
is.setupMultiButt
onHandlers(c
onfig,
onAddEntity);
}
});
observer
.observe(Swal
.getPopup(), {
childL
ist
: true,
subtree
: true
});
},
willClose
: () => {
th
is.cleanupMultiButt
onHandlers();
th
is.destroyAllSelect2(); // 确保清理所有 Select2 实例
}
})
.then((result) => {
if (result
.isC
onfirmed) {
onSubmit(result
.value);
resolve(true);
} else {
resolve(false);
}
});
});
}
collectFormData() {
c
onst data = {};
c
onst popup = Swal
.getPopup();
c
onst form = popup
.querySelector('form');
if (form) {
c
onst formData = new FormData(form);
for (c
onst [name,
value] of formData
.entries()) {
// 处理多值字段
if (data[name]) {
if (!Array
.isArray(data[name])) {
data[name] = [data[name]];
}
data[name]
.push(
value);
} else {
data[name] =
value;
}
}
}
return data;
}
setupEvent
Handlers(c
onfig) {
c
onst popup = Swal
.getPopup();
// 绑定添加按钮事件
popup
.querySelectorAll('
.add
-entity
-btn')
.forEach(btn => {
btn
.addEventL
istener('click', async () => {
c
onst targetField = btn
.dataset
.targetField;
if (c
onfig
.onAddEntity) {
c
onst newItem = await c
onfig
.onAddEntity(targetField);
if (newItem) {
th
is.updateSelectField(popup, targetField, newItem);
}
}
});
});
}
// === 模态框注册方法 ===
reg
isterModalType(name, c
onfig) {
// 添加afterRender处理
c
onst enhancedC
onfig = {
...c
onfig,
afterRender
: (c
onfig, c
onta
iner) => {
// 初始化Select2
c
onta
iner
.f
ind('
.select2
-field')
.each(
function() {
c
onst $select = $(th
is);
$select
.select2({
theme
: 'bootstrap',
placeholder
: $select
.attr('placeholder') || '请选择',
allowClear
: true,
dropdownParent
: $select
.closest('
.modal')
});
});
// 调用原始afterRender（如果存在）
if (c
onfig
.afterRender) {
c
onfig
.afterRender(c
onfig, c
onta
iner);
}
}
};
th
is.modalReg
istry[name] = enhancedC
onfig;
}
// 注册实体表单
reg
isterEntityForm(entityType, fields) {
th
is.reg
isterModalType(entityType, {
template
: `<div class="modal fade" id="${entityType}Modal" tab
index="
-1">
<div class="modal
-dialog">
<div class="modal
-c
ontent">
<div class="modal
-header">
<h5 class="modal
-title" id="${entityType}Title"></h5>
<butt
on type="butt
on" class="btn
-close" data
-bs
-d
ism
iss="modal"></butt
on>
</div>
<div class="modal
-body" id="${entityType}Body"></div>
<div class="modal
-footer">
<butt
on type="butt
on" class="btn btn
-sec
ondary" data
-bs
-d
ism
iss="modal">取消</butt
on>
<butt
on type="butt
on" class="btn btn
-primary" id="${entityType}Submit">保存</butt
on>
</div>
</div>
</div>
</div>`,
render
: (c
onfig, c
onta
iner) => {
c
onta
iner
.f
ind(`#${entityType}Title`)
.text(c
onfig
.title);
let formHTML = '';
// 确保fields是数组
c
onst fields = Array
.isArray(c
onfig
.fields) ? c
onfig
.fields
: [];
fields
.forEach(fieldC
onfig => {
c
onst fieldType = th
is.fieldReg
istry[fieldC
onfig
.type];
if (fieldType && fieldType
.render) {
formHTML += fieldType
.render(fieldC
onfig);
}
});
c
onta
iner
.f
ind(`#${entityType}Body`)
.html(formHTML);
},
getFormData
: (c
onta
iner) => {
c
onst formData = {};
c
onta
iner
.f
ind('
input, select, textarea')
.each(
function() {
c
onst $el = $(th
is);
c
onst name = $el
.attr('name');
if (!name) return;
if ($el
.attr('type') === 'checkbox') {
formData[name] = $el
.is('
:checked');
} else {
formData[name] = $el
.val();
}
});
return formData;
},
b
indEvents
: (c
onfig, c
onta
iner,
onSubmit) => {
c
onta
iner
.f
ind(`#${entityType}Submit`)
.off('click')
.on('click', () => {
c
onst formData = th
is.getFormData(c
onta
iner);
onSubmit(formData);
});
}
});
}
// 打开模态框
open(modalType, c
onfig, callbacks = {}) {
// 如果当前有激活的弹窗，先隐藏它
if (th
is.nestedModalStack
.length > 0) {
c
onst currentModal = th
is.nestedModalStack[th
is.nestedModalStack
.length
- 1];
currentModal
.hide();
}
// 检查模态类型是否注册
if (!th
is.modalReg
istry[modalType]) {
c
onsole
.error(`未注册的模态类型
: ${modalType}`);
return null;
}
c
onst modalC
onfig = th
is.modalReg
istry[modalType];
c
onst modalId = `${modalType}Modal`;
let $modal = $(`#${modalId}`);
// 如果模态框不存在则创建
if ($modal
.length === 0) {
$modal = $(modalC
onfig
.template);
$('body')
.append($modal);
}
// 清除之前的模态框实例
if ($modal
.data('bs
.modal')) {
$modal
.data('bs
.modal')
.d
ispose();
}
// 渲染模态内容
modalC
onfig
.render(c
onfig, $modal);
// 绑定事件
if (modalC
onfig
.b
indEvents) {
modalC
onfig
.b
indEvents(c
onfig, $modal, callbacks
.onSubmit || (() => {}));
}
// 创建模态实例
c
onst modal
Instance = new bootstrap
.Modal($modal[0]);
// 执行afterRender回调
if (modalC
onfig
.afterRender) {
modalC
onfig
.afterRender(c
onfig, $modal);
}
// 初始化Select2
$modal
.f
ind('
.select2
-field')
.each(
function() {
c
onst $select = $(th
is);
$select
.select2({
theme
: 'bootstrap',
placeholder
: $select
.attr('placeholder') || '请选择',
allowClear
: true,
dropdownParent
: $select
.closest('
.modal')
});
});
// 显示弹窗
modal
Instance
.show();
// 将新弹窗加入栈
c
onst modalObj = {
hide
: () => modal
Instance
.hide(),
show
: () => modal
Instance
.show(),
getElement
: () => $modal[0],
c
onfig
};
th
is.nestedModalStack
.push(modalObj);
// 使用延迟确保 DOM 完全渲染
setTimeout(() => {
// 安全初始化 Select2
$modal
.f
ind('
.select2
-field')
.each((
index, element) => {
c
onst $select = $(element);
th
is.safe
InitSelect2($select, {
theme
: 'bootstrap',
placeholder
: $select
.attr('placeholder') || '请选择',
allowClear
: true,
dropdownParent
: $modal
});
});
// 绑定新建按钮事件
$modal
.f
ind('
.add
-entity
-btn')
.on('click', async () => {
c
onst entityType = $(th
is)
.data('entityType');
c
onst targetField = $(th
is)
.data('targetField');
if (callbacks
.onAddEntity) {
c
onst newItem = await callbacks
.onAddEntity(entityType, targetField);
if (newItem) {
th
is.updateSelectField($modal[0], targetField, newItem);
}
}
});
}, 50);
// 返回包含关闭方法的实例对象
return modalObj;
}
// 关闭当前弹窗并显示上一个
closeCurrentModal() {
if (th
is.nestedModalStack
.length > 0) {
c
onst currentModal = th
is.nestedModalStack
.pop();
currentModal
.hide();
// 如果有上一个弹窗，显示它
if (th
is.nestedModalStack
.length > 0) {
c
onst prevModal = th
is.nestedModalStack[th
is.nestedModalStack
.length
- 1];
prevModal
.show();
}
}
}
// 获取表单数据
getFormData(c
onta
iner) {
c
onst formData = {};
c
onta
iner
.f
ind('
input, select, textarea')
.each(
function() {
c
onst $el = $(th
is);
c
onst name = $el
.attr('name');
if (!name) return;
if ($el
.attr('type') === 'checkbox') {
formData[name] = $el
.is('
:checked');
} else if ($el
.attr('type') === 'radio') {
if ($el
.is('
:checked')) {
formData[name] = $el
.val();
}
} else {
formData[name] = $el
.val();
}
});
return formData;
}
/**
* 设置多个按钮的事件处理
* @param {Object} c
onfig
- 配置对象
* @param {
Function}
onAddEntity
- 添加实体的回调函数
*/
setupMultiButt
onHandlers(c
onfig,
onAddEntity) {
c
onst popup = Swal
.getPopup();
// 确保弹窗存在
if (!popup) {
c
onsole
.warn('弹窗不存在，无法绑定事件');
return;
}
// 移除旧的事件监听器（防止重复绑定）
th
is.cleanupMultiButt
onHandlers();
// 绑定所有添加按钮事件
th
is.addEntityButt
ons = Array
.from(popup
.querySelectorAll('
.add
-entity
-btn'));
th
is.addEntityButt
ons
.forEach(btn => {
c
onst
handler = async () => {
c
onst targetField = btn
.dataset
.targetField;
c
onst entityType = btn
.dataset
.entityType;
if (
onAddEntity) {
c
onst newItem = await
onAddEntity(entityType, targetField);
if (newItem) {
th
is.updateSelectField(popup, targetField, newItem);
}
}
};
btn
.addEventL
istener('click',
handler);
// 保存处理器以便后续清理
th
is.butt
onHandlers
.set(btn,
handler);
});
}
/**
* 清理按钮事件处理器
*/
cleanupMultiButt
onHandlers() {
if (th
is.addEntityButt
ons) {
th
is.addEntityButt
ons
.forEach(btn => {
c
onst
handler = th
is.butt
onHandlers
.get(btn);
if (
handler) {
btn
.removeEventL
istener('click',
handler);
th
is.butt
onHandlers
.delete(btn);
}
});
th
is.addEntityButt
ons = null;
}
}
/**
* 更新下拉框选项
* @param {HTMLElement} popup
- 弹窗元素
* @param {str
ing} fieldName
- 字段名
* @param {Object} newItem
- 新选项 {
value, label}
*/
updateSelectField(popup, fieldName, newItem) {
// 确保弹窗仍然存在
if (!popup || !popup
.isC
onnected) {
c
onsole
.warn('弹窗已关闭，无法更新字段');
return;
}
c
onst select = popup
.querySelector(`select[name="${fieldName}"]`);
if (select) {
// 添加新选项
c
onst opti
on = document
.createElement('opti
on');
opti
on.value = newItem
.value;
opti
on.textC
ontent = newItem
.label;
opti
on.selected = true;
select
.appendChild(opti
on);
// 如果使用Select2，刷新组件
if ($(select)
.hasClass('select2
-hidden
-accessible')) {
$(select)
.trigger('change');
}
}
}
// 安全初始化 Select2
safe
InitSelect2($select, opti
ons) {
try {
// 检查是否已初始化
if ($select
.data('select2')) {
th
is.safeDestroySelect2($select);
}
// 设置 dropdownParent 确保在模态框内正确显示
c
onst dropdownParent = opti
ons
.dropdownParent || Swal
.getPopup() || document
.body;
$select
.select2({
...opti
ons,
dropdownParent
});
$select
.addClass('select2
-initialized');
return true;
} catch (
error) {
c
onsole
.error('Select2
initializati
on failed
:',
error);
return false;
}
}
// 安全销毁 Select2
safeDestroySelect2($select) {
try {
if ($select
.data('select2')) {
$select
.select2('destroy');
}
$select
.removeClass('select2
-initialized');
return true;
} catch (
error) {
c
onsole
.error('Select2 destructi
on failed
:',
error);
return false;
}
}
// 清理所有 Select2 实例
destroyAllSelect2() {
c
onst popup = Swal
.getPopup();
if (popup) {
$(popup)
.f
ind('
.select2
-initialized')
.each((
index, element) => {
th
is.safeDestroySelect2($(element));
});
}
}
}
export default SweetalertSystem;
SweetalertSystem2
.js
:472 Uncaught
TypeError: Can
not read properties of null (read
ing ‘querySelectorAll’)
at SweetalertSystem
.open (SweetalertSystem2
.js
:472
:20)
at HTMLButt
onElement
.showD
ingdanModal (tianjia3
.js
:316
:55)
at HTMLButt
onElement
.d
ispatch (jquery
-3
.2
.1
.m
in.js
:
本文解决了一个JavaScript中的常见错误：TypeError，具体为val.join不是函数的问题。通过分析代码片段，指出了使用字符串比较时的正确做法。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
