gxwebsoft
563909fafa
- 新增全局弹窗表单标准类 .dialog-form--carded，实现卡片白底分组风格 - 规范表单标签宽度为 calc(6em + 24px)，右对齐且垂直居中 - 统一 input/select/cascader/tree-select/date-editor/textarea 等控件宽度为 250px - 保持 radio/checkbox 组宽度自适应 - 应用样式改造多个弹窗组件：流程变更、流程删除、参数编辑、锁定用户、解锁确认、用户编辑与修改密码、新建导入 - 港口码头编辑弹窗内 input 宽度统一为 250px，调整详细地址为单行输入框并放宽宽度 - 调整备注字段文本域高度，优化整体弹窗表单布局与风格统一
32 lines
3.0 KiB
Markdown
32 lines
3.0 KiB
Markdown
# 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%（用户手动调整，非本次设定）。
|