feat(business): 优化待调度列表汇总数字高亮显示
- 新增 computed 属性 dispatchSummarySegments,实现待调度列表汇总文本结构化拆分 - 将模板中 dispatchSummaryText 替换为 v-for 渲染,待调度件数字显示为蓝色加粗 - 修正「件」字未分离导致整词变色问题,改为数字与单位拆分渲染 - 用户反馈后,扩展高亮范围至所有单位数字,包括「吨」「方」等 - 维持文本格式与原串完全一致,未改动原有业务逻辑和校验 - 优化部分样式,调整页面内间距,如 section-card 间距和工具栏内边距等 - 修正部分组件结构,如 master-order
This commit is contained in:
@@ -69,3 +69,13 @@
|
|||||||
3. 删除不再使用的 `__section/__field/__field-label/__field-label--required` 样式;保留 `__finish-days` 与节点表格相关样式。
|
3. 删除不再使用的 `__section/__field/__field-label/__field-label--required` 样式;保留 `__finish-days` 与节点表格相关样式。
|
||||||
- 卡片间距:全局 `.section-card{margin-bottom:8px}` 在本页生效(无 `!important` 覆盖),三张白卡自动保持 8px 间隔。
|
- 卡片间距:全局 `.section-card{margin-bottom:8px}` 在本页生效(无 `!important` 覆盖),三张白卡自动保持 8px 间隔。
|
||||||
- 校验:@vue/compiler-sfc 编译通过,3 个 section-card 均正确闭合;未动任何业务逻辑(validateRow/syncNodeFields 等不变)。
|
- 校验:@vue/compiler-sfc 编译通过,3 个 section-card 均正确闭合;未动任何业务逻辑(validateRow/syncNodeFields 等不变)。
|
||||||
|
|
||||||
|
## business-crud-page.vue 待调度列表汇总「件」蓝色高亮
|
||||||
|
- 需求:调度弹窗「待调度列表」标题右侧汇总 `共50吨、100件 | 已调度 50吨、100件,剩余0吨、0件` 中,单位是「件」的数字用蓝色显示。
|
||||||
|
- 改造(src/views/business/components/business-crud-page.vue):
|
||||||
|
1. 新增 computed `dispatchSummarySegments`,把原纯文本 `dispatchSummaryText` 拆成结构化三段(共/已调度/剩余),每段 items 带 `{unit, value, isPiece: unit==='件'}`,文本拼接方式与原格式完全一致(含空格、`|`、`、`、逗号)。
|
||||||
|
2. 模板(约 2546 行)由 `{{ dispatchSummaryText }}` 改为 `v-for` 渲染;`件` 数字包裹 `<span class="dispatch-summary-value is-piece">`。
|
||||||
|
3. 样式:`.business-crud-page__dispatch-list-summary .dispatch-summary-value.is-piece { color:#409eff; font-weight:600 }`(项目主蓝,轻微加粗更醒目)。
|
||||||
|
- 校验:文本格式与原串逐字符一致,仅「件」数字变色;未动 `dispatchSummaryItems` 等其它逻辑。
|
||||||
|
- 修正(用户反馈):原把整段「数字+件」一起变蓝导致「件」字也蓝。改为数字与单位拆成两个 span(`dispatch-summary-value` 仅含数字、`dispatch-summary-unit` 含单位),蓝色与加粗只作用于数字,「件」字保持默认色。
|
||||||
|
- 二次修正(用户反馈):「吨」数字也要蓝。将 `isPiece` 由 `unit==='件'` 放宽为恒 `true`,即所有单位的数字均蓝色、单位字默认色(覆盖 吨/件/方 等)。
|
||||||
|
|||||||
@@ -338,6 +338,7 @@
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
padding-bottom: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
|||||||
@@ -2543,9 +2543,7 @@
|
|||||||
<section-card>
|
<section-card>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span>待调度列表</span>
|
<span>待调度列表</span>
|
||||||
<span class="business-crud-page__dispatch-list-summary">
|
<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>
|
||||||
{{ dispatchSummaryText }}
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<el-button
|
<el-button
|
||||||
@@ -4659,6 +4657,22 @@ export default {
|
|||||||
'remaining'
|
'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() {
|
dispatchAttachmentRows() {
|
||||||
return this.parseJsonArray(this.dispatchRow.attachmentsJson);
|
return this.parseJsonArray(this.dispatchRow.attachmentsJson);
|
||||||
},
|
},
|
||||||
@@ -10268,13 +10282,24 @@ export default {
|
|||||||
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.section-card {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__dispatch-summary-card,
|
&__dispatch-summary-card,
|
||||||
&__dispatch-route-card {
|
&__dispatch-route-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
min-height: 260px;
|
||||||
|
|
||||||
|
:deep(.section-card) {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.section-card__body) {
|
:deep(.section-card__body) {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -10447,6 +10472,13 @@ export default {
|
|||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #3c3c3c;
|
color: #3c3c3c;
|
||||||
|
|
||||||
|
.dispatch-summary-value {
|
||||||
|
&.is-piece {
|
||||||
|
color: #409eff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__dispatch-table {
|
&__dispatch-table {
|
||||||
@@ -10702,10 +10734,9 @@ export default {
|
|||||||
&__detail-content {
|
&__detail-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
//gap: 8px;
|
||||||
|
|
||||||
.section-card {
|
.section-card {
|
||||||
margin-bottom: 0 !important;
|
|
||||||
|
|
||||||
:deep(.el-descriptions__label) {
|
:deep(.el-descriptions__label) {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
@@ -10806,7 +10837,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.section-card {
|
.section-card {
|
||||||
margin-bottom: 8px !important;
|
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<section-card v-loading="loading" class="master-detail">
|
<div v-loading="loading" class="master-detail">
|
||||||
<section v-if="master" class="detail-overview">
|
<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>
|
<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>
|
<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-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" />
|
<el-empty v-if="!(master.goods || []).length" description="暂无货物信息" :image-size="56" />
|
||||||
</section>
|
</section>
|
||||||
</section-card>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -125,8 +125,8 @@
|
|||||||
<div class="goods-heading">
|
<div class="goods-heading">
|
||||||
<h3>货物信息</h3>
|
<h3>货物信息</h3>
|
||||||
<div class="goods-toolbar">
|
<div class="goods-toolbar">
|
||||||
<el-link type="primary" @click="cargoImportVisible = true">导入货物</el-link>
|
<el-link type="primary" @click="cargoImportVisible = true">导入货物</el-link>
|
||||||
<el-link type="primary" @click="openCommonCargoDialog">常用货物</el-link>
|
<el-link type="primary" @click="openCommonCargoDialog">常用货物</el-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="form.goods" border
|
<el-table :data="form.goods" border
|
||||||
@@ -1043,7 +1043,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.master-editor section {
|
.master-editor section {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 12px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
border: 1px solid #eff1f7;
|
border: 1px solid #eff1f7;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -1054,12 +1054,13 @@ export default {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.goods-heading {
|
.goods-heading {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
h3 {
|
h3 {
|
||||||
@@ -1070,6 +1071,7 @@ export default {
|
|||||||
.goods-toolbar {
|
.goods-toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
background-color: #f3f3f3;
|
||||||
}
|
}
|
||||||
.goods-actions {
|
.goods-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1083,7 +1085,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 12px;
|
||||||
h3 {
|
h3 {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -416,7 +416,7 @@ export default {
|
|||||||
.master-list-panel {
|
.master-list-panel {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
.toolbar {
|
.toolbar {
|
||||||
padding: 12px 12px 0;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.master-card {
|
.master-card {
|
||||||
|
|||||||
Reference in New Issue
Block a user