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

refactor(business): 优化派车信息展示和样式布局

Browse Source 
- 将基本信息部分整体包裹在section-card内并调整布局顺序
- 调整收发货路线结构，合并地址和联系人信息至路线节点内
- 使用CSS grid替代部分flex布局，优化网格间距和对齐
- 更新文字换行和溢出处理，增强可读性
- 删除冗余的收发货路线详细信息区域，精简代码结构
- 统一section-card的样式和内部内容伸缩布局
- 调整附件显示方式，保证链接样式一致性
This commit is contained in:
赵忠林
2026-08-07 00:54:19 +08:00
parent d8db9b1edd
commit 9cf005cece
1 changed files with 128 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/views/business/components/business-crud-page.vue
View File

@@ -2114,7 +2114,8 @@
</div>
</div>
<section-card title="基本信息">
<div class="business-crud-page__dispatch-summary">
<section-card title="基本信息" class="business-crud-page__dispatch-summary-card">
<div class="business-crud-page__dispatch-summary-grid">
<div class="business-crud-page__dispatch-summary-item">
<div class="business-crud-page__dispatch-summary-label">客户</div>
@@ -2134,6 +2135,12 @@
{{ dispatchRow.contractName || dispatchRow.contractNo || '-' }}
</div>
</div>
<div class="business-crud-page__dispatch-summary-item is-wide">
<div class="business-crud-page__dispatch-summary-label">货物信息</div>
<div class="business-crud-page__dispatch-summary-value">
{{ dispatchPlanCargoInfo || '-' }}
</div>
</div>
<div class="business-crud-page__dispatch-summary-item">
<div class="business-crud-page__dispatch-summary-label">计划执行时间</div>
<div class="business-crud-page__dispatch-summary-value">
@@ -2144,12 +2151,6 @@
}}
</div>
</div>
<div class="business-crud-page__dispatch-summary-item is-wide">
<div class="business-crud-page__dispatch-summary-label">货物信息</div>
<div class="business-crud-page__dispatch-summary-value">
{{ dispatchPlanCargoInfo || '-' }}
</div>
</div>
<div
class="business-crud-page__dispatch-summary-item business-crud-page__dispatch-summary-item--attachments"
>
@@ -2172,39 +2173,33 @@
</div>
</section-card>
<section-card title="收发货路线">
<section-card title="收发货路线" class="business-crud-page__dispatch-route-card">
<div class="business-crud-page__dispatch-route">
<div class="business-crud-page__dispatch-route-main">
<div class="business-crud-page__dispatch-route-node">
<div class="business-crud-page__dispatch-route-item">
<span class="business-crud-page__dispatch-route-badge is-start">起</span>
<div class="business-crud-page__dispatch-route-body">
<div class="business-crud-page__dispatch-route-title">
{{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }}
</div>
</div>
<div class="business-crud-page__dispatch-route-line" />
<div class="business-crud-page__dispatch-route-node">
<span class="business-crud-page__dispatch-route-badge is-end">终</span>
<div class="business-crud-page__dispatch-route-title">
{{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }}
</div>
</div>
</div>
<div class="business-crud-page__dispatch-route-detail">
<div class="business-crud-page__dispatch-route-detail-item">
<div class="business-crud-page__dispatch-route-detail-label">发货地址</div>
<div class="business-crud-page__dispatch-route-detail-value">
<div class="business-crud-page__dispatch-route-address">
{{ parseDispatchRoutePoint(dispatchRow, 'start').address || '-' }}
</div>
<div class="business-crud-page__dispatch-route-detail-contact">
<div class="business-crud-page__dispatch-route-contact">
{{ parseDispatchRoutePoint(dispatchRow, 'start').contact || '-' }}
</div>
</div>
<div class="business-crud-page__dispatch-route-detail-item">
<div class="business-crud-page__dispatch-route-detail-label">收货地址</div>
<div class="business-crud-page__dispatch-route-detail-value">
</div>
<div class="business-crud-page__dispatch-route-line" />
<div class="business-crud-page__dispatch-route-item">
<span class="business-crud-page__dispatch-route-badge is-end">终</span>
<div class="business-crud-page__dispatch-route-body">
<div class="business-crud-page__dispatch-route-title">
{{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }}
</div>
<div class="business-crud-page__dispatch-route-address">
{{ parseDispatchRoutePoint(dispatchRow, 'end').address || '-' }}
</div>
<div class="business-crud-page__dispatch-route-detail-contact">
<div class="business-crud-page__dispatch-route-contact">
{{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }}
</div>
</div>
@@ -2212,6 +2207,7 @@
</div>
</section-card>
</div>
</div>
<section-card title="待调度列表">
<template #extra>
@@ -9359,13 +9355,27 @@ export default {
}
&__dispatch-summary {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr);
gap: 16px;
align-items: stretch;
margin-bottom: 12px;
}
&__dispatch-summary-card,
&__dispatch-route-card {
display: flex;
flex-direction: column;
:deep(.section-card__body) {
flex: 1;
}
}
&__dispatch-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 24px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 16px;
}
&__dispatch-summary-item {
@@ -9386,7 +9396,7 @@ export default {
&__dispatch-summary-value {
min-height: 20px;
font-size: 14px;
line-height: 1.4;
line-height: 1.45;
color: #303133;
word-break: break-word;
}
@@ -9403,23 +9413,19 @@ export default {
}
&__dispatch-route {
display: flex;
flex-direction: column;
gap: 16px;
display: grid;
grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
gap: 12px;
align-items: center;
justify-items: center;
height: 100%;
}
&__dispatch-route-main {
&__dispatch-route-item {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
&__dispatch-route-node {
display: flex;
align-items: center;
align-items: flex-start;
gap: 10px;
min-width: 0;
max-width: 100%;
}
&__dispatch-route-badge {
@@ -9443,21 +9449,36 @@ export default {
}
}
&__dispatch-route-body {
min-width: 0;
text-align: left;
}
&__dispatch-route-title {
font-size: 16px;
line-height: 1.3;
color: #303133;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
&__dispatch-route-address {
margin-top: 6px;
font-size: 13px;
line-height: 1.45;
color: #606266;
}
&__dispatch-route-contact {
margin-top: 4px;
font-size: 13px;
color: #606266;
}
&__dispatch-route-line {
position: relative;
flex: 0 0 80px;
width: 56px;
height: 2px;
max-width: 120px;
background-image: linear-gradient(
to right,
var(--el-color-primary) 0,
@@ -9476,35 +9497,6 @@ export default {
}
}
&__dispatch-route-detail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 24px;
}
&__dispatch-route-detail-item {
min-width: 0;
}
&__dispatch-route-detail-label {
margin-bottom: 4px;
font-size: 12px;
color: #909399;
}
&__dispatch-route-detail-value {
font-size: 14px;
line-height: 1.4;
color: #303133;
word-break: break-word;
}
&__dispatch-route-detail-contact {
margin-top: 4px;
font-size: 13px;
color: #606266;
}
&__dispatch-list-head {
display: flex;
align-items: center;