$(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;
}
// 确保产品数据已加载
if (!dataManager.data.chanpins || dataManager.data.chanpins.length === 0) {
alert('产品数据未加载，请稍后再试');
return;
}
showEntityModal('添加产品', 'dingdan_chanpin', null, {
dingdan: { id: parseInt(currentDingdanId) },
chanpin: { id: '' },
shuliang: 1
});
});
// 添加组件按钮
$('#addZujianBtn').on('click', function() {
if (!currentDingdanChanpinId) {
alert('请先选择产品');
return;
}
// 获取当前选中的产品ID
const dingdanChanpin = dataManager.data.dingdan_chanpins.find(
dc => dc.id == currentDingdanChanpinId
);
if (!dingdanChanpin || !dingdanChanpin.chanpin) {
alert('未找到产品信息');
return;
}
const chanpinId = dingdanChanpin.chanpin.id;
showEntityModal('添加组件', 'chanpin_zujian', null, {
chanpin: { id: parseInt(chanpinId) },
zujian: { id: '' },
bancai: { id: '' },
one_howmany: 1
});
});
// 新增板材按钮
事件
$addBancaiBtn.on('click', function() {
showCreateEntityModal('创建新板材', ENTITY_BANCAI, null, {
houdu: 0.0
});
});
// 提交订单按钮（修复后的逻辑）
$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) {
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);
$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) {
$('#modalTitle').text(title);
const $formFields = $('#formFields');
$formFields.empty();
// 根据实体类型生成表单字段
switch (entityType) {
case ENTITY_DINGDAN:
$formFields.append(`
<div class="form-group">
<label>订单编号</label>
<input type="text" class="form-control" name="number" value="${initialData.number || ''}" required>
</div>
<div class="form-group">
<label>下单日期</label>
<input type="date" class="form-control" name="xiadan" value="${initialData.xiadan || ''}" required>
</div>
<div class="form-group">
<label>交货日期</label>
<input type="date" class="form-control" name="jiaohuo" value="${initialData.jiaohuo || ''}">
</div>
`);
break;
case 'dingdan_chanpin': // 订单产品
const chanpins = dataManager.data.chanpins || [];
let chanpinOptions = '<option value="">选择产品</option>';
chanpinOptions += '<option value="new">+ 创建新产品</option>';
if (chanpins.length > 0) {
chanpins.forEach(cp => {
chanpinOptions += `
<option value="${cp.id}" ${initialData.chanpin.id == cp.id ? 'selected' : ''}>
${cp.bianhao}
</option>
`;
});
}
$formFields.append(`
<div class="form-group">
<label>产品</label>
<div class="input-group">
<select class="form-control" name="chanpin" id="chanpinSelectModal" required>
${chanpinOptions}
</select>
<span class="input-group-btn">
<button class="btn btn-info" id="createChanpinBtn">新建</button>
</span>
</div>
</div>
<div class="form-group">
<label>数量</label>
<input type="number" class="form-control" name="shuliang" value="${initialData.shuliang || 1}" min="1" required>
</div>
<input type="hidden" name="dingdan" value="${initialData.dingdan.id}">
`);
// 添加新建产品按钮
事件
$('#createChanpinBtn').on('click', function() {
showCreateEntityModal('创建新产品', ENTITY_CHANPIN, null, {
bianhao: '',
name: ''
});
});
// 产品选择变化
$('#chanpinSelectModal').on('change', function() {
if ($(this).val() === 'new') {
showCreateEntityModal('创建新产品', ENTITY_CHANPIN, null, {
bianhao: '',
});
$(this).val(''); // 重置选择
}
});
break;
case 'chanpin_zujian': // 产品组件
const zujians = dataManager.data.zujians || [];
const bancais = dataManager.data.bancais || [];
let zujianOptions = '<option value="">选择组件</option>';
zujianOptions += '<option value="new">+ 创建新组件</option>';
let bancaiOptions = '<option value="">选择板材</option>';
bancaiOptions += '<option value="new">+ 创建新板材</option>';
if (zujians.length > 0) {
zujians.forEach(zj => {
zujianOptions += `
<option value="${zj.id}" ${initialData.zujian.id == zj.id ? 'selected' : ''}>
${zj.name}
</option>
`;
});
}
if (bancais.length > 0) {
bancais.forEach(bc => {
let bcInfo = `厚度: ${bc.houdu}mm`;
if (bc.caizhi) bcInfo += `, 材质: ${bc.caizhi.name}`;
if (bc.mupi1) bcInfo += `, 木皮1: ${bc.mupi1.name}`;
if (bc.mupi2) bcInfo += `, 木皮2: ${bc.mupi2.name}`;
bancaiOptions += `
<option value="${bc.id}" ${initialData.bancai.id == bc.id ? 'selected' : ''}>
${bcInfo}
</option>
`;
});
}
$formFields.append(`
<div class="form-group">
<label>组件</label>
<div class="input-group">
<select class="form-control" name="zujian" id="zujianSelectModal" required>
${zujianOptions}
</select>
<span class="input-group-btn">
<button class="btn btn-info" id="createZujianBtn">新建</button>
</span>
</div>
</div>
<div class="form-group">
<label>板材</label>
<div class="input-group">
<select class="form-control" name="bancai" id="bancaiSelectModal" required>
${bancaiOptions}
</select>
<span class="input-group-btn">
<button class="btn btn-info" id="createBancaiBtn">新建</button>
</span>
</div>
</div>
<div class="form-group">
<label>一张板出多少组件</label>
<input type="number" class="form-control" name="one_howmany" value="${initialData.one_howmany || 1}" min="0.01" step="0.01" required>
</div>
<input type="hidden" name="chanpin" value="${initialData.chanpin.id}">
`);
// 添加新建按钮
事件
$('#createZujianBtn').on('click', function() {
showCreateEntityModal('创建新组件', ENTITY_ZUJIAN, null, {
name: ''
});
});
$('#createBancaiBtn').on('click', function() {
showCreateEntityModal('创建新板材', ENTITY_BANCAI, null, {
houdu: 0.0
});
});
// 组件选择变化
$('#zujianSelectModal').on('change', function() {
if ($(this).val() === 'new') {
showCreateEntityModal('创建新组件', ENTITY_ZUJIAN, null, {
name: ''
});
$(this).val(''); // 重置选择
}
});
// 板材选择变化
$('#bancaiSelectModal').on('change', function() {
if ($(this).val() === 'new') {
showCreateEntityModal('创建新板材', ENTITY_BANCAI, null, {
houdu: 0.0
});
$(this).val(''); // 重置选择
}
});
break;
}
// 显示模态框
$('#entityModal').modal('show');
// 模态框显示后初始化Select2
$('#entityModal').on('shown.bs.modal', function() {
// 产品模态框
if (entityType === 'dingdan_chanpin') {
$('#chanpinSelectModal').select2({
theme: '
bootstrap',
placeholder: '选择产品或创建新产品',
allowClear: true,
width: '100%'
});
}
// 组件模态框
if (entityType === 'chanpin_zujian') {
$('#zujianSelectModal').select2({
theme: '
bootstrap',
placeholder: '选择组件或创建新组件',
allowClear: true,
width: '100%'
});
$('#bancaiSelectModal').select2({
theme: '
bootstrap',
placeholder: '选择板材或创建新板材',
allowClear: true,
width: '100%'
});
}
});
// 模态框关闭时只销毁当前模态框内的Select2
$('#entityModal').on('hidden.bs.modal', function() {
$(this).find('.select2-container').remove();
});
// 存储当前操作的实体信息
$('#entityModal').data('entity', {
type: entityType,
id: entityId
});
}
// 显示创建实体模态框（新产品/新组件/新板材）
function showCreateEntityModal(title, entityType, entityId, initialData) {
$('#createEntityModalTitle').text(title);
const $formFields = $('#createEntityFields');
$formFields.empty();
// 根据实体类型生成表单字段
switch (entityType) {
case ENTITY_CHANPIN: // 新产品
$formFields.append(`
<div class="form-group">
<label>产品编号</label>
<input type="text" class="form-control" name="bianhao" value="${initialData.bianhao || ''}" required>
</div>
`);
break;
case ENTITY_ZUJIAN: // 新组件
$formFields.append(`
<div class="form-group">
<label>组件名称</label>
<input type="text" class="form-control" name="name" value="${initialData.name || ''}" required>
</div>
`);
break;
case ENTITY_BANCAI: // 新板材
const caizhis = dataManager.data.caizhis || [];
const mupis = dataManager.data.mupis || [];
let caizhiOptions = '<option value="">选择材质</option>';
let mupi1Options = '<option value="">选择木皮1</option>';
let mupi2Options = '<option value="">选择木皮2</option>';
if (caizhis.length > 0) {
caizhis.forEach(cz => {
caizhiOptions += `<option value="${cz.id}">${cz.name}</option>`;
});
}
if (mupis.length > 0) {
mupis.forEach(mp => {
mupi1Options += `<option value="${mp.id}">${mp.name}${mp.you ? ' (油)' : ''}</option>`;
mupi2Options += `<option value="${mp.id}">${mp.name}${mp.you ? ' (油)' : ''}</option>`;
});
}
$formFields.append(`
<div class="form-group">
<label>厚度(mm)</label>
<input type="number" class="form-control" name="houdu" value="${initialData.houdu || 0.0}" step="0.1" min="0.1" required>
</div>
<div class="form-group">
<label>材质</label>
<div class="input-group">
<select class="form-control" name="caizhi" required>
${caizhiOptions}
</select>
<span class="input-group-btn">
<button class="btn btn-default" id="createCaizhiBtn">新建</button>
</span>
</div>
</div>
<div class="form-group">
<label>木皮1</label>
<div class="input-group">
<select class="form-control" name="mupi1">
${mupi1Options}
</select>
<span class="input-group-btn">
<button class="btn btn-default" id="createMupiBtn">新建</button>
</span>
</div>
</div>
<div class="form-group">
<label>木皮2</label>
<div class="input-group">
<select class="form-control" name="mupi2">
${mupi2Options}
</select>
<span class="input-group-btn">
<button class="btn btn-default" id="createMupiBtn2">新建</button>
</span>
</div>
</div>
`);
// 添加新建材质按钮
事件
$('#createCaizhiBtn').on('click', function() {
showCreateEntityModal('创建新材质', ENTITY_CAIZHI, null, {
name: ''
});
});
// 添加新建木皮按钮
事件
$('#createMupiBtn, #createMupiBtn2').on('click', function() {
showCreateEntityModal('创建新木皮', ENTITY_MUPI, null, {
name: '',
you: false
});
});
break;
case ENTITY_CAIZHI: // 新材质
$formFields.append(`
<div class="form-group">
<label>材质名称</label>
<input type="text" class="form-control" name="name" value="${initialData.name || ''}" required>
</div>
`);
break;
case ENTITY_MUPI: // 新木皮
$formFields.append(`
<div class="form-group">
<label>木皮名称</label>
<input type="text" class="form-control" name="name" value="${initialData.name || ''}" required>
</div>
<div class="form-group">
<label>
<input type="checkbox" name="you" ${initialData.you ? 'checked' : ''}>
是否有油漆
</label>
</div>
`);
break;
}
// 显示模态框
$('#createEntityModal').modal('show');
// 模态框显示后初始化Select2
$('#createEntityModal').on('shown.bs.modal', function() {
if (entityType === ENTITY_BANCAI) {
$('select[name="caizhi"], select[name="mupi1"], select[name="mupi2"]').select2({
theme: '
bootstrap',
placeholder: '请选择',
allowClear: true,
width: '100%'
});
}
});
// 模态框关闭时只销毁当前模态框内的Select2
$('#entityModal').on('hidden.bs.modal', function() {
$(this).find('.select2-container').remove();
});
// 存储当前操作的实体信息
$('#createEntityModal').data('entity', {
type: entityType,
id: entityId
});
}
// 保存实体（在添加产品/组件模态框中）
async function saveEntity() {
const $saveBtn = $('#saveEntityBtn');
const originalText = $saveBtn.text();
try {
// 显示加载状态
$saveBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> 保存中...');
const entityInfo = $('#entityModal').data('entity');
const formData = getFormData('#entityForm');
let result;
if (entityInfo.id) {
// 更新实体
result = await dataManager.updateEntity(entityInfo.type, {
id: entityInfo.id,
...formData
});
} else {
// 新增实体
result = await dataManager.addEntity(entityInfo.type, formData);
}
if (result.status === 200) {
$('#entityModal').modal('hide');
// 根据操作类型刷新对应的下拉列表
switch (entityInfo.type) {
case ENTITY_DINGDAN:
await refreshDingdanList();
break;
case 'dingdan_chanpin':
if (formData.dingdan && formData.dingdan.id) {
await refreshChanpinList(formData.dingdan.id,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');
// 刷新父模态框中的下拉框
refreshParentDropdown(entityInfo.type, result.data);
} 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')}`;
}
});
禁用回车，不要改我的逻辑，什么都不用管
本文介绍如何使用BootstrapSwitch插件实现按钮状态的切换，并通过事件拦截避免不必要的状态改变，确保参数校验通过后再更新按钮状态。适用于前端开发者学习和参考。
扫一扫
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
