预售出库单功能实现总结

功能需求

• 缺货商品（库存=0）仍然可以添加到购物车
• 缺货商品应通过预售出库单方式处理
• 普通商品正常创建销售出库单
• 系统需要自动判断并调用正确的API端点

实现方案

1. 收银台前端逻辑修改 (sy/home.html)

1.1 商品选择逻辑

原来的限制：缺货商品禁止添加

// ❌ 旧逻辑
if (!item.mdkc || item.mdkc <= 0) {
  alert('库存不足，无法添加');
  return;
}

新的逻辑：允许缺货商品添加，但标记为预售

// ✅ 新逻辑
const isPresale = !item.mdkc || item.mdkc <= 0;
this.addgoodlist.push({
  quantity: 1,
  isPresale: isPresale,  // 标记是否为预售商品
  ...item
});
if (isPresale) {
  alert('该商品库存不足，将作为预售商品处理');
}

1.2 套装商品逻辑

原来的限制：套装中有任何商品缺货，整个套装禁止添加

// ❌ 旧逻辑
if (insufficientStock.length > 0) {
  alert('套装中以下商品库存不足，无法添加到购物车：...');
  return;
}

新的逻辑：允许套装添加，标记其中的缺货商品

// ✅ 新逻辑
let hasPresaleItem = false;
packageItem.wtSptzMxList.forEach((item) => {
  if (!product || !product.mdkc || product.mdkc < requiredQty) {
    hasPresaleItem = true;  // 标记该套装包含预售商品
  }
});

// 即使有缺货商品也允许添加
if (hasPresaleItem) {
  alert('套装中存在库存不足的商品，将作为预售单处理');
}

1.3 购物车显示优化

为预售商品显示视觉提示：

<!-- 预售标记 -->
<span v-if="item.isPresale" 
  style="background-color: #ff6b6b; color: white; padding: 2px 6px;">
  预售
</span>

<!-- 预售商品用不同背景色 -->
<div :style="{
  backgroundColor: item.isPresale ? '#fff3cd' : '#fff',
  borderLeft: item.isPresale ? '4px solid #ff6b6b' : 'none'
}">

2. 结算逻辑修改 (sy/settlement.html)

2.1 普通支付流程

在 settlementPay() 方法中：

// ✅ 检查是否有预售商品
const hasPresaleItem = this.addgoodlist.some(item => item.isPresale);
const apiEndpoint = hasPresaleItem ? "/api/Extend/wtysckd" : "/api/Extend/wtxsckd";
const documentType = hasPresaleItem ? '预售出库单' : '销售出库单';

if (hasPresaleItem) {
  alert('购物车中存在库存不足的商品，将创建' + documentType);
}

// 调用正确的API端点
axios({
  url: this.baseUrl + apiEndpoint,
  method: 'POST',
  data: this.info
}).then((res) => {
  if (res.data.code == 200) {
    window.alert(documentType + '创建成功');
    window.location = 'home.html';
  }
});

2.2 组合支付流程

在 finalizeComboPayment() 方法中实现相同的预售判断逻辑。

3. API端点映射

商品类型	调用端点	说明
全部有货	/api/Extend/wtxsckd	销售出库单
存在缺货	/api/Extend/wtysckd	预售出库单

用户体验流程

用户操作流程：
1. 选择商品（包括缺货商品）
   ↓
2. 系统自动检测库存并标记
   - 有货商品 → 正常显示
   - 缺货商品 → 显示"预售"标签，黄色背景，红色左边框
   ↓
3. 确认收款
   ↓
4. 系统自动判断：
   - 全部有货 → 创建销售出库单 (wtXsckd)
   - 存在缺货 → 创建预售出库单 (wtYsckd)
   ↓
5. 返回首页，订单已创建

数据结构

购物车商品对象新增字段：

{
  id: "product_id",
  spmc: "商品名称",
  quantity: 2,
  lsj: 99.99,
  mdkc: 0,              // 库存
  isPresale: true,      // ✅ 新增：标记是否为预售商品
  ...otherFields
}

前后端兼容性

• ✅ 后端 /api/Extend/wtysckd 和 /api/Extend/wtxsckd API 已存在
• ✅ 两个API的数据结构完全相同
• ✅ 前端只是根据商品类型选择调用不同的端点
• ✅ isPresale 标记仅用于前端显示，不发送到后端

测试场景

场景	预期行为
全部商品有货	创建销售出库单
部分商品缺货	缺货商品标记为"预售"，创建预售出库单
套装包含缺货商品	套装允许添加，缺货商品标记为预售
组合支付 + 缺货商品	调用预售API创建预售出库单

优势

1. 提升用户体验：用户无需被库存限制，可以预售缺货商品
2. 流程自动化：系统自动判断和调用正确的API
3. 数据清晰：预售商品通过后台预售出库单管理，易于追踪
4. 视觉友好：预售商品有明显标记，用户一目了然
5. 零对接成本：完全利用现有的预售出库单API，无需修改后端