fix(sidebar): 修复子路由高亮丢失问题
- 新增 menuPaths 计算属性,递归收集全站菜单路径 - 修改 activeMenu 逻辑,针对无匹配菜单路径尝试最长前缀匹配 - 解决子路由菜单高亮消失问题,支持全站多场景适用 - 优化 master-order-dispatch 页面 select 宽度,防止 append 区域撑爆 - 修正运输单位 select 固定宽度为 92px,并防止被父容器拉伸 - 调整 business-crud-page 任务备注和附加选择器宽度及样式 - 减少 process-config 备注输入区域行数,提升界面紧凑度
This commit is contained in:
@@ -133,3 +133,20 @@
|
|||||||
- 定位:`src/views/vehicle/customer-archive.vue` 第 4637-4666 行 `.qualification-upload-bar`(grid 1fr auto 1fr 改 flex 的二次修正)。
|
- 定位:`src/views/vehicle/customer-archive.vue` 第 4637-4666 行 `.qualification-upload-bar`(grid 1fr auto 1fr 改 flex 的二次修正)。
|
||||||
- 修复:保留 flex 容器,按钮区 `.vehicle-attachment-upload > :deep(.el-upload)` `flex: 0 0 auto` 贴左固定;描述 `:deep(.el-upload__tip)` `margin-left: 30px + white-space: nowrap + overflow:hidden + text-overflow:ellipsis + text-align:left`,与按钮同行紧贴、间距固定 30px、超长文案省略号。
|
- 修复:保留 flex 容器,按钮区 `.vehicle-attachment-upload > :deep(.el-upload)` `flex: 0 0 auto` 贴左固定;描述 `:deep(.el-upload__tip)` `margin-left: 30px + white-space: nowrap + overflow:hidden + text-overflow:ellipsis + text-align:left`,与按钮同行紧贴、间距固定 30px、超长文案省略号。
|
||||||
- 结论:布局"「上传附件」按钮 ←30px→ 「支持pdf…」描述",单行两端对齐。
|
- 结论:布局"「上传附件」按钮 ←30px→ 「支持pdf…」描述",单行两端对齐。
|
||||||
|
|
||||||
|
## sidebar 子路由高亮回退(方案B)
|
||||||
|
- 需求:用户反馈点「客商档案」菜单后,再点新增/编辑/查看(跳子路由 /vehicle/customer-archive/form),左侧菜单选中灰底消失。
|
||||||
|
- 根因:sidebar `activeMenu` getter 在无 `meta.activeMenu` 时退到 `route.path`(即子路由 /vehicle/customer-archive/form),与菜单 path /vehicle/customer-archive 不匹配,`<el-menu :default-active>` 找不到项 → 高亮丢失。同因还影响 /business/contract-manage/change 等独立子路由。
|
||||||
|
- 修复(方案B,通用兜底,改 1 文件):`src/page/index/sidebar/index.vue`
|
||||||
|
- 新增 `menuPaths` computed:递归收集全站菜单 `website.menu` 的 `path` 字段进 Set。
|
||||||
|
- `activeMenu` 在 `return path` 前加分支:当 `path` 不在 menuPaths 时,过滤出所有 `path.startsWith(p + '/')` 的菜单路径,按长度降序取最长前缀匹配者作为高亮项(即 /vehicle/customer-archive/form → /vehicle/customer-archive)。
|
||||||
|
- 原有 `meta.activeMenu` 与 `menuIndexes`(带参菜单精确匹配)分支保持不变;路径完全相同的路由仍精确匹配,不受影响。
|
||||||
|
- 结论:一次改动全站受益,所有"父菜单 + 独立子表单页"场景(customer-archive/form、contract-manage/change 等)自动保持父菜单高亮,无需逐路由配 activeMenu。HMR 已生效。
|
||||||
|
|
||||||
|
## master-order-dispatch 运费单位 select 撑爆 append 槽
|
||||||
|
- 需求:用户截图 dispatch 页"任务信息"块下"数量 → 吨"与"单价 → 元/吨"两个 select 宽度比左侧 input 还宽,红框标记要求改小。
|
||||||
|
- 根因:`src/views/business/components/master-order-dispatch.vue` 第 702 行 `.dispatch-form` 全局规则 `:deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; }` 把整个 dispatch 表单内**所有** el-select 强制 100% 宽;这两个 select 处于 `el-input` 的 `#append` slot 内,被强制撑开 append 容器,append 又把整个 `el-col :span="6"` 列占满。第 707 行 `.freight-form { :deep(.freight-unit-select) { width: 92px; } }` 想兜底 92px,但因 specificity 与覆盖时机问题未生效。
|
||||||
|
- 修复(最小改动,2 处):
|
||||||
|
- 行 702 末尾追加 `:deep(.el-input-group__append .el-select) { width: auto; }`,使 append 内的 select 退回内容自适应宽度(避免被 100% 拉伸)。
|
||||||
|
- 行 707 强化兜底:`.freight-unit-select` 加 `flex: 0 0 92px; min-width: 0;`,固定 92px 防止 append flex 拉伸。
|
||||||
|
- 结论:单位 select(吨/元/吨)宽度由内容决定(≈92px),不再撑爆 append 与列;其它顶层 select(承运商/币种等)仍维持 100% 宽,行为不变。
|
||||||
|
|||||||
@@ -13041,7 +13041,16 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__task-remark {
|
&__task-remark {
|
||||||
grid-column: span 3;
|
grid-column: 1 / -1;
|
||||||
|
|
||||||
|
:deep(.el-form-item__content) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input),
|
||||||
|
:deep(.el-textarea) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__task-note {
|
&__task-note {
|
||||||
@@ -13111,8 +13120,16 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__append-select--wide {
|
&__append-select--wide {
|
||||||
width: 108px;
|
width: 96px;
|
||||||
min-width: 108px;
|
min-width: 96px;
|
||||||
|
|
||||||
|
// 仅这两个窄 append 内的 placeholder 文字水平居中
|
||||||
|
:deep(.el-select__placeholder) {
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translateY(-50%) translateX(-50%) !important;
|
||||||
|
text-align: center;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.business-crud-page__goods-info-cell .cell) {
|
:deep(.business-crud-page__goods-info-cell .cell) {
|
||||||
|
|||||||
@@ -699,12 +699,12 @@ export default {
|
|||||||
.route-overview__line { flex: 0 1 56px; min-width: 24px; height: 32px; margin-top: 0; border-bottom: 6px solid #e4e7ed; }
|
.route-overview__line { flex: 0 1 56px; min-width: 24px; height: 32px; margin-top: 0; border-bottom: 6px solid #e4e7ed; }
|
||||||
.segment-header { min-height: 46px; padding: 0 20px; border-bottom: 1px solid #eff1f7; font-weight: 600; em { color: #409eff; font-style: normal; } }
|
.segment-header { min-height: 46px; padding: 0 20px; border-bottom: 1px solid #eff1f7; font-weight: 600; em { color: #409eff; font-style: normal; } }
|
||||||
.segment-content { padding: 16px 24px; }
|
.segment-content { padding: 16px 24px; }
|
||||||
.dispatch-form { :deep(.el-form-item) { margin-bottom: 16px; } :deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; } }
|
.dispatch-form { :deep(.el-form-item) { margin-bottom: 16px; } :deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; } :deep(.el-input-group__append .el-select) { width: auto; } }
|
||||||
.transport-type-field :deep(.el-input) { width: 240px; }
|
.transport-type-field :deep(.el-input) { width: 240px; }
|
||||||
.goods-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 -24px 12px; padding: 14px 24px; border-top: 1px solid #eff1f7; border-bottom: 1px solid #eff1f7; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } span { color: #909399; font-size: 13px; } }
|
.goods-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 -24px 12px; padding: 14px 24px; border-top: 1px solid #eff1f7; border-bottom: 1px solid #eff1f7; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } span { color: #909399; font-size: 13px; } }
|
||||||
.freight-heading { margin: 16px 0 12px; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } }
|
.freight-heading { margin: 16px 0 12px; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } }
|
||||||
.goods-table { :deep(th.el-table__cell), :deep(td.el-table__cell) { border-color: #eff1f7; } :deep(.el-table__row--striped td.el-table__cell) { background: #fafafa; } :deep(.goods-table__remaining .cell) { white-space: nowrap; } :deep(.goods-table__dispatch .el-input) { width: 100%; min-width: 0; } :deep(.goods-table__cargo-type .el-input__inner), :deep(.goods-table__cargo-name .el-select__selected-item) { color: #303133; } }
|
.goods-table { :deep(th.el-table__cell), :deep(td.el-table__cell) { border-color: #eff1f7; } :deep(.el-table__row--striped td.el-table__cell) { background: #fafafa; } :deep(.goods-table__remaining .cell) { white-space: nowrap; } :deep(.goods-table__dispatch .el-input) { width: 100%; min-width: 0; } :deep(.goods-table__cargo-type .el-input__inner), :deep(.goods-table__cargo-name .el-select__selected-item) { color: #303133; } }
|
||||||
.freight-form { :deep(.freight-unit-select) { width: 92px; } }
|
.freight-form { :deep(.freight-unit-select) { width: 92px; flex: 0 0 92px; min-width: 0; } }
|
||||||
.carrier-type-form { margin-top: 16px; }
|
.carrier-type-form { margin-top: 16px; }
|
||||||
.carrier-form { padding-top: 8px; }
|
.carrier-form { padding-top: 8px; }
|
||||||
.segment-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 4px; }
|
.segment-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 4px; }
|
||||||
|
|||||||
@@ -170,7 +170,7 @@
|
|||||||
<el-input
|
<el-input
|
||||||
v-model="form.remark"
|
v-model="form.remark"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="4"
|
:rows="2"
|
||||||
maxlength="500"
|
maxlength="500"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
placeholder="请输入"
|
placeholder="请输入"
|
||||||
|
|||||||
Reference in New Issue
Block a user