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

style(footer): 统一多页面底栏按钮样式与排序规则

Browse Source 
- 规范 master-order-editor.vue 底栏按钮类型及排序，按钮层级清晰
- 调整 payment-application-form.vue 底栏按钮样式为右对齐并浮动底部
- 统一 invoice-application/receipt-form 页底栏按钮顺序，返回按钮置首
- 所有相关表单页按钮底栏统一采用 sticky 浮动，背景及阴影样式一致
- 修复多个页面按钮缺少 plain 样式导致视觉层级不明
- 按钮间距统一为 12px，底栏内边距调整为 12px 24px
- 调整多个表单页面按钮组从居中对齐改为右对齐，提升操作一致性
- 保留弹窗 footer 按钮布局，不影响各页面独立弹窗交互体验
This commit is contained in:
赵忠林
2026-08-26 18:43:03 +08:00
parent 88c5f58548
commit 84c46b9312
13 changed files with 162 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.workbuddy/memory/2026-08-26.md
+60
View File
@@ -230,3 +230,63 @@ Avue-form 内置按钮默认在中间，自定义内容分两侧插槽：
**未触发场景**:
- transport-plan / waybill / loading-manage 等其它走 business-crud-page 但未声明 `standalone-form-page` 的页面，
本次未改。需要时可按相同模式补 slot。
## master-order 编辑页底栏按钮统一
**问题**: `/business/master-order?mode=editor`（多联总单编辑/新增页）底部按钮没统一。
**根因**: 编辑页是 `master-order.vue` 的 `mode==='editor'` 模板里内嵌 `<master-order-editor>` 组件，
主 footer 在 `src/views/business/components/master-order-editor.vue:534-539`。
**原状**:
```
[返回 default] [暂存 default] [确认创建 primary] [创建并调度 primary]
```
- 暂存 无 type，与返回同为灰描边，缺层级
- 确认创建 / 创建并调度 两个都 primary 实心，无视觉优先级
- footer 仅 `flex-end` + `padding:16px 0`，不浮动
**修复** (`master-order-editor.vue`):
- 按钮改：`[返回 default] [暂存 primary plain] [确认创建 primary plain] [创建并调度 primary]`
严格按「返回第一个、中间浅蓝 plain、最后深蓝实心」规则，仅最右一个深蓝。
- footer 样式改浮动底部：`position: sticky; bottom:0; z-index:10; background:#fff;
border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px`。
**未动**: 页内各 el-dialog 的 footer（线路/地图/常用货物/货物导入等）已是 `[关闭 default][确定 primary]`，
符合「次→主」规则，无需调整。
## payment-application 表单页底栏按钮统一
**问题**: `/payment/payment-application/form?mode=add`（付款申请表单页）底部按钮没统一。
**根因**: 独立表单页 `src/views/payment/payment-application-form.vue` 的 `.payment-form-page__actions` footer（330 行）。
**原状**:
```
justify-content: center（居中）
[返回 default] [保存 default（缺 plain）] [提交 primary]
```
- 保存 无 type，与返回同为灰描边，缺层级
- footer 居中且不浮动
**修复** (`payment-application-form.vue`):
- 按钮：`[返回 default] [保存 primary plain] [提交 primary]`，仅最后深蓝。
- footer 样式：`justify-content: center` → `flex-end`；加 `position: sticky; bottom:0; z-index:10;
background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px`。
**未动**: `payment-application.vue`（list 表格页，无独立 footer）；`invoice-application-form.vue` / `invoice-receipt-form.vue` 上一轮已改。
## invoice-application / invoice-receipt 表单页底栏按钮统一
**问题**: `/payment/invoice-application/form?mode=add` 底部按钮没统一（用户反馈）。排查发现同族 `invoice-receipt-form.vue` 完全同款问题，一并修了。
**根因**: 两个发票表单页 footer 都是 `[同步 plain][返回 default][保存 plain][提交 primary]` + `justify-content: center`（居中），且未浮动。
- 同步 在 返回 之前，违反「返回在第一个」
- footer 居中，不靠右、不浮动
**修复**（`invoice-application-form.vue` 419-433 + 980；`invoice-receipt-form.vue` 242-256 + 777）：
- 按钮重排为 `[返回 default][同步 plain][保存 plain][提交 primary]`，返回置首、最后仅提交深蓝。
- footer 样式：`justify-content: center` → `flex-end`；加 `position: sticky; bottom:0; z-index:10;
background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px`。
**注意**: 之前首轮曾把这两个页「保存加 plain、返回挪到保存前面」，但当时没动 同步 的位置、没改居中/浮动，所以用户仍觉得没统一。本次彻底对齐。
.workbuddy/memory/MEMORY.md
+4
View File
@@ -54,6 +54,10 @@
- `payment/invoice-receipt-form.vue`、`payment/invoice-application-form.vue`
- `vehicle/customer-archive.vue` 全部 5 处 footer（`archive-form__footer` 主表单页 + `contact-dialog`/`receipt-dialog`/`invoice-dialog` 子弹窗 + `score-detail-dialog` 含总分合计）
- `business/components/business-crud-page.vue` 的 PageAvueForm 独立表单页（`#menu-form-before` slot 新增 `关闭` 按钮，紧跟运费合计、置于保存草稿之前；shipping-template 模式验证通过）
- `business/components/master-order-editor.vue` 主 `<footer>`（返回 default + 暂存/确认创建 plain + 创建并调度 primary；footer 用 `position:sticky; bottom:0` 浮动底部）
- `payment/payment-application-form.vue` `.payment-form-page__actions`（返回 default + 保存 plain + 提交 primary；footer `justify-content:flex-end` + `position:sticky` 浮动底部）
- `payment/invoice-application-form.vue` `.invoice-form-page__actions`（`[返回][同步][保存][提交]`，返回置首 + 提交深蓝；footer 右对齐浮动）
- `payment/invoice-receipt-form.vue` `.receipt-form-page__actions`（同上，与发票申请同款结构）
- **已合规未动**：`settlement/components/pre-settlement-editor.vue`、`settlement/components/transport-reconciliation-editor.vue`、`business/temporary-credit-limit.vue`。
- **Avue-form footer 结构注意**：`#menu-form-before` slot 内容在 Avue 内置按钮之**左**；`#menu-form` slot 在 Avue 内置按钮之**右**。要实现 `[次要][Avue 主操作]` 顺序，把次要按钮放进 `#menu-form-before`，主操作保留 Avue 内置即可。
- **复杂 footer 例外**：当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时，块用 `flex:1` 推自己到最左，按钮组按上述规则排在右半边（参考 `score-detail-dialog`）。
src/views/business/components/master-order-editor.vue
+12 -6
View File
@@ -532,10 +532,10 @@
</template>
</el-dialog>
<footer>
<el-button @click="$emit('back')">返回</el-button
><el-button @click="saveDraft">暂存</el-button
><el-button type="primary" @click="confirmCreate">确认创建</el-button
><el-button type="primary" @click="createAndDispatch">创建并调度</el-button>
<el-button @click="$emit('back')">返回</el-button>
<el-button type="primary" plain @click="saveDraft">暂存</el-button>
<el-button type="primary" plain @click="confirmCreate">确认创建</el-button>
<el-button type="primary" @click="createAndDispatch">创建并调度</el-button>
</footer>
</div>
</template>
@@ -2050,7 +2050,13 @@ export default {
footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 0;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
</style>
src/views/payment/bill-ledger-form.vue
+10 -4
View File
@@ -267,8 +267,8 @@
</section-card>
<div class="bill-ledger-form-page__actions">
<el-button type="primary" :loading="saving" @click="confirmSubmit">确认</el-button>
<el-button @click="goBack">取消</el-button>
<el-button type="primary" :loading="saving" @click="confirmSubmit">确认</el-button>
</div>
</el-form>
</basic-container>
@@ -591,9 +591,15 @@ export default {
}
.bill-ledger-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.bill-ledger-form-page :deep(.el-table) {
--el-table-border-color: #eff1f7;
src/views/payment/bill-payment-form.vue
+8 -2
View File
@@ -399,8 +399,14 @@ export default {
.bill-payment-form-page__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 0 8px;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.bill-payment-form-page__dialog-search {
display: flex;
src/views/payment/invoice-application-form.vue
+10 -4
View File
@@ -417,8 +417,8 @@
</section-card>
<div class="invoice-form-page__actions">
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button @click="goBack">返回</el-button>
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button
v-if="!readonly && canSave"
type="primary"
@@ -979,9 +979,15 @@ export default {
}
.invoice-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.invoice-form-page__attachment-upload {
display: flex;
src/views/payment/invoice-receipt-form.vue
+10 -4
View File
@@ -240,8 +240,8 @@
</section-card>
<div class="receipt-form-page__actions">
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button @click="goBack">返回</el-button>
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
<el-button
v-if="!readonly && canSave"
type="primary"
@@ -776,9 +776,15 @@ export default {
}
.receipt-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.receipt-form-page__dialog-search {
display: flex;
src/views/payment/payment-application-form.vue
+11 -6
View File
@@ -328,9 +328,9 @@
</div>
</section-card>
<div class="payment-form-page__actions">
<el-button @click="goBack">返回</el-button
><el-button v-if="!readonly && canSave" @click="saveDraft(false)">保存</el-button
><el-button
<el-button @click="goBack">返回</el-button>
<el-button v-if="!readonly && canSave" type="primary" plain @click="saveDraft(false)">保存</el-button>
<el-button
v-if="!readonly && canSave && hasPermission('payment_application_submit')"
type="primary"
@click="submitForm"
@@ -1282,10 +1282,15 @@ export default {
<style scoped lang="scss">
.payment-form-page__actions {
display: flex;
justify-content: center;
gap: 16px;
padding: 24px 0;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.payment-form-page__section-actions {
display: flex;
src/views/payment/receipt-claim-record-form.vue
+9 -2
View File
@@ -312,8 +312,15 @@ export default {
<style scoped lang="scss">
.claim-record-form-page__actions {
display: flex;
justify-content: center;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.claim-record-form-page__links {
display: flex;
src/views/payment/receipt-flow-form.vue
+11 -5
View File
@@ -165,8 +165,8 @@
/></el-form-item>
</section-card>
<div class="receipt-claim-form-page__actions">
<el-button type="primary" :loading="submitting" @click="submitClaim">确认</el-button
><el-button :disabled="submitting" @click="goBack">取消</el-button>
<el-button :disabled="submitting" @click="goBack">取消</el-button>
<el-button type="primary" :loading="submitting" @click="submitClaim">确认</el-button>
</div>
</el-form>
@@ -471,9 +471,15 @@ export default {
}
.receipt-claim-form-page__actions {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px 0 8px;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
border-top: 1px solid #eff1f7;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.receipt-claim-form-page__dialog-search {
display: flex;
src/views/settlement/components/formal-settlement-editor.vue
+7 -2
View File
@@ -1546,9 +1546,14 @@ export default {
.formal-editor__page-actions {
display: flex;
justify-content: flex-end;
padding: 16px 0 4px;
padding: 12px 24px;
border-top: 1px solid #eff1f7;
gap: 8px;
gap: 12px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
.formal-editor__links {
display: flex;
src/views/settlement/components/pre-settlement-editor.vue
+9 -4
View File
@@ -393,7 +393,7 @@
<template v-if="!pageMode" #footer>
<el-button @click="visible = false">取消</el-button>
<el-button v-if="editable" :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button v-if="editable" type="primary" plain :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button
v-if="editable && hasPermission('pre_settlement_submit')"
type="primary"
@@ -405,7 +405,7 @@
</template>
<div v-if="pageMode" class="pre-settlement-editor__page-actions">
<el-button @click="visible = false">取消</el-button>
<el-button v-if="editable" :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button v-if="editable" type="primary" plain :loading="saving" @click="saveDraft(false)">保存</el-button>
<el-button
v-if="editable && hasPermission('pre_settlement_submit')"
type="primary"
@@ -1529,9 +1529,14 @@ export default {
&__page-actions {
display: flex;
justify-content: flex-end;
padding: 16px 0 4px;
padding: 12px 24px;
border-top: 1px solid #eff1f7;
gap: 8px;
gap: 12px;
position: sticky;
bottom: 0;
z-index: 10;
background: #fff;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}
&__form {
src/views/settlement/receivable-payable-detail.vue
+1 -1
View File
@@ -597,7 +597,7 @@
</div>
<template #footer>
<el-button @click="previewDialog.visible = false">取消</el-button>
<el-button type="primary" @click="backToGenerateDialog">上一步</el-button>
<el-button type="primary" plain @click="backToGenerateDialog">上一步</el-button>
<el-button type="primary" :loading="previewDialog.submitting" @click="submitGenerateFee">
提交
</el-button>