From 68f4b2c35e2de9f8bb86d5a8931d9bb0da2474f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Tue, 13 Oct 2026 20:21:17 +0800 Subject: [PATCH] =?UTF-8?q?style(transportCapacity):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E8=BD=A6=E8=BE=86=E8=B0=83=E5=BA=A6=E5=BC=B9=E7=AA=97=E9=83=A8?= =?UTF-8?q?=E9=97=A8=E7=BA=A7=E8=81=94=E9=80=89=E6=8B=A9=E5=99=A8=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 注释掉多个页面及组件中el-form-item的margin-bottom样式 - 增加车辆调度弹窗配置dialogCustomClass: 'vehicle-dispatch-dialog' - 在全局样式element-ui.scss中为.vehicle-dispatch-dialog内el-cascader设置宽度100% - 解决avue-crud弹窗append-to-body导致页面容器scoped样式无法命中问题 - 更新vite配置，将开发服务器端口修改为2889，代理目标指向远程地址 - 补充工程文档说明和样式调整原因分析 --- .workbuddy/memory/2026-10-13.md | 11 +++ .workbuddy/memory/MEMORY.md | 2 + cascader-width-check.html | 84 +++++++++++++++++++ .../transportCapacity/vehicle-dispatch.js | 3 + src/styles/element-ui.scss | 13 +++ src/views/business/project-apply.vue | 2 +- src/views/vehicle/customer-archive.vue | 2 +- vite.config.mjs | 30 +++---- 8 files changed, 130 insertions(+), 17 deletions(-) create mode 100644 .workbuddy/memory/2026-10-13.md create mode 100644 cascader-width-check.html diff --git a/.workbuddy/memory/2026-10-13.md b/.workbuddy/memory/2026-10-13.md new file mode 100644 index 0000000..d4dff4c --- /dev/null +++ b/.workbuddy/memory/2026-10-13.md @@ -0,0 +1,11 @@ +# 2026-10-13 + +## 车辆调度弹窗：使用部门级联选择器宽度对齐 + +- 现象：`/transportCapacity/vehicle-dispatch` 新增/编辑弹窗中，使用部门 `el-cascader` 明显窄于同行车牌号 `el-input`。 +- 根因：`el-cascader` 是 `display: inline-block` 宽度按内容收缩（不像 `el-autocomplete` / `el-input` 有 `--el-input-width: 100%` 兜底）；而页面里写的 `.vehicle-dispatch-page :deep(.vehicle-dispatch-form-control){width:100%}` 命中不到 —— avue-crud 弹窗默认 `append-to-body: true`（`append-to-body": validData(crud.tableOption.dialogAppendToBody, true)`），DOM Teleport 到 body，已不在 `.vehicle-dispatch-page` 之下。 +- 修法（走项目既有约定）： + 1. `src/option/transportCapacity/vehicle-dispatch.js` 增加 `dialogCustomClass: 'vehicle-dispatch-dialog'`； + 2. `src/styles/element-ui.scss` 增加全局规则 `.vehicle-dispatch-dialog .el-form-item__content > .el-cascader { width:100%; max-width:100% }`。 +- 自检：dev(2889) `curl /src/styles/element-ui.scss` 与 `/src/option/transportCapacity/vehicle-dispatch.js` 均 200，编译产物含新规则。 +- 遗留观察：同文件里 `.vehicle-dispatch-page :deep(.avue--detail ...)` 那一批查看态禁用样式，同样因 Teleport 属死规则（未改，待确认是否需要迁到 `.vehicle-dispatch-dialog` 作用域）。 diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md index 6be373c..e094720 100644 --- a/.workbuddy/memory/MEMORY.md +++ b/.workbuddy/memory/MEMORY.md @@ -12,6 +12,8 @@ **坑二：宿主 view 直绑全局 `$route.query.*` 给子组件 prop。** 缓存实例被灌入当前页 id → 拿错 id 查后端（批量弹「运单管理不存在」），live computed 还会误 push 标签。修法：`routePathLocked` 锁路径 + watcher / push 前判 `isOwnedRouteActive` + 宿主绑定加路径守卫。⚠️ `routePathLocked` **必须放 `data()`**（Options API 顺序 data → computed → watch(immediate) → created；放 created 会读到空值、挡掉首次加载）。已修 waybill-manage-page / transport-plan-page + 三个宿主 view。 +**坑四：avue-crud 弹窗 `append-to-body` 默认 true（`dialog-form3.js`：`validData(tableOption.dialogAppendToBody, true)`），DOM Teleport 到 body。** 于是页面里以页面容器为祖先的 scoped 选择器（`.xxx-page :deep(.yyy)`）**命中不到弹窗内容**，尤其 `el-cascader`（inline-block、宽度按内容收缩，不像 `el-input`/`el-autocomplete` 有 `--el-input-width:100%` 兜底）会明显比同行 input 窄。修法：option 里配 `dialogCustomClass: 'xxx-dialog'`，规则写到 `src/styles/element-ui.scss` 的 `.xxx-dialog ...`（项目既有约定，10+ 处同款）；或把基准类放在 **Teleport 内部元素**上（如 ship.vue 的 `.ship-form` 挂在 el-form 上，自身带 scope 属性，照样生效）。 + **坑三：路由表重复定义 → 内容区整页空白（2026-09-18）。** `/business/contract-manage/detail` 在 `router/views/index.js` 定义两次、子路由同名 `合同详情`。重名 `addRoute` 会 `removeRoute(name)` 移除旧子记录，但**不从父记录 children 里摘除**，第一条 Layout 壳记录留在 matcher 且靠前 → `resolve()` 命中它 → `$route.matched.length === 1` → 二级 router-view 无匹配 → 侧栏/标签正常但内容空白。修法：删重复定义。排查：扫「顶层 path + 首个子路由 name」重复项。 ## 样式硬规则 diff --git a/cascader-width-check.html b/cascader-width-check.html new file mode 100644 index 0000000..06ec13c --- /dev/null +++ b/cascader-width-check.html @@ -0,0 +1,84 @@ + + + + + cascader width check + + +
+ + + diff --git a/src/option/transportCapacity/vehicle-dispatch.js b/src/option/transportCapacity/vehicle-dispatch.js index 55361af..d2313cd 100644 --- a/src/option/transportCapacity/vehicle-dispatch.js +++ b/src/option/transportCapacity/vehicle-dispatch.js @@ -12,6 +12,9 @@ export const option = { height: 'auto', calcHeight: 32, dialogWidth: 1200, + // 弹窗根节点 class：avue-crud 弹窗默认 append-to-body 到 body， + // 页面内 scoped 样式命中不到弹窗内容，故用该 class 在全局样式里做兜底（见 styles/element-ui.scss） + dialogCustomClass: 'vehicle-dispatch-dialog', labelPosition: 'right', labelWidth: 'auto', tip: false, diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 56985dc..d2ea9a6 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -652,6 +652,19 @@ background: #fff; } +// 车辆调度新增/编辑/查看弹窗：使用部门 el-cascader 默认 display: inline-block、宽度按内容收缩， +// 会比同行的 el-input（--el-input-width 默认 100%）窄一大截，需显式拉满列宽。 +// 两个必须注意的点（踩过）： +// 1) avue-crud 弹窗默认 append-to-body 到 body，页面内 `.vehicle-dispatch-page :deep(...)` +// 这类以页面容器为祖先的选择器匹配不到弹窗内容，必须用弹窗自身 class（dialogCustomClass）在全局兜底； +// 2) avue 表单项在 el-form-item__content 与控件之间还有两层包裹 div +// （form/index3.js 渲染：content > div > [div|elTooltip] > 控件）， +// 所以要用后代选择器，不能写 `>` 直接子级。 +.vehicle-dispatch-dialog .el-form-item__content .el-cascader { + width: 100%; + max-width: 100%; +} + // 过程配置新增/编辑/查看弹窗（手写 el-dialog，参照 vehicle/credit-score-quantification）： // 灰底弹窗体（全站 .el-dialog__body 已统一）内堆叠 分组白卡， // 卡间 12px 间距由 section-card 自身 margin-bottom 保证，与项目其他弹窗风格统一 diff --git a/src/views/business/project-apply.vue b/src/views/business/project-apply.vue index 45fd72b..13f28b1 100644 --- a/src/views/business/project-apply.vue +++ b/src/views/business/project-apply.vue @@ -2842,7 +2842,7 @@ export default { } :deep(.el-form-item) { - margin-bottom: 24px; + //margin-bottom: 24px; } :deep(.el-form-item__label) { diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue index adff90a..1fd1182 100644 --- a/src/views/vehicle/customer-archive.vue +++ b/src/views/vehicle/customer-archive.vue @@ -5707,6 +5707,6 @@ export default { margin-bottom: 0; } .el-form-item { - margin-bottom: 24px !important; + //margin-bottom: 24px !important; } diff --git a/vite.config.mjs b/vite.config.mjs index 3c635fd..a7036fd 100644 --- a/vite.config.mjs +++ b/vite.config.mjs @@ -47,28 +47,28 @@ export default ({ mode, command }) => { __VUE_I18N_LEGACY_API__: true, __INTLIFY_PROD_DEVTOOLS__: false, }, - server: { - port: 2888, - proxy: { - '/api': { - // 本地网关默认 80 端口（blade-gateway bootstrap.yml）；开发时需先启动网关及 blade-auth/blade-system 等服务 - // 注意：本机 8080 一般是 Nacos，不是业务网关 - target: 'http://localhost', - // target: 'http://172.16.203.228:8000', // 仅联调远程网关时启用（且不要 rewrite） - changeOrigin: true, - rewrite: path => path.replace(/^\/api/, ''), - }, - }, - }, // server: { - // port: 2889, + // port: 2888, // proxy: { // '/api': { - // target: 'http://172.16.203.228:8000', + // // 本地网关默认 80 端口（blade-gateway bootstrap.yml）；开发时需先启动网关及 blade-auth/blade-system 等服务 + // // 注意：本机 8080 一般是 Nacos，不是业务网关 + // target: 'http://localhost', + // // target: 'http://172.16.203.228:8000', // 仅联调远程网关时启用（且不要 rewrite） // changeOrigin: true, + // rewrite: path => path.replace(/^\/api/, ''), // }, // }, // }, + server: { + port: 2889, + proxy: { + '/api': { + target: 'http://172.16.203.228:8000', + changeOrigin: true, + }, + }, + }, resolve: { alias: { '~': resolve(__dirname, './'),