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

Compare commits

base: b2894lxlx:cf04d480106cf2de5e4dbcce98ed0b534808ffa1
Branches Tags
b2894lxlx:master b2894lxlx:dev1 b2894lxlx:zzl
..
compare: b2894lxlx:bb580b2bfcbbaa8a3b5ba7235ebe2ef705e9aaac
Branches Tags
b2894lxlx:master b2894lxlx:dev1 b2894lxlx:zzl

6 Commits
cf04d48010 ... bb580b2bfc

Author SHA1 Message Date
赵忠林
bb580b2bfc style(business): 优化派遣摘要及路线项布局样式 
- 调整派遣摘要网格列宽，改善整体布局比例
- 增加派遣路线容器间距，提升视觉分隔效果
- 修改派遣路线项最大宽度和内边距，提升内容展示空间
- 添加派遣路线项最小高度及虚线边框，增强区块感和可视性
- 调整派遣路线项边角圆角，优化界面圆润度
 2026-08-07 01:41:35 +08:00
赵忠林
6c91889e33 style(business): 优化调度路线组件样式及结构调整 
- 用车辆图标替换调度路线横线，提升视觉表现
- 调整调度路线布局，使用 grid 增强对齐和间距控制
- 修改调度路线节点样式，统一圆形背景和阴影效果
- 优化标题、地址、联系人文本样式，增加省略号和颜色区分
- 调整调度路线图标容器样式，增加边框和柔和阴影
- 使用伪元素实现两侧虚线提醒，增强组件连接感
 2026-08-07 01:29:32 +08:00
赵忠林
4bef3430e0 refactor(business): 优化派车信息展示和样式布局 
- 将基本信息部分整体包裹在section-card内并调整布局顺序
- 调整收发货路线结构，合并地址和联系人信息至路线节点内
- 使用CSS grid替代部分flex布局，优化网格间距和对齐
- 更新文字换行和溢出处理，增强可读性
- 删除冗余的收发货路线详细信息区域，精简代码结构
- 统一section-card的样式和内部内容伸缩布局
- 调整附件显示方式，保证链接样式一致性
 2026-08-07 01:21:46 +08:00
赵忠林
17d12d279d refactor(business): 优化派车信息展示和样式布局 
- 将基本信息部分整体包裹在section-card内并调整布局顺序
- 调整收发货路线结构，合并地址和联系人信息至路线节点内
- 使用CSS grid替代部分flex布局，优化网格间距和对齐
- 更新文字换行和溢出处理，增强可读性
- 删除冗余的收发货路线详细信息区域，精简代码结构
- 统一section-card的样式和内部内容伸缩布局
- 调整附件显示方式，保证链接样式一致性
 2026-08-07 01:03:29 +08:00
赵忠林
9cf005cece refactor(business): 优化派车信息展示和样式布局 
- 将基本信息部分整体包裹在section-card内并调整布局顺序
- 调整收发货路线结构，合并地址和联系人信息至路线节点内
- 使用CSS grid替代部分flex布局，优化网格间距和对齐
- 更新文字换行和溢出处理，增强可读性
- 删除冗余的收发货路线详细信息区域，精简代码结构
- 统一section-card的样式和内部内容伸缩布局
- 调整附件显示方式，保证链接样式一致性
 2026-08-07 00:54:19 +08:00
赵忠林
d8db9b1edd feat(table): 调整表格操作列宽度并统一文字链接间距 
- /business/project-apply 主表操作列宽度固定为 220，移除 applyTableMenuWidth 调用
- /business/temporary-credit-limit 通过传入 menuWidth prop 固定操作列宽度为 180
- /base/common-address 操作列宽度由 220 降至 180
- /business/process-config 操作列宽度由 320 调整为 180，修复末尾语法错误
- /vehicle/insurance-record 操作列宽度先降至 140 后改回 160，后全部车/船务管理模块记录页统一为 180
- 多个车/船务管理模块相关 option 文件及 vue 文件操作列宽统调为 180
- 新增 business-crud-page 组件 menuWidth prop，支持外部传值控制操作列宽度
- 全站操作列文字链接去除 el-link 默认 margin，避免和 gap 叠加导致文字间距过宽
- 优化操作列按钮过多时自动换行展示逻辑，确保按钮不被裁切
 2026-08-07 00:44:26 +08:00
2 changed files with 175 additions and 155 deletions
Expand all files Collapse all files

2
src/option/business/process-config.js
View File

@@ -178,5 +178,5 @@ export const option = {
updateBtnText: '保存', updateBtnText: '保存',
dialogTop: '10px', dialogTop: '10px',
dialogWidth: '96%', dialogWidth: '96%',
menuWidth: 180, menuWidth: 200,
}; };

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

@@ -2114,103 +2114,101 @@
</div> </div>
</div> </div>
<section-card title="基本信息"> <div class="business-crud-page__dispatch-summary">
<div class="business-crud-page__dispatch-summary-grid"> <section-card title="基本信息" class="business-crud-page__dispatch-summary-card">
<div class="business-crud-page__dispatch-summary-item"> <div class="business-crud-page__dispatch-summary-grid">
<div class="business-crud-page__dispatch-summary-label">客户</div> <div class="business-crud-page__dispatch-summary-item">
<div class="business-crud-page__dispatch-summary-value"> <div class="business-crud-page__dispatch-summary-label">客户</div>
{{ dispatchRow.customerName || '-' }} <div class="business-crud-page__dispatch-summary-value">
{{ dispatchRow.customerName || '-' }}
</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">
{{ dispatchRow.projectName || '-' }}
</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">
{{ dispatchRow.contractName || dispatchRow.contractNo || '-' }}
</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">
{{
[dispatchRow.planStartDate, dispatchRow.planEndDate]
.filter(Boolean)
.join(' ~ ') || '-'
}}
</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"
>
<div class="business-crud-page__dispatch-summary-label">附件</div>
<div class="business-crud-page__dispatch-summary-value">
<el-link
v-for="(item, index) in dispatchAttachmentRows"
:key="dispatchAttachmentLabel(item) + index"
type="primary"
:href="dispatchAttachmentUrl(item) || undefined"
:underline="false"
target="_blank"
class="business-crud-page__dispatch-attachment-link"
>
{{ dispatchAttachmentLabel(item) }}
</el-link>
<span v-if="!dispatchAttachmentRows.length">-</span>
</div>
</div> </div>
</div> </div>
<div class="business-crud-page__dispatch-summary-item"> </section-card>
<div class="business-crud-page__dispatch-summary-label">项目</div>
<div class="business-crud-page__dispatch-summary-value">
{{ dispatchRow.projectName || '-' }}
</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">
{{ dispatchRow.contractName || dispatchRow.contractNo || '-' }}
</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">
{{
[dispatchRow.planStartDate, dispatchRow.planEndDate]
.filter(Boolean)
.join(' ~ ') || '-'
}}
</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"
>
<div class="business-crud-page__dispatch-summary-label">附件</div>
<div class="business-crud-page__dispatch-summary-value">
<el-link
v-for="(item, index) in dispatchAttachmentRows"
:key="dispatchAttachmentLabel(item) + index"
type="primary"
:href="dispatchAttachmentUrl(item) || undefined"
:underline="false"
target="_blank"
class="business-crud-page__dispatch-attachment-link"
>
{{ dispatchAttachmentLabel(item) }}
</el-link>
<span v-if="!dispatchAttachmentRows.length">-</span>
</div>
</div>
</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">
<div class="business-crud-page__dispatch-route-main"> <div class="business-crud-page__dispatch-route-item">
<div class="business-crud-page__dispatch-route-node">
<span class="business-crud-page__dispatch-route-badge is-start">起</span> <span class="business-crud-page__dispatch-route-badge is-start">起</span>
<div class="business-crud-page__dispatch-route-title"> <div class="business-crud-page__dispatch-route-body">
{{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }} <div class="business-crud-page__dispatch-route-title">
{{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }}
</div>
<div class="business-crud-page__dispatch-route-address">
{{ parseDispatchRoutePoint(dispatchRow, 'start').address || '-' }}
</div>
<div class="business-crud-page__dispatch-route-contact">
{{ parseDispatchRoutePoint(dispatchRow, 'start').contact || '-' }}
</div>
</div> </div>
</div> </div>
<div class="business-crud-page__dispatch-route-line" /> <div class="business-crud-page__dispatch-route-vehicle">
<div class="business-crud-page__dispatch-route-node"> <el-icon><Van /></el-icon>
</div>
<div class="business-crud-page__dispatch-route-item">
<span class="business-crud-page__dispatch-route-badge is-end">终</span> <span class="business-crud-page__dispatch-route-badge is-end">终</span>
<div class="business-crud-page__dispatch-route-title"> <div class="business-crud-page__dispatch-route-body">
{{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }} <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-contact">
{{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }}
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="business-crud-page__dispatch-route-detail"> </section-card>
<div class="business-crud-page__dispatch-route-detail-item"> </div>
<div class="business-crud-page__dispatch-route-detail-label">发货地址</div>
<div class="business-crud-page__dispatch-route-detail-value">
{{ parseDispatchRoutePoint(dispatchRow, 'start').address || '-' }}
</div>
<div class="business-crud-page__dispatch-route-detail-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">
{{ parseDispatchRoutePoint(dispatchRow, 'end').address || '-' }}
</div>
<div class="business-crud-page__dispatch-route-detail-contact">
{{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }}
</div>
</div>
</div>
</div>
</section-card>
</div> </div>
<section-card title="待调度列表"> <section-card title="待调度列表">
@@ -9359,13 +9357,27 @@ export default {
} }
&__dispatch-summary { &__dispatch-summary {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 16px;
align-items: stretch;
margin-bottom: 12px; margin-bottom: 12px;
} }
&__dispatch-summary-card,
&__dispatch-route-card {
display: flex;
flex-direction: column;
:deep(.section-card__body) {
flex: 1;
}
}
&__dispatch-summary-grid { &__dispatch-summary-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 24px; gap: 12px 16px;
} }
&__dispatch-summary-item { &__dispatch-summary-item {
@@ -9386,7 +9398,7 @@ export default {
&__dispatch-summary-value { &__dispatch-summary-value {
min-height: 20px; min-height: 20px;
font-size: 14px; font-size: 14px;
line-height: 1.4; line-height: 1.45;
color: #303133; color: #303133;
word-break: break-word; word-break: break-word;
} }
@@ -9403,23 +9415,24 @@ export default {
} }
&__dispatch-route { &__dispatch-route {
display: flex; position: relative;
flex-direction: column; display: grid;
gap: 16px; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
gap: 40px;
align-items: center;
//height: 100%;
margin: 20px 0;
} }
&__dispatch-route-main { &__dispatch-route-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 12px;
gap: 16px; max-width: 90%;
} padding: 16px;
min-height: 80px;
&__dispatch-route-node { border: 1px dashed #e3e4ec;
display: flex; border-radius: 12px;
align-items: center;
gap: 10px;
min-width: 0;
} }
&__dispatch-route-badge { &__dispatch-route-badge {
@@ -9427,12 +9440,13 @@ export default {
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px; width: 40px;
height: 32px; height: 40px;
border-radius: 4px; border-radius: 50%;
color: #fff; color: #fff;
font-size: 13px; font-size: 16px;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
&.is-start { &.is-start {
background: #2a92ff; background: #2a92ff;
@@ -9443,9 +9457,14 @@ export default {
} }
} }
&__dispatch-route-body {
min-width: 0;
text-align: left;
}
&__dispatch-route-title { &__dispatch-route-title {
font-size: 16px; font-size: 18px;
line-height: 1.3; line-height: 1.35;
color: #303133; color: #303133;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
@@ -9453,56 +9472,54 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&__dispatch-route-line { &__dispatch-route-address {
position: relative; margin-top: 4px;
flex: 0 0 80px; font-size: 13px;
height: 2px; line-height: 1.5;
max-width: 120px; color: #606266;
background-image: linear-gradient(
to right,
var(--el-color-primary) 0,
var(--el-color-primary) 6px,
transparent 6px,
transparent 10px
);
&::after {
content: '';
position: absolute;
right: -1px;
top: -4px;
border: 5px solid transparent;
border-left-color: var(--el-color-primary);
}
} }
&__dispatch-route-detail { &__dispatch-route-contact {
display: grid; margin-top: 2px;
grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13px;
gap: 12px 24px;
}
&__dispatch-route-detail-item {
min-width: 0;
}
&__dispatch-route-detail-label {
margin-bottom: 4px;
font-size: 12px;
color: #909399; color: #909399;
} }
&__dispatch-route-detail-value { &__dispatch-route-vehicle {
font-size: 14px; position: relative;
line-height: 1.4; display: flex;
color: #303133; align-items: center;
word-break: break-word; justify-content: center;
} width: 44px;
height: 44px;
margin: 0 auto;
border-radius: 50%;
background: #fff;
border: 2px solid var(--el-color-primary);
color: var(--el-color-primary);
font-size: 22px;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.18);
&__dispatch-route-detail-contact { &::before,
margin-top: 4px; &::after {
font-size: 13px; content: '';
color: #606266; position: absolute;
top: 50%;
width: 20px;
height: 0;
border-top: 2px dashed var(--el-color-primary-light-5);
transform: translateY(-50%);
}
&::before {
right: 100%;
margin-right: 6px;
}
&::after {
left: 100%;
margin-left: 6px;
}
} }
&__dispatch-list-head { &__dispatch-list-head {
@@ -9554,7 +9571,7 @@ export default {
&__dispatch-footer { &__dispatch-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 12px; gap: 10px;
padding-right: 0; padding-right: 0;
padding-top: 16px; padding-top: 16px;
margin-top: 16px; margin-top: 16px;
@@ -9879,4 +9896,7 @@ export default {
} }
} }
} }
.section-card{
margin-bottom: 0 !important;
}
</style> </style>