fix

src/views/payment/bill-ledger.vue

@@ -12,16 +12,89 @@
       :loading="loading"
       :page="page"
       @add="openCreate"
+      @view="openView"
       @edit="openEdit"
       @delete="handleDelete"
       @page-change="handlePageChange"
       @size-change="handleSizeChange"
     />
+    <el-dialog
+      v-model="detailDialog.visible"
+      title="汇票台账详情"
+      width="86%"
+      append-to-body
+      destroy-on-close
+    >
+      <div v-loading="detailDialog.loading" class="bill-ledger-detail">
+        <section-card title="基本信息">
+          <el-descriptions :column="3" border>
+            <el-descriptions-item label="票据编号">{{
+              detailValue('billNo')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="汇票类型">{{
+              detailValue('billTypeName', 'billType')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="出票单位">{{
+              detailValue('issuerName')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="收票单位">{{
+              detailValue('receiverName')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="票面金额">{{
+              formatMoney(detailDialog.row.faceAmount)
+            }}</el-descriptions-item>
+            <el-descriptions-item label="可用余额">{{
+              formatMoney(detailDialog.row.availableBalance)
+            }}</el-descriptions-item>
+            <el-descriptions-item label="出票日期">{{
+              detailValue('issueDate')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="到期日期">{{
+              detailValue('maturityDate')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="出票行">{{
+              detailValue('issuingBank')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="可用部门">{{
+              detailValue('availableDeptNames')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="费用承担方">{{
+              detailValue('feeBearerName')
+            }}</el-descriptions-item>
+            <el-descriptions-item label="银行贴现参考率">
+              {{ formatRate(detailDialog.row.bankDiscountReferenceRate) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="双方确认贴现率">
+              {{ formatRate(detailDialog.row.confirmedDiscountRate) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="预计贴现费用">
+              {{ formatMoney(estimatedDiscountFee()) }}
+            </el-descriptions-item>
+            <el-descriptions-item label="备注" :span="3">
+              {{ detailValue('remark') }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </section-card>
+        <section-card title="使用记录">
+          <el-table :data="detailDialog.usageRecords" border>
+            <el-table-column type="index" label="序号" width="64" align="center" />
+            <el-table-column prop="applicationNo" label="申请单号" min-width="180" align="center" />
+            <el-table-column label="使用金额" min-width="150" align="right">
+              <template #default="{ row }">{{ formatMoney(row.usedAmount) }}</template>
+            </el-table-column>
+            <el-table-column prop="useDeptName" label="使用部门" min-width="180" align="center" />
+            <el-table-column prop="statusName" label="状态" min-width="120" align="center" />
+          </el-table>
+          <el-empty v-if="!detailDialog.usageRecords.length" description="暂无使用记录" />
+        </section-card>
+      </div>
+    </el-dialog>
   </basic-container>
 </template>
 
 <script>
 import * as api from '@/api/payment/billLedger';
+import * as billPaymentApi from '@/api/payment/billPayment';
 import BillLedgerSearch from './components/bill-ledger-search.vue';
 import BillLedgerTable from './components/bill-ledger-table.vue';
 
@@ -45,6 +118,7 @@ export default {
       rows: [],
       loading: false,
       page: { current: 1, size: 10, total: 0 },
+      detailDialog: { visible: false, loading: false, row: {}, usageRecords: [] },
     };
   },
   mounted() {
@@ -89,6 +163,31 @@ export default {
     openCreate() {
       this.$router.push({ path: '/payment/bill-ledger/form', query: { mode: 'add' } });
     },
+    async openView(row) {
+      this.detailDialog = { visible: true, loading: true, row: { ...row }, usageRecords: [] };
+      try {
+        const [detailResponse, paymentResponse] = await Promise.all([
+          api.getDetail(row.id),
+          billPaymentApi.getList(1, 1000, { billLedgerId: row.id }),
+        ]);
+        const detail = this.unwrapData(detailResponse) || {};
+        const paymentData = this.unwrapData(paymentResponse) || {};
+        const paymentRows = paymentData.records || (Array.isArray(paymentData) ? paymentData : []);
+        const sourceRecords = paymentRows.length ? paymentRows : detail.usageRecords || [];
+        this.detailDialog.row = { ...row, ...detail };
+        this.detailDialog.usageRecords = sourceRecords.map(item => ({
+          ...item,
+          applicationNo: item.applicationNo || item.paymentNo || '-',
+          usedAmount: Number(item.usedAmount || 0),
+          useDeptName: item.useDeptName || item.deptName || '-',
+          statusName: item.statusName || item.approvalStatusName || '已审核',
+        }));
+      } catch (error) {
+        this.$message.error('票据详情加载失败，请稍后重试');
+      } finally {
+        this.detailDialog.loading = false;
+      }
+    },
     openEdit(row) {
       this.$router.push({
         path: '/payment/bill-ledger/form',
@@ -111,6 +210,26 @@ export default {
       this.page.size = size;
       this.loadData();
     },
+    detailValue(...fields) {
+      const value = fields
+        .map(field => this.detailDialog.row?.[field])
+        .find(item => item !== undefined && item !== null && item !== '');
+      return value === undefined ? '-' : value;
+    },
+    formatMoney(value) {
+      return Number(value || 0).toFixed(2);
+    },
+    formatRate(value) {
+      if (Number(value) === -1) return '';
+      return value === null || value === undefined || value === '' ? '-' : `${Number(value)}%`;
+    },
+    estimatedDiscountFee() {
+      return (
+        (Number(this.detailDialog.row.faceAmount || 0) *
+          Number(this.detailDialog.row.confirmedDiscountRate || 0)) /
+        100
+      );
+    },
   },
 };
 </script>