refactor(wms/delivery/waybill): 替换订单编号手动输入为下拉选择组件
重构运单页面的订单编号选择模块，将原有的自动补全输入框+弹窗选择的方式改为远程搜索下拉选择器，移除冗余的订单选择对话框、绑定解绑切换相关逻辑，优化代码结构并统一订单数据处理流程
This commit is contained in:
@@ -151,19 +151,6 @@ export const constantRoutes = [
|
||||
}
|
||||
],
|
||||
},
|
||||
// {
|
||||
// path: '/wms/seal',
|
||||
// component: Layout,
|
||||
// hidden: true,
|
||||
// children: [
|
||||
// {
|
||||
// path: 'sealDetail/:bizId',
|
||||
// component: () => import('@/views/wms/seal/sealDetail'),
|
||||
// name: 'WmsSealDetail',
|
||||
// meta: { title: '用印详情' }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
@@ -182,18 +169,6 @@ export const dynamicRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/ems/assisted/statistics',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: () => import('@/views/ems/assisted/statistics.vue'),
|
||||
name: 'AuxiliaryStatistics',
|
||||
meta: { title: '公辅消耗统计', icon: 'chart' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system/role-auth',
|
||||
component: Layout,
|
||||
|
||||
@@ -175,55 +175,30 @@
|
||||
placeholder="请选择发货时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- 如果没有绑定订单，这里是使用手机号字段来存储手填的订单编号 -->
|
||||
<el-form-item label="订单编号" prop="principalPhone" v-if="!form.orderId">
|
||||
<div style="display: flex; gap: 10px; align-items: center;">
|
||||
<el-autocomplete
|
||||
v-model="form.principalPhone"
|
||||
:fetch-suggestions="queryOrderSuggestions"
|
||||
placeholder="请输入订单编号"
|
||||
style="flex: 1;"
|
||||
value-key="orderCode"
|
||||
@select="onOrderAutoSelect"
|
||||
clearable
|
||||
:highlight-first-item="true"
|
||||
popper-class="order-autocomplete-popper"
|
||||
<el-form-item label="订单编号" prop="orderId">
|
||||
<el-select
|
||||
v-model="form.orderId"
|
||||
placeholder="请选择订单编号"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="remoteSearchOrders"
|
||||
:loading="orderLoading"
|
||||
clearable
|
||||
style="width: 100%;"
|
||||
@change="onOrderSelectChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in orderList"
|
||||
:key="item.orderId"
|
||||
:label="`${item.orderCode} - ${item.companyName}`"
|
||||
:value="item.orderId"
|
||||
>
|
||||
<template slot-scope="{ item }">
|
||||
<div class="order-suggestion-item">
|
||||
<span class="suggestion-code">{{ item.orderCode }}</span>
|
||||
<span class="suggestion-company">{{ item.companyName }}</span>
|
||||
<span class="suggestion-salesman">{{ item.salesman }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
<el-button type="primary" size="small" @click="bindOrder">绑定订单</el-button>
|
||||
</div>
|
||||
<span class="suggestion-code">{{ item.orderCode }}</span>
|
||||
<span class="suggestion-company">{{ item.companyName }}</span>
|
||||
<span class="suggestion-salesman">{{ item.salesman }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单">
|
||||
<div style="display: flex; gap: 10px; align-items: center;">
|
||||
<el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled style="flex: 1;" />
|
||||
<el-button type="warning" size="small" @click="unbindOrder">解绑</el-button>
|
||||
<el-button type="primary" size="small" @click="changeOrder">切换订单</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 订单选择对话框 -->
|
||||
<el-dialog title="选择订单" :visible.sync="orderDialogVisible" width="800px" append-to-body>
|
||||
<el-input @change="loadOrderList" v-model="orderQuery" placeholder="输入关键词搜索" style="margin-bottom: 10px;"
|
||||
@input="handleOrderSearch" />
|
||||
<el-table v-loading="orderLoading" :data="orderList" max-height="500px" style="width: 100%"
|
||||
@row-click="handleOrderSelect">
|
||||
<el-table-column prop="orderCode" label="订单编号" />
|
||||
<el-table-column prop="companyName" label="客户公司" />
|
||||
<el-table-column prop="salesman" label="销售员" />
|
||||
<el-table-column prop="contractCode" label="合同号" />
|
||||
<el-table-column prop="deliveryDate" label="交货日期" />
|
||||
</el-table>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="orderDialogVisible = false">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-form-item label="收货单位" prop="consigneeUnit">
|
||||
<el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
|
||||
</el-form-item>
|
||||
@@ -357,13 +332,7 @@ export default {
|
||||
// 订单列表
|
||||
orderList: [],
|
||||
orderLoading: false,
|
||||
// 订单选择对话框
|
||||
orderDialogVisible: false,
|
||||
// 订单搜索关键词
|
||||
orderQuery: '',
|
||||
orderId: '',
|
||||
// 订单自动补全
|
||||
orderSuggestLoading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -391,7 +360,7 @@ export default {
|
||||
/** 加载订单列表 */
|
||||
loadOrderList() {
|
||||
this.orderLoading = true;
|
||||
listOrder({ pageNum: 1, pageSize: 100, keyword: this.orderQuery }).then(response => {
|
||||
listOrder({ pageNum: 1, pageSize: 100 }).then(response => {
|
||||
this.orderList = response.rows || [];
|
||||
this.orderLoading = false;
|
||||
}).catch(error => {
|
||||
@@ -638,78 +607,41 @@ export default {
|
||||
planId: this.selectedPlan.planId
|
||||
}, `deliveryPlan_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
/** 绑定订单 */
|
||||
bindOrder() {
|
||||
this.orderDialogVisible = true;
|
||||
},
|
||||
/** 解绑订单 */
|
||||
unbindOrder() {
|
||||
this.form.orderId = undefined;
|
||||
this.form.orderCode = undefined;
|
||||
this.form.consigneeUnit = undefined;
|
||||
this.form.principal = undefined;
|
||||
},
|
||||
/** 切换订单 */
|
||||
changeOrder() {
|
||||
this.orderDialogVisible = true;
|
||||
},
|
||||
/** 订单搜索 */
|
||||
handleOrderSearch() {
|
||||
// 搜索逻辑已在computed中处理
|
||||
},
|
||||
/** 选择订单 */
|
||||
handleOrderSelect(row) {
|
||||
this.form.orderId = row.orderId;
|
||||
this.form.orderCode = row.orderCode;
|
||||
this.form.consigneeUnit = row.companyName;
|
||||
this.form.principal = row.salesman;
|
||||
this.orderDialogVisible = false;
|
||||
},
|
||||
/** 订单编号自动补全 */
|
||||
queryOrderSuggestions(queryString, callback) {
|
||||
if (!queryString || queryString.trim() === '') {
|
||||
callback([]);
|
||||
/** 订单下拉选择变更 */
|
||||
onOrderSelectChange(orderId) {
|
||||
if (!orderId) {
|
||||
this.form.orderCode = undefined;
|
||||
this.form.consigneeUnit = undefined;
|
||||
this.form.principal = undefined;
|
||||
return;
|
||||
}
|
||||
this.orderSuggestLoading = true;
|
||||
listOrder({ pageNum: 1, pageSize: 10, keyword: queryString }).then(response => {
|
||||
const suggestions = (response.rows || []).map(item => ({
|
||||
...item,
|
||||
value: item.orderCode
|
||||
}));
|
||||
this.orderSuggestLoading = false;
|
||||
callback(suggestions);
|
||||
}).catch(() => {
|
||||
this.orderSuggestLoading = false;
|
||||
callback([]);
|
||||
});
|
||||
},
|
||||
/** 自动补全选择订单 */
|
||||
onOrderAutoSelect(item) {
|
||||
const existing = this.deliveryWaybillList.find(
|
||||
d => d.orderId === item.orderId || d.orderCode === item.orderCode
|
||||
);
|
||||
if (existing) {
|
||||
this.$confirm(
|
||||
`订单"${item.orderCode}"已绑定在发货单"${existing.waybillName}"中，确定继续绑定？`,
|
||||
'提示',
|
||||
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
|
||||
).then(() => {
|
||||
this.doBindOrder(item);
|
||||
}).catch(() => {
|
||||
this.form.principalPhone = item.orderCode;
|
||||
});
|
||||
} else {
|
||||
this.doBindOrder(item);
|
||||
const order = this.orderList.find(o => o.orderId === orderId);
|
||||
if (order) {
|
||||
this.form.orderCode = order.orderCode;
|
||||
this.form.consigneeUnit = order.companyName;
|
||||
this.form.principal = order.salesman;
|
||||
}
|
||||
},
|
||||
/** 执行订单绑定并填写信息 */
|
||||
doBindOrder(item) {
|
||||
this.form.orderId = item.orderId;
|
||||
this.form.orderCode = item.orderCode;
|
||||
this.form.consigneeUnit = item.companyName;
|
||||
this.form.principal = item.salesman;
|
||||
this.form.principalPhone = item.orderCode;
|
||||
/** 远程搜索订单 */
|
||||
remoteSearchOrders(query) {
|
||||
if (query) {
|
||||
this.orderLoading = true;
|
||||
listOrder({ pageNum: 1, pageSize: 20, keyword: query }).then(response => {
|
||||
this.orderList = response.rows || [];
|
||||
this.orderLoading = false;
|
||||
}).catch(() => {
|
||||
this.orderLoading = false;
|
||||
});
|
||||
} else {
|
||||
// 无查询词时加载默认列表
|
||||
this.orderLoading = true;
|
||||
listOrder({ pageNum: 1, pageSize: 100 }).then(response => {
|
||||
this.orderList = response.rows || [];
|
||||
this.orderLoading = false;
|
||||
}).catch(() => {
|
||||
this.orderLoading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 打印发货单 */
|
||||
handlePrint(row, printType) {
|
||||
@@ -947,33 +879,3 @@ export default {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.order-autocomplete-popper {
|
||||
min-width: 380px !important;
|
||||
}
|
||||
|
||||
.order-autocomplete-popper .order-suggestion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.order-autocomplete-popper .suggestion-code {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.order-autocomplete-popper .suggestion-company {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.order-autocomplete-popper .suggestion-salesman {
|
||||
color: #409eff;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user