style(business): 统一优化多个业务弹窗为接近全屏高度

- /business/waybill-manage 新增/编辑弹窗添加 dialogCustomClass 控制高度样式,覆盖默认 max-height 限制
- /business/contract-manage 弹窗同样加 dialogCustomClass,scoped 样式解开 Avue 弹窗默认 body 高度限制并实现底部操作栏粘性
- element-ui.scss 新增对应页 dialog 样式,确保弹窗上下留白20px,内容区高度自动适应,底部操作栏始终可见
- 复用 business-crud-page 组件中传入 option 的 dialogCustomClass 实现页面隔离样式,不影响其他业务
This commit is contained in:
2026-08-14 16:01:12 +08:00
parent b3510cf233
commit 285a281439
6 changed files with 117 additions and 4 deletions
+5
View File
@@ -77,3 +77,8 @@
## 环境注意
- Vite 代理跨域:Saber3 axios 开 `withCredentials=true`,直连绝对地址后端须让 CORS `Allow-Origin` 为具体域名(不能用 `*`),否则浏览器拒绝。改 `.env`/`vite.config.mjs` 必须重启 dev。
### business-crud-page 封装页面的弹窗高度改法(重要,复用模式)
- `src/views/business/components/business-crud-page.vue` 被 waybill-manage / transport-plan 等多个业务页共用,内部 `<avue-crud :option="option">`option 由传入 prop `crudOption` 经 `cloneOption`(组件内 6261 行,浅展开+重映射 column,**保留所有顶层属性**)克隆而来。
- 因此给各业务页 `option` 顶层加 `dialogCustomClass: 'xxx-dialog'`,再在 `element-ui.scss` 写 `.xxx-dialog.el-dialog { height/max-height: calc(100vh - 40px) !important; ... }` 等规则,即可**只影响该页**、不波及其他共用页面(已验证 waybill-manage / transport-plan 走同一机制生效)。
- 注意 avue-crud 弹窗带 `avue-crud__dialog` class,会被全局 `.avue-crud__dialog .avue-dialog__footer { margin-top: -30px !important }`element-ui.scss 863 行)影响,自定义 footer 规则需加 `margin-top: 0 !important` 抵消;纯 dialog-form 弹窗(如 shipping-template)无此 class 不受影响。