1 前言背景

• 存在比较复杂交互，非简单的常见组件可以满足的，目前平台未支持，可以使用前端二开集成方式，例如：地图、扫码等
• 交互上特殊性以及数据存在翻译或者转换处理的，则需要前后端一起二开的集成方式，例如：通用选择器、关联表单等

2 集成

2.1 组件前端集成

参考文档：自定义组件

2.2 组件后端集成

后端居多需要额外处理的情况如下：

• 存储值需要翻译或者转换处理
• 存储值比较复杂，需要特殊解析处理

2.2.1后端集成主要有以下场景需要按需处理

2.2.2 组件配置说明

设计器保存时候配置格式需要按照规范进行处理，配置则会在插件进行时候传递

{
    "baseConfig": {
        // 属性类型 CUSTOM_COMP
        "attrType": "RELATE_DATA",
        // 如果使用数据字典方式需要填入数据字典编码
        "dictId": null,
        // 组件本身特殊的配置，字典翻译、组件解析配置等
        "dictConfig": {},
        // 字段名称
        "name": "关联数据"
    }
}

3 示例

3.1 后端示例

插件并不是所有的都需要实现，根据场景按需实现即可。以通用选择器为例，则只需要实现导入导出翻译即可

3.1.1 组件后端工程结构

工程结构说明

包引用说明

3.1.2 SPI配置

配置类

@Configuration
@ComponentScan("com.cvte.lcp.component.rd")
@Slf4j
public class RelateDataComponentConfig {
}

配置文件spring.factories

org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
com.cvte.lcp.component.rd.boot.RelateDataComponentConfig

3.1.3 插件说明

3.1.3.1设计器组件配置保存

public interface FdLayoutAdPluginService {
    /**
     * 设计器组件配置保存后插口埋点方法
     * @param module2map 属性组配置
     * @param layoutList 全部的布局信息
     * @param configList 全部的配置信息
     */
    void saveAfter(Map<String, Map<String, String>> module2map, List<ObjLayoutConfig> layoutList, List<ObjGeneralConfig> configList);
}

3.1.3.2 表单详情渲染数据读取

public interface FormDataAttrRenderPlugin {

    String BEAN_NAME_SUFFIX = "_FormDataAttrRenderPlugin";

    /**
     * 获取表单详情前插口
     * @param attr
     * @param req
     * @param appInfo
     * @return 关联信息
     */
    List<FormDataJoinDTO> viewFormDetailBefore(AttrCorePTO attr, FormDataCorePTO req, AppInfo appInfo);


    /**
     * 获取组件对应的bean的名称
     * @param attrType 属性组件类型
     * @return 对应的bean名称
     */
    static String getBeanName(String attrType) {
        return String.format("%s%s", attrType, BEAN_NAME_SUFFIX);
    }

}

3.1.3.3 导入导出翻译

批量翻译都会使用此插口

public interface DictPlugin {

    /**
     * 判断插口实现是否能翻译当前数据
     * @param dto 字段配置数据
     * @return
     */
    default boolean support(DictTransDTO dto) {
        return false;
    }

    /**
     * 插口实现唯一标识当前翻译数据
     * @param dto 字段配置数据
     * @return 唯一key
     */
    default String dealUniqueKey(DictTransDTO dto) {
        return dto.getApiName();
    }

    /**
     * 执行批量翻译
     * @param multiDictTrans 多个配置数据批量翻译参数
     * @param userApp 用户应用信息
     * @return
     */
    default List<DictTransResultDTO> translate(MultiDictTransDTO multiDictTrans, UserAppInfo userApp) {
        return null;
    }
}

3.1.4 同主工程部署运行

在鲸云打包配置当中，将当前插件包下载到./jars目录中，一起打包到镜像即可，例如：

# 代码编译, 得到Jar包
mvn dependency:copy -Dartifact=com.cvte.lcp:lcp-app-starter:1.6.0-SNAPSHOT -DoutputDirectory=./
# 拷贝Jar包到当前根目录
cp ./lcp-app-starter*.jar lcp-app-starter.jar
# 创建jars目录
mkdir ./jars
# 将插件包下载到 jars目录当中
 mvn dependency:copy -Dartifact=com.cvte.lcp:lcp-base-ext:1.0.0-SNAPSHOT -DoutputDirectory=./jars
# 把Jar包压缩成tar.gz
tar -zcf lcp-app-starter.tar.gz ./lcp-app-starter.jar ./jars

以上即是后端集成的全部步骤了