feat(business): 优化待调度列表汇总数字高亮显示

- 新增 computed 属性 dispatchSummarySegments,实现待调度列表汇总文本结构化拆分
- 将模板中 dispatchSummaryText 替换为 v-for 渲染,待调度件数字显示为蓝色加粗
- 修正「件」字未分离导致整词变色问题,改为数字与单位拆分渲染
- 用户反馈后,扩展高亮范围至所有单位数字,包括「吨」「方」等
- 维持文本格式与原串完全一致,未改动原有业务逻辑和校验
- 优化部分样式,调整页面内间距,如 section-card 间距和工具栏内边距等
- 修正部分组件结构,如 master-order
This commit is contained in:
2026-08-13 17:55:59 +08:00
parent 8b35fcaa0d
commit fb633e27c6
6 changed files with 58 additions and 15 deletions
@@ -2543,9 +2543,7 @@
<section-card>
<template #title>
<span>待调度列表</span>
<span class="business-crud-page__dispatch-list-summary">
{{ dispatchSummaryText }}
</span>
<span class="business-crud-page__dispatch-list-summary"><template v-for="(seg, si) in dispatchSummarySegments" :key="si"><span class="dispatch-summary-prefix">{{ seg.prefix }}</span><span class="dispatch-summary-label">{{ seg.label }}</span><template v-for="(item, ii) in seg.items" :key="item.unit"><span :class="['dispatch-summary-value', { 'is-piece': item.isPiece }]">{{ item.value }}</span><span class="dispatch-summary-unit">{{ item.unit }}</span><span v-if="ii < seg.items.length - 1" class="dispatch-summary-sep"></span></template></template></span>
</template>
<template #extra>
<el-button
@@ -4659,6 +4657,22 @@ export default {
'remaining'
)}`;
},
dispatchSummarySegments() {
const segments = [
{ prefix: '', label: '共', field: 'total' },
{ prefix: ' | ', label: '已调度 ', field: 'assigned' },
{ prefix: '', label: '剩余', field: 'remaining' },
];
return segments.map(seg => ({
prefix: seg.prefix,
label: seg.label,
items: this.dispatchSummaryItems.map(item => ({
unit: item.unit,
value: this.formatDispatchQuantity(item[seg.field]),
isPiece: true,
})),
}));
},
dispatchAttachmentRows() {
return this.parseJsonArray(this.dispatchRow.attachmentsJson);
},
@@ -10268,13 +10282,24 @@ export default {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 16px;
align-items: stretch;
margin-bottom: 8px;
margin-bottom: 12px;
.section-card {
margin-bottom: 0 !important;
}
}
&__dispatch-summary-card,
&__dispatch-route-card {
display: flex;
flex-direction: column;
min-height: 260px;
:deep(.section-card) {
flex: 1;
display: flex;
flex-direction: column;
}
:deep(.section-card__body) {
flex: 1;
@@ -10447,6 +10472,13 @@ export default {
margin-left: 8px;
font-size: 14px;
color: #3c3c3c;
.dispatch-summary-value {
&.is-piece {
color: #409eff;
font-weight: 600;
}
}
}
&__dispatch-table {
@@ -10702,10 +10734,9 @@ export default {
&__detail-content {
display: flex;
flex-direction: column;
gap: 8px;
//gap: 8px;
.section-card {
margin-bottom: 0 !important;
:deep(.el-descriptions__label) {
width: 140px;
@@ -10806,7 +10837,6 @@ export default {
}
}
.section-card {
margin-bottom: 8px !important;
&:last-child {
margin-bottom: 0 !important;
@@ -1,5 +1,5 @@
<template>
<section-card v-loading="loading" class="master-detail">
<div v-loading="loading" class="master-detail">
<section v-if="master" class="detail-overview">
<div class="detail-heading"><div><h2>多联总单详情 <span>|</span> {{ master.masterNo }}</h2><el-tag :type="statusType(master.businessStatus)">{{ statusName(master.businessStatus) }}</el-tag></div><el-button @click="$emit('back')">返回</el-button></div>
<dl class="detail-meta"><div><dt>客户</dt><dd>{{ master.customerName || '-' }}</dd></div><div><dt>合同编号</dt><dd>{{ master.contractNo || '-' }}</dd></div><div><dt>项目</dt><dd>{{ master.projectName || '-' }}</dd></div><div><dt>货物名称</dt><dd>{{ goodsNames }}</dd></div><div><dt>货物类型</dt><dd>{{ goodsTypes }}</dd></div><div><dt>运输周期</dt><dd>{{ dateRange }}</dd></div></dl>
@@ -23,7 +23,7 @@
<el-table :data="master.goods || []" border><el-table-column type="index" label="序号" width="64" /><el-table-column prop="cargoName" label="货物名称" min-width="150" /><el-table-column prop="cargoType" label="货物类型" min-width="130" /><el-table-column label="数量" width="130"><template #default="{ row }">{{ quantity(row.quantity) }} {{ row.quantityUnit || '' }}</template></el-table-column><el-table-column prop="packageType" label="包装" min-width="120" /><el-table-column prop="brand" label="品牌" min-width="120" /><el-table-column prop="specification" label="规格" min-width="120" /><el-table-column prop="model" label="型号" min-width="120" /></el-table>
<el-empty v-if="!(master.goods || []).length" description="暂无货物信息" :image-size="56" />
</section>
</section-card>
</div>
</template>
<script>
@@ -125,8 +125,8 @@
<div class="goods-heading">
<h3>货物信息</h3>
<div class="goods-toolbar">
<el-link type="primary" @click="cargoImportVisible = true">导入货物</el-link>
<el-link type="primary" @click="openCommonCargoDialog">常用货物</el-link>
<el-link type="primary" @click="cargoImportVisible = true">导入货物</el-link>
<el-link type="primary" @click="openCommonCargoDialog">常用货物</el-link>
</div>
</div>
<el-table :data="form.goods" border
@@ -1043,7 +1043,7 @@ export default {
</script>
<style scoped lang="scss">
.master-editor section {
margin-bottom: 16px;
margin-bottom: 12px;
padding: 16px;
border: 1px solid #eff1f7;
background: #fff;
@@ -1054,12 +1054,13 @@ export default {
font-size: 16px;
}
.el-form-item {
margin-bottom: 16px;
margin-bottom: 12px;
}
}
.goods-heading {
display: flex;
margin-bottom: 8px;
flex-direction: row;
justify-content: flex-end;
align-items: center;
h3 {
@@ -1070,6 +1071,7 @@ export default {
.goods-toolbar {
display: flex;
gap: 8px;
background-color: #f3f3f3;
}
.goods-actions {
display: flex;
@@ -1083,7 +1085,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
margin-bottom: 12px;
h3 {
margin-bottom: 0;
}
+1 -1
View File
@@ -416,7 +416,7 @@ export default {
.master-list-panel {
background: #fff;
.toolbar {
padding: 12px 12px 0;
padding: 8px;
}
}
.master-card {