gxwebsoft
4ffceb0413
- 将客户档案页面“所在地区”所在列从12改为6，新增“详细地址”列宽为6 - 修改“所在地区”级联选择器宽度由250px改为240px，匹配更合理的宽度设计 - 优化地址相关表单的布局，提高信息展示的清晰度和一致性 - transportCapacity/ship 组合控件宽度对齐至250px，解决两个date-picker和select宽度不一致的问题 - 修复项目表单中el-cascader宽度未统一的问题，确保级联选择器与其他输入控件同宽
53 lines
7.5 KiB
Markdown
53 lines
7.5 KiB
Markdown
# 2026-09-02 工作日志
|
||
|
||
## 合同/运力页「到期快捷筛选」标签统一改为独立一行
|
||
- 需求：把 avue-crud 搜索栏 `#search-menu` 里的 `<el-check-tag>` 到期快捷筛选组，移出搜索栏、单独成一行（搜索卡下方、表格上方），不加卡片包裹。
|
||
- 实现：改用 avue-crud 的 `#header` 插槽承载该组；CSS 由 `order:-1; margin-right:12px; min-width:0`（搜索按钮行内联）改为 `margin-bottom:12px`（独立行）。
|
||
- 涉及文件（4 处，均已改）：
|
||
- `src/views/business/contract-manage.vue`（首改，用 `.contract-manage-page__expiry-search`）
|
||
- `src/views/transportCapacity/vehicle.vue`（`.transport-vehicle-page__expiry-tags`）
|
||
- `src/views/transportCapacity/driver.vue`（`.driver-page__expiry-tags`）
|
||
- `src/views/transportCapacity/ship.vue`（`.transport-ship-page__expiry-tags`）
|
||
- 各页变量名保留原样（contract-manage 用 contractExpiryScope/changeExpiryScope/contractExpiryStats；运力页用 query.expireStatus/handleExpireChange/expiryStat）。
|
||
- 已补改并修正：`payment/bill-ledger` 页。用户要求"放在卡片下面"（搜索白卡之外、表格之上独立一行），非卡片内分行。最终方案：把到期快捷筛选整组（标签 DOM + `shortcutOptions` 计算属性 + `handleShortcutChange`）从子组件 `bill-ledger-search.vue` 提升到页面 `bill-ledger.vue`，置于 `<bill-ledger-search>` 与 `<bill-ledger-table>` 之间（卡片下、表格上）。
|
||
- `bill-ledger-search.vue`：删除标签 DOM、`.bill-ledger-search__actions`/`.bill-ledger-search__actions-tags` CSS、`counts` prop、`shortcutOptions`/`handleShortcutChange`；按钮行 `.bill-ledger-search__actions-buttons` 恢复单行右对齐（`margin-bottom:8px`）。
|
||
- `bill-ledger.vue`：模板插入 `<div class="bill-ledger-page__expiry-tags">`（绑定 `query.expiryShortcut`，@change 调 `handleShortcutChange`→`handleSearch`）；脚本加 `shortcutOptions` computed（用 `counts`）+ `handleShortcutChange` method；新增 `<style scoped>` 写入 `.bill-ledger-page__expiry-tags`（flex 行、`margin:8px 0`）。`emptyQuery()` 已含 `expiryShortcut:'all'`，无回归。
|
||
- 选中态样式统一：去掉 `.bill-ledger-page__expiry-tags :deep(.el-check-tag.is-checked)` 的 `background-color:#409eff` + `color:#fff` 蓝底白字覆盖，改用 Element Plus 默认浅蓝底深蓝字，与合同页一致。
|
||
|
||
## transportCapacity/ship 新增弹窗 input 宽度统一
|
||
- 问题：新增/修改弹窗内输入控件宽度不一致（文本框明显窄于下拉框、日期框）。
|
||
- 根因：`src/views/transportCapacity/ship.vue` 末尾 scoped 样式中独有 `.el-input__wrapper{width:150px !important}`，把文本框包裹层强制压成 150px，而 `el-select`（用 `.el-select__wrapper`）、日期/数字框不受影响 → 文本框与下拉框宽度不齐。同模块的 driver.vue / vehicle.vue 均无此规则。
|
||
- 修复：
|
||
1. 删除 `.el-input__wrapper{width:150px!important}` 异常规则。
|
||
2. 增强 `.ship-form` 内输入控件的 100% 宽度覆盖，补齐 `.el-select__wrapper` / `.el-cascader` / `.el-input__wrapper`，使文本框/下拉/日期/数字框均 100% 填满所在栅格列。
|
||
- 说明：弹窗仍保留不同栅格列宽（span6/8/12/16）的密集布局，同行字段已等宽；若需跨行全部 input 绝对像素等宽（统一栅格列宽），需进一步重排。
|
||
- 二次排查（用户反馈仍不一致）：把 `.ship-form` 内控件 100% 覆盖从通用 `:deep(.el-input)` 改为更具体的 `:deep(.el-form-item__content > .el-input)` 并加 `!important`，同步覆盖 `.el-input__wrapper`/`.el-select__wrapper`，确保不会被 Element Plus 变量或更具体选择器压回默认/较窄宽度。请用户刷新浏览器验证。
|
||
- 三次修复（用户反馈第一行 span=6+6+12 三个字段宽度仍不齐）：放弃「width: 100% 撑满 col」方案，改用「对齐 vehicle/customer-archive 的 `.archive-form` 风格」——label 固定 `calc(6em + 24px)` + 控件统一 `250px + max-width: 100%`。根因：`el-cascader` 默认 `display: inline-block`，即使 width: 100% 也不易撑满 col-content（与 input 视觉差 ~150px vs ~280px）；span=6+6+12 下两列 form-item__content 实际不等宽（label-width=100 被长 label 撑开）。新方案固定 250px 后三字段视觉一致，参照客商档案。
|
||
- 同时清理模板中冗余 `label-width="88px"`（会被新 CSS 强制覆盖失效）。
|
||
|
||
## transportCapacity/ship 证书信息分组：附件下放到对应分组末尾 + label 缩短
|
||
- 需求：1. 「船舶国籍证书」「内河船舶最低安全配员证书」分组里 label 「证书有效期自」偏长，改短为「有效期自」（与下面统一）。2. 底部集中的 `.cert-upload-grid` 上传区调整到各证书分组末尾，让附件与字段同组。
|
||
- 修改：
|
||
- `src/views/transportCapacity/ship.vue` 模板 line 392/431：2 处 `label="证书有效期自"` → `label="有效期自"`。
|
||
- 模板结构重组：删除底部 `<el-row class="cert-upload-grid">...</el-row>`（原 line 472-548），把 6 个 `<image-upload-field>` 分别插入对应 `cert-block` 末尾（每个用 `class="ship-upload-item"`，独立 `<el-row :gutter="18"><el-col :span="8">`）：
|
||
- 船舶所有权证书分组 → `ownershipCertImage`
|
||
- 内河船舶安全与环保证书分组 → `safetyCertImage`
|
||
- 船舶国籍证书分组 → `nationalityCertImage`
|
||
- 内河船舶最低安全配员证书分组 → `safeManningCertImage`
|
||
- 光船租赁登记证明书分组 → `leaseContractImage`（label="光船租赁登记证书"）
|
||
- 船舶营业运输证书分组 → `businessTransportCertImage`（label="船舶营业运输证"）
|
||
- 样式清理：删除无用的 `.cert-upload-grid { padding-top:8px }` / `.cert-upload-spacer { height:1px }`；保留 `.cert-block` / `.cert-block__title` / `.ship-upload-item`（`margin-bottom:14px`）。
|
||
- 验证：用户刷新浏览器看新布局。
|
||
|
||
## transportCapacity/ship 组合控件宽度对齐 250px 体系
|
||
- 问题：基础船舶信息里「安放龙骨日期/建造完工日期」的起止两个 date-picker、「航区」的 select 都是 `flex:1` 撑满所在 span=12 整列（约 498px），明显比单字段 250px 宽，视觉不协调。
|
||
- 修复（`src/views/transportCapacity/ship.vue` 末尾 scoped 样式）：
|
||
- `.date-range-inline :deep(.el-date-editor)` 由 `flex:1; min-width:0` 增加 `max-width: 250px` → 两个 date-picker 在窗够宽时各对齐 250px、彼此等宽，窄窗时 flex:1 收缩不溢出。
|
||
- `.navigation-area-field :deep(.el-select)` 由 `flex:1; min-width:0` 增加 `max-width: 250px` → 航区 select 对齐 250px 单字段。
|
||
- 说明：`flex:1` 保底防溢出，`max-width:250px` 把组合控件拉回与单字段一致的 250px 体系（受所在列宽限制，安放龙骨 span=12 在常规窗宽下两个 date-picker 约 226px 等宽，更宽窗自动到 250px）。
|
||
|
||
## business/project-apply.vue 表单「业务部门/承办部门」级联选择器宽度统一
|
||
- 问题：项目新增/编辑表单（含独立表单页 `/business/project-apply/form`）中，业务部门、承办部门两个 `el-cascader` 的按钮宽度与同行的 select/input 不一致。
|
||
- 根因：scoped 样式里强制 100% 宽度的控件列表（`el-input` / `el-select` / `el-tree-select` / `el-date-editor`）漏了 `el-cascader`，导致级联选择器按内容宽度收缩，未填满栅格列。
|
||
- 修复：`src/views/business/project-apply.vue` 末尾 scoped 样式 `.project-apply-form` 的 100% 宽度规则补上 `:deep(.el-cascader)`。Vite HMR 已自动生效，无需重启 dev。
|