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

refactor(payment): 统一搜索栏“展开/收起”按钮实现

Browse Source 
- 取消 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:
赵忠林
2026-10-14 16:21:50 +08:00
parent 749b314ceb
commit b39501291c
13 changed files with 670 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/business/components/business-crud-page.vue
+104 -10
View File
@@ -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) {
src/views/business/components/waybill-manage-page.vue
+110 -10
View File
@@ -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 {
src/views/business/loading-manage.vue
+100 -7
View File
@@ -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 {
src/views/payment/components/bill-ledger-search.vue
+15 -6
View File
@@ -52,12 +52,13 @@
<el-icon><Delete /></el-icon>
<span>重置</span>
</el-button>
<el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
<el-button text @click="expanded = !expanded">
<el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
<span>{{ expanded ? '折叠' : '展开' }}</span>
</el-button>
</el-tooltip>
<el-button
v-if="showSearchToggle"
text
:icon="expanded ? ArrowUp : ArrowDown"
@click="expanded = !expanded"
>{{ expanded ? '收起' : '展开' }}</el-button
>
</div>
</el-form>
</section>
@@ -81,10 +82,18 @@ export default {
Delete,
Search,
expanded: false,
// 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
searchIndex: 4,
searchItemCount: 6,
billTypeOptions,
maturityStatusOptions,
};
},
computed: {
showSearchToggle() {
return this.searchItemCount > this.searchIndex;
},
},
};
</script>
src/views/payment/components/bill-payment-search.vue
+21 -6
View File
@@ -43,11 +43,13 @@
<div class="bill-payment-search__actions">
<el-button type="primary" :loading="loading" @click="$emit('search')">查询</el-button>
<el-button @click="$emit('reset')">重置</el-button>
<el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
<el-button text @click="expanded = !expanded">
<el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
</el-button>
</el-tooltip>
<el-button
v-if="showSearchToggle"
text
:icon="expanded ? ArrowUp : ArrowDown"
@click="expanded = !expanded"
>{{ expanded ? '收起' : '展开' }}</el-button
>
</div>
</el-form>
</section>
@@ -67,7 +69,20 @@ export default {
},
emits: ['search', 'reset'],
data() {
return { ArrowDown, ArrowUp, expanded: false, approvalStatusOptions };
return {
ArrowDown,
ArrowUp,
expanded: false,
// 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
searchIndex: 4,
searchItemCount: 4,
approvalStatusOptions,
};
},
computed: {
showSearchToggle() {
return this.searchItemCount > this.searchIndex;
},
},
mounted() {
this.loadOrganizationOptions();
src/views/payment/invoice-application.vue
+13 -5
View File
@@ -45,11 +45,13 @@
<div class="invoice-page__search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
<el-tooltip :content="searchExpanded ? '折叠' : '展开'" placement="top">
<el-button text @click="searchExpanded = !searchExpanded">
<el-icon><component :is="searchExpanded ? ArrowUp : ArrowDown" /></el-icon>
</el-button>
</el-tooltip>
<el-button
v-if="showSearchToggle"
text
:icon="searchExpanded ? ArrowUp : ArrowDown"
@click="searchExpanded = !searchExpanded"
>{{ searchExpanded ? '收起' : '展开' }}</el-button
>
</div>
</el-form>
</section>
@@ -247,6 +249,9 @@ export default {
ArrowUp,
query: emptyQuery(),
searchExpanded: false,
// 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
searchIndex: 4,
searchItemCount: 5,
searchVisible: true,
tableSize: 'default',
approvalStatusOptions: api.approvalStatusOptions,
@@ -265,6 +270,9 @@ export default {
visibleColumns() {
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
},
showSearchToggle() {
return this.searchItemCount > this.searchIndex;
},
},
mounted() {
this.loadOrganizationOptions();
src/views/payment/invoice-receipt.vue
+13 -5
View File
@@ -54,11 +54,13 @@
<div class="receipt-page__search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
<el-tooltip :content="searchExpanded ? '折叠' : '展开'" placement="top">
<el-button text @click="searchExpanded = !searchExpanded">
<el-icon><component :is="searchExpanded ? ArrowUp : ArrowDown" /></el-icon>
</el-button>
</el-tooltip>
<el-button
v-if="showSearchToggle"
text
:icon="searchExpanded ? ArrowUp : ArrowDown"
@click="searchExpanded = !searchExpanded"
>{{ searchExpanded ? '收起' : '展开' }}</el-button
>
</div>
</el-form>
</section>
@@ -240,6 +242,9 @@ export default {
ArrowUp,
query: emptyQuery(),
searchExpanded: false,
// 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
searchIndex: 4,
searchItemCount: 6,
searchVisible: true,
tableSize: 'default',
approvalStatusOptions: api.approvalStatusOptions,
@@ -258,6 +263,9 @@ export default {
visibleColumns() {
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
},
showSearchToggle() {
return this.searchItemCount > this.searchIndex;
},
},
mounted() {
this.loadOrganizationOptions();
src/views/payment/receipt-claim-record.vue
+13 -5
View File
@@ -70,11 +70,13 @@
<div class="claim-record-page__search-actions">
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
<el-tooltip :content="searchExpanded ? '折叠' : '展开'" placement="top">
<el-button text @click="searchExpanded = !searchExpanded">
<el-icon><component :is="searchExpanded ? ArrowUp : ArrowDown" /></el-icon>
</el-button>
</el-tooltip>
<el-button
v-if="showSearchToggle"
text
:icon="searchExpanded ? ArrowUp : ArrowDown"
@click="searchExpanded = !searchExpanded"
>{{ searchExpanded ? '收起' : '展开' }}</el-button
>
</div>
</el-form>
</section-card>
@@ -173,6 +175,9 @@ export default {
ArrowUp,
query: emptyQuery(),
searchExpanded: false,
// 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
searchIndex: 4,
searchItemCount: 11,
searchVisible: true,
tableSize: 'default',
claimStatusOptions: api.claimStatusOptions,
@@ -189,6 +194,9 @@ export default {
visibleColumns() {
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
},
showSearchToggle() {
return this.searchItemCount > this.searchIndex;
},
isAdmin() {
return isAdministrator(this.userInfo);
},
src/views/payment/receipt-flow.vue
+16 -3
View File
@@ -41,11 +41,15 @@
</el-form-item>
</div>
<div class="receipt-flow-page__search-actions">
<el-button @click="searchExpanded = !searchExpanded">
{{ searchExpanded ? '折叠' : '展开' }}
</el-button>
<el-button type="primary" @click="handleSearch">查询</el-button>
<el-button @click="resetSearch">重置</el-button>
<el-button
v-if="showSearchToggle"
text
:icon="searchExpanded ? ArrowUp : ArrowDown"
@click="searchExpanded = !searchExpanded"
>{{ searchExpanded ? '收起' : '展开' }}</el-button
>
</div>
</el-form>
</section>
@@ -200,6 +204,7 @@
</template>
<script>
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { mapGetters } from 'vuex';
import * as api from '@/api/payment/receiptFlow';
import { receiptFlowTableColumns } from '@/option/payment/receiptFlow';
@@ -279,6 +284,8 @@ export default {
components: { TableHeaderTools },
data() {
return {
ArrowDown,
ArrowUp,
query: emptyQuery(),
claimStatusOptions: api.claimStatusOptions,
columns: receiptFlowTableColumns,
@@ -290,6 +297,9 @@ export default {
loading: false,
syncing: false,
searchExpanded: false,
// 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
searchIndex: 4,
searchItemCount: 7,
page: { current: 1, size: 10, total: 0 },
detailDialog: { visible: false, loading: false, data: {}, claimRecords: [] },
};
@@ -299,6 +309,9 @@ export default {
visibleColumns() {
return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
},
showSearchToggle() {
return this.searchItemCount > this.searchIndex;
},
isAdmin() {
return isAdministrator(this.userInfo);
},