Ajax动态加载<td><select>后下拉框默认选中问题

本文介绍了如何在使用Ajax动态加载表格数据后,确保<select>元素中的选项能根据数据正确设置为默认选中状态。通过jQuery选择器找到最后一个<tr>元素中的<select>,并对比选项值与数据中的值,设置选中状态。
$.each(data.result,function(i,emp){
                    s='<tr onMouseOut="out(this)" onMouseOver=over(this)>'+
                        '<td>'+emp.employeeName+'</td>'+
                        '<td>'+emp.employTime+'</td>'+
                        '<td>'+emp.organization.organizationName+'</td>'+
                        '<td>'+emp.position+'</td>'+
                        '<td><select id="mySelect">'+
                        '<option value=3>通过</option>'+
                        '<option value=4>入职</option></select></td>'+
                        '<td>'+
                            '<div class="hidden-sm hidden-xs action-buttons">'+
                               ' <a class="blue" onclick=browse(\"'+emp.employeeId+'\")>'+
                                   ' <i class="ace-icon fa fa-search-plus bigger-130"></i>'+
                                '</a>'+

                                ' <a class="green" onclick=update(\"'+emp.employeeId+'\")>'+
                                    '<i class="ace-icon fa fa-pencil bigger-130"></i>'+
                               ' </a>'+

                               ' <a class="red" onclick=del(\"'+emp.employeeId+'\")>'+
                                   ' <i class="ace-icon fa fa-trash-o bigger-130"></i>'+
                               ' </a>'+
                           ' </div>'+
                       ' </td>'+
                    '</tr>';
                    $("#tb").append(s);
                    $("tr:last").find("#mySelect option[value='"+emp.employeeState+"']").attr("selected",true);

                });

  $("tr:last").find("#mySelect option[value='"+emp.employeeState+"']").attr("selected",true); 

每次得到表格的最后一行的下拉框$("tr:last").find("#mySelect option[value='"+emp.employeeState+"']"),比对值相等就选中

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/tags/inc.jsp"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <base href="${ctx }/"></base> <meta http-equiv="X-UA-Compatible" content="IE=8"></meta> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta> <meta http-equiv="pragma" content="no-cache"></meta> <meta http-equiv="cache-control" content="no-cache"></meta> <meta http-equiv="expires" content="0"></meta> <title>非车险承保业务清单</title> <%@ include file="/WEB-INF/tags/css.jsp"%> <%@ include file="/WEB-INF/tags/script.jsp"%> <%@ include file="/WEB-INF/tags/artDialog.jsp"%> <link rel="stylesheet" href="static/rFCUnderLA/rFCUnderLA_list.css"> <!-- 设置导航地址 --> <script type="text/javascript"> $("#locSpan", window.parent.document).html("${dq}"); </script> </head> <body> <div class="impaction"> <div class="institutions"> <form id="form" method="POST"> <input type="hidden" name="dq" value="${dq}"> <table class="form_table"> <tr> <td class="search_title">机构:</td> <td><input id="company" name="company" class="search_input"></input></td> <td class="search_title">产品:</td> <td><input id="risk" name="risk" class="search_input"></input></td> <td class="search_title">核保通过时间:</td> <td> <input id="underdateStart" name="underdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.underdateStart}"></input> ~ <input id="underdateEnd" name="underdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.underdateEnd}"></input> </td> </tr> <tr> <td class="search_title">保单类型:</td> <td><input id="policytype" name="policytype" class="search_input"></input></td> <td class="search_title">业务来源:</td> <td><input id="source" name="source" class="search_input"></input></td> <td class="search_title">起保日期:</td> <td> <input id="startdateStart" name="startdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.startdateStart}"></input> ~ <input id="startdateEnd" name="startdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.startdateEnd}"></input> </td> </tr> <tr> <td class="search_title">渠道:</td> <td><input id="channel" name="channel" class="search_input"></input></td> <td class="search_title">业务团队:</td> <td><input id="team" name="team" class="search_input"></input></td> <td class="search_title">核保日期与生效日期大者:</td> <td> <input id="maxdateStart" name="maxdateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.maxdateStart}"></input> ~ <input id="maxdateEnd" name="maxdateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.maxdateEnd}"></input> </td> </tr> <tr> <td class="search_title">创新业务标识:</td> <td><input id="surveyind" name="surveyind" class="search_input"></input></td> <td class="search_title">股东业务标识:</td> <td><input id="isshareholder" name="isshareholder" class="search_input"></input></td> <td class="search_title">保险止期:</td> <td> <input id="enddateStart" name="enddateStart" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.enddateStart}"></input> ~ <input id="enddateEnd" name="enddateEnd" type="text" class="easyui-datebox search_input" data-options="editable:true" value="${params.enddateEnd}"></input> </td> </tr> <tr> <td class="search_title">业务员代码:</td> <td><input id="handler1code" name="handler1code" class="easyui-textbox search_input" value="${params.handler1code }"></input></td> <td class="search_title">业务员名称:</td> <td><input id="handler1name" name="handler1name" class="easyui-textbox search_input" value="${params.handler1name }"></input></td> <td class="search_title">保险金额:</td> <td> <input id="sumamountStart" name="sumamountStart" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumamountStart}"></input> ~ <input id="sumamountEnd" name="sumamountEnd" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumamountEnd}"></input> </td> </tr> <tr> <td class="search_title">代理人代码:</td> <td><input id="intermediarycode" name="intermediarycode" class="easyui-textbox search_input" value="${params.intermediarycode }"></input></td> <td class="search_title">代理人名称:</td> <td><input id="intermediaryname" name="intermediaryname" class="easyui-textbox search_input" value="${params.intermediaryname }"></input></td> <td class="search_title">保费收入:</td> <td> <input id="sumpremStart" name="sumpremStart" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumpremStart}"></input> ~ <input id="sumpremEnd" name="sumpremEnd" type="text" class="easyui-numberbox search_input" data-options="precision:2" value="${params.sumpremEnd}"></input> </td> </tr> <tr> <td class="search_title">号牌号码:</td> <td><input id="fieldaf" name="fieldaf" class="easyui-textbox search_input" value="${params.fieldaf }"></input></td> <td class="search_title">默认列表:</td> <td><input id="dim" name="dim" class="search_input"></input></td> <td class="search_title">自选列表:</td> <td><input id="val" name="val" class="search_input"></input></td> </tr> <tr> <td class="search_title">客户类型:</td> <td><input id="aInsuredTypeName" name="aInsuredTypeName" class="search_input" /></td> </tr> <tr> <td><input id="searchInput" type="button" class="inquiry fl marg12" value="查询" onclick="searchTable()"></input></td> <td> <input id="downloadInput" type="button" class="inquiry fl marg12" value="下载" onclick="downloadTable()"></input> <input id="inputSum" name="inputSum" type="text"></input> </td> </tr> </table> </form> <script type="text/javascript"> $('#aInsuredTypeName').combobox({ valueField: 'id', textField: 'text', data : [{"id":"","text":"全选"},{"id":"个人","text":"个人"},{"id":"团体","text":"团体"}], multiple : false, editable : false, prompt : "全部交易", onShowPanel : function() { $('.tree-file').remove(); }, onLoadSuccess : function() { if ('${params.aInsuredTypeName}') { $("#aInsuredTypeName").combobox("setValue", '${params.aInsuredTypeName}'); } }, }); <%--$('#aInsuredTypeName').combobox({--%> <%-- valueField: 'id',--%> <%-- textField: 'text',--%> <%-- data : [{"id":"","text":"全选"},{"id":"个人","text":"个人"},{"id":"团体","text":"团体"}],--%> <%-- editable : false,--%> <%-- multiple : false,--%> <%-- prompt : "请选择",--%> <%-- onLoadSuccess : function(){--%> <%-- $('#aInsuredTypeName').combobox('clear');--%> <%-- if('${params.aInsuredTypeName}'){--%> <%-- $('#aInsuredTypeName').combobox('setValue', '${params.aInsuredTypeName}');--%> <%-- }--%> <%-- }--%> <%--});--%> </script> <script type="text/javascript"> $('#company').combotree({ data : JSON.parse('${companys}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#risk').combotree({ data : JSON.parse('${risks}'), panelHeight : '400px', lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#policytype').combobox({ valueField: 'id', textField: 'text', data : [{"id":"N","text":"最新保单"},{"id":"O","text":"原始保单"},{"id":"E","text":"原始保单+批单"}], editable : false, multiple : false, prompt : "请选择", onLoadSuccess : function(){ if('${params.policytype}'){ $('#policytype').combobox('setValue', '${params.policytype}'); } } }); </script> <script type="text/javascript"> $('#source').combotree({ data : JSON.parse('${sources}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#channel').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${channels}'), editable : true, multiple : true, prompt : "请选择", onLoadSuccess : function(){ if('${params.channel}'){ $('#channel').combotree('setValues', '${params.channel}'.split(',')); } }, onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#team').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${teams}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#surveyind').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${surveyinds}'), lines : true, editable : true, multiple : true, prompt : "请选择", onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#isshareholder').combotree({ valueField: 'id', textField: 'text', data : JSON.parse('${isshareholders}'), editable : true, multiple : true, prompt : "请选择", onLoadSuccess : function(){ if('${params.isshareholder}'){ $('#isshareholder').combotree('setValues', '${params.isshareholder}'.split(',')); } }, onShowPanel : function() { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#dim').combotree({ valueField: 'id', textField: 'text', data: JSON.parse('${dims}'), editable: true, multiple: true, prompt: "请选择", onLoadSuccess: function () { if ('${params.dim}') { $('#dim').combotree('setValues', '${params.dim}'.split(',')); } }, onShowPanel: function () { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> <script type="text/javascript"> $('#val').combotree({ valueField: 'id', textField: 'text', data: JSON.parse('${vals}'), editable: true, multiple: true, prompt: "请选择", onLoadSuccess: function () { if ('${params.val}') { $('#val').combotree('setValues', '${params.val}'.split(',')); } }, onShowPanel: function () { $('.tree-folder').remove(); $('.tree-file').remove(); } }); </script> </div> <div class="physical"> <c:if test="${not empty dimNodesList and dimNodesList != null}"> <table class="datalist"> <tr class="titlehead"> <c:forEach items="${dimNodesList }" var="var"> <c:choose> <c:when test="${var.text == '清单总数'}"> <c:if test="${params.deptid == '0111'}"> <th>清单总数</th> </c:if> </c:when> <c:when test="${var.text == '批单号' && (params.policytype == 'O' || params.policytype == 'N') }"> </c:when> <c:otherwise> <th>${var.text}</th> </c:otherwise> </c:choose> </c:forEach> </tr> <c:forEach items="${rFCUnderLAs}" var="var"> <tr> <c:forEach items="${dimNodesList}" var="var2"> <c:choose> <c:when test="${fn:indexOf(var2.type, 'Val') != -1}"> <c:choose> <c:when test="${var2.id == 'coinsrate' || var2.id == 'commissionratio' || var2.id == 'fsh' || var2.id == 'personalkpiratio' || var2.id == 'commissionpersonalkpiratio' || var2.id == 'reinssharerate' || var2.id == 'coinsissuerate'|| var2.id == 'damageFee'|| var2.id == 'otherPrevention'|| var2.id == 'MARKET_ACQUISITION_COST_RATE'}"> <td class="tdright"><fmt:formatNumber pattern=",##0.00%" value="${var[var2.id] }" /></td> </c:when> <c:when test="${var2.id == 'num'}"> <c:if test="${params.deptid == '0111'}"> <td class="tdright"><fmt:formatNumber pattern=",##0" value="${var[var2.id] }" /></td> </c:if> </c:when> <c:when test="${var2.id == 'installmentno'}"> <td class="tdright"><fmt:formatNumber pattern=",##0" value="${var[var2.id] }" /></td> </c:when> <c:otherwise> <td class="tdright"><fmt:formatNumber pattern=",##0.00" value="${var[var2.id]}" /></td> </c:otherwise> </c:choose> </c:when> <c:when test="${var2.id == 'endorseqno' && (params.policytype == 'O' || params.policytype == 'N') }"> </c:when> <c:otherwise> <td>${var[var2.id]}</td> </c:otherwise> </c:choose> </c:forEach> </tr> </c:forEach> </table> <div id="page" class="easyui-pagination" data-options=" total: ${page.totalResult }, pageNumber:${page.currentPage }, pageSize:${page.showCount }, layout:['list','first','prev','sep','links','sep','next','last','manual'], onSelectPage: function(pageNumber, pageSize){ searchPage(pageNumber, pageSize) }"></div> </c:if> </div> </div> <script type="text/javascript"> function searchTable() { if ($("#dim").combotree("getText") == "" ) { alert("默认列表至少要勾选其中一个值!"); } else { $("#form").attr("action", "${ctx}/rFCUnderLA/list?menuid=${menuid}").submit(); } } </script> <script type="text/javascript"> function searchPage(pageNumber, pageSize) { $("#form").attr( "action", "${ctx}/rFCUnderLA/list?menuid=${menuid}&pageNo=" + pageNumber + "&pageSize=" + pageSize).submit(); } </script> <script type="text/javascript"> //下载 function downloadTable(){ if ("${page.totalResult }" == "") { $("#downloadInput").css("background-color", "gray"); alert("请先查询再下载!"); } else if (parseInt("${page.totalResult }") > 1000000) { $("#downloadInput").css("background-color","gray"); alert("数据记录超过100万,无法下载,请筛选后再重试!"); } else if ($("#dim").combotree("getText") == "") { alert("维度列表或指标列表至少要勾选其中一个值!"); } else { var m = confirm("你确认要进行下载吗?"); if (m == true) { alert("文件正在制作中,请到下载专区下载!"); var underdate = "核保通过时间:"+$("#underdateStart").datebox("getText")+"~"+$("#underdateEnd").datebox("getText")+";\\n"; var startdate = "起保日期:"+$("#startdateStart").datebox("getText")+"~"+$("#startdateEnd").datebox("getText")+";\\n"; var maxdate = "核保日期与生效日期大者:"+$("#maxdateStart").datebox("getText")+"~"+$("#maxdateEnd").datebox("getText")+";\\n"; var enddate = "保险止期:"+$("#enddateStart").datebox("getText")+"~"+$("#enddateEnd").datebox("getText")+";\\n"; var sumamount = "保险金额:"+$("#sumamountStart").textbox("getText")+"~"+$("#sumamountEnd").textbox("getText")+";\\n"; var sumprem = "保费收入:"+$("#sumpremStart").textbox("getText")+"~"+$("#sumpremEnd").textbox("getText")+";\\n"; var company = "机构:"+($("#company").combotree("getText")?$("#company").combotree("getText"):"请选择")+";\\n"; var risk = "产品:"+($("#risk").combotree("getText")?$("#risk").combotree("getText"):"请选择")+";\\n"; var policytype = "保单类型:"+$("#policytype").combobox("getText")+";"; var channel = "渠道:"+($("#channel").combotree("getText")?$("#channel").combotree("getText"):"请选择")+";\\n"; var source = "业务来源:"+($("#source").combotree("getText")?$("#source").combotree("getText"):"请选择")+";\\n"; var team = "业务团队:"+($("#team").combotree("getText")?$("#team").combotree("getText"):"请选择")+";\\n"; var surveyind = "创新业务标识:"+$("#surveyind").combotree("getText")+";\\n"; var isshareholder = "股东业务标识:"+($("#isshareholder").combotree("getText")?$("#isshareholder").combotree("getText"):"请选择")+";\\n"; var handler1code = "业务员代码:"+$("#handler1code").textbox("getText")+";\\n"; var handler1name = "业务员名称:"+$("#handler1name").textbox("getText")+";\\n"; var intermediarycode = "代理人代码:"+$("#intermediarycode").textbox("getText")+";\\n"; var intermediaryname = "代理人名称:"+$("#intermediaryname").textbox("getText")+";\\n"; var dim = "维度列表:" + $("#dim").combotree("getText") + ";\\n"; var val = "指标列表:" + $("#val").combotree("getText") + ";\\n"; var aInsuredTypeName = "客户类型:"+$("#aInsuredTypeName").textbox("getText")+";\\n"; var inputSum = underdate + startdate + maxdate + enddate + sumamount + sumprem + company + risk + policytype + source + channel + team + surveyind + isshareholder + handler1code + handler1name + intermediarycode + intermediaryname + dim + val + aInsuredTypeName; $("#inputSum").val(inputSum); $.ajax({ type : "POST", url : "${ctx}/rFCUnderLA/download", data : $('#form').serialize(), }); } } } </script> <script type="text/javascript"> window.onload = function() { if ("${page.totalResult }" == "" || parseInt("${page.totalResult }") > 1000000 || ($("#dim").combotree("getText") == null || $("#val") .combotree("getText") == null)) { $("#downloadInput").css("background-color", "gray"); } } </script> </body> </html> 请判断为什么 创新业务标识 时常出不来下按钮,但是股东业务标识 和业务团队 这些下选择没问题
07-10
/** * 生产消耗管理页面 * 根据代码规范,所有数据交互都通过 DataManager 进行 */ class ShengchanXiaohaoManager { constructor(dataManager) { this.dataManager = dataManager; this.currentUser = null; this.consumptionRecords = []; this.init(); } async init() { try { // 检查用户权限 await this.checkUserPermission(); // 注册数据管理器回调 this.registerDataCallbacks(); // 初始化页面数据 await this.initPageData(); // 绑定事件 this.bindEvents(); console.log('生产消耗管理页面初始化完成'); } catch (error) { console.error('初始化失败:', error); alert('页面初始化失败,请刷新重试'); } } async checkUserPermission() { try { // 通过 DataManager 获取当前用户信息 this.currentUser = await this.dataManager.getCurrentUser(); if (!this.currentUser || this.currentUser.role < 2) { alert('权限不足,无法访问此页面'); window.location.href = '../index.html'; return; } } catch (error) { console.error('权限检查失败:', error); window.location.href = '../index.html'; } } /** * 注册数据管理器回调 */ registerDataCallbacks() { // 注册生产消耗相关回调 this.dataManager.registerCallback('shengchan_xiaohao', (operation, data) => { if (operation === 'add') { this.onConsumptionAdded(data); } else if (operation === 'add_error') { this.onConsumptionError(data); } }); // 注册数据刷新回调 this.dataManager.registerCallback('all', (operation, entity, data) => { if (operation === 'refresh') { this.refreshConsumptionData(); } }); } /** * 初始化页面数据 */ async initPageData() { try { // 确保数据已加载 await this.dataManager.fetchAll(); // 刷新消耗数据 this.refreshConsumptionData(); // 加载统计信息 this.loadStatistics(); // 初始化下数据 this.initSelectOptions(); } catch (error) { console.error('初始化页面数据失败:', error); } } /** * 刷新消耗数据 */ refreshConsumptionData() { // 从 DataManager 获取生产消耗记录 this.consumptionRecords = this.dataManager.getShengchanXiaohaoRecords(); // 更新表格显示 this.updateConsumptionTable(); } /** * 更新消耗表格 */ updateConsumptionTable() { const tableBody = document.getElementById('productionRecordsTable'); if (!tableBody) return; if (this.consumptionRecords.length === 0) { tableBody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">暂无生产记录</td></tr>'; return; } const rows = this.consumptionRecords.map(record => { const dingdanBancai = record.dingdan_bancai || {}; const dingdan = dingdanBancai.dingdan || {}; const chanpin = dingdanBancai.chanpin || {}; const zujian = dingdanBancai.zujian || {}; const bancai = dingdanBancai.bancai || {}; const user = record.user || {}; return ` <tr> <td>${new Date(record.date).toLocaleString('zh-CN')}</td> <td>${dingdan.number || '未指定'}</td> <td>${chanpin.bianhao || '未指定'}</td> <td>${zujian.name || '未指定'}</td> <td><span class="badge badge-primary">${Math.abs(record.shuliang)}</span></td> <td>${this.getBancaiName(bancai)}</td> <td>${user.name || '未知'}</td> <td><span class="badge badge-success">正常</span></td> <td> <button class="btn btn-sm btn-info" onclick="shengchanXiaohaoManager.viewRecord(${record.id})" title="查看详情"> <i class="bi bi-eye"></i> </button> </td> </tr> `; }).join(''); tableBody.innerHTML = rows; } /** * 获取板材名称 */ getBancaiName(bancai) { if (!bancai) return '未知板材'; const caizhi = bancai.caizhi || {}; const mupi1 = bancai.mupi1 || {}; const mupi2 = bancai.mupi2 || {}; return `${caizhi.name || ''}${bancai.houdu || ''}mm ${mupi1.name || ''}/${mupi2.name || ''}`; } /** * 初始化下选项 */ initSelectOptions() { // 初始化订单下 this.updateDingdanSelect(); // 绑定订单变化事件 const dingdanSelect = document.getElementById('dingdanSelect'); if (dingdanSelect) { dingdanSelect.addEventListener('change', () => { this.onDingdanChange(); }); } // 绑定产品变化事件 const chanpinSelect = document.getElementById('chanpinSelect'); if (chanpinSelect) { chanpinSelect.addEventListener('change', () => { this.onChanpinChange(); }); } // 绑定组件变化事件 const zujianSelect = document.getElementById('zujianSelect'); if (zujianSelect) { zujianSelect.addEventListener('change', () => { this.onZujianChange(); }); } } /** * 更新订单下 */ updateDingdanSelect() { const select = document.getElementById('dingdanSelect'); if (!select) return; const dingdans = this.dataManager.getDingdans(); select.innerHTML = '<option value="">请选择订单</option>'; dingdans.forEach(dingdan => { if (!dingdan.deleted) { const option = document.createElement('option'); option.value = dingdan.id; option.textContent = dingdan.number; select.appendChild(option); } }); } /** * 订单变化处理 */ onDingdanChange() { const dingdanSelect = document.getElementById('dingdanSelect'); const chanpinSelect = document.getElementById('chanpinSelect'); const zujianSelect = document.getElementById('zujianSelect'); const productionQuantity = document.getElementById('productionQuantity'); if (!dingdanSelect.value) { chanpinSelect.disabled = true; zujianSelect.disabled = true; productionQuantity.disabled = true; return; } // 更新产品下 const chanpins = this.dataManager.getChanpinsForDingdan(dingdanSelect.value); chanpinSelect.innerHTML = '<option value="">请选择产品</option>'; chanpins.forEach(chanpin => { const option = document.createElement('option'); option.value = chanpin.id; option.textContent = chanpin.bianhao; chanpinSelect.appendChild(option); }); chanpinSelect.disabled = false; zujianSelect.disabled = true; productionQuantity.disabled = true; } /** * 产品变化处理 */ onChanpinChange() { const chanpinSelect = document.getElementById('chanpinSelect'); const zujianSelect = document.getElementById('zujianSelect'); const productionQuantity = document.getElementById('productionQuantity'); if (!chanpinSelect.value) { zujianSelect.disabled = true; productionQuantity.disabled = true; return; } // 更新组件下 const zujians = this.dataManager.getZujiansForChanpin(chanpinSelect.value); zujianSelect.innerHTML = '<option value="">请选择组件</option>'; zujians.forEach(zujian => { const option = document.createElement('option'); option.value = zujian.id; option.textContent = zujian.name; zujianSelect.appendChild(option); }); zujianSelect.disabled = false; productionQuantity.disabled = true; } /** * 组件变化处理 */ onZujianChange() { const zujianSelect = document.getElementById('zujianSelect'); const productionQuantity = document.getElementById('productionQuantity'); if (!zujianSelect.value) { productionQuantity.disabled = true; return; } productionQuantity.disabled = false; // 启用计算按钮 const calculateBtn = document.getElementById('calculateConsumption'); if (calculateBtn) { calculateBtn.disabled = false; } } columns: [ { data: 'id', title: 'ID', width: '60px' }, { data: null, title: '订单信息', render: function(data, type, row) { let html = ''; if (row.dingdan_name) { html += `<div><strong>订单:</strong> ${row.dingdan_name}</div>`; } if (row.chanpin_name) { html += `<div><strong>产品:</strong> ${row.chanpin_name}</div>`; } if (row.zujian_name) { html += `<div><strong>组件:</strong> ${row.zujian_name}</div>`; } return html || '未指定'; } }, { data: 'bancai_name', title: '板材', render: function(data, type, row) { return data || '未知板材'; } }, { data: 'shengchan_shuliang', title: '生产数量', className: 'text-center', render: function(data, type, row) { return `<span class="badge badge-primary">${data || 0}</span>`; } }, { data: 'xiaohao_shuliang', title: '消耗数量', className: 'text-center', render: function(data, type, row) { return `<span class="badge badge-warning">${data || 0}</span>`; } }, { data: 'shijian', title: '时间', render: function(data, type, row) { if (data) { const date = new Date(data); return date.toLocaleString('zh-CN'); } return ''; } }, { data: 'caozuoyuan_name', title: '操作员', render: function(data, type, row) { return data || '未知'; } }, { data: 'zhuangtai', title: '状态', className: 'text-center', render: function(data, type, row) { const statusClass = data === '正常' ? 'success' : 'secondary'; return `<span class="badge badge-${statusClass}">${data || '正常'}</span>`; } }, { data: null, title: '操作', orderable: false, className: 'text-center', width: '120px', render: function(data, type, row) { return ` <button class="btn btn-sm btn-info view-btn" data-id="${row.id}" title="查看详情"> <i class="fas fa-eye"></i> </button> <button class="btn btn-sm btn-primary edit-btn" data-id="${row.id}" title="编辑"> <i class="fas fa-edit"></i> </button> <button class="btn btn-sm btn-danger delete-btn" data-id="${row.id}" title="删除"> <i class="fas fa-trash"></i> </button> `; } } ], order: [[0, 'desc']], pageLength: 25, responsive: true, language: { url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/Chinese.json' }, dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' + '<"row"<"col-sm-12"tr>>' + '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>', drawCallback: (settings) => { // 重新绑定按钮事件 $('.view-btn').off('click').on('click', (e) => { const id = $(e.currentTarget).data('id'); this.viewRecord(id); }); $('.edit-btn').off('click').on('click', (e) => { const id = $(e.currentTarget).data('id'); this.editRecord(id); }); $('.delete-btn').off('click').on('click', (e) => { const id = $(e.currentTarget).data('id'); this.deleteRecord(id); }); } }); } bindEvents() { // 计算消耗按钮 const calculateBtn = document.getElementById('calculateConsumption'); if (calculateBtn) { calculateBtn.addEventListener('click', () => { this.calculateConsumption(); }); } // 确认生产按钮 const confirmBtn = document.getElementById('confirmProduction'); if (confirmBtn) { confirmBtn.addEventListener('click', () => { this.confirmProduction(); }); } // 刷新按钮 const refreshBtn = document.getElementById('refreshBtn'); if (refreshBtn) { refreshBtn.addEventListener('click', () => { this.refreshData(); }); } // 新增订单按钮 const addDingdanBtn = document.getElementById('addDingdanBtn'); if (addDingdanBtn) { addDingdanBtn.addEventListener('click', () => { this.showAddDingdanModal(); }); } // 添加产品按钮 const addChanpinBtn = document.getElementById('addChanpinBtn'); if (addChanpinBtn) { addChanpinBtn.addEventListener('click', () => { this.showAddChanpinModal(); }); } // 添加组件按钮 const addZujianBtn = document.getElementById('addZujianBtn'); if (addZujianBtn) { addZujianBtn.addEventListener('click', () => { this.showAddZujianModal(); }); } } /** * 计算消耗 */ async calculateConsumption() { try { const dingdanId = document.getElementById('dingdanSelect').value; const chanpinId = document.getElementById('chanpinSelect').value; const zujianId = document.getElementById('zujianSelect').value; const shengchanShuliang = parseInt(document.getElementById('productionQuantity').value); if (!dingdanId || !chanpinId || !zujianId || !shengchanShuliang) { alert('请完整填写生产信息'); return; } // 获取组件的板材消耗信息 const bancais = this.dataManager.getBancaisForZujian(zujianId); const consumptionDetails = document.getElementById('consumptionDetails'); const consumptionList = document.getElementById('consumptionList'); if (bancais.length === 0) { alert('该组件没有配置板材信息'); return; } // 显示消耗明细 consumptionDetails.style.display = 'block'; consumptionList.innerHTML = ''; bancais.forEach(bancai => { // 从 chanpin_zujians 中获取消耗比例 const chanpinZujian = this.dataManager.data.chanpin_zujians.find(cz => cz.chanpin?.id == chanpinId && cz.zujian?.id == zujianId && cz.bancai?.id == bancai.id ); const oneHowMany = chanpinZujian ? chanpinZujian.one_howmany : 1; const xiaohaoShuliang = Math.ceil(shengchanShuliang * oneHowMany); const itemHtml = ` <div class="consumption-item" data-bancai-id="${bancai.id}" data-xiaohao="${xiaohaoShuliang}"> <div class="row"> <div class="col-md-6"> <strong>板材:</strong> ${this.getBancaiName(bancai)} </div> <div class="col-md-3"> <strong>单位消耗:</strong> ${oneHowMany} </div> <div class="col-md-3"> <strong>总消耗:</strong> <span class="text-danger">${xiaohaoShuliang} 张</span> </div> </div> </div> `; consumptionList.innerHTML += itemHtml; }); // 启用确认生产按钮 const confirmBtn = document.getElementById('confirmProduction'); if (confirmBtn) { confirmBtn.disabled = false; } } catch (error) { console.error('计算消耗失败:', error); alert('计算消耗失败,请重试'); } } /** * 确认生产 */ async confirmProduction() { try { const dingdanId = document.getElementById('dingdanSelect').value; const chanpinId = document.getElementById('chanpinSelect').value; const zujianId = document.getElementById('zujianSelect').value; const shengchanShuliang = parseInt(document.getElementById('productionQuantity').value); const consumptionItems = document.querySelectorAll('.consumption-item'); if (consumptionItems.length === 0) { alert('请先计算消耗'); return; } if (!confirm('确认执行生产消耗操作?此操作将扣减库存。')) { return; } // 处理每个板材的消耗 for (const item of consumptionItems) { const bancaiId = parseInt(item.dataset.bancaiId); const xiaohaoShuliang = parseInt(item.dataset.xiaohao); const consumptionData = { dingdan: { id: parseInt(dingdanId) }, chanpin: { id: parseInt(chanpinId) }, zujian: { id: parseInt(zujianId) }, bancai: { id: bancaiId }, shengchan_shuliang: shengchanShuliang, xiaohao_shuliang: xiaohaoShuliang, caozuoyuan: { id: this.currentUser.id }, shijian: new Date().toISOString(), beizhu: `生产${shengchanShuliang}个${document.getElementById('chanpinSelect').selectedOptions[0].text}` }; // 通过 DataManager 处理生产消耗事务 await this.dataManager.processShengchanXiaohao(consumptionData); } alert('生产消耗处理完成'); this.resetForm(); } catch (error) { console.error('确认生产失败:', error); alert('生产消耗处理失败: ' + error.message); } } /** * 重置表单 */ resetForm() { document.getElementById('dingdanSelect').value = ''; document.getElementById('chanpinSelect').innerHTML = '<option value="">请选择产品</option>'; document.getElementById('zujianSelect').innerHTML = '<option value="">请选择组件</option>'; document.getElementById('productionQuantity').value = ''; document.getElementById('chanpinSelect').disabled = true; document.getElementById('zujianSelect').disabled = true; document.getElementById('productionQuantity').disabled = true; document.getElementById('calculateConsumption').disabled = true; document.getElementById('confirmProduction').disabled = true; document.getElementById('consumptionDetails').style.display = 'none'; } /** * 显示添加订单弹窗 */ showAddDingdanModal() { if (window.CustomFormModal) { window.CustomFormModal.show('dingdan', { title: '添加订单', onSuccess: () => { this.refreshData(); } }); } } /** * 显示添加产品弹窗 */ showAddChanpinModal() { const dingdanId = document.getElementById('dingdanSelect').value; if (!dingdanId) { alert('请先选择订单'); return; } if (window.CustomFormModal) { window.CustomFormModal.show('chanpin', { title: '添加产品', onSuccess: () => { this.refreshData(); this.onDingdanChange(); // 刷新产品列表 } }); } } /** * 显示添加组件弹窗 */ showAddZujianModal() { const chanpinId = document.getElementById('chanpinSelect').value; if (!chanpinId) { alert('请先选择产品'); return; } if (window.CustomFormModal) { window.CustomFormModal.show('zujian', { title: '添加组件', onSuccess: () => { this.refreshData(); this.onChanpinChange(); // 刷新组件列表 } }); } } /** * 查看记录详情 */ viewRecord(recordId) { const record = this.consumptionRecords.find(r => r.id === recordId); if (!record) { alert('记录不存在'); return; } const dingdanBancai = record.dingdan_bancai || {}; const dingdan = dingdanBancai.dingdan || {}; const chanpin = dingdanBancai.chanpin || {}; const zujian = dingdanBancai.zujian || {}; const bancai = dingdanBancai.bancai || {}; const user = record.user || {}; const content = ` <div class="row"> <div class="col-md-6"> <p><strong>记录ID:</strong> ${record.id}</p> <p><strong>订单:</strong> ${dingdan.number || '未指定'}</p> <p><strong>产品:</strong> ${chanpin.bianhao || '未指定'}</p> <p><strong>组件:</strong> ${zujian.name || '未指定'}</p> <p><strong>板材:</strong> ${this.getBancaiName(bancai)}</p> </div> <div class="col-md-6"> <p><strong>消耗数量:</strong> ${Math.abs(record.shuliang)} 张</p> <p><strong>消耗时间:</strong> ${new Date(record.date).toLocaleString('zh-CN')}</p> <p><strong>操作员:</strong> ${user.name || '未知'}</p> <p><strong>操作类型:</strong> 生产消耗</p> <p><strong>备注:</strong> ${record.text || '无'}</p> </div> </div> `; // 显示在模态中 if (window.CustomFormModal) { const modal = document.createElement('div'); modal.className = 'modal fade'; modal.innerHTML = ` <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">生产消耗记录详情</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body">${content}</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button> </div> </div> </div> `; document.body.appendChild(modal); const bootstrapModal = new bootstrap.Modal(modal); bootstrapModal.show(); modal.addEventListener('hidden.bs.modal', () => { document.body.removeChild(modal); }); } } /** * 刷新数据 */ async refreshData() { try { await this.dataManager.refreshData(); this.loadStatistics(); } catch (error) { console.error('刷新数据失败:', error); } } /** * 加载统计信息 */ loadStatistics() { try { const statistics = this.dataManager.getShengchanStatistics(); const todayConsumption = document.getElementById('todayConsumption'); const monthConsumption = document.getElementById('monthConsumption'); const pendingOrders = document.getElementById('pendingOrders'); const lowStockCount = document.getElementById('lowStockCount'); if (todayConsumption) todayConsumption.textContent = `${statistics.today_consumption} 张`; if (monthConsumption) monthConsumption.textContent = `${statistics.month_consumption} 张`; if (pendingOrders) pendingOrders.textContent = `${statistics.pending_orders} 个`; if (lowStockCount) lowStockCount.textContent = `${statistics.low_stock_count} 种`; } catch (error) { console.error('加载统计信息失败:', error); } } /** * 生产消耗添加成功回调 */ onConsumptionAdded(data) { console.log('生产消耗添加成功:', data); // 数据会通过 DataManager 的回调自动刷新 } /** * 生产消耗添加失败回调 */ onConsumptionError(data) { console.error('生产消耗处理失败:', data); alert('生产消耗处理失败: ' + data.error); } } // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', async function() { // 检查必要的依赖 if (typeof DataManager === 'undefined') { console.error('DataManager 未加载'); alert('系统组件未加载完成,请刷新页面'); return; } try { // 导入 DataManager const { DataManager } = await import('../data/DataManager.js'); // 创建 DataManager 实例 const dataManager = new DataManager(); await dataManager.fetchAll(); // 初始化生产消耗管理器 window.shengchanXiaohaoManager = new ShengchanXiaohaoManager(dataManager); console.log('生产消耗管理系统初始化完成'); } catch (error) { console.error('系统初始化失败:', error); alert('系统初始化失败,请刷新页面重试'); } }); showAddModal() { if (window.CustomFormModal) { window.CustomFormModal.show('shengchan-xiaohao', { title: '添加生产消耗', onSuccess: () => { this.refreshData(); } }); } else { console.error('CustomFormModal 未加载'); alert('弹窗组件未加载,请刷新页面重试'); } } async viewRecord(id) { try { const response = await fetch(`../php_api/index.php?action=getShengchanXiaohao&id=${id}`); const result = await response.json(); if (result.success && result.data) { const record = result.data; let content = ` <div class="row"> <div class="col-md-6"> <p><strong>ID:</strong> ${record.id}</p> <p><strong>订单:</strong> ${record.dingdan_name || '未指定'}</p> <p><strong>产品:</strong> ${record.chanpin_name || '未指定'}</p> <p><strong>组件:</strong> ${record.zujian_name || '未指定'}</p> <p><strong>板材:</strong> ${record.bancai_name || '未知'}</p> </div> <div class="col-md-6"> <p><strong>生产数量:</strong> ${record.shengchan_shuliang}</p> <p><strong>消耗数量:</strong> ${record.xiaohao_shuliang}</p> <p><strong>时间:</strong> ${new Date(record.shijian).toLocaleString('zh-CN')}</p> <p><strong>操作员:</strong> ${record.caozuoyuan_name || '未知'}</p> <p><strong>状态:</strong> ${record.zhuangtai || '正常'}</p> </div> </div> `; if (record.beizhu) { content += `<div class="row"><div class="col-12"><p><strong>备注:</strong> ${record.beizhu}</p></div></div>`; } $('#viewModalBody').html(content); $('#viewModal').modal('show'); } else { alert('获取记录详情失败'); } } catch (error) { console.error('查看记录失败:', error); alert('查看记录失败,请重试'); } } editRecord(id) { if (window.CustomFormModal) { window.CustomFormModal.show('shengchan-xiaohao', { title: '编辑生产消耗', mode: 'edit', recordId: id, onSuccess: () => { this.refreshData(); } }); } else { console.error('CustomFormModal 未加载'); alert('弹窗组件未加载,请刷新页面重试'); } } async deleteRecord(id) { if (!confirm('确定要删除这条生产消耗记录吗?此操作不可撤销。')) { return; } try { const response = await fetch('../php_api/index.php?action=deleteShengchanXiaohao', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ id: id }) }); const result = await response.json(); if (result.success) { alert('删除成功'); this.refreshData(); } else { alert('删除失败: ' + (result.message || '未知错误')); } } catch (error) { console.error('删除记录失败:', error); alert('删除失败,请重试'); } } refreshData() { if (this.dataTable) { this.dataTable.ajax.reload(); } } // 获取统计信息 async loadStatistics() { try { const response = await fetch('../php_api/index.php?action=getShengchanXiaohaoStatistics'); const result = await response.json(); if (result.success && result.data) { const stats = result.data; $('#totalRecords').text(stats.total_records || 0); $('#todayRecords').text(stats.today_records || 0); $('#totalConsumption').text(stats.total_consumption || 0); $('#todayConsumption').text(stats.today_consumption || 0); } } catch (error) { console.error('获取统计信息失败:', error); } } } // 页面加载完成后初始化 $(document).ready(function() { // 检查必要的依赖 if (typeof $ === 'undefined') { console.error('jQuery 未加载'); return; } if (typeof $.fn.DataTable === 'undefined') { console.error('DataTables 未加载'); return; } // 初始化管理器 window.shengchanXiaohaoManager = new ShengchanXiaohaoManager(); // 加载统计信息 window.shengchanXiaohaoManager.loadStatistics(); });------------语法错误
08-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值