取得したデータをサブフォームのドロップダウンラジオオプション値にフォームに代入します

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 setSelectOptions(formGroupIdList = []) {
  if (!formGroupIdList.length) {
    return;
  };
  const loading = this.utils.toast({
    title: '数据获取中...',
    type: 'loading'
  });
  const result = await this.fetchData();
  const tableField = this.$('tableField_lbk4l7c9');
  formGroupIdList.forEach(formGroupId => {
    // 设置指定行
    tableField.setComponentProps(formGroupId, 'selectField_lbk4l7ca', { dataSource: this.selectOptions(result, 'textField_lbk4c6v0') });
    tableField.setComponentProps(formGroupId, 'multiSelectField_lbk4l7cb', { dataSource: this.selectOptions(result, 'textField_lbk4c6v0') });
    tableField.setComponentProps(formGroupId, 'radioField_lbk4l7cc', { dataSource: this.selectOptions(result, 'textField_lbk4c6v0') });
    tableField.setComponentProps(formGroupId, 'checkboxField_lbk4l7cd', { dataSource: this.selectOptions(result, 'textField_lbk4c6v0') });
  });
  loading();
}

2.7. 応用

Didmountのときはデフォルトで一度取得します:

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export 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 items = this.$('tableField_lbk4l7c9').getItems(); // 获取所有的行标识
  this.setSelectOptions(items);
}

サブフォームに項目が追加されたときに取得します

// 子表单新增一项
export function onAddClick(newGroupId) {
  this.setSelectOptions([newGroupId]);
}

3. 効果を実現する

4. オンラインで試遊する

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

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

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