b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
bfb8659cd851bf23f491984546e8a85db0df15b0
tms-erp-web/.workbuddy/memory/MEMORY.md
T
gxwebsoft bfb8659cd8 style(project-apply): 统一弹窗和独立表单底栏按钮风格 
- 统一「保存+提交+返回」按钮的视觉层级和排序
- 按次要（默认）、中间（primary plain）、主操作（primary）三档区分按钮样式
- 调整按钮顺序为「辅助→返回/取消→保存草稿→提交」，主操作始终最右
- 修改project-apply、invoice-receipt-form、invoice-application-form三个页面的按钮实现
- 在 MEMORY.md 中新增底栏按钮统一规则说明
- 保留已合规页面按钮风格，避免重复修改
2026-08-26 18:05:58 +08:00

4.2 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 { ... }。

弹窗 / 独立表单页底栏按钮统一规则

  • 排序：从左到右按次→主排（次要居左、主操作居右），主操作永远放最后。
    • 顺序模板：[可选辅助工具(如同步/导入)][返回/取消][保存草稿][提交/确认]
  • 颜色层级 3 档：
    语义 type 备注
    次要（返回 / 取消） 不写 type（默认） 灰描边
    中间步骤（保存草稿 / 按匹配结果更新等） type="primary" plain 蓝描边
    主操作（提交 / 完成对账 / 确认） type="primary" 蓝实心
  • 禁区：保存草稿和主操作不允许同为 type="primary"，否则两个蓝实心按钮无视觉层级。
  • 生效页面：business/project-apply.vue（footer + 变更 footer）、payment/invoice-receipt-form.vue、payment/invoice-application-form.vue。
  • 已合规不需要改：settlement/components/pre-settlement-editor.vue（保存 default + 提交 primary）、settlement/components/transport-reconciliation-editor.vue（两个 plain 中间步骤 + 完成对账 实心）。

关键文件

  • 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