1

src/views/system/jdorder/orderList.vue

@@ -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;
+  margin: 0 0 8px;
-  padding: 0 4px;
+  padding: 0 2px;
   box-sizing: border-box;
 }
-.jd-filter-compact-toggle__btn {
+.jd-filter-compact-collapse-row__btn {
-  padding: 4px 0;
+  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;