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

news2024/11/24 10:38:52

在这里插入图片描述

<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();
		}
	}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/909723.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTTP和HTTPS的区别及通信原理

文章目录 HTTP特性http解决无状态的问题&#x1f36a;cookiesessiontoken 常见状态码报文和字段方法 HTTPS补充知识常见的加密方式数字摘要 &#xff08;数字指纹&#xff09; && 数字签名 加密过程 HTTP 何为http&#xff1f; http是超文本传输协议&#xff0c;Hyper…

MySQL 数据备份和数据恢复

目录 一、数据备份 1、概述 2、MySQLdump命令备份 1&#xff09;备份单个数据库中的所有表 2) 备份数据中某个或多个表 3) 备份所有数据库 4&#xff09;备份多个库 5) 只备份一个表或多个表结构 二、数据恢复 三、数据备份与恢复应用 一、数据备份 1、概述 数据备…

面试之HTTP

1.HTTP与HTTPS的区别 HTTP运行在TCP之上&#xff1b;HTTPS是运行在SSL之上&#xff0c;SSL运行在TCP之上两者使用的端口不同&#xff1a;HTTP使用的是80端口&#xff0c;HTTPS使用的是443端口安全性不同&#xff1a;HTTP没有加密&#xff0c;安全性较差&#xff1b;HTTPS有加密…

2023国赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

【CSS Grid网格布局】常用属性,示例代码解读

Grid布局是一种二维布局系统&#xff0c;可以将页面划分为行和列&#xff0c;并将元素放置在这些行和列的交叉点上。以下是Grid布局的一些常用属性&#xff1a; grid-template-columns/grid-template-rows&#xff1a;用于定义网格的列和行的大小和数量。可以指定具体的尺寸值…

【ARM】Day6 cotex-A7核UART总线实验

cotex-A7核UART总线实验 1. 键盘输入一个字符‘a’&#xff0c;串口工具显示‘b’ 2. 键盘输入一个字符串"nihao"&#xff0c;串口工具显示“nihao” uart.h #ifndef __UART4_H__ #define __UART4_H__#include "stm32mp1xx_rcc.h" #include "stm3…

安卓系列机型-禁止安装某软件 防止“沉迷游戏的小孩”操作解析

如何禁止安装某软件。这里以好课帮app为例做个演示步骤说明。这个博文的目的在于可以阻止他人用手机安装你指定的一些软件。 &#x1f494;&#x1f494;&#x1f494;首先手机上安装好课帮这个软件。打开应用详情找到包名。或者使用第三方工具打开获取这个软件的包名。记住是…

Unity 物体固定屏幕尺寸(透视模式)

物体固定屏幕尺寸 &#x1f96a;效果图&#x1f371;食用方法 &#x1f96a;效果图 如图所示物体远离摄像机后会被放大&#xff0c;靠近相机会被缩小&#xff0c;使得在屏幕上的大小保持不变&#xff1b; &#x1f371;食用方法 导入插件后使用gameObject.SetFixedScreenSi…

c#中lambda表达式缩写推演

Del<string> ml new Del<string>(Notify);//泛型委托的实例化&#xff0c;并关联Nofity方法 Del<string> ml new Del<string>(delegate (string str) { return str.Length; });//将Nofity变更为匿名函数 Del<string> ml delegate(string str)…

15.树与二叉树基础

目录 一. 树&#xff0c;基本术语 二. 二叉树 &#xff08;1&#xff09;二叉树 &#xff08;2&#xff09;满二叉树 &#xff08;3&#xff09;完全二叉树 三. 二叉树的性质 四. 二叉树的存储结构 &#xff08;1&#xff09;顺序存储结构 &#xff08;2&#xff09;链…

港联证券|燃气板块午后走高,美能能源涨停,水发燃气大幅拉升

燃气板块21日午后快速拉升&#xff0c;到发稿&#xff0c;美能动力涨停&#xff0c;水发燃气涨超7%&#xff0c;蓝天燃气涨超5%&#xff0c;贵州燃气涨逾4%。 消息面上&#xff0c;受澳大利亚LNG工厂罢工忧虑影响&#xff0c;欧洲基准天然气价格一度大涨18%。 有报导称&#x…

音视频技术开发周刊 | 307

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 “视象新生”火山引擎视频云&AIGC技术大会邀你踏入新“视界” 8月22日&#xff0c;火山引擎视频云&AIGC技术大会即将开启&#xff01;本次大会以“视象新生”为主…

lvs-dr模式+keepalived

一&#xff0c;keepalived概述 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 在一个LVS服务集群中通常有主服务器&#xff08;MASTER&#xff09;和备份服务器&#xff08;BACKUP&#xff09;两种角色的服务器&am…

如何创建和销售在线健身业务

快速轻松地创建您自己的线上健身网站&#xff01; 越来越多的人在家健身&#xff0c;在线健身业务也随之快速增长。 虽然这个生意很红火&#xff0c;但是真的像看起来那么容易上手吗&#xff1f; 有了MemberPress&#xff0c;确实如此&#xff01; 在这篇文章中&#xff0c…

【李宏毅机器学习】注意力机制

输出 我们会遇到不同的任务&#xff0c;针对输出的不一样&#xff0c;我们对任务进行划分 给多少输出多少 给一堆向量&#xff0c;输出一个label&#xff0c;比如说情感分析 还有一种任务是由机器决定的要输出多少个label&#xff0c;seq2seq的任务就是这种&#xff0c;翻译也…

Vue.js知识点学习的一点笔记

一、虚拟DOM 1、原生JS是命令式编程&#xff0c;当渲染在页面的数据发生一点点变化&#xff0c;需要整个重新渲染一编。vue.js渐进式框架有个虚拟DOM的概念&#xff0c;运用diff算法&#xff0c;比较新旧数据&#xff0c;相同的数据不变不重渲染&#xff0c;不同的部分新数据…

CAD VCL Multiplatform Crack

CAD VCL Multiplatform Crack CAD VCL多平台是在Delphi和CBuilder中开发应用程序的一个组件。它允许创建、可视化、导入、导出、转换和打印图形。开发人员可以访问实体的属性。CAD VCL多平台支持大量矢量和3D格式&#xff0c;包括AutoCAD DWG/DXF、HPGL、STEP、IGES、STL、SVG、…

Excel带数值的计算公式

问题描述 如图&#xff0c;想实现在第三列单元格中实现带数值的计算表达式 解决方法 单元格 & "/" & 单元格 & "" & TEXT(单元格/单元格, "0.00%")& 为简单的 与 符号 最后设定单元格数值与格式&#xff08;保留两位小数…

[Mac软件]AutoCAD 2024 for Mac(cad2024) v2024.3.61.182中文版支持M1/M2/intel

下载地址&#xff1a;前往黑果魏叔官网 AutoCAD是一款计算机辅助设计&#xff08;CAD&#xff09;软件&#xff0c;目前已经成为全球最受欢迎的CAD软件之一。它可以在二维和三维空间中创建精确的技术绘图&#xff0c;并且可以应用于各种行业&#xff0c;如建筑、土木工程、机械…

天锐绿盾安全U盘系统

安全U盘系统 01 简介 天锐绿盾安全U盘系统&#xff0c;是一款致力于保障U盘数据内容安全的产品。通过严格身份认证、便捷安全的密保机制、智能的U盘锁定或自毁设置、详细的文件操作日志、文件粉碎、设置还原等&#xff0c;天锐绿盾安全U盘系统为您U盘的数据保驾护航&#xff0…