iotlcm/vue/apps/web-antd/src/template/iotlcm-crud-style/MEMORY.md

任务组：IOTLCM CRUD 新风格模板的正确使用与弹窗内表格扩展

scope（范围）：apps/web-antd/src/template/iotlcm-crud-style 模板学习与迁移工作，尤其是把默认生成或旧风格 CRUD 页面迁移到新风格时，遇到查看弹窗内新增 Tab、弹窗内 Grid、接口契约不明确、字段配置归属不清等场景。

applies_to（适用条件）：cwd=E:/Projects/Componany/XiuJieZhiLian/IotLcm/iotlcm-admin-ui/vue；适用于 apps/web-antd/src/views/iotlcm/... 与对应 apps/web-antd/src/api/iotlcm/... 的 Vben 页面迁移；每次学习 iotlcm-crud-style 目录时，必须先读 README.md，并同步读取本文件。

任务 1：修正 tSimFlowPool 查看弹窗中的流量池号卡 Tab，成功

keywords（关键词）

• iotlcm-crud-style, tSimFlowPool, view.vue, model.tsx, PoolCardGridColumns, PoolCardGridSchema, ViewDescSchema, useVbenVxeGrid, proxyConfig, BetterVben.grid.gridOptions.modal, GetCardsByPackageCodes, any, packageCodes, flowPoolCode

用户偏好

• 当用户要求参考 apps/web-antd/src/template/iotlcm-crud-style 修正页面时，不要只套外层模板；要把列表、弹窗、表单、查看详情、弹窗内 Grid、对应 API 一起放到当前模板语境中判断。
• 当接口返回结构没有本地后端契约、类型文件、Swagger 或已有实现能确认时，不要凭前端列名推断返回类型；保留 any，并在汇报中明确说明“接口返回未确认，所以未定义响应模型”。
• 当用户指出“columns 应该放哪里”时，默认遵循配置归属：所有表格列配置放在 model.tsx，组件文件只负责组合实例、状态与调用。
• 当查看弹窗新增 Tab 内含表格时，这个表格属于查看弹窗的扩展配置，不属于主页列表配置；相关列和查询表单应放在 ViewDescSchema 后面，而不是插在 IndexGridColumns 和 EditFormSchema 中间。
• 当用户指出“proxyConfig 不会用？”时，弹窗内 Grid 的数据加载也应优先使用 useVbenVxeGrid({ gridOptions: { proxyConfig: { ajax: { query }}}})，不要手动 setGridOptions({ data }) 塞数据。
• 当用户明确纠正实现方式时，先核对当前项目已有写法和模板文档，再做最小改动；不要为了消除 lint 或 any 而编造类型、字段或接口契约。

可复用知识

• model.tsx 是表单字段、表格列、查看描述等配置的集中位置；普通页面顺序仍为：
  • IndexGridSchema
  • IndexGridColumns
  • EditFormSchema
  • ViewDescSchema
• 如果查看弹窗内新增了业务 Tab 和 Grid，相关配置应追加在查看配置之后，例如：
  • ViewDescSchema
  • PoolCardGridColumns
  • PoolCardGridSchema
• view.vue 中的弹窗内 Grid 推荐结构：

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    ...(BetterVben.grid.formOptions.default as any),
    schema: PoolCardGridSchema,
  },
  gridOptions: {
    ...(BetterVben.grid.gridOptions.modal as any),
    columns: PoolCardGridColumns,
    proxyConfig: {
      ajax: {
        query: async ({ page }: any, formValues: any) => {
          if (!flowPoolCode.value) {
            return {};
          }
          return await GetCardsByPackageCodes({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
            packageCodes: packageCodes.value,
            flowPoolCode: flowPoolCode.value,
          });
        },
      },
    },
  },
});

• 查看弹窗打开时应只做详情加载、上下文状态设置和触发表格查询：

const record = await View({ id: row.id });
setDescProps({ data: record }, true);
flowPoolCode.value = record.flowPoolCode || '';
packageCodes.value = record.packageCodes || [];
await gridApi.query();

• 查看弹窗关闭时应清空弹窗局部状态，避免再次打开时沿用上一次数据：

activeKey.value = '1';
flowPoolCode.value = '';
packageCodes.value = [];
setDescProps({ data: {} }, true);

• 弹窗内 Grid 应使用 BetterVben.grid.gridOptions.modal，不是随手使用 default 或手写一套 height/cellStyle/headerCellStyle/rowStyle。
• GetCardsByPackageCodes 当前返回结构未确认时，可保留：

export function GetCardsByPackageCodes(params: any) {
  return requestClient.post<any>(
    '/iot/tSimFlowPool/getCardsByPackageCodes',
    params,
  );
}

或在只确认请求参数时保留请求参数的最小结构，但不要定义未验证的响应模型。

• 对弹窗内号卡表格，列配置应尽量参考已有 tCommunication/tSimCardInfo/model.tsx 的字段含义、字典渲染和通道选择配置，而不是凭字段名临时拼列。
• PoolCardGridSchema 这类弹窗内表格搜索表单也属于 model.tsx 配置；不要写在 view.vue 里。

失败与改进方式

• 症状：为了清掉 API 扫描里的 any，凭 view.vue 中的列名定义了 TSimFlowPoolCardModel 与响应类型。原因：没有确认后端路由实现或真实响应契约。修复：撤掉伪精确类型，保留 any 并说明接口返回未知。
• 症状：把 cardGridOptions.columns 写在 view.vue。原因：把弹窗内表格当成组件临时 UI，而不是页面配置的一部分。修复：把 PoolCardGridColumns 移到 model.tsx，并放在 ViewDescSchema 后面。
• 症状：通过 cardTableApi.setGridOptions({ data }) 手动塞表格数据。原因：忽略了 Vben Grid 的 proxyConfig.ajax.query 数据源模式。修复：把加载逻辑放入 useVbenVxeGrid 的 proxyConfig，打开弹窗后调用 gridApi.query()。
• 症状：弹窗内 Grid 没有使用 BetterVben.grid.gridOptions.modal。原因：只想到“有表格列”而没有区分主页面 Grid 与弹窗 Grid。修复：弹窗内表格使用 modal 配置，主页面表格使用 default 配置。
• 症状：为了“同步处理 API”删除或改造了不确定的旧接口。原因：把模板要求机械执行，未区分已使用、未使用和契约未知的接口。修复：先 rg 调用点；契约不明时保留 any 或最小改动，不做伪类型化。
• 症状：学习模板目录时只读 README.md，漏掉实战纠错知识。修复：每次学习 apps/web-antd/src/template/iotlcm-crud-style 时必须同时读取本文件。