feat(business): 优化待调度列表汇总数字高亮显示
- 新增 computed 属性 dispatchSummarySegments,实现待调度列表汇总文本结构化拆分 - 将模板中 dispatchSummaryText 替换为 v-for 渲染,待调度件数字显示为蓝色加粗 - 修正「件」字未分离导致整词变色问题,改为数字与单位拆分渲染 - 用户反馈后,扩展高亮范围至所有单位数字,包括「吨」「方」等 - 维持文本格式与原串完全一致,未改动原有业务逻辑和校验 - 优化部分样式,调整页面内间距,如 section-card 间距和工具栏内边距等 - 修正部分组件结构,如 master-order
This commit is contained in:
@@ -338,6 +338,7 @@
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&:last-child {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -416,7 +416,7 @@ export default {
|
||||
.master-list-panel {
|
||||
background: #fff;
|
||||
.toolbar {
|
||||
padding: 12px 12px 0;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
.master-card {
|
||||
|
||||
Reference in New Issue
Block a user