//classDiagram
// class Bancai {
//
Integer id
// Caizhi caizhi
// Mupi mupi1
// Mupi mupi2
// Double houdu
// Kucun kucun
// }
//
// class Caizhi {
// String name
// List~Bancai~ bancai
// }
//
// class Mupi {
// String name
// Boolean you
// List~Bancai~ bancaisForMupi1
// List~Bancai~ bancaisForMupi2
// }
//
// class Chanpin {
// String bianhao
// List~Chanpin_zujian~ chanpin_zujian
// List~Dingdan_chanpin~ dingdan_chanpin
// }
//
// class Zujian {
// String name
// List~Chanpin_zujian~ chanping_zujian
// }
//
// class Chanpin_zujian {
// Bancai bancai
// Double one_howmany
// Double zujianshu
// }
//
// class Dingdan {
// String number
// Date xiadan
// Date jiaohuo
// List~Dingdan_chanpin~ dingdan_chanpin
// }
//
// class Dingdan_chanpin {
//
Integer shuliang
// }
//
// class Kucun {
//
Integer shuliang
// Dingdan reservedOrder
// }
//
// class Jinhuo {
//
Integer shuliang
// Date date
// }
//
// class User {
// String name
// String andy
// String pass
//
int role
// }
//
// Bancai “1” – “1” Caizhi
// Bancai “1” – “1” Mupi : mupi1
// Bancai “1” – “1” Mupi : mupi2
// Bancai “1” – “1” Kucun
// Caizhi “1” – “" Bancai
// Mupi “1” – "” Bancai : mupi1
// Mupi “1” – “" Bancai : mupi2
// Chanpin “1” – "” Chanpin_zujian
// Chanpin “1” – “" Dingdan_chanpin
// Zujian “1” – "” Chanpin_zujian
// Chanpin_zujian “1” – “1” Bancai
// Dingdan “1” – “*” Dingdan_chanpin
// Dingdan_chanpin “1” – “1” Chanpin
// Kucun “0…1” – “1” Dingdan : reservedOrder
// Jinhuo “1” – “1” Dingdan_bancai
// Jinhuo “1” – “1” User
function resolveDataReferences(data) {
// 获取 data 对象的所有顶层键
const keys = Object.keys(data);
// 遍历每个顶层键（如 users, posts 等） for (const key of keys) { const entities = data[key]; // 遍历该顶层键下的每个实体（如每个 user 或 post） for (const entity of entities) { // 遍历实体的每个属性 for (const attribute in entity) { if (entity?.hasOwnProperty(attribute)) { var trpe=attribute?.replace(/\d/g, ''); // 确保属性属于当前实体 if (Array.isArray(entity[attribute])) { if(data[trpe]==null){ trpe+="s" } // 如果属性是一个数组，则将数组中的每个 ID 替换为对应的实际对象 entity[attribute] = entity[attribute].map(item => data[trpe ]?.find(updateItem => updateItem.id === item.id) || item ); } else if (typeof entity[attribute] === "object" && entity[attribute] !== null) { // 如果属性是一个对象，则将其替换为对应的实际对象 entity[attribute] = data[trpe + "s"]?.find(updateItem => updateItem.id === entity[attribute].id); } } } } } console.log(data) return data;
}
/**
数据管理器类，负责与后端API通信并管理数据
*/
class DataManager {
constructor(baseUrl) {
this.baseUrl = baseUrl;
this.data = {
bancais: [],
dingdans: [],
mupis: [],
chanpins: [],
kucuns: [],
dingdan_bancais:[],
chanpin_zujians: [],
zujians: [],
caizhis: [],
dingdan_chanpins: [],
users: [],
jinhuos: []
};
this.isSyncing = false;
this.lastSync = null;
this.callbacks = {
all: [],
bancais: [],
dingdan: [],
mupi: [],
chanpin: [],
kucun: [],
chanpin_zujian: [],
dingdan_bancai:[],
zujian: [],
caizhi: [],
dingdan_chanpin: [],
user: [],
jinhuo: []
};
this.syncQueue = Promise.resolve();
}
/**
获取所有数据
@returns {Promise} 是否成功
*/
async fetchAll() {
console.log(this)
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 !== 200) throw new Error(result.text || ‘API error’);
const resolvedData = resolveDataReferences(result.data);
// 更新本地数据
Object.keys(this.data).forEach(key => {
if (resolvedData[key]) {
this.data[key] = resolvedData[key];
}
});
this.lastSync = new Date();
// 关键改进：数据更新后触发刷新回调
this.triggerCallbacks(‘refresh’, ‘all’, this.data);
return true;
} catch (error) {
console.error(‘Fetch error:’, error);
// 触发错误回调
this.triggerCallbacks(‘fetch_error’, ‘all’, { 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 !== 200) throw new Error(result.text || ‘API error’);
// 自动同步数据
this.syncData();
// 触发操作成功的回调
this.triggerCallbacks(operation, entity, data);
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
- 要发送的数据 后端要求数据格式为{属性: “值”, 关联对象: {id:0}, 关联对象集: [{id:0}]}
@returns {Promise} 响应结果
*/
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 !== 200) throw new Error(result.text || 'API error'); // 自动同步数据 this.syncQueue = this.syncQueue.then(async () => { await this.syncData(); // 同步完成后触发操作回调 this.triggerCallbacks(operation, entity, data); }); 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) {
this.pendingSync = true;
return;
}
this.isSyncing = true;
try {
await this.fetchAll();
} catch (error) {
console.error(‘Sync failed:’, error);
} finally {
this.isSyncing = false;
// 处理等待中的同步请求 if (this.pendingSync) { this.pendingSync = false; setTimeout(() => this.syncData(), 1000); }
}
}
/**
添加实体
@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});
}
/**
新增方法：手动触发数据刷新
*/
async refreshData() {
return this.syncQueue = this.syncQueue.then(() => this.syncData());
}
}
export { DataManager };
// 创建单例实例
//const dataManager = new DataManager(‘http://127.0.0.1:8080/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);
<html lang="zh
-CN"> <head> <meta charset="UTF
-8"> <meta name="viewport" content="width=device
-width, initial
-scale=1.0"> <title>板材库存查询系统</title> <!
-- 引入外部CSS
--> <link rel="stylesheet" href="../css/dingdan.css"> <!
-- 引入jQuery
--> <script src="https://code.jquery.com/jquery
-3.6.0.min.js"></script> <!
-- 引入Bootstrap
--> <link href="../js/bootstrap
-5.3.0
-alpha1
-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="../js/bootstrap
-5.3.0
-alpha1
-dist/umd/popper.min.js"></script> <script src="../js/bootstrap
-5.3.0
-alpha1
-dist/js/bootstrap.min.js"></script> <!
-- 引入Bootstrap Icons
--> <link rel="stylesheet" href="../js/bootstrap
-icons
-1.8.1/bootstrap
-icons.css"> <!
-- 引入主JS文件
--> <script src="../js/main.js"></script> </head> <body> <div class="container py
-4"> <!
-- 标题部分
--> <div class="text
-center mb
-4"> <h1 class="text
-primary"><i class="bi bi
-boxes"></i> 板材库存管理系统</h1> <p class="text
-muted">查询订单、产品、板材及库存信息</p> </div> <!
-- 统计卡片
--> <div class="row mb
-4"> <div class="col
-md
-3"> <div class="card stats
-card border
-primary"> <div class="card
-body"> <
h5 class="card
-title">订单总数</
h5> <p class="card
-text fs
-3 text
-primary" id="orderCount">0</p> </div> </div> </div> <div class="col
-md
-3"> <div class="card stats
-card border
-info"> <div class="card
-body"> <
h5 class="card
-title">产品种类</
h5> <p class="card
-text fs
-3 text
-info" id="productCount">0</p> </div> </div> </div> <div class="col
-md
-3"> <div class="card stats
-card border
-success"> <div class="card
-body"> <
h5 class="card
-title">板材库存</
h5> <p class="card
-text fs
-3 text
-success" id="materialCount">0</p> </div> </div> </div> <div class="col
-md
-3"> <div class="card stats
-card border
-warning"> <div class="card
-body"> <
h5 class="card
-title">库存总量</
h5> <p class="card
-text fs
-3 text
-warning" id="totalStock">0</p> </div> </div> </div> </div> <!
-- 搜索区域
--> <div class="card search
-section mb
-4"> <div class="card
-header"> <
h5 class="mb
-0"><i class="bi bi
-search me
-2"></i>高级搜索</
h5> </div> <div class="card
-body"> <div class="row g
-3"> <!
-- 订单搜索
--> <div class="col
-md
-4"> <div class="search
-control"> <i class="bi bi
-clipboard
-search search
-icon"></i> <input type="text" class="form
-control with
-icon" id="orderSearch" placeholder="搜索订单号..." aria
-label="订单号搜索"> </div> </div> <!
-- 产品搜索
--> <div class="col
-md
-4"> <div class="search
-control"> <i class="bi bi
-grid search
-icon"></i> <input type="text" class="form
-control with
-icon" id="productSearch" placeholder="搜索产品编号..." aria
-label="产品编号搜索"> </div> </div> <!
-- 板材搜索
--> <div class="col
-md
-4"> <div class="search
-control"> <i class="bi bi
-box search
-icon"></i> <input type="text" class="form
-control with
-icon" id="materialSearch" placeholder="搜索板材ID或材质..." aria
-label="板材搜索"> </div> </div> <!
-- 木皮搜索
--> <div class="col
-md
-4"> <div class="search
-control"> <i class="bi bi
-tree search
-icon"></i> <input type="text" class="form
-control with
-icon" id="woodSearch" placeholder="搜索木皮名称..." aria
-label="木皮搜索"> </div> </div> <!
-- 厚度搜索
--> <div class="col
-md
-4"> <div class="search
-control"> <i class="bi bi
-arrows
-vertical search
-icon"></i> <input type="number" class="form
-control with
-icon" id="thicknessSearch" placeholder="厚度(mm)" min="0" step="0.1"> </div> </div> <!
-- 库存范围搜索
--> <div class="col
-md
-4"> <div class="input
-group"> <span class="input
-group
-text"><i class="bi bi
-box"></i></span> <input type="number" class="form
-control" id="minStock" placeholder="最小库存" min="0"> <input type="number" class="form
-control" id="maxStock" placeholder="最大库存" min="0"> <button class="btn btn
-primary" type="button" id="stockStatusBtn"> <i class="bi bi
-search"></i> </button> </div> </div> </div> </div> </div> <!
-- 结果区域
--> <div class="card"> <div class="card
-header d
-flex justify
-content
-between align
-items
-center"> <
h5 class="mb
-0"><i class="bi bi
-table me
-2"></i>查询结果</
h5> <div class="text
-secondary"> <span id="resultCount">0</span> 条记录 <span class="ms
-2"><i class="bi bi
-info
-circle"></i> <small>实时数据更新时间: <span id="lastUpdate">
--:
--:
--</span></small></span> </div> </div> <div class="card
-body result
-section"> <div class="table
-responsive"> <table class="table table
-hover" id="resultsTable"> <thead class="table
-light sticky
-top"> <tr> <th data
-sortable>订单号 <span class="sort
-indicator"></span></th> <th data
-sortable>产品信息 <span class="sort
-indicator"></span></th> <th data
-sortable>产品数量 <span class="sort
-indicator"></span></th> <th data
-sortable>组件 <span class="sort
-indicator"></span></th> <th data
-sortable>板材 <span class="sort
-indicator"></span></th> <th data
-sortable>单件用量 <span class="sort
-indicator"></span></th> <th data
-sortable>订单用量 <span class="sort
-indicator"></span></th> <th data
-sortable>库存数量 <span class="sort
-indicator"></span></th> <th>操作</th> </tr> </thead> <tbody id="resultBody"> <!
-- 数据加载中
--> <tr id="loadingRow"> <td colspan="9" class="text
-center py
-5"> <div class="d
-flex align
-items
-center justify
-content
-center"> <div class="spinner
-border text
-primary" role="status"> <span class="visually
-hidden">加载中...</span> </div> <div class="ms
-3">正在加载数据，请稍候...</div> </div> </td> </tr> </tbody> </table> </div> <!
-- 空结果提示
--> <div id="noResults" class="no
-results text
-center py
-5" style="display: none;"> <div> <i class="bi bi
-inboxes text
-muted" style="font
-size: 3rem;"></i> <h4 class="mt
-3 text
-muted">没有找到匹配的记录</h4> <p class="text
-muted">请尝试调整您的搜索条件</p> </div> </div> </div> </div> </div> <!
-- 引入订单JS
--> <script src="../js/test.js"></script> </body> </html> 实现页面功能，DataManager.js已经在父级页面加载过了，直接到父级调用，js和css分开文件 业务基本逻辑 一个订单有很多产品不同数量，每个产品可以再很多订单中，一个产品有很多组件，一个组件可以在很多产品中，因为每个组件因为在不同的产品中有不同的生产工艺，所以使用不同的板材和板材能生产组件数量，每个板材有不同的材质和两面木皮，木皮表面可能有油漆， 订购时可能直接购入板材，也可能按订单和产品订购板材，也用可能按订单产品组件订购板材，每次采购不标准，一个订单可能订购几次，用户有姓名 账号 密码 权限， 一个记录进货和消耗，查看的时候会查看订单下有多少板材可用
扫一扫
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
