CC/ruoyi-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
van
2026-04-10 16:24:52 +08:00
parent be9d4e182e
commit a9f4c5adab
1 changed files with 79 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/views/system/jdorder/orderList.vue
View File

@@ -19,7 +19,37 @@
label-width="76px"
label-position="left"
>
<div class="jd-filter-group jd-filter-group--basic">
<div v-if="isDesktopFilterCompact && showDesktopExpandedFilters" class="jd-filter-compact-collapse-row">
<el-button type="text" size="small" class="jd-filter-compact-collapse-row__btn" @click="showDesktopExpandedFilters = false">
<i class="el-icon-arrow-up" />
收起筛选（基础条件 / 跟进状态 / 查询）
</el-button>
</div>
<div v-if="isDesktopFilterCompact && !showDesktopExpandedFilters" class="jd-filter-compact-minimal">
<el-input
v-model="queryParams.orderSearch"
placeholder="订单号 / 第三方单号 / 分销标识"
clearable
size="small"
class="jd-filter-compact-minimal__search"
@keyup.enter.native="handleQuery"
/>
<div class="jd-filter-compact-minimal__actions">
<el-button type="primary" plain size="small" icon="el-icon-search" class="jd-filter-act-btn jd-filter-act-btn--primary" @click="handleQuery">搜索</el-button>
<el-button class="jd-tb-muted jd-filter-act-btn" plain size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<el-button class="jd-tb-muted jd-filter-act-btn" plain size="small" icon="el-icon-download" @click="handleExport" v-hasPermi="['system:jdorder:export']">导出</el-button>
<el-button type="text" size="small" class="jd-filter-compact-expand-btn" @click="showDesktopExpandedFilters = true">
<i class="el-icon-arrow-down" />
展开全部筛选
</el-button>
</div>
</div>
<div
v-show="!isDesktopFilterCompact || showDesktopExpandedFilters"
class="jd-filter-group jd-filter-group--basic"
>
<div class="jd-filter-group-head">
<span class="jd-filter-group-title">基础条件</span>
</div>
@@ -63,15 +93,8 @@
</div>
</div>
<div v-if="isDesktopFilterCompact" class="jd-filter-compact-toggle">
<el-button type="text" size="small" class="jd-filter-compact-toggle__btn" @click="showFollowUpFilters = !showFollowUpFilters">
<i :class="showFollowUpFilters ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
{{ showFollowUpFilters ? '收起跟进状态' : '展开跟进状态筛选' }}
</el-button>
</div>
<div
v-show="!isDesktopFilterCompact || showFollowUpFilters"
v-show="!isDesktopFilterCompact || showDesktopExpandedFilters"
class="jd-filter-group jd-filter-group--status"
>
<div class="jd-filter-group-head">
@@ -132,7 +155,10 @@
</div>
</div>
<div class="jd-filter-group jd-filter-group--extra">
<div
v-show="!isDesktopFilterCompact || showDesktopExpandedFilters"
class="jd-filter-group jd-filter-group--extra"
>
<div class="jd-filter-group-head">
<span class="jd-filter-group-title">查询</span>
</div>
@@ -1211,8 +1237,8 @@ export default {
mobileExpandedOrderId: null,
/** 视口高度（桌面端用于矮窗口下自动收起「跟进状态」筛选） */
viewportHeight: typeof window !== 'undefined' ? window.innerHeight : 900,
/** 矮窗口下是否展开「跟进状态」分组（默认依视口在 mounted/resize 中更新） */
showFollowUpFilters: true
/** 矮窗口下是否展开完整筛选（基础条件 / 跟进状态 / 查询） */
showDesktopExpandedFilters: true
}
},
computed: {
@@ -1291,7 +1317,7 @@ export default {
mounted() {
this.viewportHeight = window.innerHeight
if (!this.isMobile && this.viewportHeight < 780) {
this.showFollowUpFilters = false
this.showDesktopExpandedFilters = false
}
this._onJdFilterViewportResize = () => this.onJdFilterViewportResize()
window.addEventListener('resize', this._onJdFilterViewportResize, { passive: true })
@@ -1314,9 +1340,9 @@ export default {
const nowCompact = h < 780
const wasCompact = prev < 780
if (nowCompact && !wasCompact) {
this.showFollowUpFilters = false
this.showDesktopExpandedFilters = false
} else if (!nowCompact && wasCompact) {
this.showFollowUpFilters = true
this.showDesktopExpandedFilters = true
}
},
/** 凡系分销标识：历史 F 与 F-中文（如 F-王杰）等同 */
@@ -3031,20 +3057,52 @@ export default {
flex-direction: column;
gap: 0;
}
.jd-filter-compact-toggle {
.jd-filter-compact-collapse-row {
width: 100%;
margin: 4px 0 2px;
padding: 0 4px;
margin: 0 0 8px;
padding: 0 2px;
box-sizing: border-box;
}
.jd-filter-compact-toggle__btn {
padding: 4px 0;
.jd-filter-compact-collapse-row__btn {
padding: 2px 0;
color: var(--jd-accent);
font-size: 13px;
}
.jd-filter-compact-toggle__btn i {
.jd-filter-compact-collapse-row__btn i {
margin-right: 4px;
}
.jd-filter-compact-minimal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-bottom: 10px;
padding: 8px 10px;
box-sizing: border-box;
border-radius: 8px;
border: 1px dashed var(--jd-border);
background: rgba(255, 255, 255, 0.85);
}
.jd-filter-compact-minimal__search {
flex: 1 1 220px;
min-width: 160px;
max-width: 420px;
}
.jd-filter-compact-minimal__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
}
.jd-filter-compact-expand-btn {
padding: 6px 4px;
margin-left: 4px;
color: var(--jd-accent);
font-size: 13px;
}
.jd-filter-compact-expand-btn i {
margin-right: 2px;
}
.jd-order-filter-form ::v-deep .el-form-item {
margin-right: 14px;
margin-bottom: 12px;