6.8 KiB
6.8 KiB
订单发货功能设计
功能概述
参考提供的设计图，为订单管理系统设计了一个完整的发货功能，包括发货弹窗、快递公司管理等功能。
设计特点
1. 🚚 发货弹窗设计
参考原图设计，包含以下功能模块：
配送方式选择
- 快递配送：使用第三方快递公司配送
- 无需发货：虚拟商品或服务类订单
- 商家送货：商家自行配送
发货类型选择
- 手动填写：手动输入快递信息
- 电子面单打印：集成快递公司API自动生成面单
快递信息填写
- 快递公司选择：从预设的快递公司列表中选择
- 快递单号输入：手动输入或自动生成
- 分单发货支持：支持订单分批发货
2. 🏢 快递公司管理
快递公司设置弹窗
- 快递公司列表管理
- 支持添加、编辑、删除快递公司
- 快递公司状态启用/禁用
- 搜索和筛选功能
快递公司信息
- 快递公司名称
- 微信快递编码
- 快递100编码
- 快递鸟编码
- 排序号设置
组件结构
1. DeliveryModal.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 - 快递公司设置
<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. 发货流程
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. 快递公司管理流程
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. 发货表单数据
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. 快递公司数据
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. 在订单列表中集成
// 发货处理
const handleDelivery = (record: ShopOrder) => {
current.value = record;
showDelivery.value = true;
};
2. 在订单详情中集成
<template #extra>
<a-button
v-if="canDelivery(form)"
type="primary"
@click="handleDelivery"
>
发货
</a-button>
</template>
扩展功能
1. 电子面单集成
- 集成快递公司API
- 自动生成快递单号
- 打印面单功能
2. 物流跟踪
- 集成物流查询API
- 实时更新物流状态
- 物流轨迹展示
3. 批量发货
- 支持批量选择订单
- 批量设置快递信息
- 批量打印面单
技术实现
1. 表单验证
const rules = {
deliveryType: [{ required: true, message: '请选择配送方式' }],
expressId: [{
validator: (_, value) => {
if (form.deliveryType === 0 && !value) {
return Promise.reject('请选择快递公司');
}
return Promise.resolve();
}
}]
};
2. 日期处理
const deliveryTime = toDateString(form.deliveryTime.toDate(), 'yyyy-MM-dd HH:mm:ss');
3. 状态管理
const updateData = {
...props.data,
deliveryStatus: 20, // 已发货
deliveryType: form.deliveryType,
deliveryTime: deliveryTime,
expressId: form.expressId,
trackingNumber: form.trackingNumber
};
总结
这个发货功能设计具有以下优势：
- 界面友好：参考原设计图，界面清晰直观
- 功能完整：支持多种配送方式和发货类型
- 扩展性强：预留了电子面单和物流跟踪的接口
- 易于维护：组件化设计，代码结构清晰
- 用户体验好：智能表单验证和条件显示
这个设计将显著提升订单发货的效率和准确性。