フォームでデータソースを取得し、ドロップダウンラジオコンポーネントに値を割り当てます

このケースは三者開発者「jing」から来た

JS 动作面板 - 前端代码开发 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效的。2. ...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

1. 使用シーン

サードパーティのインタフェースを使用してデータを取得する場合は、取得したデータをドロップダウンラジオコンポーネントのオプション値に処理し、選択してデータを送信したいと考えています。

2. 機能を実現する

2.1. 製品テーブルの設定

2.2. カスタムページの設定

2.3. データソースにリモートデータソースを追加します

参考ドキュメント:条件に基づいてフォームインスタンスの詳細リストを検索します

リクエストアドレス:

`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

インタフェース構成図:

2.4. 製品表データの取得

// 获取产品表数据
export function fetchData() {
  return this.dataSourceMap.getData.load({
    formUuid: 'FORM-DX966R61OJZA5Q4Z8FSEZAKO6JYN31TAIOZHL06',
    pageSize: 100
  }).then(res => {
    const { data = [] } = res;
    return data;
  }).catch(error => {
    this.utils.toast({
      title: error.message,
      type: 'error'
    });
    return [];
  });
}

2.5. ドロップダウンオプションのデータ処理

// 下拉选项处理(包含单选、复选)
export function selectOptions(data, fieldId) {
  const selectOptions = data.map(item => {
    return {
      text: item.formData[fieldId.substring(0, fieldId.length)],
      value: item.formData[fieldId.substring(0, fieldId.length)]
    }
  });
  return _.uniqBy(selectOptions, 'value');
}

2.6. 応用

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export async function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
  const loading = this.utils.toast({
    title: '数据获取中...',
    type: 'loading'
  });
  const result = await this.fetchData();
  this.$('selectField_lbfxqbi2').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  this.$('multiSelectField_lbfxqbi4').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  this.$('radioField_lbfxqbi5').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  this.$('checkboxField_lbfxqbi3').set('dataSource', this.selectOptions(result, 'textField_lbfxohtz'));
  loading();
}

3.効果を実現する

4.オンラインで試してみます

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_YTLXP2QNVPYFLFQ3FND6&from=yuque_subject