gxwebsoft
1625fb292d
- 全站业务状态标签文字化，el-tag.status-text 转为纯文本，统一字号、行高和基线对齐 - 临时额度详情弹窗加宽 label 列宽至 180px，避免标签折成三行 - 年检记录费用字段将单位“元”移至标签内，清理无效 append 配置和 template 代码 - 维修记录里程字段单位动态显示于标签，移除输入框右侧单位后缀 - 全站 Avue CRUD 弹窗标题自动添加页面全称，支持手动覆盖和自定义 - 合同管理独立表单页顶部补充“新增合同管理”标题，统一与其它表单页面样式 - 结算-正式结算页表格整合到“应付/应收”两个标签页内，复用组件并调整操作列宽度至320px - 业务相关弹窗和组件统一支持 dialogCustomClass 传递及样式适配 - 取消部分页面样式中冗余或注释代码，调整组件内按钮布局和权限判断函数逻辑 - 新增全局 mixin 以设置 CRUD 弹窗标题，主入口 main.js 注册相关初始化函数
53 lines
3.1 KiB
Markdown
53 lines
3.1 KiB
Markdown
# 项目长期记忆（tms-erp-web-ws / Saber3 客商模块）
|
||
|
||
## 设计约定（已确认）
|
||
|
||
### 弹窗分组：统一用全局 `<section-card>`
|
||
- 弹窗 body 背景由 `src/styles/element-ui.scss` 全局 `.el-dialog__body { background:#f5f6fa; padding:16px }` 统一灰底。
|
||
- 每组 = 白底卡片：4px 主色竖条 + 8px 间距 + 圆角 6px + 淡阴影。组件全局注册 `<section-card title="...">`，支持 `#title` / `#extra` slot。
|
||
- 仅 3 项的小分组用 `el-col :span="8"` 均分一行。
|
||
|
||
### Avue 内置弹窗用 section-card：dialogCustomClass 透明化 avue-form
|
||
- option 顶层加 `dialogCustomClass:'xxx-dialog'`，再在 `element-ui.scss` 写三条：
|
||
1. `.xxx-dialog .avue-form { background:transparent; box-shadow:none; padding:0 }`
|
||
2. `.xxx-dialog .avue-form__group > .el-col > .el-form-item { margin-bottom:0 }`
|
||
3. `.xxx-dialog .avue-dialog__footer, .avue-crud__dialog .xxx-dialog .avue-dialog__footer { margin-top:0 !important }`
|
||
|
||
### 弹窗底部操作栏浮动（全局 CSS）
|
||
- `.el-dialog__body { max-height:calc(100vh - 200px); overflow-y:auto; overflow-x:hidden }`
|
||
- `.el-dialog__footer { margin:0; padding:12px 20px; background:#fff; border-top:1px solid #ebeef5; box-shadow:0 -2px 8px rgba(0,0,0,.04) }`
|
||
- Avue 内置弹窗 footer 真实 class 是 `.avue-dialog__footer`，须 `position:sticky; bottom:0; flex:none; background:#fff` 贴底。
|
||
|
||
### 上传证件区域尺寸（transportCapacity）
|
||
- 身份证/行驶证/道路运输证等固定 **240×151px**（1.586:1）。
|
||
- scoped 覆盖 `.xxx-uploader--large { width:240px }` 与 `--large .el-upload { width:100%; height:151px }`。
|
||
|
||
### 上传图片点击放大预览
|
||
- `src/components/image-upload-field/main.vue` 用 `<el-image preview-src-list fit="contain" preview-teleported :z-index="3000" @click.stop>`，阻止冒泡到 el-upload。
|
||
|
||
### 独立表单页标题 `archive-page-form__title`
|
||
- 样式全局化到 `src/styles/element-ui.scss`：18px/600/#303133 + margin-bottom:20px + 4px 主色竖条 + 8px 间距。
|
||
- business-crud-page 系列通过 `formPageTitle` prop 注入；loading-manage / master-order 手写前置标题。
|
||
|
||
### 表格列内嵌输入控件全宽
|
||
- `element-ui.scss` 全局兜底：`.el-table .el-table__body td.el-table__cell .cell > .el-input-number/.el-input/.el-select/.el-date-editor/.el-cascader { width:100% }`。
|
||
|
||
### 业务状态标签文字化
|
||
- 全站"状态语义"的 `el-tag` 加 `class="status-text"`，转为普通文字，不带颜色/背景/边框/圆点。
|
||
- 实现：`element-ui.scss` 末尾 `.el-tag.status-text { ... }`。
|
||
|
||
## 关键文件
|
||
- `src/components/section-card/main.vue`
|
||
- `src/styles/element-ui.scss`
|
||
- `src/views/vehicle/customer-archive.vue`
|
||
- `src/views/transportCapacity/{driver,vehicle,ship}.vue`
|
||
- `src/views/business/project-apply.vue`
|
||
|
||
## 环境注意
|
||
- Vite 代理跨域：`axios.withCredentials=true`，改 `.env`/`vite.config.mjs` 须重启 dev。
|
||
|
||
## business-crud-page 复用模式
|
||
- option 由 prop `crudOption` 经 `cloneOption` 克隆。
|
||
- 独立表单页走 `PageAvueForm`，不包 el-dialog。
|
||
- 自定义详情弹窗：`config.detailButton=true` + `detailSections:[{title, fields}]`。
|