b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
ae45e88df944544e2a1128486d4b4d5c2b8c790b
tms-erp-web/.workbuddy/memory/MEMORY.md
T
gxwebsoft 1625fb292d fix(styles): 优化多页面表单及弹窗样式统一性和功能 
- 全站业务状态标签文字化，el-tag.status-text 转为纯文本，统一字号、行高和基线对齐
- 临时额度详情弹窗加宽 label 列宽至 180px，避免标签折成三行
- 年检记录费用字段将单位“元”移至标签内，清理无效 append 配置和 template 代码
- 维修记录里程字段单位动态显示于标签，移除输入框右侧单位后缀
- 全站 Avue CRUD 弹窗标题自动添加页面全称，支持手动覆盖和自定义
- 合同管理独立表单页顶部补充“新增合同管理”标题，统一与其它表单页面样式
- 结算-正式结算页表格整合到“应付/应收”两个标签页内，复用组件并调整操作列宽度至320px
- 业务相关弹窗和组件统一支持 dialogCustomClass 传递及样式适配
- 取消部分页面样式中冗余或注释代码，调整组件内按钮布局和权限判断函数逻辑
- 新增全局 mixin 以设置 CRUD 弹窗标题，主入口 main.js 注册相关初始化函数
2026-08-25 15:18:44 +08:00

3.1 KiB
Raw Blame History

项目长期记忆（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}]。
Reference in New Issue View Git Blame Copy Permalink