カスタムページ使用手順

適切に使用するときは、タスクやプロジェクトの進捗状況を示すためのステップコンポーネントを見たことがあるかもしれません。

タスク管理、プロジェクト管理、生産プロセス管理、教育やチュートリアルガイドでは、これらの情報を表示するための手順がどこにでも見られ、ユーザーに明確なプロセスガイドを提供します現在の段階と次に必要な手順を直感的に理解できるようにします。この例では、カスタムページで使用する方法を学習しますステップバー。

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• ページ設定のカスタマイズ
• Steps

このチュートリアルでは、他の例を参照してください。この例を学ぶことができます。

• カスタムページ実装カンバンビュー

効果を実現する

実装手順

ページの作成

参考例:カスタムページ実装カンバンビュー

タスクの詳細の作成

データソース変数の設定

タスク詳細データ変数を図に示します

{
  detail: {},
  stepDataSource: []
}

タスク詳細変数の設定

「タスクタイトル」バインディング変数。コンポーネントの一意のidを変更することに注意してください。

state.detailSource.detail.radioField_lxy408q8

「タスク優先度」はスタイルクラスとバインディング変数をカスタマイズし、コンポーネントの一意のidを変更することに注意してください。

state.detailSource.detail.radioField_lxy408q8

「タスク担当者」は変数をバインドし、コンポーネントの一意のidを変更することに注意してください。

state.detailSource.detail.textField_lxy408qe

「タスク作成時間」バインディング変数。コンポーネントの一意のidを変更することに注意してください。

utils.formatter('date', state.detailSource.detail.dateField_lxy408qf, 'YYYY-MM-DD hh:mm')

「タスクの説明」バインディング変数。コンポーネントの一意のidを変更することに注意してください。

state.detailSource.detail.textareaField_lxy408q6

「ステップデータ」バインディング変数。

ページ機能の設定

タスクリストの設定イベントをクリックして、タスクの詳細を確認し、コンポーネントの一意のidを変更することに注意してください。

// 查看详情
export function onClickDetail() {
  this.$('drawer_lzawnz7v').show(() => {
    const detailData = {
      detail: {},
      stepDataSource: []
    }
    detailData.detail = this._item;
    detailData.stepDataSource = [
      this.createTaskPhase('待处理'),
      this.createTaskPhase('进行中'),
      this._item.radioField_lxy408qg_id === '已取消' ? this.createTaskPhase('已取消') : this.createTaskPhase('已完成'),

    ];
    const targetIndex = detailData.stepDataSource.findIndex(phase =>
      phase.title === this._item.radioField_lxy408qg_id
    );
    if (targetIndex !== -1) {
      detailData.stepDataSource.forEach((phase, index) => {
        phase.status = index < targetIndex ? 'finish' : (index === targetIndex ? 'process' : 'wait');
      });
    }
    this.setState({
      detailSource: detailData,
    });
  });
}

//处理步骤条数据
export function createTaskPhase(title = '--') {
  return {
    title, // 标题
    status: 'wait', // 状态
    content: this._item.textField_lxy408q5, // 显示内容
  };
}

「詳細を表示」クリックイベントを設定します。

export function onStepClick(index) {
  const { detail } = this.state.detailSource;
  this.utils.router.push(
    `/${pageConfig.appType}/formDetail/FORM-xxxxxx`, // 注意修改表单标识formUuid
    {
      formInstId: detail.formInstId,
      corpid: pageConfig.corpId,
    },
    true,
    true,
  );
}

オンラインで試遊する