$(this).attr('checked')得到的值为undefined

本文探讨了在不同版本的jQuery中,使用$(this).attr('checked')获取复选框状态的问题。在jQuery 1.6及更高版本中,此方法返回undefined,而早期版本则返回true/false。文章提供了两种解决方案:使用is(':checked')和prop('checked')方法。

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

当导入<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>时

$(this).attr('checked')可以正常获取true|false,但是,

当导入<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>时,

$(this).attr('checked')得到的值为undefined。

查询得知:来jquery 1.6以前用$(this).attr('checked')得到的是true/false,但到了1.6以后,$(this).attr('checked')就有点问题了。

  解决方案如下:

    1. 使用is()

        例句: $(this).is(":checked");             // 注意是':checked',有冒号的!

    2. 使用prop()方法,JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性,属性指的是“name,id”等等,特性指的是“selectedIndex, tagName, nodeName”等等。 

        例句: $(this).prop('checked');

参考自:https://www.cnblogs.com/andy-zheng/p/6029259.html

 

// @ts-nocheck class SweetalertSystem { constructor() { this.fieldRegistry = {}; this.modalRegistry = {}; // 添加模态类型注册表 this.nestedModalStack = []; // 添加嵌套模态栈 this.initCoreComponents(); // 初始化事件处理器映射 this.buttonHandlers = new Map(); this.addEntityButtons = null; } initCoreComponents() { // 注册核心字段类型 this.registerFieldType('text', { render: (config) => { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="text" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} placeholder="${config.placeholder || ''}"> </div>`; } }); this.registerFieldType('select', { render: (config) => { const options = (config.options || []) .map(opt => `<option value="${opt.value}" ${config.value == opt.value ? 'selected' : ''}>${opt.label}</option>`) .join(''); return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <div class="input-group"> <select class="form-select" name="${config.name}" ${config.required ? 'required' : ''}> <option value="">${config.placeholder || '请选择'}</option> ${options} </select> ${config.addButton ? ` <button class="btn btn-outline-secondary add-entity-btn" type="button" data-target-field="${config.name}"> <i class="fa fa-plus"></i> ${config.addButton.label} </button> ` : ''} </div> </div>`; }, // 更新 afterRender 方法 afterRender: (element, config) => { if (config.select2) { const $select = $(element).find('select'); const swalContainer = Swal.getContainer(); this.safeInitSelect2($select, { theme: 'bootstrap', placeholder: config.placeholder || '请选择', allowClear: true, dropdownParent: swalContainer || document.body }); } } }); this.registerFieldType('number', { render: (config) => { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="number" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} step="${config.step || 1}" min="${config.min || 0}"> </div>`; } }); this.registerFieldType('checkbox', { render: (config) => { return `<div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" name="${config.name}" id="${config.name}" ${config.value ? 'checked' : ''}> <label class="form-check-label" for="${config.name}">${config.label}</label> </div>`; } }); } // 修改注册方法 - 接受对象而不是函数 registerFieldType(type, definition) { if (!definition.render || typeof definition.render !== 'function') { throw new Error(`Field type '${type}' must have a render function`); } this.fieldRegistry[type] = definition; } // === 字段渲染方法 === renderTextField(config) { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="text" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} placeholder="${config.placeholder || ''}"> </div>`; } renderSelectField(config) { const options = (config.options || []) .map(opt => `<option value="${opt.value}" ${config.value == opt.value ? 'selected' : ''}>${opt.label}</option>`) .join(''); return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <div class="input-group"> <select class="form-select" name="${config.name}" ${config.required ? 'required' : ''}> <option value="">${config.placeholder || '请选择'}</option> ${options} </select> ${config.addButton ? ` <button class="btn btn-outline-secondary add-entity-btn" type="button" data-target-field="${config.name}"> <i class="fa fa-plus"></i> ${config.addButton.label} </button> ` : ''} </div> </div>`; } renderNumberField(config) { return `<div class="mb-3"> <label class="form-label">${config.label}${config.required ? '*' : ''}</label> <input type="number" class="form-control" name="${config.name}" value="${config.value || ''}" ${config.required ? 'required' : ''} step="${config.step || 1}" min="${config.min || 0}"> </div>`; } renderCheckboxField(config) { return `<div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" name="${config.name}" id="${config.name}" ${config.value ? 'checked' : ''}> <label class="form-check-label" for="${config.name}">${config.label}</label> </div>`; } // === 核心方法 ===// === 核心方法 === /** * 打开表单弹窗(支持多个新建按钮) * @param {Object} config - 配置对象 */ async openForm(config) { const { title, fields, onSubmit, onAddEntity } = config; // 生成表单HTML const formHTML = fields.map(fieldConfig => { if (!fieldConfig.type) return '<div class="error">Missing field type</div>'; const fieldType = this.fieldRegistry[fieldConfig.type]; if (!fieldType) return `<div class="error">Field type '${fieldConfig.type}' not supported</div>`; return fieldType.render(fieldConfig); }).join(''); // 创建弹窗 return new Promise((resolve) => { Swal.fire({ title, html: `<form>${formHTML}</form>`, focusConfirm: false, showCancelButton: true, confirmButtonText: config.confirmButtonText || '保存', cancelButtonText: config.cancelButtonText || '取消', preConfirm: () => this.collectFormData(), // ... 配置 ... didOpen: () => { // 使用 MutationObserver 确保 DOM 完全渲染 const observer = new MutationObserver(() => { if (Swal.getPopup().querySelectorAll('.add-entity-btn').length > 0) { observer.disconnect(); this.setupMultiButtonHandlers(config, onAddEntity); } }); observer.observe(Swal.getPopup(), { childList: true, subtree: true }); }, willClose: () => { this.cleanupMultiButtonHandlers(); this.destroyAllSelect2(); // 确保清理所有 Select2 实例 } }).then((result) => { if (result.isConfirmed) { onSubmit(result.value); resolve(true); } else { resolve(false); } }); }); } collectFormData() { const data = {}; const popup = Swal.getPopup(); const form = popup.querySelector('form'); if (form) { const formData = new FormData(form); for (const [name, value] of formData.entries()) { // 处理多字段 if (data[name]) { if (!Array.isArray(data[name])) { data[name] = [data[name]]; } data[name].push(value); } else { data[name] = value; } } } return data; } setupEventHandlers(config) { const popup = Swal.getPopup(); // 绑定添加按钮事件 popup.querySelectorAll('.add-entity-btn').forEach(btn => { btn.addEventListener('click', async () => { const targetField = btn.dataset.targetField; if (config.onAddEntity) { const newItem = await config.onAddEntity(targetField); if (newItem) { this.updateSelectField(popup, targetField, newItem); } } }); }); } // === 模态框注册方法 === registerModalType(name, config) { // 添加afterRender处理 const enhancedConfig = { ...config, afterRender: (config, container) => { // 初始化Select2 container.find('.select2-field').each(function() { const $select = $(this); $select.select2({ theme: 'bootstrap', placeholder: $select.attr('placeholder') || '请选择', allowClear: true, dropdownParent: $select.closest('.modal') }); }); // 调用原始afterRender(如果存在) if (config.afterRender) { config.afterRender(config, container); } } }; this.modalRegistry[name] = enhancedConfig; } // 注册实体表单 registerEntityForm(entityType, fields) { this.registerModalType(entityType, { template: `<div class="modal fade" id="${entityType}Modal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="${entityType}Title"></h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body" id="${entityType}Body"></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="${entityType}Submit">保存</button> </div> </div> </div> </div>`, render: (config, container) => { container.find(`#${entityType}Title`).text(config.title); let formHTML = ''; // 确保fields是数组 const fields = Array.isArray(config.fields) ? config.fields : []; fields.forEach(fieldConfig => { const fieldType = this.fieldRegistry[fieldConfig.type]; if (fieldType && fieldType.render) { formHTML += fieldType.render(fieldConfig); } }); container.find(`#${entityType}Body`).html(formHTML); }, getFormData: (container) => { const formData = {}; container.find('input, select, textarea').each(function() { const $el = $(this); const name = $el.attr('name'); if (!name) return; if ($el.attr('type') === 'checkbox') { formData[name] = $el.is(':checked'); } else { formData[name] = $el.val(); } }); return formData; }, bindEvents: (config, container, onSubmit) => { container.find(`#${entityType}Submit`).off('click').on('click', () => { const formData = this.getFormData(container); onSubmit(formData); }); } }); } // 打开模态框 open(modalType, config, callbacks = {}) { // 如果当前有激活的弹窗,先隐藏它 if (this.nestedModalStack.length > 0) { const currentModal = this.nestedModalStack[this.nestedModalStack.length - 1]; currentModal.hide(); } // 检查模态类型是否注册 if (!this.modalRegistry[modalType]) { console.error(`未注册的模态类型: ${modalType}`); return null; } const modalConfig = this.modalRegistry[modalType]; const modalId = `${modalType}Modal`; let $modal = $(`#${modalId}`); // 如果模态框不存在则创建 if ($modal.length === 0) { $modal = $(modalConfig.template); $('body').append($modal); } // 清除之前的模态框实例 if ($modal.data('bs.modal')) { $modal.data('bs.modal').dispose(); } // 渲染模态内容 modalConfig.render(config, $modal); // 绑定事件 if (modalConfig.bindEvents) { modalConfig.bindEvents(config, $modal, callbacks.onSubmit || (() => {})); } // 创建模态实例 const modalInstance = new bootstrap.Modal($modal[0]); // 执行afterRender回调 if (modalConfig.afterRender) { modalConfig.afterRender(config, $modal); } // 初始化Select2 $modal.find('.select2-field').each(function() { const $select = $(this); $select.select2({ theme: 'bootstrap', placeholder: $select.attr('placeholder') || '请选择', allowClear: true, dropdownParent: $select.closest('.modal') }); }); // 显示弹窗 modalInstance.show(); // 将新弹窗加入栈 const modalObj = { hide: () => modalInstance.hide(), show: () => modalInstance.show(), getElement: () => $modal[0], config }; this.nestedModalStack.push(modalObj); // 使用延迟确保 DOM 完全渲染 setTimeout(() => { // 安全初始化 Select2 $modal.find('.select2-field').each((index, element) => { const $select = $(element); this.safeInitSelect2($select, { theme: 'bootstrap', placeholder: $select.attr('placeholder') || '请选择', allowClear: true, dropdownParent: $modal }); }); // 绑定新建按钮事件 $modal.find('.add-entity-btn').on('click', async () => { const entityType = $(this).data('entityType'); const targetField = $(this).data('targetField'); if (callbacks.onAddEntity) { const newItem = await callbacks.onAddEntity(entityType, targetField); if (newItem) { this.updateSelectField($modal[0], targetField, newItem); } } }); }, 50); // 返回包含关闭方法的实例对象 return modalObj; } // 关闭当前弹窗并显示上一个 closeCurrentModal() { if (this.nestedModalStack.length > 0) { const currentModal = this.nestedModalStack.pop(); currentModal.hide(); // 如果有上一个弹窗,显示它 if (this.nestedModalStack.length > 0) { const prevModal = this.nestedModalStack[this.nestedModalStack.length - 1]; prevModal.show(); } } } // 获取表单数据 getFormData(container) { const formData = {}; container.find('input, select, textarea').each(function() { const $el = $(this); const name = $el.attr('name'); if (!name) return; if ($el.attr('type') === 'checkbox') { formData[name] = $el.is(':checked'); } else if ($el.attr('type') === 'radio') { if ($el.is(':checked')) { formData[name] = $el.val(); } } else { formData[name] = $el.val(); } }); return formData; } /** * 设置多个按钮的事件处理 * @param {Object} config - 配置对象 * @param {Function} onAddEntity - 添加实体的回调函数 */ setupMultiButtonHandlers(config, onAddEntity) { const popup = Swal.getPopup(); // 确保弹窗存在 if (!popup) { console.warn('弹窗不存在,无法绑定事件'); return; } // 移除旧的事件监听器(防止重复绑定) this.cleanupMultiButtonHandlers(); // 绑定所有添加按钮事件 this.addEntityButtons = Array.from(popup.querySelectorAll('.add-entity-btn')); this.addEntityButtons.forEach(btn => { const handler = async () => { const targetField = btn.dataset.targetField; const entityType = btn.dataset.entityType; if (onAddEntity) { const newItem = await onAddEntity(entityType, targetField); if (newItem) { this.updateSelectField(popup, targetField, newItem); } } }; btn.addEventListener('click', handler); // 保存处理器以便后续清理 this.buttonHandlers.set(btn, handler); }); } /** * 清理按钮事件处理器 */ cleanupMultiButtonHandlers() { if (this.addEntityButtons) { this.addEntityButtons.forEach(btn => { const handler = this.buttonHandlers.get(btn); if (handler) { btn.removeEventListener('click', handler); this.buttonHandlers.delete(btn); } }); this.addEntityButtons = null; } } /** * 更新下拉框选项 * @param {HTMLElement} popup - 弹窗元素 * @param {string} fieldName - 字段名 * @param {Object} newItem - 新选项 {value, label} */ updateSelectField(popup, fieldName, newItem) { // 确保弹窗仍然存在 if (!popup || !popup.isConnected) { console.warn('弹窗已关闭,无法更新字段'); return; } const select = popup.querySelector(`select[name="${fieldName}"]`); if (select) { // 添加新选项 const option = document.createElement('option'); option.value = newItem.value; option.textContent = newItem.label; option.selected = true; select.appendChild(option); // 如果使用Select2,刷新组件 if ($(select).hasClass('select2-hidden-accessible')) { $(select).trigger('change'); } } } // 安全初始化 Select2 safeInitSelect2($select, options) { try { // 检查是否已初始化 if ($select.data('select2')) { this.safeDestroySelect2($select); } // 设置 dropdownParent 确保在模态框内正确显示 const dropdownParent = options.dropdownParent || Swal.getPopup() || document.body; $select.select2({ ...options, dropdownParent }); $select.addClass('select2-initialized'); return true; } catch (error) { console.error('Select2 initialization failed:', error); return false; } } // 安全销毁 Select2 safeDestroySelect2($select) { try { if ($select.data('select2')) { $select.select2('destroy'); } $select.removeClass('select2-initialized'); return true; } catch (error) { console.error('Select2 destruction failed:', error); return false; } } // 清理所有 Select2 实例 destroyAllSelect2() { const popup = Swal.getPopup(); if (popup) { $(popup).find('.select2-initialized').each((index, element) => { this.safeDestroySelect2($(element)); }); } } } export default SweetalertSystem; SweetalertSystem2.js:472 Uncaught TypeError: Cannot read properties of null (reading ‘querySelectorAll’) at SweetalertSystem.open (SweetalertSystem2.js:472:20) at HTMLButtonElement.showDingdanModal (tianjia3.js:316:55) at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:
最新发布
07-04
// @ts-nocheck document.addEventListener('keydown', function(event) { if (event.key === 'Enter') { event.preventDefault(); // 阻止默认行为 event.stopPropagation(); // 阻止事件冒泡 } }); $(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 $bancaiSelect = $('#bancaiSelect'); const $addBancaiBtn = $('#addBancaiBtn'); // 定义实体类型常量 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(); // 填充订单下拉框 await refreshBancaiList(); // 初始化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 }); // 初始化板材下拉框 $bancaiSelect.select2({ theme: 'bootstrap', placeholder: '请选择板材', allowClear: 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; } }); // 组件选择事件 $zujianSelect.on('change', function() { currentChanpinZujianId = $(this).val(); // 填充板材下拉框 refreshBancaiList(currentChanpinZujianId); }); // 新增订单按钮 $('#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; } // 确保产品数据已加载 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 }); }); // 新增板材按钮事件 $addBancaiBtn.on('click', function() { showCreateEntityModal('创建新板材', ENTITY_BANCAI, null, { houdu: 0.0 }, 'main'); // 添加来源标识 }); // 提交订单按钮(修复后的逻辑) $submitOrderBtn.on('click', async function() { const quantity = parseInt($orderQuantityInput.val()); if (!quantity || quantity <= 0) { alert('请输入有效的订购数量'); return; } // 获取选中的板材ID const selectedBancaiId = $bancaiSelect.val(); if (!selectedBancaiId) { alert('请选择板材'); return; } try { // 获取当前选中的板材 const bancai = dataManager.data.bancais.find(b => b.id == selectedBancaiId); if (!bancai) { throw new Error('未找到选中的板材'); } // 确定订购层级(订单、产品、组件都不是必须的) 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('dingdan_bancai', { id: existingOrder.id, shuliang: quantity }); } else { // 创建新记录 await dataManager.addEntity('dingdan_bancai', { 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('kucun', { id: existingban.id, shuliang: quantity + existingban.shuliang }); } else { await dataManager.addEntity("kucun", { bancai: { id: selectedBancaiId }, shuliang: quantity }); } alert('订购成功!'); resetForm(); } catch (error) { console.error('订购失败:', error); alert(`订购失败: ${error.message}`); } }); // 模态框保存按钮 $('#saveEntityBtn').on('click', saveEntity); // 新建实体按钮(在创建实体模态框中) $('#saveNewEntityBtn').on('click', saveNewEntity); // 绑定板材选择和数量输入事件 $bancaiSelect.on('change', checkSubmitCondition); $orderQuantityInput.on('input', checkSubmitCondition); } // 新增函数:检查提交条件 function checkSubmitCondition() { const selectedBancaiId = $bancaiSelect.val(); const quantity = parseInt($orderQuantityInput.val()); if(selectedBancaiId) $orderQuantityInput.prop('disabled', false); // 只需板材选择和数量有效即可提交 if (selectedBancaiId && quantity > 0) { $submitOrderBtn.prop('disabled', false); } else { $submitOrderBtn.prop('disabled', 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('jinhuo', jinhuoData); } // 修改重置表单函数 function resetForm() { $orderQuantityInput.val(''); $bancaiSelect.val('').trigger('change'); $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,chanpinId) { 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 ); var dingdanChanpinId; relatedChanpins.forEach(dc => { if(dc.chanpin?.id==chanpinId){ dingdanChanpinId=dc.id } }) // 填充下拉框 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); } if(dingdanChanpinId){ $chanpinSelect.val(dingdanChanpinId); } // 刷新后重新初始化Select2 $chanpinSelect.select2({ theme: 'bootstrap', placeholder: '请选择产品', allowClear: true }).prop('disabled', false); $chanpinSelect.trigger('change'); } // 刷新组件列表(基于产品)- 修复后的逻辑 async function refreshZujianList(dingdanChanpinId,zujianId) { 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 ); var chanpinZujianId; chanpinZujians.forEach(dc => { if(dc.zujian?.id==zujianId){ chanpinZujianId=dc.id } }) // 填充下拉框 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); } if(chanpinZujianId){ $zujianSelect.val(chanpinZujianId); } // 刷新后重新初始化Select2 $zujianSelect.select2({ theme: 'bootstrap', placeholder: '请选择组件', allowClear: true }).prop('disabled', false); $zujianSelect.trigger('change'); } async function refreshBancaiList(chanpinZujianId,bancaiId) { const currentValue = $bancaiSelect.val(); $bancaiSelect.empty().append('<option value="">请选择板材</option>'); 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 = $('<option>') .val(bancai.id) .text(formatBancaiInfo(bancai)); $bancaiSelect.append(option); $bancaiSelect.val(bancai.id).trigger('change'); $bancaiSelect.select2({ theme: 'bootstrap', placeholder: '请选择板材', allowClear: true }).prop('disabled', true); $bancaiSelect.prop('disabled', true); $addBancaiBtn.prop('disabled', true); $orderQuantityInput.prop('disabled', false); // 检查提交条件 checkSubmitCondition(); } else { // 加载所有板材 const bancais = dataManager.data.bancais || []; bancais.forEach(bancai => { const option = $('<option>') .val(bancai.id) .text(formatBancaiInfo(bancai)); $bancaiSelect.append(option); }); $addBancaiBtn.prop('disabled', false); if (bancaiId) { $bancaiSelect.val(bancaiId).trigger('change'); } $bancaiSelect.select2({ theme: 'bootstrap', placeholder: '请选择板材', allowClear: true }).prop('disabled', 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 ? ' ()' : ''}`; } if (bancai.mupi2) { info += `, 木皮2: ${bancai.mupi2.name}${bancai.mupi2.you ? ' ()' : ''}`; } return info; } // 显示实体模态框(添加产品/组件) function showEntityModal(title, entityType, entityId, initialData,source="component") { $('#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 }, 'component'); // 添加来源标识 }); // 组件选择变化 $('#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%' }); } }); alert // 模态框关闭时只销毁当前模态框内的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 }); $('#createEntityModal').data('source', source); } // 保存实体(在添加产品/组件模态框中) 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,result.data.chanpin.id); } break; case 'chanpin_zujian': if (formData.chanpin && formData.chanpin.id) { await refreshZujianList(formData.chanpin.id,result.data.zujian.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'); const source = $('#createEntityModal').data('source'); // 根据来源处理不同逻辑 switch (source) { case 'main': // 主页面创建的板材,刷新主页面下拉框 refreshBancaiList(null, result.data.id); break; case 'component': // 组件模态框中创建的板材,刷新父模态框 refreshParentDropdown(entityInfo.type, result.data); break; } } else { alert(`创建失败: ${result.text}`); } } catch (error) { console.error('创建实体时出错:', error); alert(`创建失败: ${error.message}`); } finally { // 恢复按钮状态 $saveBtn.prop('disabled', false).text(originalText); } } // 刷新父模态框中的下拉框 function refreshParentDropdown(entityType, newEntity) { // 获取父模态框中的相关下拉框 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="${newEntity.id}" selected>${newEntity.bianhao}</option>`); $select.select2('destroy'); $select.val(newEntity.id).trigger('change'); $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="${newEntity.id}" selected>${newEntity.bianhao}</option>`); $select.select2('destroy'); $select.val(newEntity.id).trigger('change'); $select.select2({ theme: 'bootstrap', placeholder: '选择组件或创建新组件', allowClear: true, width: '100%' }); } else if (entityType === ENTITY_BANCAI) { // 刷新板材下拉框 const $select = $('#bancaiSelectModal'); $select.append(`<option value="${newEntity.id}" selected>${formatBancaiInfo(newEntity)}</option>`); $select.select2('destroy'); $select.val(newEntity.id).trigger('change'); $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>${newEntity.name}</option>`); $select.select2('destroy'); $select.val(newEntity.id).trigger('change'); $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="${newEntity.id}" selected>${newEntity.name+newEntity.you?"()":""}</option>`); $select.select2('destroy'); $select.val(newEntity.id).trigger('change'); $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')}`; } });取消订单的选择之后应该是,产品和组件清空锁死,板材清空添加全部选自自选,数量只要有板材选择就能输入,提交只要板材和数量有就能提交
06-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值