新增：发货弹窗模块
This commit is contained in:
287
docs/DELIVERY_FEATURE_DESIGN.md
Normal file
287
docs/DELIVERY_FEATURE_DESIGN.md
Normal file
@@ -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. **用户体验好**：智能表单验证和条件显示
|
||||
|
||||
这个设计将显著提升订单发货的效率和准确性。
|
||||
311
src/views/shop/shopOrder/components/deliveryModal.vue
Normal file
311
src/views/shop/shopOrder/components/deliveryModal.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<!-- 订单发货弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="订单发送货"
|
||||
width="600px"
|
||||
:confirm-loading="loading"
|
||||
@update:visible="updateVisible"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 4 }"
|
||||
:wrapper-col="{ span: 20 }"
|
||||
>
|
||||
<!-- 配送方式 -->
|
||||
<a-form-item label="配送方式" name="deliveryType">
|
||||
<a-radio-group v-model:value="form.deliveryType">
|
||||
<a-radio :value="0">
|
||||
<span style="color: #1890ff;">快递配送</span>
|
||||
</a-radio>
|
||||
<a-radio :value="1">无需发货</a-radio>
|
||||
<a-radio :value="2">商家送货</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 发货类型 -->
|
||||
<a-form-item label="发货类型" name="deliveryMethod">
|
||||
<a-radio-group v-model:value="form.deliveryMethod">
|
||||
<a-radio value="manual">
|
||||
<span style="color: #1890ff;">手动填写</span>
|
||||
</a-radio>
|
||||
<a-radio value="print">电子面单打印</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 快递公司 -->
|
||||
<a-form-item
|
||||
label="快递公司"
|
||||
name="expressId"
|
||||
v-if="form.deliveryType === 0"
|
||||
>
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="18">
|
||||
<a-select
|
||||
v-model:value="form.expressId"
|
||||
placeholder="请选择"
|
||||
show-search
|
||||
:filter-option="filterExpressOption"
|
||||
@change="onExpressChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="express in expressList"
|
||||
:key="express.expressId"
|
||||
:value="express.expressId"
|
||||
>
|
||||
{{ express.expressName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-button type="primary" @click="openExpressModal">
|
||||
设置物流公司
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 快递单号 -->
|
||||
<a-form-item
|
||||
label="快递单号"
|
||||
name="trackingNumber"
|
||||
v-if="form.deliveryType === 0"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.trackingNumber"
|
||||
placeholder="请输入快递单号"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 分单发货 -->
|
||||
<a-form-item label="分单发货" v-if="form.deliveryType === 0">
|
||||
<a-switch
|
||||
v-model:checked="form.partialDelivery"
|
||||
checked-children="支持"
|
||||
un-checked-children="不支持"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 发货备注 -->
|
||||
<a-form-item label="发货备注" name="deliveryNote">
|
||||
<a-textarea
|
||||
v-model:value="form.deliveryNote"
|
||||
placeholder="请输入发货备注（可选）"
|
||||
:rows="3"
|
||||
:maxlength="200"
|
||||
show-count
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 发货时间 -->
|
||||
<a-form-item label="发货时间" name="deliveryTime">
|
||||
<a-date-picker
|
||||
v-model:value="form.deliveryTime"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择发货时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<!-- 快递公司设置弹窗 -->
|
||||
<express-setting-modal
|
||||
v-model:visible="expressModalVisible"
|
||||
@done="loadExpressList"
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { ShopOrder } from '@/api/shop/shopOrder/model';
|
||||
import { updateShopOrder } from '@/api/shop/shopOrder';
|
||||
import { listShopExpress } from '@/api/shop/shopExpress';
|
||||
import { ShopExpress } from '@/api/shop/shopExpress/model';
|
||||
import { toDateString } from 'ele-admin-pro';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import ExpressSettingModal from './expressSettingModal.vue';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
data?: ShopOrder | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
deliveryType: 0, // 0快递配送 1无需发货 2商家送货
|
||||
deliveryMethod: 'manual', // manual手动填写 print电子面单打印
|
||||
expressId: undefined as number | undefined,
|
||||
expressName: '',
|
||||
trackingNumber: '',
|
||||
partialDelivery: false,
|
||||
deliveryNote: '',
|
||||
deliveryTime: dayjs() as Dayjs
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
deliveryType: [
|
||||
{ required: true, message: '请选择配送方式' }
|
||||
],
|
||||
deliveryMethod: [
|
||||
{ required: true, message: '请选择发货类型' }
|
||||
],
|
||||
expressId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择快递公司',
|
||||
validator: (_: any, value: any) => {
|
||||
if (form.deliveryType === 0 && !value) {
|
||||
return Promise.reject('请选择快递公司');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
trackingNumber: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入快递单号',
|
||||
validator: (_: any, value: any) => {
|
||||
if (form.deliveryType === 0 && !value) {
|
||||
return Promise.reject('请输入快递单号');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
deliveryTime: [
|
||||
{ required: true, message: '请选择发货时间' }
|
||||
]
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
const { resetFields, validate } = useForm(form, rules);
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const expressList = ref<ShopExpress[]>([]);
|
||||
const expressModalVisible = ref(false);
|
||||
|
||||
// 加载快递公司列表
|
||||
const loadExpressList = async () => {
|
||||
try {
|
||||
const data = await listShopExpress({});
|
||||
expressList.value = data || [];
|
||||
} catch (error) {
|
||||
console.error('加载快递公司失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 快递公司筛选
|
||||
const filterExpressOption = (input: string, option: any) => {
|
||||
return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||
};
|
||||
|
||||
// 快递公司选择变化
|
||||
const onExpressChange = (value: number) => {
|
||||
const express = expressList.value.find(item => item.expressId === value);
|
||||
if (express) {
|
||||
form.expressName = express.expressName || '';
|
||||
}
|
||||
};
|
||||
|
||||
// 打开快递公司设置
|
||||
const openExpressModal = () => {
|
||||
expressModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 更新弹窗显示状态
|
||||
const updateVisible = (visible: boolean) => {
|
||||
emit('update:visible', visible);
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
updateVisible(false);
|
||||
};
|
||||
|
||||
// 提交发货
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await validate();
|
||||
loading.value = true;
|
||||
|
||||
const deliveryTime = toDateString(form.deliveryTime.toDate(), 'yyyy-MM-dd HH:mm:ss');
|
||||
|
||||
const updateData = {
|
||||
...props.data,
|
||||
deliveryStatus: 20, // 已发货
|
||||
deliveryType: form.deliveryType,
|
||||
deliveryTime: deliveryTime,
|
||||
deliveryNote: form.deliveryNote
|
||||
};
|
||||
|
||||
// 如果是快递配送，添加快递信息
|
||||
if (form.deliveryType === 0) {
|
||||
updateData.expressId = form.expressId;
|
||||
updateData.expressName = form.expressName;
|
||||
updateData.trackingNumber = form.trackingNumber;
|
||||
}
|
||||
|
||||
// 分单发货
|
||||
if(form.partialDelivery){
|
||||
updateData.deliveryStatus = 30;
|
||||
}
|
||||
|
||||
await updateShopOrder(updateData);
|
||||
|
||||
message.success('发货成功');
|
||||
emit('done');
|
||||
updateVisible(false);
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '发货失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
// 重置表单
|
||||
form.deliveryType = 0;
|
||||
form.deliveryMethod = 'manual';
|
||||
form.expressId = undefined;
|
||||
form.expressName = '';
|
||||
form.trackingNumber = '';
|
||||
form.partialDelivery = false;
|
||||
form.deliveryNote = '';
|
||||
form.deliveryTime = dayjs();
|
||||
|
||||
// 加载快递公司列表
|
||||
loadExpressList();
|
||||
} else {
|
||||
resetFields();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ant-radio-wrapper {
|
||||
margin-right: 16px;
|
||||
}
|
||||
</style>
|
||||
369
src/views/shop/shopOrder/components/expressSettingModal.vue
Normal file
369
src/views/shop/shopOrder/components/expressSettingModal.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<!-- 快递公司设置弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="设置物流公司"
|
||||
width="900px"
|
||||
:confirm-loading="loading"
|
||||
@update:visible="updateVisible"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="express-setting">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar" style="margin-bottom: 16px;">
|
||||
<a-input-search
|
||||
v-model:value="searchKeyword"
|
||||
placeholder="搜索快递公司名称"
|
||||
style="width: 300px;"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="margin-left: 8px;"
|
||||
@click="openAddModal"
|
||||
>
|
||||
添加快递公司
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 快递公司列表 -->
|
||||
<a-table
|
||||
:data-source="filteredExpressList"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 400 }"
|
||||
row-key="expressId"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-switch
|
||||
v-model:checked="record.enabled"
|
||||
checked-children="启用"
|
||||
un-checked-children="禁用"
|
||||
@change="handleStatusChange(record)"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a @click="editExpress(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm
|
||||
title="确定要删除此快递公司吗？"
|
||||
@confirm="deleteExpress(record)"
|
||||
>
|
||||
<a class="text-red-500">删除</a>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑快递公司弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="addModalVisible"
|
||||
:title="editingExpress ? '编辑快递公司' : '添加快递公司'"
|
||||
width="500px"
|
||||
:confirm-loading="addLoading"
|
||||
@ok="handleAddSubmit"
|
||||
@cancel="handleAddCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="addFormRef"
|
||||
:model="addForm"
|
||||
:rules="addRules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 18 }"
|
||||
>
|
||||
<a-form-item label="快递公司名称" name="expressName">
|
||||
<a-input
|
||||
v-model:value="addForm.expressName"
|
||||
placeholder="请输入快递公司名称"
|
||||
:maxlength="50"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="微信编码" name="wxCode">
|
||||
<a-input
|
||||
v-model:value="addForm.wxCode"
|
||||
placeholder="请输入微信快递编码（可选）"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="快递100编码" name="kuaidi100Code">
|
||||
<a-input
|
||||
v-model:value="addForm.kuaidi100Code"
|
||||
placeholder="请输入快递100编码（可选）"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="快递鸟编码" name="kdniaoCode">
|
||||
<a-input
|
||||
v-model:value="addForm.kdniaoCode"
|
||||
placeholder="请输入快递鸟编码（可选）"
|
||||
:maxlength="20"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="排序号" name="sortNumber">
|
||||
<a-input-number
|
||||
v-model:value="addForm.sortNumber"
|
||||
placeholder="数字越小越靠前"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, watch } from 'vue';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { ShopExpress } from '@/api/shop/shopExpress/model';
|
||||
import {
|
||||
listShopExpress,
|
||||
addShopExpress,
|
||||
updateShopExpress,
|
||||
removeShopExpress
|
||||
} from '@/api/shop/shopExpress';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', visible: boolean): void;
|
||||
(e: 'done'): void;
|
||||
}>();
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const searchKeyword = ref('');
|
||||
const expressList = ref<ShopExpress[]>([]);
|
||||
const addModalVisible = ref(false);
|
||||
const addLoading = ref(false);
|
||||
const editingExpress = ref<ShopExpress | null>(null);
|
||||
|
||||
// 添加表单
|
||||
const addForm = reactive({
|
||||
expressName: '',
|
||||
wxCode: '',
|
||||
kuaidi100Code: '',
|
||||
kdniaoCode: '',
|
||||
sortNumber: 0
|
||||
});
|
||||
|
||||
const addRules = {
|
||||
expressName: [
|
||||
{ required: true, message: '请输入快递公司名称' },
|
||||
{ min: 2, max: 50, message: '快递公司名称长度为2-50个字符' }
|
||||
]
|
||||
};
|
||||
|
||||
const addFormRef = ref();
|
||||
const { resetFields: resetAddFields, validate: validateAdd } = useForm(addForm, addRules);
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '快递公司名称',
|
||||
dataIndex: 'expressName',
|
||||
key: 'expressName',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '微信编码',
|
||||
dataIndex: 'wxCode',
|
||||
key: 'wxCode',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '快递100编码',
|
||||
dataIndex: 'kuaidi100Code',
|
||||
key: 'kuaidi100Code',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '快递鸟编码',
|
||||
dataIndex: 'kdniaoCode',
|
||||
key: 'kdniaoCode',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'sortNumber',
|
||||
key: 'sortNumber',
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
}
|
||||
];
|
||||
|
||||
// 过滤后的快递公司列表
|
||||
const filteredExpressList = computed(() => {
|
||||
if (!searchKeyword.value) {
|
||||
return expressList.value;
|
||||
}
|
||||
return expressList.value.filter(item =>
|
||||
item.expressName?.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
// 加载快递公司列表
|
||||
const loadExpressList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const data = await listShopExpress({});
|
||||
expressList.value = (data || []).map(item => ({
|
||||
...item,
|
||||
enabled: item.deleted === 0 // 假设deleted=0表示启用
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('加载快递公司失败:', error);
|
||||
message.error('加载快递公司失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
// 搜索逻辑已在computed中处理
|
||||
};
|
||||
|
||||
// 状态变化
|
||||
const handleStatusChange = async (record: ShopExpress & { enabled: boolean }) => {
|
||||
try {
|
||||
await updateShopExpress({
|
||||
...record,
|
||||
deleted: record.enabled ? 0 : 1
|
||||
});
|
||||
message.success(record.enabled ? '已启用' : '已禁用');
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '操作失败');
|
||||
// 恢复状态
|
||||
record.enabled = !record.enabled;
|
||||
}
|
||||
};
|
||||
|
||||
// 打开添加弹窗
|
||||
const openAddModal = () => {
|
||||
editingExpress.value = null;
|
||||
resetAddFields();
|
||||
addModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 编辑快递公司
|
||||
const editExpress = (record: ShopExpress) => {
|
||||
editingExpress.value = record;
|
||||
addForm.expressName = record.expressName || '';
|
||||
addForm.wxCode = record.wxCode || '';
|
||||
addForm.kuaidi100Code = record.kuaidi100Code || '';
|
||||
addForm.kdniaoCode = record.kdniaoCode || '';
|
||||
addForm.sortNumber = record.sortNumber || 0;
|
||||
addModalVisible.value = true;
|
||||
};
|
||||
|
||||
// 删除快递公司
|
||||
const deleteExpress = async (record: ShopExpress) => {
|
||||
try {
|
||||
if (record.expressId) {
|
||||
await removeShopExpress(record.expressId);
|
||||
message.success('删除成功');
|
||||
loadExpressList();
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 添加/编辑提交
|
||||
const handleAddSubmit = async () => {
|
||||
try {
|
||||
await validateAdd();
|
||||
addLoading.value = true;
|
||||
|
||||
if (editingExpress.value) {
|
||||
// 编辑
|
||||
await updateShopExpress({
|
||||
...editingExpress.value,
|
||||
...addForm
|
||||
});
|
||||
message.success('编辑成功');
|
||||
} else {
|
||||
// 添加
|
||||
await addShopExpress(addForm);
|
||||
message.success('添加成功');
|
||||
}
|
||||
|
||||
addModalVisible.value = false;
|
||||
loadExpressList();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '操作失败');
|
||||
} finally {
|
||||
addLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 取消添加/编辑
|
||||
const handleAddCancel = () => {
|
||||
addModalVisible.value = false;
|
||||
resetAddFields();
|
||||
};
|
||||
|
||||
// 更新弹窗显示状态
|
||||
const updateVisible = (visible: boolean) => {
|
||||
emit('update:visible', visible);
|
||||
};
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
updateVisible(false);
|
||||
};
|
||||
|
||||
// 确定
|
||||
const handleSubmit = () => {
|
||||
emit('done');
|
||||
updateVisible(false);
|
||||
};
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
loadExpressList();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.express-setting {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -80,7 +80,7 @@
|
||||
<template v-if="column.key === 'deliveryStatus'">
|
||||
<a-tag v-if="record.deliveryStatus == 10">未发货</a-tag>
|
||||
<a-tag v-if="record.deliveryStatus == 20" color="green">已发货</a-tag>
|
||||
<a-tag v-if="record.deliveryStatus == 30" color="bule">部分发货</a-tag>
|
||||
<a-tag v-if="record.deliveryStatus == 30" color="blue">部分发货</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'orderStatus'">
|
||||
<a-tag v-if="record.orderStatus === 0">未完成</a-tag>
|
||||
@@ -195,6 +195,9 @@
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<OrderInfo v-model:visible="showEdit" :data="current" @done="reload"/>
|
||||
|
||||
<!-- 发货弹窗 -->
|
||||
<DeliveryModal v-model:visible="showDelivery" :data="current" @done="reload"/>
|
||||
</a-page-header>
|
||||
</template>
|
||||
|
||||
@@ -222,6 +225,7 @@ import Search from './components/search.vue';
|
||||
import {getPageTitle} from "@/utils/common";
|
||||
import {toDateString} from 'ele-admin-pro';
|
||||
import OrderInfo from './components/orderInfo.vue';
|
||||
import DeliveryModal from './components/deliveryModal.vue';
|
||||
import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
|
||||
import {pageShopOrder, repairOrder, removeShopOrder, removeBatchShopOrder, updateShopOrder} from "@/api/shop/shopOrder";
|
||||
import {updateUser} from "@/api/system/user";
|
||||
@@ -239,6 +243,8 @@ const current = ref<ShopOrder | null>(null);
|
||||
const showEdit = ref(false);
|
||||
// 是否显示批量移动弹窗
|
||||
const showMove = ref(false);
|
||||
// 是否显示发货弹窗
|
||||
const showDelivery = ref(false);
|
||||
// 加载状态
|
||||
const loading = ref(true);
|
||||
// 激活的标签
|
||||
@@ -493,26 +499,8 @@ const handleCancelOrder = (record: ShopOrder) => {
|
||||
|
||||
// 发货处理
|
||||
const handleDelivery = (record: ShopOrder) => {
|
||||
Modal.confirm({
|
||||
title: '确认发货',
|
||||
content: '确定要将此订单标记为已发货吗？',
|
||||
onOk: async () => {
|
||||
try {
|
||||
const now = new Date();
|
||||
const deliveryTime = toDateString(now, 'yyyy-MM-dd HH:mm:ss');
|
||||
|
||||
await updateShopOrder({
|
||||
...record,
|
||||
deliveryStatus: 20, // 已发货
|
||||
deliveryTime: deliveryTime
|
||||
});
|
||||
message.success('发货成功');
|
||||
reload();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '发货失败');
|
||||
}
|
||||
}
|
||||
});
|
||||
current.value = record;
|
||||
showDelivery.value = true;
|
||||
};
|
||||
|
||||
// 确认收货
|
||||
|
||||
Reference in New Issue
Block a user