------------------------ index
.html ------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>峤丞板材库存管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-
4.7
.0/css/font-awesome
.min
.css">
<link rel="stylesheet" type="text/css" href="main/bootstrap-3
.3
.7-dist/css/bootstrap
.css
.map">
<link rel="stylesheet" type="text/css" href="css/util
.css">
<link rel="stylesheet" type="text/css" href="css/main
.css">
<link rel="stylesheet" type="text/css" href="css/index2
.css">
<script type="text/javascript" src="js/jquery-3
.2
.1
.min
.js"></script>
<script type="text/javascript" src="js/jsyilai
.js"></script>
<script type="
module">
// 共享的DataManager类
import { DataManager } from '
./data/DataManager
.js';
document
.addEventListener('DOMContentLoaded', async () => {
try {
// 创建实例并挂载到window
window
.dataManager = new DataManager('http://127
.0.0.1:8
08
0/KuCun2');
// 初始化数据
await window
.dataManager
.fetchAll
();
console
.log('Data Manager initialized successfully');
// 设置iframe通信
const iframe = document
.getElementById('iframeid');
iframe
.onload = () => {
// 通知iframe数据已准备好
iframe
.contentWindow
.postMessage('DataManagerReady', '*');
};
// 如果iframe已经加载，立即发送消息
if (iframe
.contentDocument
.readyState === 'complete') {
iframe
.contentWindow
.postMessage('DataManagerReady', '*');
}
} catch (error) {
console
.error('Failed to initialize DataManager:', error);
}
});
</script>
<style type="text/css">
*{
margin:
0;
padding:
0;
}
.frame-header {
height: 6
0px;
background-color: #23262E;
justify-content: space-between;
}
.frame-header-li{
font-family: Arial, Helvetica, sans-serif;
font-size:
40px;
}
.frame-ul{
}
.frame-ul li{
border-style: solid;
border-width:1px
0px 1px
0px;
margin-top: 1px;
height: 35px;
text-align: center
}
#username{
position: absolute;
right:
0; /* 靠右 */
}
.frame-body {
position: fixed;
top: 6
0px;
right:
0;
bottom:
0;
left:
0;
display:
flex;
flex-direction: row;
}
.frame-side {
scrollbar-width: none; /* firefox隐藏滚动条 */
-ms-overflow-style: none; /* IE 1
0+隐藏滚动条 */
overflow-x: hidden;
overflow-y: auto;
width: 2
00px;
background-color:#9e5;
}
.frame-side::-webkit-scrollbar {
display: none; /* Chrome Safari 隐藏滚动条*/
}
.frame-main {
flex-grow: 1;
background-color:#fff;
}
.jiaoluo{
margin: auto;
margin-right:
0px;
}
.menu {
display: none;
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 1
0px;
list-style-type: none;
margin:
0;
z-index: 1
0;
}
</style>
</head>
<body>
<div class="frame-header">
<a class='frame-header-li' style="color:#fff">峤丞木材仓库管理</a>
<a id="username" class='frame-header-li' style="color:#52
0">峤丞木材仓库管理</a>
<!-- 菜单 -->
<ul class="menu">
<li>选项 1</li>
<li>选项 2</li>
<li>选项 3</li>
</ul>
</div>
<div class="frame-body">
<div class="frame-side">
<ul id="main_u" class='frame-ul' style="text-align:center;">
<li ><a href="main/test
.html" target="main">首页</a></li>
<li><a href="main/dingdan
.html" target="main">订单查询</a></li>
<li><a href="main/bancai
.html" target="main">板材查询</a></li>
<li><a href="main/Guanli
.html" target="main">人员管理</a></li>
<li><a href="main/test
.html" target="main">test</a></li>
<li><a href="main/tianjia
.html" target="main">test</a></li>
</ul>
</div>
<div class="frame-main">
<!-- 内容主体区域 -->
<iframe id="iframeid" name="main" src="main/bancai
.html" width="1
00%" height="1
00%" frameborder="
0">
</iframe>
</div>
</div>
</body>
</html>
------------------------ bancai
.js ------------------------
// bancai
.js
$(document)
.ready(function () {
const modal = new bootstrap
.Modal('#bancaiModal');
let currentMode = 'view';
let caizhiList = [];
let mupiList = [];
let currentSearchText = '';
// 从父窗口获取 DataManager
let dataManager = null;
// 等待父窗口的 DataManager 准备就绪
async function waitForDataManager() {
return new Promise((resolve, reject) => {
if (window
.parent && window
.parent
.dataManager) {
resolve(window
.parent
.dataManager);
} else {
reject(new Error('无法从父窗口获取 DataManager'));
}
});
}
// 初始化函数
async function initialize() {
try {
dataManager = await waitForDataManager
();
if (!dataManager || typeof dataManager
.fetchAll !== 'function') {
throw new Error('无效的 DataManager 实例');
}
// 解构需要的方法和属性
const { addEntity, updateEntity, deleteEntity, fetchAll } = dataManager;
// 确保数据已加载
await fetchAll
();
// 更新材质和木皮选项
updateOptions
();
// 渲染板材表格
refreshTable
();
} catch (error) {
console
.error('初始化失败:', error);
alert('系统初始化失败，请刷新页面或联系管理员');
}
}
// 更新材质和木皮选项
function updateOptions() {
caizhiList = dataManager
.data
.caizhis;
updateSelectOptions('#caizhiSelect', caizhiList);
mupiList = dataManager
.data
.mupis
.map(m => ({
...m,
name: m
.you ? `${m
.name}(油漆)` : m
.name,
}));
updateSelectOptions('#mupi1Select', mupiList);
updateSelectOptions('#mupi2Select', mupiList);
}
// 更新下拉框选项
function updateSelectOptions(selector, data) {
$(selector)
.empty
();
data
.forEach(item => {
$(selector)
.append(`<option value="${item
.id}">${item
.name}</option>`);
});
}
// 刷新表格
function refreshTable() {
const filteredData = filterBancais(currentSearchText);
renderBancaiTable(filteredData);
}
// 搜索过滤
function filterBancais(searchText) {
if (!searchText) return dataManager
.data
.bancais;
return dataManager
.data
.bancais
.filter(bancai => {
const caizhiName = bancai
.caizhi?
.name || '';
const mupi1Name = bancai
.mupi1?
.name || '';
const mupi2Name = bancai
.mupi2?
.name || '';
const houdu = bancai
.houdu
.toString
();
return [
caizhiName
.toLowerCase(),
mupi1Name
.toLowerCase(),
mupi2Name
.toLowerCase(),
houdu
.toLowerCase(),
]
.some(field => field
.includes(searchText
.toLowerCase()));
});
}
// 渲染表格
function renderBancaiTable(bancais) {
const $tbody = $('#bancaiTable tbody');
$tbody
.empty
();
bancais
.forEach(bancai => {
const caizhiName = bancai
.caizhi?
.name || '未知';
const mupi1Name = bancai
.mupi1?
.name || '未知';
const mupi2Name = bancai
.mupi2?
.name || '未知';
const row = `
<tr data-id="${bancai
.id}">
<td>${bancai
.id}</td>
<td>${caizhiName}</td>
<td>${mupi1Name} ${bancai
.mupi1?
.you ? '(油漆)' : ''}</td>
<td>${mupi2Name} ${bancai
.mupi2?
.you ? '(油漆)' : ''}</td>
<td>${bancai
.houdu}</td>
<td>
<button class="btn btn-sm btn-info view-btn">查看</button>
<button class="btn btn-sm btn-warning edit-btn">编辑</button>
<button class="btn btn-sm btn-danger delete-btn">删除</button>
</td>
</tr>
`;
$tbody
.append(row);
});
bindTableEvents
();
}
// 绑定表格事件
function bindTableEvents() {
$('
.view-btn')
.click(function () {
const id = $(this)
.closest('tr')
.data('id');
openModalForBancai(id, 'view');
});
$('
.edit-btn')
.click(function () {
const id = $(this)
.closest('tr')
.data('id');
openModalForBancai(id, 'edit');
});
$('
.delete-btn')
.click(function () {
const id = $(this)
.closest('tr')
.data('id');
deleteBancai(id);
});
}
// 添加按钮事件
$('#addBancaiBtn')
.click(function () {
$('#bancaiForm')[
0]
.reset
();
$('#modalTitle')
.text('添加新板材');
currentMode = 'add';
enableForm(true);
updateOptions
();
modal
.show();
});
// 搜索按钮事件
$('#searchBtn')
.click(function () {
currentSearchText = $('#searchInput')
.val
();
refreshTable
();
});
// 输入框实时搜索
$('#searchInput')
.on('input', function () {
currentSearchText = $(this)
.val
();
refreshTable
();
});
// 打开弹窗显示板材数据
function openModalForBancai(id, mode) {
const bancai = dataManager
.data
.bancais
.find(b => b
.id === id);
if (!bancai) return;
currentMode = mode;
$('#bancaiId')
.val(bancai
.id);
$('#caizhiSelect')
.val(bancai
.caizhi
.id);
$('#mupi1Select')
.val(bancai
.mupi1
.id);
$('#mupi2Select')
.val(bancai
.mupi2
.id);
$('#houdu')
.val(bancai
.houdu);
$('#modalTitle')
.text(mode === 'view' ? '板材详情' : '编辑板材');
enableForm(mode === 'edit');
modal
.show();
}
// 启用/禁用表单
function enableForm(enable) {
$('#caizhiSelect')
.prop('disabled', !enable);
$('#mupi1Select')
.prop('disabled', !enable);
$('#mupi2Select')
.prop('disabled', !enable);
$('#houdu')
.prop('disabled', !enable);
$('#saveBtn')
.toggle(enable);
}
// 保存按钮点击事件
$('#saveBtn')
.click(async function () {
const formData = {
id: $('#bancaiId')
.val(),
caizhiId: parseInt($('#caizhiSelect')
.val()),
mupi1Id: parseInt($('#mupi1Select')
.val()),
mupi2Id: parseInt($('#mupi2Select')
.val()),
houdu: parseFloat($('#houdu')
.val()),
};
try {
if (currentMode === 'add') {
await addEntity('bancais', formData);
} else {
await updateEntity('bancais', formData);
}
refreshTable
();
modal
.hide
();
} catch (error) {
console
.error('操作失败:', error);
alert('操作失败，请重试');
}
});
// 删除板材
async function deleteBancai(id) {
if (!confirm('确定要删除此板材吗?')) return;
try {
await deleteEntity('bancais', id);
refreshTable
();
} catch (error) {
console
.error('删除失败:', error);
alert('删除失败，请重试');
}
}
// 初始化应用
initialize
();
});
------------------------ bancai
.html ------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1
.0">
<title>板材数据管理</title>
<!-- 引入 Bootstrap CSS -->
<link href="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/css/bootstrap
.min
.css" rel="stylesheet">
<!-- 引入 jQuery -->
<script src="https://code
.jquery
.com/jquery-3
.6
.0.min
.js"></script>
</head>
<body>
<div class="container mt-
4">
<h1 class="mb-
4">板材数据管理</h1>
<!-- 搜索框 -->
<div class="row mb-3">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" id="searchInput" placeholder="搜索材质、木皮或厚度
...">
<button class="btn btn-outline-secondary" type="button" id="searchBtn">
<i class="bi bi-search"></i> 搜索
</button>
</div>
</div>
<div class="col-md-6 text-end">
<button class="btn btn-primary" id="addBancaiBtn">添加新板材</button>
</div>
</div>
<table class="table table-striped mt-3" id="bancaiTable">
<thead>
<tr>
<th>ID</th>
<th>材质</th>
<th>木皮1</th>
<th>木皮2</th>
<th>厚度</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 数据将通过 DataManager 加载 -->
</tbody>
</table>
</div>
<!-- 模态框保持不变 -->
<div class="modal fade" id="bancaiModal" tabindex="-1" aria-hidden="true">
<!--
... 原有模态框内容
... -->
</div>
<!-- 查看/编辑弹窗 -->
<div class="modal fade" id="bancaiModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">板材详情</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="bancaiForm">
<input type="hidden" id="bancaiId">
<div class="mb-3">
<label class="form-label">材质</label>
<select class="form-select" id="caizhiSelect" name="caizhi"></select>
</div>
<div class="mb-3">
<label class="form-label">木皮1</label>
<select class="form-select" id="mupi1Select" name="mupi1"></select>
</div>
<div class="mb-3">
<label class="form-label">木皮2</label>
<select class="form-select" id="mupi2Select" name="mupi2"></select>
</div>
<div class="mb-3">
<label class="form-label">厚度</label>
<input type="number" step="
0.01" class="form-control" id="houdu" name="houdu">
</div>
</form>
</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="saveBtn">保存</button>
</div>
</div>
</div>
</div>
<!-- 引入 Bootstrap JS -->
<script src="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/js/bootstrap
.bundle
.min
.js"></script>
<script type="
module" src="
../js/bancai
.js"></script> <!-- 改为模块方式导入 -->
</body>
</html>
------------------------ DataManager
.js ------------------------
/**
* 数据管理器类，负责与后端API通信并管理数据
*/
class DataManager {
constructor(baseUrl) {
this
.baseUrl = baseUrl;
this
.data = {
bancais: [],
dingdans: [],
mupis: [],
chanpins: [],
kucuns: [],
dingdan_chanpin_zujians: [],
chanpin_zujians: [],
zujians: [],
caizhis: [],
dingdan_chanpins: [],
users: []
};
this
.isSyncing = false;
this
.lastSync = null;
// 回调注册表
this
.callbacks = {
// 全局回调
all: [],
// 按实体类型分类的回调
bancais: [],
dingdan: [],
mupi: [],
chanpin: [],
kucun: [],
dingdan_chanpin_zujian: [],
chanpin_zujian: [],
zujian: [],
caizhi: [],
dingdan_chanpin: [],
user: []
//
...其他实体
};
}
/**
* 获取所有数据
* @returns {Promise<boolean>} 是否成功
*/
async fetchAll() {
try {
const response = await fetch(`${this
.baseUrl}/app/all`);
if (!response
.ok) throw new Error('Network response was not ok');
const result = await response
.json
();
if (result
.status !== 2
00) throw new Error(result
.text || 'API error');
// 更新本地数据
Object
.keys(this
.data)
.forEach(key => {
if (result
.data[key]) {
this
.data[key] = result
.data[key];
}
});
this
.lastSync = new Date
();
return true;
} catch (error) {
console
.error('Fetch error:', error);
return false;
}
}
/**
* 注册回调函数
* @param {string} entity - 实体类型（如'bancai'）或'all'表示全局回调
* @param {Function} callback - 回调函数，参数为(operation, data)
*/
registerCallback(entity, callback) {
if (!this
.callbacks[entity]) {
this
.callbacks[entity] = [];
}
this
.callbacks[entity]
.push(callback);
}
/**
* 移除回调函数
* @param {string} entity - 实体类型
* @param {Function} callback - 要移除的回调函数
*/
unregisterCallback(entity, callback) {
if (!this
.callbacks[entity]) return;
const index = this
.callbacks[entity]
.indexOf(callback);
if (index !== -1) {
this
.callbacks[entity]
.splice(index, 1);
}
}
/**
* 触发回调
* @param {string} operation - 操作类型（'add', 'update', 'delete'）
* @param {string} entity - 实体类型
* @param {Object} data - 相关数据
*/
triggerCallbacks(operation, entity, data) {
// 触发全局回调
this
.callbacks
.all
.forEach(cb => cb(operation, entity, data));
// 触发特定实体回调
if (this
.callbacks[entity]) {
this
.callbacks[entity]
.forEach(cb => cb(operation, data));
}
}
/**
* 执行CRUD操作并触发回调
*/
async crudOperation(operation, entity, data) {
try {
const response = await fetch(`${this
.baseUrl}/app/${operation}/${entity}`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON
.stringify(data)
});
if (!response
.ok) throw new Error('Network response was not ok');
const result = await response
.json
();
if (result
.status !== 2
00) throw new Error(result
.text || 'API error');
// 触发操作成功的回调
this
.triggerCallbacks(operation, entity, data);
// 自动同步数据
this
.syncData
();
return result;
} catch (error) {
console
.error('CRUD error:', error);
// 触发操作失败的回调
this
.triggerCallbacks(`${operation}_error`, entity, {
data,
error: error
.message
});
throw error;
}
}
/**
* 执行CRUD操作
* @param {string} operation - 'add', 'delete', 'update'
* @param {string} entity - 实体名称（小写）
* @param {Object} data - 要发送的数据
* @returns {Promise<Object>} 响应结果
*/
async crudOperation(operation, entity, data) {
try {
const response = await fetch(`${this
.baseUrl}/app/${operation}/${entity}`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON
.stringify(data)
});
if (!response
.ok) throw new Error('Network response was not ok');
const result = await response
.json
();
if (result
.status !== 2
00) throw new Error(result
.text || 'API error');
// 触发操作成功的回调
this
.triggerCallbacks(operation, entity, data);
// 自动同步数据
this
.syncData
();
return result;
} catch (error) {
console
.error('CRUD error:', error);
// 触发操作失败的回调
this
.triggerCallbacks(`${operation}_error`, entity, {
data,
error: error
.message
});
throw error;
}
}
/**
* 自动同步数据（防止频繁请求）
*/
async syncData() {
if (this
.isSyncing) return;
// 距离上次同步超过5秒才执行新同步
if (this
.lastSync && new Date() - this
.lastSync < 5
000) {
setTimeout(() => this
.syncData(), 5
000 - (new Date() - this
.lastSync));
return;
}
this
.isSyncing = true;
try {
await this
.fetchAll
();
} finally {
this
.isSyncing = false;
}
}
/**
* 添加实体
* @param {string} entity - 实体名称
* @param {Object} data - 实体数据
*/
async addEntity(entity, data) {
return this
.crudOperation('add', entity, data);
}
/**
* 更新实体
* @param {string} entity - 实体名称
* @param {Object} data - 实体数据（必须包含id）
*/
async updateEntity(entity, data) {
return this
.crudOperation('update', entity, data);
}
/**
* 删除实体
* @param {string} entity - 实体名称
* @param {number} id - 实体ID
*/
async deleteEntity(entity, id) {
return this
.crudOperation('delete', entity, {id});
}
}
export { DataManager };
// 创建单例实例
const dataManager = new DataManager('http://127
.0.0.1:8
08
0/KuCun2');
// 初始化时获取所有数据
dataManager
.fetchAll()
.then(() => {
console
.log('Initial data loaded');
});
// 导出数据对象，外部可以直接访问 data
.bancais, data
.dingdans 等
export const data = dataManager
.data;
// 导出操作方法
export const addEntity = dataManager
.addEntity
.bind(dataManager);
export const updateEntity = dataManager
.updateEntity
.bind(dataManager);
export const deleteEntity = dataManager
.deleteEntity
.bind(dataManager);
export const fetchAll = dataManager
.fetchAll
.bind(dataManager);
DataManager
.js:68 Fetch error: TypeError: Cannot read properties of undefined (reading 'baseUrl')
at fetchAll (DataManager
.js:52:
44)
at initialize (bancai
.js:36:19)
本文介绍了在Flex布局下遇到弹出框无法正确显示的问题，并提供了一个通过导入并实例化PopUpManager类来解决此问题的代码修正方案。通过调整Alert的show方法参数设置，确保了弹出框能够在预期环境下正常呈现。
扫一扫
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
