feat(settlement): 优化“正式结算”和“运输对账”页面表格结构及样式

- 将正式结算页面中的表格及工具栏整体封装为子组件 formal-settlement-table-panel
- 正式结算页通过 tabs 展示应付/应收，分别引入封装表格组件，保证功能完整性和切换时的数据刷新
- 正式结算表格子组件支持行操作、工具栏按钮和分页，提升代码复用和维护性
- 运输对账页面同样改用 transport-reconciliation-table-panel 封装表格与工具栏
- 调整预结算单弹窗“结算汇率”输入框为左对齐，改善字段显示
- 清理有关表格页面的旧样式与冗余代码，确保样式统一
- 修改本地开发服务器端口及代理配置，切换到 2889 端口并更新代理目标地址

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 },

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>

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,

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>

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;
 }

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;

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;