gxwebsoft
563909fafa
- 新增全局弹窗表单标准类 .dialog-form--carded，实现卡片白底分组风格 - 规范表单标签宽度为 calc(6em + 24px)，右对齐且垂直居中 - 统一 input/select/cascader/tree-select/date-editor/textarea 等控件宽度为 250px - 保持 radio/checkbox 组宽度自适应 - 应用样式改造多个弹窗组件：流程变更、流程删除、参数编辑、锁定用户、解锁确认、用户编辑与修改密码、新建导入 - 港口码头编辑弹窗内 input 宽度统一为 250px，调整详细地址为单行输入框并放宽宽度 - 调整备注字段文本域高度，优化整体弹窗表单布局与风格统一
3.0 KiB
3.0 KiB
2026-08-12
全站自定义表单弹窗样式统一为客商档案风格
- 新增全局弹窗表单标准类
.dialog-form--carded（src/styles/element-ui.scss），统一实现：section-card白底卡片分组- label 固定宽度
calc(6em + 24px)、右对齐、上下居中 - input/select/cascader/tree-select/date-editor/textarea 等控件固定宽度 250px
- radio/checkbox 组宽度自适应
- 改造文件清单：
src/views/flow/manager.vue：流程变更弹窗src/views/flow/follow.vue：流程删除弹窗src/views/system/param.vue：参数编辑弹窗src/views/system/authlock.vue：锁定用户、解锁确认弹窗src/views/system/user.vue：用户编辑、修改密码弹窗src/views/business/components/waybill-import-dialog.vue：新建导入弹窗表单区
- 已跳过（非编辑表单弹窗）：
system/dept.vue承运商选择搜索弹窗、business/master-order-editor.vue页面级组件。 npm run build构建通过。
港口码头（port-terminal）编辑弹窗 input 宽度统一 250px
- 文件：
src/views/base/port-terminal.vue - 做法：option 加
dialogCustomClass: 'port-terminal-edit-dialog'，并在文件末尾新增非 scoped<style>块，.port-terminal-edit-dialog .el-input { width: 250px !important }。 - 说明：弹窗
append-to-body，scoped 命中不到，故用全局样式 + 自定义 dialog class 限定作用域；.el-input与.el-select统一width: 250px !important（含 formslot 内带内联width:100%的 country/cityCode/districtCode 下拉，!important 覆盖）。textarea（详细地址/备注）、类型el-radio-group维持自适应，未改。新增弹窗复用同一 dialog，故一并生效。
港口码头 详细地址/备注字段形态调整（接续上方宽度统一）
detailAddress：移除type: 'textarea'/minRows: 3改单行 input；因属整行字段需放宽，启用formslot+ 模板#detailAddress-form手写<el-input class="detail-address-input">，并用.port-terminal-edit-dialog .detail-address-input { width: 100% !important }覆盖全局 250px 规则，占满整行。表格列仍由slot: true+#detailAddress显示插槽控制。remark：minRows: 4→2（约 2 行高度），仍为 textarea（本身不受 250px 规则约束，已是整行宽）。- 表单字段排序调整：按截图示意重新排为——类型(10) → 名称(20) → 编码(30) → 国家(40) → 城市(50) → 区县(60) → 详细地址(70) → 经度(80) → 纬度(90) → 上级港口(100) → 备注（无 order 置底）。即区县和详细地址插在国家/城市那一行下面。
- 备注宽度改为 80%：
remark加formslot: true+ 模板#remark-form手写<el-input type="textarea" class="remark-input" :rows="2" maxlength="200" show-word-limit>，CSS.port-terminal-edit-dialog .remark-input { width: 80% !important }。注意：详细地址.detail-address-input当前宽度为 81%（用户手动调整，非本次设定）。