扩展数据源

开发应用过程中，经常会遇到使用第三方的数据源，提供的数据返回格式和低代码平台接受的格式不一致的时候，可以通过 扩展数据转换器 进行适配，这种方式是全局的。

示例数据

平台接受请求结果直接返回数据，假如第三方数据接口返回的格式如下：

{
   "code": 0,
   "message":  "success",
   "repData": {
       "total": 10,
       "records": [ ] ,
   }
}

扩展数据转换器

1. 编写转换器

在/ui/module/plugins/目录下，创建文件custom-datasource-transport.ts，编写内容如下，应根据实际情况自行修改：

import {
  LcdpRendererPlugin,
  LcdpRendererPluginContext,
  ITransport,
  SimpleDsAxiosOpts,
  SimpleDsQueryOpts,
  TransportResponse
} from '@fly-vue/lcdp-engine'

import { HttpRequest } from '@fly-vue/core'
import _ from 'lodash'
/**
 * 构建业务需要的查询参数：按实际需求编写
 * @param _queryOpts - 组件传递过来的查询参数
 * @param _axiosOpts - 数据源原始的查询参数
 */
function buildRequestConfig(_queryOpts: SimpleDsQueryOpts, _axiosOpts: SimpleDsAxiosOpts) {
  //例如接口识别的分页参数和上述的page和pageSize有差异，可以将其获取出来后，重新放到_axiosOpts.params，参考如下
  let requestConfig = _.cloneDeep(_axiosOpts)
  //TODO 编写自己业务需要的转换逻辑
  requestConfig.params.pageNum = _queryOpts.page
  requestConfig.params.pageSize = _queryOpts.pageSize
  return requestConfig
}
/**
 * 自定义数据源转换器
 */
class CustomTransport implements ITransport {
  constructor() {
    //
  }
  async request(
    _queryOpts: SimpleDsQueryOpts,
    _axiosOpts: SimpleDsAxiosOpts,
    _context?: any
  ): Promise<TransportResponse> {
    let res: TransportResponse = { success: true, data: null, total: null }
    try {
      let requestConfig = buildRequestConfig(_queryOpts, _axiosOpts)

      let resp = await new HttpRequest().request(requestConfig)
      // TODO：自定义转换示例，这里需要根据接口数据写自己的转换逻辑，例如分页处理
      if (resp) {
        res.success = resp.success
        res.data = resp.data.repData.records // 修改数据集
        res.error = resp.error
        res.errorText = resp.errorText
        res.total = resp.data.repData.total // 修改数据总数
      }
    } catch (ex) {
      res.success = false
      res.error = ex
    }
    return res
  }
}

export const customDatasourceTransportPlugin: LcdpRendererPlugin = {
  id: 'customDatasourceTransportPlugin',
  install(context: LcdpRendererPluginContext) {
    //自定义数据源转换器ID，必须唯一，该名称会显示在类型中，请看截图
    const myDefaultTransportType = 'CustomType'
    //注册自定义数据源转换器
    context.transportFactory.register(myDefaultTransportType, CustomTransport)
    //如果你的api接口都是用这种类型的转换器，可以将此类型转换器设置为默认转换器
    context.transportFactory.setDefaultType(myDefaultTransportType)
  }
}

2. 注册转换器

在 module/plugins/index.ts 中添加如下代码：

import { LcdpRendererPluginRegistry } from '@fly-vue/lcdp-engine'
import { customDatasourceTransportPlugin } from './custom-datasource-transport'

export async function registerPlugins() {
  await LcdpRendererPluginRegistry.register(customDatasourceTransportPlugin)
}

3. 打包插件

在 ui 目录下执行下面的脚本：

npm run pack

npm run copyModule

3. 使用转换器

在类型选择的时候，选上CustomType,这个是自定义的名称。