✨ 完善付款申请多结算行、结算导入编辑与计费规则展示

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/settlement/settlement-import.vue

@@ -195,37 +195,17 @@
       >
         <el-table-column type="index" label="序号" width="64" align="center" />
         <el-table-column
-          v-if="detail.waybillMode === 'history'"
-          prop="waybillNo"
-          label="运单号"
-          min-width="130"
-        />
-        <el-table-column prop="vehicleNo" label="车牌号/航班号/船号/班列号" min-width="170" />
-        <el-table-column prop="transportType" label="运输方式" min-width="100" />
-        <el-table-column prop="departureAddress" label="发货地址" min-width="140" show-overflow-tooltip />
-        <el-table-column prop="arrivalAddress" label="到货地址" min-width="140" show-overflow-tooltip />
-        <el-table-column prop="cargoName" label="货物名称" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="cargoType" label="货物类型" min-width="100" />
-        <el-table-column prop="model" label="型号" min-width="100" />
-        <el-table-column prop="quantity" label="数量" width="90" />
-        <el-table-column prop="quantityUnit" label="数量单位" width="90" />
-        <el-table-column prop="mileage" label="里程(km)" width="100" />
-        <el-table-column prop="unitPrice" label="运输单价" width="100" />
-        <el-table-column prop="transportFee" label="运输费" width="100" />
-        <el-table-column
-          v-for="name in detailFeeItemNames"
-          :key="name"
-          :label="name"
-          min-width="100"
+          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 }">
-            {{ formatFeeAmount(row, name) }}
+            {{ column.fee ? formatFeeAmount(row, column.prop) : formatDetailCell(row, column) }}
           </template>
         </el-table-column>
-        <el-table-column prop="settlementAmount" label="结算金额" width="110" />
-        <el-table-column prop="actualStartDate" label="实际发货时间" min-width="120" />
-        <el-table-column prop="actualEndDate" label="实际完成时间" min-width="120" />
-        <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
       </el-table>
 
       <template #footer>
@@ -359,6 +339,52 @@ export default {
     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.loadOptions();
@@ -418,6 +444,13 @@ export default {
       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];