From 69782cecfc4790b6534a0b8535d367f822e9b6e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B3=89=E4=BD=B3?= <1107186916@qq.com>
Date: Tue, 10 Nov 2026 00:51:29 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E6=94=B6=E6=AC=BE/=E4=BB=98?=
 =?UTF-8?q?=E6=AC=BE=E7=BB=93=E7=AE=97=E5=8D=95=E6=90=9C=E7=B4=A2=E6=A0=8F?=
 =?UTF-8?q?=E6=94=B9=E9=80=A0=E4=B8=BA=E6=89=8B=E5=86=99=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8C=BA=EF=BC=8C=E7=8A=B6=E6=80=81=E6=96=87=E6=A1=88=E6=8C=89?=
 =?UTF-8?q?=E7=BB=93=E7=AE=97=E7=B1=BB=E5=9E=8B=E5=8C=BA=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 搜索栏与应收/应付明细页统一为页面级手写搜索区（4列网格、查询/重置独占一行靠右、默认折叠一行4条件）
- 发票状态/收付款状态的搜索标签、表格列标签与下拉选项按结算类型区分（收款=开票/收款方向，付款=收票/付款方向）
- 下拉选项优先取数据字典（invoice_status_*/payment_status_*），未配置时回退前端默认文案
- 搜索区展开/收起后触发 avue 表格高度重算，避免分页被推出视口出现多个滚动条
---
 src/option/settlement/formalSettlement.js     | 125 ++--------
 .../settlement/formalSettlementSearch.js      |  59 ++---
 .../formal-settlement-table-panel.vue         |  16 +-
 src/views/settlement/formal-settlement.vue    | 216 +++++++++++++++++-
 4 files changed, 254 insertions(+), 162 deletions(-)

diff --git a/src/option/settlement/formalSettlement.js b/src/option/settlement/formalSettlement.js
index afdc3c7..2913b93 100644
--- a/src/option/settlement/formalSettlement.js
+++ b/src/option/settlement/formalSettlement.js
@@ -1,21 +1,18 @@
 /**
  * 正式结算单列表（avue-crud）配置
  * ------------------------------------------------------------------
- * 列表页与其它模块统一使用 avue-crud，头部 4 个按钮（刷新 / 列显隐 / 搜索显隐 /
- * 显示方式）由 avue-crud 自带，不做二次封装。
+ * 列表页与其它模块统一使用 avue-crud，头部按钮（刷新 / 列显隐 / 显示方式）
+ * 由 avue-crud 自带，不做二次封装。
+ *
+ * 搜索栏与应收/应付明细页统一为页面级手写搜索区（见 formal-settlement.vue），
+ * 此处只保留表格列配置。
  *
  * 表格列复用 formalSettlementTable.js 的 formalSettlementTableColumns（与弹窗内
- * 明细表共用同一份列定义），此处只补充 avue 需要的展示/搜索属性，避免两处维护。
- *
- * ⚠️ searchOrder 为降序排序，值越大越靠前。
- * ⚠️ 仅用于搜索的列必须 hide + showColumn: false，否则会混进「列显隐」抽屉。
- * ⚠️ column 数组顺序 = 表格列顺序，搜索专用列统一放在数组最前面。
+ * 明细表共用同一份列定义），此处只补充 avue 需要的展示属性，避免两处维护。
  */
 
 import { formatSealTypes } from '@/utils/settlement-seal';
 import {
-  approvalStatusOptions,
-  invoiceStatusOptions,
   kingdeeSyncStatusOptions,
   kingdeeWriteOffStatusOptions,
   paymentStatusOptions,
@@ -34,47 +31,9 @@ const moneyFormatter = (row, value) =>
 const pickLabel = (options, value) =>
   options.find(item => item.value === value)?.label || value || '-';
 
-const searchOnlyColumn = ({ label, prop, searchOrder, type = 'input', dicData }) => {
-  const column = {
-    label,
-    prop,
-    search: true,
-    searchOrder,
-    searchSpan: 5,
-    hide: true,
-    showColumn: false,
-    addDisplay: false,
-    editDisplay: false,
-    viewDisplay: false,
-  };
-  if (type === 'select') {
-    column.type = 'select';
-    column.searchPlaceholder = '请选择';
-    column.dicData = dicData || [];
-  } else if (type === 'daterange') {
-    column.type = 'daterange';
-    column.searchType = 'daterange';
-    column.searchPlaceholder = '请选择';
-  } else {
-    column.searchPlaceholder = '请输入';
-  }
-  return column;
-};
-
-/** 表格列的 avue 增量配置：搜索项、插槽、覆盖宽度等 */
+/** 表格列的 avue 增量配置：插槽、覆盖宽度等 */
 const COLUMN_EXTRA = {
-  formalSettlementNo: {
-    slot: true,
-    search: true,
-    searchSpan: 5,
-    searchOrder: 12,
-    searchPlaceholder: '请输入',
-  },
-  payerName: { search: true, searchSpan: 5, searchOrder: 7, searchPlaceholder: '请输入' },
-  payeeName: { search: true, searchSpan: 5, searchOrder: 6, searchPlaceholder: '请输入' },
-  projectName: { search: true, searchSpan: 5, searchOrder: 11, searchPlaceholder: '请输入' },
-  deptName: { search: true, searchslot: true, searchSpan: 5, searchOrder: 10 },
-  contractNo: { search: true, searchSpan: 5, searchOrder: 9, searchPlaceholder: '请输入' },
+  formalSettlementNo: { slot: true },
   sealTypes: { formatter: sealTypesFormatter },
   invoiceStatusName: { slot: true },
   paymentStatusName: { slot: true },
@@ -82,27 +41,27 @@ const COLUMN_EXTRA = {
   adjustFlag: {
     formatter: row => row.adjustStatusName || (row.originFormalSettlementNo ? '调整后单' : '-'),
   },
-  kingdeeSyncStatus: {
-    slot: true,
-    search: true,
-    type: 'select',
-    dicData: kingdeeSyncStatusOptions,
-    searchSpan: 5,
-    searchOrder: 2,
-    searchPlaceholder: '请选择',
-  },
+  kingdeeSyncStatus: { slot: true },
   kingdeeLockStatus: { slot: true },
   kingdeeWriteOffStatus: { slot: true },
   kingdeeAssignStatus: { slot: true },
   createTime: { width: 180 },
 };
 
+/** 收款/付款结算单按结算类型展示各自标签 */
+const PAYMENT_FIELD_LABELS = {
+  paidAmount: { payable: '已付合计（含预付）', receivable: '已收合计（含预付）' },
+  paymentStatusName: { payable: '付款状态', receivable: '收款状态' },
+};
+
 // 已指定应付仅付款结算单（先票后款 A302-6）有，收款结算单不展示
 const buildTableColumns = settlementType =>
   formalSettlementTableColumns
     .filter(column => !(settlementType === 'receivable' && column.prop === 'kingdeeAssignStatus'))
     .map(column => {
       const extra = { ...(COLUMN_EXTRA[column.prop] || {}) };
+      const label = PAYMENT_FIELD_LABELS[column.prop]?.[settlementType];
+      if (label) extra.label = label;
       if (column.money) {
         extra.formatter = moneyFormatter;
         extra.align = 'right';
@@ -118,15 +77,6 @@ export const formalSettlementOption = (settlementType = '') => ({
   height: 'auto',
   calcHeight: 32,
   tip: false,
-  searchBtnText: '查询',
-  emptyBtnText: '重置',
-  searchShow: true,
-  searchIcon: true,
-  searchLabelWidth: 100,
-  // 查询/重置紧跟首行 4 个条件（4×5 + 菜单 4 = 24），不再独占下一整行
-  searchMenuSpan: 4,
-  searchIndex: 4,
-  searchMenuPosition: 'right',
   border: true,
   index: true,
   indexLabel: '序号',
@@ -141,45 +91,10 @@ export const formalSettlementOption = (settlementType = '') => ({
   editBtn: false,
   menuWidth: 320,
   menuFixed: 'right',
-  column: [
-    // ---------- 仅搜索列 ----------
-    searchOnlyColumn({
-      label: '预付结算单号',
-      prop: 'preSettlementNo',
-      searchOrder: 8,
-    }),
-    searchOnlyColumn({
-      label: '发票状态',
-      prop: 'invoiceStatus',
-      searchOrder: 5,
-      type: 'select',
-      dicData: invoiceStatusOptions,
-    }),
-    searchOnlyColumn({
-      label: '收付款状态',
-      prop: 'paymentStatus',
-      searchOrder: 4,
-      type: 'select',
-      dicData: paymentStatusOptions,
-    }),
-    searchOnlyColumn({
-      label: '审核状态',
-      prop: 'approvalStatus',
-      searchOrder: 3,
-      type: 'select',
-      dicData: approvalStatusOptions,
-    }),
-    searchOnlyColumn({
-      label: '生成日期',
-      prop: 'createDateRange',
-      searchOrder: 1,
-      type: 'daterange',
-    }),
-    // ---------- 表格列（部分兼搜索项） ----------
-    ...buildTableColumns(settlementType),
-  ],
+  column: [...buildTableColumns(settlementType)],
 });
 
 export const kingdeeSyncName = value => pickLabel(kingdeeSyncStatusOptions, value);
 export const kingdeeWriteOffName = value => pickLabel(kingdeeWriteOffStatusOptions, value);
-export const paymentStatusName = value => pickLabel(paymentStatusOptions, value);
+export const paymentStatusName = (value, settlementType) =>
+  pickLabel(paymentStatusOptions(settlementType), value);
diff --git a/src/option/settlement/formalSettlementSearch.js b/src/option/settlement/formalSettlementSearch.js
index cd4805f..19badcc 100644
--- a/src/option/settlement/formalSettlementSearch.js
+++ b/src/option/settlement/formalSettlementSearch.js
@@ -6,27 +6,28 @@ export const approvalStatusOptions = [
   { label: '已作废', value: 'voided' },
 ];
 
-export const invoiceStatusOptions = [
-  { label: '未开/收票', value: 'unreceived' },
-  { label: '部分开/收票', value: 'partial' },
-  { label: '已开/收票', value: 'completed' },
-];
-
-export const invoiceStatusName = (value, settlementType) => {
-  const payable = settlementType === 'payable';
-  const labels = {
-    unreceived: payable ? '未收票' : '未开票',
-    partial: payable ? '部分收票' : '部分开票',
-    completed: payable ? '已收票' : '已开票',
-  };
-  return labels[value] || value || '-';
+/** 发票状态选项按结算类型区分：付款结算单=收票方向，收款结算单=开票方向 */
+export const invoiceStatusOptions = (settlementType = '') => {
+  const received = settlementType === 'payable';
+  return [
+    { label: received ? '未收票' : '未开票', value: 'unreceived' },
+    { label: received ? '部分收票' : '部分开票', value: 'partial' },
+    { label: received ? '已收票' : '已开票', value: 'completed' },
+  ];
 };
 
-export const paymentStatusOptions = [
-  { label: '未收/付款', value: 'unpaid' },
-  { label: '部分收/付款', value: 'partial' },
-  { label: '已收/付款', value: 'paid' },
-];
+export const invoiceStatusName = (value, settlementType) =>
+  invoiceStatusOptions(settlementType).find(item => item.value === value)?.label || value || '-';
+
+/** 收付款状态选项按结算类型区分：付款结算单=付款方向，收款结算单=收款方向 */
+export const paymentStatusOptions = (settlementType = '') => {
+  const suffix = settlementType === 'payable' ? '付款' : '收款';
+  return [
+    { label: `未${suffix}`, value: 'unpaid' },
+    { label: `部分${suffix}`, value: 'partial' },
+    { label: `已${suffix}`, value: 'paid' },
+  ];
+};
 
 export const kingdeeSyncStatusOptions = [
   { label: '未同步', value: 'unsynced' },
@@ -38,23 +39,3 @@ export const kingdeeWriteOffStatusOptions = [
   { label: '未冲销', value: 'unwrittenoff' },
   { label: '已冲销', value: 'writtenoff' },
 ];
-
-export const formalSettlementSearchFields = [
-  { label: '结算单号', prop: 'formalSettlementNo', type: 'input' },
-  { label: '预付结算单号', prop: 'preSettlementNo', type: 'input' },
-  { label: '项目', prop: 'projectName', type: 'input' },
-  { label: '所属组织', prop: 'deptName', type: 'cascader' },
-  { label: '合同编号', prop: 'contractNo', type: 'input' },
-  { label: '付款方', prop: 'payerName', type: 'input' },
-  { label: '收款方', prop: 'payeeName', type: 'input' },
-  { label: '发票状态', prop: 'invoiceStatus', type: 'select', options: invoiceStatusOptions },
-  { label: '收付款状态', prop: 'paymentStatus', type: 'select', options: paymentStatusOptions },
-  { label: '审核状态', prop: 'approvalStatus', type: 'select', options: approvalStatusOptions },
-  {
-    label: '金蝶单据状态',
-    prop: 'kingdeeSyncStatus',
-    type: 'select',
-    options: kingdeeSyncStatusOptions,
-  },
-  { label: '生成日期', prop: 'createDateRange', type: 'daterange' },
-];
diff --git a/src/views/settlement/components/formal-settlement-table-panel.vue b/src/views/settlement/components/formal-settlement-table-panel.vue
index 4616077..22e05e3 100644
--- a/src/views/settlement/components/formal-settlement-table-panel.vue
+++ b/src/views/settlement/components/formal-settlement-table-panel.vue
@@ -5,8 +5,6 @@
     :table-loading="loading"
     :data="rows"
     v-model:page="crudPage"
-    @search-change="(params, done) => $emit('search-change', params, done)"
-    @search-reset="$emit('search-reset')"
     @selection-change="handleSelectionChange"
     @refresh-change="$emit('refresh')"
     @on-load="page => $emit('load', page)"
@@ -61,7 +59,9 @@
       }}</span>
     </template>
 
-    <template #paymentStatusName="{ row }">{{ paymentName(row.paymentStatus) }}</template>
+    <template #paymentStatusName="{ row }">{{
+      paymentName(row.paymentStatus, row.settlementType)
+    }}</template>
 
     <template #approvalStatusName="{ row }">
       <el-tag :type="statusType(row.approvalStatus)" class="status-text">{{
@@ -154,8 +154,6 @@ export default {
     'load',
     'action',
     'update:selection',
-    'search-change',
-    'search-reset',
   ],
   data() {
     return {
@@ -181,6 +179,10 @@ export default {
     },
   },
   methods: {
+    /** 搜索区展开/收起后由父级调用：avue 表格是固定像素高度，需手动触发了重新计算，否则分页会被推出视口 */
+    recalcTableHeight() {
+      this.$nextTick(() => this.$refs.crud?.getTableHeight?.());
+    },
     handleSelectionChange(selection) {
       this.selection = selection;
       this.$emit('update:selection', selection);
@@ -236,8 +238,8 @@ export default {
     invoiceName(value, settlementType) {
       return invoiceStatusName(value, settlementType);
     },
-    paymentName(value) {
-      return paymentStatusName(value);
+    paymentName(value, settlementType) {
+      return paymentStatusName(value, settlementType);
     },
     kingdeeSyncName(value) {
       return kingdeeSyncName(value);
diff --git a/src/views/settlement/formal-settlement.vue b/src/views/settlement/formal-settlement.vue
index 9d9126c..3c76bc5 100644
--- a/src/views/settlement/formal-settlement.vue
+++ b/src/views/settlement/formal-settlement.vue
@@ -1,5 +1,55 @@
 <template>
   <basic-container class="formal-page">
+    <section class="formal-search">
+      <el-form :model="searchForm" label-position="right" label-width="88px" @submit.prevent>
+        <div class="formal-search__grid">
+          <template v-for="field in visibleSearchFields" :key="field.prop">
+            <el-form-item :label="field.label">
+              <el-date-picker
+                v-if="field.type === 'daterange'"
+                v-model="searchForm[field.prop]"
+                type="daterange"
+                format="YYYY-MM-DD"
+                value-format="YYYY-MM-DD"
+                range-separator="~"
+                start-placeholder="年/月/日"
+                end-placeholder="年/月/日"
+              />
+              <el-select
+                v-else-if="field.type === 'select'"
+                v-model="searchForm[field.prop]"
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in field.options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-cascader
+                v-else-if="field.type === 'cascader'"
+                v-model="searchForm[field.prop]"
+                :options="organizationSearchTreeOptions"
+                :props="organizationCascaderProps"
+                filterable
+                clearable
+                placeholder="请选择 所属组织"
+              />
+              <el-input v-else v-model="searchForm[field.prop]" clearable placeholder="请输入" />
+            </el-form-item>
+          </template>
+          <div class="formal-search__actions">
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+            <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
+              {{ searchExpanded ? '收起' : '展开' }}
+            </el-button>
+          </div>
+        </div>
+      </el-form>
+    </section>
     <el-tabs
       v-if="!lockedSettlementType"
       type="border-card"
@@ -10,6 +60,7 @@
         <formal-settlement-table-panel
           v-if="activeSettlementType === 'payable'"
           key="payable"
+          ref="panel"
           v-bind="tablePanelProps"
           v-on="tablePanelListeners"
         />
@@ -18,6 +69,7 @@
         <formal-settlement-table-panel
           v-if="activeSettlementType === 'receivable'"
           key="receivable"
+          ref="panel"
           v-bind="tablePanelProps"
           v-on="tablePanelListeners"
         />
@@ -26,6 +78,7 @@
     <formal-settlement-table-panel
       v-else
       key="locked"
+      ref="panel"
       v-bind="tablePanelProps"
       v-on="tablePanelListeners"
     />
@@ -222,6 +275,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { createSettlementTransfer } from '@/utils/settlement-transfer';
 import {
   hasSettlementPermission,
@@ -234,6 +288,13 @@ import * as api from '@/api/settlement/formalSettlement';
 import * as paymentApi from '@/api/payment/paymentApplication';
 import * as invoiceReceiptApi from '@/api/payment/invoiceReceipt';
 import { formalSettlementOption, kingdeeSyncName } from '@/option/settlement/formalSettlement';
+import {
+  approvalStatusOptions,
+  invoiceStatusOptions,
+  kingdeeSyncStatusOptions,
+  paymentStatusOptions,
+} from '@/option/settlement/formalSettlementSearch';
+import { getDictionary } from '@/api/system/dictbiz';
 import organizationSearch from '@/mixins/organization-search';
 import FormalSettlementEditor from './components/formal-settlement-editor.vue';
 import FormalSettlementTablePanel from './components/formal-settlement-table-panel.vue';
@@ -256,7 +317,16 @@ export default {
   },
   data() {
     return {
+      ArrowDown,
+      ArrowUp,
       query: {},
+      // 手写搜索区（与应收/应付明细同款）：模型与展开状态
+      searchForm: {},
+      searchExpanded: false,
+      // 发票状态/收付款状态下拉选项：来自数据字典（按结算类型区分收/付方向），
+      // 字典未配置时回退前端默认文案（见 loadStatusDicts）
+      invoiceStatusDict: [],
+      paymentStatusDict: [],
       activeSettlementType: 'payable',
       rows: [],
       selection: [],
@@ -289,6 +359,47 @@ export default {
   },
   computed: {
     ...mapGetters(['permission', 'userInfo']),
+    // 搜索字段与应收/应付明细同结构；收付款/发票状态选项随结算类型区分
+    searchFields() {
+      return [
+        { label: '结算单号', prop: 'formalSettlementNo', type: 'input' },
+        { label: '项目名称', prop: 'projectName', type: 'input' },
+        { label: '所属组织', prop: 'deptName', type: 'cascader' },
+        { label: '合同编号', prop: 'contractNo', type: 'input' },
+        { label: '预付结算单号', prop: 'preSettlementNo', type: 'input' },
+        { label: '付款方', prop: 'payerName', type: 'input' },
+        { label: '收款方', prop: 'payeeName', type: 'input' },
+        {
+          label: '发票状态',
+          prop: 'invoiceStatus',
+          type: 'select',
+          options: this.invoiceStatusDict,
+        },
+        {
+          label: this.activeSettlementType === 'payable' ? '付款状态' : '收款状态',
+          prop: 'paymentStatus',
+          type: 'select',
+          options: this.paymentStatusDict,
+        },
+        {
+          label: '审核状态',
+          prop: 'approvalStatus',
+          type: 'select',
+          options: approvalStatusOptions,
+        },
+        {
+          label: '金蝶单据状态',
+          prop: 'kingdeeSyncStatus',
+          type: 'select',
+          options: kingdeeSyncStatusOptions,
+        },
+        { label: '生成日期', prop: 'createDateRange', type: 'daterange' },
+      ];
+    },
+    // 默认折叠只展示一行 4 个条件
+    visibleSearchFields() {
+      return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
+    },
     // 列随结算类型切换重建：收款结算单不展示「已指定应付」
     option() {
       return formalSettlementOption(this.activeSettlementType);
@@ -330,8 +441,6 @@ export default {
         refresh: () => this.onLoad(this.page),
         load: this.onLoad,
         action: this.onAction,
-        'search-change': this.searchChange,
-        'search-reset': this.searchReset,
         'update:selection': selection => {
           this.selection = selection;
         },
@@ -353,6 +462,8 @@ export default {
     activeSettlementType() {
       // 切换结算类型后由新挂载的 avue-crud 触发 on-load，此处只重置分页，避免重复请求
       this.page.currentPage = 1;
+      // 收/付方向的字典文案不同，切 tab 后重拉
+      this.loadStatusDicts();
     },
     '$route.query.detailNo'(detailNo) {
       if (detailNo) this.openRouteDetail(detailNo);
@@ -360,6 +471,7 @@ export default {
   },
   created() {
     this.loadOrganizationOptions();
+    this.loadStatusDicts();
   },
   mounted() {
     this.isPageActive = true;
@@ -402,25 +514,57 @@ export default {
         this.loading = false;
       }
     },
-    searchChange(params, done) {
-      // 所属组织级联返回 id 路径，转成组织名称传给后端
+    /**
+     * 发票状态/收付款状态下拉选项从字典加载（dictKey=后端状态值，dictValue=文案）。
+     * 收/付两个方向文案不同，按结算类型区分字典编码：
+     *   invoice_status_payable / invoice_status_receivable
+     *   payment_status_payable / payment_status_receivable
+     * 字典未配置或为空时回退前端默认文案，保证页面可用。
+     */
+    loadStatusDicts() {
+      const type = this.activeSettlementType;
+      const fallback = {
+        invoice: invoiceStatusOptions(type),
+        payment: paymentStatusOptions(type),
+      };
+      const pick = res =>
+        (res?.data?.data || [])
+          .map(item => ({ label: item.dictValue, value: String(item.dictKey) }))
+          .filter(item => item.label && item.value);
+      Promise.all([
+        getDictionary({ code: `invoice_status_${type}` }).catch(() => null),
+        getDictionary({ code: `payment_status_${type}` }).catch(() => null),
+      ]).then(([invoiceRes, paymentRes]) => {
+        const invoice = pick(invoiceRes);
+        const payment = pick(paymentRes);
+        this.invoiceStatusDict = invoice.length ? invoice : fallback.invoice;
+        this.paymentStatusDict = payment.length ? payment : fallback.payment;
+      });
+    },
+    // 搜索提交：组织级联路径转名称、日期区间拆成起止参数（与原 avue searchChange 同规则）
+    buildSearchParams() {
+      const params = { ...this.searchForm };
       this.normalizeOrganizationSearch(params, 'deptName');
       const range = params.createDateRange || [];
       delete params.createDateRange;
-      this.query = {
-        ...params,
-        createStartDate: range[0] || '',
-        createEndDate: range[1] || '',
-      };
+      return { ...params, createStartDate: range[0] || '', createEndDate: range[1] || '' };
+    },
+    handleSearch() {
+      this.query = this.buildSearchParams();
       this.page.currentPage = 1;
       this.onLoad(this.page);
-      done();
     },
-    searchReset() {
+    handleReset() {
+      this.searchForm = {};
       this.query = {};
       this.page.currentPage = 1;
       this.onLoad(this.page);
     },
+    toggleSearch() {
+      this.searchExpanded = !this.searchExpanded;
+      // 搜索区在 avue 外部，高度变化 avue 感知不到，需手动触发表格高度重算，保证分页在一屏内
+      this.$refs.panel?.recalcTableHeight();
+    },
     onAction({ type, row }) {
       const handlers = {
         view: () => this.openView(row),
@@ -877,6 +1021,56 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// 搜索区与应收/应付明细页（settlement-detail-page__search）同款样式
+.formal-search {
+  margin-bottom: 8px;
+  padding: 12px 12px 4px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+  :deep(.el-form-item__label) {
+    white-space: nowrap;
+  }
+}
+
+.formal-search__grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(220px, 1fr));
+  gap: 8px 24px;
+  align-items: start;
+
+  :deep(.el-form-item) {
+    margin-bottom: 8px;
+  }
+
+  :deep(.el-input),
+  :deep(.el-select),
+  :deep(.el-cascader),
+  :deep(.el-date-editor) {
+    width: 100%;
+  }
+}
+
+.formal-search__actions {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+@media screen and (max-width: 1200px) {
+  .formal-search__grid {
+    grid-template-columns: repeat(2, minmax(220px, 1fr));
+  }
+}
+
+@media screen and (max-width: 760px) {
+  .formal-search__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .formal-page {
   :deep(.el-table) {
     --el-table-border-color: #eff1f7;