b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(loading-manage): 配载管理详情及重新派单改用独立页面

Browse Source 
- 新增 `/business/loading-manage/detail` 路由，详情页由独立页面承载
- 统一将新增、编辑、详情和重新派单均采用独立表单页/详情页显示
- 修改组件内逻辑，新增 `isStandalonePage` 计算属性统一控制页面与弹窗切换
- 修改列表页链接及操作行为，详情和重新派单按钮跳转至对应独立页面
- 去除旧详情弹窗模式，相关样式调整支持独立页面自然滚动
- 添加路由监听，支持页面刷新和切换时正确初始化详情或表单数据
- 兼容老链接 `/business/loading-manage?detailId=x` 自动跳详情新路由
- 修正弹窗底栏样式，去除写死间距，统一由全局规则控制
- 代码中禁止顶层 scoped style 使用 `//` 注释，改用 `/* */` 避免编译错误
This commit is contained in:
赵忠林
2026-09-17 22:40:41 +08:00
parent 3d6e297147
commit 5bb072223f
5 changed files with 185 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/business/components/waybill-manage-page.vue
+4 -1
View File
@@ -4488,7 +4488,10 @@ export default {
this.$message.info('当前配载单暂无详情数据');
return;
}
this.$router.push({ path: '/business/loading-manage', query: { detailId: id } });
this.$router.push({
path: '/business/loading-manage/detail',
query: { id, name: '配载单详情' },
});
},
loadWaybillDetailProcessNodes(projectId) {
this.waybillDetailProcessNodes = [];
src/views/business/loading-manage.vue
+110 -41
View File
@@ -1,6 +1,6 @@
<template>
<basic-container class="loading-manage-page">
<div v-if="!isStandaloneFormPage" class="loading-manage-page__search">
<div v-if="!isStandalonePage" class="loading-manage-page__search">
<el-form :model="searchForm" label-position="right" label-width="88px">
<div class="loading-manage-page__search-grid">
<el-form-item label="配载单号">
@@ -222,7 +222,7 @@
</el-form>
</div>
<div v-if="!isStandaloneFormPage" class="loading-manage-page__toolbar">
<div v-if="!isStandalonePage" class="loading-manage-page__toolbar">
<div class="loading-manage-page__toolbar-left">
<el-button type="primary" @click="openLoadingDialog('add')">新建配载</el-button>
<el-button type="primary" plain @click="handleExport">批量导出</el-button>
@@ -242,7 +242,7 @@
</div>
<el-table
v-if="!isStandaloneFormPage"
v-if="!isStandalonePage"
ref="tableRef"
v-loading="loading"
:data="tableData"
@@ -259,7 +259,7 @@
<el-link
type="primary"
class="loading-manage-page__link"
@click="openLoadingDialog('view', row)"
@click="gotoLoadingDetail(row)"
>{{ row.loadingNo }}</el-link
>
</template>
@@ -363,7 +363,7 @@
</el-table-column>
</el-table>
<div v-if="!isStandaloneFormPage" class="loading-manage-page__pagination">
<div v-if="!isStandalonePage" class="loading-manage-page__pagination">
<el-pagination
v-model:current-page="page.currentPage"
v-model:page-size="page.pageSize"
@@ -377,26 +377,28 @@
</div>
<component
:is="isStandaloneFormPage ? 'div' : 'el-dialog'"
:model-value="isStandaloneFormPage ? undefined : dialogVisible"
:title="isStandaloneFormPage ? undefined : dialogTitle"
:append-to-body="isStandaloneFormPage ? undefined : true"
:destroy-on-close="isStandaloneFormPage ? undefined : true"
:width="isStandaloneFormPage ? undefined : '96%'"
:top="isStandaloneFormPage ? undefined : '3vh'"
:is="isStandalonePage ? 'div' : 'el-dialog'"
:model-value="isStandalonePage ? undefined : dialogVisible"
:title="isStandalonePage ? undefined : dialogTitle"
:append-to-body="isStandalonePage ? undefined : true"
:destroy-on-close="isStandalonePage ? undefined : true"
:width="isStandalonePage ? undefined : '96%'"
:top="isStandalonePage ? undefined : '3vh'"
:class="[
'loading-manage-dialog',
{ 'loading-manage-form-dialog': isStandaloneFormPage },
{ 'loading-manage-form-page': isStandaloneFormPage },
{ 'loading-manage-form-dialog': isStandalonePage },
{ 'loading-manage-form-page': isStandalonePage },
]"
:modal="isStandaloneFormPage ? undefined : true"
:show-close="isStandaloneFormPage ? undefined : true"
:close-on-click-modal="isStandaloneFormPage ? undefined : true"
:close-on-press-escape="isStandaloneFormPage ? undefined : true"
@update:model-value="value => !isStandaloneFormPage && (dialogVisible = value)"
:modal="isStandalonePage ? undefined : true"
:show-close="isStandalonePage ? undefined : true"
:close-on-click-modal="isStandalonePage ? undefined : true"
:close-on-press-escape="isStandalonePage ? undefined : true"
@update:model-value="value => !isStandalonePage && (dialogVisible = value)"
@closed="resetLoadingDialog"
>
<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>
<div v-if="isStandalonePage" class="archive-page-form__title">{{
isStandaloneDetailPage ? detailPageTitle : formPageTitle
}}</div>
<div v-loading="dialogLoading" class="loading-manage-dialog__body">
<div v-if="dialogReadonly" class="loading-detail">
<section-card title="配载单详情">
@@ -1229,7 +1231,7 @@
</el-form>
</div>
<div v-if="isStandaloneFormPage" class="loading-manage-dialog__footer">
<div v-if="isStandalonePage" class="loading-manage-dialog__footer">
<template v-if="dialogReadonly">
<el-button @click="closeLoadingDialog">关闭</el-button>
</template>
@@ -1243,7 +1245,7 @@
</el-button>
</template>
</div>
<template v-if="!isStandaloneFormPage" #footer>
<template v-if="!isStandalonePage" #footer>
<div class="loading-manage-dialog__footer">
<template v-if="dialogReadonly">
<el-button @click="closeLoadingDialog">关闭</el-button>
@@ -1268,7 +1270,7 @@
width="78%"
class="loading-route-change-dialog"
>
<el-tabs v-model="routeChangeTab">
<el-tabs type="border-card" v-model="routeChangeTab">
<el-tab-pane label="变更路线" name="change">
<section-card title="关联子运单地址">
<el-table :data="routeChangeRows" border>
@@ -1741,32 +1743,58 @@ export default {
}
);
},
// 独立表单页：/business/loading-manage/form?mode=add|edit|reassign
isStandaloneFormPage() {
return (
this.$route.path === '/business/loading-manage/form' &&
['add', 'edit'].includes(this.$route.query.mode)
['add', 'edit', 'reassign'].includes(this.$route.query.mode)
);
},
// 独立详情页：/business/loading-manage/detail?id=xxx
isStandaloneDetailPage() {
return this.$route.path === '/business/loading-manage/detail';
},
// 列表容器隐藏搜索栏 / 工具栏 / 表格 / 分页的统一开关
isStandalonePage() {
return this.isStandaloneFormPage || this.isStandaloneDetailPage;
},
formPageDefaultTitle() {
const titleMap = {
add: '新增配载管理',
edit: '编辑配载管理',
reassign: '重新派单',
};
return titleMap[this.$route.query.mode] || '新增配载管理';
},
formPageTitle() {
return (
this.$route.query.name || `${this.$route.query.mode === 'edit' ? '编辑' : '新增'}配载管理`
);
return this.$route.query.name || this.formPageDefaultTitle;
},
detailPageTitle() {
return this.$route.query.name || '配载单详情';
},
},
mounted() {
this.loadTransportTypeOptions();
this.loadTable();
if (this.isStandaloneFormPage) {
if (this.isStandalonePage) {
this.syncStandaloneTagTitle();
this.initStandaloneFormPage();
if (this.isStandaloneDetailPage) this.initStandaloneDetailPage();
else this.initStandaloneFormPage();
}
// 兼容旧链接：/business/loading-manage?detailId=xxx 直接跳独立详情页
const detailId = this.$route.query.detailId;
if (detailId) this.openLoadingDialog('view', { id: detailId });
if (detailId) this.gotoLoadingDetail({ id: detailId });
},
watch: {
$route(to, from) {
if (this.isStandaloneFormPage) {
if (this.isStandalonePage) {
this.syncStandaloneTagTitle();
if (this.isStandaloneDetailPage) {
// 记录变化或上一个页面不是详情态（例如从表单页/列表页进来）时重新拉取详情
const idChanged = String(to.query.id || '') !== String(from?.query?.id || '');
if (idChanged || this.dialogMode !== 'view') this.initStandaloneDetailPage();
return;
}
if (
to.query.mode !== from?.query?.mode ||
String(to.query.id || '') !== String(from?.query.id || '') ||
@@ -1779,13 +1807,13 @@ export default {
}
},
'$route.query.detailId'(detailId) {
if (detailId) this.openLoadingDialog('view', { id: detailId });
if (detailId) this.gotoLoadingDetail({ id: detailId });
},
},
methods: {
syncStandaloneTagTitle() {
if (!this.isStandaloneFormPage) return;
const title = this.$route.query.mode === 'edit' ? '编辑配载管理' : '新增配载管理';
if (!this.isStandalonePage) return;
const title = this.isStandaloneDetailPage ? this.detailPageTitle : this.formPageDefaultTitle;
if (this.$route.query.name === title) return;
this.$store.commit('SET_TAG', {
fullPath: this.$route.fullPath,
@@ -2189,9 +2217,9 @@ export default {
},
handleRowAction(type, row) {
const actionMap = {
view: () => this.openLoadingDialog('view', row),
view: () => this.gotoLoadingDetail(row),
edit: () => this.openLoadingDialog('edit', row),
reassign: () => this.openLoadingDialog('reassign', row),
reassign: () => this.gotoLoadingReassign(row),
delete: () => this.deleteLoading(row),
start: () => this.startLoading(row),
cancel: () => this.cancelLoading(row),
@@ -2199,9 +2227,44 @@ export default {
};
actionMap[type]?.();
},
// 详情改为独立页面（与新增/编辑一致）
gotoLoadingDetail(row = {}) {
const id = row.id || row.loadingId || row.loadingManageId;
if (!id) {
ElMessage.info('当前配载单暂无详情数据');
return;
}
if (this.isStandaloneDetailPage && String(this.$route.query.id || '') === String(id)) return;
this.$router.push({
path: '/business/loading-manage/detail',
query: { id, name: '配载单详情' },
});
},
// 重新派单改为独立页面
gotoLoadingReassign(row = {}) {
if (!row.id) {
ElMessage.warning('配载单不存在，无法重新派单');
return;
}
this.$router.push({
path: '/business/loading-manage/form',
query: { mode: 'reassign', id: row.id, name: '重新派单' },
});
},
async initStandaloneDetailPage() {
if (!this.isStandaloneDetailPage) return;
const id = this.$route.query.id;
if (!id) {
ElMessage.warning('缺少配载单参数，无法查看详情');
this.closeLoadingDialog();
return;
}
await this.openLoadingDialog('view', { id });
},
async initStandaloneFormPage() {
if (!this.isStandaloneFormPage) return;
const mode = this.$route.query.mode === 'edit' ? 'edit' : 'add';
const queryMode = this.$route.query.mode;
const mode = ['edit', 'reassign'].includes(queryMode) ? queryMode : 'add';
const copyId = mode === 'add' ? this.$route.query.copyId : '';
await this.openLoadingDialog(mode, {
id: copyId || this.$route.query.id,
@@ -2222,7 +2285,12 @@ export default {
}
},
async openLoadingDialog(mode, row) {
if (['add', 'edit'].includes(mode) && !this.isStandaloneFormPage) {
// 列表页进入新增/编辑/重新派单：统一走独立页面
if (['add', 'edit', 'reassign'].includes(mode) && !this.isStandaloneFormPage) {
if (mode === 'reassign') {
this.gotoLoadingReassign(row || {});
return;
}
this.$router.push({
path: '/business/loading-manage/form',
query: {
@@ -2267,7 +2335,7 @@ export default {
}
},
closeLoadingDialog() {
if (this.isStandaloneFormPage) {
if (this.isStandalonePage) {
this.$router.$avueRouter?.closeTag?.();
this.$router.push({ path: '/business/loading-manage', query: {} });
return;
@@ -3433,7 +3501,6 @@ export default {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.loading-manage-dialog__table-toolbar {
@@ -3767,7 +3834,9 @@ export default {
box-sizing: border-box;
background: #f5f6fa;
}
:global(.loading-manage-form-page .loading-manage-dialog__body) {
/* 独立页面（新增/编辑/重新派单/详情）：内容随 #avue-view 自然滚动，不做内嵌 78vh 滚动盒。
此处权重必须高于 .loading-manage-dialog .loading-manage-dialog__body，故带上 .loading-manage-page 外壳。 */
:global(.loading-manage-page .loading-manage-form-dialog.loading-manage-form-page .loading-manage-dialog__body) {
max-height: none;
overflow: visible;
padding-right: 0;