refactor(payment): 统一搜索栏“展开/收起”按钮实现
- 取消 el-tooltip 包裹，改用纯 el-button 实现带图标的展开收起按钮 - 按 avue-crud 规范控制按钮显示，新增 searchIndex （默认 4）和 searchItemCount 控制逻辑 - 搜索项数量未超出 searchIndex 时隐藏展开收起按钮 - 相关组件支付模块多处应用此统一方案（bill-ledger-search、bill-payment-search、invoice-application、invoice-receipt、receipt-claim-record、receipt-flow） - 维护展开状态对应的箭头图标和文案为“收起”与“展开” refactor(business): 优化路线变更内容渲染与样式 - 替换旧的 formatRouteChangeContent 为更详细的 parseRouteChangeContent，支持多分组与字段显示 - 路线变更内容支持多层次分组、字段标签、改变前后值对比及未变更标识展示 - 取消全局列溢出提示以避免多行内容被截断，针对路线变更内容列显式禁用溢出提示并设置白色换行样式 - 在 business-crud-page、waybill-manage-page、loading-manage 相关页面和组件中统一应用该解析与渲染方案 refactor(option): 调整 measurement-unit 配置以提升表格列展示 - 移除 menuWidth 配置，采用 menuFixed 固定右侧模式 - 为创建人和更新人列添加 minWidth 110，时间列添加 width 180，避免内容被截断 - 表格列数组顺序调整，确保搜索与展示保持一致 refactor(payment & receipt-flow): 统一支付及回执模块工具栏和表格行为 - 按照统一规范和用户反馈，调整多处页面的搜索栏操作区和表格列配置 - 引入 TableHeaderTools 组件和相关状态传递，实现搜索显隐与表格尺寸切换统一 - 优化 avue-crud 表格组件的交互一致性和视觉表现 refactor(utils): 重构路线变更内容解析函数 - 新增 parseRouteChangeContent 以支持复杂路线变更文本的解析与分组 - 识别运单号、字段标签、变更前后值，支持多种箭头符号及调整描述 - 用法推广至相关业务页面，支持更加直观的路线变更展示界面
This commit is contained in:
@@ -2991,12 +2991,51 @@
|
||||
<el-table :data="waybillRouteChangeRecords" border>
|
||||
<el-table-column prop="changeTime" label="变更时间" min-width="170" />
|
||||
<el-table-column prop="changeUser" label="变更人" min-width="120" />
|
||||
<el-table-column prop="content" label="变更内容" min-width="360">
|
||||
<el-table-column
|
||||
prop="content"
|
||||
label="变更内容"
|
||||
min-width="360"
|
||||
:show-overflow-tooltip="false"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div
|
||||
class="business-crud-page__route-change-record-content"
|
||||
v-text="formatRouteChangeContent(row.content)"
|
||||
/>
|
||||
<div class="business-crud-page__route-change-record-content">
|
||||
<div
|
||||
v-for="(group, groupIndex) in parseRouteChangeContent(row.content)"
|
||||
:key="groupIndex"
|
||||
class="business-crud-page__route-change-group"
|
||||
>
|
||||
<div v-if="group.title" class="business-crud-page__route-change-group-title">
|
||||
{{ group.title }}
|
||||
</div>
|
||||
<div v-if="group.text" class="business-crud-page__route-change-group-text">
|
||||
{{ group.text }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(field, fieldIndex) in group.fields"
|
||||
:key="fieldIndex"
|
||||
class="business-crud-page__route-change-field"
|
||||
>
|
||||
<span class="business-crud-page__route-change-field-label">
|
||||
{{ field.label }}
|
||||
</span>
|
||||
<template v-if="field.changed">
|
||||
<span class="business-crud-page__route-change-before">
|
||||
{{ field.before }}
|
||||
</span>
|
||||
<span class="business-crud-page__route-change-arrow">→</span>
|
||||
<span class="business-crud-page__route-change-after">
|
||||
{{ field.after }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="business-crud-page__route-change-single">
|
||||
{{ field.single }}
|
||||
<span v-if="field.unchanged" class="business-crud-page__route-change-flag">
|
||||
未变更
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
|
||||
@@ -5283,7 +5322,7 @@ import { formatContractOptionLabel } from '@/utils/contract';
|
||||
import { openImportDialog } from '@/utils/import-excel';
|
||||
import { normalizeMapSearchResults, searchAmapPlaceText } from '@/utils/map-search';
|
||||
import { loadMeasurementUnitOptions } from '@/utils/measurement-unit';
|
||||
import { formatRouteChangeContent } from '@/utils/route-change';
|
||||
import { parseRouteChangeContent } from '@/utils/route-change';
|
||||
import { applyTableMenuWidth } from '@/utils/table-menu';
|
||||
import { downloadFileByUrl, downloadXls } from '@/utils/util';
|
||||
import { isMobile } from '@/utils/validate';
|
||||
@@ -6630,7 +6669,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
formatContractOptionLabel,
|
||||
formatRouteChangeContent,
|
||||
parseRouteChangeContent,
|
||||
initStandaloneFormPage() {
|
||||
if (!this.isStandaloneFormPage) return;
|
||||
const mode = this.$route.query.mode === 'edit' ? 'edit' : 'add';
|
||||
@@ -15900,10 +15939,65 @@ export default {
|
||||
}
|
||||
|
||||
&__route-change-record-content {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
line-height: 22px;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__route-change-group {
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid #409eff;
|
||||
}
|
||||
|
||||
&__route-change-group-title {
|
||||
margin-bottom: 4px;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__route-change-group-text {
|
||||
color: #606266;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__route-change-field {
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
row-gap: 2px;
|
||||
}
|
||||
|
||||
&__route-change-field-label {
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__route-change-before,
|
||||
&__route-change-single {
|
||||
color: #606266;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__route-change-arrow {
|
||||
color: #c0c4cc;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__route-change-after {
|
||||
color: #409eff;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__route-change-flag {
|
||||
margin-left: 6px;
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@@ -3020,12 +3020,57 @@
|
||||
<el-table :data="waybillRouteChangeRecords" border>
|
||||
<el-table-column prop="changeTime" label="变更时间" min-width="170" />
|
||||
<el-table-column prop="changeUser" label="变更人" min-width="120" />
|
||||
<el-table-column prop="content" label="变更内容" min-width="360">
|
||||
<el-table-column
|
||||
prop="content"
|
||||
label="变更内容"
|
||||
min-width="360"
|
||||
:show-overflow-tooltip="false"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div
|
||||
class="waybill-manage-page__route-change-record-content"
|
||||
v-text="formatRouteChangeContent(row.content)"
|
||||
/>
|
||||
<div class="waybill-manage-page__route-change-record-content">
|
||||
<div
|
||||
v-for="(group, groupIndex) in parseRouteChangeContent(row.content)"
|
||||
:key="groupIndex"
|
||||
class="waybill-manage-page__route-change-group"
|
||||
>
|
||||
<div
|
||||
v-if="group.title"
|
||||
class="waybill-manage-page__route-change-group-title"
|
||||
>
|
||||
{{ group.title }}
|
||||
</div>
|
||||
<div v-if="group.text" class="waybill-manage-page__route-change-group-text">
|
||||
{{ group.text }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(field, fieldIndex) in group.fields"
|
||||
:key="fieldIndex"
|
||||
class="waybill-manage-page__route-change-field"
|
||||
>
|
||||
<span class="waybill-manage-page__route-change-field-label">
|
||||
{{ field.label }}
|
||||
</span>
|
||||
<template v-if="field.changed">
|
||||
<span class="waybill-manage-page__route-change-before">
|
||||
{{ field.before }}
|
||||
</span>
|
||||
<span class="waybill-manage-page__route-change-arrow">→</span>
|
||||
<span class="waybill-manage-page__route-change-after">
|
||||
{{ field.after }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="waybill-manage-page__route-change-single">
|
||||
{{ field.single }}
|
||||
<span
|
||||
v-if="field.unchanged"
|
||||
class="waybill-manage-page__route-change-flag"
|
||||
>
|
||||
未变更
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
|
||||
@@ -3667,7 +3712,7 @@ import { wgs84ToGcj02 } from '@/utils/coordinate';
|
||||
import { openImportDialog } from '@/utils/import-excel';
|
||||
import { normalizeMapSearchResults, searchAmapPlaceText } from '@/utils/map-search';
|
||||
import { loadMeasurementUnitOptions } from '@/utils/measurement-unit';
|
||||
import { formatRouteChangeContent } from '@/utils/route-change';
|
||||
import { parseRouteChangeContent } from '@/utils/route-change';
|
||||
import { applyTableMenuWidth } from '@/utils/table-menu';
|
||||
import { downloadFileByUrl, downloadXls } from '@/utils/util';
|
||||
import { isMobile } from '@/utils/validate';
|
||||
@@ -4755,7 +4800,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
formatContractOptionLabel,
|
||||
formatRouteChangeContent,
|
||||
parseRouteChangeContent,
|
||||
// 页面被 keep-alive 缓存/卸载时调用，关闭本页所有 append-to-body 的弹窗，
|
||||
// 避免 Teleport 出去的 DOM 残留在 body 上盖住后续页面（详见 data 里的说明）。
|
||||
closeInnerDialogs() {
|
||||
@@ -11846,10 +11891,65 @@ export default {
|
||||
}
|
||||
|
||||
&__route-change-record-content {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
line-height: 22px;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__route-change-group {
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid #409eff;
|
||||
}
|
||||
|
||||
&__route-change-group-title {
|
||||
margin-bottom: 4px;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__route-change-group-text {
|
||||
color: #606266;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__route-change-field {
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
row-gap: 2px;
|
||||
}
|
||||
|
||||
&__route-change-field-label {
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__route-change-before,
|
||||
&__route-change-single {
|
||||
color: #606266;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__route-change-arrow {
|
||||
color: #c0c4cc;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__route-change-after {
|
||||
color: #409eff;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
&__route-change-flag {
|
||||
margin-left: 6px;
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__common-address-toolbar {
|
||||
|
||||
@@ -1683,9 +1683,56 @@
|
||||
><el-table-column prop="changeTime" label="变更时间" min-width="170" /><el-table-column
|
||||
prop="changeUser"
|
||||
label="变更人"
|
||||
min-width="120" /><el-table-column prop="content" label="变更内容" min-width="360"
|
||||
min-width="120" /><el-table-column
|
||||
prop="content"
|
||||
label="变更内容"
|
||||
min-width="360"
|
||||
:show-overflow-tooltip="false"
|
||||
><template #default="{ row }"
|
||||
><div class="loading-route-change-dialog__record-content">{{ formatRouteChangeContent(row.content) }}</div></template
|
||||
><div class="loading-route-change-dialog__record-content">
|
||||
<div
|
||||
v-for="(group, groupIndex) in parseRouteChangeContent(row.content)"
|
||||
:key="groupIndex"
|
||||
class="loading-route-change-dialog__change-group"
|
||||
>
|
||||
<div
|
||||
v-if="group.title"
|
||||
class="loading-route-change-dialog__change-group-title"
|
||||
>
|
||||
{{ group.title }}
|
||||
</div>
|
||||
<div v-if="group.text" class="loading-route-change-dialog__change-group-text">
|
||||
{{ group.text }}
|
||||
</div>
|
||||
<div
|
||||
v-for="(field, fieldIndex) in group.fields"
|
||||
:key="fieldIndex"
|
||||
class="loading-route-change-dialog__change-field"
|
||||
>
|
||||
<span class="loading-route-change-dialog__change-field-label">
|
||||
{{ field.label }}
|
||||
</span>
|
||||
<template v-if="field.changed">
|
||||
<span class="loading-route-change-dialog__change-before">
|
||||
{{ field.before }}
|
||||
</span>
|
||||
<span class="loading-route-change-dialog__change-arrow">→</span>
|
||||
<span class="loading-route-change-dialog__change-after">
|
||||
{{ field.after }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="loading-route-change-dialog__change-single">
|
||||
{{ field.single }}
|
||||
<span
|
||||
v-if="field.unchanged"
|
||||
class="loading-route-change-dialog__change-flag"
|
||||
>
|
||||
未变更
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div></template
|
||||
></el-table-column
|
||||
><el-table-column
|
||||
prop="remark"
|
||||
@@ -1798,7 +1845,7 @@ import TableHeaderTools from '@/components/table-header-tools/main.vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { isMobile } from '@/utils/validate';
|
||||
import { normalizeMapSearchResults, searchAmapPlaceText } from '@/utils/map-search';
|
||||
import { formatRouteChangeContent } from '@/utils/route-change';
|
||||
import { parseRouteChangeContent } from '@/utils/route-change';
|
||||
|
||||
const defaultTransportType = '';
|
||||
const defaultCandidateTransportType = '';
|
||||
@@ -2277,7 +2324,7 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatRouteChangeContent,
|
||||
parseRouteChangeContent,
|
||||
formatTaskCarrierContractLabel(item = {}) {
|
||||
const carrierName = item.carrierName || item.partyB || '';
|
||||
const contractLabel = formatContractOptionLabel(item);
|
||||
@@ -5129,10 +5176,56 @@ export default {
|
||||
gap: 4px;
|
||||
}
|
||||
.loading-route-change-dialog__record-content {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
line-height: 22px;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
.loading-route-change-dialog__change-group {
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid #409eff;
|
||||
}
|
||||
.loading-route-change-dialog__change-group-title {
|
||||
margin-bottom: 4px;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
.loading-route-change-dialog__change-group-text {
|
||||
color: #606266;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.loading-route-change-dialog__change-field {
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr);
|
||||
column-gap: 8px;
|
||||
row-gap: 2px;
|
||||
}
|
||||
.loading-route-change-dialog__change-field-label {
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.loading-route-change-dialog__change-before,
|
||||
.loading-route-change-dialog__change-single {
|
||||
color: #606266;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.loading-route-change-dialog__change-arrow {
|
||||
color: #c0c4cc;
|
||||
text-align: right;
|
||||
}
|
||||
.loading-route-change-dialog__change-after {
|
||||
color: #409eff;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.loading-route-change-dialog__change-flag {
|
||||
margin-left: 6px;
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.loading-route-change-map-dialog {
|
||||
|
||||
Reference in New Issue
Block a user