カスタムページ一括呼び出しインタフェース (フロントエンド方式)
このケースは三者開発者「馮鵬」から来た
適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。
- 公式のデータソースには一定のqps制限があり、直接一括開始要求は制限されやすいが、場合によっては一括開始要求が必要であるでは、どのようにして一括して要求を開始し、プラットフォームに制限されないのでしょうか?
前提条件
このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。
このチュートリアルでは、web開発技術を使用しています。まず、次の技術を理解することができます。
効果を実現する
実装手順
データテーブルの作成
カスタムページの作成
ページ機能の設定
データを取得してテーブルに表示します
参考:カスタムページテーブルは、データ管理ページ機能を実現します
この例では、主に上記のドキュメントの削除を一括削除にアップグレードし、その他の機能は変更されません。
表行セレクタの設定
表行セレクタを開き、次の関数をバインドします
// 选择活动
export function onSelectChange(selectedRowKeys, records) {
this.setState({
selectedTableDataRowKeys: selectedRowKeys,
});
}
一括削除のヒント弾倉の設定
次の関数をバインドします
// 确认批量删除活动
export async function onBatchDeleteActivityOk() {
const { selectedTableDataRowKeys = [] } = this.state;
this.$('dialog_lqdgnbm3').set('confirmState', 'LOADING'); // 开启对话框加载状态
const batchDeleteLoading = this.utils.toast({
title: `删除中，预计需要 ${selectedTableDataRowKeys.length / 5} 秒...`,
type: 'loading',
});
const failedInstId = [];
// 循环调用删除接口
for (let i = 0; i < selectedTableDataRowKeys.length; i++) {
const delay = i === 0 ? 0 : 200;
await new Promise(((resolve) => {
// 注意节流，每次请求间隔 200 ms
setTimeout(async () => {
try {
await this.dataSourceMap.deleteData.load({
formInstId: selectedTableDataRowKeys[i],
});
} catch (e) {
// 把失败的实例 id 收集起来
failedInstId.push(selectedTableDataRowKeys[i]);
}
resolve();
}, delay);
}));
}
this.$('dialog_lqdgnbm3').set('confirmState', 'NORMAL'); // 关闭对话框加载状态
this.$('dialog_lqdgnbm3').hide();
batchDeleteLoading();
this.utils.toast({
title: `批量删除完毕，失败${failedInstId.length}条`,
type: 'success',
});
setTimeout(() => {
this.setState({
tableIsLoading: true,
selectedTableDataRowKeys: [],
});
this.getData(); // 获取数据
}, 1000);
}
テーブルトップアクションの設定
次の関数をバインドします
// 批量删除活动弹窗
export function onBatchDeleteActivityDialog(rowData) {
const { selectedTableDataRowKeys = [] } = this.state;
if (!selectedTableDataRowKeys.length) {
this.utils.toast({
title: '当前未选中任何活动',
type: 'warning',
});
return;
}
this.$('dialog_lqdgnbm3').show(() => {
this.$('numberField_lqdgnbm4').setValue(selectedTableDataRowKeys.length);
});
}
ビデオチュートリアル
オンラインで試遊する
このドキュメントは役に立ちましたか？