vue3-element-plus-app-chu 0.0.13 → 0.0.15

package/src/view/dcps/estimation/api.ts

@@ -1,159 +1,29 @@
-import { postDigitalRmb } from '@/utils/digital-rmb-request'
-import type { ApiResponse } from '@/utils/request'
-import type {
-  EstimationAmounts, EstimationHistory, EstimationPredRow, EstimationQueryParams, EstimationTranRow,
-  Tam140503001InBody, Tam140503001OutBody, Tam140503002InBody, Tam140503002OutBody,
-  Tam140503003InBody, Tam140503003OutBody, Tam140503004InBody, Tam140503004OutBody,
-} from './typs'
+import baseHttpClient from "@chic/http"
 
-/**
- * 数字人民币头寸匡算页面接口与共用工具。
- * 接口地址：查询 140503001、导出 140503002、详情 140503003、历史预计调拨金额 140503004；
- * 请求报文和接口类型均在本模块内维护。
- */
-const API = {
+export default {
   /**
-   * 匡算查询（140503001）。
-   * @param params tranDate 为交易日期；predictAllotInAmt、predictAllotOutAmt
-   * 为今日预计调拨收入、支付金额。返回十个单元格金额，C11、D11 回显本次输入。
+   * 查询数字人民币头寸匡算结果。
+   * @param params 查询参数：tranDate 为交易日期（YYYYMMDD），
+   * predictAllotInAmt、predictAllotOutAmt 为今日预计调拨收入、支出金额。
+   * 返回 B15、C3、C6、C7、C8、C11、D6、D7、D8、D11 十个单元格金额。
    */
-  queryListApi: (params: EstimationQueryParams) =>
-    postDigitalRmb<Tam140503001InBody, Tam140503001OutBody>('/TAM/0001/140503001', params),
-
+  queryListApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140503001", params),
   /**
-   * 匡算导出（140503002）：入参与查询完全一致，响应只有 fileName。
-   * 下载协议待文件服务确认，页面导出按钮暂未接线。
+   * 导出数字人民币头寸匡算结果。
+   * @param params 导出参数与查询一致：tranDate、predictAllotInAmt、predictAllotOutAmt；
+   * 响应只返回导出文件名 fileName。
    */
-  exportApi: (params: EstimationQueryParams) =>
-    postDigitalRmb<Tam140503002InBody, Tam140503002OutBody>('/TAM/0001/140503002', params),
-
+  exportApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140503002", params),
   /**
-   * 匡算详情（140503003）。
-   * @param params position 为报表单元格位置编码，tranDate 为交易日期；
-   * 返回该单元格对应的预报列表、流水列表和总条数。
+   * 查询匡算单元格明细。
+   * @param params 查询参数：position 为单元格位置编码，tranDate 为交易日期（YYYYMMDD）。
+   * 响应包含预报明细 predList、流水明细 tranList 和总条数 totalCount。
    */
-  getDetailApi: (params: Tam140503003InBody) =>
-    postDigitalRmb<Tam140503003InBody, Tam140503003OutBody>('/TAM/0001/140503003', params),
-
+  getDetailApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140503003", params),
   /**
-   * 历史预计调拨金额查询（140503004）。
-   * @param tranDate 交易日期。返回该日期的预计调拨收支金额，用于预填查询条件。
+   * 查询指定日期的历史预计调拨金额，用于预填查询条件。
+   * @param tranDate 交易日期，格式为 YYYYMMDD。
    */
   queryHistoryApi: (tranDate: string) =>
-    postDigitalRmb<Tam140503004InBody, Tam140503004OutBody>('/TAM/0001/140503004', { tranDate }),
-}
-
-/** 校验公共响应头；retCode 不是 00000 时按服务端提示或 fallback 抛错。 */
-export function ensureSuccess<T>(response: ApiResponse<T>, fallback: string): T | null {
-  if (response?.head?.retCode !== '00000') {
-    throw new Error(response?.head?.retMsg?.trim() || fallback)
-  }
-  return response.body
-}
-
-/** 提取可展示的错误信息；无法识别时给出统一提示。 */
-export function getErrorMessage(error: unknown): string {
-  if (error instanceof Error && error.message.trim()) return error.message
-  if (typeof error === 'string' && error.trim()) return error
-  return '操作失败，请稍后重试'
-}
-
-/** 业务日期始终按上海时区生成，不依赖浏览器所在时区，格式为 YYYYMMDD。 */
-export function getToday(): string {
-  const parts = new Intl.DateTimeFormat('en-CA', {
-    timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit',
-  }).formatToParts(new Date())
-  const read = (type: Intl.DateTimeFormatPartTypes) => parts.find((part) => part.type === type)?.value || ''
-  return read('year') + read('month') + read('day')
+    baseHttpClient.post<any>("/TAM/0001/140503004", { tranDate })
 }
-
-/** 判断是否为合法的 YYYYMMDD 日期。 */
-export function isValidDate(value: string): boolean {
-  if (!/^\d{8}$/.test(value)) return false
-  const year = Number(value.slice(0, 4))
-  const month = Number(value.slice(4, 6))
-  const day = Number(value.slice(6, 8))
-  if (year < 1 || month < 1 || month > 12 || day < 1) return false
-  const leap = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
-  const monthDays = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-  return day <= (monthDays[month - 1] || 0)
-}
-
-/** 只接受十进制文本和合法千分位；保留全部小数位，避免改变输入精度。 */
-export function normalizeAmount(value: string): string {
-  let text = value.trim()
-  if (text.includes(',')) {
-    if (!/^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text)) return ''
-    text = text.replace(/,/g, '')
-  }
-  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(text)
-  if (!match || (!match[2] && !match[3])) return ''
-  const integer = (match[2] || '0').replace(/^0+(?=\d)/, '')
-  const fraction = match[3] || ''
-  const negative = match[1] === '-' && /[1-9]/.test(integer + fraction)
-  return `${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`
-}
-
-/** 千分位展示至少两位小数，超过两位的小数原样保留，不做浮点数转换或舍入。 */
-export function formatAmount(value?: string): string {
-  const original = value?.trim() || ''
-  if (!original) return '—'
-  const normalized = normalizeAmount(original)
-  if (!normalized) return original
-  const negative = normalized.startsWith('-')
-  const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
-  const grouped = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  return `${negative ? '-' : ''}${grouped}.${fraction.padEnd(2, '0')}`
-}
-
-/**
- * 计算轧差（收入减支出）；任一金额无法解析时返回空字符串。
- * 两侧金额按小数位对齐后用 BigInt 相减，避免浮点误差；
- * emptyAsZero 为 true 时空文本按 0 参与计算（用于输入框的实时轧差）。
- */
-export function calcGapAmount(inAmt: string, outAmt: string, emptyAsZero = false): string {
-  const parse = (value: string) => {
-    if (!value?.trim() && emptyAsZero) value = '0'
-    const normalized = normalizeAmount(value)
-    if (!normalized) return null
-    const negative = normalized.startsWith('-')
-    const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
-    return { negative, integer, fraction }
-  }
-  const inPart = parse(inAmt)
-  const outPart = parse(outAmt)
-  if (!inPart || !outPart) return ''
-  const scale = Math.max(inPart.fraction.length, outPart.fraction.length)
-  const toScaled = (part: { negative: boolean; integer: string; fraction: string }): bigint => {
-    const digits = `${part.integer}${part.fraction.padEnd(scale, '0')}`
-    return BigInt(digits) * (part.negative ? -1n : 1n)
-  }
-  const diff = toScaled(inPart) - toScaled(outPart)
-  const negative = diff < 0n
-  const digits = (negative ? -diff : diff).toString().padStart(scale + 1, '0')
-  const integer = digits.slice(0, digits.length - scale)
-  const fraction = scale ? digits.slice(digits.length - scale) : ''
-  return formatAmount(`${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`)
-}
-
-/** 收支方向字典：I 来账、O 往账。 */
-export const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
-/** 支付渠道：预报与流水的数字人民币分别为 8、5；其余渠道保留原文。 */
-export const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
-/** 核销状态字典：1 未核销、2 已核销。 */
-export const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销' }
-/** 业务类型字典：201 兑回、202 兑出、203 付现；与核销预报使用同一套枚举。 */
-export const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
-
-/** 读取字典文案；空值显示横线，未登记的代码保留原文展示。 */
-export function dictLabel(labels: Record<string, string>, value?: string): string {
-  const text = value?.trim() || ''
-  return text ? labels[text] ?? text : '—'
-}
-
-/** 详情明细展示的统一空值处理；空值显示横线。 */
-export function displayText(value?: string): string {
-  return value?.trim() || '—'
-}
-
-export default API

package/src/view/dcps/estimation/index.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import API, {
-  calcGapAmount, ensureSuccess, formatAmount, getErrorMessage, getToday, isValidDate, normalizeAmount,
-} from './api'
-import EstimationDetailDialog from './components/EstimationDetailDialog.vue'
-import type { EstimationAmounts, EstimationCell, EstimationQueryParams } from './typs'
+import API from './api'
+import type {
+  EstimationAmounts, EstimationCell, EstimationPredRow, EstimationQueryParams, EstimationTranRow,
+} from './typs'
+
+defineOptions({ name: 'DcpsEstimationPage' })
 
 // 数字人民币头寸匡算页面：
 // 查询条件为交易日期加上今日预计调拨收入、支出金额；交易日期变化后调用
@@ -30,6 +31,112 @@ const cellLabels: Record<string, string> = {
   B15: '当日实时余额',
 }
 
+// ---------- 页面内工具函数 ----------
+
+/** 提取可展示的错误信息；无法识别时给出统一提示。 */
+const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error && error.message.trim()) return error.message
+  if (typeof error === 'string' && error.trim()) return error
+  return '操作失败，请稍后重试'
+}
+
+/** 业务日期始终按上海时区生成，不依赖浏览器所在时区，格式为 YYYYMMDD。 */
+const getToday = (): string => {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit',
+  }).formatToParts(new Date())
+  const read = (type: Intl.DateTimeFormatPartTypes) => parts.find((part) => part.type === type)?.value || ''
+  return read('year') + read('month') + read('day')
+}
+
+/** 判断是否为合法的 YYYYMMDD 日期。 */
+const isValidDate = (value: string): boolean => {
+  if (!/^\d{8}$/.test(value)) return false
+  const year = Number(value.slice(0, 4))
+  const month = Number(value.slice(4, 6))
+  const day = Number(value.slice(6, 8))
+  if (year < 1 || month < 1 || month > 12 || day < 1) return false
+  const leap = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
+  const monthDays = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  return day <= (monthDays[month - 1] || 0)
+}
+
+/** 只接受十进制文本和合法千分位；保留全部小数位，避免改变输入精度。 */
+const normalizeAmount = (value: string): string => {
+  let text = value.trim()
+  if (text.includes(',')) {
+    if (!/^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text)) return ''
+    text = text.replace(/,/g, '')
+  }
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(text)
+  if (!match || (!match[2] && !match[3])) return ''
+  const integer = (match[2] || '0').replace(/^0+(?=\d)/, '')
+  const fraction = match[3] || ''
+  const negative = match[1] === '-' && /[1-9]/.test(integer + fraction)
+  return `${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`
+}
+
+/** 千分位展示至少两位小数，超过两位的小数原样保留，不做浮点数转换或舍入。 */
+const formatAmount = (value?: string): string => {
+  const original = value?.trim() || ''
+  if (!original) return '—'
+  const normalized = normalizeAmount(original)
+  if (!normalized) return original
+  const negative = normalized.startsWith('-')
+  const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
+  const grouped = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return `${negative ? '-' : ''}${grouped}.${fraction.padEnd(2, '0')}`
+}
+
+/**
+ * 计算轧差（收入减支出）；任一金额无法解析时返回空字符串。
+ * emptyAsZero 为 true 时空文本按 0 参与计算（用于输入框的实时轧差）。
+ */
+const calcGapAmount = (inAmt: string, outAmt: string, emptyAsZero = false): string => {
+  const parse = (value: string) => {
+    if (!value?.trim() && emptyAsZero) value = '0'
+    const normalized = normalizeAmount(value)
+    if (!normalized) return null
+    const negative = normalized.startsWith('-')
+    const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
+    return { negative, integer, fraction }
+  }
+  const inPart = parse(inAmt)
+  const outPart = parse(outAmt)
+  if (!inPart || !outPart) return ''
+  const scale = Math.max(inPart.fraction.length, outPart.fraction.length)
+  const toScaled = (part: { negative: boolean; integer: string; fraction: string }): bigint => {
+    const digits = `${part.integer}${part.fraction.padEnd(scale, '0')}`
+    return BigInt(digits) * (part.negative ? -1n : 1n)
+  }
+  const diff = toScaled(inPart) - toScaled(outPart)
+  const negative = diff < 0n
+  const digits = (negative ? -diff : diff).toString().padStart(scale + 1, '0')
+  const integer = digits.slice(0, digits.length - scale)
+  const fraction = scale ? digits.slice(digits.length - scale) : ''
+  return formatAmount(`${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`)
+}
+
+/** 收支方向字典：I 来账、O 往账。 */
+const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
+/** 支付渠道：预报与流水的数字人民币分别为 8、5；其余渠道保留原文。 */
+const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
+/** 核销状态字典：1 未核销、2 已核销。 */
+const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销' }
+/** 业务类型字典：201 兑回、202 兑出、203 付现；与核销预报使用同一套枚举。 */
+const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
+
+/** 读取字典文案；空值显示横线，未登记的代码保留原文展示。 */
+const dictLabel = (labels: Record<string, string>, value?: string): string => {
+  const text = value?.trim() || ''
+  return text ? labels[text] ?? text : '—'
+}
+
+/** 详情明细展示的统一空值处理；空值显示横线。 */
+const displayText = (value?: string): string => value?.trim() || '—'
+
+// ---------- 匡算报表 ----------
+
 // 读取接口金额文本；未返回的编码保持空字符串，展示为空白。
 const amountOf = (position: string): string => {
   const source = amounts.value as unknown as Record<string, unknown> | null
@@ -165,9 +272,57 @@ const submitQuery = async () => {
   }
 }
 
-// 详情弹窗状态：cell 为被单击的报表单元格。
+// ---------- 单元格明细弹窗 ----------
+
+// 弹窗状态：cell 为被单击的报表单元格；明细请求在弹窗打开时发起。
 const detailVisible = ref(false)
 const detailCell = ref<EstimationCell | null>(null)
+const detailPredList = ref<EstimationPredRow[]>([])
+const detailTranList = ref<EstimationTranRow[]>([])
+const detailTotalCount = ref('')
+const detailLoading = ref(false)
+const detailHasError = ref(false)
+let detailRequestId = 0
+
+/** 查询单元格明细；cell 或交易日期缺失时不发起请求，直接呈现空态。 */
+const loadDetailInfo = async () => {
+  const position = detailCell.value?.position?.trim()
+  const date = queriedTranDate.value.trim()
+  if (!position || !date) return
+  const currentRequestId = ++detailRequestId
+  detailLoading.value = true
+  try {
+    const { head, body } = await API.getDetailApi({ position, tranDate: date }) as any
+    if (currentRequestId !== detailRequestId || disposed) return
+    if (head?.retCode !== '00000') {
+      throw new Error(head?.retMsg || '查询失败')
+    }
+    detailPredList.value = Array.isArray(body?.predList) ? body.predList : []
+    detailTranList.value = Array.isArray(body?.tranList) ? body.tranList : []
+    detailTotalCount.value = String(body?.totalCount ?? '').trim()
+    detailHasError.value = false
+  } catch (error) { // error 为详情请求或响应数据校验异常。
+    if (currentRequestId !== detailRequestId || disposed) return
+    detailPredList.value = []
+    detailTranList.value = []
+    detailTotalCount.value = ''
+    detailHasError.value = true
+    ElMessage.error(getErrorMessage(error))
+  } finally {
+    if (currentRequestId === detailRequestId) detailLoading.value = false
+  }
+}
+
+/** 关闭弹窗：重置明细并让未完成的请求失效。 */
+const closeDetail = () => {
+  detailVisible.value = false
+  detailRequestId += 1
+  detailPredList.value = []
+  detailTranList.value = []
+  detailTotalCount.value = ''
+  detailHasError.value = false
+  detailLoading.value = false
+}
 
 /** 打开单元格明细弹窗；结果就绪前其余单元格为占位横线，不发起详情查询。 */
 const openDetail = (cell?: EstimationCell) => {
@@ -176,12 +331,19 @@ const openDetail = (cell?: EstimationCell) => {
   detailVisible.value = true
 }
 
+/** 合并预报、流水列表得到明细总条数；接口 totalCount 缺失时按列表长度兜底展示。 */
+const resolveTotal = () => {
+  if (/^\d+$/.test(detailTotalCount.value)) return detailTotalCount.value
+  return String(detailPredList.value.length + detailTranList.value.length)
+}
+
 // 页面首次显示时按默认日期预填预计调拨收支金额。
 onMounted(prefillHistory)
 // 页面离开后，未完成的预填请求不再更新表单或弹出消息。
 onBeforeUnmount(() => {
   disposed = true
   prefillRequestId += 1
+  detailRequestId += 1
 })
 </script>
 
@@ -353,23 +515,132 @@ onBeforeUnmount(() => {
     </el-card>
 
     <!-- 单元格明细弹窗：按位置编码查询预报与流水列表。 -->
-    <EstimationDetailDialog v-model="detailVisible" :cell="detailCell" :tran-date="queriedTranDate" />
+    <el-dialog
+      v-model="detailVisible"
+      :title="detailCell ? `匡算明细 - ${detailCell.label}` : '匡算明细'"
+      width="min(1080px, calc(100vw - 32px))"
+      top="16px"
+      append-to-body
+      destroy-on-close
+      @open="loadDetailInfo"
+      @closed="closeDetail"
+    >
+      <el-scrollbar class="detail-scrollbar">
+        <div class="detail-content">
+          <!-- 上下文摘要：被点击单元格的位置、金额与详情查询的交易日期。 -->
+          <header class="detail-summary">
+            <div>
+              <span class="detail-label">位置编码</span>
+              <strong class="detail-position">{{ detailCell?.position || '—' }}</strong>
+            </div>
+            <div>
+              <span class="detail-label">单元格金额（元）</span>
+              <strong class="detail-amount">{{ formatAmount(detailCell?.amount) }}</strong>
+            </div>
+            <div>
+              <span class="detail-label">交易日期</span>
+              <strong>{{ queriedTranDate }}</strong>
+            </div>
+            <div class="detail-reference">
+              <span class="detail-label">明细总条数</span>
+              <strong>{{ resolveTotal() }}</strong>
+            </div>
+          </header>
+
+          <div v-loading="detailLoading" class="detail-tables">
+            <!-- 预报信息明细；列表为空时展示统一空态。 -->
+            <div class="dialog-section-title">预报信息</div>
+            <el-table :data="detailPredList" size="small" border max-height="240px" empty-text="暂无预报信息">
+              <el-table-column label="预报流水号" min-width="150" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.predRefNo) }}</template>
+              </el-table-column>
+              <el-table-column label="业务类型" width="90" align="center">
+                <template #default="{ row }">{{ dictLabel(busiTypeLabels, row.busiType) }}</template>
+              </el-table-column>
+              <el-table-column label="客户名称" min-width="140" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.clientName) }}</template>
+              </el-table-column>
+              <el-table-column label="交易对手名称" min-width="140" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.competName) }}</template>
+              </el-table-column>
+              <el-table-column label="收支方向" width="80" align="center">
+                <template #default="{ row }">{{ dictLabel(payDirecLabels, row.payDirec) }}</template>
+              </el-table-column>
+              <el-table-column label="支付渠道" width="110" align="center">
+                <template #default="{ row }">{{ dictLabel(payChannelLabels, row.payChannel) }}</template>
+              </el-table-column>
+              <el-table-column label="预报金额（元）" width="140" align="right">
+                <template #default="{ row }"><span class="amount-cell">{{ formatAmount(row.predAmt) }}</span></template>
+              </el-table-column>
+              <el-table-column label="已核销金额（元）" width="140" align="right">
+                <template #default="{ row }"><span class="amount-cell">{{ formatAmount(row.verifyAmt) }}</span></template>
+              </el-table-column>
+              <el-table-column label="核销状态" width="90" align="center">
+                <template #default="{ row }">{{ dictLabel(verifyStatusLabels, row.verifyStatus) }}</template>
+              </el-table-column>
+              <el-table-column label="落地支行" min-width="130" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.groundBranch) }}</template>
+              </el-table-column>
+              <el-table-column label="上级单位" min-width="130" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.upOrg) }}</template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 流水信息明细；失败的详情可重新打开弹窗重试。 -->
+            <div class="dialog-section-title">流水信息</div>
+            <el-table :data="detailTranList" size="small" border max-height="240px" empty-text="暂无流水信息">
+              <el-table-column label="交易参考号" min-width="150" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.refNo) }}</template>
+              </el-table-column>
+              <el-table-column label="业务类型" width="90" align="center">
+                <template #default="{ row }">{{ dictLabel(busiTypeLabels, row.busiType) }}</template>
+              </el-table-column>
+              <el-table-column label="付款人名称" min-width="140" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.payerName) }}</template>
+              </el-table-column>
+              <el-table-column label="收款人名称" min-width="140" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.payeeName) }}</template>
+              </el-table-column>
+              <el-table-column label="收支方向" width="80" align="center">
+                <template #default="{ row }">{{ dictLabel(payDirecLabels, row.payDirec) }}</template>
+              </el-table-column>
+              <el-table-column label="支付渠道" width="110" align="center">
+                <template #default="{ row }">{{ dictLabel(payChannelLabels, row.payChannel) }}</template>
+              </el-table-column>
+              <el-table-column label="金额（元）" width="140" align="right">
+                <template #default="{ row }"><span class="amount-cell">{{ formatAmount(row.amt) }}</span></template>
+              </el-table-column>
+              <el-table-column label="核销状态" width="90" align="center">
+                <template #default="{ row }">{{ dictLabel(verifyStatusLabels, row.verifyStatus) }}</template>
+              </el-table-column>
+              <el-table-column label="落地支行" min-width="130" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.groundBranch) }}</template>
+              </el-table-column>
+              <el-table-column label="上级单位" min-width="130" show-overflow-tooltip>
+                <template #default="{ row }">{{ displayText(row.upOrg) }}</template>
+              </el-table-column>
+            </el-table>
+
+            <div v-if="detailHasError" class="detail-retry">详情查询失败，关闭弹窗后重新打开可重试。</div>
+          </div>
+        </div>
+      </el-scrollbar>
+      <template #footer>
+        <el-button @click="closeDetail">关闭</el-button>
+      </template>
+    </el-dialog>
   </main>
 </template>
 
 <style scoped>
 /* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，内容由报表卡片承载。 */
 .dcps-page {
-  /* 手动修改这里：顶部导航/页签 + 底部状态栏 + 宿主上下留白的合计高度。
-     独立页面保持 0px；例如顶部 90px、底部 24px、上下留白 6px，填写 120px。
-     不包含浏览器标签栏、地址栏，也不包含本页面自身的 padding。 */
-  --host-layout-height: 0px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 5px;
-  height: calc(100vh - var(--host-layout-height));
-  height: calc(100dvh - var(--host-layout-height));
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
   min-height: 0;
   min-width: 0;
   padding: 5px;
@@ -481,4 +752,32 @@ td.report-data--input { padding: 5px 8px; }
   font-size: 10px;
   letter-spacing: 0.02em;
 }
+
+/* ---------- 单元格明细弹窗 ---------- */
+.detail-scrollbar { max-height: calc(100vh - 240px); }
+.detail-content { padding: 2px 4px 4px; }
+
+/* 摘要区：位置编码、金额、日期放在一行，便于确认明细上下文。 */
+.detail-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 36px;
+  margin-bottom: 12px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--el-fill-color-light);
+}
+.detail-label { display: block; margin-bottom: 5px; color: var(--el-text-color-secondary); font-size: 11px; }
+.detail-summary strong { overflow-wrap: anywhere; font-size: 13px; }
+.detail-amount { color: var(--el-color-primary-dark-2); font-variant-numeric: tabular-nums; }
+.detail-reference { margin-left: auto; }
+.detail-reference strong { font-weight: 600; }
+
+.dialog-section-title { margin: 12px 0 6px; color: var(--el-text-color-regular); font-size: 13px; font-weight: 600; }
+.detail-tables .el-table + .el-table { margin-top: 2px; }
+.detail-tables { min-height: 160px; }
+.detail-tables .dialog-section-title:first-child { margin-top: 0; }
+.amount-cell { color: var(--el-text-color-primary); font-variant-numeric: tabular-nums; }
+.detail-retry { margin-top: 10px; color: var(--el-color-danger); font-size: 12px; text-align: center; }
 </style>