style(payment): 调整账单搜索组件操作栏布局
- 将操作栏从水平方向排列改为垂直方向排列 - 调整按钮和标签间距增大,标签左对齐,按钮右对齐 - 标签和按钮分成独立两行显示,提高界面清晰度 style(transportCapacity): 统一到期快捷筛选标签布局及样式 - 将到期快捷筛选标签由搜索菜单槽位移至头部槽位独立一行 - 移除原先纵向顺序和内联样式,增加标签上下间距 - 统一 driver、ship、vehicle 三个页面到期标签的外观和结构 - 优化标签容器的 margin 边距,取消排序和宽度限制 style(transportCapacity/ship): 统一弹窗内输入控件宽度 - 删除强制设置 .el-input__wrapper 宽度为 150px 的样式 - 增加输入框、选择框及级联选择器等组件宽度为 100% 的样式覆盖 - 保证新增和修改弹窗内所有表单输入控件宽度一致,提升界面整齐度
This commit is contained in:
@@ -0,0 +1,20 @@
|
|||||||
|
# 2026-09-02 工作日志
|
||||||
|
|
||||||
|
## 合同/运力页「到期快捷筛选」标签统一改为独立一行
|
||||||
|
- 需求:把 avue-crud 搜索栏 `#search-menu` 里的 `<el-check-tag>` 到期快捷筛选组,移出搜索栏、单独成一行(搜索卡下方、表格上方),不加卡片包裹。
|
||||||
|
- 实现:改用 avue-crud 的 `#header` 插槽承载该组;CSS 由 `order:-1; margin-right:12px; min-width:0`(搜索按钮行内联)改为 `margin-bottom:12px`(独立行)。
|
||||||
|
- 涉及文件(4 处,均已改):
|
||||||
|
- `src/views/business/contract-manage.vue`(首改,用 `.contract-manage-page__expiry-search`)
|
||||||
|
- `src/views/transportCapacity/vehicle.vue`(`.transport-vehicle-page__expiry-tags`)
|
||||||
|
- `src/views/transportCapacity/driver.vue`(`.driver-page__expiry-tags`)
|
||||||
|
- `src/views/transportCapacity/ship.vue`(`.transport-ship-page__expiry-tags`)
|
||||||
|
- 各页变量名保留原样(contract-manage 用 contractExpiryScope/changeExpiryScope/contractExpiryStats;运力页用 query.expireStatus/handleExpireChange/expiryStat)。
|
||||||
|
- 已补改:`src/views/payment/components/bill-ledger-search.vue` —— 独立自定义搜索子组件。`bill-ledger-search__actions` 由「标签+按钮同一行(右对齐)」改为 `flex-direction:column; gap:12px`:标签独立一行(左对齐,去掉 justify-content:flex-end),按钮另起一行右对齐。标签变量 shortcutOptions/query.expiryShortcut 不变。用户确认需统一,故改之。
|
||||||
|
|
||||||
|
## transportCapacity/ship 新增弹窗 input 宽度统一
|
||||||
|
- 问题:新增/修改弹窗内输入控件宽度不一致(文本框明显窄于下拉框、日期框)。
|
||||||
|
- 根因:`src/views/transportCapacity/ship.vue` 末尾 scoped 样式中独有 `.el-input__wrapper{width:150px !important}`,把文本框包裹层强制压成 150px,而 `el-select`(用 `.el-select__wrapper`)、日期/数字框不受影响 → 文本框与下拉框宽度不齐。同模块的 driver.vue / vehicle.vue 均无此规则。
|
||||||
|
- 修复:
|
||||||
|
1. 删除 `.el-input__wrapper{width:150px!important}` 异常规则。
|
||||||
|
2. 增强 `.ship-form` 内输入控件的 100% 宽度覆盖,补齐 `.el-select__wrapper` / `.el-cascader` / `.el-input__wrapper`,使文本框/下拉/日期/数字框均 100% 填满所在栅格列。
|
||||||
|
- 说明:弹窗仍保留不同栅格列宽(span6/8/12/16)的密集布局,同行字段已等宽;若需跨行全部 input 绝对像素等宽(统一栅格列宽),需进一步重排。
|
||||||
@@ -43,17 +43,6 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
<div class="bill-ledger-search__actions">
|
|
||||||
<div class="bill-ledger-search__actions-tags">
|
|
||||||
<el-check-tag
|
|
||||||
v-for="item in shortcutOptions"
|
|
||||||
:key="item.value"
|
|
||||||
:checked="query.expiryShortcut === item.value"
|
|
||||||
@change="handleShortcutChange(item.value)"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</el-check-tag>
|
|
||||||
</div>
|
|
||||||
<div class="bill-ledger-search__actions-buttons">
|
<div class="bill-ledger-search__actions-buttons">
|
||||||
<el-button type="primary" :loading="loading" @click="$emit('search')">
|
<el-button type="primary" :loading="loading" @click="$emit('search')">
|
||||||
<el-icon><Search /></el-icon>
|
<el-icon><Search /></el-icon>
|
||||||
@@ -70,7 +59,6 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -138,20 +126,19 @@ export default {
|
|||||||
}
|
}
|
||||||
.bill-ledger-search__actions {
|
.bill-ledger-search__actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
gap: 12px;
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.bill-ledger-search__actions-buttons {
|
.bill-ledger-search__actions-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
.bill-ledger-search__actions-tags {
|
.bill-ledger-search__actions-tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,7 +41,7 @@
|
|||||||
>批量删除
|
>批量删除
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
<template #search-menu>
|
<template #header>
|
||||||
<div class="driver-page__expiry-tags">
|
<div class="driver-page__expiry-tags">
|
||||||
<el-check-tag
|
<el-check-tag
|
||||||
v-for="item in expiryTagOptions"
|
v-for="item in expiryTagOptions"
|
||||||
@@ -1724,9 +1724,8 @@ export default {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
order: -1;
|
margin-top: 8px;
|
||||||
margin-right: 12px;
|
margin-bottom: 16px;
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
:deep(.el-check-tag) {
|
:deep(.el-check-tag) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@@ -44,7 +44,7 @@
|
|||||||
批量删除
|
批量删除
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
<template #search-menu>
|
<template #header>
|
||||||
<div class="transport-ship-page__expiry-tags">
|
<div class="transport-ship-page__expiry-tags">
|
||||||
<el-check-tag
|
<el-check-tag
|
||||||
v-for="item in expiryTagOptions"
|
v-for="item in expiryTagOptions"
|
||||||
@@ -1199,9 +1199,8 @@ export default {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
order: -1;
|
margin-top: 8px;
|
||||||
margin-right: 12px;
|
margin-bottom: 16px;
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
:deep(.el-check-tag) {
|
:deep(.el-check-tag) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -1219,7 +1218,10 @@ export default {
|
|||||||
:deep(.el-date-editor.el-input),
|
:deep(.el-date-editor.el-input),
|
||||||
:deep(.el-date-editor.el-input__wrapper),
|
:deep(.el-date-editor.el-input__wrapper),
|
||||||
:deep(.el-select),
|
:deep(.el-select),
|
||||||
|
:deep(.el-select__wrapper),
|
||||||
|
:deep(.el-cascader),
|
||||||
:deep(.el-input),
|
:deep(.el-input),
|
||||||
|
:deep(.el-input__wrapper),
|
||||||
:deep(.el-input-number) {
|
:deep(.el-input-number) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -1374,7 +1376,4 @@ export default {
|
|||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-bottom: 14px !important;
|
margin-bottom: 14px !important;
|
||||||
}
|
}
|
||||||
.el-input__wrapper{
|
|
||||||
width: 150px !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -41,7 +41,7 @@
|
|||||||
>批量删除
|
>批量删除
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
<template #search-menu>
|
<template #header>
|
||||||
<div class="transport-vehicle-page__expiry-tags">
|
<div class="transport-vehicle-page__expiry-tags">
|
||||||
<el-check-tag
|
<el-check-tag
|
||||||
v-for="item in expiryTagOptions"
|
v-for="item in expiryTagOptions"
|
||||||
@@ -1407,9 +1407,8 @@ export default {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
order: -1;
|
margin-top: 8px;
|
||||||
margin-right: 12px;
|
margin-bottom: 16px;
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
:deep(.el-check-tag) {
|
:deep(.el-check-tag) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user