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

feat(business-crud-page): 统一独立表单页顶部页面标题样式及展示

Browse Source 
- 独立表单页 shipping-template、transport-plan、waybill-manage 加入统一的 archive-page-form__title 页面标题支持
- 全局样式抽离 archive-page-form__title 至 element-ui.scss，实现统一样式和竖条修饰
- loading-manage/form 页面新增页标题展示，保持风格一致
- master-order 编辑模式下新增页面标题支持，动态显示编辑或新增总单
- business-crud-page 组件新增 formPageTitle 属性，支持父级传递页面标题数据
- 优化多个业务页面表格和弹窗样式，调整列宽及边框圆角阴影，提高视觉一致性
- 删除 customer-archive.vue 中重复本地标题样式定义，使用全局统一样式
- 全站弹窗分组组件 section-card 相关设计规范文档更新，强化统一卡片风格
- 移除 cargo-type.vue 添加 "新建" 按钮逻辑，调整按钮显示权限
- 统一所有新增弹窗的底部操作区浮动效果及内容区最大高度限制，提升交互体验
This commit is contained in:
赵忠林
2026-08-21 11:07:32 +08:00
parent 10878d4aee
commit 21b7877ff1
19 changed files with 485 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/business/components/business-crud-page.vue
+33 -13
View File
@@ -11,6 +11,7 @@
<component
:is="crudContainer"
:option="pageFormOption"
:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"
:table-loading="loading"
:data="data"
v-model:page="page"
@@ -2595,7 +2596,7 @@
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column prop="vehicleNo" label="车牌号/航班号/船号/班列号" width="192" />
<el-table-column prop="vehicleNo" label="车牌号/航班号/船号/班列号" width="200" />
<el-table-column prop="driverName" label="司机" width="128" />
<el-table-column prop="carrierName" label="承运商" width="192" />
<el-table-column label="运输方式" width="192">
@@ -2610,7 +2611,7 @@
{{ formatTransportPlanProvinceCityDistrict(row.departureAddress) }}
</template>
</el-table-column>
<el-table-column label="状态" width="120" fixed="right">
<el-table-column label="状态" width="80" align="center" fixed="right">
<template #default="{ row }">
<span
:class="['business-crud-page__transport-plan-waybill-status', row.statusClass]"
@@ -2619,7 +2620,7 @@
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="128" fixed="right">
<el-table-column label="操作" width="80" align="center" fixed="right">
<template #default="{ row }">
<el-link type="primary" @click="openTransportPlanWaybillDetail(row)">
详情
@@ -3179,7 +3180,7 @@
width="78%"
class="business-crud-page__route-change-dialog"
>
<el-tabs v-model="waybillRouteChangeTab">
<el-tabs type="border-card" v-model="waybillRouteChangeTab">
<el-tab-pane label="变更路线" name="change">
<section-card title="运单地址">
<el-table :data="waybillRouteChangeRows" border>
@@ -3264,7 +3265,7 @@
<el-empty v-else description="暂无路线" :image-size="60" />
</section-card>
<el-form label-width="auto">
<el-form-item label="变更备注">
<el-form-item label="变更备注" style="margin-top: 8px">
<el-input
v-model="waybillRouteChangeRemark"
type="textarea"
@@ -3455,7 +3456,7 @@
批量删除
</el-button>
</div>
<el-tabs v-model="transportPlanImportTab" class="business-crud-page__import-preview-tabs">
<el-tabs type="border-card" v-model="transportPlanImportTab" class="business-crud-page__import-preview-tabs">
<el-tab-pane :label="`计划单数（${transportPlanImportRows.length}）`" name="all" />
<el-tab-pane :label="`疑似重复(${transportPlanImportDuplicateCount})`" name="duplicate" />
</el-tabs>
@@ -3871,7 +3872,7 @@
show-overflow-tooltip
sortable
/>
<el-table-column label="操作" width="220" align="center" fixed="right">
<el-table-column label="操作" width="100" align="center" fixed="right">
<template #default="{ row, $index }">
<div class="business-crud-page__dispatch-actions">
<el-link type="primary" @click="handleDispatchEditRow(row, $index)">编辑</el-link>
@@ -5576,6 +5577,9 @@ const attachmentViewerPlugins = [
const PageAvueForm = {
inheritAttrs: false,
props: {
formPageTitle: { type: String, default: '' },
},
render() {
const attrs = { ...this.$attrs };
const rowSave = attrs.onRowSave;
@@ -5596,9 +5600,12 @@ const PageAvueForm = {
slot,
])
);
return h('div', { class: attrs.option?.dialogCustomClass || 'business-crud-form-page-dialog' }, [
h(resolveComponent('avue-form'), attrs, slots),
]);
const children = [];
if (this.formPageTitle) {
children.push(h('div', { class: 'archive-page-form__title' }, this.formPageTitle));
}
children.push(h(resolveComponent('avue-form'), attrs, slots));
return h('div', { class: attrs.option?.dialogCustomClass || 'business-crud-form-page-dialog' }, children);
},
};
@@ -6202,6 +6209,18 @@ export default {
(this.isStandaloneBusinessPage && ['add', 'edit'].includes(this.$route.query.mode))
);
},
formPageTitle() {
if (
this.isStandaloneFormPage &&
(this.isShippingTemplatePage || this.isTransportPlanPage || this.isWaybillDetailLayout)
) {
return (
this.$route.query.name ||
`${this.$route.query.mode === 'edit' ? '编辑' : '新增'}${this.config.title || ''}`
);
}
return '';
},
crudContainer() {
return this.isStandaloneFormPage ? 'PageAvueForm' : 'avue-crud';
},
@@ -15158,8 +15177,9 @@ export default {
&__transport-plan-detail-head,
&__transport-plan-waybill-card {
border: 1px solid #dfe3e8;
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
&__transport-plan-detail-head {
@@ -15316,7 +15336,7 @@ export default {
}
&__transport-plan-waybill-card {
margin-top: 8px;
//margin-top: 8px;
padding: 16px 14px 12px;
}
@@ -16025,7 +16045,7 @@ export default {
// 独立表单页（合同/运单/运输计划/运输模板）：标题分块使用白底卡片，间距 12px，与 section-card 风格一致
:global(.business-crud-form-page-dialog:not(.el-dialog)) {
padding: 20px 24px 96px;
//padding: 20px 24px 96px;
box-sizing: border-box;
}
src/views/business/components/master-order-editor.vue
+2
View File
@@ -1739,6 +1739,8 @@ export default {
padding: 16px;
border: 1px solid #eff1f7;
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
h3 {
margin: 0 0 16px;
padding-left: 12px;
src/views/business/loading-manage.vue
+11 -3
View File
@@ -388,6 +388,7 @@
@update:model-value="value => !isStandaloneFormPage && (dialogVisible = value)"
@closed="resetLoadingDialog"
>
<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>
<div v-loading="dialogLoading" class="loading-manage-dialog__body">
<div v-if="dialogReadonly" class="loading-detail">
<section-card title="配载单详情">
@@ -724,7 +725,7 @@
</section-card>
<div class="loading-manage-dialog__waybill-route-layout">
<section-card title="待配载列表">
<section-card title="待配载列表" style="min-height: 257px">
<el-table
:data="selectedWaybillRows"
border
@@ -1228,6 +1229,12 @@ export default {
['add', 'edit'].includes(this.$route.query.mode)
);
},
formPageTitle() {
return (
this.$route.query.name ||
`${this.$route.query.mode === 'edit' ? '编辑' : '新增'}配载管理`
);
},
},
mounted() {
this.loadTransportTypeOptions();
@@ -2352,7 +2359,7 @@ export default {
.loading-manage-page {
.loading-manage-page__search {
padding: 12px 12px 4px;
margin-bottom: 8px;
margin-bottom: 20px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@@ -2472,6 +2479,7 @@ export default {
}
.loading-manage-dialog {
min-height: 12vh;
.loading-manage-dialog__body {
max-height: 78vh;
overflow-y: auto;
@@ -2504,7 +2512,7 @@ export default {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
margin-bottom: 16px;
//margin-bottom: 12px;
}
.loading-manage-dialog__candidate-actions,
src/views/business/master-order.vue
+14 -9
View File
@@ -116,12 +116,14 @@
</div>
</section>
</template>
<master-order-editor
v-else-if="mode === 'editor'"
:id="routeId"
@back="goList"
@dispatch="goDispatch"
/>
<template v-else-if="mode === 'editor'">
<div class="archive-page-form__title">{{ masterEditorTitle }}</div>
<master-order-editor
:id="routeId"
@back="goList"
@dispatch="goDispatch"
/>
</template>
<master-order-dispatch v-else-if="mode === 'dispatch'" :id="routeId" @back="goList" />
<master-order-detail v-else :id="routeId" @back="goList" />
<el-dialog v-model="confirm.visible" title="提示" width="400px"
@@ -180,6 +182,9 @@ export default {
routeId() {
return this.$route.query.id;
},
masterEditorTitle() {
return this.routeId ? '编辑总单' : '新增总单';
},
},
watch: {
'$route.query': {
@@ -395,7 +400,7 @@ export default {
<style scoped lang="scss">
.master-search {
margin-bottom: 8px;
margin-bottom: 12px;
padding: 12px 12px 4px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
@@ -419,9 +424,8 @@ export default {
}
}
.master-list-panel {
background: #fff;
.toolbar {
padding: 8px;
padding: 8px 0;
}
}
.master-card {
@@ -513,6 +517,7 @@ export default {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
max-width: 180px;
}
}
.route-connector {
src/views/business/project-apply.vue
+2 -2
View File
@@ -2116,10 +2116,10 @@ export default {
font-weight: 600;
&::before {
width: 4px;
//width: 4px;
height: 18px;
margin-right: 8px;
background: #409eff;
//background: #409eff;
border-radius: 2px;
content: '';
}
src/views/business/voucher-manage.vue
+1 -1
View File
@@ -99,7 +99,7 @@
width="120"
fixed="right"
align="center"
/><el-table-column label="操作" width="320" fixed="right" align="left"
/><el-table-column label="操作" width="120" fixed="right" align="left"
><template #default="{ row }"
><div class="voucher-manage-page__actions">
<el-link