style(attachment): 统一附件上传按钮位置及样式及提示文案格式
- 将站点所有附件上传按钮移至表格下方左侧,与批量下载按钮分开,布局统一 - 统一附件上传按钮旁提示文案格式,改为同一行按钮右侧显示,间距固定30px,文本左对齐 - 统一附件上传支持文件格式说明为“支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式,单个文件不超过500M” - 统一单个附件文件大小限制改为500M,涉及多页面文件修改 - 恢复vehicle-attachment-upload组件showTip属性门控,支持按需隐藏提示 - 修复master-order编辑页附件上传按钮与描述文字排列,改为单行且按钮左侧描述右侧排列 - 优化customer-archive客商材料上传按钮及提示的布局,按钮左、提示右,间距30px,超长文案省略 - 调整部分页面缩进与标签样式,提升视觉一致性 - 修改部分组件及页面的css样式,适配上述布局与样式调整
This commit is contained in:
@@ -82,3 +82,54 @@
|
||||
- 实现:复用已有组件 `src/views/settlement/components/formal-settlement-table-panel.vue`(工具栏+表格+分页一体,通过 emit 事件与父通信),分别挂入"应付""应收"两个 `el-tab-pane` 内,共享父级 `rows/columns/loading/page/hasPermissionFn`,事件回连:@create→openCreate、@payment→openPaymentDialog、@sync→handleSync、@export→handleExport、@refresh→loadTable、@page-change→onPageChange、@action→onAction(分发 view/edit/delete/submit/approve/return/void/print)、@update:selection→selection 同步。切 tab 仍走 `handleSettlementTypeChange` 重载数据。
|
||||
- 配套改动:父页 `:has-permission` 传 `hasPermissionFn`(computed 返回箭头函数,避免方法作 prop 时 this 丢失导致权限恒为 true);`handlePrint(row)` 增加可选 row 入参;移除父页内联表格及对应 scoped 样式(.formal-page__toolbar/links/pagination);组件操作列 width 120→320(符合 AGENTS.md >3 按钮规范)。
|
||||
- 校验:@vue/compiler-sfc parse/compileTemplate 0 错误、esbuild 脚本语法 OK;`pnpm build` 因沙箱保护 dist/ 被拦截(非代码问题)。仅改 formal-settlement.vue 一个页面文件 + 组件 width。
|
||||
|
||||
## 临时额度管理附件上传按钮移至表格左下角
|
||||
- 需求:用户截图反馈 `business/temporary-credit-limit` 新增弹窗中「上传附件」按钮在表格上方,要求统一放到附件表格左下角,与 project-apply 的项目材料交互一致。
|
||||
- 改动文件:`src/views/business/temporary-credit-limit.vue`:
|
||||
- 模板:将 `vehicle-attachment-upload` 从 `temporary-credit-limit-page__attachment-head` 移除,放到 `el-table` 之后的新增 `temporary-credit-limit-page__attachment-upload` 容器内;head 内只保留「批量下载」按钮。
|
||||
- 样式:`&__attachment-head` 的 `justify-content` 由 `space-between` 改为 `flex-end`;新增 `&__attachment-upload` 样式,左对齐并控制上传组件宽度自适应。
|
||||
- 结论:临时额度管理附件区域现与合同管理、项目材料保持一致:批量下载在表格上方右侧,上传附件在表格下方左侧。
|
||||
|
||||
## 项目材料上传提示文字移到按钮右侧
|
||||
- 需求:用户要求 project-apply/form「上传附件」按钮支持指定格式(pdf/bmp/jpeg/png/jpg/doc/docx/ppt/pptx/xlsx/xls/eml/msg/zip)、单文件 50M,并把提示文字放到按钮后面(右侧同一行)。
|
||||
- 现状:project-apply.vue 第 537-540 行早已配置 `:file-types`、`:max-size="50"` 与完整 `tip` 文案,但 vehicle-attachment-upload 组件默认把提示渲染在按钮下方。
|
||||
- 修复:仅改 `&__upload` 样式,用 `:deep` 把 `.vehicle-attachment-upload` 设为 `display:flex; align-items:center`,并把 `.el-upload__tip` 由默认块级(下方)改为 `display:inline-block; margin-left:12px`,使格式/大小提示与按钮同一行、位于按钮右侧。
|
||||
- 结论:project-apply 附件提示现为"上传附件按钮 + 右侧灰色提示文字",未改动组件逻辑与其它页面。
|
||||
|
||||
## 附件格式说明三页统一(按钮右侧 30px / 500M)
|
||||
- 需求:用户要求「支持pdf、bmp、…、zip,单个文件不超过500M」这段说明在 project-apply / temporary-credit-limit / contract-manage 三处附件上传区统一摆放:放到「上传附件」按钮右侧、间距 30px、文字左对齐;文件限制上限由 50M 改为 500M(说明与校验一致)。
|
||||
- 实现(三页一致):
|
||||
- 统一 `tip` 文案:`支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式,单个文件不超过500M`。
|
||||
- `:max-size`(contract-manage 为 `maxSize`)统一 500;project-apply / temporary-credit-limit 由 50→500。
|
||||
- 样式:用 `:deep` 把 `.vehicle-attachment-upload` 设为 `display:flex;align-items:center`,`.el-upload__tip` 改 `display:inline-block;margin-left:30px;color:#909399;font-size:13px;text-align:left`,使说明在按钮右侧 30px、左对齐。
|
||||
- contract-manage 的 AttachmentSection render 把上传按钮从表格上方 head 移到表格下方左侧(`.contract-manage-form__attachment-upload`),head 仅保留「批量下载」;同步删除失效的 `__attachment-actions` 死样式,新增 `__attachment-upload` 样式。至此三页上传按钮均位于附件表格左下角、说明在按钮右侧。
|
||||
- 校验:@vue/compiler-sfc 对三文件 parse/compileScript/compileTemplate 均 OK;dev localhost:2889 HMR 已生效。
|
||||
|
||||
## 全站附件上传统一(vehicle-attachment-upload 组件级单一事实来源)
|
||||
- 需求:把"上传附件按钮在附件表格左下角 + 按钮右侧 30px 左对齐统一说明 + 单文件 500M"方案应用到整个站点,统一风格。
|
||||
- 核心做法(改 1 个组件即全站生效):`src/components/vehicle-attachment-upload/main.vue`
|
||||
- 新增常量 `UNIFIED_ATTACHMENT_TIP = '支持pdf、bmp、jpeg、png、jpg、doc、docx、ppt、pptx、xlsx、xls、eml、msg、zip的文件格式,单个文件不超过500M'`;`tipText` 改为 `this.tip || UNIFIED_ATTACHMENT_TIP`(不再按 acceptText 拼装)。
|
||||
- `maxSize` 默认值 `0` → `500`(说明与校验一致)。
|
||||
- 模板 `v-if="showTip && ..."` 去掉 `showTip` 门控 → `v-if="tipText && !readonly"`,全站始终显示统一说明(原 `:show-tip="false"` 变为无害 no-op,未逐一清理)。
|
||||
- SCSS 新增 `.vehicle-attachment-upload :deep(.el-upload){display:flex;align-items:center}` 与 `:deep(.el-upload__tip){display:inline-block;margin:0 0 0 30px;color:#909399;font-size:13px;text-align:left}`,按钮与说明内联、说明在按钮右侧 30px 左对齐。
|
||||
- 表格型附件区布局对齐(上传移表格下方左侧,批量下载留表头右侧):business-crud-page.vue(2 处 attachmentsJson-form / 派车明细附件)、contract-manage-change.vue、pre-settlement-editor.vue、master-order-editor.vue、payment-application-form.vue、invoice-application-form.vue;各页新增 `__attachment-upload` 左对齐样式、`__attachment-head` 改 `justify-content:flex-end`。
|
||||
- 大小异常值修正:bill-ledger-form / bill-payment-form 的 `:max-size="10"` → 500;invoice-application-form `:max-size="50"` → 500(同时把上传从表格上方移到下方)。
|
||||
- 已是下方布局无需移动(仅随组件生效):invoice-receipt / receipt-claim-record / receipt-flow / bill-ledger / bill-payment / formal-settlement-editor(独立上传无表格)/ 各 vehicle 页(独立上传无表格)。
|
||||
- 校验:@vue/compiler-sfc 对 12 个改动文件(组件 + 上述各页 + 此前已改的 project-apply/temporary-credit-limit/contract-manage)全部编译通过;grep 确认全站无残留非 500M 的附件 max-size。
|
||||
|
||||
## master-order 附件上传"按钮 + 描述"由两行改一行
|
||||
- 需求:用户截图 `/business/master-order?mode=editor` 详情附件区,"上传附件"按钮与"支持pdf…"描述文字分别居中、各占一行,要求并到同一行(与 vehicle-attachment-upload 组件默认样式一致)。
|
||||
- 根因:`master-order-editor.vue` 第 1814-1824 行 scoped CSS 把 `.master-editor__attachment-upload .el-upload` 强制 `display: inline-flex` 但未显式 `flex-wrap/align-items/text-align`;而 Element Plus 全局 `.el-upload` 默认 `text-align: center`,加 inline-flex 子元素被 EP 默认行为按各自一行居中显示。
|
||||
- 修复:在 `.master-editor__attachment-upload` 内用 `:deep(.el-upload)` 显式声明 `display: inline-flex; align-items: center; flex-wrap: nowrap; text-align: left`,并 `:deep(.el-upload__tip)` 改 `display: inline-block; margin: 0 0 0 8px; color:#909399; font-size:13px; line-height:1.4; white-space:normal; text-align:left`,让按钮与说明内联排成一行。
|
||||
- 结论:master-order 附件区与 project-apply/temporary-credit-limit/contract-manage 风格一致(按钮左 + 描述贴右侧)。
|
||||
|
||||
## vehicle-attachment-upload 恢复 showTip 门控
|
||||
- 根因:用户截图 feedback `customer-archive/form` 的「OCR上传识别」按钮下方仍显示统一附件说明,要求「OCR上传识别这里不用加描述」。该组件虽有 `showTip` prop,但此前「全站附件上传统一」时把模板门控 `v-if="showTip && tipText && !readonly"` 简化成了 `v-if="tipText && !readonly"`,导致 `:show-tip="false"` 失效。
|
||||
- 修复:恢复 `src/components/vehicle-attachment-upload/main.vue` 第 24 行的 `showTip &&` 条件,使 `:show-tip="false"` 可正常隐藏按钮旁说明;`customer-archive.vue` 中 OCR 上传实例已配置 `:show-tip="false"`,无需额外改动。
|
||||
- 影响:所有 `:show-tip="false"` 的调用点(annual-inspection/maintenance/accident/violation/tire/customer-archive 等)现在会按预期隐藏提示;未配置 `show-tip` 或 `:show-tip="true"` 的实例继续显示 `UNIFIED_ATTACHMENT_TIP`。
|
||||
|
||||
## customer-archive 客商材料上传按钮左、描述右、间距 30px
|
||||
- 需求:用户第三轮明确「客商材料」表格下"上传附件"按钮与「支持pdf…」描述需并排、按钮左、描述右、间距严格 30px。
|
||||
- 定位:`src/views/vehicle/customer-archive.vue` 第 4637-4666 行 `.qualification-upload-bar`(grid 1fr auto 1fr 改 flex 的二次修正)。
|
||||
- 修复:保留 flex 容器,按钮区 `.vehicle-attachment-upload > :deep(.el-upload)` `flex: 0 0 auto` 贴左固定;描述 `:deep(.el-upload__tip)` `margin-left: 30px + white-space: nowrap + overflow:hidden + text-overflow:ellipsis + text-align:left`,与按钮同行紧贴、间距固定 30px、超长文案省略号。
|
||||
- 结论:布局"「上传附件」按钮 ←30px→ 「支持pdf…」描述",单行两端对齐。
|
||||
|
||||
Reference in New Issue
Block a user