新增：发货弹窗模块

2025-08-10 23:34:10 +08:00
parent 40b46545b3
commit e6627161fb
4 changed files with 976 additions and 21 deletions
--- a/docs/DELIVERY_FEATURE_DESIGN.md
+++ b/docs/DELIVERY_FEATURE_DESIGN.md
@@ -0,0 +1,287 @@
+# 订单发货功能设计
+
+## 功能概述
+
+参考提供的设计图，为订单管理系统设计了一个完整的发货功能，包括发货弹窗、快递公司管理等功能。
+
+## 设计特点
+
+### 1. 🚚 **发货弹窗设计**
+
+参考原图设计，包含以下功能模块：
+
+#### 配送方式选择
+- **快递配送**：使用第三方快递公司配送
+- **无需发货**：虚拟商品或服务类订单
+- **商家送货**：商家自行配送
+
+#### 发货类型选择
+- **手动填写**：手动输入快递信息
+- **电子面单打印**：集成快递公司API自动生成面单
+
+#### 快递信息填写
+- **快递公司选择**：从预设的快递公司列表中选择
+- **快递单号输入**：手动输入或自动生成
+- **分单发货支持**：支持订单分批发货
+
+### 2. 🏢 **快递公司管理**
+
+#### 快递公司设置弹窗
+- 快递公司列表管理
+- 支持添加、编辑、删除快递公司
+- 快递公司状态启用/禁用
+- 搜索和筛选功能
+
+#### 快递公司信息
+- 快递公司名称
+- 微信快递编码
+- 快递100编码
+- 快递鸟编码
+- 排序号设置
+
+## 组件结构
+
+### 1. DeliveryModal.vue - 发货弹窗
+
+```vue
+<template>
+  <a-modal title="订单发送货" width="600px">
+    <!-- 配送方式选择 -->
+    <a-radio-group v-model:value="form.deliveryType">
+      <a-radio :value="0">快递配送</a-radio>
+      <a-radio :value="1">无需发货</a-radio>
+      <a-radio :value="2">商家送货</a-radio>
+    </a-radio-group>
+
+    <!-- 发货类型选择 -->
+    <a-radio-group v-model:value="form.deliveryMethod">
+      <a-radio value="manual">手动填写</a-radio>
+      <a-radio value="print">电子面单打印</a-radio>
+    </a-radio-group>
+
+    <!-- 快递公司选择 -->
+    <a-select v-model:value="form.expressId">
+      <!-- 快递公司选项 -->
+    </a-select>
+
+    <!-- 快递单号输入 -->
+    <a-input v-model:value="form.trackingNumber" />
+
+    <!-- 其他配置项 -->
+  </a-modal>
+</template>
+```
+
+### 2. ExpressSettingModal.vue - 快递公司设置
+
+```vue
+<template>
+  <a-modal title="设置物流公司" width="800px">
+    <!-- 搜索栏 -->
+    <a-input-search placeholder="搜索快递公司名称" />
+    
+    <!-- 快递公司列表 -->
+    <a-table :data-source="expressList">
+      <!-- 表格列定义 -->
+    </a-table>
+
+    <!-- 添加/编辑快递公司弹窗 -->
+    <a-modal title="添加快递公司">
+      <!-- 快递公司表单 -->
+    </a-modal>
+  </a-modal>
+</template>
+```
+
+## 功能流程
+
+### 1. 发货流程
+
+```mermaid
+graph TD
+    A[点击发货按钮] --> B[打开发货弹窗]
+    B --> C{选择配送方式}
+    
+    C -->|快递配送| D[选择快递公司]
+    C -->|无需发货| E[直接完成发货]
+    C -->|商家送货| F[填写配送信息]
+    
+    D --> G[输入快递单号]
+    G --> H[填写发货备注]
+    H --> I[选择发货时间]
+    I --> J[提交发货]
+    
+    E --> J
+    F --> J
+    
+    J --> K[更新订单状态]
+    K --> L[发货完成]
+```
+
+### 2. 快递公司管理流程
+
+```mermaid
+graph TD
+    A[设置物流公司] --> B[打开快递公司管理]
+    B --> C{操作类型}
+    
+    C -->|添加| D[填写快递公司信息]
+    C -->|编辑| E[修改快递公司信息]
+    C -->|删除| F[确认删除]
+    C -->|启用/禁用| G[切换状态]
+    
+    D --> H[保存快递公司]
+    E --> H
+    F --> I[删除快递公司]
+    G --> J[更新状态]
+    
+    H --> K[刷新列表]
+    I --> K
+    J --> K
+```
+
+## 数据结构
+
+### 1. 发货表单数据
+
+```typescript
+interface DeliveryForm {
+  deliveryType: number;        // 配送方式：0快递 1无需发货 2商家送货
+  deliveryMethod: string;      // 发货类型：manual手动 print电子面单
+  expressId?: number;          // 快递公司ID
+  expressName?: string;        // 快递公司名称
+  trackingNumber?: string;     // 快递单号
+  partialDelivery: boolean;    // 是否支持分单发货
+  deliveryNote?: string;       // 发货备注
+  deliveryTime: Dayjs;         // 发货时间
+}
+```
+
+### 2. 快递公司数据
+
+```typescript
+interface ShopExpress {
+  expressId?: number;          // 快递公司ID
+  expressName?: string;        // 快递公司名称
+  wxCode?: string;            // 微信快递编码
+  kuaidi100Code?: string;     // 快递100编码
+  kdniaoCode?: string;        // 快递鸟编码
+  sortNumber?: number;        // 排序号
+  deleted?: number;           // 是否删除
+}
+```
+
+## 界面设计要点
+
+### 1. 视觉层次
+
+- **主要选项突出显示**：快递配送选项使用蓝色高亮
+- **分组清晰**：配送方式、发货类型、快递信息分组显示
+- **操作按钮明确**：确认发货使用主色调按钮
+
+### 2. 交互体验
+
+- **条件显示**：根据配送方式动态显示相关字段
+- **智能默认值**：发货时间默认为当前时间
+- **表单验证**：必填字段验证和格式检查
+
+### 3. 响应式设计
+
+- **弹窗宽度适配**：发货弹窗600px，设置弹窗800px
+- **表单布局**：使用Ant Design的栅格系统
+- **移动端适配**：考虑小屏幕设备的显示效果
+
+## 集成方式
+
+### 1. 在订单列表中集成
+
+```typescript
+// 发货处理
+const handleDelivery = (record: ShopOrder) => {
+  current.value = record;
+  showDelivery.value = true;
+};
+```
+
+### 2. 在订单详情中集成
+
+```vue
+<template #extra>
+  <a-button 
+    v-if="canDelivery(form)" 
+    type="primary" 
+    @click="handleDelivery"
+  >
+    发货
+  </a-button>
+</template>
+```
+
+## 扩展功能
+
+### 1. 电子面单集成
+
+- 集成快递公司API
+- 自动生成快递单号
+- 打印面单功能
+
+### 2. 物流跟踪
+
+- 集成物流查询API
+- 实时更新物流状态
+- 物流轨迹展示
+
+### 3. 批量发货
+
+- 支持批量选择订单
+- 批量设置快递信息
+- 批量打印面单
+
+## 技术实现
+
+### 1. 表单验证
+
+```typescript
+const rules = {
+  deliveryType: [{ required: true, message: '请选择配送方式' }],
+  expressId: [{ 
+    validator: (_, value) => {
+      if (form.deliveryType === 0 && !value) {
+        return Promise.reject('请选择快递公司');
+      }
+      return Promise.resolve();
+    }
+  }]
+};
+```
+
+### 2. 日期处理
+
+```typescript
+const deliveryTime = toDateString(form.deliveryTime.toDate(), 'yyyy-MM-dd HH:mm:ss');
+```
+
+### 3. 状态管理
+
+```typescript
+const updateData = {
+  ...props.data,
+  deliveryStatus: 20,      // 已发货
+  deliveryType: form.deliveryType,
+  deliveryTime: deliveryTime,
+  expressId: form.expressId,
+  trackingNumber: form.trackingNumber
+};
+```
+
+## 总结
+
+这个发货功能设计具有以下优势：
+
+1. **界面友好**：参考原设计图，界面清晰直观
+2. **功能完整**：支持多种配送方式和发货类型
+3. **扩展性强**：预留了电子面单和物流跟踪的接口
+4. **易于维护**：组件化设计，代码结构清晰
+5. **用户体验好**：智能表单验证和条件显示
+
+这个设计将显著提升订单发货的效率和准确性。