ページタイムラインの使用をカスタマイズします

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用シーン

この例では、カスタムページでタイムラインコンポーネントを使用してプロジェクトの各段階の内容を表示する方法を紹介します。

2. 機能を実現する

2.1. データテーブルの作成

2.2. カスタムページの作成

2.3. ページ機能の設定

(1) データソースと使用する変数を設定する

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

インタフェース構成図

(2) 取得データをテーブルに表示する

Formuuidの値を変更することに注意してください。

export function getProjectData() {
  this.dataSourceMap.getData.load({
    formUuid: 'FORM-XXXXXXXXXXXXXXXXXX', // 您的表单formUuid
    currentPage: 1,
    pageSize: 100,
    searchFieldJson: {},
  }).then((res) => {
    const { data = [], totalCount } = res;
    if (totalCount) {
      const newArray = data.map((item) => {
        return {
          textField_lw8zdu2k: item.formData.textField_lw8zdu2k,
          serialNumberField_lw8zdu2q: item.formData.serialNumberField_lw8zdu2q,
          tableField_lw92zs1e: item.formData.tableField_lw92zs1e,
        };
      });
      this.setState({
        projectData: newArray,
      });
    }
  }).catch((error) => {
    this.utils.toast({
      title: error.message,
      type: 'error', // 'success', 'warning', 'error', 'notice', 'help', 'loading'
      duration: 3000, // 毫秒
    });
  });
}

(3) タイムラインの設定

(3.1) タイムラインデータの処理

export function onActionClick(rowData) {
  this.$('drawer_lw92pzv5').show(() => {
    this.setState({
      selectData: rowData,
    });
    this.setLineData('time', this.state.selectData);
  });
}

// 处理时间轴数据
export function setLineData(position, rowData) {
  // 映射时间轴状态
  const stateOption = {
    已完成: 'success',
    进行中: 'process',
    无效: 'error',
    未开始: '',
  };
  //时间轴数据格式如下：
  const newData = rowData.tableField_lw92zs1e.map((item) => {
    return {
      title: item.textField_lw92zs1f,
      [position]: item.dateField_lwa9918r ? this.utils.formatter('date', item.dateField_lwa9918r, 'YYYY-MM-DD HH:mm') : this.utils.formatter('date', item.dateField_lw92zs1j, 'YYYY-MM-DD HH:mm'),
      state: stateOption[item.radioField_lw92zs1l],
      content: item.textareaField_lw92zs1h,
      icon: stateOption[item.radioField_lw92zs1l] === 'success' ? 'success' : stateOption[item.radioField_lw92zs1l] == 'error' ? 'error' : '',
    };
  });
  this.setState({
    dateLineData: newData,
  });
}

(3.2) タイムライン折りたたみ制御

export function onOpenClick() {
  // 动态设置折叠项
  this.$('timeline_lw8vs9ac').set('fold', [
    {
      foldShow: false, // false：开启折叠；true：关闭折叠
      foldArea: [
        1, 2,
      ],
    }, { foldArea: [4], foldShow: false },
  ]);
}

3. 効果を実現する

• 日付はタイムラインの右側にあります

• 日付はタイムラインの左側にあります

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

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

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

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