fix(business-crud-page): 修正独立表单页关闭按钮位置顺序

- 独立表单页 shipping-template 中关闭按钮从 #menu-form 移动至 #menu-form-before 插槽
- 关闭按钮置于运费合计与保存草稿按钮之间,保证“次要→主操作”顺序一致
- 关闭按钮仅在独立表单页显示,弹窗模式保持原有顺序不变
- 清理了 #menu-form 槽中残留代码,避免影响渲染
- 修改 Element Plus 相关禁用输入框文字颜色,统一为 #909399,覆盖默认主题差异
This commit is contained in:
2026-08-26 18:35:05 +08:00
parent 1cf8abb162
commit 88c5f58548
4 changed files with 41 additions and 8 deletions
+29
View File
@@ -201,3 +201,32 @@ vehicle/driver/ship 与 customer-archive 等本就是 14px(含 !important
```
直接写死为 `#a8abb2`,覆盖 Element Plus 默认 CSS 变量及主题差异,保证全站一致。
**如需再深**,可把 `#a8abb2` 改为 `#606266`。
## shipping-template 独立表单页「关闭」按钮位置修正
**问题**: `/business/shipping-template/form?mode=add`(独立表单页)底部 `[提交][关闭]` 顺序,
主操作「提交」在左、次要「关闭」在右,与全站「次→主」规则不符。
**根因**: shipping-template 走 `business-crud-page` 复用的 PageAvueFormfooter 用的是 Avue-form 内置结构。
Avue-form 内置按钮默认在中间,自定义内容分两侧插槽:
- `#menu-form-before` slot → 在 Avue 内置按钮之左
- `#menu-form` slot → 在 Avue 内置按钮之右
之前「关闭」按钮写在 `#menu-form` slot(在 Avue 内置按钮之右),导致渲染成 `[Avue 提交][关闭]`,顺序反了。
**修复**: `src/views/business/components/business-crud-page.vue:2059-2090`
- 把「关闭」按钮从 `#menu-form` slot 移到 `#menu-form-before` slot 的「保存草稿」按钮之前。
- 触发条件 `v-if="isStandaloneFormPage && !showTransportPlanCreateActions"`,仅独立表单页生效;
弹窗模式(list 页内点新增/编辑)继续走 Avue 自带的 `[取消][提交]` 不动。
- 「关闭」按钮文字保持默认色(次要),无 type。
- 同步清空 `#menu-form` slot 中 shipping-template 残留(实际只剩 `showTransportPlanCreateActions` 块,
shipping-template 不会触发,留着不影响)。
**最终渲染**(独立表单页):
- 有运费合计 + 草稿:`[运费合计][关闭][保存草稿 plain][Avue 提交]`
- 仅有运费合计:`[运费合计][关闭][Avue 提交]`
- 无运费合计:`[关闭][Avue 提交]`(即主人截图场景)
**未触发场景**:
- transport-plan / waybill / loading-manage 等其它走 business-crud-page 但未声明 `standalone-form-page` 的页面,
本次未改。需要时可按相同模式补 slot。
+3 -1
View File
@@ -53,7 +53,9 @@
- `business/project-apply.vue`footer + 变更 footer
- `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` 含总分合计)
- **已合规未动**`settlement/components/pre-settlement-editor.vue``settlement/components/transport-reconciliation-editor.vue``business/components/business-crud-page.vue`(保存 plain)、`business/temporary-credit-limit.vue`
- `business/components/business-crud-page.vue` 的 PageAvueForm 独立表单页(`#menu-form-before` slot 新增 `关闭` 按钮,紧跟运费合计、置于保存草稿之前;shipping-template 模式验证通过)
- **已合规未动**`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`)。
## 关键文件
+3 -1
View File
@@ -660,9 +660,11 @@
.el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner,
.el-input-number.is-disabled .el-input__inner {
color: #a8abb2;
color: #909399;
-webkit-text-fill-color: #909399;
}
// 全站统一:表格列内容(表头 + 单元格)居中展示
.el-table th.el-table__cell .cell,
.el-table td.el-table__cell .cell {
@@ -2072,6 +2072,12 @@
查看过程配置
</el-link>
</div>
<el-button
v-if="isStandaloneFormPage && !showTransportPlanCreateActions"
@click="closeCrudDialog"
>
关闭
</el-button>
<el-button
v-if="config.enableDraftSave && !dialogReadonly"
type="primary"
@@ -2106,12 +2112,6 @@
确认创建
</el-button>
</div>
<el-button
v-if="isStandaloneFormPage && !showTransportPlanCreateActions"
@click="closeCrudDialog"
>
关闭
</el-button>
</template>
<template #menu="{ row, index }">