vue3-element-plus-app-chu 0.0.34 → 0.0.35

package/README.md

@@ -34,11 +34,11 @@ pnpm dev:backend  # 只启动 verce-vue-test/backend 后端
 - 新增仅要求业务类型、预报金额、交易日期和收支方向，客户、机构等字段选填；支付渠道未传时由后端默认 `8`，预报日期未传时由后端默认当天。新增、修改不展示或提交接口未声明的票号、出票日。
 - 详情只展示当前详情接口声明的 15 个字段；编辑仅提交定位流水号和实际变更的可写字段，避免将详情未返回的信息覆盖为空。查询排序按日期降序、日期升序、金额降序、金额升序分别提交 `1/2/3/4`。
 - 模块目录与授权页面保持一致：`api.ts` 放接口定义，`typs.ts` 放类型，`index.vue` 包含列表、表单、详情和页面内工具函数。默认交易日期通过共用的 `src/view/dcps/runtime.ts` 获取，接口定义只维护在各自模块下，不再集中到 `src/api`。
-- 新增、修改、详情页面每行四列展示，窗口变窄后依次降为三列、两列、一列。
+- 新增、修改表单按实际内容区宽度自动排列，最多四列；侧栏或宿主容器变窄后自动减少列数。详情页面按窗口宽度调整列数。
 
 页面通过公共请求层读取 TAM 的 `head/body`，统一响应的解包与兼容处理由 `src/utils/request.ts` 负责。指定后端用于替代前端 mock；数字人民币核销、修改和撤销核销按顺序直接更新数据库，单机 MongoDB 即可使用。`head.consumerSeqNo` 可选，传入时支持相同请求重试；原金额和状态快照校验仍保留。注资发起只保存 `PENDING` / `NOT_SENT` 待处理记录，不调整账户余额；预报导入当前返回 `501`。业务校验、数据保存和导入导出均以指定后端的实时文档及实现为准。
 
-数字人民币页面的业务类型使用 `201/202/203` 字典，新增预报不提交 `predName`；项目内预报收支方向统一使用 `1` 收入、`2` 支出，流水统一使用 `I` 收入、`O` 支出，查询、请求和结果展示均按各自编码处理。核销预报待核销查询包含状态 `1/3`，展示交易对手账号；流水可按业务类型筛选并读取 `tranStatus`；注资明细支持起止交易日期；授权页展示业务类型中文名称。匡算明细展示部分核销状态。字段及页面接口映射见 [数字人民币接口摘录](docs/digital-rmb-apis.md)，当前接口约束以实时文档为准。
+所有页面的支付渠道统一使用 `8` 表示数字人民币。数字人民币页面的业务类型使用 `201/202/203` 字典，新增预报不提交 `predName`；项目内预报收支方向统一使用 `1` 收入、`2` 支出，流水统一使用 `I` 收入、`O` 支出，查询、请求和结果展示均按各自编码处理。核销预报待核销查询包含状态 `1/3`，展示交易对手账号；流水可按业务类型筛选并读取 `tranStatus`；注资明细支持起止交易日期；授权页展示业务类型中文名称。匡算明细展示部分核销状态。字段及页面接口映射见 [数字人民币接口摘录](docs/digital-rmb-apis.md)，当前接口约束以实时文档为准。
 
 独立页面 `/flow-query` 的普通查询、初次加载、分页和刷新与核销页面的流水信息共用 `/TAM/0001/140502002`，参数保持一致：交易日期 `tranDate` 必填且默认取共用业务日期，可按业务类型、我方机构、付款人、收款人、收支方向、金额范围和核销状态筛选，未填写的可选条件不提交。列表读取 `resultList` 和字符串类型的 `totalCount`，字段沿用核销流水模型。「查询」「实时查询流水」与「重置」按钮并排放在查询条件区末尾。「实时查询流水」单独调用 `/TAM/0001/140504002`，只携带公共分页参数 `pageIndex: 1`、`pageSize: 1`，业务请求体为空；成功提示“操作成功”，失败仅记录控制台，不更新列表。
 

package/package.json

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

package/src/view/dcps/README.md

@@ -16,11 +16,18 @@
 
 公共样式变量仍放在 `common.css`，由 `src/main.ts` 统一引入。
 
+## 移植到其他宿主项目
+
+- 同步完整的页面模块及它引用的公共文件，包括 `runtime.ts`、`dictionaries.ts` 和表格组件；仅复制旧版 `index.vue` 或遗漏公共字典，会造成控件、选项和当前代码不一致。预报新增页的支付渠道应为“数字人民币”下拉项，提交字符串 `8`。
+- 宿主须注册 Element Plus 并加载配套样式。预报新增、修改表单在页面内明确约束标签在上方左对齐、控件占满列宽及卡片内部滚动；这些样式只作用于当前表单。宿主若使用 `!important` 强制覆盖 Element Plus 内部类，仍需收窄该全局规则的作用范围。
+- 表单按实际内容宽度分列，每列以 `240px` 为基准，最多四列，不再依赖整个浏览器视口决定列数。
+- 高度变量 `--dpcs-host-layout-height` 表示宿主顶部导航、页签、底部状态栏及外部上下留白的总高度。移植时在宿主容器上设置实际值，例如 `.dcps-host { --dpcs-host-layout-height: 120px; }` 中的 `120px` 只是示例。预报页在变量缺失时按 `0px` 计算；宿主有额外栏位时仍须设置此值。其他 DCPS 页面继续共用 `common.css`。
+
 ## 当前接口契约
 
 接口统一使用 `/Users/bombingpig/WebstormProjects/verce-vue-test/backend`，以 [Scalar 文档](http://localhost:3011/oms/docs) 和 [OpenAPI JSON](http://localhost:3011/oms/openapi.json) 为准。服务前缀为 `/oms`，前端开发代理将 `/TAM`、`/api`、`/nacos` 转发到 `http://localhost:3011/oms`。本项目已移除原 `backend/`；仓库内 `docs/digital-rmb.openapi.json` 为字段摘录。
 
-预报新增必填 `busiType`、`predAmt`、`tranDate`、`payDirec`，业务类型字典为 `201` 兑回、`202` 兑出、`203` 付现；新增和修改不提交 `predName`、`billNo`、`billDate`。客户和机构等字段选填，`payChannel` 缺省为 `8`，`predDate` 缺省为后端当天日期。项目内预报收支方向统一为 `1` 收入、`2` 支出，流水统一为 `I` 收入、`O` 支出；预报管理、核销预报和匡算预报明细按 `1/2` 处理，流水查询、核销流水和匡算流水明细按 `I/O` 处理。核销预报待核销传 `verifyStatusList: ['1', '3']`，已核销传 `['2']`。核销页流水查询使用 `busiType`，读取 `tranStatus`（`S/P/F`），展示核销状态 `3` 部分核销。注资明细提供 `txnDtStart`、`txnDtEnd` 筛选。字段摘录及页面接口映射见 `docs/digital-rmb-apis.md`，业务校验与保存行为由指定后端负责。
+预报新增必填 `busiType`、`predAmt`、`tranDate`、`payDirec`，业务类型字典为 `201` 兑回、`202` 兑出、`203` 付现；新增和修改不提交 `predName`、`billNo`、`billDate`。客户和机构等字段选填，`payChannel` 缺省为 `8`，`predDate` 缺省为后端当天日期。所有页面的支付渠道统一使用 `8` 表示数字人民币。项目内预报收支方向统一为 `1` 收入、`2` 支出，流水统一为 `I` 收入、`O` 支出；预报管理、核销预报和匡算预报明细按 `1/2` 处理，流水查询、核销流水和匡算流水明细按 `I/O` 处理。核销预报待核销传 `verifyStatusList: ['1', '3']`，已核销传 `['2']`。核销页流水查询使用 `busiType`，读取 `tranStatus`（`S/P/F`），展示核销状态 `3` 部分核销。注资明细提供 `txnDtStart`、`txnDtEnd` 筛选。字段摘录及页面接口映射见 `docs/digital-rmb-apis.md`，业务校验与保存行为由指定后端负责。
 
 核销预报 API 按 `1/2` 原值提交并读取方向，流水 API 按 `I/O` 原值提交并读取方向；核销写操作提交公共 `consumerSeqNo`、原状态和原金额快照。后端作为替代前端 mock 的本地测试服务，核销、修改和撤销核销按顺序直接更新数据库，各种 MongoDB 部署模式均不启动事务。`consumerSeqNo` 可选，缺省时后端生成，传入时支持相同请求重试；快照校验和关联撤回逻辑仍保留。注资明细使用服务端分页；发起注资只保存 `PENDING` / `NOT_SENT` 记录，不改变余额。参数接口当前由 `swaggerStub` 返回静态兼容数据，不持久化参数增删改。
 

package/src/view/dcps/dictionaries.ts

@@ -1,3 +1,10 @@
+/** 所有页面共用的支付渠道字典：8 数字人民币。 */
+export const payChannelLabels: Record<string, string> = { '8': '数字人民币' }
+
+/** 支付渠道下拉展示中文，查询和表单提交字符串代码。 */
+export const payChannelOptions = Object.entries(payChannelLabels)
+  .map(([value, label]) => ({ value, label }))
+
 /** 注资明细、流水查询和核销共用的交易处理状态。 */
 export const transactionStatusLabels: Record<string, string> = {
   S: '成功',

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

@@ -3,6 +3,7 @@ import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElConfigProvider, ElMessage } from 'element-plus'
 import API from './api'
 import { dcpsRuntime } from '../runtime'
+import { payChannelLabels } from '../dictionaries'
 import { localSort } from '@/utils/table-sort'
 import type {
   EstimationAmounts, EstimationCell, EstimationPredRow, EstimationQueryParams, EstimationTranRow,
@@ -116,8 +117,6 @@ const calcGapAmount = (inAmt: string, outAmt: string): string =>
 const forecastPayDirecLabels: Record<string, string> = { '1': '收入', '2': '支出' }
 /** 流水收支方向：I 收入、O 支出。 */
 const flowPayDirecLabels: Record<string, string> = { I: '收入', O: '支出' }
-/** 支付渠道：预报与流水的数字人民币分别为 8、5；其余渠道保留原文。 */
-const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
 /** 与核销页面统一展示核销状态；部分核销记录仍可能出现在匡算明细中。 */
 const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销', '3': '部分核销' }
 /** 业务类型字典：201 兑回、202 兑出、203 付现；与核销预报使用同一套枚举。 */

package/src/view/dcps/estimation/typs.ts

@@ -81,7 +81,7 @@ export interface Tam140503003OutBodyPredList {
   competName?: string
   /** 落地支行 */
   groundBranch?: string
-  /** 支付渠道 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
   /** 预报收支方向：1 收入、2 支出。 */
   payDirec?: string
@@ -105,7 +105,7 @@ export interface Tam140503003OutBodyTranList {
   busiType?: string
   /** 落地支行 */
   groundBranch?: string
-  /** 支付渠道 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
   /** 流水收支方向：I 收入、O 支出。 */
   payDirec?: string

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

@@ -24,6 +24,7 @@ import { computed, onActivated, onBeforeUnmount, reactive, ref, watch } from 'vu
 import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
 import API from './api'
 import { dcpsRuntime } from '../runtime'
+import { payChannelLabels, payChannelOptions } from '../dictionaries'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
 import { localSort } from '@/utils/table-sort'
 import type {
@@ -210,8 +211,6 @@ const busiTypeOptions = Object.entries(busiTypeLabels).map(([value, label]) => (
 /** 预报页面按业务字典展示中文，查询和编辑提交对应的字符串代码。 */
 const payDirecLabels: Record<string, string> = { '1': '收入', '2': '支出' }
 const payDirecOptions = Object.entries(payDirecLabels).map(([value, label]) => ({ value, label }))
-const payChannelLabels: Record<string, string> = { '8': '数字人民币' }
-const payChannelOptions = Object.entries(payChannelLabels).map(([value, label]) => ({ value, label }))
 const predStatusLabels: Record<string, string> = {
   '1': '正常预报',
   '2': '延迟预报',
@@ -765,7 +764,7 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
 <template>
   <ElConfigProvider :size="listTableSettings.size">
   <!-- 新增 / 修改页 -->
-  <main v-if="isEditor" class="page-shell">
+  <main v-if="isEditor" class="dcps-forecast-shell">
     <el-card class="shell-header" shadow="never" :body-style="{ padding: '10px' }">
       <div class="shell-heading">
         <el-button class="shell-back" :disabled="submitting" @click="backToList">
@@ -787,7 +786,7 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
           </div>
           <template v-else>
             <p class="editor-note">金额单位为元；业务类型按接口提供的选项选择，其他未提供字典的字段按业务代码填写。</p>
-            <el-form :model="form" label-position="top" :disabled="editorDisabled" @submit.prevent="submit">
+            <el-form class="dcps-forecast-form" :model="form" :inline="false" label-position="top" :disabled="editorDisabled" @submit.prevent="submit">
               <section v-for="group in visibleGroups" :key="group.title" class="editor-group" :aria-label="group.title">
                 <h3>{{ group.title }}</h3>
                 <div class="editor-fields">
@@ -874,7 +873,7 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
   </main>
 
   <!-- 详情页 -->
-  <main v-else-if="isDetail" class="page-shell">
+  <main v-else-if="isDetail" class="dcps-forecast-shell">
     <el-card class="shell-header" shadow="never" :body-style="{ padding: '10px' }">
       <div class="shell-heading">
         <el-button class="shell-back" :disabled="detailLoading" @click="backToList">
@@ -1017,8 +1016,8 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
   max-width: 100%;
   flex-direction: column;
   gap: 5px;
-  height: calc(100vh - var(--dpcs-host-layout-height));
-  height: calc(100dvh - var(--dpcs-host-layout-height));
+  height: calc(100vh - var(--dpcs-host-layout-height, 0px));
+  height: calc(100dvh - var(--dpcs-host-layout-height, 0px));
   min-width: 0;
   min-height: 0;
   padding: 5px;
@@ -1052,13 +1051,15 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
 
 /* ---------- 新增 / 修改、详情页外壳 ---------- */
 /* 与列表页面一致：扣除宿主占用高度后，把剩余空间分给内容区，内容区内部滚动。 */
-.page-shell {
+.dcps-forecast-shell {
   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));
+  height: calc(100vh - var(--dpcs-host-layout-height, 0px));
+  height: calc(100dvh - var(--dpcs-host-layout-height, 0px));
   min-width: 0;
   min-height: 0;
   padding: 5px;
@@ -1072,34 +1073,30 @@ watch([detailDialogVisible, detailDialogPredRefNo], ([visible]) => {
 .shell-title { margin: 0; color: var(--el-text-color-primary); font-size: 16px; font-weight: 600; line-height: 22px; }
 
 /* ---------- 新增 / 修改页 ---------- */
-.editor-card { flex: 1; min-height: 0; min-width: 0; }
-.editor-body { display: flex; height: 100%; min-height: 0; flex-direction: column; gap: 10px; }
-.editor-scroll { flex: 1; min-height: 0; padding-right: 2px; overflow-y: auto; }
+.dcps-forecast-shell .editor-card { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; }
+/* 显式建立卡片内容区的高度链，不依赖宿主的 Element Plus 卡片布局。 */
+.dcps-forecast-shell .editor-card > :deep(.el-card__body) { box-sizing: border-box; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
+.editor-body { display: flex; flex: 1; width: 100%; min-width: 0; min-height: 0; flex-direction: column; gap: 10px; }
+.editor-scroll { flex: 1; min-width: 0; min-height: 0; padding-right: 2px; overflow-y: auto; }
 .editor-load-error { margin-bottom: 12px; }
 .editor-note { margin: 0 0 12px; color: var(--el-text-color-secondary); font-size: 12px; line-height: 1.6; }
 .editor-group + .editor-group { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--el-border-color-lighter); }
 .editor-group h3 { margin: 0 0 12px; color: var(--el-text-color-primary); font-size: 13px; font-weight: 600; line-height: 18px; }
-.editor-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
-.editor-fields :deep(.el-form-item) { min-width: 0; margin-bottom: 14px; }
-.editor-fields :deep(.el-form-item__label) { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; padding: 0; line-height: 20px; }
-.editor-fields :deep(.el-date-editor.el-input), .editor-fields :deep(.el-select) { width: 100%; }
+.dcps-forecast-form { width: 100%; min-width: 0; margin: 0; }
+/* 以实际内容宽度分列：每列至少 240px，最多四列；54px 是三处 18px 列间距。 */
+.editor-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 54px) / 4))), 1fr)); column-gap: 18px; }
+/* 仅约束此表单，避免宿主的横向表单、右对齐标签或固定控件宽度影响移植布局。 */
+.dcps-forecast-form .editor-fields :deep(.el-form-item) { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; margin: 0 0 14px; }
+.dcps-forecast-form .editor-fields :deep(.el-form-item__label-wrap) { width: 100%; margin: 0; }
+.dcps-forecast-form .editor-fields :deep(.el-form-item__label) { display: flex; float: none; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; height: auto; margin: 0 0 5px; padding: 0; line-height: 20px; text-align: left; }
+.dcps-forecast-form .editor-fields :deep(.el-form-item__content) { width: 100%; min-width: 0; margin-left: 0; }
+.dcps-forecast-form .editor-fields :deep(.el-input), .dcps-forecast-form .editor-fields :deep(.el-textarea), .dcps-forecast-form .editor-fields :deep(.el-date-editor), .dcps-forecast-form .editor-fields :deep(.el-select) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
 .editor-field--wide { grid-column: 1 / -1; }
 .field-unavailable { color: var(--el-text-color-secondary); font-size: 11px; font-weight: 400; }
-.editor-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--el-border-color-lighter); }
+.editor-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--el-border-color-lighter); }
 .editor-tip { color: var(--el-text-color-secondary); font-size: 12px; }
 .editor-error { margin: 0; padding: 6px 10px; border: 1px solid var(--el-color-danger-light-7); border-radius: 4px; background: var(--el-color-danger-light-9); color: var(--el-color-danger); font-size: 12px; line-height: 1.6; }
 
-@media (max-width: 1400px) {
-  .editor-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-@media (max-width: 1000px) {
-  .editor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (max-width: 600px) {
-  .editor-fields { grid-template-columns: minmax(0, 1fr); }
-  .editor-field--wide { grid-column: auto; }
-}
-
 /* ---------- 详情页 ---------- */
 .detail-card { flex: 1; min-height: 0; min-width: 0; }
 .detail-scroll { height: 100%; padding-right: 2px; overflow-y: auto; }

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

@@ -3,7 +3,7 @@ import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
 import API from './api'
 import { dcpsRuntime } from '../runtime'
-import { transactionStatusLabels as tranStatusLabels } from '../dictionaries'
+import { payChannelLabels, transactionStatusLabels as tranStatusLabels } from '../dictionaries'
 import { ArtDataTable, type ColumnOption, type PaginationOptions, type TableSettings } from '@/components/table'
 import { localSort } from '@/utils/table-sort'
 import type {
@@ -121,8 +121,6 @@ const busiTypeLabels: Record<string, string> = { '201': '兑回', '202': '兑出
 /** 预报使用 1 收入、2 支出；流水使用 I 收入、O 支出，查询按各自编码提交。 */
 const forecastPayDirecLabels: Record<string, string> = { '1': '收入', '2': '支出' }
 const flowPayDirecLabels: Record<string, string> = { I: '收入', O: '支出' }
-/** 支付渠道：核销预报为 8、流水为 5，均表示数字人民币；其余渠道保留原文。 */
-const payChannelLabels: Record<string, string> = { '5': '数字人民币', '8': '数字人民币' }
 /** 响应核销状态字典；流水筛选仍按请求协议仅提供 1、2。 */
 const verifyStatusLabels: Record<string, string> = { '1': '未核销', '2': '已核销', '3': '部分核销' }
 const predStatusLabels: Record<string, string> = { '1': '正常预报', '2': '延迟预报' }

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

@@ -92,7 +92,7 @@ export interface Tam140502001InBody {
   competName?: string
   /** 截止金额 */
   endTransAmt?: string
-  /** 支付渠道,8:数字人民币 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
   /** 收支方向：1 收入、2 支出。 */
   payDirec?: string
@@ -126,7 +126,7 @@ export interface Tam140502001OutBodyResultList {
   edusFlag?: string
   /** 落地机构名称 */
   groundBranchName?: string
-  /** 支付渠道,8:数字人民币 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
   /** 收支方向：1 收入、2 支出。 */
   payDirec?: string
@@ -196,7 +196,7 @@ export interface Tam140502002OutBodyResultList {
   payBankName?: string
   /** 付款行行号 */
   payBankNo?: string
-  /** 支付渠道,5：数字人民币 */
+  /** 支付渠道：8 数字人民币。 */
   payChannel?: string
   /** 收支方向：I 收入、O 支出。 */
   payDirec?: string