<a href="#" onclick=""> 不能不知道的技巧

本文探讨了在HTML中如何合理地使用超链接与JavaScript事件处理。具体包括如何避免超链接默认行为导致页面滚动的问题,以及如何利用超链接实现特定功能如回复功能等。文章还提供了具体的代码实例。

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

在一个超链接中 可以使用href 和onlick,有时要在A的标记同时使用,在同时使用时,有时让href起作用或者失效,那么如何设计呢?

使用javascript的时候,通常我们会通过类似:
<a href="#" onclick="javascript:方法">提交</a>
的方式,通过一个伪链接来调用javascript方法.

这种方法有一个问题是:
虽然点击该链接的时候不会跳转页面.但是滚动条会往上滚,解决的办法是返回一个false.
如下所示:


<a href="#" onclick="javascript:方法;return false;">提交</a>

有时恰好要利用锚记功能,再比如 给Micolog博客加简单的回复功能所使用的代码

<a href="#commentarea" onclick="return backcomment('{{comment.author}}');">回复</a>

//回复自动输入姓名函数
function backcomment(msg){
backdb=document.getElementById('comment');
backdb.value="@"+msg;
return true;
}

// @ts-nocheck document.addEventListener(&#39;keydown&#39;, function(event) { if (event.key === &#39;Enter&#39;) { event.preventDefault(); // 阻止默认行为 event.stopPropagation(); // 阻止事件冒泡 } }); $(document).ready(function() { // 检查权限 const role = parseInt(localStorage.getItem(&#39;role&#39;) || &#39;0&#39;); if (role <= 1) { // 非管理员用户显示权限警告 contentContainer.innerHTML = ` <div class="permission-warning"> <i class="fas fa-exclamation-triangle"></i> <h2>权限不足</h2> <p>抱歉,您没有访问此页面的权限。只有管理员可以管理用户。</p> <button class="btn btn-primary" onclick="window.location.href=&#39;test.html&#39;">返回首页</button> </div> `; return; } // 获取全局的DataManager实例 const dataManager = window.parent.dataManager; // 初始化页面元素 const $dingdanSelect = $(&#39;#dingdanSelect&#39;); const $chanpinSelect = $(&#39;#chanpinSelect&#39;); const $zujianSelect = $(&#39;#zujianSelect&#39;); const $bancaiInfo = $(&#39;#bancaiInfo&#39;); const $orderQuantityInput = $(&#39;#orderQuantityInput&#39;); const $submitOrderBtn = $(&#39;#submitOrderBtn&#39;); // 新增变量定义 const $bancaiSelect = $(&#39;#bancaiSelect&#39;); const $addBancaiBtn = $(&#39;#addBancaiBtn&#39;); // 定义实体类型常量 const ENTITY_DINGDAN = &#39;dingdan&#39;; const ENTITY_CHANPIN = &#39;chanpin&#39;; const ENTITY_ZUJIAN = &#39;zujian&#39;; const ENTITY_BANCAI = &#39;bancai&#39;; const ENTITY_CAIZHI = &#39;caizhi&#39;; const ENTITY_MUPI = &#39;mupi&#39;; // 存储当前选中的实体ID(使用正确的层级关系) let currentDingdanId = null; // 订单ID let currentDingdanChanpinId = null; // 订单-产品关联ID let currentChanpinZujianId = null; // 产品-组件关联ID // 初始化页面 initPage(); // 初始化页面函数 async function initPage() { // 注册数据更新回调 dataManager.registerCallback(&#39;all&#39;, (operation, entity, data) => { if (operation === &#39;refresh&#39; || operation === &#39;add&#39; || operation === &#39;update&#39; || operation === &#39;delete&#39;) { // 只刷新需要更新的部分 if (entity === ENTITY_DINGDAN) { refreshDingdanList(); } else if (entity === &#39;dingdan_chanpin&#39;) { if (currentDingdanId) { refreshChanpinList(currentDingdanId); } } else if (entity === &#39;chanpin_zujian&#39;) { if (currentDingdanChanpinId) { refreshZujianList(currentDingdanChanpinId); } } } }); // 填充订单下拉框 await refreshDingdanList(); // 填充订单下拉框 await refreshBancaiList(); // 初始化Select2下拉框 initSelect2Dropdowns(); // 绑定事件 bindEvents(); } // 初始化Select2下拉框 function initSelect2Dropdowns() { // 主页面下拉框 $(&#39;#dingdanSelect&#39;).select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择订单&#39;, allowClear: true }); $(&#39;#chanpinSelect&#39;).select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择产品&#39;, allowClear: true, disabled: true }); $(&#39;#zujianSelect&#39;).select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择组件&#39;, allowClear: true, disabled: true }); // 初始化板材下拉框 $bancaiSelect.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择板材&#39;, allowClear: true, }); } // 绑定事件处理函数 function bindEvents() { // 订单选择变化 $dingdanSelect.on(&#39;change&#39;, async function() { currentDingdanId = $(this).val(); if (currentDingdanId) { await refreshChanpinList(currentDingdanId); $(&#39;#chanpinSelect&#39;).prop(&#39;disabled&#39;, false); $(&#39;#addChanpinBtn&#39;).prop(&#39;disabled&#39;, false); $(&#39;#chanpinSelect&#39;).select2(&#39;enable&#39;); // 重置下级选择 $zujianSelect.prop(&#39;disabled&#39;, true).empty(); $zujianSelect.select2(&#39;destroy&#39;); // 销毁旧的Select2实例 $zujianSelect.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择组件&#39;, allowClear: true, disabled: true }); $bancaiInfo.text(&#39;&#39;); $orderQuantityInput.val(&#39;&#39;).prop(&#39;disabled&#39;, true); $submitOrderBtn.prop(&#39;disabled&#39;, true); $(&#39;#addZujianBtn&#39;).prop(&#39;disabled&#39;, true); currentDingdanChanpinId = null; currentChanpinZujianId = null; } else { $chanpinSelect.prop(&#39;disabled&#39;, true).empty(); $chanpinSelect.select2(&#39;enable&#39;, false); $zujianSelect.prop(&#39;disabled&#39;, true).empty(); $zujianSelect.select2(&#39;enable&#39;, false); $bancaiInfo.text(&#39;&#39;); // 重置板材为全部可选 await refreshBancaiList(); $orderQuantityInput.val(&#39;&#39;).prop(&#39;disabled&#39;, true); $submitOrderBtn.prop(&#39;disabled&#39;, true); $(&#39;#addChanpinBtn&#39;).prop(&#39;disabled&#39;, true); $(&#39;#addZujianBtn&#39;).prop(&#39;disabled&#39;, true); currentDingdanChanpinId = null; currentChanpinZujianId = null; checkSubmitCondition() } }); // 产品选择变化(现在选择的是dingdan_chanpin的ID) $chanpinSelect.on(&#39;change&#39;, async function() { currentDingdanChanpinId = $(this).val(); if (currentDingdanChanpinId) { await refreshZujianList(currentDingdanChanpinId); $zujianSelect.prop(&#39;disabled&#39;, false); $(&#39;#addZujianBtn&#39;).prop(&#39;disabled&#39;, false); $zujianSelect.select2(&#39;enable&#39;); // 重置下级选择 $bancaiInfo.text(&#39;&#39;); $orderQuantityInput.val(&#39;&#39;).prop(&#39;disabled&#39;, true); $submitOrderBtn.prop(&#39;disabled&#39;, true); currentChanpinZujianId = null; } else { // 重置板材为全部可选 await refreshBancaiList(); $zujianSelect.prop(&#39;disabled&#39;, true).empty(); $zujianSelect.select2(&#39;enable&#39;, false); $bancaiInfo.text(&#39;&#39;); $orderQuantityInput.val(&#39;&#39;).prop(&#39;disabled&#39;, true); $submitOrderBtn.prop(&#39;disabled&#39;, true); $(&#39;#addZujianBtn&#39;).prop(&#39;disabled&#39;, true); currentChanpinZujianId = null; checkSubmitCondition() } }); // 组件选择事件 $zujianSelect.on(&#39;change&#39;, function() { currentChanpinZujianId = $(this).val(); // 填充板材下拉框 refreshBancaiList(currentChanpinZujianId); checkSubmitCondition() }); // 新增订单按钮 $(&#39;#addDingdanBtn&#39;).on(&#39;click&#39;, function() { showEntityModal(&#39;新增订单&#39;, ENTITY_DINGDAN, null, { number: &#39;&#39;, xiadan: new Date().toISOString().split(&#39;T&#39;)[0], jiaohuo: &#39;&#39; }); }); // 添加产品按钮 $(&#39;#addChanpinBtn&#39;).on(&#39;click&#39;, function() { if (!currentDingdanId) { alert(&#39;请先选择订单&#39;); return; } // 确保产品数据已加载 showEntityModal(&#39;添加产品&#39;, &#39;dingdan_chanpin&#39;, null, { dingdan: { id: parseInt(currentDingdanId) }, chanpin: { id: &#39;&#39; }, shuliang: 1 }); }); // 添加组件按钮 $(&#39;#addZujianBtn&#39;).on(&#39;click&#39;, function() { if (!currentDingdanChanpinId) { alert(&#39;请先选择产品&#39;); return; } // 获取当前选中的产品ID const dingdanChanpin = dataManager.data.dingdan_chanpins.find( dc => dc.id == currentDingdanChanpinId ); if (!dingdanChanpin || !dingdanChanpin.chanpin) { alert(&#39;未找到产品信息&#39;); return; } const chanpinId = dingdanChanpin.chanpin.id; showEntityModal(&#39;添加组件&#39;, &#39;chanpin_zujian&#39;, null, { chanpin: { id: parseInt(chanpinId) }, zujian: { id: &#39;&#39; }, bancai: { id: &#39;&#39; }, one_howmany: 1 }); }); // 新增板材按钮事件 $addBancaiBtn.on(&#39;click&#39;, function() { showCreateEntityModal(&#39;创建新板材&#39;, ENTITY_BANCAI, null, { houdu: 0.0 }, &#39;main&#39;); // 添加来源标识 }); // 提交订单按钮(修复后的逻辑) $submitOrderBtn.on(&#39;click&#39;, async function() { // 获取输入值 const quantity = parseInt($orderQuantityInput.val()); if (!quantity || quantity <= 0) { alert(&#39;请输入有效的订购数量&#39;); return; } // 获取选中的板材ID和文本 const selectedBancaiId = $bancaiSelect.val(); if (!selectedBancaiId) { alert(&#39;请选择板材&#39;); return; } // 获取板材详细信息 const bancai = dataManager.data.bancais.find(b => b.id == selectedBancaiId); if (!bancai) { alert(&#39;未找到选中的板材信息&#39;); return; } // 构建确认信息字符串 let confirmMessage = "您确定要订购以下板材吗?\n\n"; // 添加订单信息(如果存在) if (currentDingdanId) { const dingdan = dataManager.data.dingdans.find(d => d.id == currentDingdanId); if (dingdan) { confirmMessage += `订单: ${dingdan.number}\n`; } } // 添加产品信息(如果存在) if (currentDingdanChanpinId) { const dingdanChanpin = dataManager.data.dingdan_chanpins.find( dc => dc.id == currentDingdanChanpinId ); if (dingdanChanpin && dingdanChanpin.chanpin) { confirmMessage += `产品: ${dingdanChanpin.chanpin.bianhao}\n`; } } // 添加组件信息(如果存在) if (currentChanpinZujianId) { const chanpinZujian = dataManager.data.chanpin_zujians.find( cz => cz.id == currentChanpinZujianId ); if (chanpinZujian && chanpinZujian.zujian) { confirmMessage += `组件: ${chanpinZujian.zujian.name}\n`; } } // 添加板材和数量信息 confirmMessage += `板材: ${formatBancaiInfo(bancai)}\n`; confirmMessage += `数量: ${quantity}张\n\n`; confirmMessage += "确认订购吗?"; // 弹出确认框 if (!confirm(confirmMessage)) { return; // 用户取消操作 } try { // 获取当前选中的板材 const bancai = dataManager.data.bancais.find(b => b.id == selectedBancaiId); if (!bancai) { throw new Error(&#39;未找到选中的板材&#39;); } // 确定订购层级(订单、产品、组件都不是必须的) let dingdanId = currentDingdanId ? parseInt(currentDingdanId) : null; let chanpinId = null; let zujianId = null; // 如果有组件选择 if (currentChanpinZujianId) { const chanpinZujian = dataManager.data.chanpin_zujians.find( cz => cz.id == currentChanpinZujianId ); if (chanpinZujian) { if (chanpinZujian.chanpin) chanpinId = chanpinZujian.chanpin.id; if (chanpinZujian.zujian) zujianId = chanpinZujian.zujian.id; } } // 如果有产品选择(没有组件) else if (currentDingdanChanpinId) { const dingdanChanpin = dataManager.data.dingdan_chanpins.find( dc => dc.id == currentDingdanChanpinId ); if (dingdanChanpin && dingdanChanpin.chanpin) { chanpinId = dingdanChanpin.chanpin.id; } } // 检查是否已存在相同的订购记录 const existingOrder = dataManager.data.dingdan_bancais.find( db => (db.dingdan ? db.dingdan.id == dingdanId : !dingdanId) && (db.chanpin ? db.chanpin.id == chanpinId : !chanpinId) && (db.zujian ? db.zujian.id == zujianId : !zujianId) && db.bancai.id == selectedBancaiId ); if (existingOrder) { // 更新现有记录 await dataManager.updateEntity(&#39;dingdan_bancai&#39;, { id: existingOrder.id, shuliang: quantity+existingOrder.shuliang }); } else { // 创建新记录 await dataManager.addEntity(&#39;dingdan_bancai&#39;, { dingdan: dingdanId ? { id: dingdanId } : null, chanpin: chanpinId ? { id: parseInt(chanpinId) } : null, zujian: zujianId ? { id: parseInt(zujianId) } : null, bancai: { id: parseInt(selectedBancaiId) }, shuliang: quantity }); } // 更新库存 const existingban = dataManager.data.kucuns.find( k => k.bancai && k.bancai.id == selectedBancaiId ); if(existingban) { await dataManager.updateEntity(&#39;kucun&#39;, { id: existingban.id, shuliang: quantity + existingban.shuliang }); } else { await dataManager.addEntity("kucun", { bancai: { id: selectedBancaiId }, shuliang: quantity }); } alert(&#39;订购成功!&#39;); resetForm(); } catch (error) { console.error(&#39;订购失败:&#39;, error); alert(`订购失败: ${error.message}`); } }); // 模态框保存按钮 $(&#39;#saveEntityBtn&#39;).on(&#39;click&#39;, saveEntity); // 新建实体按钮(在创建实体模态框中) $(&#39;#saveNewEntityBtn&#39;).on(&#39;click&#39;, saveNewEntity); // 绑定板材选择和数量输入事件 $bancaiSelect.on(&#39;change&#39;, checkSubmitCondition); $orderQuantityInput.on(&#39;input&#39;, checkSubmitCondition); } // 新增函数:检查提交条件 function checkSubmitCondition() { const selectedBancaiId = $bancaiSelect.val(); const quantity = parseInt($orderQuantityInput.val()); if(selectedBancaiId) $orderQuantityInput.prop(&#39;disabled&#39;, false); // 只需板材选择和数量有效即可提交 if (selectedBancaiId && quantity > 0) { $submitOrderBtn.prop(&#39;disabled&#39;, false); } else { $submitOrderBtn.prop(&#39;disabled&#39;, true); } } // 创建进货记录函数(使用正确的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(&#39;jinhuo&#39;, jinhuoData); } // 修改重置表单函数 function resetForm() { $orderQuantityInput.val(&#39;&#39;); $bancaiSelect.val(&#39;&#39;).trigger(&#39;change&#39;); $submitOrderBtn.prop(&#39;disabled&#39;, true); } // 刷新订单列表 async function refreshDingdanList() { const currentValue = $dingdanSelect.val(); $dingdanSelect.empty().append(&#39;<option value="">请选择订单</option>&#39;); // 获取所有订单 const dingdans = dataManager.data.dingdans || []; // 按下单日期降序排序 dingdans.sort((a, b) => new Date(b.xiadan) - new Date(a.xiadan)); // 填充下拉框 dingdans.forEach(dingdan => { const option = $(&#39;<option>&#39;) .val(dingdan.id) .text(`${dingdan.number} (${formatDate(dingdan.xiadan)})`); $dingdanSelect.append(option); }); // 恢复之前的选择 if (currentValue) { $dingdanSelect.val(currentValue); } // 刷新后重新初始化Select2 $dingdanSelect.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择订单&#39;, allowClear: true }); } // 刷新产品列表(基于订单) async function refreshChanpinList(dingdanId,chanpinId) { const currentValue = $chanpinSelect.val(); $chanpinSelect.empty().append(&#39;<option value="">请选择产品</option>&#39;); // 获取订单对应的产品(dingdan_chanpin) const dingdanChanpins = dataManager.data.dingdan_chanpins || []; const relatedChanpins = dingdanChanpins.filter(dc => dc.dingdan && dc.dingdan.id == dingdanId ); var dingdanChanpinId; relatedChanpins.forEach(dc => { if(dc.chanpin?.id==chanpinId){ dingdanChanpinId=dc.id } }) // 填充下拉框 relatedChanpins.forEach(dc => { if (dc.chanpin) { const option = $(&#39;<option>&#39;) .val(dc.id) // 使用dingdan_chanpin的ID .text(`${dc.chanpin.bianhao} (数量: ${dc.shuliang})`); $chanpinSelect.append(option); } }); // 恢复之前的选择 if (currentValue) { $chanpinSelect.val(currentValue); } if(dingdanChanpinId){ $chanpinSelect.val(dingdanChanpinId); } // 刷新后重新初始化Select2 $chanpinSelect.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择产品&#39;, allowClear: true }).prop(&#39;disabled&#39;, false); $chanpinSelect.trigger(&#39;change&#39;); } // 刷新组件列表(基于产品)- 修复后的逻辑 async function refreshZujianList(dingdanChanpinId,zujianId) { const currentValue = $zujianSelect.val(); $zujianSelect.empty().append(&#39;<option value="">请选择组件</option>&#39;); // 获取当前选中的订单-产品关联 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 ); var chanpinZujianId; chanpinZujians.forEach(dc => { if(dc.zujian?.id==zujianId){ chanpinZujianId=dc.id } }) // 填充下拉框 chanpinZujians.forEach(cz => { if (cz.zujian) { const option = $(&#39;<option>&#39;) .val(cz.id) // 使用chanpin_zujian的ID .text(`${cz.zujian.name} (产量: ${cz.one_howmany})`); $zujianSelect.append(option); } }); // 恢复之前的选择 if (currentValue) { $zujianSelect.val(currentValue); } if(chanpinZujianId){ $zujianSelect.val(chanpinZujianId); } // 刷新后重新初始化Select2 $zujianSelect.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择组件&#39;, allowClear: true }).prop(&#39;disabled&#39;, false); $zujianSelect.trigger(&#39;change&#39;); } async function refreshBancaiList(chanpinZujianId,bancaiId) { const currentValue = $bancaiSelect.val(); $bancaiSelect.empty().append(&#39;<option value="">请选择板材</option>&#39;); if (chanpinZujianId) { // 根据组件ID加载关联板材 const chanpinZujian = dataManager.data.chanpin_zujians.find( cz => cz.id == chanpinZujianId ); if (!chanpinZujian || !chanpinZujian.bancai) { return; } const bancai = chanpinZujian.bancai; const option = $(&#39;<option>&#39;) .val(bancai.id) .text(formatBancaiInfo(bancai)); $bancaiSelect.append(option); $bancaiSelect.val(bancai.id).trigger(&#39;change&#39;); $bancaiSelect.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择板材&#39;, allowClear: true }).prop(&#39;disabled&#39;, true); $bancaiSelect.prop(&#39;disabled&#39;, true); $addBancaiBtn.prop(&#39;disabled&#39;, true); $orderQuantityInput.prop(&#39;disabled&#39;, false); // 检查提交条件 checkSubmitCondition(); } else { // 加载所有板材 const bancais = dataManager.data.bancais || []; bancais.forEach(bancai => { const option = $(&#39;<option>&#39;) .val(bancai.id) .text(formatBancaiInfo(bancai)); $bancaiSelect.append(option); }); $addBancaiBtn.prop(&#39;disabled&#39;, false); if (bancaiId) { $bancaiSelect.val(bancaiId).trigger(&#39;change&#39;); } $bancaiSelect.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择板材&#39;, allowClear: true }).prop(&#39;disabled&#39;, false); } } // 新增函数:格式化板材信息 function formatBancaiInfo(bancai) { let info = `厚度: ${bancai.houdu}mm, 材质: `; if (bancai.caizhi) { info += bancai.caizhi.name; } if (bancai.mupi1) { info += `, 木皮1: ${bancai.mupi1.name}${bancai.mupi1.you ? &#39; (油)&#39; : &#39;&#39;}`; } if (bancai.mupi2) { info += `, 木皮2: ${bancai.mupi2.name}${bancai.mupi2.you ? &#39; (油)&#39; : &#39;&#39;}`; } return info; } // 显示实体模态框(添加产品/组件) function showEntityModal(title, entityType, entityId, initialData,source="component") { $(&#39;#modalTitle&#39;).text(title); const $formFields = $(&#39;#formFields&#39;); $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 || &#39;&#39;}" required> </div> <div class="form-group"> <label>下单日期</label> <input type="date" class="form-control" name="xiadan" value="${initialData.xiadan || &#39;&#39;}" required> </div> <div class="form-group"> <label>交货日期</label> <input type="date" class="form-control" name="jiaohuo" value="${initialData.jiaohuo || &#39;&#39;}"> </div> `); break; case &#39;dingdan_chanpin&#39;: // 订单产品 const chanpins = dataManager.data.chanpins || []; let chanpinOptions = &#39;<option value="">选择产品</option>&#39;; chanpinOptions += &#39;<option value="new">+ 创建新产品</option>&#39;; if (chanpins.length > 0) { chanpins.forEach(cp => { chanpinOptions += ` <option value="${cp.id}" ${initialData.chanpin.id == cp.id ? &#39;selected&#39; : &#39;&#39;}> ${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}"> `); // 添加新建产品按钮事件 $(&#39;#createChanpinBtn&#39;).on(&#39;click&#39;, function() { showCreateEntityModal(&#39;创建新产品&#39;, ENTITY_CHANPIN, null, { bianhao: &#39;&#39;, name: &#39;&#39; }); }); // 产品选择变化 $(&#39;#chanpinSelectModal&#39;).on(&#39;change&#39;, function() { if ($(this).val() === &#39;new&#39;) { showCreateEntityModal(&#39;创建新产品&#39;, ENTITY_CHANPIN, null, { bianhao: &#39;&#39;, }); $(this).val(&#39;&#39;); // 重置选择 } }); break; case &#39;chanpin_zujian&#39;: // 产品组件 const zujians = dataManager.data.zujians || []; const bancais = dataManager.data.bancais || []; let zujianOptions = &#39;<option value="">选择组件</option>&#39;; zujianOptions += &#39;<option value="new">+ 创建新组件</option>&#39;; let bancaiOptions = &#39;<option value="">选择板材</option>&#39;; bancaiOptions += &#39;<option value="new">+ 创建新板材</option>&#39;; if (zujians.length > 0) { zujians.forEach(zj => { zujianOptions += ` <option value="${zj.id}" ${initialData.zujian.id == zj.id ? &#39;selected&#39; : &#39;&#39;}> ${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 ? &#39;selected&#39; : &#39;&#39;}> ${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}"> `); // 添加新建按钮事件 $(&#39;#createZujianBtn&#39;).on(&#39;click&#39;, function() { showCreateEntityModal(&#39;创建新组件&#39;, ENTITY_ZUJIAN, null, { name: &#39;&#39; }); }); $(&#39;#createBancaiBtn&#39;).on(&#39;click&#39;, function() { showCreateEntityModal(&#39;创建新板材&#39;, ENTITY_BANCAI, null, { houdu: 0.0 }, &#39;component&#39;); // 添加来源标识 }); // 组件选择变化 $(&#39;#zujianSelectModal&#39;).on(&#39;change&#39;, function() { if ($(this).val() === &#39;new&#39;) { showCreateEntityModal(&#39;创建新组件&#39;, ENTITY_ZUJIAN, null, { name: &#39;&#39; }); $(this).val(&#39;&#39;); // 重置选择 } }); // 板材选择变化 $(&#39;#bancaiSelectModal&#39;).on(&#39;change&#39;, function() { if ($(this).val() === &#39;new&#39;) { showCreateEntityModal(&#39;创建新板材&#39;, ENTITY_BANCAI, null, { houdu: 0.0 }); $(this).val(&#39;&#39;); // 重置选择 } }); break; } // 显示模态框 $(&#39;#entityModal&#39;).modal(&#39;show&#39;); // 模态框显示后初始化Select2 $(&#39;#entityModal&#39;).on(&#39;shown.bs.modal&#39;, function() { // 产品模态框 if (entityType === &#39;dingdan_chanpin&#39;) { $(&#39;#chanpinSelectModal&#39;).select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;选择产品或创建新产品&#39;, allowClear: true, width: &#39;100%&#39; }); } // 组件模态框 if (entityType === &#39;chanpin_zujian&#39;) { $(&#39;#zujianSelectModal&#39;).select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;选择组件或创建新组件&#39;, allowClear: true, width: &#39;100%&#39; }); $(&#39;#bancaiSelectModal&#39;).select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;选择板材或创建新板材&#39;, allowClear: true, width: &#39;100%&#39; }); } }); alert // 模态框关闭时只销毁当前模态框内的Select2 $(&#39;#entityModal&#39;).on(&#39;hidden.bs.modal&#39;, function() { $(this).find(&#39;.select2-container&#39;).remove(); }); // 存储当前操作的实体信息 $(&#39;#entityModal&#39;).data(&#39;entity&#39;, { type: entityType, id: entityId }); } // 显示创建实体模态框(新产品/新组件/新板材) function showCreateEntityModal(title, entityType, entityId, initialData) { $(&#39;#createEntityModalTitle&#39;).text(title); const $formFields = $(&#39;#createEntityFields&#39;); $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 || &#39;&#39;}" 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 || &#39;&#39;}" required> </div> `); break; case ENTITY_BANCAI: // 新板材 const caizhis = dataManager.data.caizhis || []; const mupis = dataManager.data.mupis || []; let caizhiOptions = &#39;<option value="">选择材质</option>&#39;; let mupi1Options = &#39;<option value="">选择木皮1</option>&#39;; let mupi2Options = &#39;<option value="">选择木皮2</option>&#39;; 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 ? &#39; (油)&#39; : &#39;&#39;}</option>`; mupi2Options += `<option value="${mp.id}">${mp.name}${mp.you ? &#39; (油)&#39; : &#39;&#39;}</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> `); // 添加新建材质按钮事件 $(&#39;#createCaizhiBtn&#39;).on(&#39;click&#39;, function() { showCreateEntityModal(&#39;创建新材质&#39;, ENTITY_CAIZHI, null, { name: &#39;&#39; }); }); // 添加新建木皮按钮事件 $(&#39;#createMupiBtn, #createMupiBtn2&#39;).on(&#39;click&#39;, function() { showCreateEntityModal(&#39;创建新木皮&#39;, ENTITY_MUPI, null, { name: &#39;&#39;, 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 || &#39;&#39;}" 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 || &#39;&#39;}" required> </div> <div class="form-group"> <label> <input type="checkbox" name="you" ${initialData.you ? &#39;checked&#39; : &#39;&#39;}> 是否有油漆 </label> </div> `); break; } // 显示模态框 $(&#39;#createEntityModal&#39;).modal(&#39;show&#39;); // 模态框显示后初始化Select2 $(&#39;#createEntityModal&#39;).on(&#39;shown.bs.modal&#39;, function() { if (entityType === ENTITY_BANCAI) { $(&#39;select[name="caizhi"], select[name="mupi1"], select[name="mupi2"]&#39;).select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择&#39;, allowClear: true, width: &#39;100%&#39; }); } }); // 模态框关闭时只销毁当前模态框内的Select2 $(&#39;#entityModal&#39;).on(&#39;hidden.bs.modal&#39;, function() { $(this).find(&#39;.select2-container&#39;).remove(); }); // 存储当前操作的实体信息 $(&#39;#createEntityModal&#39;).data(&#39;entity&#39;, { type: entityType, id: entityId }); $(&#39;#createEntityModal&#39;).data(&#39;source&#39;, source); } // 保存实体(在添加产品/组件模态框中) async function saveEntity() { const $saveBtn = $(&#39;#saveEntityBtn&#39;); const originalText = $saveBtn.text(); try { // 显示加载状态 $saveBtn.prop(&#39;disabled&#39;, true).html(&#39;<i class="fa fa-spinner fa-spin"></i> 保存中...&#39;); const entityInfo = $(&#39;#entityModal&#39;).data(&#39;entity&#39;); const formData = getFormData(&#39;#entityForm&#39;); 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) { $(&#39;#entityModal&#39;).modal(&#39;hide&#39;); // 根据操作类型刷新对应的下拉列表 switch (entityInfo.type) { case ENTITY_DINGDAN: await refreshDingdanList(); break; case &#39;dingdan_chanpin&#39;: if (formData.dingdan && formData.dingdan.id) { await refreshChanpinList(formData.dingdan.id,result.data.chanpin.id); } break; case &#39;chanpin_zujian&#39;: if (formData.chanpin && formData.chanpin.id) { await refreshZujianList(formData.chanpin.id,result.data.zujian.id); } break; } } else { alert(`保存失败: ${result.text}`); } } catch (error) { console.error(&#39;保存实体时出错:&#39;, error); alert(`保存失败: ${error.message}`); } finally { // 恢复按钮状态 $saveBtn.prop(&#39;disabled&#39;, false).text(originalText); } } // 保存新实体(在创建实体模态框中) async function saveNewEntity() { const $saveBtn = $(&#39;#saveNewEntityBtn&#39;); const originalText = $saveBtn.text(); try { // 显示加载状态 $saveBtn.prop(&#39;disabled&#39;, true).html(&#39;<i class="fa fa-spinner fa-spin"></i> 保存中...&#39;); const entityInfo = $(&#39;#createEntityModal&#39;).data(&#39;entity&#39;); const formData = getFormData(&#39;#createEntityForm&#39;); // 新增实体 const result = await dataManager.addEntity(entityInfo.type, formData); if (result.status === 200) { $(&#39;#createEntityModal&#39;).modal(&#39;hide&#39;); const source = $(&#39;#createEntityModal&#39;).data(&#39;source&#39;); // 根据来源处理不同逻辑 switch (source) { case &#39;main&#39;: // 主页面创建的板材,刷新主页面下拉框 refreshBancaiList(null, result.data.id); break; case &#39;component&#39;: // 组件模态框中创建的板材,刷新父模态框 refreshParentDropdown(entityInfo.type, result.data); break; } } else { alert(`创建失败: ${result.text}`); } } catch (error) { console.error(&#39;创建实体时出错:&#39;, error); alert(`创建失败: ${error.message}`); } finally { // 恢复按钮状态 $saveBtn.prop(&#39;disabled&#39;, false).text(originalText); } } // 刷新父模态框中的下拉框 function refreshParentDropdown(entityType, newEntity) { // 获取父模态框中的相关下拉框 const $parentModal = $(&#39;#entityModal&#39;); if (!$parentModal.is(&#39;:visible&#39;)) return; const parentEntityType = $parentModal.data(&#39;entity&#39;).type; // 根据实体类型刷新对应的下拉框 if (parentEntityType === &#39;dingdan_chanpin&#39; && entityType === ENTITY_CHANPIN) { // 刷新产品下拉框 const $select = $(&#39;#chanpinSelectModal&#39;); $select.append(`<option value="${newEntity.id}" selected>${newEntity.bianhao}</option>`); $select.select2(&#39;destroy&#39;); $select.val(newEntity.id).trigger(&#39;change&#39;); $select.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;选择产品或创建新产品&#39;, allowClear: true, width: &#39;100%&#39; }); } else if (parentEntityType === &#39;chanpin_zujian&#39;) { if (entityType === ENTITY_ZUJIAN) { // 刷新组件下拉框 const $select = $(&#39;#zujianSelectModal&#39;); $select.append(`<option value="${newEntity.id}" selected>${newEntity.bianhao}</option>`); $select.select2(&#39;destroy&#39;); $select.val(newEntity.id).trigger(&#39;change&#39;); $select.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;选择组件或创建新组件&#39;, allowClear: true, width: &#39;100%&#39; }); } else if (entityType === ENTITY_BANCAI) { // 刷新板材下拉框 const $select = $(&#39;#bancaiSelectModal&#39;); $select.append(`<option value="${newEntity.id}" selected>${formatBancaiInfo(newEntity)}</option>`); $select.select2(&#39;destroy&#39;); $select.val(newEntity.id).trigger(&#39;change&#39;); $select.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;选择板材或创建新板材&#39;, allowClear: true, width: &#39;100%&#39; }); } else if (entityType === ENTITY_CAIZHI) { // 刷新材质下拉框(在板材创建中) const $select = $parentModal.find(&#39;select[name="caizhi"]&#39;); $select.append(`<option value="${newEntityId}" selected>${newEntity.name}</option>`); $select.select2(&#39;destroy&#39;); $select.val(newEntity.id).trigger(&#39;change&#39;); $select.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择&#39;, allowClear: true, width: &#39;100%&#39; }); } else if (entityType === ENTITY_MUPI) { // 刷新木皮下拉框(在板材创建中) const $select = $parentModal.find(&#39;select[name="mupi1"], select[name="mupi2"]&#39;); $select.append(`<option value="${newEntity.id}" selected>${newEntity.name+newEntity.you?"(油)":""}</option>`); $select.select2(&#39;destroy&#39;); $select.val(newEntity.id).trigger(&#39;change&#39;); $select.select2({ theme: &#39;bootstrap&#39;, placeholder: &#39;请选择&#39;, allowClear: true, width: &#39;100%&#39; }); } } } // 获取表单数据 function getFormData(selector) { const formData = {}; $(`${selector} :input`).each(function() { const $input = $(this); const name = $input.attr(&#39;name&#39;); const type = $input.attr(&#39;type&#39;); if (name) { if (type === &#39;checkbox&#39;) { formData[name] = $input.prop(&#39;checked&#39;); } else if (type === &#39;radio&#39;) { if ($input.prop(&#39;checked&#39;)) { formData[name] = $input.val(); } } else { // 处理关联对象 if (name === &#39;chanpin&#39; || name === &#39;zujian&#39; || name === &#39;bancai&#39; || name === &#39;dingdan&#39; || name === &#39;caizhi&#39; || name === &#39;mupi1&#39; || name === &#39;mupi2&#39;) { formData[name] = { id: parseInt($input.val()) }; } else if (name === &#39;one_howmany&#39; || name === &#39;houdu&#39;) { formData[name] = parseFloat($input.val()); } else if (name === &#39;shuliang&#39;) { formData[name] = parseInt($input.val()); } else { formData[name] = $input.val(); } } } }); return formData; } // 日期格式化辅助函数 function formatDate(dateString) { if (!dateString) return &#39;&#39;; const date = new Date(dateString); return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, &#39;0&#39;)}-${date.getDate().toString().padStart(2, &#39;0&#39;)}`; } }); 创建板材弹窗不出来
最新发布
07-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值