# 预售出库单功能实现总结

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

## 实现方案

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

#### 1.1 商品选择逻辑
**原来的限制**：缺货商品禁止添加
```javascript
// ❌ 旧逻辑
if (!item.mdkc || item.mdkc <= 0) {
  alert('库存不足，无法添加');
  return;
}
```

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

#### 1.2 套装商品逻辑
**原来的限制**：套装中有任何商品缺货，整个套装禁止添加
```javascript
// ❌ 旧逻辑
if (insufficientStock.length > 0) {
  alert('套装中以下商品库存不足，无法添加到购物车：...');
  return;
}
```

**新的逻辑**：允许套装添加，标记其中的缺货商品
```javascript
// ✅ 新逻辑
let hasPresaleItem = false;
packageItem.wtSptzMxList.forEach((item) => {
  if (!product || !product.mdkc || product.mdkc < requiredQty) {
    hasPresaleItem = true;  // 标记该套装包含预售商品
  }
});

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

#### 1.3 购物车显示优化
为预售商品显示视觉提示：
```html
<!-- 预售标记 -->
<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()` 方法中：
```javascript
// ✅ 检查是否有预售商品
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. 返回首页，订单已创建
```

## 数据结构

购物车商品对象新增字段：
```javascript
{
  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，无需修改后端