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;
}