✨ 完善导入结算单明细编辑、草稿刷新与历史运单选择

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

src/api/settlement/settlementImport.js

@@ -53,3 +53,13 @@ export const confirm = data =>
   request({ url: `${baseUrl}/confirm`, method: 'post', data, timeout: 120000 });
 
 export const voidBatch = data => request({ url: `${baseUrl}/void`, method: 'post', data });
+
+export const removeDraft = id =>
+  request({ url: `${baseUrl}/remove`, method: 'post', params: { id } });
+
+export const getHistoryWaybills = params =>
+  request({
+    url: `${baseUrl}/history-waybills`,
+    method: 'get',
+    params,
+  });

src/views/settlement/components/settlement-import-page.vue

@@ -122,7 +122,7 @@
                     </div>
                     <div>
                       历史运单：按 项目+车号+运输完成日期+客户+承运商+起运地+目的地+货物名称
-                      匹配已有运单（命中 1 条自动绑定，多条需手工指定运单号）；提交时生成应收/应付明细与预/正式结算单，费用按导入单据，不新建运单
+                      匹配尚未生成应收/应付的运单（命中 1 条自动绑定，多条可点「选择」弹窗挑选）；提交时生成应收/应付明细与预/正式结算单，费用按导入单据，不新建运单
                     </div>
                   </template>
                   <el-icon class="settlement-import-create__label-tip"><QuestionFilled /></el-icon>
@@ -220,8 +220,32 @@
                 value-format="YYYY-MM-DD"
                 placeholder="请选择"
               />
+              <el-select
+                v-else-if="column.editor === 'select' && column.prop === 'transportType'"
+                v-model="row[column.prop]"
+                clearable
+                filterable
+                placeholder="请选择运输方式"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in transportTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <div
+                v-else-if="column.editor === 'waybillSelect'"
+                class="settlement-import-create__waybill-select"
+              >
+                <el-input v-model="row.waybillNo" clearable placeholder="运单号" />
+                <el-link type="primary" :underline="false" @click="openHistoryWaybillDialog(row)">
+                  选择
+                </el-link>
+              </div>
               <el-input
-                v-else-if="column.editor === 'number'"
+                v-else-if="column.editor === 'number' || column.editor === 'optionalNumber'"
                 :model-value="resolveCellValue(row, column)"
                 inputmode="decimal"
                 :placeholder="`请输入${column.label}`"
@@ -233,6 +257,14 @@
                 :placeholder="`请输入${column.label}`"
               />
             </template>
+            <template v-else-if="column.editor === 'waybillSelect' && !readonly">
+              <div class="settlement-import-create__waybill-select">
+                <span>{{ row.waybillNo || '-' }}</span>
+                <el-link type="primary" :underline="false" @click="openHistoryWaybillDialog(row)">
+                  选择
+                </el-link>
+              </div>
+            </template>
             <span v-else>{{ formatCell(row, column) }}</span>
           </template>
         </el-table-column>
@@ -268,6 +300,41 @@
         确认导入
       </el-button>
     </div>
+
+    <el-dialog
+      v-model="historyWaybillVisible"
+      title="选择历史运单"
+      width="960px"
+      append-to-body
+      destroy-on-close
+    >
+      <div class="settlement-import-create__history-tip">
+        仅展示相同项目、客户合同、承运商合同下，尚未生成当前结算类型应收/应付明细的运单
+      </div>
+      <el-table
+        v-loading="historyWaybillLoading"
+        :data="historyWaybillRows"
+        border
+        max-height="420"
+        highlight-current-row
+        @row-dblclick="selectHistoryWaybill"
+        @current-change="row => (historyWaybillCurrent = row)"
+      >
+        <el-table-column prop="waybillNo" label="运单号" min-width="140" />
+        <el-table-column prop="vehicleNo" label="车号" min-width="120" />
+        <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="actualEndDate" label="完成日期" min-width="120" />
+        <el-table-column prop="quantity" label="数量" width="90" />
+        <el-table-column prop="quantityUnit" label="数量单位" width="90" />
+        <el-table-column prop="mileage" label="里程" width="90" />
+      </el-table>
+      <template #footer>
+        <el-button @click="historyWaybillVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmHistoryWaybill">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -279,6 +346,7 @@ import { QuestionFilled } from '@element-plus/icons-vue';
 import dayjs from 'dayjs';
 import * as api from '@/api/settlement/settlementImport';
 import { getList as getContractList } from '@/api/business/contract-manage';
+import { getDictionary } from '@/api/system/dictbiz';
 import { formatContractOptionLabel } from '@/utils/contract';
 import { downloadXls } from '@/utils/util';
 
@@ -301,6 +369,12 @@ const carrierContracts = ref([]);
 const draftLoading = ref(false);
 const confirmLoading = ref(false);
 const readonly = ref(false);
+const transportTypeOptions = ref([]);
+const historyWaybillVisible = ref(false);
+const historyWaybillLoading = ref(false);
+const historyWaybillRows = ref([]);
+const historyWaybillCurrent = ref(null);
+const historyWaybillTargetRow = ref(null);
 
 const createDefaultForm = () => ({
   id: undefined,
@@ -406,7 +480,6 @@ const loadContractsByProject = async (projectId, projectName = '') => {
 
 const fixedDetailColumns = [
   { prop: 'loadingIdentifier', label: '配载标识号', editor: 'input', minWidth: 140 },
-  { prop: 'batchNo', label: '运单批次号', editor: 'input', minWidth: 140 },
   { prop: 'originalNo', label: '原始单号', editor: 'input', minWidth: 130 },
   {
     prop: 'vehicleNo',
@@ -414,15 +487,30 @@ const fixedDetailColumns = [
     editor: 'input',
     minWidth: 190,
   },
-  { prop: 'driverName', label: '司机/船长', editor: 'input', minWidth: 120 },
+  { prop: 'transportType', label: '运输方式', editor: 'select', minWidth: 120 },
-  { prop: 'transportType', label: '运输方式', editor: 'input', minWidth: 110 },
+  { prop: 'driverName', label: '司机/船长姓名', editor: 'input', minWidth: 120 },
-  { prop: 'departureAddress', label: '起运地', editor: 'input', minWidth: 160 },
+  { prop: 'driverPhone', label: '司机/船长手机号', editor: 'input', minWidth: 140 },
-  { prop: 'arrivalAddress', label: '目的地', editor: 'input', minWidth: 160 },
+  { prop: 'departureAddress', label: '发货地址', editor: 'input', minWidth: 160 },
+  { prop: 'departureContact', label: '发货联系人', editor: 'input', minWidth: 120 },
+  { prop: 'departurePhone', label: '发货联系人电话', editor: 'input', minWidth: 140 },
+  { prop: 'arrivalAddress', label: '到货地址', editor: 'input', minWidth: 160 },
+  { prop: 'arrivalContact', label: '收货联系人', editor: 'input', minWidth: 120 },
+  { prop: 'arrivalPhone', label: '收货联系人电话', editor: 'input', minWidth: 140 },
   { prop: 'cargoName', label: '货物名称', editor: 'input', minWidth: 140 },
-  { prop: 'actualStartDate', label: '开始时间', editor: 'date', minWidth: 140 },
+  { prop: 'cargoType', label: '货物类型', editor: 'input', minWidth: 120 },
-  { prop: 'actualEndDate', label: '运输完成日期', editor: 'date', minWidth: 140 },
+  { prop: 'packageType', label: '包装', editor: 'input', minWidth: 100 },
-  { prop: 'unitPrice', label: '单价', editor: 'number', minWidth: 100, feeField: false },
+  { prop: 'quantity', label: '数量', editor: 'number', minWidth: 100 },
-  { prop: 'transportFee', label: '运费', editor: 'number', minWidth: 100 },
+  { prop: 'quantityUnit', label: '数量单位', editor: 'input', minWidth: 100 },
+  { prop: 'specification', label: '规格', editor: 'input', minWidth: 110 },
+  { prop: 'model', label: '型号', editor: 'input', minWidth: 110 },
+  { prop: 'mileage', label: '里程(km)', editor: 'optionalNumber', minWidth: 110 },
+  { prop: 'unitPrice', label: '运输单价', editor: 'optionalNumber', minWidth: 100 },
+  { prop: 'transportFee', label: '运输费', editor: 'number', minWidth: 100 },
+  { prop: 'actualStartDate', label: '实际发货时间', editor: 'date', minWidth: 140 },
+  { prop: 'actualEndDate', label: '实际完成时间', editor: 'date', minWidth: 140 },
+  { prop: 'planStartDate', label: '预计发货时间', editor: 'date', minWidth: 140 },
+  { prop: 'planEndDate', label: '预计完成时间', editor: 'date', minWidth: 140 },
+  { prop: 'waybillIdentifier', label: '同一运单标识号', editor: 'input', minWidth: 140 },
 ];
 
 const detailColumns = computed(() => {
@@ -439,8 +527,8 @@ const detailColumns = computed(() => {
           {
             prop: 'waybillNo',
             label: '运单号',
-            editor: 'input',
+            editor: 'waybillSelect',
-            minWidth: 150,
+            minWidth: 180,
           },
         ]
       : [];
@@ -532,9 +620,14 @@ const resolveCellValue = (row, column) => {
 
 const formatCell = (row, column) => {
   const value = resolveCellValue(row, column);
-  if (column.editor === 'number' || column.prop === 'settlementAmount') {
+  if (
+    column.editor === 'number' ||
+    column.editor === 'optionalNumber' ||
+    column.prop === 'settlementAmount'
+  ) {
     if (value === '' || value === null || value === undefined) return '';
-    return Number(value).toFixed(2);
+    const number = Number(value);
+    return Number.isFinite(number) ? number.toFixed(2) : '';
   }
   return value ?? '';
 };
@@ -560,11 +653,23 @@ const recalcSettlementAmount = row => {
 };
 
 const updateNumberCell = (row, column, value) => {
-  const [integer = '', decimal = ''] = String(value || '')
+  const raw = String(value ?? '').trim();
-    .replace(/[^\d.]/g, '')
+  if (!raw) {
-    .split('.');
+    if (column.isFeeItem) {
+      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 = '';
+    }
+    recalcSettlementAmount(row);
+    return;
+  }
+  const [integer = '', decimal = ''] = raw.replace(/[^\d.]/g, '').split('.');
   const normalized =
-    decimal || String(value || '').includes('.') ? `${integer}.${decimal.slice(0, 2)}` : integer;
+    decimal || raw.includes('.') ? `${integer}.${decimal.slice(0, 2)}` : integer;
   if (column.isFeeItem) {
     if (!row.feeItems) row.feeItems = {};
     row.feeItems[column.prop] = normalized;
@@ -637,6 +742,12 @@ const normalizeParsedRow = (item, index) => {
     loadingIdentifier: item.loadingIdentifier || item.loadingNo || '',
     transportFee: item.transportFee ?? item.freight ?? item['*运输费'] ?? item['运输费'] ?? '',
     unitPrice: item.unitPrice ?? item.transportUnitPrice ?? item['运输单价'] ?? item['单价'] ?? '',
+    mileage: item.mileage ?? item['里程(km)'] ?? item['里程'] ?? '',
+    quantity: item.quantity ?? item['*数量'] ?? item['数量'] ?? '',
+    quantityUnit: item.quantityUnit ?? item['*数量单位'] ?? item['数量单位'] ?? '',
+    model: item.model ?? item['型号'] ?? '',
+    specification: item.specification ?? item['规格'] ?? '',
+    cargoType: item.cargoType ?? item['*货物类型'] ?? item['货物类型'] ?? '',
     feeItems,
   };
   row.transportUnitPrice = row.unitPrice;
@@ -867,6 +978,74 @@ const leaveAfterConfirm = () => {
   router.push({ path: '/settlement/settlement-import' });
 };
 
+const openHistoryWaybillDialog = async row => {
+  if (!form.projectId || !form.customerContractId || !form.carrierContractId) {
+    ElMessage.warning('请先选择项目、客户合同和承运商合同');
+    return;
+  }
+  if (!form.settlementType) {
+    ElMessage.warning('请先选择结算类型');
+    return;
+  }
+  historyWaybillTargetRow.value = row;
+  historyWaybillCurrent.value = null;
+  historyWaybillVisible.value = true;
+  historyWaybillLoading.value = true;
+  try {
+    const response = await api.getHistoryWaybills({
+      projectId: form.projectId,
+      customerContractId: form.customerContractId,
+      carrierContractId: form.carrierContractId,
+      settlementType: form.settlementType,
+    });
+    historyWaybillRows.value = unwrapData(response) || [];
+  } catch (error) {
+    historyWaybillRows.value = [];
+    ElMessage.error(error?.message || '加载历史运单失败');
+  } finally {
+    historyWaybillLoading.value = false;
+  }
+};
+
+const applyHistoryWaybill = waybill => {
+  const target = historyWaybillTargetRow.value;
+  if (!target || !waybill) return;
+  target.waybillNo = waybill.waybillNo || '';
+  target.matchedWaybillId = waybill.id;
+  target.vehicleNo = waybill.vehicleNo || target.vehicleNo;
+  target.departureAddress = waybill.departureAddress || target.departureAddress;
+  target.arrivalAddress = waybill.arrivalAddress || target.arrivalAddress;
+  target.cargoName = waybill.cargoName || target.cargoName;
+  target.cargoType = waybill.cargoType || target.cargoType;
+  target.quantity = waybill.quantity ?? target.quantity;
+  target.quantityUnit = waybill.quantityUnit || target.quantityUnit;
+  target.model = waybill.model || target.model;
+  target.mileage =
+    waybill.mileage === null || waybill.mileage === undefined ? target.mileage : waybill.mileage;
+  target.actualStartDate = waybill.actualStartDate
+    ? dayjs(waybill.actualStartDate).format('YYYY-MM-DD')
+    : target.actualStartDate;
+  target.actualEndDate = waybill.actualEndDate
+    ? dayjs(waybill.actualEndDate).format('YYYY-MM-DD')
+    : target.actualEndDate;
+  target.driverName = waybill.driverName || target.driverName;
+  refreshDuplicateFlags();
+};
+
+const selectHistoryWaybill = row => {
+  applyHistoryWaybill(row);
+  historyWaybillVisible.value = false;
+};
+
+const confirmHistoryWaybill = () => {
+  if (!historyWaybillCurrent.value) {
+    ElMessage.warning('请选择一条运单');
+    return;
+  }
+  applyHistoryWaybill(historyWaybillCurrent.value);
+  historyWaybillVisible.value = false;
+};
+
 const downloadFailureExcel = async failureRows => {
   const response = await api.exportFailures({
     feeItemNames: [...feeItemNames.value],
@@ -910,7 +1089,7 @@ const saveDraft = async () => {
     if (batch.id) form.id = batch.id;
     if (batch.batchNo) form.batchNo = batch.batchNo;
     ElMessage.success('保存草稿成功');
-    goBack();
+    leaveAfterConfirm();
   } catch (error) {
     ElMessage.error(error?.message || '保存草稿失败');
   } finally {
@@ -959,10 +1138,32 @@ const confirmImport = async () => {
   }
 };
 
+const loadTransportTypeOptions = async () => {
+  try {
+    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;
+      })
+      .filter(Boolean);
+  } catch (error) {
+    transportTypeOptions.value = [
+      { label: '公路运输', value: '公路运输' },
+      { label: '铁路运输', value: '铁路运输' },
+      { label: '水路运输', value: '水路运输' },
+      { label: '航空运输', value: '航空运输' },
+    ];
+  }
+};
+
 const loadOptions = async () => {
   const response = await api.getOptions();
   const options = unwrapData(response) || {};
   projects.value = (options.projects || []).map(normalizeProject).filter(Boolean);
+  await loadTransportTypeOptions();
 };
 
 const loadDetail = async id => {
@@ -1115,4 +1316,16 @@ onMounted(() => {
   padding-top: 16px;
   border-top: 1px solid #eff1f7;
 }
+
+.settlement-import-create__waybill-select {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.settlement-import-create__history-tip {
+  margin-bottom: 8px;
+  color: #909399;
+  font-size: 13px;
+}
 </style>

src/views/settlement/settlement-import.vue

@@ -23,8 +23,8 @@
             <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 type="primary" @click="handleSearch">搜索</el-button>
-            <el-button @click="resetSearch">重置</el-button>
+            <el-button @click="resetSearch">清空</el-button>
             <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
               {{ searchExpanded ? '收起' : '展开' }}
             </el-button>
@@ -43,6 +43,7 @@
           >
             新增
           </el-button>
+          <el-button plain @click="refreshTable">刷新</el-button>
         </div>
       </div>
 
@@ -53,6 +54,13 @@
             <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) }}
@@ -68,19 +76,35 @@
         <el-table-column prop="carrierName" label="承运商" min-width="140" show-overflow-tooltip />
         <el-table-column label="明细行数" width="100" align="center">
           <template #default="{ row }">
-            {{ row.waybillCount ?? row.detailCount ?? 0 }}
+            {{ 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="160" fixed="right">
+        <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 type="primary" @click="openDetail(row)">查看</el-link>
               <el-link
-                v-if="row.importStatus !== 'voided' && hasPermission('settlement_import_void')"
+                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)"
               >
@@ -105,9 +129,19 @@
       </div>
     </section>
 
-    <el-dialog v-model="detailVisible" title="导入结算单详情" width="640px" append-to-body>
+    <el-dialog
-      <el-descriptions :column="2" border>
+      v-model="detailVisible"
+      title="导入结算单详情"
+      width="1100px"
+      append-to-body
+      destroy-on-close
+      class="settlement-import-detail-dialog"
+    >
+      <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>
@@ -117,6 +151,9 @@
         <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="客户合同">
@@ -126,16 +163,10 @@
         <el-descriptions-item label="承运商合同">
           {{ detail.carrierContractName || '-' }}
         </el-descriptions-item>
-        <el-descriptions-item label="明细行数">
-          {{ detail.waybillCount ?? detail.detailCount ?? 0 }}
-        </el-descriptions-item>
-        <el-descriptions-item label="导入状态">
-          {{ detail.importStatusName || detail.importStatus || '-' }}
-        </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="2">
+        <el-descriptions-item label="关联结算单" :span="3">
           <el-link
             v-if="detail.formalSettlementId"
             type="primary"
@@ -153,6 +184,50 @@
           <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-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"
+        >
+          <template #default="{ row }">
+            {{ formatFeeAmount(row, name) }}
+          </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>
         <el-button @click="detailVisible = false">关闭</el-button>
         <el-button
@@ -200,6 +275,7 @@ import * as api from '@/api/settlement/settlementImport';
 const emptyQuery = () => ({
   batchNo: '',
   settlementType: '',
+  importStatus: '',
   projectName: '',
   customerName: '',
   carrierName: '',
@@ -207,8 +283,15 @@ const emptyQuery = () => ({
 
 const SETTLEMENT_TYPE_OPTIONS = [
   { label: '全部', value: '' },
-  { label: '应收正式结算单', value: 'receivable' },
+  { label: '应收', value: 'receivable' },
-  { label: '应付正式结算单', value: 'payable' },
+  { label: '应付', value: 'payable' },
+];
+
+const IMPORT_STATUS_OPTIONS = [
+  { label: '全部', value: '' },
+  { label: '草稿', value: 'draft' },
+  { label: '已完成', value: 'completed' },
+  { label: '已作废', value: 'voided' },
 ];
 
 const SETTLEMENT_IMPORT_LIST_REFRESH_KEY = 'settlement-import-list-refresh';
@@ -227,7 +310,10 @@ export default {
       page: { current: 1, size: 10, total: 0 },
       batchNoOptions: [],
       detailVisible: false,
+      detailLoading: false,
       detail: {},
+      detailRows: [],
+      detailFeeItemNames: [],
       voidVisible: false,
       voidLoading: false,
       voidForm: { id: null, reason: '' },
@@ -253,6 +339,12 @@ export default {
           type: 'select',
           options: this.batchNoOptions,
         },
+        {
+          prop: 'importStatus',
+          label: '状态',
+          type: 'select',
+          options: IMPORT_STATUS_OPTIONS,
+        },
         {
           prop: 'settlementType',
           label: '导入类型',
@@ -298,6 +390,17 @@ export default {
     hasPermission(code) {
       return this.isAdmin || this.validData(this.permission?.[code], false);
     },
+    importStatusLabel(value) {
+      return (
+        IMPORT_STATUS_OPTIONS.find(item => item.value === value)?.label || value || '-'
+      );
+    },
+    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 || '-'
@@ -315,6 +418,13 @@ export default {
       const body = response?.data || response || {};
       return body?.data !== undefined ? body.data : body;
     },
+    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;
+    },
     async loadOptions() {
       try {
         const response = await api.getOptions();
@@ -341,6 +451,7 @@ export default {
         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,
@@ -352,6 +463,10 @@ export default {
         this.loading = false;
       }
     },
+    refreshTable() {
+      this.loadOptions();
+      this.loadTable();
+    },
     handleSearch() {
       this.page.current = 1;
       this.loadTable();
@@ -372,13 +487,23 @@ export default {
     },
     async 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);
-        this.detail = this.unwrapData(response) || { ...row };
+        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.detailVisible = true;
     },
     editDraft(row) {
       this.detailVisible = false;
@@ -387,6 +512,21 @@ export default {
         query: { id: row.id },
       });
     },
+    async handleDelete(row) {
+      if (!row?.id) return;
+      try {
+        await this.$confirm('确认删除该草稿批次？删除后不可恢复。', '提示', {
+          type: 'warning',
+        });
+        await api.removeDraft(row.id);
+        this.$message.success('删除成功');
+        this.loadTable();
+        this.loadOptions();
+      } catch (error) {
+        if (error === 'cancel' || error === 'close') return;
+        this.$message.error(error?.message || '删除失败');
+      }
+    },
     goFormalSettlement(row) {
       if (!row?.formalSettlementId) return;
       this.detailVisible = false;
@@ -513,6 +653,29 @@ export default {
   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) {
   padding: 0;
 }