From 039a08a86abebc19494141faaa6dafb754c12136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 21 Aug 2026 14:37:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(settlement):=20=E4=BC=98=E5=8C=96=E2=80=9C?=
 =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E7=BB=93=E7=AE=97=E2=80=9D=E5=92=8C=E2=80=9C?=
 =?UTF-8?q?=E8=BF=90=E8=BE=93=E5=AF=B9=E8=B4=A6=E2=80=9D=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=93=E6=9E=84=E5=8F=8A=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将正式结算页面中的表格及工具栏整体封装为子组件 formal-settlement-table-panel
- 正式结算页通过 tabs 展示应付/应收，分别引入封装表格组件，保证功能完整性和切换时的数据刷新
- 正式结算表格子组件支持行操作、工具栏按钮和分页，提升代码复用和维护性
- 运输对账页面同样改用 transport-reconciliation-table-panel 封装表格与工具栏
- 调整预结算单弹窗“结算汇率”输入框为左对齐，改善字段显示
- 清理有关表格页面的旧样式与冗余代码，确保样式统一
- 修改本地开发服务器端口及代理配置，切换到 2889 端口并更新代理目标地址
---
 .workbuddy/memory/2026-08-21.md               |  16 ++
 src/option/settlement/preSettlementForm.js    |   2 +-
 .../formal-settlement-table-panel.vue         | 216 +++++++++++++++++
 .../components/pre-settlement-editor.vue      |   5 +
 .../transport-reconciliation-table-panel.vue  | 148 +++++++++++
 src/views/settlement/formal-settlement.vue    | 229 +++++-------------
 .../settlement/settlement-adjustment.vue      |   1 -
 .../settlement/transport-reconciliation.vue   | 151 ++++--------
 vite.config.mjs                               |  26 +-
 9 files changed, 504 insertions(+), 290 deletions(-)
 create mode 100644 src/views/settlement/components/formal-settlement-table-panel.vue
 create mode 100644 src/views/settlement/components/transport-reconciliation-table-panel.vue

diff --git a/.workbuddy/memory/2026-08-21.md b/.workbuddy/memory/2026-08-21.md
index 7b41714..0f3107f 100644
--- a/.workbuddy/memory/2026-08-21.md
+++ b/.workbuddy/memory/2026-08-21.md
@@ -90,3 +90,19 @@
   2. 页面级表格样式 `.settlement-detail-page__table, .settlement-detail-page :deep(.el-table)` 的 `th.el-table__cell` 增加 `text-align: center !important;`，统一所有表头居中（覆盖金额列 `align: right` 导致的表头右偏）。
   3. 新增 `.settlement-detail-page__adjust-table` 样式块：`.el-input-number`、`.el-input`、`.el-select` 全部 `width: 100% !important;`，使控件撑满单元格不被截断；`el-input-number` 内部输入保持右对齐。
 - 验证：Vite 2889 编译通过（HTTP 200），HMR 生效。待用户在 2889 刷新核对调整弹窗输入框是否完整显示、表头是否全部居中。
+
+## formal-settlement：把表格放进 tabs
+- 需求：`/settlement/formal-settlement` 原本 `el-tabs`(应付/应收) 是空的 type 切换器，表格+工具栏在 tabs 外面；要求把表格放进 tabs 内。
+- 改动：
+  1. 新建 `src/views/settlement/components/formal-settlement-table-panel.vue`：把工具栏(新增/付款申请/同步金蝶/打印结算单/导出 + 刷新) + `el-table` + 分页整体抽成子组件；props 收 `rows/columns/loading/page/hasPermission`，emits `create/payment/sync/export/refresh/page-change/update:selection/action`；行操作(查看/编辑/删除/提交/通过/驳回/作废)经 `rowActions(row)` 计算可见项后 emit `action {type,row}`；工具栏"打印"经 `emitSingle('print')` 取选中单行后 emit action（与父 `selectedOne` 行为一致）。
+  2. `src/views/settlement/formal-settlement.vue`：删除原 toolbar+table+pagination 块与对应 scoped 样式(`__toolbar/__toolbar-right/__links/__pagination`)，在 `el-tabs` 两个 `el-tab-pane` 内各放一个 `<formal-settlement-table-panel>`（DRY，共用同一组件）；新增 `handlePageChange({current,size})`、`handleAction({type,row})` 分发行操作；`handlePrint(row)` 改为接收行参数（不再用 selectedOne）；删除无用 `handleSizeChange`。
+- 验证：Vite build 通过(EXIT=0)，无编译错误。待用户在 2889 刷新核对：应付/应收两个 tab 各自带完整表格与工具栏、切换 tab 触发 reload。
+
+## 预结算单结算汇率输入框居左
+- 需求：`/settlement/pre-settlement` 弹窗中「结算汇率」字段（el-input-number）默认居中，要求改为居左。
+- 改动：
+  1. `src/option/settlement/preSettlementForm.js`：`exchangeRate` 字段新增 `class: 'exchange-rate-input'`。
+  2. `src/views/settlement/components/pre-settlement-editor.vue`：
+     - `el-input-number` 上绑定 `:class="field.class"`。
+     - scoped style 的 `&__form` 内增加 `:deep(.exchange-rate-input .el-input__inner) { text-align: left; }`。
+- 影响：仅针对「结算汇率」字段，不改动其他数字输入框对齐方式。
diff --git a/src/option/settlement/preSettlementForm.js b/src/option/settlement/preSettlementForm.js
index cc19b5c..cace25d 100644
--- a/src/option/settlement/preSettlementForm.js
+++ b/src/option/settlement/preSettlementForm.js
@@ -13,7 +13,7 @@ export const preSettlementFormFields = [
   { label: '结算类型', prop: 'settlementType', readonly: true },
   { label: '结算金额', prop: 'settlementAmount', readonly: true, money: true },
   { label: '汇率日期', prop: 'exchangeRateDate', type: 'date' },
-  { label: '结算汇率', prop: 'exchangeRate', type: 'number' },
+  { label: '结算汇率', prop: 'exchangeRate', type: 'number', class: 'exchange-rate-input' },
   { label: '本位币合计', prop: 'localSettlementAmount', readonly: true, money: true },
   { label: '创建人', prop: 'createUserName', readonly: true },
   { label: '创建日期', prop: 'createTime', readonly: true },
diff --git a/src/views/settlement/components/formal-settlement-table-panel.vue b/src/views/settlement/components/formal-settlement-table-panel.vue
new file mode 100644
index 0000000..04042e2
--- /dev/null
+++ b/src/views/settlement/components/formal-settlement-table-panel.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="fs-table-panel">
+    <div class="fs-table-panel__toolbar">
+      <div>
+        <el-button
+          v-if="hasPermission('formal_settlement_add')"
+          type="primary"
+          @click="$emit('create')"
+          >新增</el-button
+        >
+        <el-button
+          v-if="hasPermission('formal_settlement_payment')"
+          type="primary"
+          plain
+          disabled
+          @click="$emit('payment')"
+          >付款申请</el-button
+        >
+        <el-button
+          v-if="hasPermission('formal_settlement_sync')"
+          type="primary"
+          plain
+          disabled
+          @click="$emit('sync')"
+          >同步金蝶</el-button
+        >
+        <el-button
+          v-if="hasPermission('formal_settlement_print')"
+          type="primary"
+          plain
+          @click="emitSingle('print')"
+          >打印结算单</el-button
+        >
+        <el-button
+          v-if="hasPermission('formal_settlement_export')"
+          type="primary"
+          plain
+          @click="$emit('export')"
+          >导出</el-button
+        >
+      </div>
+      <div class="fs-table-panel__toolbar-right">
+        <el-tooltip content="刷新" placement="top">
+          <el-button :icon="Refresh" text @click="$emit('refresh')" />
+        </el-tooltip>
+      </div>
+    </div>
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="52" fixed="left" align="center" />
+      <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
+      <el-table-column
+        v-for="column in columns"
+        :key="column.prop"
+        v-bind="column"
+        align="center"
+        show-overflow-tooltip
+      >
+        <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)">{{
+            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'">{{
+            invoiceName(row.invoiceStatus)
+          }}</span>
+          <span v-else-if="column.prop === 'paymentStatusName'">{{
+            paymentName(row.paymentStatus)
+          }}</span>
+          <span v-else>{{ displayValue(row[column.prop]) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" 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>
+</template>
+
+<script>
+import { Refresh } from '@element-plus/icons-vue';
+import {
+  invoiceStatusOptions,
+  paymentStatusOptions,
+} from '@/option/settlement/formalSettlementSearch';
+
+export default {
+  name: 'FormalSettlementTablePanel',
+  props: {
+    rows: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    loading: { type: Boolean, default: false },
+    page: { type: Object, required: true },
+    hasPermission: { type: Function, required: true },
+  },
+  emits: ['create', 'payment', 'sync', 'print', 'export', 'refresh', 'page-change', 'action'],
+  data() {
+    return {
+      Refresh,
+      selection: [],
+    };
+  },
+  methods: {
+    handleSelectionChange(value) {
+      this.selection = value;
+      this.$emit('update:selection', value);
+    },
+    emitAction(type, row) {
+      this.$emit('action', { type, row });
+    },
+    emitSingle(type) {
+      if (this.selection.length !== 1) {
+        this.$message.warning(`${type === 'print' ? '打印' : '操作'}需选择一条正式结算单`);
+        return;
+      }
+      this.$emit('action', { type, row: this.selection[0] });
+    },
+    isEditable(row) {
+      return ['draft', 'returned'].includes(row.approvalStatus);
+    },
+    rowActions(row) {
+      const actions = [];
+      if (this.hasPermission('formal_settlement_view'))
+        actions.push({ type: 'view', label: '查看' });
+      if (this.hasPermission('formal_settlement_edit') && this.isEditable(row))
+        actions.push({ type: 'edit', label: '编辑' });
+      if (this.hasPermission('formal_settlement_delete') && row.approvalStatus === 'draft')
+        actions.push({ type: 'delete', label: '删除', danger: true });
+      if (this.hasPermission('formal_settlement_submit') && this.isEditable(row))
+        actions.push({ type: 'submit', label: '提交' });
+      if (this.hasPermission('formal_settlement_approve') && row.approvalStatus === 'reviewing') {
+        actions.push({ type: 'approve', label: '通过' });
+        actions.push({ type: 'return', label: '驳回', danger: true });
+      }
+      if (
+        this.hasPermission('formal_settlement_void') &&
+        row.approvalStatus === 'approved' &&
+        row.kingdeeSyncStatus !== 'synced'
+      )
+        actions.push({ type: 'void', label: '作废', danger: true });
+      return actions;
+    },
+    statusType(status) {
+      return (
+        { approved: 'success', reviewing: 'warning', returned: 'danger', voided: 'info' }[status] ||
+        ''
+      );
+    },
+    invoiceName(value) {
+      return invoiceStatusOptions.find(item => item.value === value)?.label || value || '-';
+    },
+    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'}`;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.fs-table-panel__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+}
+.fs-table-panel__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.fs-table-panel__links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+.fs-table-panel__pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+</style>
diff --git a/src/views/settlement/components/pre-settlement-editor.vue b/src/views/settlement/components/pre-settlement-editor.vue
index ae0c254..a4c5d57 100644
--- a/src/views/settlement/components/pre-settlement-editor.vue
+++ b/src/views/settlement/components/pre-settlement-editor.vue
@@ -54,6 +54,7 @@
               <el-input-number
                 v-else-if="field.type === 'number'"
                 v-model="form[field.prop]"
+                :class="field.class"
                 :min="0"
                 :precision="6"
                 :controls="false"
@@ -1319,6 +1320,10 @@ export default {
     :deep(.el-input-number) {
       width: 100%;
     }
+
+    :deep(.exchange-rate-input .el-input__inner) {
+      text-align: left;
+    }
   }
 
   &__section-actions,
diff --git a/src/views/settlement/components/transport-reconciliation-table-panel.vue b/src/views/settlement/components/transport-reconciliation-table-panel.vue
new file mode 100644
index 0000000..d1a7e94
--- /dev/null
+++ b/src/views/settlement/components/transport-reconciliation-table-panel.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="tr-table-panel">
+    <div class="tr-table-panel__toolbar">
+      <div>
+        <el-button
+          v-if="hasPermission('transport_reconciliation_add')"
+          type="primary"
+          @click="$emit('create')"
+          >新增</el-button
+        >
+        <el-button type="primary" plain @click="$emit('export')">导出</el-button>
+      </div>
+      <div class="tr-table-panel__toolbar-right">
+        <el-tooltip content="刷新" placement="top">
+          <el-button :icon="Refresh" text @click="$emit('refresh')" />
+        </el-tooltip>
+      </div>
+    </div>
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="52" fixed="left" align="center" />
+      <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
+      <el-table-column
+        v-for="column in columns"
+        :key="column.prop"
+        v-bind="column"
+        align="center"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <el-link v-if="column.link" type="primary" @click="emitAction('view', row)">{{
+            row[column.prop] || '-'
+          }}</el-link>
+          <span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
+          <el-tag
+            v-else-if="column.prop === 'reconciliationStatusName'"
+            :type="row.reconciliationStatus === 'completed' ? 'success' : 'warning'"
+            >{{ row[column.prop] || '-' }}</el-tag
+          >
+          <span v-else>{{ displayValue(row[column.prop]) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="220" fixed="right" align="center">
+        <template #default="{ row }"
+          ><div class="tr-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="tr-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>
+</template>
+
+<script>
+import { Refresh } from '@element-plus/icons-vue';
+
+export default {
+  name: 'TransportReconciliationTablePanel',
+  props: {
+    rows: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    loading: { type: Boolean, default: false },
+    page: { type: Object, required: true },
+    hasPermission: { type: Function, required: true },
+  },
+  emits: ['create', 'export', 'refresh', 'page-change', 'update:selection', 'action'],
+  data() {
+    return {
+      Refresh,
+      selection: [],
+    };
+  },
+  methods: {
+    handleSelectionChange(value) {
+      this.selection = value;
+      this.$emit('update:selection', value);
+    },
+    emitAction(type, row) {
+      this.$emit('action', { type, row });
+    },
+    isEditable(row) {
+      return row.reconciliationStatus === 'unfinished';
+    },
+    rowActions(row) {
+      const actions = [{ type: 'view', label: '查看' }];
+      if (this.hasPermission('transport_reconciliation_edit') && this.isEditable(row))
+        actions.push({ type: 'edit', label: '编辑' });
+      if (this.hasPermission('transport_reconciliation_delete') && this.isEditable(row))
+        actions.push({ type: 'delete', label: '删除', danger: true });
+      if (this.hasPermission('transport_reconciliation_complete') && this.isEditable(row))
+        actions.push({ type: 'complete', label: '确认' });
+      return actions;
+    },
+    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">
+.tr-table-panel__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+}
+.tr-table-panel__toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tr-table-panel__links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+}
+.tr-table-panel__pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+</style>
diff --git a/src/views/settlement/formal-settlement.vue b/src/views/settlement/formal-settlement.vue
index 6699062..f524049 100644
--- a/src/views/settlement/formal-settlement.vue
+++ b/src/views/settlement/formal-settlement.vue
@@ -41,150 +41,46 @@
     </section>
 
     <section class="formal-page__table-panel">
-      <el-tabs type="border-card" v-model="activeSettlementType" @tab-change="handleSettlementTypeChange">
-        <el-tab-pane label="应付" name="payable" />
-        <el-tab-pane label="应收" name="receivable" />
+      <el-tabs
+        type="border-card"
+        v-model="activeSettlementType"
+        @tab-change="handleSettlementTypeChange"
+      >
+        <el-tab-pane label="应付" name="payable">
+          <formal-settlement-table-panel
+            :rows="rows"
+            :columns="columns"
+            :loading="loading"
+            :page="page"
+            :has-permission="hasPermission"
+            @create="openCreate"
+            @payment="openPaymentDialog"
+            @sync="handleSync"
+            @export="handleExport"
+            @refresh="loadTable"
+            @page-change="handlePageChange"
+            @update:selection="selection = $event"
+            @action="handleAction"
+          />
+        </el-tab-pane>
+        <el-tab-pane label="应收" name="receivable">
+          <formal-settlement-table-panel
+            :rows="rows"
+            :columns="columns"
+            :loading="loading"
+            :page="page"
+            :has-permission="hasPermission"
+            @create="openCreate"
+            @payment="openPaymentDialog"
+            @sync="handleSync"
+            @export="handleExport"
+            @refresh="loadTable"
+            @page-change="handlePageChange"
+            @update:selection="selection = $event"
+            @action="handleAction"
+          />
+        </el-tab-pane>
       </el-tabs>
-      <div class="formal-page__toolbar">
-        <div>
-          <el-button
-            v-if="hasPermission('formal_settlement_add')"
-            type="primary"
-            @click="openCreate"
-            >新增</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_payment')"
-            type="primary"
-            plain
-            disabled
-            @click="openPaymentDialog"
-            >付款申请</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_sync')"
-            type="primary"
-            plain
-            disabled
-            @click="handleSync"
-            >同步金蝶</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_print')"
-            type="primary"
-            plain
-            @click="handlePrint"
-            >打印结算单</el-button
-          >
-          <el-button
-            v-if="hasPermission('formal_settlement_export')"
-            type="primary"
-            plain
-            @click="handleExport"
-            >导出</el-button
-          >
-        </div>
-        <div class="formal-page__toolbar-right">
-          <el-tooltip content="刷新" placement="top">
-            <el-button :icon="Refresh" text @click="loadTable" />
-          </el-tooltip>
-        </div>
-      </div>
-      <el-table v-loading="loading" :data="rows" border @selection-change="selection = $event">
-        <el-table-column type="selection" width="52" fixed="left" align="center" />
-        <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
-        <el-table-column
-          v-for="column in columns"
-          :key="column.prop"
-          v-bind="column"
-          align="center"
-          show-overflow-tooltip
-        >
-          <template #default="{ row }">
-            <el-link v-if="column.link && row[column.prop]" type="primary" @click="openView(row)">{{
-              row[column.prop]
-            }}</el-link>
-            <el-tag v-else-if="column.status" :type="statusType(row.approvalStatus)">{{
-              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'">{{
-              invoiceName(row.invoiceStatus)
-            }}</span>
-            <span v-else-if="column.prop === 'paymentStatusName'">{{
-              paymentName(row.paymentStatus)
-            }}</span>
-            <span v-else>{{ displayValue(row[column.prop]) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="120" fixed="right" align="center">
-          <template #default="{ row }"
-            ><div class="formal-page__links">
-              <el-link
-                v-if="hasPermission('formal_settlement_view')"
-                type="primary"
-                @click="openView(row)"
-                >查看</el-link
-              >
-              <el-link
-                v-if="hasPermission('formal_settlement_edit') && isEditable(row)"
-                type="primary"
-                @click="openEdit(row)"
-                >编辑</el-link
-              >
-              <el-link
-                v-if="hasPermission('formal_settlement_delete') && row.approvalStatus === 'draft'"
-                type="danger"
-                @click="handleDelete(row)"
-                >删除</el-link
-              >
-              <el-link
-                v-if="hasPermission('formal_settlement_submit') && isEditable(row)"
-                type="primary"
-                @click="handleSubmit(row)"
-                >提交</el-link
-              >
-              <el-link
-                v-if="
-                  hasPermission('formal_settlement_approve') && row.approvalStatus === 'reviewing'
-                "
-                type="primary"
-                @click="handleApprove(row)"
-                >通过</el-link
-              >
-              <el-link
-                v-if="
-                  hasPermission('formal_settlement_approve') && row.approvalStatus === 'reviewing'
-                "
-                type="danger"
-                @click="handleReturn(row)"
-                >驳回</el-link
-              >
-              <el-link
-                v-if="
-                  hasPermission('formal_settlement_void') &&
-                  row.approvalStatus === 'approved' &&
-                  row.kingdeeSyncStatus !== 'synced'
-                "
-                type="danger"
-                @click="handleVoid(row)"
-                >作废</el-link
-              >
-            </div></template
-          >
-        </el-table-column>
-      </el-table>
-      <div class="formal-page__pagination">
-        <el-pagination
-          v-model:current-page="page.current"
-          v-model:page-size="page.size"
-          :total="page.total"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="loadTable"
-          @size-change="handleSizeChange"
-        />
-      </div>
     </section>
     <formal-settlement-editor
       v-model="editor.visible"
@@ -246,6 +142,7 @@ import {
 } from '@/option/settlement/formalSettlementSearch';
 import { formalSettlementTableColumns } from '@/option/settlement/formalSettlementTable';
 import FormalSettlementEditor from './components/formal-settlement-editor.vue';
+import FormalSettlementTablePanel from './components/formal-settlement-table-panel.vue';
 
 const emptyQuery = () => ({
   formalSettlementNo: '',
@@ -264,7 +161,7 @@ const emptyQuery = () => ({
 
 export default {
   name: 'FormalSettlement',
-  components: { FormalSettlementEditor },
+  components: { FormalSettlementEditor, FormalSettlementTablePanel },
   data() {
     return {
       ArrowDown,
@@ -331,10 +228,25 @@ export default {
     toggleSearch() {
       this.searchExpanded = !this.searchExpanded;
     },
-    handleSizeChange() {
-      this.page.current = 1;
+    handlePageChange({ current, size }) {
+      this.page.current = current;
+      this.page.size = size;
       this.loadTable();
     },
+    handleAction({ type, row }) {
+      const map = {
+        view: this.openView,
+        edit: this.openEdit,
+        delete: this.handleDelete,
+        submit: this.handleSubmit,
+        approve: this.handleApprove,
+        return: this.handleReturn,
+        void: this.handleVoid,
+        print: this.handlePrint,
+      };
+      const fn = map[type];
+      if (fn) fn(row);
+    },
     openCreate() {
       this.editor = { visible: true, id: null, readonly: false };
     },
@@ -426,8 +338,7 @@ export default {
         this.paymentDialog.loading = false;
       }
     },
-    handlePrint() {
-      const row = this.selectedOne('打印');
+    handlePrint(row) {
       if (!row) return;
       const win = window.open('', '_blank');
       if (!win) return this.$message.warning('浏览器阻止了打印窗口，请允许弹窗后重试');
@@ -568,28 +479,6 @@ export default {
 .formal-page__table-panel {
   margin-top: 8px;
 }
-.formal-page__toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-}
-.formal-page__toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.formal-page__links {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-.formal-page__pagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
 .formal-page :deep(.el-table) {
   --el-table-border-color: #eff1f7;
 }
diff --git a/src/views/settlement/settlement-adjustment.vue b/src/views/settlement/settlement-adjustment.vue
index 25bbce3..0ca5353 100644
--- a/src/views/settlement/settlement-adjustment.vue
+++ b/src/views/settlement/settlement-adjustment.vue
@@ -343,7 +343,6 @@ export default {
     justify-content: space-between;
     align-items: center;
     min-height: 56px;
-    padding: 12px;
   }
   &__toolbar-right {
     display: flex;
diff --git a/src/views/settlement/transport-reconciliation.vue b/src/views/settlement/transport-reconciliation.vue
index c9d5ab0..8a92ca9 100644
--- a/src/views/settlement/transport-reconciliation.vue
+++ b/src/views/settlement/transport-reconciliation.vue
@@ -31,91 +31,43 @@
     </section>
 
     <section class="reconciliation-page__table-panel">
-      <div class="reconciliation-page__toolbar">
-        <div>
-          <el-button
-            v-if="hasPermission('transport_reconciliation_add')"
-            type="primary"
-            @click="openCreate"
-            >新增</el-button
-          >
-          <el-button type="primary" plain @click="handleExport">导出</el-button>
-        </div>
-        <div class="reconciliation-page__toolbar-right">
-          <el-tooltip content="刷新" placement="top">
-            <el-button :icon="Refresh" text @click="loadTable" />
-          </el-tooltip>
-        </div>
-      </div>
       <el-tabs
         v-model="settlementType"
         class="reconciliation-page__settlement-tabs"
-        type="card"
+        type="border-card"
         @tab-change="handleTabChange"
       >
-        <el-tab-pane label="应付" name="payable" />
-        <el-tab-pane label="应收" name="receivable" />
+        <el-tab-pane label="应付" name="payable">
+          <transport-reconciliation-table-panel
+            :rows="rows"
+            :columns="columns"
+            :loading="loading"
+            :page="page"
+            :has-permission="hasPermission"
+            @create="openCreate"
+            @export="handleExport"
+            @refresh="loadTable"
+            @page-change="handlePageChange"
+            @update:selection="selection = $event"
+            @action="handleAction"
+          />
+        </el-tab-pane>
+        <el-tab-pane label="应收" name="receivable">
+          <transport-reconciliation-table-panel
+            :rows="rows"
+            :columns="columns"
+            :loading="loading"
+            :page="page"
+            :has-permission="hasPermission"
+            @create="openCreate"
+            @export="handleExport"
+            @refresh="loadTable"
+            @page-change="handlePageChange"
+            @update:selection="selection = $event"
+            @action="handleAction"
+          />
+        </el-tab-pane>
       </el-tabs>
-      <el-table v-loading="loading" :data="rows" border @selection-change="selection = $event">
-        <el-table-column type="selection" width="52" fixed="left" align="center" />
-        <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
-        <el-table-column
-          v-for="column in columns"
-          :key="column.prop"
-          v-bind="column"
-          align="center"
-          show-overflow-tooltip
-        >
-          <template #default="{ row }">
-            <el-link v-if="column.link" type="primary" @click="openView(row)">{{
-              row[column.prop] || '-'
-            }}</el-link>
-            <span v-else-if="column.money">{{ formatMoney(row[column.prop], row.currency) }}</span>
-            <el-tag
-              v-else-if="column.prop === 'reconciliationStatusName'"
-              :type="row.reconciliationStatus === 'completed' ? 'success' : 'warning'"
-              >{{ row[column.prop] || '-' }}</el-tag
-            >
-            <span v-else>{{ displayValue(row[column.prop]) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right" align="center">
-          <template #default="{ row }">
-            <div class="reconciliation-page__links">
-              <el-link type="primary" @click="openView(row)">查看</el-link>
-              <el-link
-                v-if="hasPermission('transport_reconciliation_edit') && isEditable(row)"
-                type="primary"
-                @click="openEdit(row)"
-                >编辑</el-link
-              >
-              <el-link
-                v-if="hasPermission('transport_reconciliation_delete') && isEditable(row)"
-                type="danger"
-                @click="handleDelete(row)"
-                >删除</el-link
-              >
-              <el-link
-                v-if="hasPermission('transport_reconciliation_complete') && isEditable(row)"
-                type="primary"
-                @click="handleComplete(row)"
-                >确认</el-link
-              >
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="reconciliation-page__pagination">
-        <el-pagination
-          v-model:current-page="page.current"
-          v-model:page-size="page.size"
-          :total="page.total"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="loadTable"
-          @size-change="handleSizeChange"
-        />
-      </div>
     </section>
 
     <transport-reconciliation-editor
@@ -136,6 +88,7 @@ import * as api from '@/api/settlement/transportReconciliation';
 import { transportReconciliationSearchFields } from '@/option/settlement/transportReconciliationSearch';
 import { transportReconciliationTableColumns } from '@/option/settlement/transportReconciliationTable';
 import TransportReconciliationEditor from './components/transport-reconciliation-editor.vue';
+import TransportReconciliationTablePanel from './components/transport-reconciliation-table-panel.vue';
 
 const emptyQuery = () => ({
   reconciliationNo: '',
@@ -151,7 +104,7 @@ const emptyQuery = () => ({
 
 export default {
   name: 'TransportReconciliation',
-  components: { TransportReconciliationEditor },
+  components: { TransportReconciliationEditor, TransportReconciliationTablePanel },
   data() {
     return {
       ArrowDown,
@@ -210,10 +163,21 @@ export default {
       this.page.current = 1;
       this.loadTable();
     },
-    handleSizeChange() {
-      this.page.current = 1;
+    handlePageChange({ current, size }) {
+      this.page.current = current;
+      this.page.size = size;
       this.loadTable();
     },
+    handleAction({ type, row }) {
+      const map = {
+        view: this.openView,
+        edit: this.openEdit,
+        delete: this.handleDelete,
+        complete: this.handleComplete,
+      };
+      const fn = map[type];
+      if (fn) fn(row);
+    },
     openCreate() {
       this.editor = { visible: true, id: null, readonly: false };
     },
@@ -307,35 +271,12 @@ export default {
 .reconciliation-page__table-panel {
   margin-top: 8px;
 }
-.reconciliation-page__toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 56px;
-  //padding: 12px;
-}
-.reconciliation-page__toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 .reconciliation-page__settlement-tabs {
   margin-bottom: 0;
 }
 .reconciliation-page__settlement-tabs :deep(.el-tabs__header) {
   margin: 0;
 }
-.reconciliation-page__links {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-}
-.reconciliation-page__pagination {
-  display: flex;
-  justify-content: flex-end;
-  padding: 12px;
-}
 .reconciliation-page :deep(.el-table) {
   --el-table-border-color: #eff1f7;
   background: #fff;
diff --git a/vite.config.mjs b/vite.config.mjs
index 8c0a2a9..09134a0 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -50,26 +50,26 @@ export default ({
       __VUE_I18N_LEGACY_API__: true,
       __INTLIFY_PROD_DEVTOOLS__: false,
     },
-    server: {
-      port: 2888,
-      proxy: {
-        '/api': {
-          target: 'http://localhost',
-          //target: 'https://saber3.bladex.cn/api',
-          changeOrigin: true,
-          rewrite: path => path.replace(/^\/api/, ''),
-        },
-      },
-    },
     // server: {
-    //   port: 2889,
+    //   port: 2888,
     //   proxy: {
     //     '/api': {
-    //       target: 'http://172.16.203.228:8000',
+    //       target: 'http://localhost',
+    //       //target: 'https://saber3.bladex.cn/api',
     //       changeOrigin: true,
+    //       rewrite: path => path.replace(/^\/api/, ''),
     //     },
     //   },
     // },
+    server: {
+      port: 2889,
+      proxy: {
+        '/api': {
+          target: 'http://172.16.203.228:8000',
+          changeOrigin: true,
+        },
+      },
+    },
     resolve: {
       alias: {
         '~': resolve(__dirname, './'),