style(transportCapacity): 调整车辆调度弹窗部门级联选择器宽度

- 注释掉多个页面及组件中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，代理目标指向远程地址 - 补充工程文档说明和样式调整原因分析
2026-10-13 20:21:17 +08:00
parent 6296c8f6f4
commit 68f4b2c35e
8 changed files with 130 additions and 17 deletions
@@ -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` 作用域）。
@@ -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」重复项。

 ## 样式硬规则
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>cascader width check</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import { createApp, h, ref, resolveComponent } from 'vue';
+      import ElementPlus from 'element-plus';
+      import 'element-plus/dist/index.css';
+      import Avue from '@smallwei/avue';
+      import '@smallwei/avue/lib/index.css';
+      import './src/styles/element-ui.scss';
+
+      const option = {
+        dialogCustomClass: 'vehicle-dispatch-dialog',
+        labelPosition: 'right',
+        labelWidth: 'auto',
+        addBtn: false,
+        editBtn: false,
+        delBtn: false,
+        viewBtn: false,
+        selection: false,
+        column: [
+          { label: '车牌号', prop: 'plateNo', formslot: true, span: 12 },
+          { label: '使用部门', prop: 'useDepartment', formslot: true, span: 12 },
+        ],
+      };
+
+      const tree = [
+        { id: 1, title: '桂物物流集团', children: [{ id: 2, title: '广西桂物物流服务集团有限公司' }] },
+      ];
+
+      const Demo = {
+        data() {
+          return { option, form: {}, data: [], page: { currentPage: 1, pageSize: 10, total: 0 } };
+        },
+        mounted() {
+          this.$nextTick(() => this.$refs.crud.rowAdd());
+        },
+        render() {
+          const crud = resolveComponent('avue-crud');
+          return h(
+            crud,
+            {
+              ref: 'crud',
+              modelValue: this.form,
+              'onUpdate:modelValue': v => (this.form = v),
+              option: this.option,
+              data: this.data,
+            },
+            {
+              'plateNo-form': () =>
+                h(resolveComponent('el-autocomplete'), {
+                  modelValue: this.form.plateNo,
+                  'onUpdate:modelValue': v => (this.form.plateNo = v),
+                  placeholder: '请选择车牌号',
+                  fetchSuggestions: (q, cb) => cb([]),
+                }),
+              'useDepartment-form': () =>
+                h(resolveComponent('el-cascader'), {
+                  modelValue: this.form.useDepartment,
+                  'onUpdate:modelValue': v => (this.form.useDepartment = v),
+                  options: tree,
+                  props: { label: 'title', value: 'id', children: 'children', checkStrictly: true },
+                  clearable: true,
+                  filterable: true,
+                  placeholder: '请选择使用部门',
+                }),
+            }
+          );
+        },
+      };
+
+      const app = createApp(Demo);
+      app.use(ElementPlus);
+      app.use(Avue);
+      app.mount('#app');
+      window.__app = app;
+    </script>
+  </body>
+</html>
@@ -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,
@@ -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 已统一）内堆叠 <section-card> 分组白卡，
 // 卡间 12px 间距由 section-card 自身 margin-bottom 保证，与项目其他弹窗风格统一
@@ -2842,7 +2842,7 @@ export default {
  }

  :deep(.el-form-item) {
-    margin-bottom: 24px;
+    //margin-bottom: 24px;
  }

  :deep(.el-form-item__label) {
@@ -5707,6 +5707,6 @@ export default {
  margin-bottom: 0;
 }
 .el-form-item {
-  margin-bottom: 24px !important;
+  //margin-bottom: 24px !important;
 }
 </style>
@@ -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, './'),