Files

赵忠林 02b2e3b673 refactor(transportCapacity): 使用 section-card 重构司机管理弹窗布局

- 将司机管理页面新增/编辑弹窗中四个分组改为使用标准 section-card 组件包裹
- 删除手写的扁平样式和红色竖条，统一使用全局 element-ui 样式维护弹窗视觉风格
- 调整司机证件上传区尺寸为 240x151 px，保持身份证比例并左对齐显示
- 优化弹窗中各表单项布局，提高视觉层次与一致性
- 更新 scoped 样式，移除无用的 section-title 样式，保持代码清洁

2026-08-06 16:53:23 +08:00

5.5 KiB

Raw Blame History

项目长期记忆（tms-erp-web-ws / Saber3 客商模块）

设计约定（经用户确认的决策）

弹窗内多字段表单分组：使用全局 `<section-card>` 组件（项目统一标准）

整体结构：

整个弹窗 body 由 src/styles/element-ui.scss 全局 .el-dialog__body { background: #f5f6fa; padding: 16px } 统一灰底（无需页面再覆盖）。
每个业务分组 = 一张白底卡片。用全局组件 <section-card title="分组名">...</section-card>，自动渲染 4px 主色竖条 + 8px 间距的卡头与白底 body（圆角 6px + 极淡阴影），与 loading-manage.vue / customer-archive.vue 等已落地页面一致。
严禁再手写 .xxx-form__block + .dialog-section-title override 拼凑卡片（项目已有 <section-card> 标准组件）。

HTML 结构（每组三件套）：

<section-card title="分组标题">
  <el-row :gutter="18">
    <el-col :span="8">...</el-col>
  </el-row>
  <!-- 同一组的所有 row 都放同一张白卡内 -->
</section-card>

适用：新增/编辑弹窗中字段超过 ~10 个、需按业务语义分组时。

简单分组（仅 3 项）

联系信息等仅 3 项的分组，可用 el-col :span="8" 让三项均分一行，避免 4 列网格留白。

上传证件区域尺寸规范（transportCapacity 模块强制）

比例：中国二代身份证标准尺寸 85.6 × 53.98 mm → 宽:高 = 1.586 : 1（横放）
尺寸：取真实身份证的 ~75% → 固定 240 × 151 px（1.586:1 精确：151 × 1.586 ≈ 240）
位置：在 el-col 列内 margin: 0 左对齐显示（不再 width: 100% 占满整栏，也不再居中）
适用范围：所有 <image-upload-field large> 上传区，包括身份证正反面、大头照、机动车行驶证主页正/反面/副页正/反面、道路运输证、机动车登记本、船舶所有权/安全环保/国籍/最低安全配员/光船租赁/营业运输等所有 cert 图片

实现方式：在每个页面 scoped 样式里覆盖 class-prefix 对应的 --large 选择器（.driver-uploader--large / .vehicle-uploader--large / .ship-uploader--large）：

:deep(.xxx-uploader) { display: block; }  // 不再 width:100%
:deep(.xxx-uploader--large) {
  display: block;
  width: 240px;
  margin: 0;
}
:deep(.xxx-uploader--large .el-upload),
:deep(.xxx-uploader--large.el-upload) {
  width: 100%;
  height: 151px;
}

CSS 顺序要点：.xxx-uploader（特定性 0,0,1,0）必须写在 .xxx-uploader--large（同为 0,0,1,0）之前，源码位置决定覆盖生效。

上传图片点击放大预览（全局组件 `image-upload-field` 已实现）

组件：src/components/image-upload-field/main.vue。原裸 <img> 改为 <el-image :preview-src-list="[value]" fit="contain" preview-teleported :z-index="3000" @click.stop>。点击图片即全屏预览（滚轮缩放 / 旋转 / 下载），零额外依赖。
预览与上传分离：图片 @click.stop 阻止冒泡到 el-upload（否则会触发重传）；"更换"入口（form 模式图片下方 el-link、card 模式 head 的 actionText）通过 el-upload 内部隐藏 input.el-upload__input 的 .click() 触发文件框。
为什么用 DOM click：Element Plus el-upload 仅 expose abort/submit/clearFiles/handleStart/handleRemove，没有 openFileDialog，故用 this.$refs.uploadRef.$el.querySelector('.el-upload__input').click()。
readonly 模式：仅渲染 el-image 预览，不显示上传入口（查看档案时也能放大看证件）。
z-index 注意：务必 preview-teleported（预览层挂 body）+ :z-index="3000"，否则会被 el-dialog 遮罩（2000 区间）盖住。
适用范围：全仓通用组件，driver / vehicle / ship 三个页面自动获得该能力（改动一次组件即可）。

关键文件

通用分组白卡组件：src/components/section-card/main.vue（已全局注册为 <section-card>，支持 title / #title / #extra slot）。
弹窗灰底 body + section-card 全局样式：src/styles/element-ui.scss（.el-dialog__body、.section-card { &__header / &__bar / &__title / &__extra / &__body }）。
司机档案弹窗：src/views/transportCapacity/driver.vue（手写 el-form + <section-card> 4 大分组：基础身份信息 / 驾驶证信息 / 从业资格证信息 / 司机联系信息）。
车辆档案弹窗：src/views/transportCapacity/vehicle.vue（手写 el-form + <section-card> 2 大分组：基础车辆信息 / 车辆资质图片；6 张大图按身份证比例 240×151 左对齐）。
船舶档案弹窗：src/views/transportCapacity/ship.vue（手写 el-form + <section-card> 2 大分组：基础船舶信息 / 船舶证书信息；内部 6 张 cert 图片按身份证比例 240×151 左对齐；子证书分段用 .cert-block + border-top）。
客商档案弹窗：src/views/vehicle/customer-archive.vue（工商信息 / 联系信息 / 财务/信用信息 / 其他信息等分组也用 <section-card>）。
项目补录弹窗：src/views/business/project-apply.vue（手写 __grid / __table / __textarea-list 同款白卡结构，先于 <section-card> 组件化之前落地，可视为视觉参照）。

环境注意

Vite 代理跨域：Saber3 axios 开 withCredentials=true，直连绝对地址后端须让 CORS Allow-Origin 为具体域名（不能用 *），否则浏览器拒绝。改 .env/vite.config.mjs 必须重启 dev。

5.5 KiB Raw Blame History Unescape Escape