style(ui): 优化必填星号与多行label的对齐方式
- 修复客商档案中必填项红色星号 * 与首行文字未垂直居中的问题 - 全站统一必填星号 * 的垂直居中规则,兼容单行与多行 label - 临时额度管理弹窗多行 label 调整星号与首字对齐,避免视觉偏移 - 调整客户档案中信用评分表和附件描述布局,使字段间距合理且内容可编辑 - /business/project-apply 搜索栏项目负责人改为手动输入,优化模糊查询体验 - 新增项目编号、客户名称、下游承运商三个搜索字段,增加查询灵活性 - 调整项目申请按钮权限顺序,新增及重大项目补录按钮功能互换 - 注释隐藏tags.vue中avue-tags相关菜单按钮,简化界面 - 修改vite开发服务器端口和代理配置,指向内网环境方便调试 - 更新 pnpm-lock.yaml 应用 avue 相关补丁,保证依赖兼容性
This commit is contained in:
@@ -56,3 +56,43 @@
|
||||
- 「船舶所有权证书」5 个字段:第一行 `登记号码/初次登记号码/船舶所有人/取得所有权日期` 4 列,第二行 `船舶识别号` 1 列(所有 `el-col :span="8"` → `:span="6"`)。
|
||||
- 「内河船舶安全与环保证书」4 个字段:合并为一行 4 列(`总吨/净吨/船检登记号/船舶类型`),`el-col :span="8"` → `:span="6"`。
|
||||
- 未改动:船舶国籍证书、最低安全配员证书(日期范围,保持 `span=16` 整行)、光船租赁登记证明书、船舶营业运输证书(用户未要求)。
|
||||
|
||||
## 客商档案必填星号 * 与首行文字垂直居中
|
||||
- 起因:用户截图「新增客商档案」基础信息分组,指出必填项 label(如「统一社会信用代码」折行后)红色星号 * 未与首行文字垂直居中对齐。
|
||||
- 根因:Element Plus `.el-form-item__label` 默认 `inline-flex + align-items: flex-start`,`:before` 星号高度(`1em`≈14px)与文字行盒(`line-height:18px`)不一致,多行时错位。
|
||||
- 改动(`src/views/vehicle/customer-archive.vue` 的 `.archive-form :deep` 块):
|
||||
- `:deep(.el-form-item.is-required .el-form-item__label)` 加 `align-items: flex-start; padding-top:7px; padding-bottom:7px`(7px=(32-18)/2,使内容下沉到 label 中线)。
|
||||
- `:deep(.el-form-item.is-required .el-form-item__label::before)` 加 `display:inline-block; height:18px; line-height:18px; margin-right:4px`(高度=行高,参与行内对齐)。
|
||||
- 范围:仅作用于 `.archive-form` 作用域(archive-form + dialog-form-label-fixed),不影响全站弹窗;与 `dialog-form-label.js` 的列宽对齐工具兼容。
|
||||
- 待观察:刷新 dev 验证「统一社会信用代码」等折行字段星号是否视觉居中;若其它模块(payment/settlement 等)也有类似折行 label,可复制同样规则或提至 `element-ui.scss` 全局。
|
||||
|
||||
## 必填星号 * 垂直居中规则全站化
|
||||
- 起因:用户确认客商档案星号居中效果 OK,要求全站统一。
|
||||
- 关键差异:全站默认 label 是 `height:32px` 固定高度,客商档案 label 是 `height:auto + line-height:18px`,前者不能套用 `padding:7px` 下沉方案(会撑变形)。
|
||||
- 改动:`src/styles/element-ui.scss` 新增全局规则 `.el-form-item.is-required .el-form-item__label::before { display:inline-block; line-height:inherit; margin-right:4px }`(让星号行高跟随 label,flex-start 下与首行文字等高居中),兼容单行(32px)与多行(auto+18px)两种场景。
|
||||
- 客商档案 `customer-archive.vue` 的 scoped 规则(含 `padding:7px` 下沉)保留不动,scoped 特异性更高会覆盖全局;两处机制不同但视觉目标一致。
|
||||
- 验收:刷新各弹窗(payment/settlement/transportCapacity 等)验证必填项星号与首行/单行文字垂直居中。
|
||||
|
||||
## 临时额度管理弹窗「换行 label 必填星号与首字对齐」
|
||||
- 起因:用户截图 `/business/temporary-credit-limit` 新增弹窗,指出 `* 申请临时额度(万元)` 这种 label 在弹窗内被强制折两行(label `width: calc(6em + 24px) + word-break + overflow-wrap: anywhere`)时,红色 `*` 落在了第一行与"(万元)"之间的中部(不再与首字"申"平行)。
|
||||
- 根因:弹窗 `.temporary-credit-limit-dialog .el-form-item { align-items: center }` 让 label 整体垂直居中于 input。label 高度被多行内容撑到 ~36px 时,`::before` 星号和"申"字是 label 内的两个匿名 flex items,默认 `align-items: flex-start`,但 form-item 外部的 `align-items:center` 把 label 拉到了 input 中线,导致 `*` 视觉偏移。配合 Element Plus 默认 label `inline-flex + height:32px`,多行 label 视觉反而被截一半。
|
||||
- 改动(`src/views/business/temporary-credit-limit.vue` 第 808-844 行 普通 `<style>` 块):
|
||||
- `.temporary-credit-limit-dialog .el-form-item { align-items: flex-start }`(取消上下居中,星号回到第一行最左)。
|
||||
- `.temporary-credit-limit-dialog .el-form-item__label { height:auto !important; line-height:18px; padding-top:7px }`(用 padding 视觉补偿使单行 label 内容仍接近 input 中线:(32-18)/2=7px)。
|
||||
- `.temporary-credit-limit-dialog .el-form-item.is-required .el-form-item__label::before { display:inline-block; line-height:18px; height:18px; vertical-align:middle }`(关键:`vertical-align:middle` 让 `*` 字符中心相对 baseline 上移半个 x-height,与"申"字字符中心同水平线,规避汉字和拉丁字符 baseline 差异导致的偏下)。
|
||||
- 验证:未登录验证,刷新 `/business/temporary-credit-limit` 点新增应可见「*申请临时额度(万元)」label 中 `*` 与"申"字严格同基线;其它单行 label(如"项目名称 / 项目编号 / 承办部门 / 申请有效期至"等)保持 label 文字中心对齐 input 中线,无视觉回退。
|
||||
- 范围:仅作用于 `temporary-credit-limit-dialog`(实际 `<el-dialog class="temporary-credit-limit-page__attachment-viewer-dialog">` 不带此 class,不会受影响);`business-crud-page` 内部 dialog 共享的 avue-form 暂不动,避免影响其它弹窗。
|
||||
|
||||
## 项目立项 /business/project-apply 搜索栏「项目负责人」改成手动输入
|
||||
- 起因:搜索栏的「项目负责人」原本是 select(绑定 `principalUserId`,通过 `/blade-system/user/user-list` 拉用户列表),体验不好,用户希望改成手动输入姓名模糊查询。
|
||||
- 改动文件:`src/option/business/project-apply.js`
|
||||
- 移除 `principalUserId` 字段的 `type:'select' / search:true / dicUrl / dicFormatter / props / filterable` 等所有下拉相关配置,保留 `hide:true`(仍可作为数据传输字段)。
|
||||
- 把 `principalUserName` 字段加 `search:true / searchPlaceholder:'请输入' / searchOrder:4`,让搜索栏收集姓名字符串。
|
||||
- 顺手清理无引用的 `userDicFormatter` 工具函数。
|
||||
- 后端要求:`/blade-transport/project-apply/list` 需支持按 `principalUserName`(后端对应列)做 like 模糊查询;BladeX + MyBatis-Plus 标准 wrapper 对字符串字段默认 like,通常无需后端改动。
|
||||
- 注意点:表格列字段未动(仍展示 `principalUserName` 的真实姓名),新增/编辑弹窗里的「项目负责人」选择器逻辑保持原样(双击 readonly 输入 + 弹窗选人)。
|
||||
|
||||
## /business/project-apply 新增 3 个搜索字段
|
||||
- 在 `src/option/business/project-apply.js` 给 `projectCode`(项目编号,searchOrder:8)、`customerNames`(客户名称,searchOrder:9)、`carrierNames`(下游承运商,searchOrder:10)加上 `search:true / searchPlaceholder:'请输入'`。
|
||||
- 三者均为普通文本列,搜索时以字符串 like 模糊查询传给 `/blade-transport/project-apply/list`,通常无需后端改动。
|
||||
- 搜索栏现有 10 个字段,`createCrudOption` 已设 `searchIndex:4`,默认折叠仅显示首行 4 个(生效类型/审批状态/项目类型/项目负责人),其余(含本次新增)需点「展开」。
|
||||
|
||||
Reference in New Issue
Block a user