29 lines
1.8 KiB
Markdown
29 lines
1.8 KiB
Markdown
|
# 员工亲属资产表单单横向滚动实施记录
|
|||
|
|
|
|||
|
|
## 文档信息
|
|||
|
|
|
|||
|
|
- 保存路径：`docs/reports/implementation/2026-04-22-staff-family-asset-single-horizontal-scroll-implementation.md`
|
|||
|
|
- 实施日期：2026-04-22
|
|||
|
|
- 关联范围：员工亲属关系维护前端页面
|
|||
|
|
|
|||
|
|
## 本次修改内容
|
|||
|
|
|
|||
|
|
1. 定位到员工亲属关系维护页亲属资产编辑表格存在双横向滚动条，原因是外层 `assets-table-wrapper` 与 `el-table` 内层同时承担横向滚动。
|
|||
|
|
2. 移除外层容器的 `overflow-x: auto`，避免包裹层再次生成横向滚动条。
|
|||
|
|
3. 将亲属资产编辑表格根节点从强制 `min-width` 调整为 `width: 100%`，保持表格横向滚动由 `el-table` 自身管理。
|
|||
|
|
4. 新增本次前端实施计划与实施记录，沉淀问题定位、改动范围与验证要求。
|
|||
|
|
|
|||
|
|
## 影响范围
|
|||
|
|
|
|||
|
|
- 前端：`ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue` 亲属资产信息编辑弹窗样式。
|
|||
|
|
- 文档：新增前端实施计划与实施记录。
|
|||
|
|
|
|||
|
|
## 验证情况
|
|||
|
|
|
|||
|
|
1. 前端构建校验：
|
|||
|
|
- 执行命令：`source ~/.nvm/nvm.sh && nvm use 14.21.3 && cd ruoyi-ui && npm run build:prod`
|
|||
|
|
- 结果：构建成功；存在项目原有的 bundle size warnings，本次改动未引入构建失败。
|
|||
|
|
2. Playwright 浏览器实测：
|
|||
|
|
- 执行方式：通过 `nvm use 25.9.0` 启动 `playwright-cli`，在浏览器中 mock 登录态与员工亲属关系维护页最小依赖接口后打开 `/maintain/staffFmyRelation`，进入“添加员工亲属关系”弹窗并新增一条亲属资产记录。
|
|||
|
|
- 结果：亲属资产表单外层包装器 `clientWidth=984`、`scrollWidth=984`、`overflowX=visible`；`el-table` 内部滚动区 `clientWidth=982`、`scrollWidth=1530`、`overflowX=auto`。说明外层不再生成横向滚动条，仅保留表格内部一条横向滚动条。
|