init.js改造
时间: 2025-07-26 14:29:33 浏览: 13
<think>我们已经在init.js中初始化了DataManager和ReusableModalSystem,并且注册了一些基础的表单类型(如baseForm)和实体表单(如bancai, caizhi等)。现在,我们需要改造init.js,使其更加模块化,并且利用ReusableModalSystem2.js的功能。改造目标:1.使用ReusableModalSystem2.js中定义的新功能,特别是嵌套模态框和Select2集成。2.注册更多的实体表单,以便在tianjia.js等页面中使用。3.确保在init.js中注册的实体表单能够被全局使用。步骤:1.在init.js中,我们不再使用旧的ReusableModalSystem,而是使用新的ReusableModalSystem2(注意:我们之前已经将类名改为ReusableModalSystem,但文件名为ReusableModalSystem2.js,这里我们假设类名已经改为ReusableModalSystem)。2.注册更多的实体表单,包括dingdan,chanpin, zujian, dingdan_chanpin, chanpin_zujian等。3.为每个实体表单定义字段配置。4.注册基础字段类型(如text,number,select等)以及它们的渲染方式和事件绑定。5.注册一些常用的模态框类型(如baseForm,confirmation, tabbedForm等)。由于init.js代码较长,我将只展示关键部分的改造。注意:我们已经在ReusableModalSystem2.js中定义了一些基础字段类型(text, number, select等)和基础模态框类型(baseForm,confirmation,tabbedForm)。在init.js中,我们将主要注册实体表单。以下是改造后的init.js代码:</think># init.js 改造方案
我将改造 `init.js` 文件,使其更模块化、可维护,并充分利用 `ReusableModalSystem2.js` 的功能。以下是改造后的代码:
```javascript
// @ts-nocheck
import { DataManager } from '../data/DataManager.js';
import { ReusableModalSystem } from "./ReusableModalSystem2.js";
// 初始化数据管理器
const dataManager = new DataManager('/KuCun2');
// 初始化弹窗系统
const modalSystem = new ReusableModalSystem();
// 注册基础字段类型
modalSystem.registerFieldType('text', {
render: (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' : ''}>
</div>`;
}
});
modalSystem.registerFieldType('number', {
render: (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 || ''}" step="${config.step || 1}"
min="${config.min || ''}" max="${config.max || ''}"
${config.required ? 'required' : ''}>
</div>`;
}
});
modalSystem.registerFieldType('select', {
render: (config) => {
let options = '<option value="">请选择</option>';
(config.options || []).forEach(opt => {
const selected = config.value == opt.value ? 'selected' : '';
options += `<option value="${opt.value}" ${selected}>${opt.label}</option>`;
});
return `<div class="mb-3">
<label class="form-label">${config.label}${config.required ? '*' : ''}</label>
<div class="input-group">
<select class="form-select select2-field" name="${config.name}"
${config.required ? 'required' : ''}
${config.select2 ? 'data-select2="true"' : ''}
${config.select2Config ? `data-select2-config='${JSON.stringify(config.select2Config)}'` : ''}>
${options}
</select>
${config.addButton ? `
<button class="btn btn-outline-secondary add-entity-btn" type="button"
data-entity-type="${config.addButton.entityType}"
data-target-field="${config.name}">
<i class="fa fa-plus"></i> ${config.addButton.label}
</button>
` : ''}
</div>
</div>`;
},
afterRender: (element, config) => {
if (config.select2) {
const $select = $(element).find('select');
const configData = config.select2Config || {};
// 默认配置
const defaultConfig = {
theme: 'bootstrap',
placeholder: config.placeholder || '请选择',
allowClear: true,
dropdownParent: $select.closest('.modal')
};
// 合并配置
const finalConfig = {...defaultConfig, ...configData};
// 初始化Select2
$select.select2(finalConfig);
}
}
});
modalSystem.registerFieldType('date', {
render: (config) => {
return `<div class="mb-3">
<label class="form-label">${config.label}${config.required ? '*' : ''}</label>
<input type="date" class="form-control" name="${config.name}"
value="${config.value || ''}" ${config.required ? 'required' : ''}>
</div>`;
}
});
modalSystem.registerFieldType('checkbox', {
render: (config) => {
const checked = config.value ? 'checked' : '';
return `<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" name="${config.name}" ${checked}>
<label class="form-check-label">${config.label}</label>
</div>`;
}
});
// 注册基础表单模板
modalSystem.registerModalType('baseForm', {
template: `<div class="modal fade" id="baseFormModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="baseFormTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" id="baseFormBody"></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="baseFormSubmit">保存</button>
</div>
</div>
</div>
</div>`,
render: (config, container) => {
container.find('#baseFormTitle').text(config.title);
let formHTML = '';
config.fields.forEach(fieldConfig => {
const fieldType = modalSystem.fieldRegistry[fieldConfig.type];
if (fieldType) {
formHTML += fieldType.render(fieldConfig);
}
});
container.find('#baseFormBody').html(formHTML);
},
bindEvents: (config, container, onSubmit) => {
container.find('#baseFormSubmit').off('click').on('click', () => {
const formData = modalSystem.getFormData(container);
onSubmit(formData);
});
// 绑定创建实体按钮事件
container.find('.add-entity-btn').on('click', function() {
const entityType = $(this).data('entity-type');
const targetField = $(this).data('target-field');
const title = `创建新${getEntityLabel(entityType)}`;
// 打开嵌套弹窗
const modalInstance = window.parent.modalSystem.open('baseForm', {
title: title,
fields: getEntityFields(entityType)
}, {
onSubmit: async (formData) => {
try {
// 保存新实体
const result = await window.parent.dataManager.addEntity(entityType, formData);
if (result.status === 200) {
// 刷新父弹窗中的下拉框
const $parentSelect = container.find(`select[name="${targetField}"]`);
if ($parentSelect.length) {
// 添加新选项
const newOption = new Option(
getEntityDisplayName(result.data, entityType),
result.data.id,
true,
true
);
$parentSelect.append(newOption).trigger('change');
// 重新初始化Select2
if ($parentSelect.data('select2')) {
$parentSelect.select2('destroy');
}
$parentSelect.select2({
theme: 'bootstrap',
placeholder: '请选择',
allowClear: true,
dropdownParent: container
});
}
return true; // 关闭弹窗
} else {
alert(`创建失败: ${result.text}`);
return false;
}
} catch (error) {
console.error('创建实体时出错:', error);
alert(`创建失败: ${error.message}`);
return false;
}
}
});
// 添加到嵌套弹窗栈
window.parent.modalSystem.nestedModalStack.push({
parent: container,
child: modalInstance
});
});
},
afterRender: (config, container) => {
// 执行字段的afterRender回调
config.fields.forEach(fieldConfig => {
const fieldType = modalSystem.fieldRegistry[fieldConfig.type];
if (fieldType && fieldType.afterRender) {
const fieldElement = container.find(`[name="${fieldConfig.name}"]`).closest('.mb-3');
if (fieldElement.length) {
fieldType.afterRender(fieldElement[0], fieldConfig);
}
}
});
}
});
// 注册实体表单
const registerEntityForms = () => {
// 板材表单
modalSystem.registerEntityForm('bancai', [
{ type: 'hidden', name: 'id' },
{
type: 'select',
name: 'caizhi_id',
label: '材质',
required: true,
select2: true,
addButton: {
label: '新建材质',
entityType: 'caizhi'
}
},
{
type: 'select',
name: 'mupi1_id',
label: '木皮1',
required: true,
select2: true,
addButton: {
label: '新建木皮',
entityType: 'mupi'
}
},
{
type: 'select',
name: 'mupi2_id',
label: '木皮2',
select2: true,
addButton: {
label: '新建木皮',
entityType: 'mupi'
}
},
{
type: 'number',
name: 'houdu',
label: '厚度 (mm)',
step: 0.1,
min: 0.1,
required: true
}
]);
// 材质表单
modalSystem.registerEntityForm('caizhi', [
{ type: 'hidden', name: 'id' },
{
type: 'text',
name: 'name',
label: '材质名称',
required: true
},
{
type: 'checkbox',
name: 'is_active',
label: '是否启用',
value: true
}
]);
// 木皮表单
modalSystem.registerEntityForm('mupi', [
{ type: 'hidden', name: 'id' },
{
type: 'text',
name: 'name',
label: '木皮名称',
required: true
},
{
type: 'checkbox',
name: 'you',
label: '含油',
value: false
}
]);
// 用户表单
modalSystem.registerEntityForm('user', [
{ type: 'hidden', name: 'id' },
{
type: 'text',
name: 'name',
label: '姓名',
required: true
},
{
type: 'text',
name: 'andy',
label: '账号',
required: true
},
{
type: 'select',
name: 'role',
label: '角色',
required: true,
options: [
{ value: '0', label: '普通用户' },
{ value: '1', label: '管理员' },
{ value: '2', label: '超级管理员' }
]
},
{
type: 'select',
name: 'status',
label: '状态',
required: true,
options: [
{ value: 'active', label: '激活' },
{ value: 'inactive', label: '禁用' }
]
}
]);
// 订单表单
modalSystem.registerEntityForm('dingdan', [
{ type: 'hidden', name: 'id' },
{
type: 'text',
name: 'number',
label: '订单编号',
required: true
},
{
type: 'date',
name: 'xiadan',
label: '下单日期',
required: true
},
{
type: 'select',
name: 'status',
label: '订单状态',
required: true,
options: [
{ value: 'pending', label: '待处理' },
{ value: 'processing', label: '处理中' },
{ value: 'completed', label: '已完成' },
{ value: 'cancelled', label: '已取消' }
]
},
{
type: 'select',
name: 'user_id',
label: '负责人',
required: true,
select2: true
}
]);
// 产品表单
modalSystem.registerEntityForm('chanpin', [
{ type: 'hidden', name: 'id' },
{
type: 'text',
name: 'bianhao',
label: '产品编号',
required: true
},
{
type: 'select',
name: 'bancai_id',
label: '使用板材',
required: true,
select2: true
},
{
type: 'number',
name: 'count',
label: '数量',
min: 1,
required: true
}
]);
// 订单产品关联表单
modalSystem.registerEntityForm('dingdan_chanpin', [
{ type: 'hidden', name: 'id' },
{
type: 'select',
name: 'dingdan_id',
label: '订单',
required: true,
select2: true
},
{
type: 'select',
name: 'chanpin_id',
label: '产品',
required: true,
select2: true
},
{
type: 'number',
name: 'shuliang',
label: '数量',
min: 1,
required: true
}
]);
// 产品组件关联表单
modalSystem.registerEntityForm('chanpin_zujian', [
{ type: 'hidden', name: 'id' },
{
type: 'select',
name: 'chanpin_id',
label: '产品',
required: true,
select2: true
},
{
type: 'select',
name: 'zujian_id',
label: '组件',
required: true,
select2: true
},
{
type: 'select',
name: 'bancai_id',
label: '板材',
required: true,
select2: true
},
{
type: 'number',
name: 'one_howmany',
label: '一张板出多少组件',
min: 0.01,
step: 0.01,
required: true
}
]);
};
// 注册多功能弹窗
const registerUtilityModals = () => {
// 确认弹窗
modalSystem.registerModalType('confirmation', {
template: `<div class="modal fade" id="confirmationModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmationTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" id="confirmationBody"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="confirmationConfirm">确认</button>
</div>
</div>
</div>
</div>`,
render: (config, container) => {
container.find('#confirmationTitle').text(config.title);
container.find('#confirmationBody').html(`<p>${config.message}</p>`);
},
bindEvents: (config, container, onConfirm) => {
container.find('#confirmationConfirm').off('click').on('click', () => {
onConfirm();
const modal = bootstrap.Modal.getInstance(container[0]);
modal.hide();
});
}
});
// 复杂表单(带选项卡)
modalSystem.registerModalType('tabbedForm', {
template: `<div class="modal fade" id="tabbedFormModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tabbedFormTitle"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs mb-3" id="tabbedFormTabs"></ul>
<div class="tab-content" id="tabbedFormContent"></div>
</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="tabbedFormSubmit">保存</button>
</div>
</div>
</div>
</div>`,
render: (config, container) => {
container.find('#tabbedFormTitle').text(config.title);
// 渲染选项卡
const tabsContainer = container.find('#tabbedFormTabs');
const contentContainer = container.find('#tabbedFormContent');
tabsContainer.empty();
contentContainer.empty();
config.tabs.forEach((tab, index) => {
const isActive = index === 0 ? 'active' : '';
tabsContainer.append(`
<li class="nav-item">
<a class="nav-link ${isActive}" data-bs-toggle="tab"
href="#tab-${index}" role="tab">${tab.title}</a>
</li>
`);
let tabContent = `<div class="tab-pane fade ${isActive}" id="tab-${index}" role="tabpanel">`;
tab.fields.forEach(fieldConfig => {
const fieldType = modalSystem.fieldRegistry[fieldConfig.type];
if (fieldType) {
tabContent += fieldType.render(fieldConfig);
}
});
tabContent += '</div>';
contentContainer.append(tabContent);
});
},
bindEvents: (config, container, onSubmit) => {
container.find('#tabbedFormSubmit').off('click').on('click', () => {
const formData = modalSystem.getFormData(container);
onSubmit(formData);
});
}
});
};
// 辅助函数:获取实体标签
const getEntityLabel = (entityType) => {
const labels = {
'bancai': '板材',
'caizhi': '材质',
'mupi': '木皮',
'user': '用户',
'dingdan': '订单',
'chanpin': '产品',
'dingdan_chanpin': '订单产品',
'chanpin_zujian': '产品组件'
};
return labels[entityType] || entityType;
};
// 辅助函数:获取实体字段配置
const getEntityFields = (entityType) => {
switch (entityType) {
case 'chanpin':
return [
{
type: 'text',
name: 'bianhao',
label: '产品编号',
required: true
}
];
case 'zujian':
return [
{
type: 'text',
name: 'name',
label: '组件名称',
required: true
}
];
case 'bancai':
return [
{
type: 'number',
name: 'houdu',
label: '厚度(mm)',
required: true,
step: 0.1,
min: 0.1
},
{
type: 'select',
name: 'caizhi_id',
label: '材质',
required: true,
select2: true,
options: window.parent.dataManager.data.caizhis?.map(cz => ({
value: cz.id,
label: cz.name
})) || []
},
{
type: 'select',
name: 'mupi1_id',
label: '木皮1',
select2: true,
options: window.parent.dataManager.data.mupis?.map(mp => ({
value: mp.id,
label: `${mp.name}${mp.you ? ' (油)' : ''}`
})) || []
},
{
type: 'select',
name: 'mupi2_id',
label: '木皮2',
select2: true,
options: window.parent.dataManager.data.mupis?.map(mp => ({
value: mp.id,
label: `${mp.name}${mp.you ? ' (油)' : ''}`
})) || []
}
];
case 'caizhi':
return [
{
type: 'text',
name: 'name',
label: '材质名称',
required: true
}
];
case 'mupi':
return [
{
type: 'text',
name: 'name',
label: '木皮名称',
required: true
},
{
type: 'checkbox',
name: 'you',
label: '是否有油漆',
value: false
}
];
default:
return [
{
type: 'text',
name: 'name',
label: '名称',
required: true
}
];
}
};
// 辅助函数:获取实体显示名称
const getEntityDisplayName = (entity, entityType) => {
switch (entityType) {
case 'chanpin':
return entity.bianhao;
case 'zujian':
return entity.name;
case 'bancai':
return formatBancaiInfo(entity);
case 'caizhi':
return entity.name;
case 'mupi':
return `${entity.name}${entity.you ? ' (油)' : ''}`;
default:
return entity.name || entity.id;
}
};
// 辅助函数:格式化板材信息
const formatBancaiInfo = (bancai) => {
if (!bancai) return '';
let info = `厚度: ${bancai.houdu}mm, 材质: `;
if (bancai.caizhi) {
info += bancai.caizhi.name;
}
if (bancai.mupi1) {
info += `, 木皮1: ${bancai.mupi1.name}${bancai.mupi1.you ? ' (油)' : ''}`;
}
if (bancai.mupi2) {
info += `, 木皮2: ${bancai.mupi2.name}${bancai.mupi2.you ? ' (油)' : ''}`;
}
return info;
};
// 初始化数据
const initializeData = async () => {
try {
// 显示加载指示器
$('#loadingOverlay').show();
// 加载数据
await dataManager.fetchAll();
console.log('数据加载完成');
// 加载后执行回调
if (window.onDataLoaded) {
window.onDataLoaded();
}
} catch (error) {
console.error('数据加载失败:', error);
modalSystem.open('confirmation', {
title: '数据加载失败',
message: '无法加载系统数据,请刷新页面重试'
}, {
onConfirm: () => location.reload()
});
} finally {
// 隐藏加载指示器
$('#loadingOverlay').hide();
}
};
// 主初始化函数
const mainInit = () => {
// 注册实体表单
registerEntityForms();
// 注册实用弹窗
registerUtilityModals();
// 全局暴露
window.dataManager = dataManager;
window.modalSystem = modalSystem;
// 启动初始化
initializeData();
};
// 启动初始化
$(document).ready(mainInit);
```
## 改造说明
### 1. 模块化结构
- 将代码拆分为多个功能模块:
- **字段类型注册**:基础表单字段定义
- **实体表单注册**:所有业务实体表单配置
- **实用弹窗注册**:确认框、选项卡表单等
- **辅助函数**:通用工具函数
- **初始化流程**:数据加载和系统启动
### 2. 增强实体表单
- 为每个实体表单添加了完整的字段配置
- 增加了关联字段的"新建"按钮功能
- 优化了Select2集成:
```javascript
{
type: 'select',
name: 'caizhi_id',
label: '材质',
required: true,
select2: true,
addButton: {
label: '新建材质',
entityType: 'caizhi'
}
}
```
### 3. 改进嵌套弹窗处理
- 在基础表单模板中增强了嵌套弹窗支持:
```javascript
container.find('.add-entity-btn').on('click', function() {
// 打开嵌套弹窗
const modalInstance = window.parent.modalSystem.open('baseForm', {
title: title,
fields: getEntityFields(entityType)
}, {
onSubmit: async (formData) => {
// 保存新实体并刷新父表单
}
});
});
```
### 4. 增强错误处理
- 统一错误处理机制:
```javascript
try {
await dataManager.fetchAll();
} catch (error) {
modalSystem.open('confirmation', {
title: '数据加载失败',
message: '无法加载系统数据,请刷新页面重试'
}, {
onConfirm: () => location.reload()
});
}
```
### 5. 优化全局状态管理
- 将全局对象暴露在window上:
```javascript
window.dataManager = dataManager;
window.modalSystem = modalSystem;
```
### 6. 增加辅助函数
- 添加了实体相关工具函数:
```javascript
// 获取实体标签
const getEntityLabel = (entityType) => { ... };
// 获取实体字段配置
const getEntityFields = (entityType) => { ... };
// 格式化板材信息
const formatBancaiInfo = (bancai) => { ... };
```
## 优势
1. **更好的可维护性**:模块化结构使代码更易理解和修改
2. **更高的可扩展性**:新增实体只需在registerEntityForms中添加配置
3. **更一致的用户体验**:所有表单使用相同的UI组件和交互模式
4. **更强的错误处理**:统一处理数据加载和操作错误
5. **更高效的开发**:通过复用组件减少重复代码
阅读全文
相关推荐




















