vue3-element-plus-app-chu 0.0.13 → 0.0.14

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

@@ -1,66 +1,38 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import ForecastListView from './components/ForecastListView.vue'
-import ForecastEditorView from './components/ForecastEditorView.vue'
-import ForecastDetailView from './components/ForecastDetailView.vue'
-import type { ForecastEditorMode, ForecastRow } from './typs'
+import { forecastListRefreshToken } from './list-refresh'
+import { rememberForecastRow } from './row-cache'
+import type { ForecastRow } from './typs'
 
-defineOptions({ name: 'DigitalRmbForecastPage' })
+defineOptions({ name: 'DcpsForecastPage' })
 
-/**
- * 页面外壳：列表、新增、修改和详情都在当前路由内切换，
- * 项目未引入路由库，切换方式与侧边菜单一致。
- */
-const view = ref<'list' | 'editor' | 'detail'>('list')
-const editorMode = ref<ForecastEditorMode>('create')
-const activeRow = ref<ForecastRow | null>(null) // 修改和详情使用的列表记录。
+/** 预报列表页入口；新增、修改和详情分别对应独立路由。 */
+const router = useRouter()
 const listRef = ref<InstanceType<typeof ForecastListView> | null>(null)
 
 const openCreate = () => {
-  editorMode.value = 'create'
-  activeRow.value = null
-  view.value = 'editor'
+  const tranDate = listRef.value?.getQueryDate()
+  void router.push({ name: 'forecast-create', query: tranDate ? { tranDate } : {} })
 }
 const openEdit = (row: ForecastRow) => {
-  editorMode.value = 'edit'
-  activeRow.value = row
-  view.value = 'editor'
+  const predRefNo = row.predRefNo?.trim()
+  if (!predRefNo) return
+  rememberForecastRow(row)
+  void router.push({ name: 'forecast-edit', params: { predRefNo } })
 }
 const openDetail = (row: ForecastRow) => {
-  activeRow.value = row
-  view.value = 'detail'
-}
-// 返回列表时保留列表页状态；保存成功后回到列表并重新查询。
-const backToList = () => { view.value = 'list' }
-const onSaved = () => {
-  backToList()
-  void listRef.value?.refresh()
+  const predRefNo = row.predRefNo?.trim()
+  if (!predRefNo) return
+  rememberForecastRow(row)
+  void router.push({ name: 'forecast-detail', params: { predRefNo } })
 }
+
+// 保存成功返回列表时重新查询；筛选条件和分页由缓存中的列表页保留。
+watch(forecastListRefreshToken, () => void listRef.value?.refresh())
 </script>
 
 <template>
-  <!-- 列表页保持挂载，返回后筛选条件、分页和滚动位置不变。 -->
-  <ForecastListView
-    v-show="view === 'list'"
-    ref="listRef"
-    @create="openCreate"
-    @edit="openEdit"
-    @detail="openDetail"
-  />
-  <ForecastEditorView
-    v-if="view === 'editor'"
-    :key="`${editorMode}-${activeRow?.predRefNo ?? 'new'}`"
-    :mode="editorMode"
-    :row="activeRow"
-    :tran-date="listRef?.getQueryDate()"
-    @back="backToList"
-    @saved="onSaved"
-  />
-  <ForecastDetailView
-    v-else-if="view === 'detail'"
-    :key="activeRow?.predRefNo"
-    :row="activeRow!"
-    @back="backToList"
-    @edit="openEdit"
-  />
+  <ForecastListView ref="listRef" @create="openCreate" @edit="openEdit" @detail="openDetail" />
 </template>

package/src/view/dcps/forecast/list-refresh.ts

@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+
+/**
+ * 预报列表刷新信号。
+ * 列表页由 KeepAlive 缓存，新增或修改成功返回后需要显式通知它重新查询。
+ */
+export const forecastListRefreshToken = ref(0)
+
+export const requestForecastListRefresh = () => {
+  forecastListRefreshToken.value += 1
+}

package/src/view/dcps/forecast/row-cache.ts

@@ -0,0 +1,18 @@
+import type { ForecastRow } from './typs'
+
+/**
+ * 列表记录缓存。
+ * 详情和修改接口没有返回全部字段，路由跳转前暂存列表记录，用于补齐页面展示和表单回填。
+ * 直接打开或刷新详情地址时没有缓存，页面会按预报流水号单独请求详情。
+ */
+const rows = new Map<string, ForecastRow>()
+
+export const rememberForecastRow = (row: ForecastRow) => {
+  const predRefNo = row.predRefNo?.trim()
+  if (predRefNo) rows.set(predRefNo, row)
+}
+
+export const recallForecastRow = (predRefNo?: string): ForecastRow | null => {
+  const key = predRefNo?.trim()
+  return key ? rows.get(key) ?? null : null
+}

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

@@ -0,0 +1,169 @@
+import API from './api'
+import type { ApiResponse } from '@/utils/request'
+import type {
+  ForecastDetail,
+  ForecastFormValues,
+  ForecastListBody,
+  ForecastRow,
+} from './typs'
+
+/** 列表查询结果：当前页记录和符合条件的总条数。 */
+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 async function 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
+}
+
+/** 校验列表响应并取出当前页数据；列表缺失或总条数无效时抛出可提示的错误。 */
+export function 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 }
+}

package/src/view/dcps/injection/components/InjectionDetailDialog.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+defineOptions({ name: 'DcpsInjectionDetailDialog' })
+
 // 父页面传入的弹窗状态、注资明细原始数据和格式化后的展示数据。
 const props = defineProps<{
   // 是否显示详情弹窗。

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

@@ -6,6 +6,8 @@ import InjectionDetailDialog from './components/InjectionDetailDialog.vue'
 import API from './api'
 import type { InjectionFilters, InjectionQueryParams, InjectionRecord } from './typs'
 
+defineOptions({ name: 'DcpsInjectionPage' })
+
 type AmountSortOrder = 'ascending' | 'descending' | null
 
 // 初始查询条件；空字符串表示不限制该条件，重置时恢复此配置。
@@ -327,16 +329,12 @@ onBeforeUnmount(() => {
 <style scoped>
 /* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，让列表内部滚动并保留分页。 */
 .dcps-page {
-  /* 手动修改这里：顶部导航/页签 + 底部状态栏 + 宿主上下留白的合计高度。
-     独立页面保持 0px；例如顶部 90px、底部 24px、上下留白 6px，填写 120px。
-     不包含浏览器标签栏、地址栏，也不包含本页面自身的 padding。 */
-  --host-layout-height: 0px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 5px;
-  height: calc(100vh - var(--host-layout-height));
-  height: calc(100dvh - var(--host-layout-height));
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
   min-height: 0;
   min-width: 0;
   padding: 5px;

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

@@ -1,5 +1,4 @@
 import { postDigitalRmb, type DigitalRmbParams } from '@/utils/digital-rmb-request'
-import type { ApiResponse } from '@/utils/request'
 import type {
   Tam120502001InBody,
   Tam120502002InBody,
@@ -11,182 +10,28 @@ import type {
 } from './typs'
 
 /**
- * 数字人民币头寸核销的五个接口，复用本模块的类型定义。
+ * 数字人民币头寸核销接口。
+ * 修改 120502001、核销 120502002、撤销核销 120502003、预报查询 140502001、流水查询 140502002。
  * 支持平铺参数和 { appHead, head, body } 报文；业务 tranDate 始终保留在 body。
- * 金额、日期、账号及流水号使用字符串，响应保留 TAM 的 head、body 结构。
  */
-const API = {
-  /**
-   * 头寸核销-修改（120502001）。
-   * @param params predRefNo 为预报流水号，predAmt 为预报金额，
-   * beforeVerifyAmt 为修改前核销金额，verifyAmt 为已核销金额。
-   */
+export default {
+  /** 头寸核销-修改。 */
   editApi: (params: DigitalRmbParams<Tam120502001InBody>) =>
     postDigitalRmb<Tam120502001InBody, Record<string, unknown>>('/TAM/0001/120502001', params),
 
-  /**
-   * 头寸核销-核销（120502002）。
-   * @param params predList 为必填预报集合，每项包含 predRefNo、predAmt、verifyAmt、verifyStatus；
-   * tranList 为可选流水集合，传入时每项必须包含 refNo、tranAmt、verifyStatus。
-   */
+  /** 头寸核销-核销；predList 必填，tranList 可选。 */
   writeOffApi: (params: DigitalRmbParams<Tam120502002InBody>) =>
     postDigitalRmb<Tam120502002InBody, Record<string, unknown>>('/TAM/0001/120502002', params),
 
-  /**
-   * 头寸核销-撤销核销（120502003）。
-   * @param params predList 为预报集合，tranList 为流水集合；Swagger 未声明集合必填。
-   * 流水项必须包含 refNo、tranAmt、verifyStatus；预报项字段的必填约束与核销接口不同。
-   */
+  /** 头寸核销-撤销核销。 */
   cancelWriteOffApi: (params: DigitalRmbParams<Tam120502003InBody>) =>
     postDigitalRmb<Tam120502003InBody, Record<string, unknown>>('/TAM/0001/120502003', params),
 
-  /**
-   * 头寸核销-预报查询（140502001）。
-   * @param params tranDate 为必填交易日期；支持账号、机构、客户、交易对手、金额范围和核销状态列表筛选。
-   * busiType：201 兑回、202 兑出、203 付现；payChannel：8 数字人民币；payDirec：I 来账、O 往账。
-   * 分页使用公共头 pageIndex、pageSize；返回 body.resultList、body.totalCount（字符串）。
-   */
+  /** 头寸核销-预报查询；tranDate 必填，分页使用 pageIndex、pageSize。 */
   queryForecastApi: (params: DigitalRmbParams<Tam140502001InBody>) =>
     postDigitalRmb<Tam140502001InBody, Tam140502001OutBody>('/TAM/0001/140502001', params),
 
-  /**
-   * 头寸核销-流水查询（140502002）。
-   * @param params tranDate 为必填交易日期；支持 orgName、payerName、payeeName、payDirec、
-   * startTransAmt、endTransAmt、verifyStatus（1 未核销、2 已核销）筛选。
-   * 返回 body.resultList、body.totalCount 和可选 fileName；流水的渠道说明为 5 数字人民币。
-   */
+  /** 头寸核销-流水查询；tranDate 必填，分页使用 pageIndex、pageSize。 */
   queryFlowApi: (params: DigitalRmbParams<Tam140502002InBody>) =>
-    postDigitalRmb<Tam140502002InBody, Tam140502002OutBody>('/TAM/0001/140502002', params),
+    postDigitalRmb<Tam140502002InBody, Tam140502002OutBody>('/TAM/0001/140502002', params)
 }
-
-/** 列表查询结果：当前页记录和符合条件的总条数。 */
-export interface WriteOffPage<T> {
-  data: T[] // 当前页的记录列表。
-  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
-}
-
-/**
- * 校验查询响应并取出当前页数据；两个查询接口共享同一种 body 结构。
- * @param body 查询接口返回的业务数据。
- * @param fallback body 缺少 resultList 时的错误提示文本。
- */
-export function readPage<R extends { resultList?: unknown[]; totalCount?: unknown }>(
-  body: R | null,
-  fallback: string,
-): WriteOffPage<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 }
-}
-
-/** 提取可展示的错误信息；无法识别时给出统一提示。 */
-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
-}
-
-/** 业务类型字典：201 兑回、202 兑出、203 付现；接口附件已声明，超出字典的值保留原文。 */
-export const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出', '203': '付现' }
-/** 收支方向字典：I 来账、O 往账。 */
-export const payDirecLabels: Record<string, string> = { I: '来账', O: '往账' }
-/** 支付渠道：核销预报为 8、流水为 5，均表示数字人民币；其余渠道保留原文。 */
-export const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
-/** 核销状态字典：流水的 1 未核销、2 已核销已在附件声明，预报按同一枚举展示。 */
-export const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销' }
-
-/** 读取字典文案；空值显示横线，未登记的代码保留原文展示。 */
-export function dictLabel(labels: Record<string, string>, value?: string): string {
-  const text = value?.trim() || ''
-  return text ? labels[text] ?? text : '—'
-}
-
-export default API

package/src/view/dcps/write-off/components/FlowWriteOffView.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import API, {
+import API from '../api'
+import {
   busiTypeLabels, compareAmounts, dictLabel, ensureSuccess, formatAmount, formatDate,
   getErrorMessage, getToday, normalizeAmount, payDirecLabels, readPage, verifyStatusLabels,
-} from '../api'
+} from '../utils'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
 import type { FlowRow } from '../typs'
 
-defineOptions({ name: 'FlowWriteOffView' })
+defineOptions({ name: 'DcpsFlowWriteOff' })
 
 // 流水信息表格只负责查询和勾选；核销、撤销核销由父页面统一提交。
 

package/src/view/dcps/write-off/components/ForecastWriteOffView.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import API, {
+import API from '../api'
+import {
   busiTypeLabels, compareAmounts, dictLabel, ensureSuccess, formatAmount, formatDate,
   getErrorMessage, getToday, normalizeAmount, payChannelLabels, payDirecLabels, readPage,
   verifyStatusLabels,
-} from '../api'
+} from '../utils'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
 import type { EditVerifyFormValues, ForecastRow } from '../typs'
 
-defineOptions({ name: 'ForecastWriteOffView' })
+defineOptions({ name: 'DcpsForecastWriteOff' })
 
 /** 预报信息表格负责查询、勾选核销预报和逐条修改已核销金额；
  *  核销、撤销核销按钮在本表格工具栏展示，由父页面读取两个表格的勾选统一提交。 */

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

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import API, { ensureSuccess, formatAmount, getErrorMessage, normalizeAmount } from './api'
+import API from './api'
+import { ensureSuccess, formatAmount, getErrorMessage, normalizeAmount } from './utils'
 import ForecastWriteOffView from './components/ForecastWriteOffView.vue'
 import FlowWriteOffView from './components/FlowWriteOffView.vue'
 import type {
   CancelWriteOffPredItem, FlowRow, ForecastRow, WriteOffFlowInput, WriteOffForecastItem, WriteOffItemInput,
 } from './typs'
 
+defineOptions({ name: 'DcpsWriteOffPage' })
+
 // 数字人民币核销页面：上方预报信息表格，下方流水信息表格。
 // 核销、撤销核销由两个表格的勾选行合并提交，按钮统一放在预报信息表格的工具栏。
 
@@ -233,16 +236,12 @@ const refreshBoth = async () => {
 <style scoped>
 /* 页面先扣除宿主占用高度，再使用 flex 分配剩余高度，让两个表格各占一半内部滚动。 */
 .dcps-page {
-  /* 手动修改这里：顶部导航/页签 + 底部状态栏 + 宿主上下留白的合计高度。
-     独立页面保持 0px；例如顶部 90px、底部 24px、上下留白 6px，填写 120px。
-     不包含浏览器标签栏、地址栏，也不包含本页面自身的 padding。 */
-  --host-layout-height: 0px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 5px;
-  height: calc(100vh - var(--host-layout-height));
-  height: calc(100dvh - var(--host-layout-height));
+  height: calc(100vh - var(--dpcs-host-layout-height));
+  height: calc(100dvh - var(--dpcs-host-layout-height));
   min-width: 0;
   min-height: 0;
   padding: 5px;