vue3-element-plus-app-chu 0.0.7 → 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.7",
+  "version": "0.0.8",
   "private": false,
   "type": "module",
   "files": [

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

@@ -333,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') {

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

@@ -0,0 +1,220 @@
+import sharedForecastApi from '@/api/modules/digital-rmb/forecast-management'
+import type { ApiResponse } from '@/utils/request'
+import type {
+  ForecastCreateBody,
+  ForecastDetail,
+  ForecastDetailParams,
+  ForecastEditBody,
+  ForecastFormValues,
+  ForecastListBody,
+  ForecastQueryParams,
+  ForecastRow,
+} from './typs'
+
+/**
+ * 数字人民币头寸预报页面接口与共用工具。
+ * 接口地址：新增 120501001、修改 120501002、删除 120501003、查询 140501001、详情 140501002；
+ * 请求报文沿用 @/api 中的数币接口定义。
+ */
+const API = {
+  /**
+   * 分页查询头寸预报。
+   * @param params 查询参数：opType 固定为 query；tranDate 为必查交易日期，格式为 YYYYMMDD。
+   * 其余筛选条件为空字符串表示不限制；金额范围使用 startTransAmt、endTransAmt。
+   */
+  queryListApi: (params: ForecastQueryParams) => sharedForecastApi.queryListApi(params),
+
+  /**
+   * 新增一条头寸预报。
+   * @param body 新增业务字段；金额字段由调用方标准化为十进制文本。
+   */
+  addApi: (body: ForecastCreateBody) => sharedForecastApi.addApi({ body }),
+
+  /**
+   * 修改一条头寸预报。
+   * @param body 修改业务字段；predRefSeq 为待修改记录的预报流水号。
+   */
+  editApi: (body: ForecastEditBody) => sharedForecastApi.editApi({ body }),
+
+  /**
+   * 按预报流水号删除头寸预报。
+   * @param predRefSeqs 待删除记录的预报流水号列表。
+   */
+  deleteApi: (predRefSeqs: string[]) => sharedForecastApi.deleteApi({ predRefSeqs }),
+
+  /**
+   * 读取单条预报详情。
+   * @param params 详情参数：predRefNo 为预报流水号。
+   */
+  getDetailApi: (params: ForecastDetailParams) => sharedForecastApi.getDetailApi(params),
+
+  /**
+   * 读取详情并与列表记录合并：详情没有的字段由同一条列表记录补充，
+   * 不为接口未返回的字段填入空值。
+   * @param row 列表中的预报记录。
+   */
+  async fetchDetail(row: ForecastRow): Promise<ForecastDetail> {
+    if (!row.predRefNo?.trim()) throw new Error('预报流水号缺失，无法读取详情')
+    const body = ensureSuccess(await API.getDetailApi({ predRefNo: row.predRefNo }), '读取预报详情失败')
+    if (!body || !Object.keys(body).length) throw new Error('服务端未返回预报详情')
+    if (body.predRefNo && body.predRefNo !== row.predRefNo) throw new Error('返回的预报流水号与当前记录不一致')
+    const definedBody = Object.fromEntries(Object.entries(body).filter(([, value]) => value !== undefined && value !== null))
+    return { ...row, ...definedBody } as ForecastDetail
+  },
+
+  /**
+   * 校验列表响应并取出当前页数据；列表缺失或总条数无效时抛出可提示的错误。
+   * @param body 列表接口返回的业务数据。
+   */
+  readPage(body: ForecastListBody | null): ForecastPage {
+    if (!body || !Array.isArray(body.resultList)) throw new Error('查询结果缺少预报列表，请联系服务端确认返回数据')
+    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 }
+  },
+}
+
+/** 列表查询结果：当前页记录和符合条件的总条数。 */
+export interface ForecastPage {
+  data: ForecastRow[] // 当前页的预报记录。
+  total: number // 符合查询条件的总记录数。
+}
+
+/** 校验公共响应头；retCode 不是 00000 时按服务端提示或 fallback 抛错。 */
+export function ensureSuccess<T>(response: ApiResponse<T>, fallback: string): T | null {
+  if (response?.head?.retCode !== '00000') {
+    throw new Error(response?.head?.retMsg?.trim() || fallback)
+  }
+  return response.body
+}
+
+/** 提取可展示的错误信息；无法识别时给出统一提示。 */
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message.trim()) return error.message
+  if (typeof error === 'string' && error.trim()) return error
+  return '操作失败，请稍后重试'
+}
+
+/** 业务日期始终按上海时区生成，不依赖浏览器所在时区，格式为 YYYYMMDD。 */
+export function getToday(): string {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit',
+  }).formatToParts(new Date())
+  const read = (type: Intl.DateTimeFormatPartTypes) => parts.find((part) => part.type === type)?.value || ''
+  return read('year') + read('month') + read('day')
+}
+
+/** 判断是否为合法的 YYYYMMDD 日期。 */
+export function isValidDate(value: string): boolean {
+  if (!/^\d{8}$/.test(value)) return false
+  const year = Number(value.slice(0, 4))
+  const month = Number(value.slice(4, 6))
+  const day = Number(value.slice(6, 8))
+  if (year < 1 || month < 1 || month > 12 || day < 1) return false
+  const leap = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)
+  const monthDays = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  return day <= (monthDays[month - 1] || 0)
+}
+
+/** 把 YYYYMMDD 格式化为 YYYY-MM-DD 展示；空值显示横线，其他格式保留原文。 */
+export function 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
+}
+
+/** 只接受十进制文本和合法千分位；保留全部小数位，避免改变输入精度。 */
+export function normalizeAmount(value: string): string {
+  let text = value.trim()
+  if (text.includes(',')) {
+    if (!/^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/.test(text)) return ''
+    text = text.replace(/,/g, '')
+  }
+  const match = /^([+-]?)(\d*)(?:\.(\d*))?$/.exec(text)
+  if (!match || (!match[2] && !match[3])) return ''
+  const integer = (match[2] || '0').replace(/^0+(?=\d)/, '')
+  const fraction = match[3] || ''
+  const negative = match[1] === '-' && /[1-9]/.test(integer + fraction)
+  return `${negative ? '-' : ''}${integer}${fraction ? `.${fraction}` : ''}`
+}
+
+/** 千分位展示至少两位小数，超过两位的小数原样保留，不做浮点数转换或舍入。 */
+export function formatAmount(value?: string): string {
+  const original = value?.trim() || ''
+  if (!original) return '—'
+  const normalized = normalizeAmount(original)
+  if (!normalized) return original
+  const negative = normalized.startsWith('-')
+  const [integer = '0', fraction = ''] = (negative ? normalized.slice(1) : normalized).split('.')
+  const grouped = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return `${negative ? '-' : ''}${grouped}.${fraction.padEnd(2, '0')}`
+}
+
+/** 按统一小数位数转为 BigInt，任意长度的十进制金额都可精确比较。 */
+export function 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
+}
+
+/** 新增和导入使用的表单初始值；日期默认取当天。 */
+export function createFormValues(): ForecastFormValues {
+  const today = getToday()
+  return {
+    billDate: '', billNo: '', busiType: '', clientName: '', clientType: '',
+    competAcct: '', competName: '', custInfoSeq: '', groundBranch: '', groundBranchName: '',
+    linkMan: '', payChannel: '', payDirec: '', phoneNo: '', predAmt: '', predDate: today,
+    predName: '', predOrgName: '', purpose: '', remark: '', tranDate: today,
+  }
+}
+
+/**
+ * 校验表单；新增校验全部必填项，修改只校验已填写的字段。
+ * @param values 表单值。
+ * @param mode create 为新增，edit 为修改。
+ * @returns 错误提示文本，空字符串表示校验通过。
+ */
+export function validateForm(values: ForecastFormValues, mode: 'create' | 'edit' = 'create'): string {
+  const requiredFields = [
+    ['clientName', '客户名称'], ['payDirec', '收支方向'], ['busiType', '业务类型'],
+    ['payChannel', '支付渠道'], ['groundBranch', '落地机构'],
+  ] as const
+  if (mode === 'create') {
+    for (const [key, label] of requiredFields) {
+      if (!values[key].trim()) return `请填写${label}`
+    }
+  }
+  for (const [key, label] of [['tranDate', '交易日期'], ['predDate', '预报日期']] as const) {
+    const date = values[key].trim()
+    if ((date || mode === 'create') && !isValidDate(date)) return `${label}须为有效日期，格式为 YYYYMMDD`
+  }
+  if (values.billDate.trim() && !isValidDate(values.billDate.trim())) {
+    return '出票日须为有效日期，格式为 YYYYMMDD'
+  }
+  if (values.predAmt.trim() || mode === 'create') {
+    const amount = normalizeAmount(values.predAmt)
+    if (!amount || amount.startsWith('-') || (amount.split('.')[1]?.length || 0) > 2) {
+      return '预报金额须为非负金额，最多保留两位小数'
+    }
+  }
+  return ''
+}
+
+export default API

package/src/view/dcps/digital-rmb-forecast/components/ForecastDetailView.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import ForecastPageShell from './ForecastPageShell.vue'
+import API, { formatAmount, formatDate, getErrorMessage } from '../api'
+import type { ForecastDetail, ForecastRow } from '../typs'
+
+defineOptions({ name: 'ForecastDetailView' })
+
+/** 预报详情页；按预报流水号读取，接口未返回的字段由列表记录补充。 */
+const props = defineProps<{ row: ForecastRow }>()
+
+const emit = defineEmits<{ back: []; edit: [row: ForecastRow] }>()
+
+type DetailField = { key: keyof ForecastDetail; label: string; kind?: 'date' | 'amount' | 'status' }
+
+const detailGroups: { title: string; fields: DetailField[] }[] = [
+  {
+    title: '预报信息',
+    fields: [
+      { key: 'predRefNo', label: '预报流水号' },
+      { key: 'predDate', label: '预报日期', kind: 'date' },
+      { key: 'tranDate', label: '交易日期', kind: 'date' },
+      { key: 'predAmt', label: '预报金额（元）', kind: 'amount' },
+      { key: 'predCode', label: '预报人员编号' },
+      { key: 'standardName', label: '标准名称' },
+      { key: 'predStatus', label: '预报状态代码', kind: 'status' },
+      { key: 'verifyStatus', label: '核销状态代码', kind: 'status' },
+      { key: 'verifyAmt', label: '已核销金额（元）', kind: 'amount' },
+      { key: 'edusFlag', label: '释放状态代码', kind: 'status' },
+    ],
+  },
+  {
+    title: '业务与客户',
+    fields: [
+      { key: 'busiType', label: '业务类型代码' },
+      { key: 'payDirec', label: '收支方向代码' },
+      { key: 'payChannel', label: '支付渠道代码' },
+      { key: 'clientName', label: '客户名称' },
+      { key: 'clientType', label: '客户类型代码' },
+      { key: 'competName', label: '交易对手名称' },
+      { key: 'competAcct', label: '交易对手账号' },
+    ],
+  },
+  {
+    title: '机构与票据',
+    fields: [
+      { key: 'groundBranch', label: '落地机构' },
+      { key: 'groundBranchCode', label: '机构代码' },
+      { key: 'groundBranchName', label: '落地机构名称' },
+      { key: 'billNo', label: '票号' },
+      { key: 'billSignDate', label: '出票日期', kind: 'date' },
+    ],
+  },
+]
+
+const detail = ref<ForecastDetail | null>(null)
+const loading = ref(false)
+const error = ref('')
+const predRefNo = computed(() => props.row.predRefNo?.trim() || '')
+const title = computed(() => predRefNo.value ? `预报详情 · ${predRefNo.value}` : '数字人民币头寸预报详情')
+
+const displayValue = (field: DetailField) => {
+  const value = detail.value?.[field.key]
+  if (value === undefined || value === null || value === '') return '—'
+  if (field.kind === 'amount') return formatAmount(value)
+  if (field.kind === 'date') return formatDate(value)
+  return String(value)
+}
+
+let disposed = false
+const loadDetail = async () => {
+  if (loading.value || !predRefNo.value) return
+  loading.value = true
+  detail.value = null
+  error.value = ''
+  try {
+    const result = await API.fetchDetail(props.row)
+    if (!disposed) detail.value = result
+  } catch (requestError) {
+    if (!disposed) error.value = getErrorMessage(requestError)
+  } finally {
+    if (!disposed) loading.value = false
+  }
+}
+
+onMounted(loadDetail)
+onBeforeUnmount(() => { disposed = true })
+</script>
+
+<template>
+  <ForecastPageShell :title="title" :back-disabled="loading" @back="emit('back')">
+    <template #heading-extra>
+      <el-button v-if="detail" type="primary" :disabled="loading" @click="emit('edit', row)">修改预报</el-button>
+    </template>
+    <el-card class="detail-card" shadow="never" :body-style="{ padding: '12px 16px' }">
+      <div v-loading="loading" class="detail-scroll">
+        <div v-if="error" class="detail-error" role="alert">
+          <el-alert :title="error" type="error" :closable="false" show-icon />
+          <el-button size="small" :disabled="loading" @click="loadDetail">重新加载</el-button>
+        </div>
+        <div v-else-if="detail" class="detail-content">
+          <!-- group 为当前详情分组，fields 中的每项对应一个字段。 -->
+          <section v-for="group in detailGroups" :key="group.title" class="detail-group" :aria-label="group.title">
+            <h3>{{ group.title }}</h3>
+            <dl class="detail-fields">
+              <div v-for="field in group.fields" :key="field.key" class="detail-field">
+                <dt>{{ field.label }}</dt>
+                <dd :class="{ 'detail-amount': field.kind === 'amount', 'detail-status': field.kind === 'status' }">{{ displayValue(field) }}</dd>
+              </div>
+            </dl>
+          </section>
+        </div>
+        <el-empty v-else-if="!loading" description="暂无预报详情" :image-size="64" />
+      </div>
+    </el-card>
+  </ForecastPageShell>
+</template>
+
+<style scoped>
+.detail-card { flex: 1; min-height: 0; min-width: 0; }
+.detail-scroll { height: 100%; padding-right: 2px; overflow-y: auto; }
+/* 与授权详情一致：分组标题在左，字段按四列排布，窗口变窄后逐级减少列数。 */
+.detail-content { display: grid; gap: 8px; font-size: 13px; line-height: 1.4; }
+.detail-group { display: grid; grid-template-columns: 96px 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 dt { color: var(--el-text-color-secondary); font-size: 12px; }
+.detail-field dd { margin: 2px 0 0; color: var(--el-text-color-primary); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
+.detail-amount { font-variant-numeric: tabular-nums; }
+.detail-status { color: #000; }
+.detail-error { display: grid; justify-items: start; gap: 12px; }
+
+@media (max-width: 1400px) {
+  .detail-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 1024px) {
+  .detail-group { grid-template-columns: minmax(0, 1fr); }
+  .detail-group h3 { margin-top: 0; }
+  .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 640px) {
+  .detail-fields { grid-template-columns: minmax(0, 1fr); }
+}
+</style>