当前位置：首页 > news >正文

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

news 2025/7/18 18:25:50

在这里插入图片描述

<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.lryc.cn/news/140573.html