gxwebsoft
2131e99ec4
- 新增路由 /business/contract-manage/detail，详情页共享合同管理组件 - 列表、表单、详情三分支用 isFormPage 和 isDetailPage 控制 - openDetail 方法改为跳转详情路由，initDetailPage 获取详情数据 - 新增 resetDetailState 和 closeDetailPage 方法，复用关闭逻辑 - 详情页去除弹窗高度限制，样式改为页面自滚动 - 详情页底栏使用固定位置关闭按钮，保持页面布局一致 - watch 和 created 中添加对 isDetailPage 的初始化调用和监听
29 lines
3.7 KiB
Markdown
29 lines
3.7 KiB
Markdown
# 2026-09-11
|
||
|
||
## 上传证件区域固定宽度导致跨机器错位（transportCapacity）
|
||
- 现象：driver.vue 新增弹窗的身份证/大头照上传框在本机对齐，他人电脑不对齐。
|
||
- 根因：`--large` 上传框写死 `width:240px`（ship 写 248px），而弹窗 `width:90%` + `el-col :span=6` 列宽是弹性的、上方输入框 `width:100%`；列宽随分辨率 / Windows 系统缩放 / 浏览器缩放变化，240px 只在特定宽度下恰好等于列宽。叠加 `labelWidth:auto` 靠 JS 实测字体（苹方 vs 微软雅黑）宽度，label 列宽也不同 → 起始位置漂移。
|
||
- 修复：三个文件改为 `width:100%; max-width:240px; flex:none`（ship 保留 248px 上限），窄屏跟随列宽、宽屏保持比例上限，左边缘恒与输入框对齐。
|
||
- `src/views/transportCapacity/driver.vue`（.driver-uploader--large）
|
||
- `src/views/transportCapacity/vehicle.vue`（.vehicle-uploader--large）
|
||
- `src/views/transportCapacity/ship.vue`（.ship-uploader--large）
|
||
- 用 @vue/compiler-sfc（脚本放项目根目录）验证三个 SFC 编译通过。
|
||
- 教训：本项目所有「固定 px 宽度的上传/控件」都要配 `max-width` + `width:100%`，否则高分屏/低分屏下必然错位。
|
||
|
||
## 合同详情由弹窗改为独立页面（contract-manage）
|
||
- 路由：新增 `/business/contract-manage/detail`（`src/router/views/index.js`，name『合同详情』，meta `keepAlive:false` + `activeMenu:'/business/contract-manage'`），组件仍复用 `contract-manage.vue`（与 form 页同一套路）。
|
||
- 页面内三分支：`v-if="!isFormPage && !isDetailPage"`（列表）/ `v-else-if="isFormPage"`（表单）/ `v-else`（详情）。**v-else 必须紧邻 form 分支的 `</template>`**，中间不能插其它组件，否则 Vue 编译报「v-else 无相邻 v-if」——弹窗类组件（billing-plan-editor / 附件预览 / 变更记录详情 / 流程）放在三个分支之后。
|
||
- 关键改动：`openDetail` 改 `router.push({ path:'/business/contract-manage/detail', query:{ id, name } })`；新增 `initDetailPage()`（按 query.id 拉详情，`resetDetailState()` 先清空）、`closeDetailPage()`（closeTag + 回列表）、`isDetailPage` / `detailPageTitle` computed；`created` 与 `$route.fullPath` watch 都要加 `else if (this.isDetailPage)`。
|
||
- 样式：`.contract-manage-detail--page { max-height:none; overflow:visible }`，去掉弹窗的 74vh 限制；底栏复用 `.contract-manage-page__footer`（fixed 浮动），只读详情页按钮保留「关闭」。
|
||
- 校验方式：dev server 已运行时 `curl "http://localhost:2889/src/views/business/contract-manage.vue"` 返回 200 即 Vite 编译通过（比整包 build 快）。
|
||
|
||
## 只给「查看弹窗」加宽 label（temporary-credit-limit）
|
||
- 场景：详情页长 label（「剩余项目资金使用额度（万元）」）换行超 2 行撑坏详情表格，但又不能影响新增/编辑页。
|
||
- **关键发现：Avue 的 `avue-form` 在 detail 模式下根节点会挂 `.avue--detail` 类**（源码 `node_modules/@smallwei/avue/lib/packages/element-plus/form/index3.js` 中 `class: normalizeClass([b(), { 'avue--detail': isDetail }])`）。所以「只针对详情态」的选择器就是：
|
||
```scss
|
||
.temporary-credit-limit-dialog .avue--detail .el-form-item__label { width:210px !important; flex:0 0 210px !important; }
|
||
```
|
||
新增/编辑弹窗无 `.avue--detail`，天然不受影响，不需要在 option 里做 mode 判断。
|
||
- 校验样式块编译：dev server 请求 `?vue&type=style&index=1&lang.scss`（**lang 必须写 scss，写 css 会 500**），grep 规则确认产物。
|
||
- 结论备忘：长 label 优先「加宽 + 换行 ≤2 行」，不要用单行省略 + tooltip —— 详情是纯阅读场景，hover 才能看全字段名的可发现性差。
|