フォーム内のサブフォームの一般的なシーンの適用
適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。
- サブフォーム内でカスタム検証関数を設定する方法。現在入力されているコンポーネントは現在の行の他のコンポーネントと検証します。たとえば、一括出庫時に出庫数は在庫数を超えてはいけません
- サブフォーム内でコンポーネント検証を動的に設定する方法 (条件が満たされた場合など)
- サブフォーム内でコンポーネントのステータスを動的に設定する方法 (例: 条件が満たされた場合、現在の行内の一部のコンポーネントのステータスを読み取り専用または無効に設定する方法)
- サブフォーム内でデータ連動の効果を実現する方法
前提条件
このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。
効果を実現する
サブフォームのカスタム検証
サブフォームの動的設定検証
サブフォームはコンポーネントの状態を動的に設定します
サブフォーム内データ連動
実装手順
サブフォームのカスタム検証
普遍的なフォームページの作成
通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。
キャンバス領域で次のコンポーネントをドラッグします。
- サブフォーム: サブフォームの名前を付けます
- ドロップダウン単一選択: 製品情報と命名
- 数値: 在庫数と名前を付けます
- 数値: 出庫数と命名
カスタム検証の設定
次のコードをページjsパネルにコピーし、コード内の一意のidを変更することに注意してください。
// 出库数自定义校验（出库数不得大于库存数）
// numberField_lonxsiwh 为子表单内库存数字段的唯一标识，请按需修改
export function validateRuleForOutbound(value) {
const { values = {} } = this.item;
const inventoryCount = +values.numberField_lonxsiwh || 0; // 获取库存数
return +value <= inventoryCount;
}
出庫数コンポーネントのカスタム関数で上記の関数を呼び出します。
function validateRule(value) {
return this.validateRuleForOutbound(value);
}
保存ページ
サブフォームの動的設定検証
注意: この方法では、必須の * タグは削除されませんが、実際の効果があります。
普遍的なフォームページの作成
通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。
キャンバス領域で次のコンポーネントをドラッグします。
- サブフォーム: サブフォームの名前を付けます
- ラジオ: 製品情報検証をオンにするかどうかという名前です
- ドロップダウン単一選択: 製品情報と命名
コンポーネントイベントの設定
次のコードをページjsパネルにコピーし、コード内の一意のidを変更することに注意してください。
// 子表单动态设置校验（enableValid / disableValid）
export function onChange({ value }) {
if (value === '是') {
this.$('selectField_lonxsixa').enableValid();
} else {
this.$('selectField_lonxsixa').disableValid();
}
}
製品情報検証コンポーネントonchangeをオンにして上記の関数をバインドするかどうか。
保存ページ
サブフォームはコンポーネントの状態を動的に設定します
普遍的なフォームページの作成
通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。
キャンバス領域で次のコンポーネントをドラッグします。
- サブフォーム: サブフォームの名前を付けます
- ラジオ: 製品情報フィールドのステータスに名前を付けます
- 構成の選択
- ドロップダウン単一選択: 製品情報と命名
コンポーネントイベントの設定
次のコードをページjsパネルにコピーし、コード内の一意のidを変更することに注意してください。
// 产品信息字段状态组件 onChange
export function onChange({ value }) {
this.$('selectField_lonxsiwo').setBehavior(value);
}
製品情報フィールドステータスコンポーネントonchangeは、上記の関数をバインドします。
保存ページ
サブフォーム内データ連動
普遍的なフォームページの作成
通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。
キャンバス領域で次のコンポーネントをドラッグします。
- 単一行テキスト: タイプに名前を付けます
キャンバス領域で次のコンポーネントをドラッグします。
- ドロップダウン単一選択: アイテムタイプと命名
- 【他のフォームデータを関連付ける】を設定します
- 単一行テキスト: アイテム名
キャンバス領域で次のコンポーネントをドラッグします。
- サブフォーム: サブフォームの名前を付けます
- ドロップダウン単一選択: アイテムタイプと命名
- ドロップダウン単一選択: アイテム名
データソースの追加
リクエストアドレスには下記の変数を紐付けます。
`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`
アイテムタイプ設定【その他のフォームデータを関連付ける】
次のコードをページjsパネルにコピーします。
/**
* 子表单子组件添加选项
* @param formUuid: {String} 被关联表单的 formUuid
* @param relationFieldId: {String} 被关联字段的唯一标识
* @param searchFieldJson: {Object} 筛选条件
* @param tableFieldId: {String} 需要添加选项组件的子表单唯一标识
* @param fieldId: {String} 需要添加选项组件的唯一标识
* @param childFieldItems: {Array} 需要添加选项组件的行标识，不传或传空默认全部添加
* @param isUniq: {Boolean} 是否按选项值去重
*/
export function getTableSelectFieldDataSource(formUuid = '', relationFieldId = '', searchFieldJson = {}, tableFieldId = '', fieldId = '', childFieldItems = [], isUniq = false) {
const tableField = this.$(tableFieldId); // 获取子表单定义
// 如果未传 childFieldItems，默认获取子表单所有行
const items = _.isEmpty(childFieldItems) ? tableField.getItems() : childFieldItems;
this.dataSourceMap.getData.load({
formUuid,
pageSize: 100,
searchFieldJson: JSON.stringify(searchFieldJson),
}).then((res) => {
const { data = [] } = res;
const tableSelectField = data.map((item) => {
const { formData = {} } = item;
return {
text: formData[relationFieldId], // 显示值
value: formData[relationFieldId], // 选项值
};
});
items.forEach((item) => {
tableField.setComponentProps(item, fieldId, {
dataSource: isUniq ? _.uniqBy(tableSelectField, 'value') : tableSelectField, // 按选项值去重
});
});
}).catch(({ message }) => {
this.utils.toast({
title: message,
type: 'error',
});
});
}
ページの初期化時にアイテムタイプにオプションを設定するので、didmount時に呼び出す必要があります。フォームformuuidとコンポーネントのユニークなロゴを修正することに注意してください。ここのFORM-8B5130A6967A4D4DA36F5EC3FF6D4B1CUD57はいアイテムタイプテーブルのformuuid。
export function didMount() {
this.getTableSelectFieldDataSource(
'FORM-8B5130A6967A4D4DA36F5EC3FF6D4B1CUD57',
'textField_lz87gtfq',
{},
'tableField_lz88ervv',
'selectField_lz88ervw'
);
}
サブフォームに項目を追加するときにも、新しい行のアイテムタイプ設定オプションを呼び出す必要があります。サブフォームには、次の関数をバインドする関数が追加されます。
// 新增一项
export function onAddClick(newGroupId) {
// 为新增物品类型赋值选项
this.getTableSelectFieldDataSource(
'FORM-A98628AA71774B7EA636E8CB875508DD24K3',
'textField_lz87gtfq',
{},
'tableField_lz88ervv',
'selectField_lz88ervw',
[newGroupId]
);
}
アイテム名配置【データ連動】
サブフォームonchangeは次の関数をバインドします。ここのFORM-C04CAE23888848A885997B5726AADF647LC9はいアイテムテーブルのフォームformuuidです。
// 子表单 onChange
export function onTableChange({ value, extra }) {
const { formGroupId, from, tableFieldId, fieldId, changes = {} } = extra || {};
// 必须，避免使用 updateItemValue 更新子表数据后，再次触发 onChange 陷入死循环
if (from === 'setItemValue') { return; };
const tableField = this.$(tableFieldId); // 获取子表单定义
if (fieldId && fieldId === 'selectField_lz88ervw') {
// 当前 onChange 字段是物品类型时为物品名称赋值选项
if (changes.value) {
this.getTableSelectFieldDataSource(
'FORM-43F11FA3281F485683EBBC684C658928O08P',
'textField_lz87hsan',
{
selectField_lz87hsam: changes.value,
},
tableFieldId,
'selectField_lz88ervx',
[formGroupId]
);
} else {
tableField.updateItemValue(formGroupId, {
selectField_lz88ervx: '',
}); // 清空选项值
tableField.setComponentProps(formGroupId, 'selectField_lz88ervx', {
dataSource: [],
}); // 清空 dataSource
}
}
}
アイテム名onvisiblechangeは、詳細ページ編集と互換性のある次の関数をバインドします。
// 下拉框是否显示（兼容详情页面编辑）
export function onVisibleChange(visible) {
const { id } = this.item; // 获取当前行的行标识
const type = this.$('selectField_lz88ervw').getValue(); // 获取物品类型的值
const dataSource = this.$('selectField_lz88ervx').props.dataSource; // 获取当前下拉选项的选项
if (visible && !this.utils.isSubmissionPage() && !_.isEmpty(type) && _.isEmpty(dataSource)) {
// 弹层显示且详情页且物品类型不为空且当前下拉没有选项时请求选项，节省资源
this.getTableSelectFieldDataSource(
'FORM-C04CAE23888848A885997B5726AADF647LC9',
'textField_lz87hsan',
{
selectField_lz87hsam: this.$('selectField_lz88ervw').getValue(),
},
'tableField_lz88ervv',
'selectField_lz88ervx',
[id]
);
}
}
保存ページ
オンラインで試遊する
このドキュメントは役に立ちましたか？