实战示例

1. 备注

1. 宜搭页面数据源现已支持添加 “连接器” 作为数据源 (如下图所示) ，如果您使用添加“连接器”功能，则可以略过本文档的 「2.1 新建远程数据源」小节。
2. 本文档是实战示例1 ，此外还有实战示例2，实战示例2的文档: 使用自定义连接器解决跨域问题

2. 步骤

2.1 新建远程数据源

新建远程数据源，请求方法选 POST，请求地址填“服务消费”接口的地址，请求参数添加 2 项: serviceInfo 和 inputs，并填写 serviceInfo 和 inputs 的值(直接写成对象字面量的形式(例如{"a":"b"})即可，无需自己转义(例如写成"{"a":"b"}"))， 示例值 inputs 填 { "path": {}, "query": { "PageIndex": "1", "PageSize": "50", "KeyWord": '默认关键词' }, "header": { "content-type": "application/json"( 注意:如果入参header里不填content-type， 则宜搭服务端请求三方服务时默认用 application/x-www-form-urlencoded ，请根据三方服务的要求调整，目前在连接器工厂里设置的Headers参数实际并不会生效 ) } }, serviceInfo 填 {"connectorInfo":{"connectorId":"Http_1234567","actionId":"getItemList","type":"httpConnector","connection":"10"}};

2.2 数据处理

对服务返回值做处理, 例如做数据结构转换

示例代码:

function fit(response) {
  console.log("SAP_Connector fit",response);
  //获取服务的真实返回值
  const serviceResult = (response.content !== undefined) ? response.content.serviceReturnValue:null;
  //本示例要取的数据是服务真实返回值(本示例的服务真实返回值是一个对象)的Content属性的值(本示例是一个对象数组)
  const content = ( serviceResult !== null) ? serviceResult.Content : null;
  const error = {
    message: response.errorMsg ||
      (response.errors && response.errors[0] && response.errors[0].msg) ||
      (response.content && response.content.serviceReturnValue && response.content.serviceReturnValue.ErrorCode) || '远程数据源请求出错，success is false',
  };
  let success = true;
  if (response.success !== undefined) {
    success = response.success;
  } else if (response.hasError !== undefined) {
    success = !response.hasError;
  }

  var arr=[];
  var array = content?content:[];

  for (var i = 0; i < array.length; i++) {
    arr.push({
      "defaultChecked": false,
      "text": array[i].ItemName,
      "value": array[i].ItemCode
    });
  }

  return {
    content: arr,
    success,
    error,
  };
}

2.3 给下拉单选组件绑定数据源

选中下拉单选组件，切换到高级，新建动作, 选择 OnSearch 搜索, 在页面 JS 面板填写 JavaScript 代码, 实现实时更新下拉单选的选项

示例代码:

let lastTimer = null;

export function onSearch(keyword) {
  console.log('onSearch', keyword);
  //注：需下拉组件开启“可搜索”
  clearTimeout(lastTimer);
  lastTimer = setTimeout(() => {
    const inputs = {
      "path": {},
      "query": { "PageIndex": "1", "PageSize": "50", "KeyWord": keyword || '默认关键词' },
      "header": { "A": "B" ,  "content-type": "application/x-www-form-urlencoded" }
    }
    // 如果 Select 需要调用远程接口搜索，请将下方的 selectOptions 改为实际的数据源名称
    return this.dataSourceMap['SAP_Connector'].load({
      //这里的inputs会覆盖数据源里定义的inputs
      inputs: JSON.stringify(inputs),
    }).then((content) => {
      console.log('after search');

      this.$('selectField_kllxy5vi').set('dataSource', content);
    });
  }, 300);
}

--------------------欢迎关注我们--------------------