让select 的下拉框实现return false- 比较两个下拉框的值 一致就回滚

本文介绍了一个JavaScript函数,用于比较两个下拉框的选中值,如果值相同则提示用户并回滚到原始值。涉及jQuery的选择器和事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

比较两个下拉框的值 一致就回滚

var value1='${status!}';
var value2='${statusNew!}';
function checkState(){
var v1=$("#status").val();
var v2=$("#statusNew").val();


if(v1==v2){
alert("修改前后的状态,不能一致");
$("#status").val(value1);
$("#statusNew").val(value2);
return false;
}
value1=v1;
value2=v2;
return true;
}

状态:<@p.select name="status" id="status" onchange="checkState()" value="${status!}" list={"1":"注册","0":"未注册","2":"已激活","3":"已开通","4":"待开通","5":"开通失败","6":"待审核"}/>

修改为:<@p.select name="statusNew" id="statusNew" onchange="checkState()" value="${statusNew!}" list={"1":"注册","0":"未注册","2":"已激活","3":"已开通","4":"待开通","5":"开通失败","6":"待审核"}/>
$(document).ready(function() { // 获取全局的DataManager实例 const dataManager = window.parent.dataManager; // 初始化页面元素 const $ dingdanSelect = $('#dingdanSelect'); const $ chanpinSelect = $('#chanpinSelect'); const $ zujianSelect = $('#zujianSelect'); const $ bancaiInfo = $('#bancaiInfo'); const $ orderQuantityInput = $('#orderQuantityInput'); const $ submitOrderBtn = $('#submitOrderBtn'); // 定义实体类型常量 const ENTITY_DINGDAN = 'dingdan'; const ENTITY_CHANPIN = 'chanpin'; const ENTITY_ZUJIAN = 'zujian'; const ENTITY_BANCAI = 'bancai'; const ENTITY_CAIZHI = 'caizhi'; const ENTITY_MUPI = 'mupi'; // 存储当前选中的实体ID(使用正确的层级关系) let currentDingdanId = null; // 订单ID let currentDingdanChanpinId = null; // 订单-产品关联ID let currentChanpinZujianId = null; // 产品-组件关联ID // 初始化页面 initPage(); // 初始化页面函数 async function initPage() { // 注册数据更新回调 dataManager.registerCallback('all', (operation, entity, data) => { if (operation === 'refresh' || operation === 'add' || operation === 'update' || operation === 'delete') { // 只刷新需要更新的部分 if (entity === ENTITY_DINGDAN) { refreshDingdanList(); } else if (entity === 'dingdan_chanpin') { if (currentDingdanId) { refreshChanpinList(currentDingdanId); } } else if (entity === 'chanpin_zujian') { if (currentDingdanChanpinId) { refreshZujianList(currentDingdanChanpinId); } } } }); // 填充订单下拉框 await refreshDingdanList(); // 初始化Select2下拉框 initSelect2Dropdowns(); // 绑定事件 bindEvents(); } // 初始化Select2下拉框 function initSelect2Dropdowns() { // 主页面下拉框 $('#dingdanSelect').select2({ theme: 'bootstrap', placeholder: '请选择订单', allowClear: true }); $('#chanpinSelect').select2({ theme: 'bootstrap', placeholder: '请选择产品', allowClear: true, disabled: true }); $('#zujianSelect').select2({ theme: 'bootstrap', placeholder: '请选择组件', allowClear: true, disabled: true }); } // 绑定事件处理函数 function bindEvents() { // 订单选择变化 $ dingdanSelect.on('change', async function() { currentDingdanId = $(this).val(); if (currentDingdanId) { await refreshChanpinList(currentDingdanId); $('#chanpinSelect').prop('disabled', false); $('#addChanpinBtn').prop('disabled', false); $('#chanpinSelect').select2('enable'); // 重置下级选择 $ zujianSelect.prop('disabled', true).empty(); $ zujianSelect.select2('destroy'); // 销毁旧的Select2实例 $ zujianSelect.select2({ theme: 'bootstrap', placeholder: '请选择组件', allowClear: true, disabled: true }); $ bancaiInfo.text(''); $ orderQuantityInput.val('').prop('disabled', true); $ submitOrderBtn.prop('disabled', true); $('#addZujianBtn').prop('disabled', true); currentDingdanChanpinId = null; currentChanpinZujianId = null; } else { $ chanpinSelect.prop('disabled', true).empty(); $ chanpinSelect.select2('enable', false); $ zujianSelect.prop('disabled', true).empty(); $ zujianSelect.select2('enable', false); $ bancaiInfo.text(''); $ orderQuantityInput.val('').prop('disabled', true); $ submitOrderBtn.prop('disabled', true); $('#addChanpinBtn').prop('disabled', true); $('#addZujianBtn').prop('disabled', true); currentDingdanChanpinId = null; currentChanpinZujianId = null; } }); // 产品选择变化(现在选择的是dingdan_chanpin的ID) $ chanpinSelect.on('change', async function() { currentDingdanChanpinId = $(this).val(); if (currentDingdanChanpinId) { await refreshZujianList(currentDingdanChanpinId); $ zujianSelect.prop('disabled', false); $('#addZujianBtn').prop('disabled', false); $ zujianSelect.select2('enable'); // 重置下级选择 $ bancaiInfo.text(''); $ orderQuantityInput.val('').prop('disabled', true); $ submitOrderBtn.prop('disabled', true); currentChanpinZujianId = null; } else { $ zujianSelect.prop('disabled', true).empty(); $ zujianSelect.select2('enable', false); $ bancaiInfo.text(''); $ orderQuantityInput.val('').prop('disabled', true); $ submitOrderBtn.prop('disabled', true); $('#addZujianBtn').prop('disabled', true); currentChanpinZujianId = null; } }); // 组件选择变化(现在选择的是chanpin_zujian的ID) $ zujianSelect.on('change', function() { currentChanpinZujianId = $(this).val(); if (currentChanpinZujianId) { displayBancaiInfo(currentChanpinZujianId); $ orderQuantityInput.prop('disabled', false); $ submitOrderBtn.prop('disabled', false); } else { $ bancaiInfo.text(''); $ orderQuantityInput.val('').prop('disabled', true); $ submitOrderBtn.prop('disabled', true); } }); // 新增订单按钮 $('#addDingdanBtn').on('click', function() { showEntityModal('新增订单', ENTITY_DINGDAN, null, { number: '', xiadan: new Date().toISOString().split('T')[0], jiaohuo: '' }); }); // 添加产品按钮 $('#addChanpinBtn').on('click', function() { if (!currentDingdanId) { alert('请先选择订单'); return; } // 确保产品数据已加载 if (!dataManager.data.chanpins || dataManager.data.chanpins.length === 0) { alert('产品数据未加载,请稍后再试'); return; } showEntityModal('添加产品', 'dingdan_chanpin', null, { dingdan: { id: parseInt(currentDingdanId) }, chanpin: { id: '' }, shuliang: 1 }); }); // 添加组件按钮 $('#addZujianBtn').on('click', function() { if (!currentDingdanChanpinId) { alert('请先选择产品'); return; } // 获取当前选中的产品ID const dingdanChanpin = dataManager.data.dingdan_chanpins.find( dc => dc.id == currentDingdanChanpinId ); if (!dingdanChanpin || !dingdanChanpin.chanpin) { alert('未找到产品信息'); return; } const chanpinId = dingdanChanpin.chanpin.id; showEntityModal('添加组件', 'chanpin_zujian', null, { chanpin: { id: parseInt(chanpinId) }, zujian: { id: '' }, bancai: { id: '' }, one_howmany: 1 }); }); // 提交订单按钮(修复后的逻辑) $ submitOrderBtn.on('click', async function() { const quantity = parseInt($ orderQuantityInput.val()); if (!quantity || quantity <= 0) { alert('请输入有效的订购数量'); return; } if (!currentDingdanId || !currentDingdanChanpinId || !currentChanpinZujianId) { alert('请完整选择订单、产品和组件'); return; } try { // 获取当前选中的产品组件关联 const chanpinZujian = dataManager.data.chanpin_zujians.find( cz => cz.id == currentChanpinZujianId ); if (!chanpinZujian) { throw new Error('未找到选中的产品组件关联'); } // 获取当前选中的产品关联 const dingdanChanpin = dataManager.data.dingdan_chanpins.find( dc => dc.id == currentDingdanChanpinId ); if (!dingdanChanpin || !dingdanChanpin.chanpin) { throw new Error('未找到选中的产品'); } // 实际的产品ID和组件ID const actualChanpinId = dingdanChanpin.chanpin.id; const actualZujianId = chanpinZujian.zujian.id; const actualBancaiId = chanpinZujian.bancai.id; // 检查是否已存在相同的订单组件订购记录 const existingOrder = dataManager.data.dingdan_bancais.find( dcz => dcz.dingdan.id == currentDingdanId && dcz.chanpin.id == currentChanpinId&& dcz.zujian==currentZujianId&& dcz.bancai==actualBancaiId ); //记录创建订购 if (existingOrder) { // 更新现有记录 await dataManager.updateEntity('dingdan_bancai', { id: existingOrder.id, shuliang: quantity }); } else { // 创建新记录 await dataManager.addEntity('dingdan_bancai', { dingdan: { id: parseInt(currentDingdanId) }, chanpin: { id: parseInt(currentChanpinId) }, zujian: { id: parseInt(currentzujianId) }, bancai: { id: parseInt(actualBancaiId) }, shuliang: quantity }); } // 检查是否已存在相同的订单组件订购记录 const existingban = dataManager.data.kucuns.find( dcz => dcz.bancai&&dcz.bancai.id == actualBancaiId ); if(existingban){ await dataManager.updateEntity('kucun', { id: existingban.id, shuliang: quantity+existingban.shuliang }); }else{ await dataManager.addEntity("kucun",{ bancai:{id:actualBancaiId}, shuliang:quantity }) } // 创建进货记录(使用正确的ID) await createJinhuo(actualChanpinId, actualZujianId, actualBancaiId, quantity); alert('订购成功!'); resetForm(); } catch (error) { console.error('订购失败:', error); alert(`订购失败: ${error.message}`); } }); // 模态框保存按钮 $('#saveEntityBtn').on('click', saveEntity); // 新建实体按钮(在创建实体模态框中) $('#saveNewEntityBtn').on('click', saveNewEntity); } // 创建进货记录函数(使用正确的ID)问:如何放到 //记录创建订购 回调里 async function createJinhuo(chanpinId, zujianId, bancaiId, quantity) { const jinhuoData = { dingdan: { id: parseInt(currentDingdanId) }, chanpin: { id: parseInt(chanpinId) }, zujian: { id: parseInt(zujianId) }, bancai: { id: parseInt(bancaiId) }, shuliang: quantity, date: new Date().toISOString(), user: { id: localStorage.getItem("userId") } }; await dataManager.addEntity('jinhuo', jinhuoData); } // 重置表单 function resetForm() { $ orderQuantityInput.val(''); $ submitOrderBtn.prop('disabled', true); } // 刷新订单列表 async function refreshDingdanList() { const currentValue = $ dingdanSelect.val(); $ dingdanSelect.empty().append('<option value="">请选择订单</option>'); // 获取所有订单 const dingdans = dataManager.data.dingdans || []; // 按下单日期降序排序 dingdans.sort((a, b) => new Date(b.xiadan) - new Date(a.xiadan)); // 填充下拉框 dingdans.forEach(dingdan => { const option = $('<option>') .val(dingdan.id) .text(`${dingdan.number} (${formatDate(dingdan.xiadan)})`); $ dingdanSelect.append(option); }); // 恢复之前的选择 if (currentValue) { $ dingdanSelect.val(currentValue); } // 刷新后重新初始化Select2 $ dingdanSelect.select2({ theme: 'bootstrap', placeholder: '请选择订单', allowClear: true }); } // 刷新产品列表(基于订单) async function refreshChanpinList(dingdanId) { const currentValue = $ chanpinSelect.val(); $ chanpinSelect.empty().append('<option value="">请选择产品</option>'); // 获取订单对应的产品(dingdan_chanpin) const dingdanChanpins = dataManager.data.dingdan_chanpins || []; const relatedChanpins = dingdanChanpins.filter(dc => dc.dingdan && dc.dingdan.id == dingdanId ); // 填充下拉框 relatedChanpins.forEach(dc => { if (dc.chanpin) { const option = $('<option>') .val(dc.id) // 使用dingdan_chanpin的ID .text(`${dc.chanpin.bianhao} (数量: ${dc.shuliang})`); $ chanpinSelect.append(option); } }); // 恢复之前的选择 if (currentValue) { $ chanpinSelect.val(currentValue); } // 刷新后重新初始化Select2 $ chanpinSelect.select2({ theme: 'bootstrap', placeholder: '请选择产品', allowClear: true }).prop('disabled', false); } // 刷新组件列表(基于产品)- 修复后的逻辑 async function refreshZujianList(dingdanChanpinId) { const currentValue = $ zujianSelect.val(); $ zujianSelect.empty().append('<option value="">请选择组件</option>'); // 获取当前选中的订单-产品关联 const dingdanChanpin = dataManager.data.dingdan_chanpins.find( dc => dc.id == dingdanChanpinId ); if (!dingdanChanpin || !dingdanChanpin.chanpin) { return; } const chanpinId = dingdanChanpin.chanpin.id; // 获取该产品的所有组件关联 const chanpinZujians = dataManager.data.chanpin_zujians.filter( cz => cz.chanpin && cz.chanpin.id == chanpinId ); // 填充下拉框 chanpinZujians.forEach(cz => { if (cz.zujian) { const option = $('<option>') .val(cz.id) // 使用chanpin_zujian的ID .text(`${cz.zujian.name} (产量: ${cz.one_howmany})`); $ zujianSelect.append(option); } }); // 恢复之前的选择 if (currentValue) { $ zujianSelect.val(currentValue); } // 刷新后重新初始化Select2 $ zujianSelect.select2({ theme: 'bootstrap', placeholder: '请选择组件', allowClear: true }).prop('disabled', false); } // 显示板材信息 - 修复后的逻辑 function displayBancaiInfo(chanpinZujianId) { // 获取产品组件关联 const chanpinZujian = dataManager.data.chanpin_zujians.find( cz => cz.id == chanpinZujianId ); if (!chanpinZujian || !chanpinZujian.bancai) { $ bancaiInfo.text('未找到板材信息'); return; } const bancai = chanpinZujian.bancai; 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 ? ' (油)' : ''}`; } $ bancaiInfo.text(info); } // 显示实体模态框(添加产品/组件) function showEntityModal(title, entityType, entityId, initialData) { $('#modalTitle').text(title); const $ formFields = $('#formFields'); $ formFields.empty(); // 根据实体类型生成表单字段 switch (entityType) { case ENTITY_DINGDAN: $ formFields.append(` <div class="form-group"> <label>订单编号</label> <input type="text" class="form-control" name="number" value="${initialData.number || ''}" required> </div> <div class="form-group"> <label>下单日期</label> <input type="date" class="form-control" name="xiadan" value="${initialData.xiadan || ''}" required> </div> <div class="form-group"> <label>交货日期</label> <input type="date" class="form-control" name="jiaohuo" value="${initialData.jiaohuo || ''}"> </div> `); break; case 'dingdan_chanpin': // 订单产品 const chanpins = dataManager.data.chanpins || []; let chanpinOptions = '<option value="">选择产品</option>'; chanpinOptions += '<option value="new">+ 创建新产品</option>'; if (chanpins.length > 0) { chanpins.forEach(cp => { chanpinOptions += ` <option value="${cp.id}" ${initialData.chanpin.id == cp.id ? 'selected' : ''}> ${cp.bianhao} </option> `; }); } $ formFields.append(` <div class="form-group"> <label>产品</label> <div class="input-group"> <select class="form-control" name="chanpin" id="chanpinSelectModal" required> ${chanpinOptions} </select> <span class="input-group-btn"> <button class="btn btn-info" id="createChanpinBtn">新建</button> </span> </div> </div> <div class="form-group"> <label>数量</label> <input type="number" class="form-control" name="shuliang" value="${initialData.shuliang || 1}" min="1" required> </div> <input type="hidden" name="dingdan" value="${initialData.dingdan.id}"> `); // 添加新建产品按钮事件 $('#createChanpinBtn').on('click', function() { showCreateEntityModal('创建新产品', ENTITY_CHANPIN, null, { bianhao: '', name: '' }); }); // 产品选择变化 $('#chanpinSelectModal').on('change', function() { if ($(this).val() === 'new') { showCreateEntityModal('创建新产品', ENTITY_CHANPIN, null, { bianhao: '', }); $(this).val(''); // 重置选择 } }); break; case 'chanpin_zujian': // 产品组件 const zujians = dataManager.data.zujians || []; const bancais = dataManager.data.bancais || []; let zujianOptions = '<option value="">选择组件</option>'; zujianOptions += '<option value="new">+ 创建新组件</option>'; let bancaiOptions = '<option value="">选择板材</option>'; bancaiOptions += '<option value="new">+ 创建新板材</option>'; if (zujians.length > 0) { zujians.forEach(zj => { zujianOptions += ` <option value="${zj.id}" ${initialData.zujian.id == zj.id ? 'selected' : ''}> ${zj.name} </option> `; }); } if (bancais.length > 0) { bancais.forEach(bc => { let bcInfo = `厚度: ${bc.houdu}mm`; if (bc.caizhi) bcInfo += `, 材质: ${bc.caizhi.name}`; if (bc.mupi1) bcInfo += `, 木皮1: ${bc.mupi1.name}`; if (bc.mupi2) bcInfo += `, 木皮2: ${bc.mupi2.name}`; bancaiOptions += ` <option value="${bc.id}" ${initialData.bancai.id == bc.id ? 'selected' : ''}> ${bcInfo} </option> `; }); } $ formFields.append(` <div class="form-group"> <label>组件</label> <div class="input-group"> <select class="form-control" name="zujian" id="zujianSelectModal" required> ${zujianOptions} </select> <span class="input-group-btn"> <button class="btn btn-info" id="createZujianBtn">新建</button> </span> </div> </div> <div class="form-group"> <label>板材</label> <div class="input-group"> <select class="form-control" name="bancai" id="bancaiSelectModal" required> ${bancaiOptions} </select> <span class="input-group-btn"> <button class="btn btn-info" id="createBancaiBtn">新建</button> </span> </div> </div> <div class="form-group"> <label>一张板出多少组件</label> <input type="number" class="form-control" name="one_howmany" value="${initialData.one_howmany || 1}" min="0.01" step="0.01" required> </div> <input type="hidden" name="chanpin" value="${initialData.chanpin.id}"> `); // 添加新建按钮事件 $('#createZujianBtn').on('click', function() { showCreateEntityModal('创建新组件', ENTITY_ZUJIAN, null, { name: '' }); }); $('#createBancaiBtn').on('click', function() { showCreateEntityModal('创建新板材', ENTITY_BANCAI, null, { houdu: 0.0 }); }); // 组件选择变化 $('#zujianSelectModal').on('change', function() { if ($(this).val() === 'new') { showCreateEntityModal('创建新组件', ENTITY_ZUJIAN, null, { name: '' }); $(this).val(''); // 重置选择 } }); // 板材选择变化 $('#bancaiSelectModal').on('change', function() { if ($(this).val() === 'new') { showCreateEntityModal('创建新板材', ENTITY_BANCAI, null, { houdu: 0.0 }); $(this).val(''); // 重置选择 } }); break; } // 显示模态框 $('#entityModal').modal('show'); // 模态框显示后初始化Select2 $('#entityModal').on('shown.bs.modal', function() { // 产品模态框 if (entityType === 'dingdan_chanpin') { $('#chanpinSelectModal').select2({ theme: 'bootstrap', placeholder: '选择产品或创建新产品', allowClear: true, width: '100%' }); } // 组件模态框 if (entityType === 'chanpin_zujian') { $('#zujianSelectModal').select2({ theme: 'bootstrap', placeholder: '选择组件或创建新组件', allowClear: true, width: '100%' }); $('#bancaiSelectModal').select2({ theme: 'bootstrap', placeholder: '选择板材或创建新板材', allowClear: true, width: '100%' }); } }); // 模态框关闭时只销毁当前模态框内的Select2 $('#entityModal').on('hidden.bs.modal', function() { $(this).find('.select2-container').remove(); }); // 存储当前操作的实体信息 $('#entityModal').data('entity', { type: entityType, id: entityId }); } // 显示创建实体模态框(新产品/新组件/新板材) function showCreateEntityModal(title, entityType, entityId, initialData) { $('#createEntityModalTitle').text(title); const $ formFields = $('#createEntityFields'); $ formFields.empty(); // 根据实体类型生成表单字段 switch (entityType) { case ENTITY_CHANPIN: // 新产品 $ formFields.append(` <div class="form-group"> <label>产品编号</label> <input type="text" class="form-control" name="bianhao" value="${initialData.bianhao || ''}" required> </div> `); break; case ENTITY_ZUJIAN: // 新组件 $ formFields.append(` <div class="form-group"> <label>组件名称</label> <input type="text" class="form-control" name="name" value="${initialData.name || ''}" required> </div> `); break; case ENTITY_BANCAI: // 新板材 const caizhis = dataManager.data.caizhis || []; const mupis = dataManager.data.mupis || []; let caizhiOptions = '<option value="">选择材质</option>'; let mupi1Options = '<option value="">选择木皮1</option>'; let mupi2Options = '<option value="">选择木皮2</option>'; if (caizhis.length > 0) { caizhis.forEach(cz => { caizhiOptions += `<option value="${cz.id}">${cz.name}</option>`; }); } if (mupis.length > 0) { mupis.forEach(mp => { mupi1Options += `<option value="${mp.id}">${mp.name}${mp.you ? ' (油)' : ''}</option>`; mupi2Options += `<option value="${mp.id}">${mp.name}${mp.you ? ' (油)' : ''}</option>`; }); } $ formFields.append(` <div class="form-group"> <label>厚度(mm)</label> <input type="number" class="form-control" name="houdu" value="${initialData.houdu || 0.0}" step="0.1" min="0.1" required> </div> <div class="form-group"> <label>材质</label> <div class="input-group"> <select class="form-control" name="caizhi" required> ${caizhiOptions} </select> <span class="input-group-btn"> <button class="btn btn-default" id="createCaizhiBtn">新建</button> </span> </div> </div> <div class="form-group"> <label>木皮1</label> <div class="input-group"> <select class="form-control" name="mupi1"> ${mupi1Options} </select> <span class="input-group-btn"> <button class="btn btn-default" id="createMupiBtn">新建</button> </span> </div> </div> <div class="form-group"> <label>木皮2</label> <div class="input-group"> <select class="form-control" name="mupi2"> ${mupi2Options} </select> <span class="input-group-btn"> <button class="btn btn-default" id="createMupiBtn2">新建</button> </span> </div> </div> `); // 添加新建材质按钮事件 $('#createCaizhiBtn').on('click', function() { showCreateEntityModal('创建新材质', ENTITY_CAIZHI, null, { name: '' }); }); // 添加新建木皮按钮事件 $('#createMupiBtn, #createMupiBtn2').on('click', function() { showCreateEntityModal('创建新木皮', ENTITY_MUPI, null, { name: '', you: false }); }); break; case ENTITY_CAIZHI: // 新材质 $ formFields.append(` <div class="form-group"> <label>材质名称</label> <input type="text" class="form-control" name="name" value="${initialData.name || ''}" required> </div> `); break; case ENTITY_MUPI: // 新木皮 $ formFields.append(` <div class="form-group"> <label>木皮名称</label> <input type="text" class="form-control" name="name" value="${initialData.name || ''}" required> </div> <div class="form-group"> <label> <input type="checkbox" name="you" ${initialData.you ? 'checked' : ''}> 是否有油漆 </label> </div> `); break; } // 显示模态框 $('#createEntityModal').modal('show'); // 模态框显示后初始化Select2 $('#createEntityModal').on('shown.bs.modal', function() { if (entityType === ENTITY_BANCAI) { $('select[name="caizhi"], select[name="mupi1"], select[name="mupi2"]').select2({ theme: 'bootstrap', placeholder: '请选择', allowClear: true, width: '100%' }); } }); // 模态框关闭时只销毁当前模态框内的Select2 $('#entityModal').on('hidden.bs.modal', function() { $(this).find('.select2-container').remove(); }); // 存储当前操作的实体信息 $('#createEntityModal').data('entity', { type: entityType, id: entityId }); } // 保存实体(在添加产品/组件模态框中) async function saveEntity() { const $ saveBtn = $('#saveEntityBtn'); const originalText = $ saveBtn.text(); try { // 显示加载状态 $ saveBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> 保存中...'); const entityInfo = $('#entityModal').data('entity'); const formData = getFormData('#entityForm'); let result; if (entityInfo.id) { // 更新实体 result = await dataManager.updateEntity(entityInfo.type, { id: entityInfo.id, ...formData }); } else { // 新增实体 result = await dataManager.addEntity(entityInfo.type, formData); } if (result.status === 200) { $('#entityModal').modal('hide'); // 根据操作类型刷新对应的下拉列表 switch (entityInfo.type) { case ENTITY_DINGDAN: await refreshDingdanList(); break; case 'dingdan_chanpin': if (formData.dingdan && formData.dingdan.id) { await refreshChanpinList(formData.dingdan.id); } break; case 'chanpin_zujian': if (formData.chanpin && formData.chanpin.id) { await refreshZujianList(formData.chanpin.id); } break; } } else { alert(`保存失败: ${result.text}`); } } catch (error) { console.error('保存实体时出错:', error); alert(`保存失败: ${error.message}`); } finally { // 恢复按钮状态 $ saveBtn.prop('disabled', false).text(originalText); } } // 保存新实体(在创建实体模态框中) async function saveNewEntity() { const $ saveBtn = $('#saveNewEntityBtn'); const originalText = $ saveBtn.text(); try { // 显示加载状态 $ saveBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> 保存中...'); const entityInfo = $('#createEntityModal').data('entity'); const formData = getFormData('#createEntityForm'); // 新增实体 const result = await dataManager.addEntity(entityInfo.type, formData); if (result.status === 200) { $('#createEntityModal').modal('hide'); // 刷新父模态框中的下拉框 refreshParentDropdown(entityInfo.type, result.data.id); } else { alert(`创建失败: ${result.text}`); } } catch (error) { console.error('创建实体时出错:', error); alert(`创建失败: ${error.message}`); } finally { // 恢复按钮状态 $ saveBtn.prop('disabled', false).text(originalText); } } // 刷新父模态框中的下拉框 function refreshParentDropdown(entityType, newEntityId) { // 获取父模态框中的相关下拉框 const $ parentModal = $('#entityModal'); if (!$ parentModal.is(':visible')) return; const parentEntityType = $ parentModal.data('entity').type; // 根据实体类型刷新对应的下拉框 if (parentEntityType === 'dingdan_chanpin' && entityType === ENTITY_CHANPIN) { // 刷新产品下拉框 const $ select = $('#chanpinSelectModal'); $ select.append(`<option value="${newEntityId}" selected>新建产品</option>`); $ select.select2('destroy'); $ select.select2({ theme: 'bootstrap', placeholder: '选择产品或创建新产品', allowClear: true, width: '100%' }); } else if (parentEntityType === 'chanpin_zujian') { if (entityType === ENTITY_ZUJIAN) { // 刷新组件下拉框 const $ select = $('#zujianSelectModal'); $ select.append(`<option value="${newEntityId}" selected>新建组件</option>`); $ select.select2('destroy'); $ select.select2({ theme: 'bootstrap', placeholder: '选择组件或创建新组件', allowClear: true, width: '100%' }); } else if (entityType === ENTITY_BANCAI) { // 刷新板材下拉框 const $ select = $('#bancaiSelectModal'); $ select.append(`<option value="${newEntityId}" selected>新建板材</option>`); $ select.select2('destroy'); $ select.select2({ theme: 'bootstrap', placeholder: '选择板材或创建新板材', allowClear: true, width: '100%' }); } else if (entityType === ENTITY_CAIZHI) { // 刷新材质下拉框(在板材创建中) const $ select = $ parentModal.find('select[name="caizhi"]'); $ select.append(`<option value="${newEntityId}" selected>新建材质</option>`); $ select.select2('destroy'); $ select.select2({ theme: 'bootstrap', placeholder: '请选择', allowClear: true, width: '100%' }); } else if (entityType === ENTITY_MUPI) { // 刷新木皮下拉框(在板材创建中) const $ select = $ parentModal.find('select[name="mupi1"], select[name="mupi2"]'); $ select.append(`<option value="${newEntityId}" selected>新建木皮</option>`); $ select.select2('destroy'); $ select.select2({ theme: 'bootstrap', placeholder: '请选择', allowClear: true, width: '100%' }); } } } // 获取表单数据 function getFormData(selector) { const formData = {}; $(`${selector} :input`).each(function() { const $ input = $(this); const name = $ input.attr('name'); const type = $ input.attr('type'); if (name) { if (type === 'checkbox') { formData[name] = $ input.prop('checked'); } else if (type === 'radio') { if ($ input.prop('checked')) { formData[name] = $ input.val(); } } else { // 处理关联对象 if (name === 'chanpin' || name === 'zujian' || name === 'bancai' || name === 'dingdan' || name === 'caizhi' || name === 'mupi1' || name === 'mupi2') { formData[name] = { id: parseInt($ input.val()) }; } else if (name === 'one_howmany' || name === 'houdu') { formData[name] = parseFloat($ input.val()); } else if (name === 'shuliang') { formData[name] = parseInt($ input.val()); } else { formData[name] = $ input.val(); } } } }); return formData; } // 日期格式化辅助函数 function formatDate(dateString) { if (!dateString) return ''; const date = new Date(dateString); return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`; } }); 进货记录放在创建和更新订购计录的回调中中 function resolveDataReferences(data) { console.log(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); } } } } } 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<boolean>} 是否成功 */ 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'); console.log(result.data) 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<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 !== 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()); } /** * 获取订单的可用板材信息 * @param {number} dingdanId - 订单ID * @returns {Object} 可用板材信息 */ getAvailableBancaisForOrder(dingdanId) { const dingdan = this.data.dingdans.find(d => d.id == dingdanId); if (!dingdan) return {}; return dingdan.availableBancais || {}; } /** * 获取产品的组件列表 * @param {number} chanpinId - 产品ID * @returns {Array} 组件列表 */ getZujiansForChanpin(chanpinId) { const chanpin = this.data.chanpins.find(c => c.id == chanpinId); if (!chanpin) return []; return (chanpin.chanpin_zujian_list || []) .map(cz => cz.zujian) .filter(z => z); } /** * 获取组件的板材信息 * @param {number} zujianId - 组件ID * @returns {Array} 板材列表 */ getBancaisForZujian(zujianId) { return (this.data.chanpin_zujians || []) .filter(cz => cz.zujian && cz.zujian.id == zujianId) .map(cz => cz.bancai) .filter(b => b); } /** * 创建进货记录 在这里实现订购记录回调在创建进货记录 * @param {Object} jinhuoData - 进货数据 * @returns {Promise} 操作结果 */ async createJinhuo(jinhuoData) { return this.addEntity('jinhuo', jinhuoData); } /** * 获取订单列表 * @returns {Array} 订单列表 */ getDingdans() { return this.data.dingdans || []; } /** * 获取订单的产品列表 * @param {number} dingdanId - 订单ID * @returns {Array} 产品列表 */ getChanpinsForDingdan(dingdanId) { const dingdan = this.data.dingdans.find(d => d.id == dingdanId); if (!dingdan) return []; return (dingdan.dingdan_chanpin_list || []) .map(dc => dc.chanpin) .filter(c => c); } } 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);
最新发布
06-24
------------------------ Chanpin.java ------------------------ package com.kucun.data.entity; import java.util.List; import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.JoinTable; import javax.persistence.OneToMany; import javax.persistence.Table; import javax.persistence.UniqueConstraint; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.*; /** * 产品类 * @author Administrator * */ @Entity @Table(name="chanpin", uniqueConstraints = { @UniqueConstraint(columnNames = "bianhao") }) @JsonSerialize(using = FullEntitySerializer.class) public class Chanpin implements EntityBasis { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; // 关联订单产品 @OneToMany( mappedBy = "chanpin", cascade = CascadeType.ALL, fetch = FetchType.LAZY ) private List<Dingdan_chanpin> dingdan_chanpin; private String bianhao; @OneToMany( mappedBy = "chanpin", cascade = CascadeType.ALL, fetch = FetchType.LAZY, orphanRemoval = true ) private List<Chanpin_zujian> chanpin_zujian; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getBianhao() { return bianhao; } public void setBianhao(String bianhao) { this.bianhao = bianhao; } public List<Dingdan_chanpin> getDingdan_chanpin() { return dingdan_chanpin; } public void setDingdan_chanpin(List<Dingdan_chanpin> dingdan_chanpin) { this.dingdan_chanpin = dingdan_chanpin; } public List<Chanpin_zujian> getChanpin_zujian() { return chanpin_zujian; } public void setChanpin_zujian(List<Chanpin_zujian> chanpin_zujian) { this.chanpin_zujian = chanpin_zujian; } } ------------------------ Chanpin_zujian.java ------------------------ package com.kucun.data.entity; import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.Table; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 产品组件关联类 * @author Administrator * */ @Entity @Table(name="chanpin_zujian") @JsonSerialize(using = FullEntitySerializer.class) public class Chanpin_zujian implements EntityBasis { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; // 关联到产品 @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "chanpin_id") private Chanpin chanpin; // 关联到组件 @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "zujian_id") private Zujian zujian; // 关联到板材 @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "bancai_id") private Bancai bancai; private Double one_howmany; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Chanpin getChanpin() { return chanpin; } public void setChanpin(Chanpin chanpin) { this.chanpin = chanpin; } public Zujian getZujian() { return zujian; } public void setZujian(Zujian zujian) { this.zujian = zujian; } public Bancai getBancai() { return bancai; } public void setBancai(Bancai bancai) { this.bancai = bancai; } public Double getOne_howmany() { return one_howmany; } public void setOne_howmany(Double one_howmany) { this.one_howmany = one_howmany; } public Chanpin_zujian() { super(); // TODO Auto-generated constructor stub } } ------------------------ Dingdan.java ------------------------ package com.kucun.data.entity; import java.util.Date; import java.util.List; import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.ManyToMany; import javax.persistence.OneToMany; import javax.persistence.Table; import javax.persistence.UniqueConstraint; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 订单 * @author Administrator * */ @Entity @Table(name="dingdan", uniqueConstraints = { @UniqueConstraint(columnNames = "number") }) @JsonSerialize(using = FullEntitySerializer.class) public class Dingdan implements EntityBasis{ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; //订单号 private String number; private Date xiadan; private Date jiaohuo; @OneToMany( mappedBy = "dingdan", cascade = CascadeType.ALL, fetch = FetchType.LAZY, orphanRemoval = true ) private List<Dingdan_chanpin> dingdan_chanpin; // 优化订单与订单组件关联 @OneToMany( mappedBy = "dingdan", cascade = CascadeType.ALL, fetch = FetchType.LAZY, orphanRemoval = true ) private List<Dingdan_chanpin_zujian> dingdan_chanpins_zujians; public Date getXiadan() { return xiadan; } public void setXiadan(Date xiadan) { this.xiadan = xiadan; } public Date getJiaohuo() { return jiaohuo; } public void setJiaohuo(Date jiaohuo) { this.jiaohuo = jiaohuo; } public List<Dingdan_chanpin_zujian> getDingdan_chanpins_zujians() { return dingdan_chanpins_zujians; } public void setDingdan_chanpins_zujians(List<Dingdan_chanpin_zujian> dingdan_chanpins_zujians) { this.dingdan_chanpins_zujians = dingdan_chanpins_zujians; } public List<Dingdan_chanpin> getDingdan_chanpin() { return dingdan_chanpin; } public void setDingdan_chanpin(List<Dingdan_chanpin> dingdan_chanpins) { this.dingdan_chanpin = dingdan_chanpins; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getNumber() { return number; } public void setNumber(String number) { this.number = number; } public Dingdan(Integer id, String number) { super(); this.id = id; this.number = number; } public Dingdan() { super(); // TODO Auto-generated constructor stub } } ------------------------ Dingdan_chanpin.java ------------------------ package com.kucun.data.entity; import javax.persistence.CascadeType; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.Table; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 订单和产品关联 * @author Administrator * */ @Entity @Table(name="dingdan_chanpin") @JsonSerialize(using = FullEntitySerializer.class) public class Dingdan_chanpin implements EntityBasis { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; //产品信息 @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "dingdan_id") // 指 private Dingdan dingdan; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "chanpin_id") // 指 private Chanpin chanpin; private Integer shuliang;//产品数量; public Chanpin getChanpin() { return chanpin; } public void setChanpin(Chanpin chanpin) { this.chanpin = chanpin; } public Integer getShuliang() { return shuliang; } public void setShuliang(Integer shuliang) { this.shuliang = shuliang; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Dingdan getDingdan() { return dingdan; } public void setDingdan(Dingdan dingdan) { this.dingdan = dingdan; } public Chanpin getChanping() { return chanpin; } public void setChanping(Chanpin chanping) { this.chanpin = chanping; } } ------------------------ Dingdan_chanpin_zujian.java ------------------------ package com.kucun.data.entity; import javax.persistence.CascadeType; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 一个订单中的产品组件订购板材数量 * @author Administrator * */ @Entity @JsonSerialize(using = FullEntitySerializer.class) public class Dingdan_chanpin_zujian implements EntityBasis{ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "dingdan_id") // 指定外键列 private Dingdan dingdan; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "chanpin_zujian_id") // 指定外键列 private Chanpin_zujian chanpin_zujian; // 修改为单数形式 //板材 @ManyToOne(cascade = CascadeType.ALL, fetch = FetchType.LAZY) @JoinColumn(name = "bancai_id") private Bancai bancai; //订购数 private Integer shuliang ; public Dingdan_chanpin_zujian() { super(); // TODO Auto-generated constructor stub } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Dingdan getDingdan() { return dingdan; } public void setDingdan(Dingdan dingdan) { this.dingdan = dingdan; } public Bancai getBancai() { return bancai; } public void setBancai(Bancai bancai) { this.bancai = bancai; } public Chanpin_zujian getChanpin_zujian() { return chanpin_zujian; } public void setChanpin_zujian(Chanpin_zujian chanpin_zujian) { this.chanpin_zujian = chanpin_zujian; } public Integer getShuliang() { return shuliang; } public void setShuliang(Integer shuliang) { this.shuliang = shuliang; } } ------------------------ EntityBasis.java ------------------------ package com.kucun.data.entity; public interface EntityBasis { Integer getId(); void setId(Integer id); } ------------------------ Information.java ------------------------ package com.kucun.data.entity; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; /** * 通信类 * @author Administrator * */ public class Information { private static final ObjectMapper mapper = new ObjectMapper(); private Integer Status ; private String text; private Object data; public Integer getStatus() { return Status; } public void setStatus(Integer status) { Status = status; } public String getText() { return text; } public void setText(String text) { this.text = text; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } public Information(Integer status, String text, Object data) { super(); Status = status; this.text = text; this.data = data; } @SuppressWarnings({"unchecked","rawtypes"}) public Information(Integer status, String text, String data, Class T) throws Exception { super(); Status = status; this.text = text; this.data = fromJson(data,T); } public Information() { super(); // TODO Auto-generated constructor stub } public String DataJson() throws JsonProcessingException { // Java对象转JSON return mapper.writeValueAsString(this); } @SuppressWarnings("unchecked") public <T> T fromJson(String json, Class<T> clazz) throws Exception { data= mapper.readValue(json, clazz); return (T) data; } public static Information NewSuccess(Object data) { return new Information(200, "success", data); } public static Information NewSuccess(String data) { return new Information(200, "success", data); } public static Information Newfail(Integer status,String text,Object data) { return new Information(status, "success", data); } public static Information NewFail(int i, String string) { // TODO Auto-generated method stub return new Information(i,string,null); } public static Information NewFail( String string) { // TODO Auto-generated method stub return new Information(400,string,null); } } ------------------------ Jinhuo.java ------------------------ package com.kucun.data.entity; import java.util.Date; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.ManyToOne; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; @Entity @JsonSerialize(using = FullEntitySerializer.class) public class Jinhuo implements EntityBasis{ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; @ManyToOne private Dingdan dingdan; @ManyToOne private Chanpin chanpin; @ManyToOne private Zujian zujian; @ManyToOne private Bancai bancai; private Integer shuliang; private Date date; @ManyToOne private User user; public Jinhuo(Integer id, Dingdan dingdan, Chanpin chanpin, Zujian zujian, Bancai bancai, Integer shuliang, Date date, User user) { super(); this.id = id; this.dingdan = dingdan; this.chanpin = chanpin; this.zujian = zujian; this.bancai = bancai; this.shuliang = shuliang; this.date = date; this.user = user; } public Jinhuo() { super(); // TODO Auto-generated constructor stub } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Dingdan getDingdan() { return dingdan; } public void setDingdan(Dingdan dingdan) { this.dingdan = dingdan; } public Chanpin getChanpin() { return chanpin; } public void setChanpin(Chanpin chanpin) { this.chanpin = chanpin; } public Zujian getZujian() { return zujian; } public void setZujian(Zujian zujian) { this.zujian = zujian; } public Bancai getBancai() { return bancai; } public void setBancai(Bancai bancai) { this.bancai = bancai; } public Integer getShuliang() { return shuliang; } public void setShuliang(Integer shuliang) { this.shuliang = shuliang; } public Date getDate() { return date; } public void setDate(Date date) { this.date = date; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } } ------------------------ Kucun.java ------------------------ package com.kucun.data.entity; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.OneToOne; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 库存 * @author Administrator * */ @Entity @JsonSerialize(using = FullEntitySerializer.class) public class Kucun implements EntityBasis{ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; private Integer shuliang; @OneToOne(fetch = FetchType.LAZY) // 正确映射 Bancai 实体 @JoinColumn(name = "bancai_id", referencedColumnName = "id") private Bancai bancai; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Bancai getBancai() { return bancai; } public void setBancai(Bancai bancai) { this.bancai = bancai; } public Integer getShuliang() { return shuliang; } public void setShuliang(Integer shuliang) { this.shuliang = shuliang; } public Kucun(Integer id, Bancai bancai, Integer shuliang) { super(); this.id = id; this.bancai = bancai; this.shuliang = shuliang; } public Kucun() { super(); // TODO Auto-generated constructor stub } } ------------------------ Mupi.java ------------------------ package com.kucun.data.entity; import java.util.List; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.ManyToMany; import javax.persistence.OneToMany; import javax.persistence.Table; import javax.persistence.UniqueConstraint; import org.hibernate.annotations.Type; import com.fasterxml.jackson.annotation.JsonIgnore; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 木皮 * @author Administrator * */ @Entity @Table(name="mupi", uniqueConstraints = { @UniqueConstraint(columnNames = "name") }) @JsonSerialize(using = FullEntitySerializer.class) public class Mupi extends SimpleEntity implements EntityBasis{ /** * 是否有油漆 */ @Column(name="you") @Type(type = "org.hibernate.type.BooleanType") private Boolean you; // 添加 OneToMany 映射 @OneToMany(mappedBy = "mupi1") // 指向 Bancai 中的 mupi1 字段 private List<Bancai> bancaisForMupi1; @OneToMany(mappedBy = "mupi2") // 指向 Bancai 中的 mupi2 字段 private List<Bancai> bancaisForMupi2; public List<Bancai> getBancaisForMupi1() { return bancaisForMupi1; } public void setBancaisForMupi1(List<Bancai> bancaisForMupi1) { this.bancaisForMupi1 = bancaisForMupi1; } public List<Bancai> getBancaisForMupi2() { return bancaisForMupi2; } public void setBancaisForMupi2(List<Bancai> bancaisForMupi2) { this.bancaisForMupi2 = bancaisForMupi2; } public Mupi() { super(); } public Boolean getYou() { return you; } public void setYou(Boolean you) { this.you = you; } } ------------------------ SimpleEntity.java ------------------------ package com.kucun.data.entity; import javax.persistence.Column; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.MappedSuperclass; @MappedSuperclass public abstract class SimpleEntity implements EntityBasis{ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; @Column(nullable = false, unique = true) private String name; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } // Getters and Setters... } ------------------------ User.java ------------------------ package com.kucun.data.entity; import java.util.Objects; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 用户 * @author Administrator * */ @Entity @Table(name="user") @JsonSerialize(using = FullEntitySerializer.class) public class User implements EntityBasis{ @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; /** * 名字 */ @Column(nullable=false) private String name; /** * 账号 */ @Column(nullable=false) private String andy; /** * 密码 */ @Column(nullable=false) private String pass; /** * 权限 */ @Column(nullable=false) private int role; public User() { super(); } public User(int id, String name, String andy, String pass) { super(); this.id = id; this.name = name; this.andy = andy; this.pass = pass; } public Integer getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAndy() { return andy; } public void setAndy(String andy) { this.andy = andy; } public String getPass() { return pass; } public void setPass(String pass) { this.pass = pass; } public int getRole() { System.out.println(role); return role; } public void setRole(int role) { this.role = role; } @Override public String toString() { return "{id:" + id + ", name:" + name + ", andy:" + andy + ", pass:" + pass + ", role:" + role + "}"; } @Override public boolean equals(Object o) { if (this == o) return true; if (o == null || getClass() != o.getClass()) return false; User user = (User) o; return Objects.equals(id, user.id) && Objects.equals(name, user.name) && Objects.equals(andy, user.andy)&& Objects.equals(role, user.role); //添加所有属性比较 } @Override public int hashCode() { return Objects.hash(id, name, andy,pass,role); } @Override public void setId(Integer id) { // TODO Auto-generated method stub } } ------------------------ Zujian.java ------------------------ package com.kucun.data.entity; import java.util.List; import javax.persistence.CascadeType; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.Id; import javax.persistence.OneToMany; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; @Entity @JsonSerialize(using = FullEntitySerializer.class) public class Zujian extends SimpleEntity implements EntityBasis{ // 反向关联到产品组件 @OneToMany( mappedBy = "zujian", cascade = CascadeType.ALL, fetch = FetchType.LAZY ) private List<Chanpin_zujian> chanping_zujian; public List<Chanpin_zujian> getChanping_zujian() { return chanping_zujian; } public void setChanping_zujian(List<Chanpin_zujian> chanping_zujian) { this.chanping_zujian = chanping_zujian; } } ------------------------ Bancai.java ------------------------ package com.kucun.data.entity; import java.lang.annotation.Annotation; import javax.persistence.CascadeType; import javax.persistence.Entity; import javax.persistence.FetchType; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.ManyToOne; import javax.persistence.OneToOne; import javax.persistence.Table; import com.kucun.data.entity.DTO.*; import com.fasterxml.jackson.annotation.JsonBackReference; import com.fasterxml.jackson.annotation.JsonManagedReference; import com.fasterxml.jackson.databind.annotation.JsonSerialize; /** * 板材 * @author Administrator * */ @Entity @Table(name="bancai") @JsonSerialize(using = FullEntitySerializer.class) public class Bancai implements EntityBasis { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; @ManyToOne( fetch = FetchType.LAZY) @JoinColumn(name = "caizhi_id") // private Caizhi caizhi; @ManyToOne( fetch = FetchType.LAZY) @JoinColumn(name = "mupi1_id") private Mupi mupi1; @ManyToOne( fetch = FetchType.LAZY) @JoinColumn(name = "mupi2_id") private Mupi mupi2; private Double houdu; @OneToOne( cascade = CascadeType.ALL, orphanRemoval = true, // 添加此配置 fetch = FetchType.LAZY ) @JoinColumn(name = "kucun_id", referencedColumnName = "id") private Kucun kucun; public Kucun getKucun() { return kucun; } public void setKucun(Kucun kucun) { this.kucun = kucun; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public Caizhi getCaizhi() { return caizhi; } public void setCaizhi(Caizhi caizhi) { this.caizhi = caizhi; } public Mupi getMupi1() { return mupi1; } public void setMupi1(Mupi mupi1) { this.mupi1 = mupi1; } public Mupi getMupi2() { return mupi2; } public void setMupi2(Mupi mupi2) { this.mupi2 = mupi2; } public Double getHoudu() { return houdu; } public void setHoudu(Double houdu) { this.houdu = houdu; } public Bancai(int id, Caizhi caizhi, Mupi mupi1, Mupi mupi2, Double houdu) { super(); this.id = id; this.caizhi = caizhi; this.mupi1 = mupi1; this.mupi2 = mupi2; this.houdu = houdu; } public Bancai() { super(); } } ------------------------ Caizhi.java ------------------------ package com.kucun.data.entity; import java.util.List; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.OneToMany; import javax.persistence.Table; import javax.persistence.UniqueConstraint; import com.fasterxml.jackson.annotation.JsonIgnore; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.kucun.data.entity.DTO.FullEntitySerializer; /** * 板材材质 * @author Administrator * */ @Entity @Table(name="caizhi", uniqueConstraints = { @UniqueConstraint(columnNames = "name") }) @JsonSerialize(using = FullEntitySerializer.class) public class Caizhi extends SimpleEntity implements EntityBasis{ @OneToMany(mappedBy="caizhi") private List<Bancai> bancai; public List<Bancai> getBancai() { return bancai; } public void setBancai(List<Bancai> bancai) { this.bancai = bancai; } } erDiagram Chanpin ||–o{ Chanpin_zujian : “1:N” Chanpin ||–o{ Dingdan_chanpin : “1:N” Dingdan ||–o{ Dingdan_chanpin : “1:N” Dingdan ||–o{ Dingdan_chanpin_zujian : “1:N” Chanpin_zujian ||–o| Zujian : “N:1” Chanpin_zujian ||–o| Bancai : “N:1” Dingdan_chanpin_zujian ||–o| Chanpin_zujian : “N:1” Dingdan_chanpin_zujian ||–o| Bancai : “N:1” Bancai ||–o| Caizhi : “N:1” Bancai ||–o| Mupi : “正面木皮 (N:1)” Bancai ||–o| Mupi : “反面木皮 (N:1)” Bancai ||–|| Kucun : “1:1” Mupi ||–o{ Bancai : “正面关联 (1:N)” Mupi ||–o{ Bancai : “反面关联 (1:N)” Caizhi ||–o{ Bancai : “1:N” Jinhuo }|–|| Dingdan : “N:1” Jinhuo }|–|| Chanpin : “N:1” Jinhuo }|–|| Zujian : “N:1” Jinhuo }|–|| Bancai : “N:1” Jinhuo }|–|| User : "N:1"优化后的关联解析函数(解决空问题) @param {Object} data - 后端原始数据 @returns {Object} 处理后的完整关联数据 */ function __resolveDataReferences(data) { // 创建ID映射表(带空保护) const idMaps = {}; Object.keys(data).forEach(key => { if (Array.isArray(data[key])) { idMaps[key] = new Map(); data[key].forEach(item => item.id && idMaps[key].set(item.id, item)); } }); // 通用关联解析方法(带安全检测) const resolveRef = (sourceArray, sourceKey, targetKey, refProperty) => { if (!Array.isArray(sourceArray)) return; sourceArray.forEach(item => { const refObj = item[refProperty]; if (refObj && refObj.id && idMaps[targetKey]) { const target = idMaps[targetKey].get(refObj.id); if (target) { // 建立正向引用 item[refProperty] = target; // 建立反向引用(自动创建关联数组) const reverseProp = sourceKey.endsWith(‘s’) ? sourceKey.slice(0, -1) + ‘_list’ : sourceKey + ‘_list’; if (!target[reverseProp]) target[reverseProp] = []; if (!target[reverseProp].includes(item)) { target[reverseProp].push(item); } } } }); }; // 处理特定关联(使用新安全方法) // 订单 ↔ 订单产品 if (data.dingdans && data.dingdan_chanpins) { resolveRef(data.dingdan_chanpins, ‘dingdans’, ‘dingdans’, ‘dingdan’); } // 订单 ↔ 订单组件 if (data.dingdans && data.dingdan_chanpin_zujians) { resolveRef(data.dingdan_chanpin_zujians, ‘dingdans’, ‘dingdans’, ‘dingdan’); } // 产品 ↔ 产品组件 if (data.chanpins && data.chanpin_zujians) { resolveRef(data.chanpin_zujians, ‘chanpins’, ‘chanpins’, ‘chanpin’); } // 组件 ↔ 产品组件 if (data.zujians && data.chanpin_zujians) { resolveRef(data.chanpin_zujians, ‘zujians’, ‘zujians’, ‘zujian’); } // 材质 ↔ 板材 if (data.caizhis && data.bancais) { resolveRef(data.bancais, ‘caizhis’, ‘caizhis’, ‘caizhi’); } // 板材 ↔ 库存(一对一) if (data.bancais && data.kucuns) { resolveRef(data.bancais, ‘kucuns’, ‘kucuns’, ‘kucun’); resolveRef(data.kucuns, ‘bancais’, ‘bancais’, ‘bancai’); // 反向引用 } // 板材 ↔ 木皮(mupi1/mupi2) if (data.bancais && data.mupis) { resolveRef(data.bancais, ‘mupis’, ‘mupis’, ‘mupi1’); resolveRef(data.bancais, ‘mupis’, ‘mupis’, ‘mupi2’); } // 订单产品 ↔ 产品 if (data.dingdan_chanpins && data.chanpins) { resolveRef(data.dingdan_chanpins, ‘chanpins’, ‘chanpins’, ‘chanpin’); } // 订单组件 ↔ 产品组件 if (data.dingdan_chanpin_zujians && data.chanpin_zujians) { resolveRef(data.dingdan_chanpin_zujians, ‘chanpin_zujians’, ‘chanpin_zujians’, ‘chanpin_zujian’); } // 订单组件 ↔ 板材 if (data.dingdan_chanpin_zujians && data.bancais) { resolveRef(data.dingdan_chanpin_zujians, ‘bancais’, ‘bancais’, ‘bancai’); } // 进货 ↔ 相关实体 if (data.jinhuos) { [‘dingdan’, ‘chanpin’, ‘zujian’, ‘bancai’, ‘user’].forEach(entity => { const plural = entity + ‘s’; if (data[plural]) { resolveRef(data.jinhuos, plural, plural, entity); } }); } return data; } 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_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: [], // …其他实体 }; this.syncQueue = Promise.resolve(); } /** 获取所有数据 @returns {Promise<boolean>} 是否成功 */ 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<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 !== 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); <!DOCTYPE html> <html lang=“zh-CN”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>板材库存查询系统</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css” rel=“stylesheet”> <!-- 引入 Popper.js 和 Bootstrap JS --> <script src=“https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js”></script> <script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js”></script> <script src="../js/main.js"></script> <style> .card-header { background: linear-gradient(to right, #1e3c72, #2a5298); color: white; } .search-section { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 10px; } .result-section { max-height: 70vh; overflow: auto; border-left: 3px solid #1e3c72; } .table-hover tbody tr:hover { background-color: rgba(42, 82, 152, 0.05); } .material-kucun { font-weight: 700; color: #1e3c72; } .material-kucun-low { color: #dc3545 !important; } .no-results { min-height: 200px; display: flex; align-items: center; justify-content: center; } .stats-card { border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } body { background-color: #f8f9fa; padding-bottom: 2rem; } .search-control { position: relative; } .search-icon { position: absolute; left: 12px; top: 12px; color: #6c757d; } .form-control.with-icon { padding-left: 35px; } .highlight { background-color: rgba(255, 255, 0, 0.3) !important; } .info-badge { font-size: 0.8rem; font-weight: normal; } </style> </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-6"> <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-6"> <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="input-group"> <span class="input-group-text"><i class="bi bi-arrows-vertical"></i></span> <input type="number" class="form-control" id="minThickness" placeholder="厚度(mm)" min="0" step="0.1"> <button class="btn btn-primary" type="button" id="thicknessBtn"> <i class="bi bi-arrow-right"></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="resultTable"> <thead class="table-light sticky-top"> <tr> <th>订单号</th> <th>产品信息</th> <th>产品数量</th> <th>组件</th> <th>板材</th> <th>板材/组件</th> <th>板材订购数量</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> <script type=“text/javascript”> </script> <script src=“…/js/dingdan.js”></script> 订单下有多个产品不同数量(dingdan_chanpin类连接储存) 一个产品下有多个组件(chanpin_zujian连接) 一个产品和组件的组合有一种板材并产量一样(chanpin_zujian连接储存不是dingdan_chanpin_zujian),一个订单订购的板材可能多一点也可能少一点(dingdan_chanpin_zujian中储存)修复页面逻辑问题,创建订单下拉框显示创建的,添加产品要输入数量创建一个dingdan_chanpin并显示添加的产品,添加组件中要添加板材和 输入一张板出多少组件创建一个chnapin_zujian, 最下面一个订购数量输入,提交后判断有无一样dingdan_chanpin_zujian,无就创建,并创建jinhuo
06-20
------------------------ DataManager.js ------------------------ //{ 实体类的关联和属性列表 // "entities": { // "Dingdan": { // "properties": { // "id": "Integer", // "number": "String", // "xiadan": "Date", // "jiaohuo": "Date", // "dingdan_chanpins": "List<Dingdan_chanpin> (OneToMany)", // "dingdan_chanpins_zujians": "List<Dingdan_chanpin_zujian> (OneToMany)" // }, // "relations": [ // "关联订单产品(Dingdan_chanpin)", // "关联订单组件(Dingdan_chanpin_zujian)" // ] // }, // "Dingdan_chanpin": { // "properties": { // "id": "Integer", // "shuliang": "Integer" // }, // "relations": [ // "多对一关联订单(Dingdan)", // "多对一关联产品(Chanpin)" // ] // }, // "Dingdan_chanpin_zujian": { // "properties": { // "id": "Integer", // "shuliang": "Integer" // }, // "relations": [ // "多对一关联订单(Dingdan)", // "多对一关联组件(Chanpin_zujian)", // "多对一关联板材(Bancai)" // ] // }, // "Jinhuo": { // "properties": { // "id": "Integer", // "shuliang": "Integer", // "date": "Date" // }, // "relations": [ // "多对一关联订单(Dingdan)", // "多对一关联产品(Chanpin)", // "多对一关联组件(Zujian)", // "多对一关联板材(Bancai)", // "多对一关联用户(User)" // ] // }, // "Kucun": { // "properties": { // "id": "Integer", // "shuliang": "Long" // }, // "relations": [ // "一对一关联板材(Bancai)" // ] // }, // "Mupi": { // "properties": { // "id": "Integer", // "name": "String", // "you": "Boolean" // }, // "relations": [ // "被板材关联(Bancai - mupi1/mupi2)" // ] // }, // "User": { // "properties": { // "id": "Integer", // "name": "String", // "andy": "String", // "pass": "String", // "role": "int" // } // }, // "Zujian": { // "properties": { // "id": "Integer", // "name": "String" // }, // "relations": [ // "一对多关联产品组件(Chanpin_zujian)" // ] // }, // "Bancai": { // "properties": { // "id": "Integer", // "houdu": "Double" // }, // "relations": [ // "多对一关联材质(Caizhi)", // "多对一关联木皮(Mupi - mupi1/mupi2)", // "一对一关联库存(Kucun)" // ] // }, // "Caizhi": { // "properties": { // "id": "Integer", // "name": "String" // }, // "relations": [ // "一对多关联板材(Bancai)" // ] // }, // "Chanpin": { // "properties": { // "id": "Integer", // "bianhao": "String" // }, // "relations": [ // "一对多关联订单产品(Dingdan_chanpin)", // "一对多关联产品组件(Chanpin_zujian)" // ] // }, // "Chanpin_zujian": { // "properties": { // "id": "Integer", // "one_howmany": "Double" // }, // "relations": [ // "多对一关联产品(Chanpin)", // "多对一关联组件(Zujian)", // "多对一关联板材(Bancai)" // ] // } // }, // "relationsSummary": [ // "订单(Dingdan) 1:N 订单产品(Dingdan_chanpin)", // "订单(Dingdan) 1:N 订单组件(Dingdan_chanpin_zujian)", // "产品(Chanpin) 1:N 产品组件(Chanpin_zujian)", // "组件(Zujian) 1:N 产品组件(Chanpin_zujian)", // "板材(Bancai) 1:1 库存(Kucun)", // "材质(Caizhi) 1:N 板材(Bancai)" // ] //} /** * 解析数据关联关系,将ID引用转换为对象引用 * @param {Object} data - 从后端加载的原始数据 * @returns {Object} - 处理后的数据,包含完整的对象关联 *//** * 解析数据关联关系,将ID引用转换为对象引用 * @param {Object} data - 从后端加载的原始数据 * @returns {Object} - 处理后的数据,包含完整的对象关联 */ function resolveDataReferences(data) { // 创建ID映射表 const idMaps = {}; Object.keys(data).forEach(key => { // 确保数据存在且是数组 if (Array.isArray(data[key])) { idMaps[key] = new Map(); data[key].forEach(item => idMaps[key].set(item.id, item)); } }); // 处理多对一和一对一关系 const resolveRef = (source, sourceKey, targetKey, propertyName) => { // 确保源数据存在且是数组 if (!Array.isArray(source)) return; source.forEach(item => { // 确保关联属性存在且有id if (item[propertyName] && item[propertyName].id) { const refId = item[propertyName].id; // 确保目标映射存在 if (!idMaps[targetKey]) return; const target = idMaps[targetKey].get(refId); if (target) { item[propertyName] = target; // 建立反向引用(一对多关系) if (!target[sourceKey]) target[sourceKey] = []; if (!target[sourceKey].includes(item)) { target[sourceKey].push(item); } } } }); }; // 处理一对多关系(直接创建关联数组) const resolveOneToMany = (sourceKey, targetKey, propertyName) => { // 确保源数据存在 if (!Array.isArray(data[sourceKey]) || !Array.isArray(data[targetKey])) return; const sourceItems = data[sourceKey]; sourceItems.forEach(source => { if (!source[propertyName]) source[propertyName] = []; }); data[targetKey].forEach(target => { // 确保关联属性存在 if (target[sourceKey]?.id) { const sourceId = target[sourceKey].id; // 确保源映射存在 if (!idMaps[sourceKey]) return; const source = idMaps[sourceKey].get(sourceId); if (source && source[propertyName]) { source[propertyName].push(target); } } }); }; // 处理特定关联关系 - 添加空检查 if (data.dingdans && data.dingdan_chanpins) { resolveOneToMany('dingdans', 'dingdan_chanpins', 'dingdan_chanpins'); resolveRef(data.dingdan_chanpins, 'dingdans', 'dingdans', 'dingdan'); } if (data.dingdans && data.dingdan_chanpin_zujians) { resolveOneToMany('dingdans', 'dingdan_chanpin_zujians', 'dingdan_chanpin_zujians'); resolveRef(data.dingdan_chanpin_zujians, 'dingdans', 'dingdans', 'dingdan'); } if (data.chanpins && data.chanpin_zujians) { resolveOneToMany('chanpins', 'chanpin_zujians', 'chanpin_zujians'); resolveRef(data.chanpin_zujians, 'chanpins', 'chanpins', 'chanpin'); } if (data.zujians && data.chanpin_zujians) { resolveOneToMany('zujians', 'chanpin_zujians', 'chanpin_zujians'); resolveRef(data.chanpin_zujians, 'zujians', 'zujians', 'zujian'); } if (data.caizhis && data.bancais) { resolveOneToMany('caizhis', 'bancais', 'bancais'); resolveRef(data.bancais, 'caizhis', 'caizhis', 'caizhi'); } if (data.bancais && data.kucuns) { resolveRef(data.bancais, 'kucuns', 'kucuns', 'kucun'); } if (data.kucuns && data.bancais) { resolveRef(data.kucuns, 'bancais', 'bancais', 'bancai'); } if (data.bancais && data.mupis) { resolveRef(data.bancais, 'mupis', 'mupis', 'mupi1'); resolveRef(data.bancais, 'mupis', 'mupis', 'mupi2'); } if (data.dingdan_chanpins && data.chanpins) { resolveRef(data.dingdan_chanpins, 'chanpins', 'chanpins', 'chanpin'); } if (data.dingdan_chanpin_zujians && data.chanpin_zujians) { resolveRef(data.dingdan_chanpin_zujians, 'chanpin_zujians', 'chanpin_zujians', 'chanpin_zujian'); } if (data.dingdan_chanpin_zujians && data.bancais) { resolveRef(data.dingdan_chanpin_zujians, 'bancais', 'bancais', 'bancai'); } if (data.jinhuos) { // 进货 ↔ 相关实体 (多对一) ['dingdans', 'chanpins', 'zujians', 'bancais', 'users'].forEach(entity => { if (data[entity]) { resolveRef(data.jinhuos, entity, entity, entity.slice(0, -1)); } }); } return data; } /** * 数据管理器类,负责与后端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() { 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(); 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 !== 200) 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 - 要发送的数据 后端要求数据格式为{属性: "", 关联对象: {id:0}, 关联对象集: [{id:0}]} * @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 !== 200) 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 < 5000) { setTimeout(() => this.syncData(), 5000 - (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: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); ------------------------ 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 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> ------------------------ 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')); } }); } window.addEventListener('message', (event) => { if (event.data === 'DataManagerReady') { initialize(); } }); // 初始化函数 async function initialize() { try { dataManager = await waitForDataManager(); if (!dataManager || typeof dataManager.fetchAll !== 'function') { throw new Error('无效的 DataManager 实例'); } // 解构需要的方法和属性 // const { addEntity, dataManager.deleteEntity, deleteEntity, fetchAll } = dataManager; // 确保数据已加载 await dataManager.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() || null, // 新增时为空 houdu: parseFloat($('#houdu').val()), // 按照API格式要求设置关联对象 caizhi: { id: parseInt($('#caizhiSelect').val()) }, mupi1: { id: parseInt($('#mupi1Select').val()) }, mupi2: { id: parseInt($('#mupi2Select').val()) } }; try { if (currentMode === 'add') { await dataManager.addEntity('bancai', formData); } else { await dataManager.updateEntity('bancai', formData); } refreshTable(); modal.hide(); } catch (error) { console.error('操作失败:', error); alert('操作失败,请重试'); } }); // 删除板材 async function deleteBancai(id) { if (!confirm('确定要删除此板材吗?')) return; try { // 使用正确的deleteEntity方法 await dataManager.deleteEntity('bancai', { id }); refreshTable(); } catch (error) { console.error('删除失败:', error); alert('删除失败,请重试'); } } // 初始化应用 //initialize(); }); 添加新板材,后端返回成功就创建一个库存数量为0 并刷新列表 之后
06-15
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值