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

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

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;