fix(router): 修复运单管理详情路由及合同详情路由重复定义问题

- 为 waybill-manage-page、transport-plan-page 等组件增加 routePathLocked 变量锁定路由路径
- 添加 isOwnedRouteActive 计算属性,防止缓存实例错误读取其它路由的 detailId 导致误请求
- watcher 和 openDetail 方法中添加路由守卫,避免多余的请求和误开详情标签
- 修改宿主视图绑定 detailId,避免直接绑定全局 $route.query 导致缓存污染
- 删除 router/views/index.js 中合同管理详情路由重复定义,防止内容区空白问题
- 优化 waybill-import-dialog 组件样式和结构,增加 section-card 包裹表单区域
- 调整相关组件 data、computed、watch 使用,确保第一次立即 watcher 正确读取路由数据
- 验证所有改动后相关页面 HTTP 200,标签页行为正常,解决「运单管理不存在」和合同详情空白问题
This commit is contained in:
2026-09-18 12:22:25 +08:00
parent 986feff7b7
commit ff9fb9168b
9 changed files with 150 additions and 44 deletions
@@ -3020,6 +3020,10 @@ export default {
Location,
OfficeBuilding,
Search,
// watcher /
// dataOptions API data computed watch(immediate) created
// created immediate watcher
routePathLocked: this.$route.path,
form: {},
suppressTransportTypeClear: false,
query: {},
@@ -3596,6 +3600,11 @@ export default {
!this.dialogReadonly
);
},
// tab.js fullPath path
// keep-alive $route id
isOwnedRouteActive() {
return this.$route.path === this.routePathLocked;
},
billingCargoTypeCascaderProps() {
return {
label: 'cargoName',
@@ -3673,6 +3682,9 @@ export default {
detailId: {
immediate: true,
handler(id) {
// 宿 view $route.query.detailId
// id
if (!this.isOwnedRouteActive) return;
if (id !== undefined && id !== null && id !== '') {
this.$nextTick(() => this.openDetail({ id }));
}
@@ -199,13 +199,17 @@
</el-dialog>
<el-dialog v-model="detailVisible" title="导入运单详情" width="90%" append-to-body>
<el-form :inline="true" :model="detailQuery"
><el-form-item label="车牌号/船号"
<section-card class="waybill-search">
<el-form :inline="true" :model="detailQuery"
>
<el-form-item label="车牌号/船号"
><el-input v-model="detailQuery.vehicleNo" clearable /></el-form-item
><el-form-item label="司机/船长姓名"
><el-input v-model="detailQuery.driverName" clearable placeholder="请输入" /></el-form-item
><el-form-item label="司机/船长姓名"
><el-input v-model="detailQuery.driverName" clearable placeholder="请输入" /></el-form-item
><el-button type="primary" @click="loadDetails">查询</el-button></el-form
>
>
</section-card>
<el-table :data="details" border
><el-table-column type="index" label="序号" width="65" /><el-table-column
prop="batchNo"
@@ -593,6 +597,7 @@ import { getList as getDriverList } from '@/api/transportCapacity/driver';
import { getDictionary } from '@/api/system/dictbiz';
import * as api from '@/api/business/waybill-manage';
import { downloadXls } from '@/utils/util';
import SectionCard from '@/components/section-card/main.vue';
const props = defineProps({ modelValue: Boolean, standalone: Boolean, createPage: Boolean });
const emit = defineEmits(['update:modelValue', 'closed']);
@@ -1617,4 +1622,7 @@ const confirmImport = async () => {
:global(.avue-layout--horizontal .waybill-import-create__footer) {
left: 0;
}
.waybill-search .el-form-item{
margin-bottom: 0 !important;
}
</style>
@@ -3518,6 +3518,11 @@ export default {
selectionList: [],
attachmentUploadMode: false,
standaloneFormKey: '',
// $route
// data created Vue Options API
// data computed watch(immediate) created created
// immediate watcher
routePathLocked: this.$route.path,
// / / $route
// keep-alive deactivate $route
// / append-to-body el-dialog
@@ -3600,6 +3605,12 @@ export default {
return this.standaloneDetailPage && this.$route.path === standaloneWaybillDetailRoute;
},
// $route data formPageLocked
// tab.js fullPath path
// keep-alive $route id
// id
isOwnedRouteActive() {
return this.$route.path === this.routePathLocked;
},
detailContainer() {
return this.detailPageLocked ? 'PageDetail' : 'el-dialog';
},
@@ -3867,6 +3878,10 @@ export default {
detailId: {
immediate: true,
handler(id) {
// 宿 view $route.query.id / detailId
// id
// openDetail id
if (!this.isOwnedRouteActive) return;
if (id !== undefined && id !== null && id !== '') {
this.$nextTick(() => this.openDetail({ id }));
}
@@ -4449,6 +4464,9 @@ export default {
},
openDetail(row) {
if (!this.isStandaloneWaybillDetailPage) {
// row.id id
// push
if (!this.isOwnedRouteActive) return;
this.$router.push({ path: standaloneWaybillDetailRoute, query: { id: row.id } });
return;
}
+10 -1
View File
@@ -1,9 +1,11 @@
<template>
<!-- waybill-manage-detail.vue只在当前路由属于本页时才透传 detailId
避免标签页缓存的实例被其它页面的 detailId 污染后误开详情 -->
<transport-plan-page
:api="api"
:config="config"
:crud-option="option"
:detail-id="$route.query.detailId"
:detail-id="detailId"
:menu-width="220"
standalone-form-page
/>
@@ -14,6 +16,8 @@ import TransportPlanPage from './components/transport-plan-page.vue';
import * as api from '@/api/business/transport-plan';
import { config, option } from '@/option/business/transport-plan';
const listRoutePath = '/business/transport-plan';
export default {
components: { TransportPlanPage },
data() {
@@ -23,5 +27,10 @@ export default {
option,
};
},
computed: {
detailId() {
return this.$route.path === listRoutePath ? this.$route.query.detailId : '';
},
},
};
</script>
+14 -1
View File
@@ -1,9 +1,15 @@
<template>
<!--
detailId 必须做路由守卫本组件对应 /business/waybill-manage/detail
$route 是全局响应式的标签页 keep-alive 会缓存本实例路由切到别的详情页后
实例仍会重渲染若无守卫就会把当前页面的 id灌进子组件导致它拿别的单据 id
去查运单 运单管理不存在并误生成一个又一个运单详情标签
-->
<waybill-manage-page
:api="api"
:config="config"
:crud-option="option"
:detail-id="$route.query.id"
:detail-id="detailId"
:menu-width="250"
standalone-detail-page
/>
@@ -14,10 +20,17 @@ import WaybillManagePage from './components/waybill-manage-page.vue';
import * as api from '@/api/business/waybill-manage';
import { config, option } from '@/option/business/waybill-manage';
const detailRoutePath = '/business/waybill-manage/detail';
export default {
components: { WaybillManagePage },
data() {
return { api, config, option };
},
computed: {
detailId() {
return this.$route.path === detailRoutePath ? this.$route.query.id : '';
},
},
};
</script>
+10 -1
View File
@@ -1,9 +1,11 @@
<template>
<!-- waybill-manage-detail.vue保留旧链接 /business/waybill-manage?detailId=xxx 的能力
但只在当前路由确实属于本页时才透传避免被其它页面的 detailId 污染 -->
<waybill-manage-page
:api="api"
:config="config"
:crud-option="option"
:detail-id="$route.query.detailId"
:detail-id="detailId"
:menu-width="250"
standalone-form-page
/>
@@ -14,6 +16,8 @@ import WaybillManagePage from './components/waybill-manage-page.vue';
import * as api from '@/api/business/waybill-manage';
import { config, option } from '@/option/business/waybill-manage';
const listRoutePath = '/business/waybill-manage';
export default {
components: { WaybillManagePage },
data() {
@@ -23,5 +27,10 @@ export default {
option,
};
},
computed: {
detailId() {
return this.$route.path === listRoutePath ? this.$route.query.detailId : '';
},
},
};
</script>