vue3-element-plus-app-chu 0.0.28 → 0.0.29

package/package.json

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

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

@@ -4,8 +4,8 @@ import type { FlowQueryParams } from './typs'
 export default {
   /**
    * 分页查询数字人民币实时流水（140504002）。
-   * 接口业务 body 为空，不声明日期、姓名、金额或核销状态筛选。
-   * @param params 公共分页参数，由请求层放入 head 并转换为字符串。
+   * 筛选条件全部可空：为空时业务 body 为空对象，与原契约一致。
+   * @param params 业务筛选条件与公共分页参数，分页由请求层放入 head 并转换为字符串。
    */
   queryFlowApi: (params: FlowQueryParams) =>
     baseHttpClient.post<any>('/TAM/0001/140504002', params),

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
-import { ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import API from './api'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
-import type { FlowRow, Tam140504002OutBody } from './typs'
+import type { FlowQueryParams, FlowRow, RealtimeFlowFilters, Tam140504002OutBody } from './typs'
 
 defineOptions({ name: 'DcpsFlowQueryPage' })
 
@@ -79,14 +79,95 @@ const formatAmount = (value?: string): string => {
   return `${negative ? '-' : ''}${integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}.${fraction.padEnd(2, '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}` : ''}`
+}
+
+/** 比较两个标准化后的金额字符串，返回 -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)
+  return toInteger(a) < toInteger(b) ? -1 : toInteger(a) > toInteger(b) ? 1 : 0
+}
+
+/** 校验筛选金额：非负十进制，最多两位小数；返回标准化后的文本。 */
+const validAmount = (value: string) => {
+  const normalized = normalizeAmount(value)
+  if (!normalized || normalized.startsWith('-') || (normalized.split('.')[1]?.length || 0) > 2) return ''
+  return normalized
+}
+
+/** 业务类型字典：201 兑回、202 兑出、203 付现。 */
+const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
+/** 收支方向字典：I 来账、O 往账。 */
+const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
+/** 交易状态字典：S 成功、P 处理中、F 失败。 */
+const tranStatusLabels: Record<string, string> = { S: '成功', P: '处理中', F: '失败' }
+
+const busiTypeOptions = Object.entries(busiTypeLabels).map(([value, label]) => ({ value, label }))
+const payDirecOptions = Object.entries(payDirecLabels).map(([value, label]) => ({ value, label }))
+const tranStatusOptions = Object.entries(tranStatusLabels).map(([value, label]) => ({ value, label }))
+
+let disposed = false // 页面是否已卸载，避免未完成请求继续更新界面。
+
+// ---------- 查询条件与列表状态 ----------
+
+/** 默认查询条件；空字符串表示不限制该条件，重置时恢复此配置。实时流水默认不限日期。 */
+const createFlowFilters = (): RealtimeFlowFilters => ({
+  bizType: '',
+  cdtrNm: '',
+  dbtrNm: '',
+  endTxnAmt: '',
+  orgKeyword: '',
+  startTxnAmt: '',
+  txnDate: '',
+  txnDirection: '',
+  txnSts: '',
+})
+const flowFilters = ref<RealtimeFlowFilters>(createFlowFilters())
+/** 已生效的查询快照：翻页、刷新继续使用同一份条件，表单中的新输入不影响进行中的查询。 */
+let flowAppliedQuery: FlowQueryParams = { pageIndex: 1, pageSize: 15 }
+
+// 重复输入项共用一份配置，依次为字段、名称和输入框长度限制。
+const flowTextFilters = [
+  ['orgKeyword', '机构关键字', 180],
+  ['dbtrNm', '付款人名称', 180],
+  ['cdtrNm', '收款人名称', 180],
+] as const
+
+// 列表、分页与请求状态；请求序号防止旧响应覆盖新结果。
 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('')
-let disposed = false
-let flowRequestId = 0 // 仅最新请求可以写入列表；离开页面时使未完成请求失效。
+let flowRequestId = 0
 
 /** 所有代码字段保留接口原值，不套用核销接口的方向、业务类型或状态字典。 */
 const flowTextColumn = (prop: keyof FlowRow, label: string, width: number, visible = true): ColumnOption<FlowRow> => ({
@@ -115,17 +196,18 @@ const flowColumns: ColumnOption<FlowRow>[] = [
   flowTextColumn('subBrchBankNo', '落地支行行号', 170, false),
 ]
 
-/** 公共 head 承载分页，140504002 的业务 body 不发送旧核销筛选条件。 */
+/** 分页字段进公共 head，筛选条件保留在 body；无条件时 body 为空对象，不违反接口契约。 */
 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 = ''
   try {
     for (let attempt = 0; attempt < 2; attempt += 1) {
-      const response = await API.queryFlowApi({ pageIndex, pageSize })
+      const response = await API.queryFlowApi({ ...query, pageIndex, pageSize })
       if (disposed || currentId !== flowRequestId) return
       const page = readPage(ensureSuccess(response), pageIndex, pageSize)
       if (pageIndex > page.lastPage) {
@@ -150,13 +232,59 @@ const loadFlowList = async () => {
   }
 }
 
-/** 查询从第一页开始；工具栏刷新和错误重试保留当前页。 */
+/** 查询从第一页开始：校验并快照当前表单条件，只发送已填写的字段。 */
 const searchFlow = () => {
   if (disposed || flowLoading.value) return
+  const source = flowFilters.value
+  if (source.txnDate.trim() && !/^\d{8}$/.test(source.txnDate.trim())) {
+    return void ElMessage.warning('请选择有效的交易日期')
+  }
+  const startTxnAmt = validAmount(source.startTxnAmt)
+  if (source.startTxnAmt.trim() && !startTxnAmt) {
+    return void ElMessage.warning('起始金额请输入非负数，最多保留两位小数')
+  }
+  const endTxnAmt = validAmount(source.endTxnAmt)
+  if (source.endTxnAmt.trim() && !endTxnAmt) {
+    return void ElMessage.warning('截止金额请输入非负数，最多保留两位小数')
+  }
+  if (startTxnAmt && endTxnAmt && compareAmounts(startTxnAmt, endTxnAmt) > 0) {
+    return void ElMessage.warning('起始金额不能大于截止金额')
+  }
+  // 只保留已填写的筛选条件；空字符串不发送，表示不限制该条件。
+  const query: FlowQueryParams = { pageIndex: 1, pageSize: flowPagination.size }
+  for (const key of ['bizType', 'txnDirection', 'txnSts'] as const) {
+    const value = source[key].trim()
+    if (value) query[key] = value
+  }
+  for (const [key] of flowTextFilters) {
+    const value = source[key].trim()
+    if (value) query[key] = value
+  }
+  if (source.txnDate.trim()) query.txnDate = source.txnDate.trim()
+  if (startTxnAmt) query.startTxnAmt = startTxnAmt
+  if (endTxnAmt) query.endTxnAmt = endTxnAmt
+  flowAppliedQuery = query
+  flowPagination.current = 1
+  void loadFlowList()
+}
+
+/** 重置清空全部条件并按不限规则重新查询。 */
+const resetFlowFilters = () => {
+  if (disposed || flowLoading.value) return
+  flowFilters.value = createFlowFilters()
+  flowAppliedQuery = { pageIndex: 1, pageSize: flowPagination.size }
   flowPagination.current = 1
   void loadFlowList()
 }
 
+const changeFlowPage = (current: number, size = flowPagination.size) => {
+  if (disposed || (current === flowPagination.current && size === flowPagination.size)) return
+  if (!Number.isSafeInteger(current) || current < 1 || !Number.isSafeInteger(size) || size < 1) return
+  flowPagination.current = current
+  flowPagination.size = size
+  void loadFlowList()
+}
+
 const realtimeChecking = ref(false)
 
 /** 「实时查询流水」仅调用 140504002 确认实时链路；返回成功后弹窗提示，不改动表格与分页。 */
@@ -178,14 +306,6 @@ const checkRealtimeFlow = async () => {
   }
 }
 
-const changeFlowPage = (current: number, size = flowPagination.size) => {
-  if (disposed || (current === flowPagination.current && size === flowPagination.size)) return
-  if (!Number.isSafeInteger(current) || current < 1 || !Number.isSafeInteger(size) || size < 1) return
-  flowPagination.current = current
-  flowPagination.size = size
-  void loadFlowList()
-}
-
 onMounted(() => { void loadFlowList() })
 onBeforeUnmount(() => {
   disposed = true
@@ -195,39 +315,88 @@ onBeforeUnmount(() => {
 
 <template>
   <main class="dcps-page">
-    <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
-        v-model:settings="flowTableSettings"
-        class="flow-table"
-        fill
-        title="数字人民币实时流水"
-        toolbar-layout="refresh,size,fullscreen,columns,settings"
-        :data="flowRows"
-        :columns="flowColumns"
-        :loading="flowLoading"
-        :pagination="flowPagination"
-        :pagination-options="flowPaginationOptions"
-        row-key="consumerSeqNo"
-        :empty-text="flowQueryError ? '查询失败，请重新查询' : '暂无实时流水信息'"
-        @pagination:current-change="changeFlowPage"
-        @pagination:size-change="(size: number) => changeFlowPage(1, size)"
-        @refresh="void loadFlowList()"
-      >
-        <template #toolbar-left>
-          <el-button type="primary" :size="flowTableSettings.size" :loading="flowLoading" @click="searchFlow">查询</el-button>
-          <el-button type="primary" plain :size="flowTableSettings.size" :loading="realtimeChecking" @click="void checkRealtimeFlow()">实时查询流水</el-button>
-        </template>
-        <template #txnAmount="{ row }"><span class="amount-cell">{{ formatAmount(row.txnAmt) }}</span></template>
-      </ArtDataTable>
-    </div>
+    <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="交易日期">
+            <el-date-picker
+              v-model="flowFilters.txnDate"
+              type="date"
+              format="YYYY-MM-DD"
+              value-format="YYYYMMDD"
+              clearable
+              placeholder="不限"
+              :editable="false"
+            />
+          </el-form-item>
+          <el-form-item class="filter-status" label="收支方向">
+            <el-select v-model="flowFilters.txnDirection" clearable placeholder="不限">
+              <el-option v-for="option in payDirecOptions" :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.bizType" clearable placeholder="不限">
+              <el-option v-for="option in busiTypeOptions" :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.txnSts" clearable placeholder="不限">
+              <el-option v-for="option in tranStatusOptions" :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.startTxnAmt" placeholder="不限制" inputmode="decimal" :maxlength="40" clearable />
+          </el-form-item>
+          <el-form-item class="filter-amount" label="截止金额（元）">
+            <el-input v-model="flowFilters.endTxnAmt" placeholder="不限制" inputmode="decimal" :maxlength="40" clearable />
+          </el-form-item>
+          <el-space class="filter-actions" :size="8">
+            <el-button :disabled="flowLoading || realtimeChecking" @click="resetFlowFilters">重置</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
+          v-model:settings="flowTableSettings"
+          class="flow-table"
+          fill
+          title="数字人民币实时流水"
+          toolbar-layout="refresh,size,fullscreen,columns,settings"
+          :data="flowRows"
+          :columns="flowColumns"
+          :loading="flowLoading"
+          :pagination="flowPagination"
+          :pagination-options="flowPaginationOptions"
+          row-key="consumerSeqNo"
+          :empty-text="flowQueryError ? '查询失败，请重新查询' : '暂无符合条件的实时流水'"
+          @pagination:current-change="changeFlowPage"
+          @pagination:size-change="(size: number) => changeFlowPage(1, size)"
+          @refresh="void loadFlowList()"
+        >
+          <template #toolbar-left>
+            <el-button type="primary" :size="flowTableSettings.size" :loading="flowLoading" @click="searchFlow">查询</el-button>
+            <el-button type="primary" plain :size="flowTableSettings.size" :loading="realtimeChecking" @click="void checkRealtimeFlow()">实时查询流水</el-button>
+          </template>
+          <template #txnAmount="{ row }"><span class="amount-cell">{{ formatAmount(row.txnAmt) }}</span></template>
+        </ArtDataTable>
+      </div>
+    </section>
   </main>
 </template>
 
 <style scoped>
+/* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，列表内部滚动并保留分页。 */
 .dcps-page {
   box-sizing: border-box;
   display: flex;
@@ -243,7 +412,36 @@ onBeforeUnmount(() => {
   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

@@ -1,12 +1,34 @@
-/** 数字人民币实时流水查询（140504002）的业务 body 为空。 */
-export type Tam140504002InBody = Record<string, never>
+/** 数字人民币实时流水查询（140504002）的筛选条件；全部可选，空值表示不限制该条件。 */
+export interface Tam140504002InBody {
+  /** 业务类型：201 兑回、202 兑出、203 付现。 */
+  bizType?: string
+  /** 截止金额（元），与起始金额搭配成区间。 */
+  endTxnAmt?: string
+  /** 机构关键字，模糊匹配付款机构、收款机构或落地支行名称。 */
+  orgKeyword?: string
+  /** 收支方向：I 来账、O 往账。 */
+  txnDirection?: string
+  /** 收款人名称关键字。 */
+  cdtrNm?: string
+  /** 付款人名称关键字。 */
+  dbtrNm?: string
+  /** 起始金额（元），与截止金额搭配成区间。 */
+  startTxnAmt?: string
+  /** 交易日期（YYYYMMDD），匹配流水的交易时间所在日期。 */
+  txnDate?: string
+  /** 交易状态：S 成功、P 处理中、F 失败。 */
+  txnSts?: string
+}
 
-/** 平铺的公共分页参数；请求层将其放入 head，业务 body 保持为空。 */
-export interface FlowQueryParams {
+/** 平铺的公共分页参数；请求层将其放入 head，业务筛选条件保留在 body。 */
+export interface FlowQueryParams extends Tam140504002InBody {
   pageIndex: number // 页码，从 1 开始。
   pageSize: number // 每页条数。
 }
 
+/** 页面筛选表单的取值；与请求类型同名字段一一对应，空字符串表示不限制。 */
+export type RealtimeFlowFilters = { [K in keyof Tam140504002InBody]-?: string }
+
 /** Tam140504002Out.Body：计数字段遵循接口 integer 类型。 */
 export interface Tam140504002OutBody {
   txnLists?: Tam140504002OutBodyTxnLists[] // 当前页的交易流水。