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

vue3 计算两个表单得到第三个表单数据_第1张图片


			
				
			
			
				
			
			
				
					
				
			
			
				
					
				
			
			
				
			
			
				
			
			
				
			
		
//资源联动资源单位
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({
	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();
		}
	}
}

你可能感兴趣的:(javascript,前端,开发语言)