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