201 lines
5.4 KiB
Markdown
201 lines
5.4 KiB
Markdown
# 装车订单页面修复说明
|
||
|
||
## 问题分析
|
||
|
||
`loadingOrder.vue` 页面目前使用错误的接口：
|
||
- **当前使用：** `orderList(params)` → 调用 `/delivery/pageDeliveryOrderList`
|
||
- **应该使用：** `orderPageQuery(params)` → 调用 `/order/list`
|
||
|
||
## 问题根源
|
||
|
||
1. **接口混用：** `orderList` 查询的是 `delivery` 装车运单表，而不是 `order` 订单表
|
||
2. **字段不匹配：** 页面显示的字段（供应商、采购商、结算方式等）应该来自 `order` 表
|
||
3. **数据结构错误：** 返回的是运单数据，而不是订单数据
|
||
|
||
## 修复方案
|
||
|
||
### 1. 修改导入的接口函数
|
||
|
||
**文件：** `loadingOrder.vue` 第83行
|
||
|
||
```javascript
|
||
// 修改前
|
||
import { orderList, orderDel, updateDeliveryStatus, clearDeviceDeliveryId } from '@/api/shipping.js';
|
||
|
||
// 修改后
|
||
import { orderPageQuery, orderDelete, orderUpdate } from '@/api/shipping.js';
|
||
import { orderList, updateDeliveryStatus, clearDeviceDeliveryId } from '@/api/shipping.js'; // 保留旧的装车订单相关接口
|
||
```
|
||
|
||
### 2. 修改列表查询接口
|
||
|
||
**文件：** `loadingOrder.vue` 第236行
|
||
|
||
```javascript
|
||
// 修改前
|
||
orderList(params)
|
||
|
||
// 修改后
|
||
orderPageQuery(params)
|
||
```
|
||
|
||
### 3. 修改表格列字段
|
||
|
||
**文件：** `loadingOrder.vylus` 第21-50行
|
||
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<el-table-column label="订单编号" prop="deliveryNumber" />
|
||
<el-table-column label="供应商" prop="supplierName" />
|
||
<el-table-column label="采购商" prop="buyerName" />
|
||
<el-table-column label="结算方式" prop="settlementMethod" />
|
||
<el-table-column label="创建人" prop="createByName" />
|
||
|
||
<!-- 修改后 -->
|
||
<el-table-column label="订单ID" prop="id" />
|
||
<el-table-column label="买方" prop="buyerName" />
|
||
<el-table-column label="卖方" prop="sellerName" />
|
||
<el-table-column label="结算方式" prop="settlementTypeDesc" />
|
||
<el-table-column label="创建人" prop="createdByName" />
|
||
```
|
||
|
||
### 4. 修改删除函数
|
||
|
||
**文件：** `loadingOrder.vue` 第388行
|
||
|
||
```javascript
|
||
// 修改前
|
||
const del = (id) => {
|
||
ElMessageBox.confirm('请确认是否删除订单？删除后将同时清空该订单关联的所有智能设备的delivery_id和weight字段', '提示', {
|
||
cancelButtonText: '取消',
|
||
confirmButtonText: '确定',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
clearDeviceDeliveryId(id).then(() => {
|
||
orderDel(id).then(() => {
|
||
ElMessage.success('订单删除成功，相关设备的绑定和重量信息已清空');
|
||
getDataList();
|
||
});
|
||
});
|
||
});
|
||
};
|
||
|
||
// 修改后
|
||
const del = (id) => {
|
||
ElMessageBox.confirm('请确认是否删除订单？删除后将不可恢复', '提示', {
|
||
cancelButtonText: '取消',
|
||
confirmButtonText: '确定',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
orderDelete(id).then((res) => {
|
||
if (res.code === 200) {
|
||
ElMessage.success('订单删除成功');
|
||
getDataList();
|
||
} else {
|
||
ElMessage.error(res.msg || '删除订单失败');
|
||
}
|
||
}).catch((error) => {
|
||
console.error('删除订单失败:', error);
|
||
ElMessage.error('删除订单失败');
|
||
});
|
||
});
|
||
};
|
||
```
|
||
|
||
### 5. 简化搜索表单
|
||
|
||
**文件：** `loadingOrder.vue` 第102-132行
|
||
|
||
```javascript
|
||
// 修改搜索表单字段，只保留订单相关的搜索
|
||
const formItemList = reactive([
|
||
{
|
||
label: '买方',
|
||
type: 'input',
|
||
param: 'buyerName',
|
||
span: 6,
|
||
placeholder: '请输入买方',
|
||
},
|
||
{
|
||
label: '卖方',
|
||
type: 'input',
|
||
param: 'sellerName',
|
||
span: 6,
|
||
placeholder: '请输入卖方',
|
||
},
|
||
{
|
||
label: '创建时间',
|
||
type: 'daterange',
|
||
param: 'createTimeRange',
|
||
span: 6,
|
||
startPlaceholder: المملكة '开始日期',
|
||
endPlaceholder: '结束日期',
|
||
},
|
||
]);
|
||
```
|
||
|
||
### 6. 移除不需要的功能
|
||
|
||
由于 `order` 表是简化的订单管理，需要移除以下不需要的功能：
|
||
- 分配设备
|
||
- 查看设备
|
||
- 装车
|
||
- 编辑状态
|
||
|
||
```vue
|
||
<!-- 简化操作列 -->
|
||
<el-table-column label="操作" width="200">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="showEditDialog(scope.row)">编辑</el-button>
|
||
<el-button link type="primary" @click="del(scope.row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
```
|
||
|
||
## 数据对比
|
||
|
||
### order 表返回的数据结构
|
||
|
||
```json
|
||
{
|
||
"id": 1,
|
||
"buyerId": "10,11",
|
||
"sellerId": "5,6",
|
||
"settlementType": 1,
|
||
"buyerName": "张三,李四",
|
||
"sellerName": "王五,赵六",
|
||
"settlementTypeDesc": "上车重量",
|
||
"createdByName": "管理员",
|
||
"createTime": "2025-01-20 10:00:00"
|
||
}
|
||
```
|
||
|
||
### delivery 表返回的数据结构
|
||
|
||
```json
|
||
{
|
||
"id": 89,
|
||
"deliveryNumber": "ZC20251027161826",
|
||
"deliveryTitle": "2222",
|
||
"ratedQuantity": 30,
|
||
"supplierId": "1,2",
|
||
"buyerId": 10,
|
||
"status": 1,
|
||
"createByName": "管理员"
|
||
}
|
||
```
|
||
|
||
## 执行步骤
|
||
|
||
1. 修改 `loadingOrder.vue` 文件（按上述方案）
|
||
2. 删除不需要的对话框组件引用
|
||
3. 调整页面布局以适应新的数据结构
|
||
4. 测试功能确保正常
|
||
|
||
## 注意事项
|
||
|
||
1. **向后兼容：** 旧的装车订单功能（delivery表）仍然保留，只是这个页面应该展示订单表
|
||
2. **数据一致性：** 确保数据库已执行 `add_order_id_to_delivery.sql`
|
||
3. **权限设置：** 确保有 `order:list`, `order:add`, `order:edit`, `order:delete` 权限
|
||
|