填报 JS 增强 form 相关方法

v2.1.2+支持

1.表单提交前校验

使用 onSubmitBefore 方法可以在表单提交前进行数据校验，返回 Promise 对象来控制是否允许提交。

语法

this.onSubmitBefore(model => {
	return new Promise((resolve, reject) => {
		// 校验逻辑
		if (校验失败) {
			reject(); // 阻止提交
		} else {
			resolve(); // 允许提交
		}
	});
});

示例

function init() {
	// 表单提交前校验
	this.onSubmitBefore(model => {
		return new Promise((resolve, reject) => {
			if (model.desc.length < 30) {
				this.$Message.warning({ content: '输入的文字太少了~' });
				reject(); // 阻止提交
			} else {
				resolve(); // 允许提交
			}
		});
	});
}

2.监控表单字段变化

使用 onFormChange 方法可以监听指定字段的值变化，并执行相应的逻辑。

语法

this.onFormChange('字段名', value => {
	// 字段值变化时的处理逻辑
});

示例

// 监控表单字段的变化
function init() {
	// 监控表单name字段的变化
	this.onFormChange('name', value => {
		if (value == '张三') {
			this.setFormData('salary', 1000);
		}
	});

	// 监控表单enable字段的变化
	this.onFormChange('enable', value => {
		const sex = this.getFormData('sex');
		console.log('当前sex值:::', sex);
		if (value == 'Y') {
			this.setFormData('sex', '1');
		} else {
			this.setFormData('sex', '2');
		}
	});
}

getFormData()

获取表单的所有数据或指定字段的值。(如果初始化获取表单字段值，必须包含在onFormLoad函数中)

// 获取所有表单数据
const model = this.getFormData();

// 获取指定字段的值
const fieldValue = this.getFormData('fieldName');

setFormData()

设置表单字段的值。(如果初始化设置默认值，必须包含在onFormLoad函数中)

// 设置单个字段的值
this.setFormData('fieldName', 'value');

// 设置多个字段的值
this.setFormData({
	field1: 'value1',
	field2: 'value2'
});

监控表单加载

使用 onFormLoad 方法可以在表单加载完成后执行初始化逻辑。

语法

this.onFormLoad(() => {
	// 表单加载完成后的初始化逻辑
});

示例

// 监控表单加载
function init() {
	this.onFormLoad(() => {
		// 获取所有表单值
		const model = this.getFormData();
		console.log('表单值:', model);
		// 设置默认值
		this.setFormData('sex', '1');
	});
}

完整示例

function init() {
	// 表单提交前校验
	this.onSubmitBefore(model => {
		return new Promise((resolve, reject) => {
			if (model.desc.length < 30) {
				this.$Message.warning({ content: '输入的文字太少了~' });
				reject();
			} else {
				resolve();
			}
		});
	});

	// 监控表单字段的变化
	this.onFormChange('name', value => {
		if (value == '张三') {
			this.setFormData('salary', 1000);
		}
	});

	// 监控表单字段的变化
	this.onFormChange('enable', value => {
		const sex = this.getFormData('sex');
		const model = this.getFormData();
		console.log('sex::', sex);
		console.log('model:::', model);

		if (value == 'Y') {
			this.setFormData('sex', '1');
		} else {
			this.setFormData('sex', '2');
		}
	});

	// 监控表单加载
	this.onFormLoad(() => {
		const model = this.getFormData();
		console.log('model:::', model);
		this.setFormData('sex', '1');
	});
}

$Message

显示消息提示。

// 警告提示
this.$Message.warning({ content: '警告信息' });

// 成功提示
this.$Message.success({ content: '成功信息' });

// 错误提示
this.$Message.error({ content: '错误信息' });

注意事项

1. Promise 处理：onSubmitBefore 必须返回 Promise 对象，通过 resolve()和 reject()来控制表单提交
2. 字段监听：onFormChange 可以监听多个字段，每个字段可以设置不同的处理逻辑
3. 初始化时机：onFormLoad 在表单完全加载后执行，适合进行初始化操作
4. 数据获取：使用 getFormData() 获取表单数据，使用 setFormData() 设置表单数据