Merge remote-tracking branch 'origin/master' into feature/20261019-bfi-all-web

# Conflicts: # src/views/settlement/formal-settlement.vue
2026-10-21 16:15:04 +08:00
parent 9150213b0f 6a21b4ac8d
commit eb32a275f3
30 changed files with 2026 additions and 1420 deletions
@@ -53,7 +53,7 @@
                  <el-option
                    v-for="item in contracts"
                    :key="item.id"
-                    :label="formatContractOptionLabel(item)"
+                    :label="item.contractName || ''"
                    :value="item.id"
                  />
                </el-select>
@@ -1070,7 +1070,6 @@ import {
 import { getDictionary } from '@/api/system/dictbiz';
 import { h } from 'vue';
 import { mapGetters } from 'vuex';
-import { formatContractOptionLabel } from '@/utils/contract';
 import { isTierUnitPrice, isUnitPriceAdjustable } from '@/utils/settlement-adjust-rule';
 import { normalizeCurrencyCode } from '@/utils/currency';
 import {
@@ -1389,7 +1388,6 @@ export default {
  methods: {
    isTierUnitPrice,
    isUnitPriceAdjustable,
-    formatContractOptionLabel,
    hasPermission(code) {
      if (this.isAdmin) return true;
      const action = String(code || '').replace(
@@ -1,155 +1,100 @@
 <template>
-  <div class="fs-table-panel">
-    <div class="fs-table-panel__toolbar">
-      <div>
-        <el-button
-          v-if="hasPermission('add')"
-          type="primary"
-          @click="$emit('create')"
-          >新增</el-button
-        >
-        <el-button
-          v-if="showPaymentAction && hasPermission('payment')"
-          type="primary"
-          plain
-          :disabled="!selection.length"
-          @click="$emit('payment')"
-          >付款申请</el-button
-        >
-        <el-button
-          v-if="hasPermission('sync')"
-          type="primary"
-          plain
-          :disabled="!selection.length"
-          :loading="syncLoading"
-          @click="$emit('sync')"
-          >同步金蝶</el-button
-        >
-        <el-button
-          v-if="hasPermission('print')"
-          type="primary"
-          plain
-          @click="emitSingle('print')"
-          >打印结算单</el-button
-        >
-        <el-button
-          v-if="hasPermission('export')"
-          type="primary"
-          plain
-          @click="$emit('export')"
-          >导出</el-button
-        >
-      </div>
-      <settlement-table-tools
-        :columns="columnSettingOptions"
-        v-model:visible-column-keys="visibleColumnKeys"
-        v-model:table-size="tableSize"
-        :search-visible="searchVisible"
-        @update:search-visible="$emit('update:searchVisible', $event)"
-        @refresh="$emit('refresh')"
-      />
-    </div>
-    <el-table
-      ref="tableRef"
-      v-loading="loading"
-      :data="rows"
-      :size="tableSize"
-      border
-      highlight-current-row
-      @current-change="handleCurrentChange"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
-      <el-table-column type="selection" width="52" fixed="left" align="center" />
-      <el-table-column
-        v-for="column in visibleColumns"
-        :key="column.prop"
-        v-bind="column"
-        align="center"
-        show-overflow-tooltip
+  <avue-crud
+    ref="crud"
+    :option="option"
+    :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)"
+  >
+    <template #menu-left>
+      <el-button v-if="hasPermission('add')" type="primary" @click="$emit('create')"
+        >新增</el-button
      >
-        <template #default="{ row }">
-          <el-link
-            v-if="column.link && row[column.prop]"
-            type="primary"
-            @click="emitAction('view', row)"
-            >{{ row[column.prop] }}</el-link
-          >
-          <el-tag
-            v-else-if="column.status"
-            :type="statusType(row.approvalStatus)"
-            class="status-text"
-            >{{ displayValue(row[column.prop]) }}</el-tag
-          >
-          <span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
-          <span
-            v-else-if="column.prop === 'invoiceStatusName'"
-            :class="['fs-table-panel__invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]"
-          >{{ invoiceName(row.invoiceStatus, row.settlementType) }}</span>
-          <span v-else-if="column.prop === 'paymentStatusName'">{{
-            paymentName(row.paymentStatus)
-          }}</span>
-          <span v-else-if="column.prop === 'kingdeeSyncStatus'">{{
-            kingdeeSyncName(row.kingdeeSyncStatus)
-          }}</span>
-          <span v-else-if="column.prop === 'adjustFlag'">{{ adjustFlag(row) }}</span>
-          <template v-else-if="column.prop === 'kingdeeLockStatus'">
-            <el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
-              <el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
-            </el-tooltip>
-            <span v-else>-</span>
-          </template>
-          <span v-else>{{ displayValue(row[column.prop]) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="320" fixed="right" align="center">
-        <template #default="{ row }"
-          ><div class="fs-table-panel__links">
-            <el-link
-              v-for="action in rowActions(row)"
-              :key="action.type"
-              :type="action.danger ? 'danger' : 'primary'"
-              @click="emitAction(action.type, row)"
-              >{{ action.label }}</el-link
-            >
-          </div></template
-        >
-      </el-table-column>
-    </el-table>
-    <div class="fs-table-panel__pagination">
-      <el-pagination
-        :current-page="page.current"
-        :page-size="page.size"
-        :total="page.total"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        @current-change="current => $emit('page-change', { current, size: page.size })"
-        @size-change="size => $emit('page-change', { current: 1, size })"
-      />
-    </div>
-  </div>
+      <el-button
+        v-if="showPaymentAction && hasPermission('payment')"
+        type="primary"
+        plain
+        :disabled="!selection.length"
+        @click="$emit('payment')"
+        >付款申请</el-button
+      >
+      <el-button
+        v-if="hasPermission('sync')"
+        type="primary"
+        plain
+        :disabled="!selection.length"
+        :loading="syncLoading"
+        @click="$emit('sync')"
+        >同步金蝶</el-button
+      >
+      <el-button v-if="hasPermission('print')" type="primary" plain @click="emitSingle('print')"
+        >打印结算单</el-button
+      >
+      <el-button v-if="hasPermission('export')" type="primary" plain @click="$emit('export')"
+        >导出</el-button
+      >
+    </template>
+
+    <template #formalSettlementNo="{ row }">
+      <el-link type="primary" @click="emitAction('view', row)">{{
+        row.formalSettlementNo || '-'
+      }}</el-link>
+    </template>
+
+    <template #invoiceStatusName="{ row }">
+      <span :class="['fs-invoice-status', `is-${row.invoiceStatus || 'unreceived'}`]">{{
+        invoiceName(row.invoiceStatus, row.settlementType)
+      }}</span>
+    </template>
+
+    <template #paymentStatusName="{ row }">{{ paymentName(row.paymentStatus) }}</template>
+
+    <template #approvalStatusName="{ row }">
+      <el-tag :type="statusType(row.approvalStatus)" class="status-text">{{
+        row.approvalStatusName || '-'
+      }}</el-tag>
+    </template>
+
+    <template #kingdeeSyncStatus="{ row }">{{ kingdeeSyncName(row.kingdeeSyncStatus) }}</template>
+
+    <template #kingdeeLockStatus="{ row }">
+      <el-tooltip v-if="lockTag(row).show" :content="lockTag(row).tip" placement="top">
+        <el-tag :type="lockTag(row).type" class="status-text">{{ lockTag(row).label }}</el-tag>
+      </el-tooltip>
+      <span v-else>-</span>
+    </template>
+
+    <template #menu="{ row }">
+      <el-link
+        v-for="action in rowActions(row)"
+        :key="action.type"
+        :type="action.danger ? 'danger' : 'primary'"
+        @click="emitAction(action.type, row)"
+        >{{ action.label }}</el-link
+      >
+    </template>
+  </avue-crud>
 </template>

 <script>
-import {
-  invoiceStatusName,
-  kingdeeSyncStatusOptions,
-  paymentStatusOptions,
-} from '@/option/settlement/formalSettlementSearch';
-import SettlementTableTools from './settlement-table-tools.vue';
+import { invoiceStatusName } from '@/option/settlement/formalSettlementSearch';
+import { kingdeeSyncName, paymentStatusName } from '@/option/settlement/formalSettlement';

 export default {
  name: 'FormalSettlementTablePanel',
-  components: { SettlementTableTools },
  props: {
+    option: { type: Object, required: true },
    rows: { type: Array, default: () => [] },
-    columns: { type: Array, default: () => [] },
    loading: { type: Boolean, default: false },
    syncLoading: { type: Boolean, default: false },
    page: { type: Object, required: true },
    hasPermission: { type: Function, required: true },
    mkEnabled: { type: Boolean, default: false },
-    searchVisible: { type: Boolean, default: true },
    /** 是否展示付款申请按钮（仅付款结算单） */
    showPaymentAction: { type: Boolean, default: true },
    billLabel: { type: String, default: '结算单' },
@@ -158,66 +103,38 @@ export default {
    'create',
    'payment',
    'sync',
-    'print',
    'export',
    'refresh',
-    'page-change',
+    'load',
    'action',
    'update:selection',
-    'update:searchVisible',
+    'search-change',
+    'search-reset',
  ],
  data() {
    return {
      selection: [],
-      tableSize: 'default',
-      visibleColumnKeys: [],
-      knownColumnProps: [],
    };
  },
  computed: {
-    columnSettingOptions() {
-      return this.columns.map(column => ({
-        prop: column.prop,
-        label: column.label,
-      }));
-    },
-    visibleColumns() {
-      if (!this.visibleColumnKeys.length) return this.columns;
-      return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
+    // 分页对象由父级持有，avue 内部翻页时同步回写同一个对象
+    crudPage: {
+      get() {
+        return this.page;
+      },
+      set(value) {
+        Object.assign(this.page, value || {});
+      },
    },
  },
  watch: {
-    columns: {
-      immediate: true,
-      handler(columns) {
-        const props = columns.map(column => column.prop);
-        if (!this.visibleColumnKeys.length) {
-          this.visibleColumnKeys = props;
-          this.knownColumnProps = props;
-          return;
-        }
-        const visible = new Set(this.visibleColumnKeys);
-        const known = new Set(this.knownColumnProps || []);
-        props.forEach(prop => {
-          if (!known.has(prop)) visible.add(prop);
-        });
-        this.knownColumnProps = props;
-        this.visibleColumnKeys = props.filter(prop => visible.has(prop));
-      },
-    },
    rows() {
      this.selection = [];
-      this.$refs.tableRef?.clearSelection();
+      this.$refs.crud?.toggleSelection?.();
      this.$emit('update:selection', this.selection);
    },
  },
  methods: {
-    handleCurrentChange(row) {
-      if (!row && this.selection.length === 1) {
-        this.selection = [];
-        this.$emit('update:selection', this.selection);
-      }
-    },
    handleSelectionChange(selection) {
      this.selection = selection;
      this.$emit('update:selection', selection);
@@ -273,20 +190,19 @@ export default {
      return invoiceStatusName(value, settlementType);
    },
    paymentName(value) {
-      return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
+      return paymentStatusName(value);
    },
    kingdeeSyncName(value) {
-      return kingdeeSyncStatusOptions.find(item => item.value === value)?.label || value || '-';
-    },
-    adjustFlag(row) {
-      // 原单已调整 / 重推生成的新单（显示来源原单号）
-      if (row.adjustStatusName) return row.adjustStatusName;
-      if (row.originFormalSettlementNo) return '调整后单';
-      return '-';
+      return kingdeeSyncName(value);
    },
    lockTag(row) {
      if (row.kingdeeLockStatus === 'locked') {
-        return { show: true, type: 'danger', label: '金蝶锁定中', tip: '该单据已被金蝶锁定，不可编辑/作废' };
+        return {
+          show: true,
+          type: 'danger',
+          label: '金蝶锁定中',
+          tip: '该单据已被金蝶锁定，不可编辑/作废',
+        };
      }
      if (row.kingdeeLockStatus === 'failed') {
        if ((row.kingdeeTryCount || 0) >= 5) {
@@ -316,30 +232,12 @@ export default {
      }
      return { show: false };
    },
-    displayValue(value) {
-      return value === null || value === undefined || value === '' ? '-' : value;
-    },
-    formatMoney(value, currency = 'RMB') {
-      return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
-    },
  },
 };
 </script>

 <style scoped lang="scss">
-.fs-table-panel__toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-}
-.fs-table-panel__links {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-.fs-table-panel__invoice-status {
+.fs-invoice-status {
  &.is-unreceived {
    color: #f56c6c;
  }
@@ -347,12 +245,7 @@ export default {
    color: #e6a23c;
  }
  &.is-completed {
-    color: #67c23a;
+    color: #67c23c;
  }
 }
-.fs-table-panel__pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
 </style>
@@ -251,29 +251,32 @@
              :key="item.key"
              :label="item.kind === 'fee' ? item.name : item.column.label"
              :prop="item.kind === 'fee' ? undefined : item.column.prop"
-              :min-width="item.kind === 'fee' ? 130 : item.column.minWidth"
+              :min-width="item.kind === 'fee' ? 150 : item.column.minWidth"
              align="center"
              show-overflow-tooltip
            >
-              <template #default="{ row }">
-                <span v-if="item.kind === 'fee'" class="pre-settlement-editor__billing-rule-cell">
-                  <span>
-                    {{
-                      formatMoney(
-                        parseFeeItems(row.feeItemsJson)[item.name],
-                        row.currency || form.currency
-                      )
-                    }}
-                  </span>
+              <template #header>
+                <span class="pre-settlement-editor__billing-rule-cell">
+                  <span>{{ item.kind === 'fee' ? item.name : item.column.label }}</span>
                  <el-icon
-                    v-if="hasDetailBillingRule(row)"
+                    v-if="showDetailColumnRuleIcon(item)"
                    class="pre-settlement-editor__billing-rule-icon"
                    title="查看计费规则详情"
-                    @click.stop="openDetailBillingRule(row, item.name)"
+                    @click.stop="openDetailColumnRule(item)"
                  >
                    <InfoFilled />
                  </el-icon>
                </span>
+              </template>
+              <template #default="{ row }">
+                <span v-if="item.kind === 'fee'">
+                  {{
+                    formatMoney(
+                      parseFeeItems(row.feeItemsJson)[item.name],
+                      row.currency || form.currency
+                    )
+                  }}
+                </span>
                <el-link
                  v-else-if="item.column.link && row[item.column.prop] && !publicMode"
                  type="primary"
@@ -284,19 +287,8 @@
                <span v-else-if="item.column.money && item.column.prop === 'unitPrice'">
                  {{ formatUnitPrice(row) }}
                </span>
-                <span
-                  v-else-if="item.column.prop === 'freightAmount'"
-                  class="pre-settlement-editor__billing-rule-cell"
-                >
-                  <span>{{ formatMoney(row[item.column.prop], row.currency || form.currency) }}</span>
-                  <el-icon
-                    v-if="hasDetailBillingRule(row)"
-                    class="pre-settlement-editor__billing-rule-icon"
-                    title="查看计费规则详情"
-                    @click.stop="openDetailBillingRule(row, '运输费')"
-                  >
-                    <InfoFilled />
-                  </el-icon>
+                <span v-else-if="item.column.prop === 'freightAmount'">
+                  {{ formatMoney(row[item.column.prop], row.currency || form.currency) }}
                </span>
                <span v-else-if="item.column.money">
                  {{ formatMoney(row[item.column.prop], row.currency || form.currency) }}
@@ -499,6 +491,11 @@
              <span v-else>{{ displayValue(row[column.prop]) }}</span>
            </template>
          </el-table-column>
+          <el-table-column label="操作" width="100" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-link type="primary" @click="openAdjustChangeRecord(row)">查看</el-link>
+            </template>
+          </el-table-column>
        </el-table>
      </section-card>
    </div>
@@ -824,25 +821,28 @@
        min-width="160"
        align="center"
      >
-        <template #default="{ row }">
-          <div class="pre-settlement-editor__billing-rule-cell">
-            <el-input-number
-              v-model="row.feeItems[feeItem]"
-              :min="0"
-              :precision="2"
-              :controls="false"
-              :disabled="adjustDialog.readonly"
-              @change="recalculateAdjustRow(row, feeItem)"
-            />
+        <template #header>
+          <span class="pre-settlement-editor__billing-rule-cell">
+            <span>{{ feeItem }}</span>
            <el-icon
-              v-if="hasBillingRule(row)"
+              v-if="showAdjustFeeRuleIcon(feeItem)"
              class="pre-settlement-editor__billing-rule-icon"
              title="查看计费规则详情"
-              @click="openBillingRuleInfo(row, feeItem)"
+              @click.stop="openAdjustFeeRule(feeItem)"
            >
              <InfoFilled />
            </el-icon>
-          </div>
+          </span>
+        </template>
+        <template #default="{ row }">
+          <el-input-number
+            v-model="row.feeItems[feeItem]"
+            :min="0"
+            :precision="2"
+            :controls="false"
+            :disabled="adjustDialog.readonly"
+            @change="recalculateAdjustRow(row, feeItem)"
+          />
        </template>
      </el-table-column>
      <el-table-column label="结算金额（含税）" min-width="170" align="center">
@@ -1522,7 +1522,9 @@ export default {
          availableWriteOffAmount: Number(row.availableWriteOffAmount || 0),
          createTime: row.paymentCreateTime || row.createTime,
        }));
-        this.changeRecords = detail.changeRecords || [];
+        this.changeRecords = (detail.changeRecords || []).filter(
+          row => row.changeContent !== '预结算审批通过'
+        );
        this.attachments = this.parseAttachments(detail.attachmentsJson);
        this.sortAttachments();
        this.selectedAttachmentRows = [];
@@ -2307,6 +2309,17 @@ export default {
    },
    formatAdjustChangeValue(value) {
      if (value === undefined || value === null || value === '') return '空';
+      if (Array.isArray(value)) {
+        if (!value.length) return '空';
+        return value
+          .map(item => {
+            if (!item || typeof item !== 'object') return String(item);
+            return Object.entries(item)
+              .map(([key, itemValue]) => `${key}：${this.formatAdjustChangeValue(itemValue)}`)
+              .join('，');
+          })
+          .join('\n');
+      }
      if (typeof value === 'object') return JSON.stringify(value);
      return String(value);
    },
@@ -2369,12 +2382,60 @@ export default {
    ruleFeeName(rule = {}) {
      return String(rule.feeItem || rule.feeItemName || rule.name || '').trim();
    },
+    isHandlingFeeItem(name) {
+      return String(name || '').includes('装卸');
+    },
    feeNamesMatch(left, right) {
      const source = String(left || '').trim();
      const target = String(right || '').trim();
      if (!source || !target) return false;
      if (source === target) return true;
-      return this.isFreightFeeItem(source) && this.isFreightFeeItem(target);
+      if (this.isFreightFeeItem(source) && this.isFreightFeeItem(target)) return true;
+      return this.isHandlingFeeItem(source) && this.isHandlingFeeItem(target);
+    },
+    detailColumnFeeName(item = {}) {
+      if (item.kind === 'fee') return item.name || '';
+      if (item.column?.prop === 'freightAmount') return '运输费';
+      return '';
+    },
+    showDetailColumnRuleIcon(item) {
+      const feeName = this.detailColumnFeeName(item);
+      if (!feeName) return false;
+      return this.details.some(row => this.rowHasNamedBillingRule(row, feeName));
+    },
+    openDetailColumnRule(item) {
+      const feeName = this.detailColumnFeeName(item);
+      const row =
+        this.details.find(detail => this.rowHasNamedBillingRule(detail, feeName)) ||
+        this.details[0];
+      if (row) this.openDetailBillingRule(row, feeName);
+    },
+    showAdjustFeeRuleIcon(feeName) {
+      return (this.adjustRows || []).some(row => this.sourceHasNamedBillingRule(row, feeName));
+    },
+    openAdjustFeeRule(feeName) {
+      const row =
+        (this.adjustRows || []).find(item => this.sourceHasNamedBillingRule(item, feeName)) ||
+        this.adjustRows[0];
+      if (row) this.openBillingRuleInfo(row, feeName);
+    },
+    rowHasNamedBillingRule(row, feeName) {
+      return [row, ...this.detailFeeRows(row)].some(source =>
+        this.sourceHasNamedBillingRule(source, feeName)
+      );
+    },
+    sourceHasNamedBillingRule(source = {}, feeName) {
+      const rules = [
+        ...this.collectBillingRules(source),
+        ...(Array.isArray(source.billingRule?.rules) ? source.billingRule.rules : []),
+      ];
+      if (rules.some(rule => this.feeNamesMatch(this.ruleFeeName(rule), feeName))) return true;
+      if (!this.hasBillingRule(source)) return false;
+      const named = String(
+        source.billingFeeItem || source.feeItem || this.ruleFeeName(source.billingRule) || ''
+      ).trim();
+      if (!named) return true;
+      return this.feeNamesMatch(named, feeName);
    },
    collectBillingRules(row = {}) {
      const source = row || {};
@@ -135,7 +135,7 @@
            </el-form-item>
          </el-col>
          <el-col :span="24">
-            <el-form-item label="结算单上传" prop="file">
+            <el-form-item v-if="!readonly" label="结算单上传" prop="file">
              <div class="settlement-import-create__upload">
                <el-upload
                  ref="uploadRef"
@@ -143,13 +143,13 @@
                  accept=".xls,.xlsx"
                  :auto-upload="false"
                  :limit="1"
-                  :disabled="readonly || !formReady"
+                  :disabled="!formReady"
                  :file-list="files"
                  :on-change="onFileChange"
                  :on-exceed="onFileExceed"
                  :on-remove="onFileRemove"
                >
-                  <el-button type="primary" :disabled="readonly || !formReady">上传 Excel</el-button>
+                  <el-button type="primary" :disabled="!formReady">上传 Excel</el-button>
                </el-upload>
                <el-link type="primary" :underline="false" @click="downloadTemplate">
                  下载模板
@@ -298,15 +298,10 @@
      </el-table>
    </section>

-    <div class="settlement-import-create__footer">
+    <div v-if="!readonly" class="settlement-import-create__footer">
      <el-button @click="goBack">取消</el-button>
-      <el-button v-if="!readonly" :loading="draftLoading" @click="saveDraft">保存草稿</el-button>
-      <el-button
-        v-if="!readonly"
-        type="primary"
-        :loading="confirmLoading"
-        @click="confirmImport"
-      >
+      <el-button :loading="draftLoading" @click="saveDraft">保存草稿</el-button>
+      <el-button type="primary" :loading="confirmLoading" @click="confirmImport">
        确认导入
      </el-button>
    </div>
@@ -577,6 +572,8 @@ const syncEditedText = (row, column, value) => {
  if (column.prop !== 'vehicleNo') return;
  applyVehicleNo(row, value);
 };
+
+const feeColumn = name => ({
  prop: name,
  label: name,
  editor: 'number',
@@ -607,6 +604,38 @@ const dedupeColumns = columns => {
  });
 };

+const settlementAmountColumn = {
+  prop: 'settlementAmount',
+  label: '结算金额',
+  editor: 'number',
+  minWidth: 120,
+};
+
+/** 模板已去掉结算金额；明细仍展示，并插在费用项之后、日期列之前 */
+const ensureSettlementAmountColumn = columns => {
+  if (columns.some(column => column.prop === 'settlementAmount')) {
+    return columns;
+  }
+  const result = [...columns];
+  let insertAt = result.findIndex(column =>
+    ['actualStartDate', 'actualEndDate', 'planStartDate', 'planEndDate', 'remark', 'waybillIdentifier'].includes(
+      column.prop
+    )
+  );
+  if (insertAt < 0) {
+    const lastFeeIndex = [...result].map((column, index) => (column.isFeeItem ? index : -1)).filter(index => index >= 0).pop();
+    const transportFeeIndex = result.findIndex(column => column.prop === 'transportFee');
+    insertAt =
+      lastFeeIndex !== undefined
+        ? lastFeeIndex + 1
+        : transportFeeIndex >= 0
+          ? transportFeeIndex + 1
+          : result.length;
+  }
+  result.splice(insertAt, 0, { ...settlementAmountColumn });
+  return result;
+};
+
 const detailColumns = computed(() => {
  const historyColumns =
    form.waybillMode === 'history'
@@ -622,16 +651,13 @@ const detailColumns = computed(() => {
  const fallback = [
    ...columnsBeforeFee,
    ...feeItemNames.value.map(name => feeColumn(name)),
-    {
-      prop: 'settlementAmount',
-      label: '结算金额',
-      editor: 'number',
-      minWidth: 120,
-    },
+    { ...settlementAmountColumn },
    ...columnsAfterFee,
  ];
  const uploaded = parsedHeaders.value.map(columnFromHeader).filter(Boolean);
-  const columns = dedupeColumns(uploaded.length ? uploaded : fallback);
+  const columns = ensureSettlementAmountColumn(
+    dedupeColumns(uploaded.length ? uploaded : fallback)
+  );
  return [...historyColumns, ...columns];
 });

@@ -720,6 +746,7 @@ const formatCell = (row, column) => {
  return value ?? '';
 };

+/** 导入解析后自动合计结算金额；编辑运输费/费用项时不再回算 */
 const recalcSettlementAmount = row => {
  const transportFee = toNumber(row.transportFee ?? row.freight);
  row.transportFee = transportFee;
@@ -738,6 +765,18 @@ const recalcSettlementAmount = row => {
  row.settlementAmount = settlementAmount;
  row.otherFeeTotal = Number(feeSum.toFixed(2));
  row.freightTotal = settlementAmount;
+  row['运费合计'] = settlementAmount;
+};
+
+const syncOtherFeeTotal = row => {
+  if (!row.feeItems || typeof row.feeItems !== 'object') {
+    row.feeItems = {};
+  }
+  let feeSum = 0;
+  feeItemNames.value.forEach(name => {
+    feeSum += toNumber(row.feeItems[name] ?? row[name]);
+  });
+  row.otherFeeTotal = Number(feeSum.toFixed(2));
 };

 const updateNumberCell = (row, column, value) => {
@@ -747,17 +786,16 @@ const updateNumberCell = (row, column, value) => {
      if (!row.feeItems) row.feeItems = {};
      row.feeItems[column.prop] = '';
      row[column.prop] = '';
-    } else {
-      row[column.prop] = column.editor === 'optionalNumber' ? '' : '';
-      if (column.prop === 'transportFee') row.freight = '';
-      if (column.prop === 'unitPrice') row.transportUnitPrice = '';
-    }
-    if (column.prop === 'settlementAmount') {
-      row.settlementAmount = '';
-      row.freightTotal = '';
+      syncOtherFeeTotal(row);
      return;
    }
-    recalcSettlementAmount(row);
+    row[column.prop] = '';
+    if (column.prop === 'transportFee') row.freight = '';
+    if (column.prop === 'unitPrice') row.transportUnitPrice = '';
+    if (column.prop === 'settlementAmount') {
+      row.freightTotal = '';
+      row['运费合计'] = '';
+    }
    return;
  }
  const [integer = '', decimal = ''] = raw.replace(/[^\d.]/g, '').split('.');
@@ -767,21 +805,20 @@ const updateNumberCell = (row, column, value) => {
    if (!row.feeItems) row.feeItems = {};
    row.feeItems[column.prop] = normalized;
    row[column.prop] = normalized;
-  } else {
-    row[column.prop] = normalized;
-    if (column.prop === 'transportFee') {
-      row.freight = normalized;
-    }
-    if (column.prop === 'unitPrice') {
-      row.transportUnitPrice = normalized;
-    }
-    if (column.prop === 'settlementAmount') {
-      row.freightTotal = normalized;
-      row['运费合计'] = normalized;
-      return;
-    }
+    syncOtherFeeTotal(row);
+    return;
+  }
+  row[column.prop] = normalized;
+  if (column.prop === 'transportFee') {
+    row.freight = normalized;
+  }
+  if (column.prop === 'unitPrice') {
+    row.transportUnitPrice = normalized;
+  }
+  if (column.prop === 'settlementAmount') {
+    row.freightTotal = normalized;
+    row['运费合计'] = normalized;
  }
-  recalcSettlementAmount(row);
 };

 const importFieldText = value => String(value ?? '').trim();
@@ -857,11 +894,8 @@ const normalizeParsedRow = (item, index) => {
  applyVehicleNo(row, vehicleNo);
  row.transportUnitPrice = row.unitPrice;
  row.freight = row.transportFee;
-  if (row.settlementAmount === '' || row.settlementAmount === null || row.settlementAmount === undefined) {
-    recalcSettlementAmount(row);
-  } else {
-    row.freightTotal = row.settlementAmount;
-  }
+  // 模板无结算金额列：导入后按运输费+费用项自动合计
+  recalcSettlementAmount(row);
  return row;
 };

@@ -1344,22 +1378,18 @@ const confirmImport = async () => {

 const loadTransportTypeOptions = async () => {
  try {
+    // 运输方式取业务字典 transport_type 的字典名称（dictValue），不写死枚举
    const response = await getDictionary({ code: 'transport_type' });
    const list = unwrapData(response) || [];
    transportTypeOptions.value = (Array.isArray(list) ? list : [])
      .map(item => {
-        const label = item.dictValue || item.label || item.name || '';
-        const value = item.dictValue || item.dictKey || item.value || label;
-        return label ? { label, value } : null;
+        const label = String(item.dictValue || item.label || item.name || '').trim();
+        if (!label || String(item.dictKey) === '-1') return null;
+        return { label, value: label };
      })
      .filter(Boolean);
  } catch (error) {
-    transportTypeOptions.value = [
-      { label: '公路运输', value: '公路运输' },
-      { label: '铁路运输', value: '铁路运输' },
-      { label: '水路运输', value: '水路运输' },
-      { label: '航空运输', value: '航空运输' },
-    ];
+    transportTypeOptions.value = [];
  }
 };

@@ -1411,12 +1441,18 @@ const loadDetail = async id => {
  const detailRows = Array.isArray(detail.rows) ? detail.rows : [];
  rows.value = detailRows.map((item, index) => normalizeParsedRow(item, index));
  refreshDuplicateFlags();
-  readonly.value = detail.importStatus && detail.importStatus !== 'draft';
+  // 查看模式始终只读；编辑时仅草稿可改，已完成/已作废强制只读
+  readonly.value =
+    route.query.mode === 'view' ||
+    Boolean(detail.importStatus && detail.importStatus !== 'draft');
 };

 const initPage = async () => {
  await loadOptions();
  const id = route.query.id;
+  if (route.query.mode === 'view') {
+    readonly.value = true;
+  }
  if (id) {
    await loadDetail(id);
    return;
@@ -1,89 +1,39 @@
 <template>
  <basic-container class="formal-page">
-    <section v-show="searchVisible" class="formal-page__search">
-      <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
-        <div class="formal-page__search-grid">
-          <el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
-            <el-date-picker
-              v-if="field.type === 'daterange'"
-              v-model="query[field.prop]"
-              type="daterange"
-              value-format="YYYY-MM-DD"
-              format="YYYY-MM-DD"
-              range-separator="~"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            />
-            <el-select
-              v-else-if="field.type === 'select'"
-              v-model="query[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="query[field.prop]"
-              :options="organizationTreeOptions"
-              :props="organizationCascaderProps"
-              clearable
-              filterable
-              style="width: 100%"
-              placeholder="请选择"
-            />
-            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
-          </el-form-item>
-          <div class="formal-page__search-actions">
-            <el-button type="primary" @click="handleSearch">查询</el-button>
-            <el-button @click="resetSearch">重置</el-button>
-            <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
-              {{ searchExpanded ? '收起' : '展开' }}
-            </el-button>
-          </div>
-        </div>
-      </el-form>
-    </section>
-
-    <section class="formal-page__table-panel">
-      <el-tabs
-        v-if="!lockedSettlementType"
-        type="border-card"
-        v-model="activeSettlementType"
-        @tab-change="handleSettlementTypeChange"
-      >
-        <el-tab-pane label="应付" name="payable">
-          <formal-settlement-table-panel
-            :key="'payable'"
-            v-bind="tablePanelProps"
-            v-on="tablePanelListeners"
-          />
-        </el-tab-pane>
-        <el-tab-pane label="应收" name="receivable">
-          <formal-settlement-table-panel
-            :key="'receivable'"
-            v-bind="tablePanelProps"
-            v-on="tablePanelListeners"
-          />
-        </el-tab-pane>
-      </el-tabs>
-      <formal-settlement-table-panel
-        v-else
-        :key="activeSettlementType"
-        v-bind="tablePanelProps"
-        v-on="tablePanelListeners"
-      />
-    </section>
+    <el-tabs
+      v-if="!lockedSettlementType"
+      type="border-card"
+      v-model="activeSettlementType"
+      @tab-change="handleSettlementTypeChange"
+    >
+      <el-tab-pane label="应付" name="payable">
+        <formal-settlement-table-panel
+          v-if="activeSettlementType === 'payable'"
+          key="payable"
+          v-bind="tablePanelProps"
+          v-on="tablePanelListeners"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="应收" name="receivable">
+        <formal-settlement-table-panel
+          v-if="activeSettlementType === 'receivable'"
+          key="receivable"
+          v-bind="tablePanelProps"
+          v-on="tablePanelListeners"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <formal-settlement-table-panel
+      v-else
+      key="locked"
+      v-bind="tablePanelProps"
+      v-on="tablePanelListeners"
+    />
    <formal-settlement-editor
      v-model="editor.visible"
      :record-id="editor.id"
      :readonly="editor.readonly"
-      @success="loadTable"
+      @success="onLoad(page)"
    />
    <el-dialog
      v-model="paymentDialog.visible"
@@ -152,7 +102,6 @@
 </template>

 <script>
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import { createSettlementTransfer } from '@/utils/settlement-transfer';
 import {
@@ -164,33 +113,13 @@ import { isAdministrator } from '@/utils/auth';
 import { downloadFile } from '@/utils/util';
 import * as api from '@/api/settlement/formalSettlement';
 import * as paymentApi from '@/api/payment/paymentApplication';
-import {
-  invoiceStatusName,
-  formalSettlementSearchFields,
-  paymentStatusOptions,
-} from '@/option/settlement/formalSettlementSearch';
+import { formalSettlementOption } from '@/option/settlement/formalSettlement';
 import organizationSearch from '@/mixins/organization-search';
-import { formalSettlementTableColumns } from '@/option/settlement/formalSettlementTable';
 import FormalSettlementEditor from './components/formal-settlement-editor.vue';
 import FormalSettlementTablePanel from './components/formal-settlement-table-panel.vue';
 import { submitMkApprovalFlow, loadMkEnabled } from '@/utils/mk-approval';
 import { getMKApprovalUrl } from '@/api/system/business-process';

-const emptyQuery = () => ({
-  formalSettlementNo: '',
-  preSettlementNo: '',
-  projectName: '',
-  deptName: [],
-  contractNo: '',
-  payerName: '',
-  payeeName: '',
-  invoiceStatus: '',
-  paymentStatus: '',
-  approvalStatus: '',
-  kingdeeSyncStatus: '',
-  createDateRange: [],
-});
-
 export default {
  name: 'FormalSettlement',
  components: { FormalSettlementEditor, FormalSettlementTablePanel },
@@ -205,19 +134,14 @@ export default {
  },
  data() {
    return {
-      ArrowDown,
-      ArrowUp,
-      query: emptyQuery(),
-      searchExpanded: false,
-      searchVisible: true,
+      option: formalSettlementOption(),
+      query: {},
      activeSettlementType: 'payable',
-      searchFields: formalSettlementSearchFields,
-      columns: formalSettlementTableColumns,
      rows: [],
      selection: [],
      loading: false,
      syncLoading: false,
-      page: { current: 1, size: 10, total: 0 },
+      page: { currentPage: 1, pageSize: 10, pageSizes: [10, 20, 50, 100], total: 0 },
      editor: { visible: false, id: null, readonly: false },
      paymentDialog: {
        visible: false,
@@ -248,14 +172,13 @@ export default {
    },
    tablePanelProps() {
      return {
+        option: this.option,
        rows: this.rows,
-        columns: this.columns,
        loading: this.loading,
        page: this.page,
        hasPermission: this.hasPermissionFn,
        syncLoading: this.syncLoading,
        mkEnabled: this.mkEnabled,
-        searchVisible: this.searchVisible,
        showPaymentAction: this.activeSettlementType === 'payable',
        billLabel: this.billLabel,
      };
@@ -266,20 +189,16 @@ export default {
        payment: this.openPaymentDialog,
        sync: this.handleSync,
        export: this.handleExport,
-        refresh: this.loadTable,
-        'page-change': this.onPageChange,
+        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;
        },
-        'update:searchVisible': visible => {
-          this.searchVisible = visible;
-        },
      };
    },
-    visibleSearchFields() {
-      return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
-    },
    paymentAvailable() {
      return this.paymentRemaining(this.paymentDialog.row);
    },
@@ -293,6 +212,10 @@ export default {
        }
      },
    },
+    activeSettlementType() {
+      // 切换结算类型后由新挂载的 avue-crud 触发 on-load，此处只重置分页，避免重复请求
+      this.page.currentPage = 1;
+    },
    '$route.query.detailNo'(detailNo) {
      if (detailNo) this.openRouteDetail(detailNo);
    },
@@ -300,13 +223,9 @@ export default {
  created() {
    // 标签机制按 fullPath 缓存同页多实例：仅当前路由实例应响应 detailNo 跳转，防止缓存旧实例也弹窗
    this.ownFullPath = this.$route.fullPath;
+    this.loadOrganizationOptions();
  },
  mounted() {
-    if (this.lockedSettlementType === 'payable' || this.lockedSettlementType === 'receivable') {
-      this.activeSettlementType = this.lockedSettlementType;
-    }
-    this.loadOrganizationOptions();
-    this.loadTable();
    this.openRouteDetail();
    loadMkEnabled()
      .then(enabled => {
@@ -319,18 +238,18 @@ export default {
  activated() {
    if (sessionStorage.getItem('formal-settlement-list-refresh') === '1') {
      sessionStorage.removeItem('formal-settlement-list-refresh');
-      this.loadTable();
+      this.onLoad(this.page);
    }
  },
  methods: {
    hasPermission(actionOrCode) {
      return this.hasPermissionFn(actionOrCode);
    },
-    async loadTable() {
+    async onLoad(page) {
      this.loading = true;
      try {
        const params = this.buildQueryParams();
-        const response = await api.getList(this.page.current, this.page.size, params);
+        const response = await api.getList(page.currentPage, page.pageSize, params);
        const data = this.unwrapData(response);
        this.rows = data.records || [];
        this.page.total = data.total || 0;
@@ -338,25 +257,24 @@ export default {
        this.loading = false;
      }
    },
-    handleSearch() {
-      this.page.current = 1;
-      this.loadTable();
+    searchChange(params, done) {
+      // 所属组织级联返回 id 路径，转成组织名称传给后端
+      this.normalizeOrganizationSearch(params, 'deptName');
+      const range = params.createDateRange || [];
+      delete params.createDateRange;
+      this.query = {
+        ...params,
+        createStartDate: range[0] || '',
+        createEndDate: range[1] || '',
+      };
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+      done();
    },
-    resetSearch() {
-      this.query = emptyQuery();
-      this.handleSearch();
-    },
-    toggleSearch() {
-      this.searchExpanded = !this.searchExpanded;
-    },
-    handleSizeChange() {
-      this.page.current = 1;
-      this.loadTable();
-    },
-    onPageChange({ current, size }) {
-      this.page.current = current;
-      this.page.size = size;
-      this.loadTable();
+    searchReset() {
+      this.query = {};
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
    },
    onAction({ type, row }) {
      const handlers = {
@@ -418,7 +336,7 @@ export default {
      await this.$confirm(`确认删除该${this.billLabel}草稿？`, '提示', { type: 'warning' });
      await api.remove(row.id);
      this.$message.success('删除成功');
-      this.loadTable();
+      this.onLoad(this.page);
    },
    async handleSubmit(row) {
      await this.$confirm('提交后来源预付结算单将保持锁定，确认提交？', '提示', { type: 'warning' });
@@ -432,7 +350,7 @@ export default {
        mkEnabled: this.mkEnabled,
      });
      this.$message.success('提交成功');
-      this.loadTable();
+      this.onLoad(this.page);
    },
    handleMkAudit(row) {
      if (!row?.id) {
@@ -473,6 +391,7 @@ export default {
      } finally {
        this.loading = false;
      }
+      this.onLoad(this.page);
    },
    async handleReturn(row) {
      const { value } = await this.$prompt('请输入驳回原因', '审批驳回', {
@@ -480,7 +399,7 @@ export default {
      });
      await api.returnBill({ id: row.id, reason: value });
      this.$message.success('已驳回');
-      this.loadTable();
+      this.onLoad(this.page);
    },
    async handleVoid(row) {
      const { value } = await this.$prompt('请输入作废原因', `作废${this.billLabel}`, {
@@ -488,7 +407,7 @@ export default {
      });
      await api.voidBill({ id: row.id, reason: value });
      this.$message.success('已作废');
-      this.loadTable();
+      this.onLoad(this.page);
    },
    selectedOne(action) {
      if (this.selection.length !== 1) {
@@ -518,7 +437,7 @@ export default {
            lastFailReason = String(error?.message || error || '未知错误').trim() || '未知错误';
          }
        }
-        await this.loadTable();
+        await this.onLoad(this.page);
        if (rows.length === 1) {
          if (failCount) {
            await this.$alert(`同步失败，${lastFailReason}`, '同步结果', {
@@ -642,7 +561,7 @@ export default {
        );
        this.paymentDialog.visible = false;
        this.selection = [];
-        this.loadTable();
+        this.onLoad(this.page);
      } finally {
        this.paymentDialog.loading = false;
      }
@@ -692,15 +611,8 @@ export default {
      );
    },
    buildQueryParams() {
-      // 所属组织级联返回 id 路径，转成组织名称传给后端（用副本，避免污染搜索框回显）
-      const params = this.normalizeOrganizationSearch({ ...this.query }, 'deptName');
+      const params = { ...this.query };
      params.settlementType = this.lockedSettlementType || this.activeSettlementType;
-      const range = params.createDateRange || [];
-      delete params.createDateRange;
-      if (range.length === 2) {
-        params.createStartDate = range[0];
-        params.createEndDate = range[1];
-      }
      return params;
    },
    unwrapData(response) {
@@ -708,8 +620,8 @@ export default {
      return body?.data || body;
    },
    handleSettlementTypeChange() {
-      this.page.current = 1;
-      this.loadTable();
+      // 分页重置与数据加载由 activeSettlementType watcher + 新挂载 crud 的 on-load 完成
+      this.selection = [];
    },
    escapeHtml(value) {
      return String(value || '-').replace(
@@ -717,24 +629,6 @@ export default {
        char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char])
      );
    },
-    isEditable(row) {
-      return ['draft', 'returned'].includes(row.approvalStatus);
-    },
-    statusType(status) {
-      return (
-        { approved: 'success', reviewing: 'warning', returned: 'danger', voided: 'info' }[status] ||
-        ''
-      );
-    },
-    invoiceName(value, settlementType) {
-      return invoiceStatusName(value, settlementType);
-    },
-    paymentName(value) {
-      return paymentStatusOptions.find(item => item.value === value)?.label || value || '-';
-    },
-    displayValue(value) {
-      return value === null || value === undefined || value === '' ? '-' : value;
-    },
    formatMoney(value, currency = 'RMB') {
      return `${Number(value || 0).toFixed(2)} ${currency || 'RMB'}`;
    },
@@ -747,62 +641,21 @@ export default {
 </script>

 <style scoped lang="scss">
-.formal-page__search {
-  padding: 12px 12px 4px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-.formal-page__search-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px 24px;
-  align-items: start;
-}
-.formal-page__search :deep(.el-form-item) {
-  margin-bottom: 8px;
-}
-.formal-page__search :deep(.el-form-item__label) {
-  white-space: nowrap;
-}
-.formal-page__search :deep(.el-input),
-.formal-page__search :deep(.el-select),
-.formal-page__search :deep(.el-date-editor) {
-  width: 100%;
-}
-.formal-page__search-actions {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-.formal-page__table-panel {
-  margin-top: 8px;
+.formal-page {
+  :deep(.el-table) {
+    --el-table-border-color: #eff1f7;
+  }
+  :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
+  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
+  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
+    background: #fafafa;
+  }
 }
 .formal-payment-dialog__batch-tip {
  margin-bottom: 12px;
  color: #606266;
 }
-.formal-page :deep(.el-table) {
-  --el-table-border-color: #eff1f7;
-}
-.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
-.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
-.formal-page :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
-  background: #fafafa;
-}
 :deep(.formal-page.basic-container .basic-container__card > .el-card__body) {
  padding: 0;
 }
-@media (max-width: 1200px) {
-  .formal-page__search-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 760px) {
-  .formal-page__search-grid {
-    grid-template-columns: 1fr;
-  }
-}
 </style>
@@ -241,7 +241,12 @@
        <div
          class="settlement-detail-page__detail-panel-body settlement-detail-page__adjust-panel-body"
        >
-          <el-table v-loading="adjustDialog.loading" :data="adjustRows" border>
+          <el-table
+            v-loading="adjustDialog.loading"
+            :data="adjustRows"
+            :max-height="adjustTableMaxHeight"
+            border
+          >
            <el-table-column type="index" label="序号" width="64" align="center" />
            <el-table-column label="来源" width="110" align="center">
              <template #default="{ row }">{{ feeSourceLabel(row.dataSource) }}</template>
@@ -446,36 +451,52 @@
        :model="updateFeeForm"
        :rules="updateFeeRules"
        label-position="right"
-        label-width="auto"
+        label-width="120px"
        class="settlement-detail-page__dialog-form"
      >
        <el-form-item label="更新范围" prop="contractId">
-          <el-input
-            :model-value="updateContractName"
-            class="settlement-detail-page__generate-select"
-            readonly
-            placeholder="请选择合同"
-          >
-            <template #append>
-              <el-button @click="openUpdateContractDialog">选择</el-button>
-            </template>
-          </el-input>
+          <div class="settlement-detail-page__update-fee-field">
+            <el-tooltip
+              :content="updateContractName"
+              :disabled="!updateContractName"
+              placement="top"
+              :show-after="200"
+            >
+              <div class="settlement-detail-page__update-fee-trigger">
+                <el-input
+                  :model-value="updateContractName"
+                  class="settlement-detail-page__update-fee-control"
+                  readonly
+                  placeholder="请选择合同"
+                >
+                  <template #append>
+                    <el-button @click="openUpdateContractDialog">选择</el-button>
+                  </template>
+                </el-input>
+              </div>
+            </el-tooltip>
+          </div>
        </el-form-item>
        <el-form-item label="合同计费方案" prop="billingPlanId">
-          <el-select
-            v-model="updateFeeForm.billingPlanId"
-            clearable
-            filterable
-            :disabled="!updateFeeForm.contractId"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in billingPlanOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
+          <div class="settlement-detail-page__update-fee-field">
+            <el-select
+              v-model="updateFeeForm.billingPlanId"
+              class="settlement-detail-page__update-fee-control"
+              clearable
+              filterable
+              :disabled="!updateFeeForm.contractId"
+              :placeholder="updateFeeForm.contractId ? '请选择' : '请先选择合同'"
+              :title="updateBillingPlanName || undefined"
+            >
+              <el-option
+                v-for="item in billingPlanOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+                :title="item.name"
+              />
+            </el-select>
+          </div>
        </el-form-item>
      </el-form>
      <template #footer>
@@ -1099,6 +1120,8 @@ export default {
      page: { current: 1, size: 10, total: 0 },
      // 底部详情/调整面板打开时压缩主表高度，露出表格滚动条
      listTableHeight: undefined,
+      savedListTableHeight: null,
+      listTableLayoutToken: 0,
      detailDialog: {
        visible: false,
        title: '费用明细',
@@ -1113,6 +1136,8 @@ export default {
        rule: null,
      },
      adjustDialog: { visible: false, loading: false, submitting: false, row: null },
+      // 表头 + 最多 3 行费用 + 横向滚动条，超出后表体上下滚动
+      adjustTableMaxHeight: 40 + 49 * 3 + 16,
      adjustRows: [],
      adjustDynamicFeeColumns: [],
      adjustTextProps: ['specification', 'model', 'billingFactor', 'billingType'],
@@ -1203,6 +1228,14 @@ export default {
      );
      return formatContractOptionLabel(contract);
    },
+    updateBillingPlanName() {
+      const billingPlanId = this.updateFeeForm.billingPlanId;
+      if (!billingPlanId) return '';
+      const plan = this.billingPlanOptions.find(
+        item => String(item.id) === String(billingPlanId)
+      );
+      return plan?.name || '';
+    },
    generateContractCategory() {
      return this.settlementType === 'payable' ? '承运商合同' : '客户合同';
    },
@@ -1306,8 +1339,11 @@ export default {
    '$route.fullPath'() {
      this.openRouteDetail();
    },
-    isBottomPanelOpen() {
-      this.updateListTableHeight();
+    isBottomPanelOpen: {
+      flush: 'post',
+      handler() {
+        this.updateListTableHeight();
+      },
    },
    searchVisible() {
      this.updateListTableHeight();
@@ -1372,36 +1408,62 @@ export default {
    },
    /** 表格和分页撑满剩余可视区域；单据详情展开时贴住详情面板，关闭后恢复 */
    updateListTableHeight() {
+      this.listTableLayoutToken = (this.listTableLayoutToken || 0) + 1;
+      const token = this.listTableLayoutToken;
      this.$nextTick(() => {
-        window.requestAnimationFrame(() => this.applyListTableHeight());
+        window.requestAnimationFrame(() => {
+          if (token !== this.listTableLayoutToken) return;
+          this.applyListTableHeight(token);
+          window.requestAnimationFrame(() => {
+            if (token !== this.listTableLayoutToken) return;
+            this.applyListTableHeight(token);
+          });
+        });
      });
    },
-    applyListTableHeight() {
+    applyListTableHeight(token = this.listTableLayoutToken) {
+      if (token !== this.listTableLayoutToken) return;
      const tableElement = this.$refs.mainTableRef?.$el;
      if (!tableElement) return;
-      const pagination = this.$el?.querySelector?.('.settlement-detail-page__pagination');
+      const pagination = this.$el?.querySelector?.(
+        '.settlement-detail-page__table-panel .settlement-detail-page__pagination'
+      );
      const paginationHeight = pagination?.offsetHeight || 0;
      const tableTop = tableElement.getBoundingClientRect().top;
      const view = this.$el?.closest?.('#avue-view');
      const viewRect = view?.getBoundingClientRect?.();
-      let bottomEdge = viewRect ? viewRect.bottom - 12 : window.innerHeight;
-      if (this.isBottomPanelOpen) {
+      // 用滚动容器的可视高度，避免表格被压矮后按内容底部把高度锁死
+      let bottomEdge = view
+        ? viewRect.top + view.clientHeight - 12
+        : window.innerHeight;
+      const panelOpen = this.isBottomPanelOpen;
+      if (panelOpen) {
+        if (!this.savedListTableHeight) {
+          this.savedListTableHeight = this.listTableHeight || null;
+        }
        const panelRect = document
          .querySelector('.settlement-detail-page__detail-panel')
          ?.getBoundingClientRect?.();
        if (panelRect && panelRect.height > 0) {
-          bottomEdge = panelRect.top;
+          bottomEdge = Math.min(bottomEdge, panelRect.top);
          this.listTableHeightRetry = 0;
        } else if ((this.listTableHeightRetry || 0) < 5) {
          this.listTableHeightRetry = (this.listTableHeightRetry || 0) + 1;
-          window.requestAnimationFrame(() => this.applyListTableHeight());
+          window.requestAnimationFrame(() => this.applyListTableHeight(token));
          return;
        }
      } else {
        this.listTableHeightRetry = 0;
      }
-      const gap = this.isBottomPanelOpen ? 8 : 0;
-      this.listTableHeight = Math.max(180, Math.floor(bottomEdge - tableTop - paginationHeight - gap));
+      const gap = panelOpen ? 8 : 0;
+      let nextHeight = Math.max(180, Math.floor(bottomEdge - tableTop - paginationHeight - gap));
+      if (!panelOpen && this.savedListTableHeight) {
+        if (nextHeight + 24 < this.savedListTableHeight) {
+          nextHeight = this.savedListTableHeight;
+        }
+        this.savedListTableHeight = null;
+      }
+      this.listTableHeight = nextHeight;
      this.$nextTick(() => this.$refs.mainTableRef?.doLayout?.());
    },
    contractCategoryName(value) {
@@ -1834,11 +1896,13 @@ export default {
      this.changeRecordsDialog.visible = false;
      this.billingRuleDialog.visible = false;
      this.billingRuleDialog.rule = null;
+      this.updateListTableHeight();
    },
    closeAdjustPanel() {
      this.clearAdjustCalculations();
      this.adjustDialog.visible = false;
      this.adjustDialog.row = null;
+      this.updateListTableHeight();
    },
    handleTableLink(row, column) {
      if (column.prop === 'waybillNo') {
@@ -2422,7 +2486,8 @@ export default {
        return;
      }
      const options = this.syncBillingPlanOptions(contractId);
-      const selected = options.find(item => item.defaultPlan) || options[0];
+      const defaultOptions = options.filter(item => item.defaultPlan);
+      const selected = defaultOptions[defaultOptions.length - 1] || options[options.length - 1];
      this.updateFeeForm.billingPlanId = selected?.id || '';
    },
    async confirmUpdateFee() {
@@ -3144,11 +3209,37 @@ export default {
    }
  }

+  :deep(.el-form-item__content) {
+    min-width: 0;
+  }
+
+  // 仅作用于外层 tooltip 触发器，排除 el-select 内部下拉用的 .el-select__wrapper
+  // （后者也带 el-tooltip__trigger；若设为 block 会打断 flex，导致「请选择」与箭头叠在左上角）
+  :deep(.el-tooltip__trigger:not(.el-select__wrapper)) {
+    display: block;
+    width: 100%;
+  }
+
  :deep(.el-select) {
    width: 100%;
  }
 }

+.settlement-detail-page__update-fee-field,
+.settlement-detail-page__update-fee-trigger {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+
+.settlement-detail-page__update-fee-control {
+  width: 100%;
+
+  :deep(.el-input-group) {
+    width: 100%;
+  }
+}
+
 .settlement-detail-page__adjust-input {
  width: 100%;
  min-width: 0;
@@ -3296,6 +3387,7 @@ export default {

 .settlement-detail-page__adjust-panel-body {
  padding-top: 16px;
+  overflow: hidden;
 }

 .settlement-detail-page__billing-rule-cell {
@@ -11,7 +11,10 @@ import { useRoute } from 'vue-router';
 import SettlementImportPage from './components/settlement-import-page.vue';

 const route = useRoute();
-const pageTitle = computed(() => (route.query.id ? '编辑导入结算单' : '新增导入结算单'));
+const pageTitle = computed(() => {
+  if (route.query.mode === 'view') return '查看导入结算单';
+  return route.query.id ? '编辑导入结算单' : '新增导入结算单';
+});
 </script>

 <style scoped lang="scss">
@@ -1,224 +1,56 @@
 <template>
  <basic-container class="settlement-import-page">
-    <section v-show="searchVisible" class="settlement-import-page__search">
-      <el-form :model="query" label-position="right" label-width="160px" @submit.prevent>
-        <div class="settlement-import-page__search-grid">
-          <el-form-item v-for="field in visibleSearchFields" :key="field.prop" :label="field.label">
-            <el-select
-              v-if="field.type === 'select'"
-              v-model="query[field.prop]"
-              clearable
-              filterable
-              allow-create
-              default-first-option
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in field.options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <el-input v-else v-model="query[field.prop]" clearable placeholder="请输入" />
-          </el-form-item>
-          <div class="settlement-import-page__search-actions">
-            <el-button type="primary" @click="handleSearch">搜索</el-button>
-            <el-button @click="resetSearch">清空</el-button>
-            <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
-              {{ searchExpanded ? '收起' : '展开' }}
-            </el-button>
-          </div>
-        </div>
-      </el-form>
-    </section>
-
-    <section class="settlement-import-page__table-panel">
-      <div class="settlement-import-page__toolbar">
-        <div class="settlement-import-page__toolbar-left">
-          <el-button
-            v-if="hasPermission('settlement_import_add')"
-            type="primary"
-            @click="openCreate"
-          >
-            新增
-          </el-button>
-          <el-button plain @click="refreshTable">刷新</el-button>
-        </div>
-      </div>
-
-      <el-table v-loading="loading" :data="rows" border class="settlement-import-page__table">
-        <el-table-column type="index" label="序号" width="64" align="center" />
-        <el-table-column prop="batchNo" label="导入批次号" min-width="160">
-          <template #default="{ row }">
-            <el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
-          </template>
-        </el-table-column>
-        <el-table-column prop="importStatusName" label="状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="statusTagType(row.importStatus)" effect="plain">
-              {{ row.importStatusName || importStatusLabel(row.importStatus) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="settlementTypeName" label="导入类型" min-width="100">
-          <template #default="{ row }">
-            {{ row.settlementTypeName || settlementTypeLabel(row.settlementType) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="settlementBillTypeName" label="结算单" min-width="110">
-          <template #default="{ row }">
-            {{ row.settlementBillTypeName || settlementBillTypeLabel(row.settlementBillType) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="projectName" label="项目" min-width="140" show-overflow-tooltip />
-        <el-table-column prop="customerName" label="客户" min-width="140" show-overflow-tooltip />
-        <el-table-column prop="carrierName" label="承运商" min-width="140" show-overflow-tooltip />
-        <el-table-column label="明细行数" width="100" align="center">
-          <template #default="{ row }">
-            {{ row.detailCount ?? row.waybillCount ?? 0 }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" min-width="170" />
-        <el-table-column prop="createUserName" label="创建人" min-width="120">
-          <template #default="{ row }">{{ row.createUserName || '-' }}</template>
-        </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right">
-          <template #default="{ row }">
-            <div class="settlement-import-page__row-actions">
-              <el-link type="primary" @click="openDetail(row)">查看</el-link>
-              <el-link
-                v-if="row.importStatus === 'draft'"
-                type="primary"
-                @click="editDraft(row)"
-              >
-                编辑
-              </el-link>
-              <el-link
-                v-if="row.importStatus === 'draft' && hasPermission('settlement_import_delete')"
-                type="danger"
-                @click="handleDelete(row)"
-              >
-                删除
-              </el-link>
-              <el-link
-                v-if="
-                  row.importStatus === 'completed' && hasPermission('settlement_import_void')
-                "
-                type="danger"
-                @click="openVoid(row)"
-              >
-                作废
-              </el-link>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="settlement-import-page__pagination">
-        <el-pagination
-          background
-          v-model:current-page="page.current"
-          v-model:page-size="page.size"
-          layout="total, sizes, prev, pager, next, jumper"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="page.total"
-          @current-change="loadTable"
-          @size-change="handleSizeChange"
-        />
-      </div>
-    </section>
-
-    <el-dialog
-      v-model="detailVisible"
-      title="导入结算单详情"
-      width="1100px"
-      append-to-body
-      destroy-on-close
-      class="settlement-import-detail-dialog"
+    <avue-crud
+      ref="crud"
+      :option="option"
+      :table-loading="loading"
+      :data="rows"
+      v-model:page="page"
+      @search-change="searchChange"
+      @search-reset="searchReset"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @refresh-change="refreshChange"
+      @on-load="onLoad"
    >
-      <el-descriptions :column="3" border>
-        <el-descriptions-item label="导入批次号">{{ detail.batchNo || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="状态">
-          {{ detail.importStatusName || importStatusLabel(detail.importStatus) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="导入类型">
-          {{ detail.settlementTypeName || settlementTypeLabel(detail.settlementType) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="结算单">
-          {{ detail.settlementBillTypeName || settlementBillTypeLabel(detail.settlementBillType) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="运单类型">
-          {{ detail.waybillModeName || waybillModeLabel(detail.waybillMode) }}
-        </el-descriptions-item>
-        <el-descriptions-item label="明细行数">
-          {{ detail.detailCount ?? detail.waybillCount ?? detailRows.length }}
-        </el-descriptions-item>
-        <el-descriptions-item label="项目">{{ detail.projectName || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="客户">{{ detail.customerName || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="客户合同">
-          {{ detail.customerContractName || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="承运商">{{ detail.carrierName || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="承运商合同">
-          {{ detail.carrierContractName || '-' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="创建人">{{ detail.createUserName || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="创建时间">{{ detail.createTime || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</el-descriptions-item>
-        <el-descriptions-item label="关联结算单" :span="3">
-          <el-link
-            v-if="detail.formalSettlementId"
-            type="primary"
-            @click="goFormalSettlement(detail)"
-          >
-            {{ detail.formalSettlementNo || detail.formalSettlementId }}
-          </el-link>
-          <el-link
-            v-else-if="detail.preSettlementId"
-            type="primary"
-            @click="goPreSettlement(detail)"
-          >
-            {{ detail.preSettlementNo || detail.preSettlementId }}
-          </el-link>
-          <span v-else>-</span>
-        </el-descriptions-item>
-      </el-descriptions>
-
-      <div class="dialog-section-title settlement-import-page__detail-title">导入明细</div>
-      <el-table
-        v-loading="detailLoading"
-        :data="detailRows"
-        border
-        max-height="420"
-        class="settlement-import-page__table"
-      >
-        <el-table-column type="index" label="序号" width="64" align="center" />
-        <el-table-column
-          v-for="column in detailDisplayColumns"
-          :key="column.prop"
-          :prop="column.fee ? undefined : column.prop"
-          :label="column.label"
-          :min-width="column.minWidth || 120"
-          show-overflow-tooltip
-        >
-          <template #default="{ row }">
-            {{ column.fee ? formatFeeAmount(row, column.prop) : formatDetailCell(row, column) }}
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <template #footer>
-        <el-button @click="detailVisible = false">关闭</el-button>
+      <template #menu-left>
        <el-button
-          v-if="detail.importStatus === 'draft'"
+          v-if="hasPermission('settlement_import_add')"
          type="primary"
-          @click="editDraft(detail)"
+          @click="openCreate"
+          >新增</el-button
        >
-          编辑草稿
-        </el-button>
      </template>
-    </el-dialog>
+
+      <template #batchNo="{ row }">
+        <el-link type="primary" @click="openDetail(row)">{{ row.batchNo || '-' }}</el-link>
+      </template>
+
+      <template #importStatusName="{ row }">
+        <el-tag :type="statusTagType(row.importStatus)" effect="plain">{{
+          row.importStatusName || importStatusLabel(row.importStatus)
+        }}</el-tag>
+      </template>
+
+      <template #menu="{ row }">
+        <el-link type="primary" @click="openDetail(row)">查看</el-link>
+        <el-link v-if="row.importStatus === 'draft'" type="primary" @click="editDraft(row)"
+          >编辑</el-link
+        >
+        <el-link
+          v-if="row.importStatus === 'draft' && hasPermission('settlement_import_delete')"
+          type="danger"
+          @click="handleDelete(row)"
+          >删除</el-link
+        >
+        <el-link
+          v-if="row.importStatus === 'completed' && hasPermission('settlement_import_void')"
+          type="danger"
+          @click="openVoid(row)"
+          >作废</el-link
+        >
+      </template>
+    </avue-crud>

    <el-dialog v-model="voidVisible" title="作废导入结算单" width="480px" append-to-body>
      <el-form
@@ -248,31 +80,11 @@
 </template>

 <script>
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+import { h } from 'vue';
+import { ElOption, ElSelect } from 'element-plus';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/settlement/settlementImport';
-
-const emptyQuery = () => ({
-  batchNo: '',
-  settlementType: '',
-  importStatus: '',
-  projectName: '',
-  customerName: '',
-  carrierName: '',
-});
-
-const SETTLEMENT_TYPE_OPTIONS = [
-  { label: '全部', value: '' },
-  { label: '应收', value: 'receivable' },
-  { label: '应付', value: 'payable' },
-];
-
-const IMPORT_STATUS_OPTIONS = [
-  { label: '全部', value: '' },
-  { label: '草稿', value: 'draft' },
-  { label: '已完成', value: 'completed' },
-  { label: '已作废', value: 'voided' },
-];
+import { settlementImportOption, importStatusLabel } from '@/option/settlement/settlementImport';

 const SETTLEMENT_IMPORT_LIST_REFRESH_KEY = 'settlement-import-list-refresh';

@@ -280,20 +92,17 @@ export default {
  name: 'SettlementImport',
  data() {
    return {
-      ArrowDown,
-      ArrowUp,
-      searchVisible: true,
-      searchExpanded: false,
-      loading: false,
-      query: emptyQuery(),
      rows: [],
-      page: { current: 1, size: 10, total: 0 },
+      loading: false,
+      query: {},
+      option: settlementImportOption(),
+      page: {
+        currentPage: 1,
+        pageSize: 10,
+        pageSizes: [10, 20, 50, 100],
+        total: 0,
+      },
      batchNoOptions: [],
-      detailVisible: false,
-      detailLoading: false,
-      detail: {},
-      detailRows: [],
-      detailFeeItemNames: [],
      voidVisible: false,
      voidLoading: false,
      voidForm: { id: null, reason: '' },
@@ -311,84 +120,10 @@ export default {
      const authority = this.userInfo?.authority || '';
      return String(authority).includes('admin');
    },
-    searchFields() {
-      return [
-        {
-          prop: 'batchNo',
-          label: '导入批次号',
-          type: 'select',
-          options: this.batchNoOptions,
-        },
-        {
-          prop: 'importStatus',
-          label: '状态',
-          type: 'select',
-          options: IMPORT_STATUS_OPTIONS,
-        },
-        {
-          prop: 'settlementType',
-          label: '导入类型',
-          type: 'select',
-          options: SETTLEMENT_TYPE_OPTIONS,
-        },
-        { prop: 'projectName', label: '项目', type: 'input' },
-        { prop: 'customerName', label: '客户', type: 'input' },
-        { prop: 'carrierName', label: '承运商', type: 'input' },
-      ];
-    },
-    visibleSearchFields() {
-      return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
-    },
-    detailDisplayColumns() {
-      const before = [
-        { prop: 'originalNo', label: '原始单号', minWidth: 130 },
-        { prop: 'loadingIdentifier', label: '配载标识号', minWidth: 140 },
-        { prop: 'vehicleNo', label: '车牌号/航班号/船号/班列号', minWidth: 190 },
-        { prop: 'transportType', label: '运输方式', minWidth: 120 },
-        { prop: 'driverName', label: '司机/船长姓名', minWidth: 130 },
-        { prop: 'driverPhone', label: '司机/船长手机号', minWidth: 150 },
-        { prop: 'departureAddress', label: '发货地址', minWidth: 160 },
-        { prop: 'departureContact', label: '发货联系人', minWidth: 120 },
-        { prop: 'departurePhone', label: '发货联系人电话', minWidth: 140 },
-        { prop: 'arrivalAddress', label: '到货地址', minWidth: 160 },
-        { prop: 'arrivalContact', label: '收货联系人', minWidth: 120 },
-        { prop: 'arrivalPhone', label: '收货联系人电话', minWidth: 140 },
-        { prop: 'cargoName', label: '货物名称', minWidth: 140 },
-        { prop: 'cargoType', label: '货物类型', minWidth: 120 },
-        { prop: 'packageType', label: '包装', minWidth: 100 },
-        { prop: 'quantity', label: '数量', minWidth: 90 },
-        { prop: 'quantityUnit', label: '数量单位', minWidth: 100 },
-        { prop: 'specification', label: '规格', minWidth: 110 },
-        { prop: 'model', label: '型号', minWidth: 110 },
-        { prop: 'mileage', label: '里程(km)', minWidth: 110 },
-        { prop: 'unitPrice', label: '运输单价', minWidth: 110 },
-        { prop: 'transportFee', label: '运输费', minWidth: 110, money: true },
-      ];
-      const fees = (this.detailFeeItemNames || []).map(name => ({
-        prop: name,
-        label: name,
-        minWidth: 110,
-        fee: true,
-      }));
-      const after = [
-        { prop: 'settlementAmount', label: '结算金额', minWidth: 120, money: true },
-        { prop: 'actualStartDate', label: '实际发货时间', minWidth: 140 },
-        { prop: 'actualEndDate', label: '实际完成时间', minWidth: 140 },
-        { prop: 'planStartDate', label: '预计发货时间', minWidth: 140 },
-        { prop: 'planEndDate', label: '预计完成时间', minWidth: 140 },
-        { prop: 'remark', label: '备注', minWidth: 140 },
-        { prop: 'waybillIdentifier', label: '同一运单标识号', minWidth: 150 },
-      ];
-      const history =
-        this.detail.waybillMode === 'history'
-          ? [{ prop: 'waybillNo', label: '运单号', minWidth: 140 }]
-          : [];
-      return [...history, ...before, ...fees, ...after];
-    },
  },
  created() {
+    this.setBatchNoSearchRender();
    this.loadOptions();
-    this.loadTable();
  },
  activated() {
    this.consumeListRefresh();
@@ -409,137 +144,111 @@ export default {
        return;
      }
      sessionStorage.removeItem(SETTLEMENT_IMPORT_LIST_REFRESH_KEY);
-      this.page.current = 1;
+      this.page.currentPage = 1;
      this.loadOptions();
-      this.loadTable();
+      this.onLoad(this.page);
    },
    hasPermission(code) {
      return this.isAdmin || this.validData(this.permission?.[code], false);
    },
-    importStatusLabel(value) {
-      return (
-        IMPORT_STATUS_OPTIONS.find(item => item.value === value)?.label || value || '-'
-      );
-    },
+    importStatusLabel,
    statusTagType(status) {
      if (status === 'draft') return 'info';
      if (status === 'completed') return 'success';
      if (status === 'voided') return 'danger';
      return '';
    },
-    settlementTypeLabel(value) {
-      return (
-        SETTLEMENT_TYPE_OPTIONS.find(item => item.value === value)?.label || value || '-'
-      );
-    },
-    settlementBillTypeLabel(value) {
-      if (value === 'pre') return '预结算单';
-      return '正式结算单';
-    },
-    waybillModeLabel(value) {
-      if (value === 'history') return '历史运单';
-      return '新运单';
-    },
    unwrapData(response) {
      const body = response?.data || response || {};
      return body?.data !== undefined ? body.data : body;
    },
-    formatDetailCell(row, column) {
-      const value = row?.[column.prop];
-      if (value === null || value === undefined || value === '') return '';
-      if (!column.money) return value;
-      const number = Number(value);
-      return Number.isFinite(number) ? number.toFixed(2) : value;
-    },
-    formatFeeAmount(row, name) {
-      const feeItems = row?.feeItems || {};
-      const value = feeItems[name] ?? row?.[name];
-      if (value === null || value === undefined || value === '') return '';
-      const number = Number(value);
-      return Number.isFinite(number) ? number.toFixed(2) : value;
+    /** 批次号搜索控件：可搜索 + 可手输，选项来自已导入批次 */
+    setBatchNoSearchRender() {
+      const column = this.findColumn(this.option.column, 'batchNo');
+      if (!column) return;
+      column.renderSearch = scope =>
+        h(
+          ElSelect,
+          {
+            modelValue: scope.row?.batchNo ?? '',
+            'onUpdate:modelValue': value => {
+              if (scope.row) scope.row.batchNo = value ?? '';
+            },
+            clearable: true,
+            filterable: true,
+            allowCreate: true,
+            defaultFirstOption: true,
+            placeholder: '请选择',
+            style: 'width: 100%',
+          },
+          () =>
+            this.batchNoOptions.map(item =>
+              h(ElOption, { key: item.value, label: item.label, value: item.value })
+            )
+        );
    },
    async loadOptions() {
      try {
        const response = await api.getOptions();
        const options = this.unwrapData(response) || {};
        const batchNos = Array.isArray(options.batchNos) ? options.batchNos : [];
-        this.batchNoOptions = [
-          { label: '全部', value: '' },
-          ...batchNos.map(item => {
-            if (typeof item === 'string') {
-              return { label: item, value: item };
-            }
-            const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
-            const label = item.name ?? item.label ?? item.batchNo ?? value;
-            return { label: String(label || ''), value: String(value || '') };
-          }),
-        ];
-      } catch (error) {
-        this.batchNoOptions = [{ label: '全部', value: '' }];
-      }
-    },
-    async loadTable() {
-      this.loading = true;
-      try {
-        const response = await api.getList(this.page.current, this.page.size, {
-          batchNo: this.query.batchNo || undefined,
-          settlementType: this.query.settlementType || undefined,
-          importStatus: this.query.importStatus || undefined,
-          projectName: this.query.projectName || undefined,
-          customerName: this.query.customerName || undefined,
-          carrierName: this.query.carrierName || undefined,
+        this.batchNoOptions = batchNos.map(item => {
+          if (typeof item === 'string') {
+            return { label: item, value: item };
+          }
+          const value = item.id ?? item.value ?? item.name ?? item.batchNo ?? '';
+          const label = item.name ?? item.label ?? item.batchNo ?? value;
+          return { label: String(label || ''), value: String(value || '') };
        });
-        const data = this.unwrapData(response) || {};
-        this.rows = data.records || [];
-        this.page.total = Number(data.total || 0);
-      } finally {
-        this.loading = false;
+      } catch (error) {
+        this.batchNoOptions = [];
      }
    },
-    refreshTable() {
+    onLoad(page) {
+      this.loading = true;
+      api
+        .getList(page.currentPage, page.pageSize, { ...this.query })
+        .then(response => {
+          const data = this.unwrapData(response) || {};
+          this.rows = data.records || [];
+          this.page.total = Number(data.total || 0);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    searchChange(params, done) {
+      this.query = { ...params };
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.page.currentPage = 1;
+      this.onLoad(this.page);
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
      this.loadOptions();
-      this.loadTable();
-    },
-    handleSearch() {
-      this.page.current = 1;
-      this.loadTable();
-    },
-    resetSearch() {
-      this.query = emptyQuery();
-      this.handleSearch();
-    },
-    toggleSearch() {
-      this.searchExpanded = !this.searchExpanded;
-    },
-    handleSizeChange() {
-      this.page.current = 1;
-      this.loadTable();
+      this.onLoad(this.page);
    },
    openCreate() {
      this.$router.push({ path: '/settlement/settlement-import/form' });
    },
-    async openDetail(row) {
+    openDetail(row) {
      if (!row?.id) return;
-      this.detailVisible = true;
-      this.detailLoading = true;
-      this.detail = { ...row };
-      this.detailRows = [];
-      this.detailFeeItemNames = [];
-      try {
-        const response = await api.getDetail(row.id);
-        const detail = this.unwrapData(response) || { ...row };
-        this.detail = detail;
-        this.detailRows = Array.isArray(detail.rows) ? detail.rows : [];
-        this.detailFeeItemNames = Array.isArray(detail.feeItemNames) ? detail.feeItemNames : [];
-      } catch (error) {
-        this.detail = { ...row };
-        this.$message.error(error?.message || '加载详情失败');
-      } finally {
-        this.detailLoading = false;
-      }
+      this.$router.push({
+        path: '/settlement/settlement-import/form',
+        query: { id: row.id, mode: 'view' },
+      });
    },
    editDraft(row) {
-      this.detailVisible = false;
      this.$router.push({
        path: '/settlement/settlement-import/form',
        query: { id: row.id },
@@ -553,37 +262,12 @@ export default {
        });
        await api.removeDraft(row.id);
        this.$message.success('删除成功');
-        this.loadTable();
-        this.loadOptions();
+        this.refreshChange();
      } catch (error) {
        if (error === 'cancel' || error === 'close') return;
        this.$message.error(error?.message || '删除失败');
      }
    },
-    goFormalSettlement(row) {
-      if (!row?.formalSettlementId) return;
-      this.detailVisible = false;
-      this.$router.push({
-        path: '/settlement/formal-settlement/form',
-        query: {
-          mode: 'view',
-          id: row.formalSettlementId,
-          name: '正式结算详情',
-        },
-      });
-    },
-    goPreSettlement(row) {
-      if (!row?.preSettlementId) return;
-      this.detailVisible = false;
-      this.$router.push({
-        path: '/settlement/pre-settlement/form',
-        query: {
-          mode: 'view',
-          id: row.preSettlementId,
-          name: '预结算详情',
-        },
-      });
-    },
    openVoid(row) {
      this.voidForm = { id: row.id, reason: '' };
      this.voidVisible = true;
@@ -599,7 +283,7 @@ export default {
        });
        this.$message.success('作废成功');
        this.voidVisible = false;
-        this.loadTable();
+        this.onLoad(this.page);
        this.loadOptions();
      } finally {
        this.voidLoading = false;
@@ -610,118 +294,19 @@ export default {
 </script>

 <style scoped lang="scss">
-.settlement-import-page__search {
-  padding: 12px 12px 4px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.settlement-import-page__search-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px 24px;
-  align-items: start;
-}
-
-.settlement-import-page__search :deep(.el-form-item) {
-  margin-bottom: 8px;
-}
-
-.settlement-import-page__search :deep(.el-form-item__label) {
-  white-space: nowrap;
-}
-
-.settlement-import-page__search :deep(.el-input),
-.settlement-import-page__search :deep(.el-select) {
-  width: 100%;
-}
-
-.settlement-import-page__search-actions {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.settlement-import-page__table-panel {
-  margin-top: 8px;
-  background: #fff;
-}
-
-.settlement-import-page__toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0 0;
-}
-
-.settlement-import-page__toolbar-left {
-  display: flex;
-  gap: 8px;
-}
-
-.settlement-import-page__table {
+.settlement-import-page :deep(.el-table) {
  --el-table-border-color: #eff1f7;
 }

-.settlement-import-page__table :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
-.settlement-import-page__table
+.settlement-import-page :deep(.el-table__body tr:nth-child(even) > td.el-table__cell),
+.settlement-import-page
  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--left),
-.settlement-import-page__table
+.settlement-import-page
  :deep(.el-table__body tr:nth-child(even) > td.el-table-fixed-column--right) {
  background: #fafafa;
 }

-.settlement-import-page__row-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.settlement-import-page__pagination {
-  display: flex;
-  justify-content: flex-end;
-  padding: 12px 0;
-}
-
-.settlement-import-page__detail-title {
-  margin: 16px 0 8px;
-}
-
-.dialog-section-title {
-  position: relative;
-  padding-left: 12px;
-  color: #303133;
-  font-size: 16px;
-  font-weight: 600;
-
-  &::before {
-    position: absolute;
-    top: 2px;
-    left: 0;
-    width: 4px;
-    height: 16px;
-    border-radius: 2px;
-    background: #409eff;
-    content: '';
-  }
-}
-
-.settlement-import-page :deep(.basic-container__card > .el-card__body) {
+:deep(.settlement-import-page.basic-container .basic-container__card > .el-card__body) {
  padding: 0;
 }
-
-@media (max-width: 1200px) {
-  .settlement-import-page__search-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 760px) {
-  .settlement-import-page__search-grid {
-    grid-template-columns: 1fr;
-  }
-}
 </style>