页面渲染集成

1. 简介

1.1 功能简介

使用天舟云生成的视图页面/表单列表页面/表单详情页面/资源页面。

1.2 使用场景

• 二次开发表单：需要对天舟云生成的页面做一些额外的集成开发
• 自定义展示：需要对天舟云生成的页面做展示方式的自定义
• 业务系统挂载：需要在非CSB系统菜单中挂载天舟云生成的页面

2. 二次开发/自定义展示集成方式

2.1 安装依赖

npm包方式引入
在需要集成天舟云页面的工程下安装最新版本的@cvte/cir-lcp-sdk

npm i @cvte/cir-lcp-sdk
# 或
yarn add @cvte/cir-lcp-sdk

资源中心方式引入
在需要集成天舟云页面的业务系统工程下安装最新版本的@cvte/resource-center-sdk

rc i dp/tz-render

详细情况资源接入

2.2 使用页面渲染模版

模版根据页面类型会有不同的文件

高级列表页面：LCPPageTemplate
表单列表页面：LCPListTemplate
表单详情页面：LCPDetailTemplate
资源页面：LCPResourceTemplate

以视图页面为例

方式一：npm包引入

import { LCPPageTemplate } from '@cvte/cir-lcp-sdk'

方式二：资源引入

import Loader, { ILoaderResourceEnv, ReactRemoteLoaderComponent } from '@cvte/resource-center-sdk';

const LCPPageTemplate = ReactRemoteLoaderComponent(
  new Loader({
    appName: '资源宿主对应在资源中心中的资源名称',
    name: 'tz-render',
    env: `${document.getElementById('ENV')?.getAttribute('value') as ILoaderResourceEnv}`,
  }),
  'LCPPageTemplate',
  {
    useShared: true,
    mode: 'page',
  }
);

调用方式

<LCPPageTemplate {...props} />

2.3 表单页面渲染模版通用服务

2.4 表单列表页面入参说明

2.5 表单详情页入参说明

2.6 高级列表页面入参说明

3. 业务系统挂载集成方式

3.1 安装依赖

npm包方式引入
在需要集成天舟云页面的工程下安装最新版本的@cvte/cir-lcp-sdk

npm i @cvte/cir-lcp-sdk
# 或
yarn add @cvte/cir-lcp-sdk

资源中心方式引入
在需要集成天舟云页面的业务系统工程下安装最新版本的@cvte/resource-center-sdk

rc i dp/tz-render

详细情况资源接入

3.2 目录结构及别名工程改造

如果业务系统是CSB工程，则创建目录/app/modules/FormTemplate
如果业务系统非CSB工程，请联系我们「黄允桢」、「袁子涵」

同时需要确保该工程下的webpack版本>=5.0

增加webpack对该目录「FormTemplate」的别名指向

// webpack_override.js
if (!config.resolve.alias['~csbApp']) {
    config.resolve.alias['~csbApp'] = path.join(__dirname, './app');
}

3.3 工程接入资源中心

须需要按照资源接入-CSB工程接入的步骤说明去改造当前业务系统的CSB工程

3.4 集成渲染模版代码

3.4.1 表单详情渲染模版

文件路径
/app/modules/FormTemplate/Detail.tsx

文件内容

// 资源接入的方式
import Loader, { ReactRemoteLoaderComponent, ILoaderResourceEnv } from '@cvte/resource-center-sdk';

const CSBDetail = ReactRemoteLoaderComponent(
  new Loader({
    appName: '这里必须填写业务系统在资源中心上的资源名称',
    name: 'tz-render',
    env: `${document.getElementById('ENV')?.getAttribute('value') as ILoaderResourceEnv}`,
  }),
  'LCPDetailTemplate',
  {
    useShared: true,
    mode: 'page',
  }
);

export default CSBDetail;

// npm包接入的方式
import { LCPDetailTemplate } from '@cvte/cir-lcp-sdk'

export default LCPDetailTemplate;

3.4.2 表单列表渲染模版

文件路径
/app/modules/FormTemplate/List.tsx

文件内容

3.4.2.1 资源接入的方式

import Loader, { ReactRemoteLoaderComponent, ILoaderResourceEnv } from '@cvte/resource-center-sdk';

const CSBList = ReactRemoteLoaderComponent(
  new Loader({
    appName: '这里必须填写业务系统在资源中心上的资源名称',
    name: 'tz-render',
    env: `${document.getElementById('ENV')?.getAttribute('value') as ILoaderResourceEnv}`,
  }),
  'LCPListTemplate',
  {
    useShared: true,
    mode: 'page',
  }
);

export default CSBList;

3.4.2.2 npm包接入的方式

import { LCPListTemplate } from '@cvte/cir-lcp-sdk'

export default LCPListTemplate;

3.4.3 高级列表渲染模版

文件路径
/app/modules/FormTemplate/Page.tsx

文件内容

3.4.3.1 资源接入的方式

import Loader, { ILoaderResourceEnv, ReactRemoteLoaderComponent } from '@cvte/resource-center-sdk';

const List = ReactRemoteLoaderComponent(
  new Loader({
    appName: '这里必须填写业务系统在资源中心上的资源名称',
    name: 'tz-render',
    env: `${document.getElementById('ENV')?.getAttribute('value') as ILoaderResourceEnv}`,
  }),
  'LCPPageTemplate',
  {
    useShared: true,
    mode: 'page',
  }
);
export default List;

3.4.3.2 npm包接入的方式

import { LCPPageTemplate } from '@cvte/cir-lcp-sdk'

export default LCPPageTemplate;

3.4.4 远程资源渲染模版

文件路径
/app/modules/FormTemplate/Resource.tsx

文件内容

3.4.4.1 资源接入的方式

import Loader, { ReactRemoteLoaderComponent, ILoaderResourceEnv } from '@cvte/resource-center-sdk';

const Resource = ReactRemoteLoaderComponent(
  new Loader({
    appName: '这里必须填写业务系统在资源中心上的资源名称',
    name: 'tz-render',
    env: `${document.getElementById('ENV')?.getAttribute('value') as ILoaderResourceEnv}`,
  }),
  'LCPResourceTemplate',
  {
    useShared: true,
    mode: 'page',
  }
);

export default Resource;

3.4.4.2 npm包接入的方式

import { LCPResourceTemplate } from '@cvte/cir-lcp-sdk'

export default LCPResourceTemplate;

3.5 CSB系统配置渲染模版页面

3.5.1 通用渲染模版页面

进入CSB系统的「页面配置」模块

在页面的「基本信息」标签中，选择「动态组件」类型，并将「动态组件路径」填写为本地接入对应渲染模版的文件路径（后缀.tsx不需填写）；

表单列表渲染模版
动态组件路径：modules/FormTemplate/List（须根据CSB系统下渲染模版在本地文件路径的实际地址填写）
路由参数：appId=表单所在天舟云的应用ID&tenantId=表单所在天舟云的租户ID&classId=表单分类ID&apiName=表单编码
路由参数示例：appId=6b7905752faa40518a1da1bc5c8931de&tenantId=c518f53d-b405-4111-afe1-5c082b284971&classId=c3515f85f3304a069c37fcd8044750ab&apiName=T_STOCK_LIST

表单详情渲染模版
动态组件路径：modules/FormTemplate/Detail（须根据CSB系统下渲染模版在本地文件路径的实际地址填写）
路由参数：appId=表单所在天舟云的应用ID&tenantId=表单所在天舟云的租户ID&classId=表单分类ID&apiName=表单编码
路由参数示例：appId=802b609c0e0a402398cbafe78e4e205d&tenantId=c518f53d-b405-4111-afe1-5c082b284971&classId=392f1867c929451380c5dafe87d37492&apiName=T_PROJECT

高级列表渲染模版
选择「动态组件、开启视图配置」类型
动态组件路径：modules/FormTemplate/Page（须根据CSB系统下渲染模版在本地文件路径的实际地址填写）
路由参数：pageCode=页面资源的编码
路由参数示例：pageCode=bsm_resource_rc_manager_detail

3.5.2 远程资源渲染模版页面

在页面的「基本信息」标签中，同时选择「动态组件、资源组件」类型，并将「动态组件路径」填写为modules/FormTemplate/Resource；

表单详情渲染模版
动态组件路径：modules/FormTemplate/Resource（须根据CSB系统下渲染模版在本地文件路径的实际地址填写）
路由参数传入的信息全部会透传给资源组件作为入参

并填写「资源名、导出键名」信息，资源版本默认为「latest」，以获取最新资源