vue3-element-plus-app-chu 0.0.32 → 0.0.34

package/README.md

@@ -38,7 +38,7 @@ pnpm dev:backend  # 只启动 verce-vue-test/backend 后端
 
 页面通过公共请求层读取 TAM 的 `head/body`，统一响应的解包与兼容处理由 `src/utils/request.ts` 负责。指定后端用于替代前端 mock；数字人民币核销、修改和撤销核销按顺序直接更新数据库，单机 MongoDB 即可使用。`head.consumerSeqNo` 可选，传入时支持相同请求重试；原金额和状态快照校验仍保留。注资发起只保存 `PENDING` / `NOT_SENT` 待处理记录，不调整账户余额；预报导入当前返回 `501`。业务校验、数据保存和导入导出均以指定后端的实时文档及实现为准。
 
-数字人民币页面的业务类型使用 `201/202/203` 字典，新增预报不提交 `predName`；核销预报方向使用 `1/2`，待核销查询包含状态 `1/3`，展示交易对手账号；流水可按业务类型筛选并读取 `tranStatus`；注资明细支持起止交易日期；授权页展示业务类型中文名称。匡算明细展示部分核销状态。字段及页面接口映射见 [数字人民币接口摘录](docs/digital-rmb-apis.md)，当前接口约束以实时文档为准。
+数字人民币页面的业务类型使用 `201/202/203` 字典，新增预报不提交 `predName`；项目内预报收支方向统一使用 `1` 收入、`2` 支出，流水统一使用 `I` 收入、`O` 支出，查询、请求和结果展示均按各自编码处理。核销预报待核销查询包含状态 `1/3`，展示交易对手账号；流水可按业务类型筛选并读取 `tranStatus`；注资明细支持起止交易日期；授权页展示业务类型中文名称。匡算明细展示部分核销状态。字段及页面接口映射见 [数字人民币接口摘录](docs/digital-rmb-apis.md)，当前接口约束以实时文档为准。
 
 独立页面 `/flow-query` 的普通查询、初次加载、分页和刷新与核销页面的流水信息共用 `/TAM/0001/140502002`，参数保持一致：交易日期 `tranDate` 必填且默认取共用业务日期，可按业务类型、我方机构、付款人、收款人、收支方向、金额范围和核销状态筛选，未填写的可选条件不提交。列表读取 `resultList` 和字符串类型的 `totalCount`，字段沿用核销流水模型。「查询」「实时查询流水」与「重置」按钮并排放在查询条件区末尾。「实时查询流水」单独调用 `/TAM/0001/140504002`，只携带公共分页参数 `pageIndex: 1`、`pageSize: 1`，业务请求体为空；成功提示“操作成功”，失败仅记录控制台，不更新列表。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-element-plus-app-chu",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "private": false,
   "type": "module",
   "files": [

package/src/view/dcps/README.md

@@ -20,11 +20,11 @@
 
 接口统一使用 `/Users/bombingpig/WebstormProjects/verce-vue-test/backend`，以 [Scalar 文档](http://localhost:3011/oms/docs) 和 [OpenAPI JSON](http://localhost:3011/oms/openapi.json) 为准。服务前缀为 `/oms`，前端开发代理将 `/TAM`、`/api`、`/nacos` 转发到 `http://localhost:3011/oms`。本项目已移除原 `backend/`；仓库内 `docs/digital-rmb.openapi.json` 为字段摘录。
 
-预报新增必填 `busiType`、`predAmt`、`tranDate`、`payDirec`，业务类型字典为 `201` 兑回、`202` 兑出、`203` 付现；新增和修改不提交 `predName`、`billNo`、`billDate`。客户和机构等字段选填，`payChannel` 缺省为 `8`，`predDate` 缺省为后端当天日期。核销预报查询使用方向 `1/2`，待核销传 `verifyStatusList: ['1', '3']`，已核销传 `['2']`；预报管理和流水方向保持各自原协议。核销页流水查询使用 `busiType`，读取 `tranStatus`（`S/P/F`），展示核销状态 `3` 部分核销。注资明细提供 `txnDtStart`、`txnDtEnd` 筛选。字段摘录及页面接口映射见 `docs/digital-rmb-apis.md`，业务校验与保存行为由指定后端负责。
+预报新增必填 `busiType`、`predAmt`、`tranDate`、`payDirec`，业务类型字典为 `201` 兑回、`202` 兑出、`203` 付现；新增和修改不提交 `predName`、`billNo`、`billDate`。客户和机构等字段选填，`payChannel` 缺省为 `8`，`predDate` 缺省为后端当天日期。项目内预报收支方向统一为 `1` 收入、`2` 支出，流水统一为 `I` 收入、`O` 支出；预报管理、核销预报和匡算预报明细按 `1/2` 处理，流水查询、核销流水和匡算流水明细按 `I/O` 处理。核销预报待核销传 `verifyStatusList: ['1', '3']`，已核销传 `['2']`。核销页流水查询使用 `busiType`，读取 `tranStatus`（`S/P/F`），展示核销状态 `3` 部分核销。注资明细提供 `txnDtStart`、`txnDtEnd` 筛选。字段摘录及页面接口映射见 `docs/digital-rmb-apis.md`，业务校验与保存行为由指定后端负责。
 
-当前核销预报 API 将页面 `1/2` 方向与后端实现的 `I/O` 双向转换；核销写操作提交公共 `consumerSeqNo`、原状态和原金额快照。后端作为替代前端 mock 的本地测试服务，核销、修改和撤销核销按顺序直接更新数据库，各种 MongoDB 部署模式均不启动事务。`consumerSeqNo` 可选，缺省时后端生成，传入时支持相同请求重试；快照校验和关联撤回逻辑仍保留。注资明细使用服务端分页；发起注资只保存 `PENDING` / `NOT_SENT` 记录，不改变余额。参数接口当前由 `swaggerStub` 返回静态兼容数据，不持久化参数增删改。
+核销预报 API 按 `1/2` 原值提交并读取方向，流水 API 按 `I/O` 原值提交并读取方向；核销写操作提交公共 `consumerSeqNo`、原状态和原金额快照。后端作为替代前端 mock 的本地测试服务，核销、修改和撤销核销按顺序直接更新数据库，各种 MongoDB 部署模式均不启动事务。`consumerSeqNo` 可选，缺省时后端生成，传入时支持相同请求重试；快照校验和关联撤回逻辑仍保留。注资明细使用服务端分页；发起注资只保存 `PENDING` / `NOT_SENT` 记录，不改变余额。参数接口当前由 `swaggerStub` 返回静态兼容数据，不持久化参数增删改。
 
-独立流水查询页面 `/flow-query` 的普通查询、初次加载、分页和刷新复用核销页的 `queryFlowApi`（`140502002`）与流水模型，读取 `resultList` 和字符串类型的 `totalCount`。查询参数与核销页流水信息保持一致：`tranDate` 必填，默认取 `dcpsRuntime.date`；可选条件为 `busiType`、`orgName`、`payerName`、`payeeName`、`payDirec`（I/O）、`startTransAmt`、`endTransAmt` 和 `verifyStatus`（1/2），空条件不发送；分页放在公共请求头。「查询」「实时查询流水」与「重置」按钮并排放在查询条件区末尾。「实时查询流水」通过独立的 `queryRealtimeFlowApi` 调用 `140504002`，只传公共分页 `pageIndex: 1`、`pageSize: 1`，业务请求体为空；成功提示“操作成功”，失败仅记录控制台，不改变表格和分页。
+独立流水查询页面 `/flow-query` 的普通查询、初次加载、分页和刷新复用核销页的 `queryFlowApi`（`140502002`）与流水模型，读取 `resultList` 和字符串类型的 `totalCount`。查询参数与核销页流水信息保持一致：`tranDate` 必填，默认取 `dcpsRuntime.date`；可选条件为 `busiType`、`orgName`、`payerName`、`payeeName`、`payDirec`（`I` 收入、`O` 支出）、`startTransAmt`、`endTransAmt` 和 `verifyStatus`（1/2），空条件不发送；分页放在公共请求头。「查询」「实时查询流水」与「重置」按钮并排放在查询条件区末尾。「实时查询流水」通过独立的 `queryRealtimeFlowApi` 调用 `140504002`，只传公共分页 `pageIndex: 1`、`pageSize: 1`，业务请求体为空；成功提示“操作成功”，失败仅记录控制台，不改变表格和分页。
 
 ## 命名约定
 

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

@@ -21,11 +21,11 @@ const tableSize = 'small'
 // 单击可查看明细的金额单元格按位置编码查询详情（140503003）。
 
 // 金额字段编码与图中报表位置的对应关系：
-// C3 数币账户昨日余额；C6/D6 报备金额；C7/D7 未核销金额；
+// C3 数字人民币账户昨日余额；C6/D6 报备金额；C7/D7 未核销金额；
 // C8/D8 未核销业务流水；C9 日初可用资金（前端计算：C3 + C6 - D6 + C8 - D8）；
 // C11/D11 今日预计调拨金额（查询条件输入框，不查详情）；
-// C12 数币账户预留金额（前端计算：C9 + C11 - D11）；
-// B15 当日实时余额。C3、C9、C12、B15 仅展示金额，不提供明细弹窗。
+// C12 数字人民币账户预留金额（前端计算：C9 + C11 - D11）；
+// B15 当日实时余额。C3、C9、C12、B15 仅展示金额，不提供明细查看。
 // 轧差列由前端按「收入减支出」计算：结果行随查询结果更新，
 // 调拨行随输入实时更新；两条空行按原型占位留空。
 
@@ -80,13 +80,9 @@ const formatAmount = (value?: string): string => {
   return `${negative ? '-' : ''}${grouped}.${fraction.padEnd(2, '0')}`
 }
 
-/**
- * 按各项系数精确计算金额合计；任一金额无法解析时返回空字符串。
- * emptyAsZero 为 true 时空文本按 0 参与计算（用于输入框的实时轧差）。
- */
-const calcTotalAmount = (terms: Array<[string, 1 | -1]>, emptyAsZero = false): string => {
+/** 按各项系数精确计算金额合计；任一金额为空或无法解析时返回空字符串。 */
+const calcTotalAmount = (terms: Array<[string, 1 | -1]>): string => {
   const parse = (value: string) => {
-    if (!value?.trim() && emptyAsZero) value = '0'
     const normalized = normalizeAmount(value)
     if (!normalized) return null
     const negative = normalized.startsWith('-')
@@ -113,11 +109,13 @@ const calcTotalAmount = (terms: Array<[string, 1 | -1]>, emptyAsZero = false): s
 }
 
 /** 计算轧差（收入减支出），与报表合计共用精确金额运算。 */
-const calcGapAmount = (inAmt: string, outAmt: string, emptyAsZero = false): string =>
-  calcTotalAmount([[inAmt, 1], [outAmt, -1]], emptyAsZero)
+const calcGapAmount = (inAmt: string, outAmt: string): string =>
+  calcTotalAmount([[inAmt, 1], [outAmt, -1]])
 
-/** 收支方向字典：I 来账、O 往账。 */
-const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
+/** 预报收支方向：1 收入、2 支出。 */
+const forecastPayDirecLabels: Record<string, string> = { '1': '收入', '2': '支出' }
+/** 流水收支方向：I 收入、O 支出。 */
+const flowPayDirecLabels: Record<string, string> = { I: '收入', O: '支出' }
 /** 支付渠道：预报与流水的数字人民币分别为 8、5；其余渠道保留原文。 */
 const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
 /** 与核销页面统一展示核销状态；部分核销记录仍可能出现在匡算明细中。 */
@@ -149,7 +147,7 @@ const amountText = (position: string): string => {
   return value ? formatAmount(value) : ''
 }
 
-/** 组装单元格对象供详情弹窗使用：位置编码、展示名称与当前金额一起带入。 */
+/** 组装单元格对象供详情页使用：位置编码、展示名称与当前金额一起带入。 */
 const cellOf = (position: string): EstimationCell => ({
   position,
   label: cellLabels[position] ?? position,
@@ -195,19 +193,20 @@ const gapText = (inPosition: string, outPosition: string): string => {
   return calcGapAmount(amountOf(inPosition), amountOf(outPosition))
 }
 
-/** 今日预计调拨金额行的实时轧差：随输入即时计算，空输入按 0 参与计算。 */
+/** 今日预计调拨金额行的实时轧差：随输入即时计算，任一输入为空时留空。 */
 const inputGapText = computed(() =>
-  calcGapAmount(queryForm.predictAllotInAmt, queryForm.predictAllotOutAmt, true))
+  calcGapAmount(queryForm.predictAllotInAmt, queryForm.predictAllotOutAmt))
 
-/** 数币账户预留金额 C12 = C3 + C6 - D6 + C8 - D8 + (C11 - D11)，随调拨输入实时更新。 */
+/** 数字人民币账户预留金额 C12 = C3 + C6 - D6 + C8 - D8 + (C11 - D11)，随调拨输入实时更新。 */
 const reservedBalanceText = computed(() =>
   calcTotalAmount([[openingBalanceText.value, 1], [inputGapText.value, 1]]))
 
-/** 校验金额文本：须为不小于 0、最多两位小数的十进制金额；返回错误提示文本。 */
+/** 提交时校验金额：不能为空，允许负数，最多保留两位小数。 */
 const checkAmount = (value: string): string => {
+  if (!value.trim()) return '请输入预计调拨金额'
   const normalized = normalizeAmount(value)
-  if (!normalized || normalized.startsWith('-') || (normalized.split('.')[1]?.length || 0) > 2) {
-    return '须为不小于 0 的金额，最多保留两位小数'
+  if (!normalized || (normalized.split('.')[1]?.length || 0) > 2) {
+    return '请输入有效金额，允许负数，最多保留两位小数'
   }
   return ''
 }
@@ -294,11 +293,14 @@ const submitExport = () => {
   console.log('[导出数字人民币头寸匡算参数]', params)
 }
 
-// ---------- 单元格明细弹窗 ----------
+// ---------- 单元格明细页 ----------
 
-// 弹窗状态：cell 为被单击的报表单元格；明细请求在弹窗打开时发起。
+// 在当前组件内切换报表与明细视图，保留报表查询条件和结果，不新增路由。
 const detailVisible = ref(false)
 const detailCell = ref<EstimationCell | null>(null)
+// 报备金额、未核销金额仅展示预报；未核销业务流水仅展示流水。
+const showPredDetail = computed(() => ['C6', 'C7', 'D6', 'D7'].includes(detailCell.value?.position || ''))
+const showTranDetail = computed(() => ['C8', 'D8'].includes(detailCell.value?.position || ''))
 const detailPredList = ref<EstimationPredRow[]>([])
 const detailTranList = ref<EstimationTranRow[]>([])
 const detailTotalCount = ref('')
@@ -332,27 +334,31 @@ const loadDetailInfo = async () => {
   }
 }
 
-/** 关闭弹窗：重置明细并让未完成的请求失效。 */
+/** 返回匡算报表：重置明细并让未完成的请求失效。 */
 const closeDetail = () => {
   detailVisible.value = false
   detailRequestId += 1
+  detailCell.value = null
   detailPredList.value = []
   detailTranList.value = []
   detailTotalCount.value = ''
   detailLoading.value = false
 }
 
-/** 打开单元格明细弹窗；结果就绪前其余单元格为占位横线，不发起详情查询。 */
+/** 打开单元格明细页并查询；结果未就绪时不切换视图或发起请求。 */
 const openDetail = (cell?: EstimationCell) => {
   if (!cell || !resultReady.value) return
   detailCell.value = cell
   detailVisible.value = true
+  void loadDetailInfo()
 }
 
-/** 合并预报、流水列表得到明细总条数；接口 totalCount 缺失时按列表长度兜底展示。 */
+/** 明细总条数优先使用接口 totalCount，缺失时仅统计当前展示的列表。 */
 const resolveTotal = () => {
   if (/^\d+$/.test(detailTotalCount.value)) return detailTotalCount.value
-  return String(detailPredList.value.length + detailTranList.value.length)
+  if (showPredDetail.value) return String(detailPredList.value.length)
+  if (showTranDetail.value) return String(detailTranList.value.length)
+  return '0'
 }
 
 // 页面首次显示时按默认日期预填预计调拨收支金额。
@@ -369,7 +375,7 @@ onBeforeUnmount(() => {
   <ElConfigProvider :size="tableSize">
   <main class="dcps-page">
     <!-- 顶部操作区：交易日期选择与导出、查询入口（收支金额在下方表格内填写）。 -->
-    <el-card class="estimation-header" shadow="never" :body-style="{ padding: '10px 14px' }">
+    <el-card v-show="!detailVisible" class="estimation-header" shadow="never" :body-style="{ padding: '10px 14px' }">
       <div class="estimation-heading">
         <div class="filter-field">
           <label>交易日期</label>
@@ -388,7 +394,7 @@ onBeforeUnmount(() => {
     </el-card>
 
     <!-- 匡算报表：合并单元格的头寸匡算表，与业务原型一致；表格常显，结果就绪前金额显示占位。 -->
-    <el-card class="estimation-report" shadow="never" :body-style="{ padding: '12px 14px' }">
+    <el-card v-show="!detailVisible" class="estimation-report" shadow="never" :body-style="{ padding: '12px 14px' }">
       <div class="report-scroll">
         <table class="report-table" :class="{ 'is-ready': resultReady }">
             <!-- 列：两个左侧标签列、收入、支付、轧差。 -->
@@ -402,7 +408,7 @@ onBeforeUnmount(() => {
               </tr>
               <!-- 前一日余额：C3 横跨收入、支付两列，右侧标注单位。 -->
               <tr>
-                <td colspan="2" class="report-label">数币账户昨日余额</td>
+                <td colspan="2" class="report-label">数字人民币账户昨日余额</td>
                 <td colspan="2" class="report-data">
                   <div class="report-value report-value--static">
                     <span class="report-amount">{{ amountText('C3') }}</span>
@@ -490,7 +496,6 @@ onBeforeUnmount(() => {
                   <el-input
                     v-model="queryForm.predictAllotInAmt"
                     class="report-input"
-                    inputmode="decimal"
                     placeholder="输入调拨收入金额"
                     :maxlength="40"
                     @input="formError.predictAllotInAmt = ''"
@@ -501,7 +506,6 @@ onBeforeUnmount(() => {
                   <el-input
                     v-model="queryForm.predictAllotOutAmt"
                     class="report-input"
-                    inputmode="decimal"
                     placeholder="输入调拨支出金额"
                     :maxlength="40"
                     @input="formError.predictAllotOutAmt = ''"
@@ -510,9 +514,9 @@ onBeforeUnmount(() => {
                 </td>
                 <td class="report-gap" title="轧差 = 收入 − 支出（前端计算）">{{ inputGapText }}</td>
               </tr>
-              <!-- 数币账户预留金额：C12 = C9 + C11 - D11，横跨收入、支付、轧差三列。 -->
+              <!-- 数字人民币账户预留金额：C12 = C9 + C11 - D11，横跨收入、支付、轧差三列。 -->
               <tr>
-                <td colspan="2" class="report-label">数币账户预留金额</td>
+                <td colspan="2" class="report-label">数字人民币账户预留金额</td>
                 <td colspan="3" class="report-data">
                   <div class="report-value report-value--static">
                     <span class="report-amount">{{ reservedBalanceText }}</span>
@@ -543,17 +547,20 @@ onBeforeUnmount(() => {
         </div>
     </el-card>
 
-    <!-- 单元格明细弹窗：按位置编码查询预报与流水列表。 -->
-    <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"
-    >
+    <!-- 单元格明细页：顶部返回报表，内容区展示对应的预报或流水列表。 -->
+    <template v-if="detailVisible">
+      <el-card class="estimation-header" shadow="never" :body-style="{ padding: '10px 14px' }">
+        <div class="detail-heading">
+          <el-button @click="closeDetail">
+            <svg class="detail-back-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M14 5l-7 7 7 7" />
+            </svg>
+            返回匡算
+          </el-button>
+          <h1 class="detail-title">{{ detailCell ? `匡算明细 - ${detailCell.label}` : '匡算明细' }}</h1>
+        </div>
+      </el-card>
+      <el-card class="detail-card" shadow="never" :body-style="{ padding: '12px 14px', height: '100%', boxSizing: 'border-box' }">
       <el-scrollbar class="detail-scrollbar">
         <div class="detail-content">
           <!-- 上下文摘要：被点击单元格的位置、金额与详情查询的交易日期。 -->
@@ -577,9 +584,9 @@ onBeforeUnmount(() => {
           </header>
 
           <div v-loading="detailLoading" class="detail-tables">
-            <!-- 预报信息明细；列表为空时展示统一空态。 -->
-            <div class="dialog-section-title">预报信息</div>
-            <el-table :data="detailPredList" :size="tableSize" border max-height="240px" empty-text="暂无预报信息">
+            <!-- C6/C7/D6/D7 仅展示预报信息；列表为空时展示统一空态。 -->
+            <div v-if="showPredDetail" class="detail-section-title">预报信息</div>
+            <el-table v-if="showPredDetail" :data="detailPredList" :size="tableSize" border empty-text="暂无预报信息">
               <el-table-column label="预报流水号" min-width="150" show-overflow-tooltip>
                 <template #default="{ row }">{{ displayText(row.predRefNo) }}</template>
               </el-table-column>
@@ -593,7 +600,7 @@ onBeforeUnmount(() => {
                 <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>
+                <template #default="{ row }">{{ dictLabel(forecastPayDirecLabels, row.payDirec) }}</template>
               </el-table-column>
               <el-table-column label="支付渠道" width="110" align="center">
                 <template #default="{ row }">{{ dictLabel(payChannelLabels, row.payChannel) }}</template>
@@ -615,9 +622,9 @@ onBeforeUnmount(() => {
               </el-table-column>
             </el-table>
 
-            <!-- 流水信息明细；失败的详情可重新打开弹窗重试。 -->
-            <div class="dialog-section-title">流水信息</div>
-            <el-table :data="detailTranList" :size="tableSize" border max-height="240px" empty-text="暂无流水信息">
+            <!-- C8/D8 仅展示流水信息；失败的详情可返回后重新打开重试。 -->
+            <div v-if="showTranDetail" class="detail-section-title">流水信息</div>
+            <el-table v-if="showTranDetail" :data="detailTranList" :size="tableSize" border empty-text="暂无流水信息">
               <el-table-column label="交易参考号" min-width="150" show-overflow-tooltip>
                 <template #default="{ row }">{{ displayText(row.refNo) }}</template>
               </el-table-column>
@@ -631,7 +638,7 @@ onBeforeUnmount(() => {
                 <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>
+                <template #default="{ row }">{{ dictLabel(flowPayDirecLabels, row.payDirec) }}</template>
               </el-table-column>
               <el-table-column label="支付渠道" width="110" align="center">
                 <template #default="{ row }">{{ dictLabel(payChannelLabels, row.payChannel) }}</template>
@@ -653,10 +660,8 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </el-scrollbar>
-      <template #footer>
-        <el-button @click="closeDetail">关闭</el-button>
-      </template>
-    </el-dialog>
+      </el-card>
+    </template>
   </main>
   </ElConfigProvider>
 </template>
@@ -789,8 +794,12 @@ td.report-data--input { padding: 5px 8px; }
   letter-spacing: 0.02em;
 }
 
-/* ---------- 单元格明细弹窗 ---------- */
-.detail-scrollbar { max-height: calc(100vh - 240px); }
+/* ---------- 单元格明细页 ---------- */
+.detail-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
+.detail-back-icon { width: 15px; height: 15px; margin-right: 4px; }
+.detail-title { margin: 0; color: var(--el-text-color-primary); font-size: 16px; font-weight: 600; line-height: 22px; }
+.detail-card { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
+.detail-scrollbar { height: 100%; }
 .detail-content { padding: 2px 4px 4px; }
 
 /* 摘要区：位置编码、金额、日期放在一行，便于确认明细上下文。 */
@@ -810,10 +819,10 @@ td.report-data--input { padding: 5px 8px; }
 .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-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; }
+.detail-tables .detail-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>

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

@@ -83,7 +83,7 @@ export interface Tam140503003OutBodyPredList {
   groundBranch?: string
   /** 支付渠道 */
   payChannel?: string
-  /** 收支方向 */
+  /** 预报收支方向：1 收入、2 支出。 */
   payDirec?: string
   /** 预报金额 */
   predAmt?: string
@@ -107,7 +107,7 @@ export interface Tam140503003OutBodyTranList {
   groundBranch?: string
   /** 支付渠道 */
   payChannel?: string
-  /** 收支方向 */
+  /** 流水收支方向：I 收入、O 支出。 */
   payDirec?: string
   /** 收款人名称 */
   payeeName?: string

package/src/view/dcps/flow-query/index.vue

@@ -98,8 +98,8 @@ const validAmount = (value: string) => {
 
 /** 业务类型字典：201 兑回、202 兑出、203 付现。 */
 const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
-/** 收支方向字典：I 来账、O 往账。 */
-const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
+/** 流水收支方向字典：I 收入、O 支出。 */
+const payDirecLabels: Record<string, string> = { I: '收入', O: '支出' }
 /** 流水查询筛选只提供未核销和已核销，部分核销仅在结果中展示。 */
 const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销', '3': '部分核销' }
 

package/src/view/dcps/flow-query/typs.ts

@@ -1,4 +1,4 @@
-/** 普通流水查询与核销页面共用 140502002 的请求、筛选及响应类型。 */
+/** 普通流水查询与核销页面共用 140502002 的请求、筛选及响应类型；收支方向为 I 收入、O 支出。 */
 export type {
   FlowFilters,
   FlowQueryParams,

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

@@ -159,6 +159,7 @@ const validateForm = (values: ForecastFormValues, mode: 'create' | 'edit' = 'cre
   }
   if (values.busiType && !Object.hasOwn(busiTypeLabels, values.busiType)) return '请选择有效的业务类型'
   if (values.payDirec && !Object.hasOwn(payDirecLabels, values.payDirec)) return '请选择有效的收支方向'
+  if (values.payChannel && !Object.hasOwn(payChannelLabels, values.payChannel)) return '请选择有效的支付渠道'
   for (const [key, label] of [['tranDate', '交易日期'], ['predDate', '预报日期']] as const) {
     const date = values[key].trim()
     if ((date || (mode === 'create' && key === 'tranDate')) && !isValidDate(date)) return `${label}须为有效日期，格式为 YYYYMMDD`
@@ -203,20 +204,39 @@ const createFilters = (): ForecastFilters => ({
 })
 const listFilters = ref(createFilters())
 let listAppliedQuery: ForecastFilters = { ...listFilters.value }
-// 重复输入项共用一份配置，依次为字段、名称；输入框较窄，占位文案统一使用简短提示。
-const listTextFilters = [
-  ['clientName', '客户名称'],
-  ['competName', '交易对手名称'],
-  ['payChannel', '支付渠道'],
-  ['groundBranch', '落地机构'],
-  ['predStatus', '预报状态'],
-  ['verifyStatus', '核销状态'],
-] as const
 /** 新接口明确给出的业务类型；未登记代码保留接口原值。 */
 const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
 const busiTypeOptions = Object.entries(busiTypeLabels).map(([value, label]) => ({ value, label }))
-const payDirecLabels: Record<string, string> = { I: '收入', O: '支出' }
+/** 预报页面按业务字典展示中文，查询和编辑提交对应的字符串代码。 */
+const payDirecLabels: Record<string, string> = { '1': '收入', '2': '支出' }
 const payDirecOptions = Object.entries(payDirecLabels).map(([value, label]) => ({ value, label }))
+const payChannelLabels: Record<string, string> = { '8': '数字人民币' }
+const payChannelOptions = Object.entries(payChannelLabels).map(([value, label]) => ({ value, label }))
+const predStatusLabels: Record<string, string> = {
+  '1': '正常预报',
+  '2': '延迟预报',
+  '3': '正常预报正常删除',
+  '4': '正常预报延迟删除',
+  '5': '延迟预报延时删除',
+  '7': '正常预报新增超时',
+  '8': '延迟预报新增超时',
+}
+const predStatusOptions = Object.entries(predStatusLabels).map(([value, label]) => ({ value, label }))
+const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销', '3': '部分核销' }
+const verifyStatusOptions = Object.entries(verifyStatusLabels).map(([value, label]) => ({ value, label }))
+// 已提供字典的筛选项使用下拉框，其余字段保留文本输入。
+const listAdditionalFilters: {
+  key: 'clientName' | 'competName' | 'payChannel' | 'groundBranch' | 'predStatus' | 'verifyStatus'
+  label: string
+  options?: { value: string; label: string }[]
+}[] = [
+  { key: 'clientName', label: '客户名称' },
+  { key: 'competName', label: '交易对手名称' },
+  { key: 'payChannel', label: '支付渠道', options: payChannelOptions },
+  { key: 'groundBranch', label: '落地机构' },
+  { key: 'predStatus', label: '预报状态', options: predStatusOptions },
+  { key: 'verifyStatus', label: '核销状态', options: verifyStatusOptions },
+]
 const sortRuleOptions = [
   { value: '1', label: '预报日期降序' },
   { value: '2', label: '预报日期升序' },
@@ -247,7 +267,7 @@ const isDetail = computed(() => detailDialogVisible.value)
 
 const listHasReference = (row: ForecastRow) => Boolean(row.predRefNo?.trim())
 const canChangeRecord = (row: ForecastRow) => listHasReference(row)
-  && row.predStatus !== '3' && row.verifyStatus === '1'
+  && !['3', '4', '5'].includes(row.predStatus ?? '') && row.verifyStatus === '1'
   && !!normalizeAmount(row.verifyAmt ?? '') && compareAmounts(row.verifyAmt ?? '', '0') === 0
 const listTextColumn = (prop: keyof ForecastRow, label: string, width: number, visible = true): ColumnOption<ForecastRow> => ({
   prop, label, width, visible, showOverflowTooltip: true,
@@ -261,13 +281,13 @@ const listColumns: ColumnOption<ForecastRow>[] = [
   listTextColumn('clientName', '客户名称', 180),
   { ...listTextColumn('payDirec', '收支方向', 95), formatter: (row) => payDirecLabels[row.payDirec ?? ''] ?? row.payDirec ?? '—' },
   { ...listTextColumn('busiType', '业务类型', 110), formatter: (row) => busiTypeLabels[row.busiType ?? ''] ?? row.busiType ?? '—' },
-  listTextColumn('payChannel', '支付渠道', 110),
+  { ...listTextColumn('payChannel', '支付渠道', 110), formatter: (row) => payChannelLabels[row.payChannel ?? ''] ?? row.payChannel ?? '—' },
   { prop: 'predAmt', label: '预报金额（元）', width: 180, align: 'right', useSlot: true, slotName: 'amount', ...localSort('predAmt', 'amount') },
   { prop: 'verifyAmt', label: '已核销金额（元）', width: 180, align: 'right', useSlot: true, slotName: 'verifiedAmount', ...localSort('verifyAmt', 'amount') },
   listTextColumn('competName', '交易对手名称', 180),
   listTextColumn('groundBranch', '落地机构', 160),
-  listTextColumn('predStatus', '预报状态', 100),
-  listTextColumn('verifyStatus', '核销状态', 100),
+  { ...listTextColumn('predStatus', '预报状态', 180), formatter: (row) => predStatusLabels[row.predStatus ?? ''] ?? row.predStatus ?? '—' },
+  { ...listTextColumn('verifyStatus', '核销状态', 100), formatter: (row) => verifyStatusLabels[row.verifyStatus ?? ''] ?? row.verifyStatus ?? '—' },
   listTextColumn('competAcct', '交易对手账号', 190, false),
   listTextColumn('clientType', '客户类型', 100, false),
   listTextColumn('groundBranchCode', '落地机构代码', 150, false),
@@ -433,7 +453,7 @@ type FieldKey = keyof ForecastFormValues
 type EditorField = {
   key: FieldKey
   label: string
-  kind?: 'date' | 'amount' | 'textarea' | 'businessType' | 'direction'
+  kind?: 'date' | 'amount' | 'textarea' | 'businessType' | 'direction' | 'paymentChannel'
   placeholder?: string
   createOnly?: boolean
 }
@@ -457,7 +477,7 @@ const fieldGroups: { title: string; fields: EditorField[] }[] = [
       { key: 'predAmt', label: '预报金额（元）', kind: 'amount', placeholder: '请输入金额，最多两位小数' },
       { key: 'payDirec', label: '收支方向', kind: 'direction' },
       { key: 'busiType', label: '业务类型', kind: 'businessType' },
-      { key: 'payChannel', label: '支付渠道代码', placeholder: '请输入支付渠道代码' },
+      { key: 'payChannel', label: '支付渠道', kind: 'paymentChannel' },
       { key: 'clientName', label: '客户名称' },
       { key: 'clientType', label: '客户类型代码', placeholder: '请输入客户类型代码' },
     ],
@@ -665,8 +685,8 @@ const detailGroups: { title: string; fields: DetailField[] }[] = [
       { key: 'tranDate', label: '交易日期', kind: 'date' },
       { key: 'predAmt', label: '预报金额（元）', kind: 'amount' },
       { key: 'standardName', label: '标准名称' },
-      { key: 'predStatus', label: '预报状态代码', kind: 'status' },
-      { key: 'verifyStatus', label: '核销状态代码', kind: 'status' },
+      { key: 'predStatus', label: '预报状态', kind: 'status' },
+      { key: 'verifyStatus', label: '核销状态', kind: 'status' },
       { key: 'verifyAmt', label: '已核销金额（元）', kind: 'amount' },
       { key: 'edusFlag', label: '释放状态代码', kind: 'status' },
     ],
@@ -676,7 +696,7 @@ const detailGroups: { title: string; fields: DetailField[] }[] = [
     fields: [
       { key: 'busiType', label: '业务类型代码' },
       { key: 'payDirec', label: '收支方向' },
-      { key: 'payChannel', label: '支付渠道代码' },
+      { key: 'payChannel', label: '支付渠道' },
       { key: 'clientName', label: '客户名称' },
       { key: 'competName', label: '交易对手名称' },
       { key: 'competAcct', label: '交易对手账号' },
@@ -712,6 +732,9 @@ const displayValue = (field: DetailField) => {
   if (field.kind === 'date') return formatDate(value)
   if (field.key === 'busiType') return busiTypeLabels[value] ?? value
   if (field.key === 'payDirec') return payDirecLabels[value] ?? value
+  if (field.key === 'payChannel') return payChannelLabels[value] ?? value
+  if (field.key === 'predStatus') return predStatusLabels[value] ?? value
+  if (field.key === 'verifyStatus') return verifyStatusLabels[value] ?? value
   return String(value)
 }
 
@@ -805,6 +828,14 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
                     >
                       <el-option v-for="option in payDirecOptions" :key="option.value" :label="option.label" :value="option.value" />
                     </el-select>
+                    <el-select
+                      v-else-if="field.kind === 'paymentChannel'"
+                      v-model="form.payChannel"
+                      placeholder="请选择支付渠道"
+                      clearable
+                    >
+                      <el-option v-for="option in payChannelOptions" :key="option.value" :label="option.label" :value="option.value" />
+                    </el-select>
                     <el-input
                       v-else-if="field.kind === 'textarea'"
                       v-model="form[field.key]"
@@ -896,9 +927,11 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
             <el-option v-for="option in payDirecOptions" :key="option.value" :label="option.label" :value="option.value" />
           </el-select>
         </el-form-item>
-        <!-- label 为查询字段名称，输入框较窄，占位文案统一为简短提示。 -->
-        <el-form-item v-for="[key, label] in listTextFilters" :key="key" :label="label">
-          <el-input v-model="listFilters[key]" placeholder="请输入" :maxlength="200" clearable />
+        <el-form-item v-for="filter in listAdditionalFilters" :key="filter.key" :label="filter.label">
+          <el-select v-if="filter.options" v-model="listFilters[filter.key]" placeholder="全部" clearable>
+            <el-option v-for="option in filter.options" :key="option.value" :label="option.label" :value="option.value" />
+          </el-select>
+          <el-input v-else v-model="listFilters[filter.key]" placeholder="请输入" :maxlength="200" clearable />
         </el-form-item>
         <el-form-item label="排序规则">
           <el-select v-model="listFilters.sortRule" clearable placeholder="默认排序">

package/src/view/dcps/forecast/typs.ts

@@ -23,9 +23,9 @@ export interface Tam120501001InBody {
   groundBranchName?: string
   /** 联系人 */
   linkMan?: string
-  /** 支付渠道 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
-  /** 收支方向 */
+  /** 收支方向：1 收入、2 支出。 */
   payDirec: string
   /** 联系电话 */
   phoneNo?: string
@@ -63,9 +63,9 @@ export interface Tam120501002InBody {
   groundBranchName?: string
   /** 联系人 */
   linkMan?: string
-  /** 支付渠道 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
-  /** 收支方向 */
+  /** 收支方向：1 收入、2 支出。 */
   payDirec?: string
   /** 联系电话 */
   phoneNo?: string
@@ -101,11 +101,11 @@ export interface Tam140501001InBody {
   endTransAmt?: string
   /** 落地机构 */
   groundBranch?: string
-  /** 支付渠道 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
-  /** 收支方向 */
+  /** 收支方向：1 收入、2 支出。 */
   payDirec?: string
-  /** 预报状态 */
+  /** 预报状态：1 正常预报、2 延迟预报、3 正常预报正常删除、4 正常预报延迟删除、5 延迟预报延时删除、7 正常预报新增超时、8 延迟预报新增超时。 */
   predStatus?: string
   /** 排序 */
   sortRule?: string
@@ -113,7 +113,7 @@ export interface Tam140501001InBody {
   startTransAmt?: string
   /** 交易时间 */
   tranDate: string
-  /** 核销状态 */
+  /** 核销状态：1 未核销、2 已核销、3 部分核销。 */
   verifyStatus?: string
 }
 
@@ -145,9 +145,9 @@ export interface Tam140501001OutBodyResultList {
   groundBranch?: string
   /** 机构代码 */
   groundBranchCode?: string
-  /** 支付渠道 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
-  /** 收支方向 */
+  /** 收支方向：1 收入、2 支出。 */
   payDirec?: string
   /** 预报金额 */
   predAmt?: string
@@ -157,7 +157,7 @@ export interface Tam140501001OutBodyResultList {
   predDate?: string
   /** 预报流水号 */
   predRefNo?: string
-  /** 预报状态 */
+  /** 预报状态：1 正常预报、2 延迟预报、3 正常预报正常删除、4 正常预报延迟删除、5 延迟预报延时删除、7 正常预报新增超时、8 延迟预报新增超时。 */
   predStatus?: string
   /** 标准名称 */
   standardName?: string
@@ -165,7 +165,7 @@ export interface Tam140501001OutBodyResultList {
   tranDate?: string
   /** 已核销金额 */
   verifyAmt?: string
-  /** 核销状态 */
+  /** 核销状态：1 未核销、2 已核销、3 部分核销。 */
   verifyStatus?: string
 }
 
@@ -189,15 +189,15 @@ export interface Tam140501002OutBody {
   edusFlag?: string
   /** 落地机构名称 */
   groundBranchName?: string
-  /** 支付渠道 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
-  /** 收支方向 */
+  /** 收支方向：1 收入、2 支出。 */
   payDirec?: string
   /** 预报金额 */
   predAmt?: string
   /** 预报流水号 */
   predRefNo?: string
-  /** 预报状态 */
+  /** 预报状态：1 正常预报、2 延迟预报、3 正常预报正常删除、4 正常预报延迟删除、5 延迟预报延时删除、7 正常预报新增超时、8 延迟预报新增超时。 */
   predStatus?: string
   /** 标准名称 */
   standardName?: string
@@ -205,7 +205,7 @@ export interface Tam140501002OutBody {
   tranDate?: string
   /** 已核销金额 */
   verifyAmt?: string
-  /** 核销状态 */
+  /** 核销状态：1 未核销、2 已核销、3 部分核销。 */
   verifyStatus?: string
 }
 

package/src/view/dcps/write-off/api.ts

@@ -4,7 +4,6 @@ import type {
   ForecastQueryParams,
   Tam120502002InBody,
   Tam120502003InBody,
-  Tam140502001OutBody,
 } from './typs'
 
 // 同一操作的相同请求失败后复用流水号，避免响应丢失后重试导致重复记账。
@@ -51,33 +50,14 @@ export default {
    * clientName 为客户名称，competName 为交易对手名称，payDirec 为收支方向（1 收入、2 支出），
    * startTransAmt、endTransAmt 为金额范围，verifyStatusList 待核销传 [1,3]、已核销传 [2]。
    */
-  queryForecastApi: async (params: ForecastQueryParams) => {
-    // 文档/页面的核销预报方向为 1/2，当前后端实际使用 I/O；只在 API 边界转换。
-    const requestDirections: Record<string, string> = { '1': 'I', '2': 'O' }
-    const responseDirections: Record<string, string> = { I: '1', O: '2' }
-    const response = await baseHttpClient.post<any>('/TAM/0001/140502001', {
-      ...params,
-      payDirec: params.payDirec ? requestDirections[params.payDirec] ?? params.payDirec : undefined,
-    })
-    const body: Tam140502001OutBody | null = response.body
-    if (!body || !Array.isArray(body.resultList)) return response
-    return {
-      ...response,
-      body: {
-        ...body,
-        resultList: body.resultList.map((row) => ({
-          ...row,
-          payDirec: row.payDirec ? responseDirections[row.payDirec] ?? row.payDirec : row.payDirec,
-        })),
-      },
-    }
-  },
+  queryForecastApi: (params: ForecastQueryParams) =>
+    baseHttpClient.post<any>('/TAM/0001/140502001', params),
   /**
    * 分页查询核销流水信息。
    * @param params 查询参数：tranDate 为交易日期（必填，YYYYMMDD）；pageIndex、pageSize 为页码和每页条数。
    * 业务筛选：busiType 为业务类型（201 兑回、202 兑出、203 付现），orgName 为我方机构，
    * payerName、payeeName 为付款人和收款人名称，
-   * payDirec 为收支方向，startTransAmt、endTransAmt 为金额范围，verifyStatus 为核销状态。
+   * payDirec 为收支方向（I 收入、O 支出），startTransAmt、endTransAmt 为金额范围，verifyStatus 为核销状态。
    */
   queryFlowApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140502002", params)
 }

package/src/view/dcps/write-off/index.vue

@@ -118,9 +118,9 @@ const compareAmounts = (left: string, right: string): number => {
 
 /** 业务类型字典：201 兑回、202 兑出、203 付现；超出字典的值保留原文。 */
 const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
-/** 界面保留预报 1/2，API 层转换当前后端的 I/O；流水直接使用 I/O。 */
+/** 预报使用 1 收入、2 支出；流水使用 I 收入、O 支出，查询按各自编码提交。 */
 const forecastPayDirecLabels: Record<string, string> = { '1': '收入', '2': '支出' }
-const flowPayDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
+const flowPayDirecLabels: Record<string, string> = { I: '收入', O: '支出' }
 /** 支付渠道：核销预报为 8、流水为 5，均表示数字人民币；其余渠道保留原文。 */
 const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
 /** 响应核销状态字典；流水筛选仍按请求协议仅提供 1、2。 */
@@ -607,7 +607,7 @@ type FlowAppliedQuery = {
   busiType?: string // 业务类型：201 兑回、202 兑出、203 付现。
   payerName?: string // 付款人名称。
   payeeName?: string // 收款人名称。
-  payDirec?: string // 收支方向：I 来账、O 往账。
+  payDirec?: string // 收支方向：I 收入、O 支出。
   startTransAmt?: string // 起始金额，查询提交时已由万元转换为元。
   endTransAmt?: string // 截止金额，查询提交时已由万元转换为元。
   verifyStatus?: string // 核销状态：1 未核销、2 已核销。
@@ -637,7 +637,7 @@ const flowTextFilters = [
 
 // 列表、分页与请求状态；请求序号防止旧响应覆盖新结果。
 const flowRows = ref<FlowRow[]>([])
-/** 只计算勾选流水的轧差：来账收入减去往账支出，未勾选时为 0.00。 */
+/** 只计算勾选流水的轧差：收入减去支出，未勾选时为 0.00。 */
 const selectedFlowNetAmount = computed(() => formatCents(flowSelection.value.reduce((total, row) => {
   const direction = row.payDirec?.trim()
   if (direction === 'I') return total + amountToCents(row.tranAmt)

package/src/view/dcps/write-off/typs.ts

@@ -152,7 +152,7 @@ export interface Tam140502002InBody {
   endTransAmt?: string
   /** 我方机构 */
   orgName?: string
-  /** 收支方向 */
+  /** 收支方向：I 收入、O 支出。 */
   payDirec?: string
   /** 收款人名称 */
   payeeName?: string
@@ -198,7 +198,7 @@ export interface Tam140502002OutBodyResultList {
   payBankNo?: string
   /** 支付渠道,5：数字人民币 */
   payChannel?: string
-  /** 收支方向,I=来账 O=往账 */
+  /** 收支方向：I 收入、O 支出。 */
   payDirec?: string
   /** 付款钱包ID */
   payWltId?: string