gxwebsoft
2131e99ec4
- 新增路由 /business/contract-manage/detail，详情页共享合同管理组件 - 列表、表单、详情三分支用 isFormPage 和 isDetailPage 控制 - openDetail 方法改为跳转详情路由，initDetailPage 获取详情数据 - 新增 resetDetailState 和 closeDetailPage 方法，复用关闭逻辑 - 详情页去除弹窗高度限制，样式改为页面自滚动 - 详情页底栏使用固定位置关闭按钮，保持页面布局一致 - watch 和 created 中添加对 isDetailPage 的初始化调用和监听
3.7 KiB
3.7 KiB
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『合同详情』，metakeepAlive: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/detailPageTitlecomputed；created与$route.fullPathwatch 都要加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 }])）。所以「只针对详情态」的选择器就是：新增/编辑弹窗无.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 才能看全字段名的可发现性差。