851379f4de
- process-config 弹窗改为手写 el-dialog,统一与 credit-score-quantification 风格 - 弹窗内三张 section-card 堆叠,卡间间距12px,底部按钮新增保存草稿/保存并启用 - 删除原 Avue 内置 dialog 及相关表单插槽,移除无用样式,调整弹窗最大高度 - 多页面「基本信息」类分区由3列(span 8)改为4列(span 6),包含结算、合同、船舶等多处页面 - contract-manage-change.vue 手写表单列宽全部由8改6,保留备注与分区标题整行显示 - business-crud-page.vue contract配置中基本信息分区改为4列显示,调整表单 label 宽度为150px - temporary-credit-limit 详情弹窗加 align-center 实现上下居中,新增 computed 绑定配置开关 - temporary-credit-limit 弹窗宽度修改为96%,与其他业务页面保持一致 - ship.vue 标签宽度调整为最多6汉字宽,允许超长标签换行,改善显示效果 - common-route.vue 调整部分输入框宽度适配布局 - element-ui.scss 调整 process-config 相关弹窗样式,取消原 Avue 透明化样式,全局灰底内卡片间距统一 - 精简 process-config 相关 option 配置,去除 dialog 相关冗余属性 - 过程配置弹窗新增打开、保存、关闭等手写逻辑,支持查看、编辑不同状态,保持业务逻辑完整 - 删除 process-config 内部 avue-crud 相关操作,整体改用标准 el-dialog 和 el-form 实现 - 其他局部样式细节调整,保证表单布局和交互统一规范
26 KiB
26 KiB
2026-08-21
temporary-credit-limit 详情弹窗上下居中(align-center)
- 需求:
/business/temporary-credit-limit详情弹窗(detailBox,走 business-crud-page 自定义详情)上下居中。 - 机制:Element Plus el-dialog 的
align-centerprop —— use-dialog 源码确认:align-center 时.el-overlay-dialog设display:flex,.el-dialog.is-align-center { margin:auto },实现垂直+水平居中;此时 top prop 设置的--el-dialog-margin-top被更高特异性的margin:auto覆盖,不生效。 - 改动(3 处,开关式不影响其他页):
src/views/business/components/business-crud-page.vue详情 el-dialog(2504 行)加:align-center="detailAlignCenter"。- 同文件新增 computed
detailAlignCenter():this.config.detailAlignCenter === true(默认 false,contract/waybill 等共用详情弹窗不受影响)。 src/option/business/temporary-credit-limit.jsconfig 加detailAlignCenter: true。
- 安全性:全局
.el-dialog__body { max-height: calc(100vh - 200px); overflow-y:auto }(element-ui.scss 182 行)保证内容超高时在 body 内滚动,dialog 总高 < 视口,flex 居中不会顶部裁切。 - 注意:element-plus 实际版本是 2.14.2(package.json 声明 ^2.10.1,锁到 2.14.2)。el-dialog 的 class 经 $attrs 透传最终落在
div.el-dialog根元素(ElDialogContent 未设 inheritAttrs:false);因此 scoped 里&__detail-dialog.is-transport-plan-detail { :deep(.el-dialog){...} }的 max-width/margin 规则实际选不到自身(仅 header/body 后代规则生效)——历史遗留,未处理。 - 验证:
node --check通过;Vite 2889 编译两个改动文件均 HTTP 200。
temporary-credit-limit 弹窗宽度 1400px → 96%
- 需求:
/business/temporary-credit-limit新增/编辑弹窗加宽到 96%。 - 改动(单文件
src/option/business/temporary-credit-limit.js):dialogWidth: 1400→dialogWidth: '96%'。 - 先例:waybill-manage / transport-plan 均为
dialogWidth: '96%',shipping-template 为'92%'。business-crud-page 对 dialogWidth 无特殊处理(仅独立表单页强制 100%),百分比直接透传 avue-crud;element-ui.scss 的.temporary-credit-limit-dialog只覆 label 宽度、不覆盖 el-dialog 宽度,无冲突。
process-config 弹窗卡片间隔(对齐 project-apply 风格)
- 需求:process-config 新增/编辑弹窗内三张
<section-card>(基本信息 / 现行过程节点 / 节点设置)要像 project-apply 表单页一样独立成卡、卡间露出灰底(12px)。 - 根因:全站规则
.el-dialog .avue-form { background:#fff; padding:8px 16px 4px }(element-ui.scss ~246 行)把 Avue 弹窗表单整体包成一张白卡,section-card 白卡叠在其上看不出间隔。 - 改动(仅 2 文件):
src/option/business/process-config.js:option 顶层加dialogCustomClass: 'process-config-dialog'。src/styles/element-ui.scss(contract-manage-dialog 规则块后新增):.process-config-dialog .avue-form { background:transparent; box-shadow:none; padding:0 }—— 白卡透明化,灰底(.el-dialog__body 全局 #f2f2f2)露出,section-card 自带 margin-bottom:12px 形成卡距。.process-config-dialog .avue-form__group > .el-col > .el-form-item { margin-bottom:0 }—— formslot 外层 form-item margin 与卡片 margin 叠加会拉大卡距,归零统一 12px。.process-config-dialog .avue-dialog__footer+.avue-crud__dialog .process-config-dialog .avue-dialog__footer { margin-top:0 !important }—— 抵消全局 947 行.avue-crud__dialog .avue-dialog__footer { margin-top:-30px !important }(form 透明化后会上移压卡)。双选择器兼顾 dialog 未 teleport / teleport 两种挂载。
- 已验证:Vite 2889 编译通过、HMR 生效。
- 备注:
menu-form-before插槽(保存草稿/保存并启用按钮)渲染在.avue-dialog__footer内(avue 源码 dialog-form3.mjs 确认),不受 form 透明化影响,仍处白底底栏。
合同管理表单页:多分组卡片风格(对齐 project-apply 风格)
- 需求:合同管理新增/编辑表单页(
/business/contract-manage/form?mode=add|edit)的 7 个业务分组(基本信息 / 合同文件 / 计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录)要像 project-apply 一样独立成白底卡、卡间 12px 间距、标题 4px 主色蓝条。 - 关键事实(容易踩坑):
- 合同表单走
PageAvueForm组件(src/views/business/components/business-crud-page.vue:5577),render 函数h('div', { class: option.dialogCustomClass }, [h('avue-form', ...)]),不包 el-dialog(所以底部按钮天然不浮动贴底,会随内容滚动——这点与 project-apply 的 el-dialog #footer 浮动有差异)。 option顶层在isStandaloneFormPage时已设dialogCustomClass: 'contract-manage-form-dialog'、dialogAppendToBody: false、dialogModal: false、dialogTop: '0'、dialogWidth: '100%'(5897-5914 行)。- 7 个分区标题列在 option.column 里以
order升序分块(basicInfoTitle=200→contractFileTitle=30→billingInfoTitle=10→settlementRuleTitle=-10→paymentRatioTitle=-30→attachmentTitle=-50→changeRecordTitle=-70),其余字段 order 在每对标题列之间。
- 合同表单走
- 实施方案(已提交 63256a9):
buildContractFormGroupOption(option)(business-crud-page.vue 新增方法):按 order 降序遍历 option.column,遇到 7 个*Title列就切片分组;groups.length<=1时回退原 option(不影响其他业务弹窗)。返回{ ...option, column: groups[0], group: groups.slice(1).map(g=>({ label:'', arrow:false, column:g })) }。pageFormOption(6205 行)isContractFormPage时调用上述方法。- CSS(business-crud-page.vue scoped 末尾):
.contract-manage-form-dialog设padding:20px 24px 96px; background:#f5f6fa; box-sizing:border-box;(外层灰底).business-crud-page--contract-form .avue-form { background:transparent; padding:0 }(表单白卡透明化).business-crud-page--contract-form .avue-form > .el-form > .avue-form__group和.avue-group都设白底 + 6px 圆角 + 0 1px 2px 阴影 + 12px margin-bottom + 14px 16px 4px padding(两张选择器分别覆盖第 1 组 column 与第 2-7 组 group 渲染)
- 验证(agent-browser + 系统 Chrome,已登录后截图核对):
- 合同表单 7 张白底卡清晰分隔,每张卡左侧 4px 主色蓝条 + 标题(基本信息 / 合同文件 / 计费信息 / 结算单规则 / 付款比例设置 / 其它附件 / 变更记录),卡间约 12px 灰底露白。
- 底部 5 个按钮(提交 / 关闭 / 保存 / 提交临时合同 / 提交正式合同)随内容滚动(非浮动贴底)。
- 与 project-apply 滚动后的"客户信息 / 承运商信息"卡风格完全一致。
- 与 project-apply 的已知差异(用户本次未要求改):
- 合同表单底部按钮非浮动贴底(PageAvueForm 不包 el-dialog,avue-form 的 form_menu 渲染在内部)
- 合同表单无"返回"按钮(用"关闭"代替)
- 合同表单无独立页面标题(page-header 区域在 breadcrumb 处,不在 main 标题区)
- 行为验证码:登录页拼图/旋转求解基础设施已搭好——
/tmp/captcha_solve.py(CORS 修复后支持 puzzle+rotate 双模式)、/tmp/ab-install/node_modules/.bin/agent-browser --browser-channel chrome。登录流程:访问 → 切"账号密码登录" → 点登录 → 检测.puzzle-stage/.rotate-image→ POST 至 http://127.0.0.1:8765 → 取 xDisp/angle → JS PointerEvent 模拟拖动 .track-handle 即可。 - 提交:63256a9 feat(business-crud-page): 合同管理表单页改为多分组卡片风格(1 file, +86/-2)。未提交改动(process-config.js、element-ui.scss、master-order-editor.vue、loading-manage.vue、project-apply.vue、formal-settlement.vue、customer-archive.vue)与本任务无关,未纳入。
shipping-template 独立表单页加 archive-page-form__title(参考 customer-archive)
- 需求:独立表单页
/business/shipping-template/form?mode=add&name=新运费发货模板顶部缺页面标题,参考 customer-archive 的.archive-page-form__title加标题。 - 改动(单文件
src/views/business/components/business-crud-page.vue):PageAvueForm(5578 行)声明props.formPageTitle,render 时若非空则先 push<div class="archive-page-form__title">{{ title }}</div>再渲染 avue-form(title 在表单容器shipping-template-dialog内、avue-form 之前)。- 模板
<component :is="crudContainer">新增:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"。 - 新增 computed
formPageTitle():isStandaloneFormPage && isShippingTemplatePage时返回this.$route.query.name || '新增'/'编辑' + config.title,否则 ''。 - 样式(scoped 末尾,用
:global因为 title div 由 PageAvueForm 函数式组件渲染、无 scoped 属性)::global(.business-crud-page--form-page .archive-page-form__title)复制 customer-archive 的 18px/600/#303133 + margin-bottom:20px(::before 为空,与参考一致,仅纯文字标题)。
- 仅作用于 shipping-template 独立表单页;其他独立表单页(waybill/transport-plan/contract)
formPageTitle返回 '',不受影响。
transport-plan 独立表单页也加 archive-page-form__title
- 需求:
/business/transport-plan/form?mode=add&name=新运费运输计划也要同样的页面标题。 - 改动:
formPageTitle()条件由isStandaloneFormPage && isShippingTemplatePage改为isStandaloneFormPage && (isShippingTemplatePage || isTransportPlanPage)(复用已有isTransportPlanPagecomputed:config.permission==='transport_plan')。标题文案取this.$route.query.name(「新运费运输计划」)或回退「新增/编辑运输计划」。 - 验证:Vite 2889 编译通过(HTTP 200,无错误)。
- 验证:Vite 2889 编译通过(HTTP 200,无 transform/syntax 错误),HMR 生效。如需扩展到其他独立表单页,去掉
isShippingTemplatePage限定即可。
将 .archive-page-form__title 全局化,并再加 waybill / loading-manage / master-order 三页
- 需求:把页面标题扩展到
/business/waybill-manage/form、/business/loading-manage/form、/business/master-order?mode=editor三页,并与 customer-archive / shipping-template / transport-plan 视觉统一。 - 全局化样式:
.archive-page-form__title原本分散在customer-archive.vue(scoped)与business-crud-page.vue(:global,::before 为空纯文字)。现统一提取到src/styles/element-ui.scss(5b 段):18px/600/#303133 + margin-bottom:20px +::before4px 主色竖条 + 8px 间距(补全竖条,与 section-card 卡头风格一致)。并删除上述两处本地重复定义。 - waybill-manage/form:在
business-crud-page.vue的formPageTitle()条件再并入isWaybillDetailLayout(config.permission==='waybill_manage'),复用既有 computed。标题取query.name || '新增/编辑运单管理'。 - loading-manage/form:该路由直接映射到
loading-manage.vue(非 business-crud-page)。新增 computedformPageTitle()(query.name || '新增/编辑配载管理'),并在独立表单页的<component>内、body 之前加<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>。 - master-order?mode=editor:
master-order.vue渲染master-order-editor.vue。将<master-order-editor>包进<template v-else-if="mode==='editor'">,前置<div class="archive-page-form__title">{{ masterEditorTitle }}</div>;新增 computedmasterEditorTitle(routeId ? '编辑总单' : '新增总单')。 - 验证:4 个 SFC + element-ui.scss 经 Vite 2889 编译均 HTTP 200、无 transform/syntax 错误。
综合台账弹窗 & 临时额度查看弹窗 布局调整
- vehicle-ledger / ship-ledger(/transportCapacity 车辆·船舶综合台账弹窗):把
<el-table>+分页从el-tabs外移入每个<el-tab-pane>内(切换 tab 表格跟着切换);ship-ledger 同步把三个蓝标内容块(船舶基本信息/船舶证书信息/证书附件)由<section>+.dialog-section-title改为全局<section-card :title>,卡片间距 12px。两文件均加:deep(.el-tabs__content){padding:0}去 border-card 默认内边距。 - 临时额度查看弹窗改两列(/business/temporary-credit-limit):
- 原"查看"调 Avue 内置
rowView(列数复用 column.span,呈 3 列)。改用 business-crud-page 内置自定义详情弹窗。 src/option/business/temporary-credit-limit.jsconfig 加detailButton:true、detailButtonIgnoreDraftStatus:true、detailSections:[申请信息(申请单号/备注 span:2 整行,其余两列)、额度信息]。business-crud-page.vue的showDetailButton加if(this.config.detailButtonIgnoreDraftStatus) return true(仅放开草稿态也走自定义详情,不动其他页面)。
- 原"查看"调 Avue 内置
contract-manage/form 独立表单页也加 archive-page-form__title
- 需求:
/business/contract-manage/form?mode=add&name=新运费合同管理也要同样顶部页面标题。 - 改动:
business-crud-page.vue的formPageTitle()条件再并入isContractConfig(config.permission==='contract_manage',contract-manage 已用contract-form-pageprop 走PageAvueForm)。标题取query.name(「新运费合同管理」)或回退「新增/编辑合同管理」。 - 验证:Vite 2889 编译通过(HTTP 200,无错误),HMR 生效。至此 business-crud-page 系列(shipping-template / transport-plan / waybill-manage / contract-manage)独立表单页均已带统一标题。
- 渲染走
detailSections分支(section-card+el-descriptions(:column=2)),值经formatDetailValue转字典 label。 - 验证:
temporary-credit-limit.js经node --check语法通过;business-crud-page.vue 仅 template 表达式改动。待用户在 2889 刷新核对两列效果。
- 渲染走
合同管理详情弹窗 label 对齐修复
- 需求:
/business/contract-manage详情弹窗里两列el-descriptions的 label(尤其右边列 label)对齐不一致,长 label(如"是否需要加盖法人章")换行后行高/垂直位置错乱。 - 根因:
business-crud-page.vue的&__detail-content .section-card中对.el-descriptions__label只写了width: 140px与text-align: right,缺min/max-width、vertical-align、line-height、box-sizing;对.el-descriptions__content也缺垂直对齐,导致跨列/跨行 label 视觉上不齐。另外contract-manage.vue底部的<style>(未加scoped)把.el-dialog .el-form-item__label与.el-col全局覆盖,会污染全站弹窗。 - 改动:
src/views/business/components/business-crud-page.vue(15440 行附近):- label 与 content 统一加
box-sizing:border-box、vertical-align:middle、line-height:1.4、一致 padding;label 加min-width:140px; max-width:140px防止被内容撑开或压缩,content 保持min-height:42px。 - 新增
:deep(.el-descriptions__table) { width:100%; table-layout:fixed }:强制表格按固定列宽渲染,label 占 140px 后,左右两个 content 列均分剩余宽度,解决用户截图里"合同期限"卡片左右内容区宽度不一致的问题。
- label 与 content 统一加
src/views/business/contract-manage.vue:把底部无 scoped 的全局样式改为<style scoped>,并把选择器限定到.contract-manage-dialog;删除污染性更强的.el-col { margin-bottom:0 !important }全局覆盖。
- 验证:Vite 2889 编译通过(HTTP 200),HMR 生效。待用户在 2889 刷新核对详情弹窗两列 label 是否左右/上下对齐、左右内容区宽度是否均等。
应付明细调整弹窗:控件撑满单元格 + 表头居中
- 需求:
/settlement/payable-detail(即receivable-payable-detail.vue)"调整费用"弹窗中,里程 / 杂项 / 装卸费等列的el-input-number默认宽度 180px,超出窄列后被截断(见截图);同时要求所有表头居中。 - 改动(单文件
src/views/settlement/receivable-payable-detail.vue):- 给调整弹窗
<el-table>加class="settlement-detail-page__adjust-table"。 - 页面级表格样式
.settlement-detail-page__table, .settlement-detail-page :deep(.el-table)的th.el-table__cell增加text-align: center !important;,统一所有表头居中(覆盖金额列align: right导致的表头右偏)。 - 新增
.settlement-detail-page__adjust-table样式块:.el-input-number、.el-input、.el-select全部width: 100% !important;,使控件撑满单元格不被截断;el-input-number内部输入保持右对齐。
- 给调整弹窗
- 验证:Vite 2889 编译通过(HTTP 200),HMR 生效。待用户在 2889 刷新核对调整弹窗输入框是否完整显示、表头是否全部居中。
formal-settlement:把表格放进 tabs
- 需求:
/settlement/formal-settlement原本el-tabs(应付/应收) 是空的 type 切换器,表格+工具栏在 tabs 外面;要求把表格放进 tabs 内。 - 改动:
- 新建
src/views/settlement/components/formal-settlement-table-panel.vue:把工具栏(新增/付款申请/同步金蝶/打印结算单/导出 + 刷新) +el-table+ 分页整体抽成子组件;props 收rows/columns/loading/page/hasPermission,emitscreate/payment/sync/export/refresh/page-change/update:selection/action;行操作(查看/编辑/删除/提交/通过/驳回/作废)经rowActions(row)计算可见项后 emitaction {type,row};工具栏"打印"经emitSingle('print')取选中单行后 emit action(与父selectedOne行为一致)。 src/views/settlement/formal-settlement.vue:删除原 toolbar+table+pagination 块与对应 scoped 样式(__toolbar/__toolbar-right/__links/__pagination),在el-tabs两个el-tab-pane内各放一个<formal-settlement-table-panel>(DRY,共用同一组件);新增handlePageChange({current,size})、handleAction({type,row})分发行操作;handlePrint(row)改为接收行参数(不再用 selectedOne);删除无用handleSizeChange。
- 新建
- 验证:Vite build 通过(EXIT=0),无编译错误。待用户在 2889 刷新核对:应付/应收两个 tab 各自带完整表格与工具栏、切换 tab 触发 reload。
预结算单结算汇率输入框居左
- 需求:
/settlement/pre-settlement弹窗中「结算汇率」字段(el-input-number)默认居中,要求改为居左。 - 改动:
src/option/settlement/preSettlementForm.js:exchangeRate字段新增class: 'exchange-rate-input'。src/views/settlement/components/pre-settlement-editor.vue:el-input-number上绑定:class="field.class"。- scoped style 的
&__form内增加:deep(.exchange-rate-input .el-input__inner) { text-align: left; }。
- 影响:仅针对「结算汇率」字段,不改动其他数字输入框对齐方式。
transport-reconciliation:同样把表格放进 tabs
- 需求:
/settlement/transport-reconciliation与 formal-settlement 同样问题——el-tabs(应付/应收) 是空 type 切换器、工具栏+表格在 tabs 外;要求把表格放进 tabs 内。 - 改动:
- 新建
src/views/settlement/components/transport-reconciliation-table-panel.vue:工具栏(新增/导出+刷新)+el-table+分页抽成子组件;props 同 formal 面板,emitscreate/export/refresh/page-change/update:selection/action;列渲染差异:.link列点击 emit view、reconciliationStatusName走row.reconciliationStatus==='completed'?'success':'warning'的 el-tag;行操作rowActions(row)为 查看(常显)+编辑/删除/确认(均hasPermission && isEditable(row),isEditable=reconciliationStatus==='unfinished'),确认非 danger。 src/views/settlement/transport-reconciliation.vue:删除原 toolbar+table+pagination 块与对应 scoped 样式(__toolbar/__toolbar-right/__links/__pagination),在两个el-tab-pane内各放一个面板;保留.reconciliation-page__settlement-tabs(含:deep(.el-tabs__header){margin:0});新增handlePageChange、handleAction({type,row})(view→openView/edit→openEdit/delete→handleDelete/complete→handleComplete);删除handleSizeChange。导出按钮无权限守卫、仍 emitexport由父handleExport(用this.settlementType)处理。
- 新建
- 验证:Vite build 通过(EXIT=0)。待用户在 2889 刷新核对应付/应收 tab 各自带完整表格与工具栏、切换触发 reload。
process-config 弹窗重写为手写 el-dialog(对齐 credit-score-quantification 风格)
- 原因:用户参考
/vehicle/credit-score-quantification的弹窗(手写el-dialog+ 多个<section-card>堆叠、卡间 12px、底部 #footer 按钮),要求 process-config 弹窗同样"白底卡片包住蓝标内容块、卡间距 12px、风格统一"。原实现用的是 Avue 内置 dialog + formslot,与参考页机制不一致(即使视觉接近)。 - 改动(3 文件):
src/views/business/process-config.vue:删除 Avue 内置 dialog 相关(before-open、#basicInfo-form/#nodeConfigJson-form/#menu-form-before插槽、rowSave/rowUpdate/submitRow/stopSubmitLoading/handleProcessConfigSave、数据项submitStatus);新增手写<el-dialog class="process-config-dialog" append-to-body width="96%" top="4vh" :close-on-click-modal="false">,内部<div class="process-config-form">堆三张<section-card>:基本信息 / 现行过程节点(timeline)/ 节点设置(node 表);#footer放 取消 / 保存草稿(plain) / 保存并启用(primary),submitting控制 loading。新增openConfig(row, readonly)、submitConfig(mode)、handleDialogClosed,保留全部节点配置逻辑(NODE_TEMPLATES/cloneNode/parseNodeConfig/syncNodeFields/timelineDescriptions/validateRow/checkEnabledProjectBeforeSubmit/confirmDuplicateVoucher 等)。菜单 查看→openConfig(row,true)、编辑→openConfig(row)、新建→openConfig()。src/option/business/process-config.js:option 删除仅作表单容器的basicInfo/nodeConfigJson两列与saveBtn/updateBtn/dialogTop/dialogWidth/dialogCustomClass等 dialog 配置。src/styles/element-ui.scss:删除原先.process-config-dialog .avue-form / .avue-form__group / .avue-dialog__footer三处透明化/归零规则(已无用),改为.process-config-dialog .el-dialog__body { max-height: calc(100vh - 130px) }。
- 关键点:弹窗内容走
append-to-body会被 teleport 出.process-config-page,故所有弹窗内样式(timeline/node-table/require-*/finish-days)改用顶层 scoped 类.process-config-form__*(不再嵌套在.process-config-page下),否则 scoped 选择器因缺祖先类而失效。12px 卡距由全局.section-card{margin-bottom:12px}+ 全局灰底.el-dialog__body{background:#f2f2f2;padding:12px}保证,与参考页一致。 - 验证:Vite build 通过(EXIT=0),无编译错误;2889 HMR 生效。待用户刷新核对弹窗卡片风格。
多页面「基本信息」类分区统一改为 4 列(span 8→6)
- 用户逐一要求把各结算/合同页的「基本信息」分区从 3 列改为 4 列。列数由 el-col
:span控制(24/8=3 → 24/6=4)。 - 手写 el-col 循环页面(直接改 span):
src/views/settlement/components/formal-settlement-editor.vue::span="8"→:span="6"(结算基本信息)。src/views/settlement/components/transport-reconciliation-editor.vue::span="8"→:span="6"(导入外部账单核对)。src/views/settlement/components/settlement-adjustment-editor.vue::span="8"→:span="6"(基本信息)。src/views/settlement/components/pre-settlement-editor.vue:动态:span="field.span || 8"→|| 6(仅备注显式 span:24 仍整行)。src/views/business/contract-manage-change.vue:基本信息区:span="8"→:span="6"(变更类型/备注:span="24"保持整行)。
- Avue 分组表单页面(合同新增/编辑 form 页):非手写循环,
option.span=8控制默认列数。- 改动
src/views/business/components/business-crud-page.vue的buildFormGroupOption:当this.isContractConfig时,对首组(基本信息,=groups[0] 顶层 column)每个非分区标题、非span===24的列设col.span = 6;备注(span:24)与分区标题列保持原样。其余分组仍 3 列。
- 改动
- 验证:2889 HMR 生效。注意合同 form 页走 Avue group,不能用简单 span 替换,须改 buildFormGroupOption。
续:更多页面「基本信息」类分区改 4 列(span 8→6)
src/option/business/temporary-credit-limit.js:Avue 配置页,扁平 column 列表,8 个表单字段span:8→span:6(备注/附件 span:24 保持整行)。注意 createCrudOption 不设默认 span,可见字段都有显式 span。src/views/transportCapacity/ship.vue:「基础船舶信息」10 个:span="8"→:span="6";该页 12 空格缩进=基础船舶信息区、14 空格缩进=船舶证书信息区,勿用全局 replace_all(12 空格串是 14 空格的子串会误伤证书区),必须按行号区间 sed(146,253)或带 label 上下文逐个替换。src/views/business/project-apply.vue:.project-apply-form__gridrepeat(3,...)→repeat(4,...);label 规则(作用域__grid内)width:100px !important; min-width:0 !important; white-space:normal——6 汉字宽超出换行,!important压过 label-width="auto" 的行内 width 与全局 min-width:160px。
ship 页 label 规则:最多 6 汉字宽、超出换行
src/views/transportCapacity/ship.vue:el-formlabel-width(原 HEAD 为 auto,工作区历史为 150)→100(6 汉字≈84px+冒号≈98px,100px 恰容 6 字);.ship-form内新增:deep(.el-form-item__label) { white-space: normal; line-height: 20px }允许换行。适用整个 ship 表单(含证书区)。- 注意:改该文件前先确认 git 暂存区状态,
git checkout -- <file>恢复的是 index 版本;本文件 index=HEAD=auto,工作区曾为 150(历史未提交改动),已被本次需求覆盖。