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

在这里插入图片描述

<el-formref="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-selectv-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("请输入整数"));}//最小值必须大于或等于1if (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.rhkb.cn/news/103365.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

硬件知识积累 LED的介绍与选型 (简单电路)

1. LED 的介绍 1.1 LED 是什么 LED :是一种能发光的半导体电子元件。发光二极管&#xff08;LED&#xff09;于20世纪60年代问世。在20世纪80年代之前&#xff0c;LED主要作为指示灯使用&#xff0c;从其光色来看&#xff0c;只有红光、橙光、黄光和绿光等几种。这一时期属于…

游乐场vr设备虚拟游乐园vr项目沉浸体验馆

在景区建设一个VR游乐场项目可以为游客提供一种新颖、刺激和沉浸式的游乐体验。提高游客的体验类型&#xff0c;以及景区的类目&#xff0c;从而可以吸引更多的人来体验。 1、市场调研&#xff1a;在决定建设VR游乐场项目之前&#xff0c;需要进行市场调研&#xff0c;了解当地…

基于Spark+django的国漫推荐系统--计算机毕业设计项目

近年来&#xff0c;随着互联网的蓬勃发展&#xff0c;企事业单位对信息的管理提出了更高的要求。以传统的管理方式已无法满足现代人们的需求。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;随着各行业的不断发展&#xff0c;基…

【LUBAN】【功能验证】至简投屏功能之Android有线连接方式测试

1、概述 至简投屏功能之Android有线连接方式支持至简自带应用至加的投屏功能和谷歌官方的Android auto功能。 支持的功能范围列举如下&#xff1a; 1、屏幕投屏&#xff08;支持自动旋转屏&#xff09;2、音视频播放&#xff08;抖音、百度地图等&#xff09;3、车机反控手机…

里式替换原则(LSP)

目录 简介: 作用: 过程: 总结: 简介: 里式替换原则&#xff08;Liskov Substitution Principle&#xff0c;简称LSP&#xff09;的提出者是美国计算机科学家Barbara Liskov。Barbara Liskov是一位计算机科学家&#xff0c;麻省理工学院教授&#xff0c;也是美国第一个计算机…

港联证券|油价上涨对股票影响大吗?利好还是利空?

石油是现代国家国民经济的血脉&#xff0c;直接影响国民经济的发展。那么&#xff0c;油价上涨对股票影响大吗&#xff1f;利好仍是利空&#xff1f;为大家准备了相关内容&#xff0c;以供参阅。 香港港联证券有限公司&#xff08;百度一下港联证券&#xff09;成立于2021年1月…

还是搞不懂Anaconda是什么?读这一篇文章就够了

文章目录 1 Anaconda介绍2 conda介绍3 安装Anaconda4 Anaconda的使用配置Anaconda源 5 创建虚拟环境并使用5.1 创建虚拟环境5.2 查看所有环境5.3 激活环境5.4 安装包5.4.1 conda方式5.4.2 pip方式5.4.3 从Anaconda.org安装包 5.5 查看该环境的所有包5.6 测试是否安装成功 6 退出…

Vue+Axios搭建二次元动态登录页面(mp4视频格式)

最近想做一个前端登录页面&#xff0c;背景好看的&#xff0c;格式中规中矩的&#xff0c;这么难&#xff1f;我自己创一个吧&#xff01; 效果图如下&#xff1a; 源码可以参考我的github&#xff0c;复制源码即可用&#xff1a;gym02/loginPage_Vue: 使用VueAxios搭建的动态…

Cadence软件屏幕显示问题

问题 就是今天打开Cadence软件想导出网表看一下&#xff0c;发现没有显示确定按钮什么的&#xff0c;那个窗口也是无语&#xff0c;不能移动&#xff0c;缩放也只能左右缩放&#xff0c;还不能缩小什么的&#xff0c;真的醉了&#xff0c;后面就是调整窗口的分辨率。 因为我最…

大型集团企业数据治理方案,以“应用驱动”的数据治理策略 | 行业方案

数据治理是推动大型集团企业转型升级、提升竞争优势、实现高质量发展的重要引擎。 通过搭建大数据平台&#xff0c;实现对业务系统数据的采集、清理、建模、整合&#xff0c;建立一个符合业务需求的数据决策平台&#xff0c;形成企业数字化转型关键能力&#xff0c;支撑数据赋…

Java接收前端请求体方式

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 文章目录 RequestBodyPathVariableRequestParamValidated方法参数校验方法返回值校验 RequestHeaderHttpServletRequest ## Java接收前端请求体的方式 请求体&#xf…

数据驱动工作效率提升的5个层次—以PreMaint设备数字化平台为例

在现代工业领域&#xff0c;数据分析已成为提升工作效率和优化生产的不可或缺的工具。从描述性分析到规范性分析&#xff0c;数据分析逐步揭示了设备运行和维护的深层信息&#xff0c;帮助企业更明智地做出决策。本文将以PreMaint设备数字化平台为例&#xff0c;探讨工业数据驱…

SpringCloud学习笔记(三)_服务提供者集群与服务发现Discovery

服务提供者集群 既然SpringCloud的是微服务结构&#xff0c;那么对于同一种服务&#xff0c;当然不可能只有一个节点&#xff0c;需要部署多个节点 架构图如下&#xff1a; 由上可以看出存在多个同一种服务提供者&#xff08;Service Provider&#xff09; 搭建服务提供者集…

6个比较火的AI绘画生成工具

随着人工智能技术的发展&#xff0c;市场上出现了越来越多的人工智能图像生成工具。这些人工智能图像生成工具可以自动创建惊人的图像、艺术作品和设计&#xff0c;以帮助设计师和创意人员更快地实现他们的创造性想法。在本文中&#xff0c;我们将推荐7种最近流行的人工智能图像…

牛客OJ 把字符串转换成整数

⭐️ 题目描述 &#x1f31f; O链接 https://www.nowcoder.com/practice/1277c681251b4372bdef344468e4f26e?tpId13&&tqId11202&rp6&ru/activity/oj&qru/ta/coding-interviews/question-ranking 思路&#xff1a; 首先需要检查第一位是否有符号位&#x…

6G太赫兹波频段

6G目前处于非常早期的研究阶段。国际电信联盟所期待的“网络2030”愿景正在逐步实现。虽然该行业距离进入6G标准开发进程还有几年的时间&#xff0c;但亚太赫兹&#xff08;sub-THz&#xff09;技术已经成为研究的重点。 6G一个关键目标和积极研究领域是实现 100 Gbps 至 1 Tb…

C语言:选择+编程(每日一练Day7)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;图片整理 思路一&#xff1a; 思路二&#xff1a; 题二&#xff1a;寻找数组的中心下标 思路一&#xff1…

精进语言模型:探索LLM Training微调与奖励模型技术的新途径

大语言模型训练&#xff08;LLM Training&#xff09; LLMs Trainer 是一个旨在帮助人们从零开始训练大模型的仓库&#xff0c;该仓库最早参考自 Open-Llama&#xff0c;并在其基础上进行扩充。 有关 LLM 训练流程的更多细节可以参考 【LLM】从零开始训练大模型。 使用仓库之…

HTML5岗位技能实训室建设方案

一 、系统概述 HTML5岗位技能技术是计算机类专业重要的核心课程&#xff0c;课程所包含的教学内容多&#xff0c;实践性强&#xff0c;并且相关技术更新快。传统的课堂讲授模式以教师为中心&#xff0c;学生被动式接收&#xff0c;难以调动学生学习的积极性和主动性。混合式教学…