vue3-element-plus-app-chu 0.0.6 → 0.0.8

package/README.md

@@ -1,3 +1,17 @@
 # Vue 3 + TypeScript + Element Plus
 
 基于 Vite 初始化的 Vue 3 项目，使用 TypeScript，并已全局注册 Element Plus。
+
+## 数字人民币头寸预报
+
+默认入口为数字人民币头寸预报，侧边菜单可切换至原有数字人民币授权页面；切换时保留各自列表状态。
+
+- 列表页只保留筛选卡片和表格卡片；筛选条件压在一行，窗口过窄时才换行。
+- 新增、修改、详情不使用弹窗，在当前路由内切换为独立页面，页面顶部提供“返回列表”按钮；返回后列表的筛选和分页状态不变。
+- 支持交易日期、客户、交易对手、机构、金额范围及业务代码筛选，分页、详情、新增、修改和批量删除。
+- 金额、账号及流水号使用字符串处理。业务状态与类型代码保留接口原值，待服务端提供字典后再接入中文选项。
+- 导入、导出按钮保留在列表工具栏，文件由后端接口生成和解析，页面不再在前端拼装 CSV。
+- 模块目录与授权页面保持一致：`api.ts` 接口与日期、金额、表单校验等共用工具，`typs.ts` 类型，`runtime.ts` 默认交易日期，`index.vue` 为入口，`components/` 放页面外壳和列表、新增修改、详情页面。
+- 新增、修改、详情页面每行四列展示，窗口变窄后依次降为三列、两列、一列。
+
+本地后端的预报接口当前使用通用模拟响应，写入成功响应不代表真实持久化。

package/package.json

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

package/src/view/dcps/digital-rmb-authorization/api.ts

@@ -1,5 +1,4 @@
-import { post, type ApiResponse } from '@chic/http'
-import type { AuthorizationTask } from './typs'
+import baseHttpClient from "@chic/http"
 
 export default {
   /**
@@ -9,22 +8,12 @@ export default {
    * platfSeqNo 为平台流水号，taskSts 为任务状态（01 待审批、02 已通过、03 已拒绝）。
    * 日期范围：createTmBegin、createTmEnd 为创建日期起止值，格式为 YYYYMMDD。
    */
-  queryListApi: (params: unknown) => post<ApiResponse<{
-    // 当前页的授权任务记录。
-    resultList: AuthorizationTask[]
-    // 符合筛选条件的总记录数，接口可能返回字符串或数字。
-    totalCount: string | number
-  }>>('/TAM/0001/140507001', params),
+  queryListApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/140507001", params),
   /**
    * 提交单笔数字人民币授权任务的审批结果。
    * @param params 审批参数：opType 固定为 authorize；platfSeqNo 为待审批任务的平台流水号。
    * 审批结果：approveFlag 为 02（通过）或 03（拒绝）；rmk 为备注，拒绝时填写原因。
    * 审批身份：apprvrId、apprvrName 为审批人工号和姓名；apprUserId、userId 同样传审批人工号。
    */
-  authorizeApi: (params: unknown) => post<ApiResponse<{
-    // 业务处理状态，仅作返回字段；请求成功以 head.retCode 为准。
-    bizSts: string
-    // 审批结果状态，仅作返回字段，不参与请求成功判断。
-    resultSts: string
-  }>>('/TAM/0001/120507001', params),
+  authorizeApi: (params: unknown) => baseHttpClient.post<any>("/TAM/0001/120507001", params)
 }

package/src/view/dcps/digital-rmb-authorization/components/AuthorizationDetailDialog.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { AuthorizationTask } from '../typs'
 
 // 父页面传入的弹窗状态、任务数据和操作权限。
 const props = defineProps<{
   // 是否显示详情弹窗。
   modelValue: boolean
   // 原始任务数据，用于判断审批状态和传递审批任务。
-  task: AuthorizationTask | null
+  task: any
   // 父页面格式化后的金额、状态和时间，仅用于展示。
-  displayValues: AuthorizationTask | null
+  displayValues: any
   // 页面正在查询或提交审批时，禁用详情中的审批入口。
   disabled?: boolean
 }>()
@@ -18,7 +17,7 @@ const emit = defineEmits<{
   // visible 为更新后的弹窗显隐状态。
   'update:modelValue': [visible: boolean]
   // task 为用户选择审批的原始任务。
-  approve: [task: AuthorizationTask]
+  approve: [task: any]
 }>()
 
 // 详情分组配置；title 为分组标题，fields 每项为 [任务字段名, 展示名称]。
@@ -71,7 +70,7 @@ const canApprove = computed(() =>
   && !!props.task.platfSeqNo?.trim(),
 )
 /** 读取详情展示值，空值显示占位符；field 为任务字段名。 */
-const displayValue = (field: keyof AuthorizationTask) => props.displayValues?.[field]?.trim() || '—'
+const displayValue = (field: string) => props.displayValues?.[field]?.trim() || '—'
 
 // 通知父页面打开审批弹窗，由父页面统一提交审批。
 const approveTask = () => {
@@ -83,13 +82,14 @@ const approveTask = () => {
   <el-dialog
     :model-value="modelValue"
     title="数字人民币授权详情"
+    style="--el-dialog-padding-primary: 10px; padding: 10px 16px; margin-bottom: 16px"
     width="min(1280px, calc(100vw - 32px))"
-    top="5vh"
+    top="16px"
     append-to-body
     destroy-on-close
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <el-scrollbar max-height="68vh">
+    <el-scrollbar class="detail-scrollbar">
       <div v-if="task" class="detail-content">
         <!-- 交易摘要 -->
         <header class="detail-summary">
@@ -116,6 +116,7 @@ const approveTask = () => {
               v-for="[field, label] in group.fields"
               :key="field"
               class="detail-field"
+              :class="{ 'detail-field--remark': field === 'rmk' }"
             >
               <dt>{{ label }}</dt>
               <dd>{{ displayValue(field) }}</dd>
@@ -136,20 +137,28 @@ const approveTask = () => {
 </template>
 
 <style scoped>
-.detail-content { display: grid; gap: 14px; font-size: 13px; }
-.detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px; border-radius: 8px; background: var(--el-color-primary-light-9); overflow-wrap: anywhere; }
+/* 为弹窗边距、标题和底部按钮预留空间，其余高度用于完整展示详情。 */
+.detail-scrollbar :deep(.el-scrollbar__wrap) {
+  max-height: calc(100vh - 120px);
+  max-height: calc(100dvh - 120px);
+}
+.detail-content { display: grid; gap: 8px; font-size: 13px; line-height: 1.4; }
+.detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 8px; background: var(--el-color-primary-light-9); overflow-wrap: anywhere; }
 .detail-label,
 .detail-field dt { color: var(--el-text-color-secondary); font-size: 12px; }
 .detail-amount { display: block; margin-top: 4px; color: var(--el-color-primary-dark-2); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.3; }
 .detail-status { display: block; margin-top: 6px; color: var(--el-text-color-primary); font-size: 15px; }
 .detail-reference { display: grid; grid-column: span 2; align-content: start; gap: 4px; }
-.detail-group { padding: 16px; border: 1px solid var(--el-border-color-lighter); border-radius: 8px; }
-.detail-group h3 { margin: 0 0 14px; padding-left: 8px; border-left: 3px solid var(--el-color-primary); color: var(--el-text-color-primary); font-size: 14px; line-height: 20px; }
-.detail-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
-.detail-field { min-width: 0; padding: 12px; border-radius: 6px; background: var(--el-fill-color-lighter); }
-.detail-field dd { margin: 6px 0 0; color: var(--el-text-color-primary); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
+.detail-group { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px; padding: 12px; border: 1px solid var(--el-border-color-lighter); border-radius: 8px; }
+.detail-group h3 { margin: 4px 0 0; padding-left: 8px; border-left: 3px solid var(--el-color-primary); color: var(--el-text-color-primary); font-size: 14px; line-height: 20px; }
+.detail-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
+.detail-field { min-width: 0; padding: 8px 12px; border-radius: 6px; background: var(--el-fill-color-lighter); }
+.detail-field--remark { grid-column: 1 / -1; }
+.detail-field dd { margin: 2px 0 0; color: var(--el-text-color-primary); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
 
 @media (max-width: 1024px) {
+  .detail-group { grid-template-columns: minmax(0, 1fr); }
+  .detail-group h3 { margin-top: 0; }
   .detail-summary,
   .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }

package/src/view/dcps/digital-rmb-authorization/index.vue

@@ -5,7 +5,10 @@ import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSett
 import AuthorizationDetailDialog from './components/AuthorizationDetailDialog.vue'
 import API from './api'
 import runtime from './runtime'
-import type { AuthorizationDateRange, AuthorizationFilters, AuthorizationTask, Decision } from './typs'
+import type { AuthorizationFilters, AuthorizationQueryParams, AuthorizationTask } from './typs'
+
+type Decision = 'approve' | 'reject'
+type AmountSortOrder = 'ascending' | 'descending' | null
 
 // 初始查询条件；空字符串表示不限制该条件，重置时恢复此配置。
 const defaultFilters: AuthorizationFilters = {
@@ -16,7 +19,7 @@ const defaultFilters: AuthorizationFilters = {
   taskSts: '', // 任务状态；空值查询全部状态。
 }
 // 默认创建日期范围：[开始日期, 结束日期]，格式为 YYYYMMDD，查询重置时使用。
-const defaultDates: AuthorizationDateRange = [
+const defaultDates: [string, string] = [
   runtime.createTmBegin,
   runtime.createTmEnd,
 ]
@@ -38,9 +41,10 @@ const decisionActions = [
 
 // 查询表单、列表和分页状态。
 const filters = ref({ ...defaultFilters }) // 正在编辑的查询条件，点击查询后才生效。
-const dateRange = ref<AuthorizationDateRange | null>([...defaultDates]) // 当前选择的创建日期范围，格式为 YYYYMMDD，允许为空。
+const dateRange = ref<[string, string] | null>([...defaultDates]) // 当前选择的创建日期范围，格式为 YYYYMMDD，允许为空。
 const showSearchBar = ref(true) // 筛选区是否显示，由表格工具栏切换。
 const rows = ref<AuthorizationTask[]>([]) // 当前页的原始授权任务列表。
+const amountSortOrder = ref<AmountSortOrder>(null) // 当前页金额的排序方向，null 保留接口返回顺序。
 const pagination = reactive({ current: 1, size: 10, total: 0 }) // 当前页码、每页条数、符合查询条件的总条数。
 const loading = ref(false) // 列表请求是否进行中，同时控制表格和查询按钮的加载状态。
 let requestId = 0 // 最新列表请求的序号，用于忽略过期响应。
@@ -48,11 +52,11 @@ let disposed = false // 页面是否已卸载，避免未完成请求继续更
 
 // 详情保留原始任务，格式化数据单独用于展示。
 const detailDialogVisible = ref(false) // 详情弹窗是否显示。
-const detailTask = ref<AuthorizationTask | null>(null) // 当前查看详情的原始任务，未选择时为 null。
+const detailTask = ref<any>(null) // 当前查看详情的原始任务，未选择时为 null。
 
 // 审批弹窗状态。
 const dialogVisible = ref(false) // 审批弹窗是否显示。
-const selectedTask = ref<AuthorizationTask | null>(null) // 本次待处理的任务，提交时读取平台流水号。
+const selectedTask = ref<any>(null) // 本次待处理的任务，提交时读取平台流水号。
 const remark = ref('') // 用户输入的审批备注，通过时选填，拒绝时必填。
 const remarkError = ref('') // 拒绝原因的校验提示，空字符串表示没有错误。
 const pendingDecision = ref<Decision | null>(null) // 正在提交的操作：approve 通过、reject 拒绝；null 表示空闲。
@@ -64,7 +68,7 @@ const paginationOptions: PaginationOptions = { align: 'right', background: false
 // 提取异常提示；error 为捕获到的请求或处理异常。
 const getErrorMessage = (error: unknown) => error instanceof Error ? error.message : '请求失败，请稍后重试'
 // 判断 task 是否可审批：必须处于待审批状态，且平台流水号有效。
-const canApprove = (task?: AuthorizationTask | null) => task?.taskSts === '01' && !!task.platfSeqNo?.trim()
+const canApprove = (task?: any) => task?.taskSts === '01' && !!task.platfSeqNo?.trim()
 // 将状态码 status 转为中文名称，未识别的状态保留原值。
 const formatStatus = (status?: string) => statusLabels[status || ''] || status || '未知'
 // 将接口时间 value 转为浏览器本地时间，空值显示横线，无效时间保留原文。
@@ -76,7 +80,10 @@ const formatDateTime = (value?: string) => {
 
 // 将金额字符串 value 拆成符号、整数和小数，避免转为浮点数后丢失精度。
 const parseAmount = (value?: string) => {
-  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(value?.trim() || '') // 匹配结果：1 为符号，2 为整数，3 为小数。
+  const text = String(value ?? '').trim()
+  // 仅去掉合法千分位分隔符，避免把格式错误的 1,23 当成正常金额。
+  const normalized = /^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text) ? text.replace(/,/g, '') : text
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(normalized) // 匹配结果：1 为符号，2 为整数，3 为小数。
   if (!match || (!match[2] && !match[3])) return null
 
   return {
@@ -89,7 +96,7 @@ const parseAmount = (value?: string) => {
 // 格式化金额 value：先换算为整数分并四舍五入，再添加千分位，统一显示两位小数。
 const formatAmount = (value?: string) => {
   const amount = parseAmount(value) // 解析后的十进制金额，无法识别时为 null。
-  if (!amount) return value?.trim() || '—'
+  if (!amount) return String(value ?? '').trim() || '—'
 
   const fraction = amount.fraction.padEnd(3, '0') // 至少保留三位小数，第三位用于判断进位。
   let cents = BigInt(amount.integer + fraction.slice(0, 2)) // 金额绝对值对应的整数分，使用 BigInt 保证精度。
@@ -101,11 +108,11 @@ const formatAmount = (value?: string) => {
   return `${sign}${integer}.${digits.slice(-2)}`
 }
 
-// 比较左侧金额 left 和右侧金额 right：补齐小数后按整数比较；无效金额在升序时排在最后。
-const compareAmounts = (left?: string, right?: string) => {
+// 补齐小数后按精确整数比较；空值和无效金额在升序、降序中均排在最后。
+const compareAmounts = (left: string | undefined, right: string | undefined, order: Exclude<AmountSortOrder, null>) => {
   const leftAmount = parseAmount(left) // 左侧金额的解析结果。
   const rightAmount = parseAmount(right) // 右侧金额的解析结果。
-  if (!leftAmount && !rightAmount) return (left || '').localeCompare(right || '', 'zh-CN')
+  if (!leftAmount && !rightAmount) return 0
   if (!leftAmount) return 1
   if (!rightAmount) return -1
 
@@ -114,11 +121,21 @@ const compareAmounts = (left?: string, right?: string) => {
   const rightDigits = rightAmount.integer + rightAmount.fraction.padEnd(precision, '0') // 右侧金额按统一精度放大后的绝对值。
   const leftValue = BigInt(leftDigits) * (leftAmount.negative ? -1n : 1n) // 左侧带符号的精确整数。
   const rightValue = BigInt(rightDigits) * (rightAmount.negative ? -1n : 1n) // 右侧带符号的精确整数。
-  if (leftValue < rightValue) return -1
-  if (leftValue > rightValue) return 1
+  const direction = order === 'ascending' ? 1 : -1
+  if (leftValue < rightValue) return -direction
+  if (leftValue > rightValue) return direction
   return 0
 }
 
+// 只排序当前页的副本，详情和审批继续使用原始任务；取消排序时恢复接口顺序。
+const tableRows = computed(() => {
+  const order = amountSortOrder.value
+  return order ? [...rows.value].sort((left, right) => compareAmounts(left.txnAmt, right.txnAmt, order)) : rows.value
+})
+const changeSort = ({ prop, order }: { prop: string; order: AmountSortOrder }) => {
+  amountSortOrder.value = prop === 'txnAmt' ? order : null
+}
+
 /**
  * 生成普通文本列，默认将空值显示为横线。
  * @param prop 接口字段名。
@@ -127,16 +144,33 @@ const compareAmounts = (left?: string, right?: string) => {
  * @param format 字段格式化函数，参数 value 为当前单元格原值。
  */
 const textColumn = (
-  prop: keyof AuthorizationTask,
+  prop: string,
   label: string,
   width: number,
   format = (value?: string) => value?.trim() || '—',
-): ColumnOption<AuthorizationTask> => ({
+): ColumnOption => ({
   // row 为当前行任务，按 prop 读取单元格值后交给 format 处理。
   prop, label, width, showOverflowTooltip: true, formatter: (row) => format(row[prop]),
 })
+
+// 日期列按原始时间戳对当前页排序，空值和无效日期在升序时排在最后。
+const dateColumn = (
+  prop: string,
+  label: string,
+): ColumnOption => ({
+  ...textColumn(prop, label, 180, formatDateTime),
+  sortable: true,
+  sortMethod: (left, right) => {
+    const leftTime = Date.parse(left[prop]?.trim() || '')
+    const rightTime = Date.parse(right[prop]?.trim() || '')
+    if (Number.isNaN(leftTime)) return Number.isNaN(rightTime) ? 0 : 1
+    if (Number.isNaN(rightTime)) return -1
+    return leftTime - rightTime
+  },
+})
+
 // 表格完整列配置；字段顺序即展示顺序，任务状态和操作列固定在右侧。
-const tableColumns: ColumnOption<AuthorizationTask>[] = [
+const tableColumns: ColumnOption[] = [
   { key: 'sequence', type: 'globalIndex', label: '序号', width: 80, align: 'center' },
   textColumn('platfSeqNo', '平台流水号', 190),
   textColumn('id', '任务ID', 180),
@@ -145,9 +179,7 @@ const tableColumns: ColumnOption<AuthorizationTask>[] = [
   textColumn('payeeName', '收款人名称', 160),
   {
     prop: 'txnAmt', label: '交易金额（元）', width: 180, align: 'right',
-    useSlot: true, slotName: 'amount', sortable: true,
-    // left、right 为参与排序的两条任务；只比较当前页金额。
-    sortMethod: (left, right) => compareAmounts(left.txnAmt, right.txnAmt),
+    useSlot: true, slotName: 'amount', sortable: 'custom',
   },
   textColumn('payWltId', '付款钱包ID', 190),
   textColumn('authoOrgName', '授权机构名称', 180),
@@ -158,11 +190,11 @@ const tableColumns: ColumnOption<AuthorizationTask>[] = [
   textColumn('collSideAcctBeloOrgNo', '收款方账户所属机构编号', 210),
   textColumn('subBrchName', '落地支行名称', 180),
   textColumn('subBrchBankNo', '落地支行行号', 160),
-  textColumn('txnTm', '交易发起时间', 180, formatDateTime),
-  textColumn('createTm', '创建时间', 180, formatDateTime),
+  dateColumn('txnTm', '交易发起时间'),
+  dateColumn('createTm', '创建时间'),
   textColumn('apprvrId', '审批人ID', 130),
   textColumn('apprvrName', '审批人名称', 130),
-  textColumn('approveTm', '审批时间', 180, formatDateTime),
+  dateColumn('approveTm', '审批时间'),
   textColumn('rmk', '审批备注', 220),
   { ...textColumn('taskSts', '任务状态', 100, formatStatus), fixed: 'right', align: 'center' },
   { key: 'actions', label: '操作', width: 80, fixed: 'right', align: 'center', useSlot: true },
@@ -185,7 +217,7 @@ const detailValues = computed(() => {
 
 // 读取表单并组装请求参数，接口日期格式为 YYYYMMDD。
 const getQueryFilters = () => ({
-  opType: 'query', // 查询授权任务。
+  opType: 'query' as const, // 查询授权任务。
   authoOrgNo: filters.value.authoOrgNo.trim(), // 归属机构编号。
   collePayerName: filters.value.collePayerName.trim(), // 付款人名称。
   payeeName: filters.value.payeeName.trim(), // 收款人名称。
@@ -201,12 +233,12 @@ let appliedQuery = getQueryFilters()
 const loadList = async () => {
   if (disposed) return
   const currentRequestId = ++requestId // 本次请求序号，仅与最新序号相等时允许更新界面。
-  const params = { ...appliedQuery, pageIndex: pagination.current, pageSize: pagination.size } // 本次查询条件和分页快照。
+  const params: AuthorizationQueryParams = { ...appliedQuery, pageIndex: pagination.current, pageSize: pagination.size } // 本次查询条件和分页快照。
   loading.value = true
   try {
     for (let attempt = 0; attempt < 2; attempt += 1) { // attempt：0 为首次查询，1 为页码修正后的补查。
       // head 为公共响应头，body 为包含列表及总条数的业务数据。
-      const { head, body } = await API.queryListApi(params)
+      const { head, body } = await API.queryListApi(params) as any
       if (currentRequestId !== requestId) return
       if (head?.retCode !== '00000') {
         throw new Error(head?.retMsg || '查询失败')
@@ -257,13 +289,13 @@ const changePage = (current: number, size = pagination.size) => {
 }
 
 // 双击行查看详情；task 为当前行的原始授权任务。
-const openDetailDialog = (task: AuthorizationTask) => {
+const openDetailDialog = (task: any) => {
   if (loading.value || pendingDecision.value) return
   detailTask.value = task
   detailDialogVisible.value = true
 }
 // 打开审批窗口；task 为列表或详情选中的任务，只允许处理待审批状态。
-const openDecisionDialog = (task: AuthorizationTask) => {
+const openDecisionDialog = (task: any) => {
   if (!canApprove(task) || loading.value || pendingDecision.value) return
   detailDialogVisible.value = false
   selectedTask.value = task
@@ -301,7 +333,7 @@ const submitDecision = async (decision: Decision) => {
       rmk: remarkText, // 审批备注，拒绝时必须提供原因。
       apprUserId: approverId, // 公共审批用户标识，与审批人工号一致。
       userId: approverId, // 公共操作用户标识，与审批人工号一致。
-    })
+    }) as any
     if (disposed) return
     // retCode 为 00000 即表示请求成功。
     if (head?.retCode !== '00000') {
@@ -373,7 +405,7 @@ onBeforeUnmount(() => {
         v-model:show-search-bar="showSearchBar"
         fill
         toolbar-layout="search,refresh,size,fullscreen,columns,settings"
-        :data="rows"
+        :data="tableRows"
         :columns="tableColumns"
         :loading="loading"
         :pagination="pagination"
@@ -382,6 +414,7 @@ onBeforeUnmount(() => {
         empty-text="暂无符合条件的授权任务"
         @pagination:current-change="changePage"
         @pagination:size-change="(size) => changePage(1, size)"
+        @sort-change="changeSort"
         @refresh="loadList"
         @row-dblclick="openDetailDialog"
       >
@@ -478,14 +511,18 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-/* 页面使用 flex 分配剩余高度，让列表内部滚动并保留分页。 */
+/* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，让列表内部滚动并保留分页。 */
 .dcps-page {
+  /* 手动修改这里：顶部导航/页签 + 底部状态栏 + 宿主上下留白的合计高度。
+     独立页面保持 0px；例如顶部 90px、底部 24px、上下留白 6px，填写 120px。
+     不包含浏览器标签栏、地址栏，也不包含本页面自身的 padding。 */
+  --host-layout-height: 0px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  height: 100vh;
-  height: 100dvh;
+  gap: 5px;
+  height: calc(100vh - var(--host-layout-height));
+  height: calc(100dvh - var(--host-layout-height));
   min-height: 0;
   min-width: 0;
   padding: 5px;

package/src/view/dcps/digital-rmb-authorization/runtime.ts

@@ -1,5 +1,3 @@
-import type { AuthorizationRuntime } from './typs'
-
 // 返回配置的默认查询日期，格式为 YYYYMMDD；当前使用固定日期。
 const getLocalDate = () => {
   return `20261012`
@@ -8,7 +6,7 @@ const getLocalDate = () => {
 const today = getLocalDate() // 默认查询日期，取自上方函数中的固定配置。
 
 /** 授权页面的审批人和默认创建日期；日期格式为 YYYYMMDD。 */
-const runtime: AuthorizationRuntime = {
+const runtime = {
   approverId: '10092', // 审批人工号。
   approverName: '王干事', // 审批人姓名。
   createTmBegin: today, // 默认创建开始日期，格式为 YYYYMMDD。

package/src/view/dcps/digital-rmb-authorization/typs.ts

@@ -1,4 +1,22 @@
-/** 数字人民币授权任务。 */
+/** 页面查询条件；空字符串表示不限制该条件。 */
+export interface AuthorizationFilters {
+  authoOrgNo: string // 归属行（报备机构）编号。
+  collePayerName: string // 付款人名称。
+  payeeName: string // 收款人名称。
+  platfSeqNo: string // 平台流水号。
+  taskSts: string // 任务状态：01 待审批、02 已通过、03 已拒绝。
+}
+
+/** 列表查询参数；日期格式为 YYYYMMDD，分页从第 1 页开始。 */
+export interface AuthorizationQueryParams extends AuthorizationFilters {
+  opType: 'query' // 查询操作标识。
+  createTmBegin: string // 创建开始日期。
+  createTmEnd: string // 创建结束日期。
+  pageIndex: number // 当前页码。
+  pageSize: number // 每页条数。
+}
+
+/** 接口返回的数字人民币授权任务字段。 */
 export interface AuthorizationTask {
   id?: string // 任务 ID。
   platfSeqNo?: string // 平台流水号，用于定位审批任务。
@@ -8,7 +26,7 @@ export interface AuthorizationTask {
   collePayerName?: string // 付款人名称。
   payeeName?: string // 收款人名称。
   payWltId?: string // 付款钱包 ID。
-  txnAmt?: string // 交易金额，单位为元。
+  txnAmt?: string // 交易金额，单位为元，保留字符串精度。
   txnTm?: string // 交易发起时间。
   createTm?: string // 任务创建时间。
   taskSts?: string // 任务状态：01 待审批、02 已通过、03 已拒绝。
@@ -24,36 +42,9 @@ export interface AuthorizationTask {
   collSideAcctBeloOrgNo?: string // 收款方账户所属机构编号。
 }
 
-/** 页面查询条件；空字符串表示不限制该条件。 */
-export interface AuthorizationFilters {
-  authoOrgNo: string // 归属行（报备机构）编号。
-  collePayerName: string // 付款人名称。
-  payeeName: string // 收款人名称。
-  platfSeqNo: string // 平台流水号。
-  taskSts: string // 任务状态：01 待审批、02 已通过、03 已拒绝。
+/** 列表查询返回的业务数据。 */
+export interface AuthorizationQueryResult {
+  resultList: AuthorizationTask[] // 当前页的授权任务记录。
+  totalCount: string | number // 符合查询条件的总记录数。
+  totalPage?: string | number // 总页数。
 }
-
-/** 创建日期范围：[开始日期, 结束日期]，格式为 YYYYMMDD。 */
-export type AuthorizationDateRange = [string, string]
-
-/** 页面审批操作：approve 通过，reject 拒绝。 */
-export type Decision = 'approve' | 'reject'
-
-/** 当前审批人信息，供授权请求使用。 */
-export interface ApproverInfo {
-  approverId: string // 审批人工号。
-  approverName: string // 审批人姓名。
-}
-
-/** 授权页面运行配置，集中定义审批人和默认创建日期。 */
-export interface AuthorizationRuntime extends ApproverInfo {
-  createTmBegin: string // 默认创建开始日期，格式为 YYYYMMDD。
-  createTmEnd: string // 默认创建结束日期，格式为 YYYYMMDD。
-}
-
-/** 通过和拒绝共用的审批表单；姓名只读，由 runtime 提供。 */
-export interface ApprovalForm {
-  approverId: string // 本次审批使用的工号，取自 runtime，页面禁用修改。
-  remark: string // 通过时为可选备注，拒绝时为必填原因。
-}
-