U-way ローコード実践: データ処理/変換の詳細な説明

「U-way ローコード技術コラム」は、U-way の 7 年間にわたるローコード技術の研究開発と運用保守の実績をもとに、U-way 技術委員会のメンバーが執筆する全く新しい技術ベースのコラムです。主にローコードロジックに関連する技術原則とアーキテクチャを紹介します。その目的は、大多数の運用保守担当者に技術交換と学習のためのプラットフォームを提供することです。

U-wayローコード実践シリーズ第8回

「データ加工・変換の詳しい解説」

▽

1. 表現

Visual Builder がデータを処理する場合、ほとんどの場合、シーンに合わせて式またはマイクロアプリケーション関数を使用できます。式の使用は主に比較的単純なシナリオ向けです。シーンが複雑すぎる場合でも、マイクロアプリケーション関数を使用することをお勧めします。関数内の操作に対してより高度な構文を使用できるだけでなく、関数のテストケースを作成してマイクロアプリの堅牢性を強化できるためです。

前の章では、いくつかの簡単な式の書き方とその意味を紹介しました。このレッスンでは、より高度な使用法を紹介します。レイアウトに戻り、表に作成時間の列を追加します。 ?

1.1 テーブルレイアウトの変更

属性面板-属性:
  columns:
    # 略...
    # 以下ctime为新增列
    - dataIndex: ctime
      key: ctime
      title: 创建时间
    - dataIndex: operator
      title: 操作
      key: operator
      useChildren: '[operator]'

1.2 DATAデータの変更

# 查询字段入参增加 ctime
Args:
  - TASK_FOR_VB_LESSON
  - fields:
      - name
      - state
      - assignee
      - reporter
      - description
      # 新增查询字段
      - ctime
    page: '${QUERY.page=1|number}'
    pageSize: '${QUERY.pageSize=20|number}'
    query: <% CTX.query %>

変更が完了すると、プレビューキャンバスでデータが更新されるのが表示されますが、時間が長すぎて希望どおりではないので、どうすればよいでしょうか?

このとき、式を使用して時刻を書式設定し、日付のみを表示することができますので、配置を変更する方法を見てみましょう。

1.3 テーブル式により ctime を解析する機能が追加されました

属性面板-属性:
  # 其他不变
  dataSource: |-
    <% 
      "track context", 
      {
        # 解构，
        ...CTX.taskList ?? {},
        # CTX.taskList.list 遍历，将其中的ctime进行处理
        list: CTX.taskList?.list?.map(item => ({
          ...item,
          ctime: item.ctime.split(" ").shift()
        }))
      }
    %>

処理後、データは以下に示すように予想される出力になります。

2. マイクロアプリケーション機能

前述したように、式は一部の単純なシナリオにしか適用できないことがほとんどですが、より複雑なシナリオの場合は、マイクロ応用関数を使用することをお勧めします。興味のある学生には、「マイクロ応用関数」を学習することをお勧めします。関数はどうやって書くのでしょうか?

2.1 新機能

左側のメニューで関数メニューを選択し、[関数の追加] ボタンをクリックします。関数名は test、タイプは typescript です。[OK] をクリックして関数を正常に作成し、次のようにメソッドを記述します。

function test(
  params: Params = {
    list: [],
    totol: 0,
    page: 1,
    pageSize: 20,
  }
): Params {
  const colorMap = {
    待研发: "blue",
    研发中: "yellow",
    研发完成: "green",
  };
  const arr = params.list.map((item) => ({
    ...item,
    stateColor: colorMap[item.state],
    ctime: item.ctime.split(" ").shift(),
  }));


  return {
    ...params,
    list: arr,
  };
}


interface Params {
  list: Array<any>;
  totol: number;
  page: number;
  pageSize: number;
}

最後に「保存」をクリックし、「ビルド＆プッシュ」ボタンをクリックすると、その機能がアレンジメントで使用できるようになります。

2.2 配置変更

属性面板-属性:
  # 只需要改这行
  dataSource: '<% "track context", FN.test(CTX.taskList) %>'

table コンポーネントの [state] スロットで
presentational-bricks.brick-tag コンポーネントを見つけて、プロパティを次のように変更します。

属性面板-属性:
  # 只增加 color 属性
  color: <% DATA.rowData.stateColor %>
  showCard: false
  tagList:
    - <% DATA.rowData.state ?? "待研发" %>

最後に、レイアウトプレビューキャンバスを確認します。これは期待どおりです。

3. 結論

この時点で、単純なデータ処理と変換は終了しました。この章はマイクロアプリケーションのレイアウトにとって非常に重要です~

U-way ローコード実践: データ処理/変換の詳細な説明

おすすめ