背景

目前针对业务端渲染模版接入需要求业务端系统基于CSB架构

接入方式

业务端系统执行如下安装：

yarn add @cvte/cir-csb-common-view@1.4.9

环境变量配置

app/modules/App/global.js

import globalStore from '@cvte/cir-tools/utils/globalStore';
import { pluginStore } from '@cvte/cir-framework';
import menuEntity from '@cvte/cir-antdframe/entities/menu';
import { generatorGlobalContext } from '@cvte/cir-csb-common-view';
// 其他代码
// 设置全局网络请求代理
const setHeader = (xOrgId) => {
  axios.interceptors.request.use((config) => {
    const { headers } = config || { headers: {} };
    headers.common = {
      'Content-Type': 'application/json',
      'csrf-token': window.csrfToken,
      'crypt-key': (window.crypt || {}).cryptkey,
      'x-auth-token': window['x-auth-token'],
      'x-org-id': xOrgId || window['x-org-id'] || '',
      ...(headers.common || {}),
    };
    axios.defaults.headers.common = Object.assign(axios.defaults.headers.common, config.headers.common);
    return config;
  });
};
// 获取用户信息
observe(globalStore.userInfo, (change) => {
  const { newValue, name } = change;
  if (name === 'data') {
    generatorGlobalContext?.getContext?.()?.session?.setUser?.(newValue);
  }
});
// 获取组织信息
observe(menuEntity.globalMultiOrgData, (change) => {
  const { newValue, name } = change;
  if (name === 'data') {
    const xOrgId = pluginStore.get(menuEntity.surrentOrgId);
    if (xOrgId) {
      setHeader(xOrgId);
      const currentData = newValue?.find?.((item) => item.id === xOrgId);
      if (currentData) {
        generatorGlobalContext?.getContext?.()?.session?.setOrg?.(currentData);
      }
    }
  }
});
// 其他代码

config/server.js

修改CSB工程中/config/server.js文件内容

module.exports = {
  // 其他配置
  cirapi: {
      // 其他配置
      lcpCore: {
        url: process.env['lcp.core'],
      },
      lcpHub: {
        url: process.env['lcp.hub'],
      },
      lcpAnnex: {
        url: process.env['lcp.annex'],
      },
  }
  injectData: [
    // 其他配置
    { key: 'categoryId', value: process.env['annex.categoryId'] || 'csb_obj_file' },
    { key: 'tenantId', value: process.env['cplp.tenantId'] || 'c518f53d-b405-4111-afe1-5c082b284971' },
    { key: 'annexDomain', value: process.env['annex.domain'] || 'https://csbtest-api.gz.cvte.cn/cfile/' },
    { key: 'itemIndexName', value: process.env['item.data.indexName'] },
    { key: 'changeIndexName', value: process.env['change.data.indexName'] },
  ]
  // 其他配置
};

Apollo

增加如下表配置键值对

各业务域进行域名，下表域名为各业务域示例信息，配置地址时请与本业务域后端同学确认！！！

附件服务地址参考如下：

测试环境地址(内网)：https://csbtest-api.gz.cvte.cn/cfile;
测试环境地址(外网)：https://itapis.cvte.com/cfile-test/;
正式环境地址(内网)：https://csb-api.gz.cvte.cn/cfile;
正式环境地址(外网)：https://itapis.cvte.com/cfile/

动态模板接入

1.本地模板模块开发

1. 动态列表界面List.tsx

// 详情视图
import { CSBList } from '@cvte/cir-csb-common-view';
export default CSBList;

2. 详情界面模板Detail.tsx

// 详情视图
import { CSBDetail } from '@cvte/cir-csb-common-view';
export default CSBDetail;

2.动态菜单配置

请先完成动态菜单的升级改造：【1_菜单接入手册】

• 在系统管理下的页面配置中，新建一个动态模块；

• 选项须选择动态组件；

• 动态组件路径需填写本地代码所在app目录中的路径；

• 路由参数在使用业务端渲染模版的场景下需要必填的参数如下：

• 标签标志用于当打开方式为多页签的场景下，跳转页面时需要从当前路由参数中获取的标志键名；

1. 配置列表页面资源和菜单

2. 配置详情页面资源和菜单

静态模块接入

在原生开发的地方引入低代码列表、或低代码详情表单

// 列表视图
import { CSBList } from '@cvte/cir-csb-common-view';

// 详情视图
import { CSBDetail } from '@cvte/cir-csb-common-view';

<CSBList />

<CSBDetail />

<CSBList _pageCode={_pageCode} classId='b2bfce8e888d4042a436ec3ff00aba71'  apiName='T_FIELD_RELATION'  itemIndex={{itemIndex:'csb-test-substance-item'}} appId='7f13584756db4b51afccef440e301138' tenantId='c518f53d-b405-4111-afe1-5c082b284971'></CSBList>

<CSBDetail appId='7f13584756db4b51afccef440e301138' tenantId='c518f53d-b405-4111-afe1-5c082b284971' classId='b2bfce8e888d4042a436ec3ff00aba71'  apiName='T_FIELD_RELATION' ></CSBDetail>

二次开发

CSBList入参

CSBDetail入参

通用

列表视图

事件属性

事件监听

使用示例：

import { CSBMessage, viewEventListeners } from '@cvte/cir-csb-common-view'
const apiName='当前页面编码'
const classId='当前表单分类id'
CSBMessage.on(`${classId}${apiName}${viewEventListeners.onListCreate}`, (resp)=>{
  const { data } = resp;
  console.log(data)
});

事件触发

使用示例：

import { CSBMessage, viewEventLaunchers } from '@cvte/cir-csb-common-view'
const apiName='当前页面编码'
const classId='当前表单分类id'
CSBMessage.emit(`${classId}${apiName}${viewEventLaunchers.ListRefresh}`, { data: null });

详情视图

事件属性