vue3 计算两个表单得到第三个表单数据

<el-form
			ref="ruleFormRef"
			label-width="150px"
			label-suffix=":"
			:rules="rules"
			:disabled="drawerProps.isView"
			:model="drawerProps.rowData"
		>
			<el-form-item label="云平台名称" prop="cloudId">
				<el-cascader
					:style="{ width: '100%' }"
					v-model="drawerProps.rowData!.cloudId"
					clearable
					:options="cloudData"
					:props="{ value: 'cloudId', label: 'cloudName', checkStrictly: true, emitPath: false }"
				/>
			</el-form-item>
			<el-form-item label="网络区域名称" prop="networkId">
				<el-tree-select
					:style="{ width: '100%' }"
					v-model="drawerProps.rowData!.networkId"
					@node-click="handleNetworkClick"
					:data="networkData"
					node-key="networkId"
					:props="defaultProps1"
					:render-after-expand="false"
					:check-strictly="true"
				/>
			</el-form-item>
			<el-form-item label="资源类型" prop="resourceType">
				<el-select
					v-model="drawerProps.rowData!.resourceType"
					style="width: 100%"
					@change="resourceTypeChange"
					placeholder="请选择"
				>
					<el-option v-for="item in resourceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="资源单位" prop="resourceUnit">
				<el-select v-model="drawerProps.rowData!.resourceUnit" style="width: 100%" disabled placeholder="请选择">
					<el-option v-for="item in resourceUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="物理总量" prop="physicalTotal">
				<el-input v-model="drawerProps.rowData!.physicalTotal" :disabled="physicalTotalDisabled" @input="jsxnzlChange()" />
			</el-form-item>
			<el-form-item label="超分倍数" prop="cfbPhysical">
				<el-input v-model="drawerProps.rowData!.cfbPhysical" :disabled="physicalTotalDisabled" @input="jsxnzlChange()" />
			</el-form-item>
			<el-form-item label="虚拟总量" prop="cfbVirtual">
				<el-input v-model="drawerProps.rowData!.cfbVirtual" disabled />
			</el-form-item>
		</el-form>

//资源联动资源单位
const resourceTypeChange = (value: string) => {
	drawerProps.value.rowData.resourceUnit = "";
	physicalTotalDisabled.value = false;
	drawerProps.value.rowData.cfbPhysical = "";
	drawerProps.value.rowData.cfbVirtual = "";
	drawerProps.value.rowData.physicalTotal = "";
	if (value == "CPU") {
		drawerProps.value.rowData.resourceUnit = "核";
	} else if (value == "NC") {
		drawerProps.value.rowData.resourceUnit = "GB";
	} else {
		drawerProps.value.rowData.resourceUnit = "TB";
	}
};

//监听超分比物理总量（计算物理总理=物理总理*超分倍数）
const jsxnzlChange = () => {
	const wlzl = drawerProps.value.rowData.physicalTotal;
	const cfbwlzl = drawerProps.value.rowData.cfbPhysical;
	if (wlzl && cfbwlzl) {
		drawerProps.value.rowData.cfbVirtual = wlzl * cfbwlzl;
		//虚拟总量小数四舍五入
		if (drawerProps.value.rowData.resourceUnit != "TB") {
			drawerProps.value.rowData.cfbVirtual = Math.round(drawerProps.value.rowData.cfbVirtual);
		} else {
			// 虚拟总量最终结果可以保留三位小数位，后面的小数位四舍五入
			drawerProps.value.rowData.cfbVirtual = drawerProps.value.rowData.cfbVirtual.toFixed(3);
		}
	}
};

校验

const rules = reactive<FormRules>({
	cloudId: [{ required: true, message: "请选择云平台名称", trigger: "change" }],
	networkId: [{ required: true, message: "请选择网络区域名称", trigger: "change" }],
	resourceType: [{ required: true, message: "请选择资源类型", trigger: "change" }],
	resourceUnit: [{ required: true, message: "请选择资源单位", trigger: "change" }],
	cfbPhysical: [{ validator: checkCfbPhysical, required: true }],
	physicalTotal: [{ validator: checkPhysicalTotal, required: true }]
});
//超分倍数校验
function checkCfbPhysical(rule: any, value: any, callback: any) {
	if (!value) {
		return callback(new Error("请填写超分倍数"));
	}
	const reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
	//最多可保留两位小数位
	const reg1 = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{1,2})$/;
	if (!reg.test(value)) {
		callback(new Error("请输入非负数"));
	} else if (!reg1.test(value)) {
		callback(new Error("最多可保留两位小数位"));
	} else {
		if (value > 100) {
			callback(new Error("最大值为100"));
		} else {
			callback();
		}
	}
}
//物理总量
function checkPhysicalTotal(rule: any, value: any, callback: any) {
	if (!value) {
		return callback(new Error("请填写物理总量"));
	}
	const reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
	//整数
	const reg1 = /^[+]{0,1}(\d+)$/;
	if (!reg.test(value)) {
		callback(new Error("请输入非负数"));
	} else if (drawerProps.value.rowData.resourceType != "CC") {
		if (!reg1.test(value)) {
			callback(new Error("请输入整数"));
		}
		//最小值必须大于或等于1
		if (value < 1) {
			callback(new Error("最小值必须大于或等于1"));
		} else {
			callback();
		}
	} else {
		// 最多可以保留三位小数位
		const reg2 = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{1,3})$/;
		if (!reg2.test(value)) {
			callback(new Error("最多可保留三位小数位"));
		} else if (value == 0) {
			callback(new Error("最小值必须大于0"));
		} else {
			callback();
		}
	}
}