メインコンテンツまでスキップ

展示項目情報、フィルタ機能、賛辞機能

企業プロジェクト管理: 企業内のさまざまなプロジェクトでは、すべてのプロジェクトを含み、プロジェクトタイプ別の分類をサポートし、プロジェクト看板の迅速な検索をサポートすることが非常に便利です。従業員は、あるプロジェクトに対する承認をワンクリックで表現することができますワンクリックで共有すると、異なるレベル間での情報の迅速な発信が容易になります。

学校科学研究チーム交流プラットフォーム: 研究チームはこのプロジェクトの展示を利用して、それぞれの担当する研究部分を追跡し、賛辞メカニズムを通じてメンバー間の積極的な交流を奨励することができる。同時に、研究成果は他の興味のある学者に簡単に共有したり、指導者に直接審査を提出したりすることができる。

前提条件​

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

効果を実現する​

通常フォームの作成​

通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。

プロジェクトカテゴリ​

項目カテゴリの基礎データを入力するために使用され、カテゴリ番号、項目カテゴリ、ソート重みが含まれ、「項目入力」、「ポイント記録」ページに関連付けることができます。

フォーム検証関数「exist」を設定して、入力項目カテゴリの一意性を制御します。

プロジェクト入力​

プロジェクトデータ入力ページ。基礎展示コンポーネントには、プロジェクト番号、プロジェクト名、プロジェクト説明、プロジェクト説明などが含まれ、システムフィールド: プロジェクトポイント数は現在のプロジェクトポイント数の合計数を記録するために使用されます。

「プロジェクトカテゴリ」は、他のフォームデータデータを関連付けるオプションのタイプを設定します。

いいね記録​

賛辞人と賛辞項目を記録するための基礎情報には、賛辞人、項目番号、項目カテゴリ、賛辞された項目インスタンスidが含まれます。

「プロジェクトカテゴリ」は、他のフォームデータデータを関連付けるオプションのタイプを設定します。

カスタムページの作成​

カスタムページを作成します。詳細はこちらカスタムページの作成。

リモートデータソースと変数の設定​

リモートデータソースの設定​

参考ドキュメント:アプリケーション間データソースapi

リクエストアドレスの設定:

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

リクエストパラメータの設定:

{
  formInstId: state.urlParams.projectId,
}

リクエストを送信するかどうかを設定します:

!!state.urlParams.projectId

要求コールバックパラメータdidfetchの追加

function didFetch(content) {
  const { formData = {}, formInstId } = content;
  this.setState({
    projectList: {
      currentPage: 1,
      data: [
        {
          formInstId,
          ...formData,
        },
      ],
      totalCount: 1,
    },
    searchWord: formData.textField_lbef2r08,
    loading: false,
  });
  return {
    formInstId,
    ...formData,
  };
}

データソース変数の設定​

データの取得​

プロジェクトカテゴリデータ取得​

// 获取项目类别列表
export function getProjectTypes() {
  this.utils.yida.searchFormDatas({
    formUuid: 'FORM-8E507AC0FDA64F6CA546F1A7AD572D4EIU74',
    pageSize: 100,
    dynamicOrder: JSON.stringify({
      numberField_m2yhtelj: '+',
    }),
  }).then((res) => {
    const { data = [] } = res;
    const projectTypeList = data.map((item) => {
      const { formData = {} } = item;
      return {
        tagText: formData.textField_lbehxi4x,
        tagValue: formData.serialNumberField_m2yhqogl,
      };
    });
    projectTypeList.unshift({
      tagText: '全部',
      tagValue: 'all',
    }); // 添加全部类别
    this.setState({
      projectTypeList,
    });
    const { tagValue = '', projectId = '' } = this.state.urlParams;
    if (tagValue && tagValue !== 'all') {
      // url 参数定位
      const defaultSelectedType = projectTypeList.filter((item) => {
        return item.tagValue === tagValue;
      });
      if (defaultSelectedType.length) {
        this.setState({
          selectedProjectType: defaultSelectedType[0],
        });
      }
    }
    if (!projectId) {
      this.getProjectList(); // 获取项目列表
    }
    this.getMyLikeList(); // 获取我的点赞列表
  }).catch(({ message }) => {
    this.utils.toast({
      title: message,
      type: 'error',
    });
  });
}

アイテムリストデータ取得​

// 获取项目列表
export function getProjectList() {
  const { pageSize, currentPage, selectedProjectType, searchWord } = this.state;
  this.utils.yida.searchFormDatas({
    formUuid: 'FORM-50754FC527CB478CA5E44F27857FF674FUM9',
    currentPage,
    pageSize,
    searchFieldJson: JSON.stringify({
      textField_lbef2r08: searchWord,
      checkboxField_lbef2r09: selectedProjectType.tagValue !== 'all' ? [selectedProjectType.tagText] : '',
    }), // 搜索条件
    dynamicOrder: JSON.stringify({
      numberField_lm5q6wty: '-',
    }), // 排序条件
  }).then((res) => {
    const { data = [], totalCount } = res;
    const projectList = data.map((item) => {
      const { formInstId, formData = {} } = item;
      return {
        formInstId,
        ...formData,
      };
    });
    this.setState({
      projectList: {
        currentPage: 1,
        data: projectList,
        totalCount,
      },
      loading: false,
    });
  }).catch(({ message }) => {
    this.utils.toast({
      title: message,
      type: 'error',
    });
    this.setState({
      loading: false,
    });
  });
}

いいね記録データ取得​

// 获取我的点赞列表
export function getMyLikeList() {
  const { selectedProjectType } = this.state;
  this.utils.yida.searchFormDatas({
    formUuid: 'FORM-A179AE31D869418A96533B224CD77249HIJ5',
    pageSize: 100,
    searchFieldJson: JSON.stringify({
      checkboxField_lbef2r09: selectedProjectType.tagValue !== 'all' ? [selectedProjectType.tagText] : '',
    }),
    originatorId: this.utils.getLoginUserId(),
  }).then((res) => {
    const { data = [] } = res;
    const myLikeList = data.map((item) => {
      const { formData = {}, formInstId } = item;
      return {
        formInstId,
        ...formData,
      };
    });
    this.setState({
      myLikeList,
    });
  }).catch(({ message }) => {
    this.utils.toast({
      title: message,
      type: 'error',
    });
    this.setState({
      loading: false,
    });
  });
}

カスタムページ表示効果の設定​

ページレイアウトのアウトラインツリー設定​

プロジェクトカテゴリ循環データバインディング​

「プロジェクトカテゴリ」カスタムスタイルクラスは、選択効果をコントロールできます

state.selectedProjectType.tagValue === item.tagValue ? 'selected' : ''

「プロジェクトカテゴリ」テキストのコンテンツバインディング

プロジェクト情報リスト循環データバインディング​

state.projectList.data

イベントバインディングの追加​

プロジェクトカテゴリのフィルタ設定​

// 项目类别点击
export function onFilterClick() {
  const { selectedProjectType } = this.state;
  if (selectedProjectType.tagValue === this.item.tagValue) {
    return;
  }
  this.addUrlSearchParams('tagValue', this.item.tagValue);
  this.setState({
    selectedProjectType: this.item,
    projectList: {},
    currentPage: 1,
    loading: true,
  });
  this.getProjectList(); // 获取项目列表
  this.getMyLikeList(); // 获取我的点赞列表
}

/**
* 新增&更新 URL 查询参数
* @param key {String} 需要新增&更新的参数名称
* @param value {String} 需要新增&更新的参数值
*/
export function addUrlSearchParams(key, value) {
  const newUrl = new URL(window.location.href);
  newUrl.searchParams.set(key, value);
  window.history.pushState({ path: newUrl.href }, '', newUrl.href);
}

検索ボックスの設定​

検索ボックスのデフォルト値変数をバインドします

state.urlParams.projectId ? state.getDataById.textField_lbef2r08 : ''

検索ボックスイベントのバインド

// 搜索框 onChange
export function onFilterInput(value) {
  if (!value) {
    this.setState({
      loading: true,
      currentPage: 1,
      searchWord: '',
    });
    this.getProjectList();
  }
}

// 搜索确认
export function onSearch(value) {
  this.setState({
    searchWord: value,
    loading: true,
    currentPage: 1,
  });
  this.getProjectList();
}

賛辞設定​

いいねボタンのバインディング変数

_.findIndex(state.myLikeList, (o) => { return o.textField_lm5o5ksw === item.formInstId }) !== -1 ? '已点赞' : '点赞'
_.findIndex(state.myLikeList, (o) => { return o.textField_lm5o5ksw === item.formInstId }) !== -1 ? 'normal' : 'primary'

イベントバインディングのポイント

// 点赞&取消点赞
export async function onClickLike() {
  const { myLikeList } = this.state;
  const likeIndex = _.findIndex(myLikeList, (o) => {
    return o.textField_lm5o5ksw === this.item.formInstId;
  });
  this.$('button_m2yhggbs').set('loading', true);
  if (likeIndex !== -1) {
    // 已点赞，取消点赞
    await this.utils.yida.deleteFormData({
      formInstId: myLikeList[likeIndex].formInstId,
    }).then((res) => {
      this.utils.toast({
        title: '已取消点赞',
        type: 'success',
      });
      this.getMyLikeList(); // 获取我的点赞列表
    }).catch(({ message }) => {
      this.utils.toast({
        title: message,
        type: 'error',
      });
      this.$('button_m2yhggbs').set('loading', false);
      return;
    });
  } else {
    // 未点赞，新增点赞
    await this.utils.yida.saveFormData({
      formUuid: 'FORM-A179AE31D869418A96533B224CD77249HIJ5',
      appType: pageConfig.appType,
      formDataJson: JSON.stringify({
        employeeField_lm5o5ksx: [this.utils.getLoginUserId()],
        textField_lm5o5ksw: this.item.formInstId,
        checkboxField_lbef2r09: this.item.checkboxField_lbef2r09_id,
        textField_m2yiz1lt: this.item.serialNumberField_m2yhz48p,
      }),
    }).then((res) => {
      this.utils.toast({
        title: '点赞成功',
        type: 'success',
      });
      this.getMyLikeList(); // 获取我的点赞列表
    }).catch(({ message }) => {
      this.utils.toast({
        title: message,
        type: 'error',
      });
      this.$('button_m2yhggbs').set('loading', false);
      return;
    });
  }
  setTimeout(() => {
    // 若出现票数不正确，可按需修改延时器的时间，目前 0 ms
    this.utils.yida.searchFormDatas({
      formUuid: 'FORM-A179AE31D869418A96533B224CD77249HIJ5',
      searchFieldJson: JSON.stringify({
        textField_lm5o5ksw: this.item.formInstId,
      }), // 搜索条件
    }).then((res) => {
      const { totalCount = 0 } = res;
      const { projectList } = this.state;
      projectList.data[this.index].numberField_lm5q6wty = totalCount;
      this.setState({
        projectList,
      }); // 更新 state 数据
      // 更新实际数据
      this.utils.yida.updateFormData({
        formInstId: this.item.formInstId,
        updateFormDataJson: JSON.stringify({
          numberField_lm5q6wty: totalCount,
        }),
        useLatestVersion: 'y', // 是否使用最新的表单版本进行更新
      }).catch(({ message }) => {
        this.utils.toast({
          title: message,
          type: 'error',
        });
      });
      this.$('button_m2yhggbs').set('loading', false);
    }).catch(({ message }) => {
      this.utils.toast({
        title: message,
        type: 'error',
      });
      this.$('button_m2yhggbs').set('loading', false);
    });
  }, 0);
}

設定を共有する​

イベントバインディングの共有

// 分享
export function onShareClick() {
  const { formInstId } = this.item;
  const url = `${location.origin}/${pageConfig.appType}/custom/${pageConfig.formUuid}?projectId=${formInstId}&corpid=${pageConfig.corpId}&isRenderNav=false`;
  this.copyToClip(url);
}

/**
* 文本复制
* @param copyText {String} 需要复制的内容
*/
export function copyToClip(copyText) {
  try {
    navigator.clipboard.writeText(copyText).then(() => {
      this.utils.toast({
        type: 'success',
        title: '复制成功',
      });
    }).catch(() => {
      this.utils.toast({
        type: 'error',
        title: '复制失败',
      });
    });
  } catch (e) {
    this.utils.toast({
      type: 'error',
      title: '复制失败',
    });
  }
}

ページング設定​

ページング変数バインディング

state.projectList.totalCount
state.currentPage
state.pageSize

ページングイベントバインディング

// 分页
export function onCurrentPageChange(currentPagination) {
  this.setState({
    loading: true,
    currentPage: currentPagination,
  });
  this.getProjectList();
}

画像プレビュー設定​

// 图片预览
export function onClickImage() {
  this.utils.previewImage({ current: this.item.imgUrl });
}

オンラインで試遊する​

この文書は機械翻訳により生成されています。翻訳により生じた齟齬や相違点は拘束力を持たず、コンプライアンスや執行目的において法的効力はありません。
© DingTalk (Singapore) Private Limited