跳到主要内容

填报 JS Form 增强

v2.1.3+ 支持
v2.3.0+ 支持子表。（子表序号即子表的索引，是在页面上面的位置，从上往下 [同一行，是从左往右] ）

表单提交前校验​

在表单提交前进行数据校验，通过返回 Promise 控制是否允许提交。

function init() {
	this.onSubmitBefore((main, sub) => {
		return new Promise((resolve, reject) => {
			// 校验主表字段
			if (!main.payment_metod) {
				this.$Message.warning({ content: '请选择支付方式' });
				reject();
				return;
			}

			// 校验子表字段（0 表示第一个子表，从 0 开始）
			const detailsTable = sub['0'];
			if (detailsTable) {
				const detailsTableData = Object.entries(detailsTable);
				for (const [field, value] of detailsTableData) {
					if (field.includes('product_date') && !value) {
						this.$Message.warning({ content: '请输入产品生产日期' });
						reject();
						return;
					}
				}
			}

			resolve(); // 校验通过，允许提交
		});
	});
}

监听字段变化​

监听表单字段值的变化，并执行相应逻辑。onFormChange 可多次使用

主表字段监听​

function init() {
	// 监听 order_code 字段变化
	this.onFormChange('order_code', value => {
		if (value === '100') {
			this.setFormData('shipping_fee', 10);
		}
	});

	// 监听 total_amount 字段变化
	this.onFormChange('total_amount', value => {
		if (value > 1000) {
			this.setFormData('pay_amount', 100);
		} else {
			this.setFormData('pay_amount', 1);
		}
	});
}

效果演示:

子表字段监听​

监听子表字段变化，修改主表字段

function init() {
	// 计算订单总额
	const calculate = () => {
		let result = 0;
		const product_price = this.getFormData('0.product_price');
		const product_num = this.getFormData('0.product_num');
		product_price.forEach((price, index) => {
			const num = product_num[index] ?? 0;
			result += price * num;
		});
		this.setFormData('total_amount', result);
	};

	// 监听子表字段变化（格式：子表序号.字段名）
	this.onFormChange('0.product_num', () => {
		calculate();
	});

	this.onFormChange('0.product_price', () => {
		calculate();
	});
}

效果演示： 子表的产品价格和数量变化时，自动汇总到主表的订单总额。

监听子表/集合字段变化，修改同条记录的其它字段。

function init() {
	this.onFormChange('0.product_name', (value, curRecordId) => {
		if (value == '蓝莓') {
			// 修改同条记录的其它字段
			const field = `product_desc${curRecordId}`;
			this.setFormData('0.' + field, '我是蓝莓，清甜可口');
		} else {
			// 修改整个子表的所有记录的product_desc字段
			this.setFormData('0.product_desc', '产品简介为空');
		}
	});
}

效果演示：

获取表单数据​

主表数据获取​

获取主表/单表的所有数据或指定字段的值。

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

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

子表数据获取​

获取子表/集合的所有数据或指定字段的值。

// 获取子表所有数据（格式：子表序号.）
const model = this.getFormData('0.');

// 获取子表指定字段的所有值（格式：子表序号.字段名）
const fieldValue = this.getFormData('0.product_price');

示例​

function init() {
	this.onFormLoad(() => {
		// 获取主表数据
		const mainData = this.getFormData();
		console.log('主表数据:', mainData);

		// 获取整个子表/集合数据 （值为一个对象）
		const subData = this.getFormData('0.');
		console.log('子表数据:', subData);

		// 获取子表/集合所有记录的product_price值。（值为数组）
		const prices = this.getFormData('0.product_price');
		console.log('产品价格:', prices);
	});
}

设置表单数据​

设置主表数据​

设置主表/单表字段的值。

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

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

设置子表数据​

设置子表/集合字段的值。

// 设置单个字段（格式：子表列号.字段）
this.setFormData('0.fieldName', 'value');

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

表单加载完成​

在表单加载完成后执行初始化逻辑。

onFormLoad 只在页面初始化加载一次 onSubFormLoad 初始化会加载一次，点击子表的+号也会触发。

function init() {
	// pageMode:add(新增页面)、edit(编辑页面)、detail(详情页面)
	this.onFormLoad(({ pageMode }) => {
		// 获取主表/单表数据
		const model = this.getFormData();
		console.log('表单数据:', model);
		if (pageMode == 'add') {
			// 设置默认值
			this.setFormData('payment_metod', '1');
			this.setFormData('order_code', 'al891bc');
		}
	});

	// pageMode:add(新增页面)、edit(编辑页面)、detail(详情页面)
	// 如果是设置子表的默认值可放到onSubFormLoad中，初始化会加载一次，添加时还会执行一次
	this.onSubFormLoad(({ pageMode, curRecordId }) => {
		// 初始化时curRecordId是空字符串，点击+号时会传入新增行的标识。
		if (pageMode == 'add') {
			// 设置默认值
			this.setFormData('0.product_desc' + curRecordId, '这是一款好产品');
		}
	});
}

效果演示：

完整实例​

function init() {
	this.onSubmitBefore((main, sub) => {
		return new Promise((resolve, reject) => {
			// 校验主表字段
			if (!main.payment_metod) {
				this.$Message.warning({ content: '请选择支付方式' });
				reject();
				return;
			}

			// 校验子表字段（0 表示第一个子表，从 0 开始）
			const detailsTable = sub['0'];
			if (detailsTable) {
				const detailsTableData = Object.entries(detailsTable);
				for (const [field, value] of detailsTableData) {
					if (field.includes('product_date') && !value) {
						this.$Message.warning({ content: '请输入产品生产日期' });
						reject();
						return;
					}
				}
			}

			resolve(); // 校验通过，允许提交
		});
	});
	
	// 监听 order_code 字段变化
	this.onFormChange('order_code', value => {
		if (value === '100') {
			this.setFormData('shipping_fee', 10);
		}
	});

	// 监听 total_amount 字段变化
	this.onFormChange('total_amount', value => {
		if (value > 1000) {
			this.setFormData('pay_amount', 100);
		} else {
			this.setFormData('pay_amount', 1);
		}
	});
  
	// 计算订单总额
	const calculate = () => {
		let result = 0;
		const product_price = this.getFormData('0.product_price');
		const product_num = this.getFormData('0.product_num');
		product_price.forEach((price, index) => {
			const num = product_num[index] ?? 0;
			result += price * num;
		});
		this.setFormData('total_amount', result);
	};

	// 监听子表字段变化（格式：子表序号.字段名）
	this.onFormChange('0.product_num', () => {
		calculate();
	});
	this.onFormChange('0.product_price', () => {
		calculate();
	});
	// pageMode:add(新增页面)、edit(编辑页面)、detail(详情页面)
	this.onFormLoad(({ pageMode }) => {
		// 获取主表/单表数据
		const model = this.getFormData();
		console.log('表单数据:', model);
		if (pageMode == 'add') {
			// 设置默认值
			this.setFormData('payment_metod', '1');
			this.setFormData('order_code', 'al891bc');
		}
	});
	// pageMode:add(新增页面)、edit(编辑页面)、detail(详情页面)
	// 如果是设置子表的默认值可放到onSubFormLoad中，初始化会加载一次，添加的
	this.onSubFormLoad(({ pageMode, curRecordId }) => {
		if (pageMode == 'add') {
			// 设置默认值
			this.setFormData('0.product_desc' + curRecordId, '这是一款好产品');
		}
	});
	
  // 监听子表/集合字段变化，修改同条记录的其它字段。
	this.onFormChange('0.product_name', (value, curRecordId) => {
		if (value == '蓝莓') {
			// 修改同条记录的其它字段
			const field = `product_desc${curRecordId}`;
			this.setFormData('0.' + field, '我是蓝莓，清甜可口');
		} else {
			// 修改整个子表的所有记录的product_desc字段
			this.setFormData('0.product_desc', '产品简介为空');
		}
	});
}

消息提示​

显示消息提示框。

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

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

// 错误提示
this.$Message.error({ content: '操作失败' });

注意事项（非常重要）​

  1. 初始化时机：在 onFormLoad 中获取或设置表单数据，确保表单已完全加载
  2. Promise 处理：onSubmitBefore 必须返回 Promise，通过 resolve() 允许提交，reject() 阻止提交
  3. 子表序号：子表序号从 0 开始，按从上到下、从左到右的顺序编号
  4. 字段监听：onFormChange 可以同时监听多个字段，每个字段设置独立的处理逻辑
  5. js增强代码检查：添加js增强代码后，如果遇到预览页面无法操作时，可在浏览器的控制台(F12)中获取查看报错信息

如下图：else中的fee未定义，在浏览器控制台会报错，进一步调整js增强代码即可。

例子绑定的表字段明细