vue3-element-plus-app-chu 0.0.24 → 0.0.25

package/package.json

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

package/src/router/index.ts

@@ -6,6 +6,7 @@ import DigitalRmbForecast from '@/view/dcps/forecast/index.vue'
 import DigitalRmbInjection from '@/view/dcps/funding/injection/index.vue'
 import DigitalRmbWriteOff from '@/view/dcps/write-off/index.vue'
 import DigitalRmbPositionEstimation from '@/view/dcps/estimation/index.vue'
+import DigitalRmbFlowQuery from '@/view/dcps/flow-query/index.vue'
 import DigitalRmbParameters from '@/view/dcps/parameters/index.vue'
 
 declare module 'vue-router' {
@@ -57,6 +58,12 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        path: 'flow-query',
+        name: 'flow-query',
+        component: DigitalRmbFlowQuery,
+        meta: { menu: 'flow-query', title: '数字人民币流水查询' },
+      },
       {
         path: 'auth',
         name: 'auth',

package/src/router/menus.ts

@@ -23,6 +23,7 @@ export const layoutMenus: LayoutMenu[] = [
       { name: 'balance', title: '数字人民币账户行余额查询申请', compactTitle: '余额查询' },
     ],
   },
+  { name: 'flow-query', title: '数字人民币流水查询', compactTitle: '流水查询' },
   { name: 'auth', title: '数字人民币授权', compactTitle: '授权' },
   { name: 'write-off', title: '数字人民币核销', compactTitle: '核销' },
   { name: 'parameters', title: '数字人民币参数管理', compactTitle: '参数管理' },

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

@@ -0,0 +1,15 @@
+import baseHttpClient from '@chic/http'
+import type { FlowQueryParams } from './typs'
+import type { Tam140502002OutBody } from './typs'
+
+export default {
+  /**
+   * 分页查询数字人民币流水信息。
+   * 接口：140502002 头寸核销-流水查询（/TAM/0001/140502002）。
+   * @param params tranDate 交易日期（必填，YYYYMMDD）；pageIndex、pageSize 分页；
+   *   orgName 我方机构，payerName/payeeName 付款人/收款人名称，
+   *   payDirec 收支方向，startTransAmt/endTransAmt 金额范围，verifyStatus 核销状态。
+   */
+  queryFlowApi: (params: FlowQueryParams) =>
+    baseHttpClient.post<Tam140502002OutBody>('/TAM/0001/140502002', params),
+}

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

@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import API from './api'
+import { dcpsRuntime } from '../runtime'
+import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
+import type { FlowRow, FlowFilters, FlowQueryParams } from './typs'
+import type { Tam140502002OutBody } from './typs'
+
+defineOptions({ name: 'DcpsFlowQueryPage' })
+
+// ---------- 页面内工具函数 ----------
+
+/** 列表查询结果：当前页记录和符合条件的总条数。 */
+interface FlowPage<T> {
+  data: T[] // 当前页的记录列表。
+  total: number // 符合查询条件的总记录数。
+}
+
+/** 校验公共响应头；retCode 不是 00000 时按服务端提示或 fallback 抛错。 */
+const ensureSuccess = <T,>(response: any, fallback: string): T | null => {
+  if (response?.head?.retCode !== '00000') {
+    throw new Error(response?.head?.retMsg?.trim() || fallback)
+  }
+  return response.body
+}
+
+/** 校验查询响应并取出当前页数据。 */
+const readPage = <R extends { resultList?: unknown[]; totalCount?: unknown }>(
+  body: R | null,
+  fallback: string,
+): FlowPage<NonNullable<R['resultList']>[number]> => {
+  if (!body || !Array.isArray(body.resultList)) throw new Error(fallback)
+  const totalText = String(body.totalCount ?? body.resultList.length)
+  const total = Number(totalText)
+  if (!/^\d+$/.test(totalText) || !Number.isSafeInteger(total)) throw new Error('查询返回的总条数无效')
+  return { data: body.resultList, total }
+}
+
+/** 提取可展示的错误信息；无法识别时给出统一提示。 */
+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 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)
+}
+
+/** 把 YYYYMMDD 格式化为 YYYY-MM-DD 展示；空值显示横线，其他格式保留原文。 */
+const formatDate = (value?: string): string => {
+  const text = value?.trim() || ''
+  if (!text) return '—'
+  return isValidDate(text) ? `${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}` : text
+}
+
+/** 只接受十进制文本和合法千分位；保留全部小数位，避免改变输入精度。 */
+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')}`
+}
+
+/** 比较两个标准化后的金额字符串，返回 -1/0/1。 */
+const compareAmounts = (left: string, right: string): number => {
+  const leftText = normalizeAmount(left)
+  const rightText = normalizeAmount(right)
+  if (!leftText || !rightText) {
+    if (!leftText && !rightText) return 0
+    return leftText ? -1 : 1
+  }
+  const parts = (text: string) => {
+    const negative = text.startsWith('-')
+    const [integer = '0', fraction = ''] = (negative ? text.slice(1) : text).split('.')
+    return { negative, integer, fraction }
+  }
+  const a = parts(leftText)
+  const b = parts(rightText)
+  const precision = Math.max(a.fraction.length, b.fraction.length)
+  const toInteger = (amount: ReturnType<typeof parts>) =>
+    BigInt(amount.integer + amount.fraction.padEnd(precision, '0')) * (amount.negative ? -1n : 1n)
+  const aValue = toInteger(a)
+  const bValue = toInteger(b)
+  return aValue < bValue ? -1 : aValue > bValue ? 1 : 0
+}
+
+/** 业务类型字典：201 兑回、202 兑出、203 付现；超出字典的值保留原文。 */
+const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
+/** 收支方向字典：I 来账、O 往账。 */
+const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
+/** 支付渠道：5、8 均表示数字人民币，其余渠道保留原文。 */
+const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
+/** 核销状态字典：1 未核销、2 已核销。 */
+const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销' }
+
+/** 读取字典文案；空值显示横线，未登记的代码保留原文展示。 */
+const dictLabel = (labels: Record<string, string>, value?: string): string => {
+  const text = value?.trim() || ''
+  return text ? labels[text] ?? text : '—'
+}
+
+/** 校验金额文本：非负十进制，最多两位小数；返回标准化后的文本。 */
+const validAmount = (value: string) => {
+  const normalized = normalizeAmount(value)
+  if (!normalized || normalized.startsWith('-') || (normalized.split('.')[1]?.length || 0) > 2) return ''
+  return normalized
+}
+
+// ---------- 查询条件与列表状态 ----------
+
+let disposed = false // 页面是否已卸载，避免未完成请求继续更新界面。
+
+// 默认查询条件；空字符串表示不限制该条件，重置时恢复此配置。
+const createFlowFilters = () => ({
+  tranDate: dcpsRuntime.date, // 必填交易日期，格式为 YYYYMMDD。
+  orgName: '', // 我方机构。
+  payerName: '', // 付款人名称。
+  payeeName: '', // 收款人名称。
+  payDirec: '', // 收支方向：I 来账、O 往账。
+  startTransAmt: '', // 起始金额。
+  endTransAmt: '', // 截止金额。
+  verifyStatus: '', // 核销状态：1 未核销、2 已核销。
+})
+const flowFilters = ref<FlowFilters>(createFlowFilters())
+let flowAppliedQuery: FlowQueryParams = { ...createFlowFilters(), pageIndex: 1, pageSize: 15 }
+
+// 重复输入项共用一份配置，依次为字段、名称和输入框长度限制。
+const flowTextFilters = [
+  ['orgName', '我方机构', 160],
+  ['payerName', '付款人名称', 180],
+  ['payeeName', '收款人名称', 180],
+] as const
+
+const busiTypeOptions = Object.entries(busiTypeLabels).map(([value, label]) => ({ value, label }))
+const payDirecOptions = Object.entries(payDirecLabels).map(([value, label]) => ({ value, label }))
+const verifyStatusOptions = Object.entries(verifyStatusLabels).map(([value, label]) => ({ value, label }))
+const payChannelOptions = Object.entries(payChannelLabels).map(([value, label]) => ({ value, label }))
+
+// 列表、分页与请求状态；请求序号防止旧响应覆盖新结果。
+const flowRows = ref<FlowRow[]>([])
+const flowPagination = reactive({ current: 1, size: 15, total: 0 })
+const flowPaginationOptions: PaginationOptions = { align: 'right', pageSizes: [15, 30, 50, 100], background: false }
+const flowTableSettings = ref<TableSettings>({ size: 'small', stripe: true, border: true, headerBackground: true })
+const flowLoading = ref(false)
+const flowQueryError = ref('')
+const flowTableRef = ref<InstanceType<typeof ArtDataTable> | null>(null)
+let flowRequestId = 0
+
+/** 生成普通文本列，默认将空值显示为横线。 */
+const flowTextColumn = (prop: keyof FlowRow, label: string, width: number, visible = true): ColumnOption<FlowRow> => ({
+  prop, label, width, visible, showOverflowTooltip: true,
+  formatter: (row) => row[prop]?.trim() || '—',
+})
+/** 生成字典翻译列；未登记的代码保留原文展示。 */
+const flowDictColumn = (prop: keyof FlowRow, label: string, width: number, labels: Record<string, string>): ColumnOption<FlowRow> => ({
+  ...flowTextColumn(prop, label, width),
+  formatter: (row) => dictLabel(labels, row[prop]),
+})
+
+// 表格完整列配置；字段顺序即展示顺序，辅助字段默认隐藏。
+const flowColumns: ColumnOption<FlowRow>[] = [
+  { type: 'globalIndex', label: '序号', width: 60, align: 'center' },
+  flowTextColumn('refNo', '流水号', 190),
+  { ...flowTextColumn('tranDate', '交易日期', 110), formatter: (row) => formatDate(row.tranDate) },
+  flowTextColumn('tranTime', '交易时间', 110),
+  flowDictColumn('payDirec', '收支方向', 90, payDirecLabels),
+  flowTextColumn('payerName', '付款人名称', 170),
+  flowTextColumn('payeeName', '收款人名称', 170),
+  { prop: 'tranAmt', label: '交易金额（元）', width: 160, align: 'right', useSlot: true, slotName: 'tranAmount' },
+  flowDictColumn('payChannel', '支付渠道', 110, payChannelLabels),
+  flowDictColumn('busiType', '业务类型', 95, busiTypeLabels),
+  flowTextColumn('busiStatus', '业务状态', 110),
+  flowDictColumn('verifyStatus', '核销状态', 95, verifyStatusLabels),
+  flowTextColumn('branchName', '我方机构', 150),
+  flowTextColumn('collBankName', '收款行名称', 160, false),
+  flowTextColumn('payBankName', '付款行名称', 160, false),
+  flowTextColumn('branchCode', '机构行号', 150, false),
+  flowTextColumn('collBankNo', '收款行行号', 170, false),
+  flowTextColumn('payBankNo', '付款行行号', 170, false),
+  flowTextColumn('collWltId', '收款钱包ID', 190, false),
+  flowTextColumn('payWltId', '付款钱包ID', 190, false),
+  flowTextColumn('remark', '备注', 160, false),
+]
+
+// 请求序号防止旧响应覆盖新结果；页码越界时最多补查一次。
+const loadFlowList = async () => {
+  if (disposed) return
+  const currentId = ++flowRequestId
+  const query = { ...flowAppliedQuery }
+  const pageSize = flowPagination.size
+  let pageIndex = flowPagination.current
+  flowLoading.value = true
+  flowQueryError.value = ''
+  flowTableRef.value?.getElTable()?.clearSelection()
+  try {
+    for (let attempt = 0; attempt < 2; attempt += 1) {
+      const response = await API.queryFlowApi({ ...query, pageIndex, pageSize })
+      if (currentId !== flowRequestId) return
+      const page = readPage<Tam140502002OutBody>(
+        ensureSuccess<Tam140502002OutBody>(response, '流水查询失败'),
+        '查询结果缺少流水列表，请联系服务端确认返回数据',
+      )
+      const lastPage = Math.max(1, Math.ceil(page.total / pageSize))
+      if (pageIndex > lastPage && attempt === 0) {
+        pageIndex = lastPage
+        continue
+      }
+      flowPagination.current = pageIndex
+      flowPagination.total = page.total
+      flowRows.value = page.data
+      return
+    }
+  } catch (error) {
+    if (currentId !== flowRequestId) return
+    flowRows.value = []
+    flowPagination.total = 0
+    flowQueryError.value = getErrorMessage(error)
+  } finally {
+    if (currentId === flowRequestId) flowLoading.value = false
+  }
+}
+
+// 新查询从第一页开始；重置后复用同一查询流程。
+const searchFlow = () => {
+  if (disposed) return
+  const source = flowFilters.value
+  if (!/^\d{8}$/.test(source.tranDate.trim())) return void ElMessage.warning('请选择交易日期')
+  const startTransAmt = validAmount(source.startTransAmt)
+  if (source.startTransAmt.trim() && !startTransAmt) {
+    return void ElMessage.warning('起始金额请输入非负数，最多保留两位小数')
+  }
+  const endTransAmt = validAmount(source.endTransAmt)
+  if (source.endTransAmt.trim() && !endTransAmt) {
+    return void ElMessage.warning('截止金额请输入非负数，最多保留两位小数')
+  }
+  if (startTransAmt && endTransAmt && compareAmounts(startTransAmt, endTransAmt) > 0) {
+    return void ElMessage.warning('起始金额不能大于截止金额')
+  }
+  // 只保留已填写的筛选条件；空字符串不发送，表示不限制该条件。
+  const query: FlowQueryParams = { tranDate: source.tranDate.trim(), pageIndex: 1, pageSize: flowPagination.size }
+  for (const [key] of flowTextFilters) {
+    const value = source[key].trim()
+    if (value) query[key] = value
+  }
+  if (source.payDirec.trim()) query.payDirec = source.payDirec.trim()
+  if (source.verifyStatus.trim()) query.verifyStatus = source.verifyStatus.trim()
+  if (startTransAmt) query.startTransAmt = startTransAmt
+  if (endTransAmt) query.endTransAmt = endTransAmt
+  flowAppliedQuery = query
+  void loadFlowList()
+}
+const resetFlowFilters = () => {
+  if (disposed) return
+  flowFilters.value = createFlowFilters()
+  searchFlow()
+}
+// 更新分页；current 为目标页码，size 为每页条数，切换条数时 current 传入 1。
+const changeFlowPage = (current: number, size = flowPagination.size) => {
+  if (disposed) return
+  flowPagination.current = current
+  flowPagination.size = size
+  void loadFlowList()
+}
+
+// 页面首次显示时，按默认条件加载流水列表。
+onMounted(() => {
+  void loadFlowList()
+})
+// 页面离开后，未完成的请求不再更新界面或弹出消息。
+onBeforeUnmount(() => {
+  disposed = true
+  flowRequestId += 1
+})
+</script>
+
+<template>
+  <main class="dcps-page">
+    <section class="view-region">
+      <!-- 查询条件：控件尺寸跟随表格设置，卡片内边距为 10px，点击查询生效。 -->
+      <el-card class="flow-search" shadow="never" :body-style="{ padding: '10px' }">
+        <el-form class="filter-form" :model="flowFilters" :size="flowTableSettings.size" label-position="top" @submit.prevent="searchFlow">
+          <el-form-item class="filter-date" label="交易日期" required>
+            <el-date-picker v-model="flowFilters.tranDate" type="date" format="YYYY-MM-DD" value-format="YYYYMMDD" :clearable="false" :editable="false" />
+          </el-form-item>
+          <el-form-item class="filter-status" label="核销状态">
+            <el-select v-model="flowFilters.verifyStatus" clearable placeholder="不限">
+              <el-option v-for="option in verifyStatusOptions" :key="option.value" :label="option.label" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="filter-status" label="收支方向">
+            <el-select v-model="flowFilters.payDirec" clearable placeholder="不限">
+              <el-option v-for="option in payDirecOptions" :key="option.value" :label="option.label" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <!-- prop 为查询字段，label 为字段名称，maxlength 为允许输入的最大字符数。 -->
+          <el-form-item v-for="[key, label, maxlength] in flowTextFilters" :key="key" :label="label">
+            <el-input v-model="flowFilters[key]" :placeholder="`输入${label}`" :maxlength="maxlength" clearable />
+          </el-form-item>
+          <el-form-item class="filter-amount" label="起始金额（元）">
+            <el-input v-model="flowFilters.startTransAmt" placeholder="不限制" inputmode="decimal" :maxlength="40" clearable />
+          </el-form-item>
+          <el-form-item class="filter-amount" label="截止金额（元）">
+            <el-input v-model="flowFilters.endTransAmt" placeholder="不限制" inputmode="decimal" :maxlength="40" clearable />
+          </el-form-item>
+          <el-space class="filter-actions" :size="8">
+            <el-button @click="resetFlowFilters">重置</el-button>
+            <el-button type="primary" native-type="submit" :loading="flowLoading">查询</el-button>
+          </el-space>
+        </el-form>
+      </el-card>
+
+      <el-alert v-if="flowQueryError" :title="flowQueryError" type="error" show-icon :closable="false">
+        <el-button link type="primary" :disabled="flowLoading" @click="void loadFlowList()">重新查询</el-button>
+      </el-alert>
+
+      <!-- 流水信息表格：分页由表格内置分页组件承载。 -->
+      <div class="table-region">
+        <ArtDataTable
+          ref="flowTableRef"
+          v-model:settings="flowTableSettings"
+          :show-search-bar="false"
+          class="flow-table"
+          fill
+          title="流水信息"
+          toolbar-layout="search,refresh,size,fullscreen,columns,settings"
+          :data="flowRows"
+          :columns="flowColumns"
+          :loading="flowLoading"
+          :pagination="flowPagination"
+          :pagination-options="flowPaginationOptions"
+          row-key="refNo"
+          :empty-text="flowQueryError ? '查询失败，请重新查询' : '暂无符合条件的流水信息'"
+          @pagination:current-change="changeFlowPage"
+          @pagination:size-change="(size: number) => changeFlowPage(1, size)"
+          @refresh="void loadFlowList()"
+        >
+          <!-- row 为当前行原始流水记录，金额字段单位为元。 -->
+          <template #tranAmount="{ row }"><span class="amount-cell">{{ formatAmount(row.tranAmt) }}</span></template>
+        </ArtDataTable>
+      </div>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+/* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，列表内部滚动并保留分页。 */
+.dcps-page {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex-direction: column;
+  gap: 5px;
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
+  min-height: 0;
+  min-width: 0;
+  padding: 5px;
+  overflow: hidden;
+  background: var(--el-bg-color-page, #f7f8fa);
+}
+
+/* 视图区域：纵向占父页面剩余高度，列表内部滚动并保留分页。 */
+.view-region {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 5px;
+  min-height: 0;
+  min-width: 0;
+}
+/* 筛选项压成一行，等分剩余宽度，窗口过窄时才换行并限制高度，为列表保留空间。 */
+.flow-search {
+  flex: 0 0 auto;
+  max-height: min(38dvh, 320px);
+  overflow-y: auto;
+}
+.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 6px; }
+.filter-form :deep(.el-form-item) { flex: 1 1 76px; min-width: 76px; margin: 0; }
+.filter-form :deep(.el-form-item__label) { height: auto; margin-bottom: 4px; padding: 0; font-size: 12px; line-height: 16px; }
+/* 下拉和日期控件撑满筛选格，避免宽度塌缩。 */
+.filter-form :deep(.el-select), .filter-form :deep(.el-date-editor) { width: 100%; min-width: 0; }
+.filter-form :deep(.filter-date) { flex: 1.5 0 116px; }
+.filter-form :deep(.filter-status) { flex: 1.1 0 96px; }
+.filter-form :deep(.filter-amount) { flex: 1.2 0 92px; }
+.filter-actions { flex: 0 0 auto; }
+.table-region { flex: 1; min-width: 0; min-height: 0; }
+.flow-table { padding: 10px; }
+.amount-cell { color: var(--el-text-color-primary); font-variant-numeric: tabular-nums; }
+
+@media (max-width: 640px) {
+  .filter-form :deep(.el-form-item) { flex-basis: 100%; }
+  .filter-actions { margin-left: 0; }
+}
+</style>

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

@@ -0,0 +1,15 @@
+/** 数字人民币流水查询（140502002）的类型定义，复用核销页面的协议类型。 */
+export type {
+  /** 140502002 请求体业务字段。 */
+  Tam140502002InBody,
+  /** 140502002 响应体。 */
+  Tam140502002OutBody,
+  /** 140502002 返回的单条流水记录。 */
+  Tam140502002OutBodyResultList,
+  /** 流水查询条件；空字符串表示不限制该条件。 */
+  FlowFilters,
+  /** 流水查询参数：必填 tranDate，分页从第 1 页开始。 */
+  FlowQueryParams,
+  /** 流水查询（140502002）返回的单条流水记录。 */
+  FlowRow,
+} from '../write-off/typs'