fix(business-crud-page): 修正独立表单页关闭按钮位置顺序
- 独立表单页 shipping-template 中关闭按钮从 #menu-form 移动至 #menu-form-before 插槽 - 关闭按钮置于运费合计与保存草稿按钮之间,保证“次要→主操作”顺序一致 - 关闭按钮仅在独立表单页显示,弹窗模式保持原有顺序不变 - 清理了 #menu-form 槽中残留代码,避免影响渲染 - 修改 Element Plus 相关禁用输入框文字颜色,统一为 #909399,覆盖默认主题差异
This commit is contained in:
@@ -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` 复用的 PageAvueForm,footer 用的是 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。
|
||||
|
||||
@@ -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`)。
|
||||
|
||||
## 关键文件
|
||||
|
||||
Reference in New Issue
Block a user