style(business): 统一业务状态标签为文字+颜色样式
- 新增全局 `.status-text` 样式,去除 el-tag 背景和边框,仅保留彩色文字和跟随文字颜色的圆点 - 业务状态相关的 el-tag 标签全部加上 `class="status-text"`,覆盖调度状态、审批状态、运单状态等全站业务状态展示 - 统一发货模板查看弹窗的卡片样式,新增分区块样式与运费信息展示板块 - 调整发货模板弹窗详情 label 宽度,所有 el-descriptions 的 label 宽度统一为 140px 以保证视觉一致 - 表格列内嵌输入控件全宽默认样式生效,无需单独设置跨度,解决输入框显示不足问题 - 弹窗中的部分表单和导入区域使用 `section-card` 统一卡片风格 - 客商档案查看模式改为独立路由,实现查看与编辑隔离并调整对应操作按钮文案 - 相关样式调整及细节优化,包括运费单位颜色等辅助样式,保证界面细节统一规范
This commit is contained in:
@@ -1,8 +1,20 @@
|
||||
# 2026-08-24
|
||||
|
||||
## project-apply.vue:弹窗改独立页(与新增项目管理一致)
|
||||
- 将「重大项目补录 / 查看 / 项目变更」三种打开方式从 `el-dialog` 改为路由跳转独立页 `/business/project-apply/form?mode=...`,与已有的「新增 / 编辑」独立页统一。
|
||||
- `openProjectDialog` 全部 type 统一走 `$router.push`;`openProjectFormPage` 按 `route.query.mode`(add/edit/view/majorSupplement/change)加载详情或空表单。
|
||||
- 独立页标题改用全局 `archive-page-form__title`(自带 4px 主色竖条),删除原本地 `.project-apply-page__title` scoped 样式。
|
||||
- 仅改 1 个文件 `src/views/business/project-apply.vue`(约 +25 / -18 行);路由、API、全局样式未动。footer 逻辑(保存/提交/返回)沿用既有 `isProjectFormPage` 分支,无需改。
|
||||
- 验证:dev localhost:2889 下分别点「重大项目补录 / 新增 / 编辑 / 查看 / 项目变更」应都进入独立页面,标题显示「重大项目补录 / 新增项目管理 / 编辑项目管理 / 查看项目管理 / 项目变更」。
|
||||
## 发货模板查看弹窗白底卡片统一化
|
||||
- 问题:shipping-template 查看弹窗仍走 Avue 默认 rowView,各板块无白底卡片分隔。
|
||||
- 改动:
|
||||
- `src/option/business/shipping-template.js`:config 新增 `detailButton: true`、`detailButtonIgnoreDraftStatus: true`,并配置 `detailSections`(模板信息/基本信息/收发货信息),每板块两列 el-descriptions,备注与地址占整行。
|
||||
- `src/views/business/components/business-crud-page.vue`:在 detailBox 通用详情模板中,货物信息卡片后新增运费信息 section-card,区分公路(单价/数量合计/运费/运费合计/其他运费合计/币种)与非公路(运费/数量合计/其他运费合计/币种)展示。
|
||||
- 样式:`&__detail-content` 已统一 `gap: 12px`,section-card 间距即为 12px;新增 `&__freight-descriptions` 单位/币种辅助色。
|
||||
- 验证:`npm run build` 通过。
|
||||
|
||||
## 发货模板查看弹窗 label 宽度统一
|
||||
- 问题:详情弹窗各 section 的 el-descriptions 按内容自动列宽,导致「收发货信息」板块含 6 字标签(发货联系方式/收货联系方式)时 label 列比其他板块(4 字标签)更宽,视觉不一致。原 CSS `.el-descriptions__label{width:140px}` 在含 span 行的 fixed 布局下未能可靠等宽。
|
||||
- 改动:`src/views/business/components/business-crud-page.vue` 在通用详情描述(line ~3109)与运费信息两张描述表(road / 非 road)上加 `label-width="140px"`(Element Plus 原生机制,覆盖 auto 列宽与 span 行差异),使所有详情 label 列统一 140px。
|
||||
- 验证:`npm run build` 通过。
|
||||
|
||||
## 全站业务状态标签文字化(调度状态/审批状态)
|
||||
- 新增全局 `.status-text` 工具类(`src/styles/element-ui.scss` 末尾):去掉 `el-tag` 背景/边框,保留彩色文字 + `currentColor` 圆点。
|
||||
- 全站所有业务状态 `el-tag` 统一加 `class="status-text"`:business-crud-page(#status/#businessStatus/#approvalStatus 插槽 + 运输计划详情头 + 运单详情头 + 调度弹窗头)、master-order 系列 businessStatus、loading-manage 详情弹窗、结算三处 approvalStatus、process-config 流程状态。
|
||||
- 已通过 dev (localhost:2889) HMR 生效,刷新即可查看。调度状态(businessStatus)全站视觉已统一为"文字 + 颜色"。
|
||||
- `credit-score-quantification.vue` 状态列(#status 插槽,statusMap: 正常/停用/草稿)的 el-tag 也加 `.status-text` 统一。
|
||||
|
||||
@@ -33,6 +33,19 @@
|
||||
- **master-order?mode=editor**:`master-order.vue` 把 `<master-order-editor>` 包进 `<template v-else-if="mode==='editor'">`,前置 `<div class="archive-page-form__title">{{ masterEditorTitle }}</div>`(computed `masterEditorTitle` = `routeId ? '编辑总单' : '新增总单'`)。
|
||||
- 扩展原则:新增独立表单页要带此标题,要么并入 business-crud-page 的 `formPageTitle` 条件(business-crud-page 系列),要么在对应页面模板手写 `<div class="archive-page-form__title">`(loading-manage / master-order 模式)。
|
||||
|
||||
### 表格列内嵌输入控件:全宽(全局 CSS,不动手写 scoped)
|
||||
- `element-ui.scss` 在 660-678 行加了一条全局规则:`.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-*-width:100% }`(带对应 `--el-input-number-width` 等变量兜底)。
|
||||
- 适用场景:可编辑 el-table 列、弹窗内编辑表格。原先容易踩坑的是 el-plus 的 el-input-number 默认根 width=150px,cell 给到 min-width=150 后输入框只占自然宽度、看着"显示不全"。**新增任何"el-table cell 内嵌 el-input-number/el-input/el-select"需求不用再写 scoped 宽度**——已全局兜底。
|
||||
- 与"表单内 250px 全宽"互不冲突:本规则只命中 `.el-table .el-table__body td`,表单内 `.el-form-item__content >` 的 250px 规则仍生效。
|
||||
- 已覆盖:pre-settlement-editor「结算明细调整」弹窗(adjustDialog 列内 el-input-number/el-input 全宽)、transport-reconciliation-editor/formal-settlement-editor/settlement-adjustment-editor 同款结构。
|
||||
|
||||
### 业务状态标签文字化:全局 `.status-text` 工具类
|
||||
- 需求:全站"调度状态/运单状态/审批状态"等用 `el-tag` 展示的字段,统一改为"纯文字 + 颜色"(不用 tag 背景/边框)。
|
||||
- 实现:`element-ui.scss` 末尾新增 `.el-tag.status-text { background:transparent!important; border-color:transparent!important; padding:0; margin-left:8px; font-weight:500 }` + `&::before` 6px 圆点(`background:currentColor`,颜色随 el-tag 的 `:type`)。
|
||||
- 用法:业务状态 `el-tag` 加 `class="status-text"`,颜色仍由现有 `statusTagType/statusType/waybillStatusType/detailStatusType` 返回的 success/warning/danger/info/primary 决定。
|
||||
- 已覆盖:`business-crud-page.vue`(#status/#businessStatus/#approvalStatus 插槽 + 运输计划详情头 + 运单详情头 + 调度弹窗头)、`master-order.vue`/`master-order-detail.vue`/`master-order-dispatch.vue` 的 businessStatus、`loading-manage.vue` 详情弹窗、结算三处 approvalStatus、`process-config.vue` 流程状态、`credit-score-quantification.vue` 状态列。
|
||||
- 例外:`loading-manage.vue` 列表状态列本就用 `<span class="loading-manage-page__status is-${status}">` 文字化(先例),不动;"类型标签"(transport-flow-tag、transportTypeName 等 `type="primary"`)非状态语义,保持 tag 样式。
|
||||
|
||||
## 关键文件
|
||||
- 分组白卡:`src/components/section-card/main.vue`。
|
||||
- 全局弹窗/section-card 样式:`src/styles/element-ui.scss`。
|
||||
|
||||
Reference in New Issue
Block a user