sen
2026-01-15 13aedf29e82c77e7ea4a4f5cd826ba378006026a
ui/admin-ui3/src/components/ClaimBillDialog/index.vue
@@ -1,5 +1,11 @@
<template>
  <el-dialog v-model="visible" title="账单认领" width="1150px" destroy-on-close :close-on-click-modal="false">
    <div style="text-align: right;margin-bottom: 10px;">
      <el-button type="warning" v-if="isViewMode" plain icon="Download" @click="handleExport"
        v-hasPermi="['cwgl:fundFlowClaimDetail:export']">导出
      </el-button>
      <!-- <el-button type="primary" @click="handleFinalSubmit">确 定</el-button> -->
    </div>
    <div class="claim-wrapper">
      <!-- <div class="section-header">流水详细信息</div> -->
      <el-descriptions :column="3" border class="mb-20">
@@ -29,8 +35,16 @@
        <el-descriptions-item label="待认领金额">
          <span class="text-danger font-bold">{{ remainingAmountDr }}</span>
        </el-descriptions-item v-if="isViewMode">
          <el-descriptions-item label="关联账单类型">
          <span  v-if="detail.incomeExpenseFlag == 0">
            供应商
          </span>
          <span  v-if="detail.incomeExpenseFlag == 1">
            客户
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="" :span="2"></el-descriptions-item>
        <el-descriptions-item label="" :span="1"></el-descriptions-item>
      </el-descriptions>
      <div class="section-header">{{ isViewMode ? '账单认领明细' : '账单认领' }}</div>
@@ -53,7 +67,7 @@
            <el-input v-model="row.billNo" @click="openReceivableDialog($index)" :disabled="!row.$edit" readonly
              placeholder="点击选择账单">
              <template v-if="row.$edit" #append>
                <el-button icon="Search"  @click="openReceivableDialog($index)" :disabled="!row.$edit" />
                <el-button icon="Search" @click="openReceivableDialog($index)" :disabled="!row.$edit" />
              </template>
            </el-input>
          </template>
@@ -114,6 +128,10 @@
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 10" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
    <template #footer>
@@ -229,11 +247,50 @@
  resetForm();
};
const isViewMode = ref(false); // 新增:模式控制
// --- 新增:分页与搜索相关的响应式变量 ---
const total = ref(0);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  fundFlowId: null as any // 关联的流水ID
});
// --- 新增:获取列表数据的方法 ---
const getList = async () => {
  if (!detail.value.id) return;
  loading.value = true;
  try {
    const res = await listFundFlowClaimDetail({
      ...queryParams.value,
      fundFlowId: detail.value.id
    });
    if (res.code === 200) {
      detail.value.claimDetails = res.rows;
     detail.value.claimDetails.forEach((item: any) => {
      if (item.$edit === undefined) {
        item.$edit = false;
      }
    });
      total.value = res.total;
    }
  } catch (error) {
    console.error("获取明细列表失败", error);
  } finally {
    loading.value = false;
  }
};
const handleExport =()=>{
  proxy.download("/cwgl/fundFlowClaimDetail/export",{...queryParams.value})
}
// 打开弹窗
const open = (rowData: any, mode: 'view' | 'edit' = 'edit') => {
  // 1. 先重置一次,防止上次残留
  resetForm();
   isViewMode.value = mode === 'view'; // 设置模式
  isViewMode.value = mode === 'view'; // 设置模式
  // 2. 浅拷贝基础数据
  detail.value = {
    ...rowData,
@@ -249,13 +306,10 @@
    } else if (firstCompanyType === '供应商') {
      billType.value = 'PAYABLE';
    }
    // 如果有ID,则请求后端明细数据
    // 确保已有的数据行不会变成编辑模式
    detail.value.claimDetails.forEach((item: any) => {
      if (item.$edit === undefined) {
        item.$edit = false;
      }
    });
    getList()
  }
  visible.value = true;
@@ -335,14 +389,8 @@
  }
  addFundFlowClaimDetailClaim(row, detail.value.id).then((response) => {
    if (response.code == 200) {
      listFundFlowClaimDetail({ fundFlowId: detail.value.id }).then((res) => {
        if (res.code == 200) {
          detail.value.claimDetails = res.rows;
          proxy.$modal.msgSuccess("保存成功");
          row.$edit = false;
        }
      })
      proxy.$modal.msgSuccess("保存成功");
      getList(); // 使用统一的 getList 方法
    }
  })
};
@@ -352,12 +400,8 @@
    return delFundFlowClaimDetail(row.id);
  }).then((res) => {
    if (res.code == 200) {
      listFundFlowClaimDetail({ fundFlowId: detail.value.id }).then((res) => {
        if (res.code == 200) {
          detail.value.claimDetails = res.rows;
          proxy.$modal.msgSuccess("删除成功");
        }
      })
    proxy.$modal.msgSuccess("删除成功");
      getList(); // 使用统一的 getList 方法
    }