vue3_弹窗数字表单组件

<template><div><el-dialogv-model="show"title="健康数据配置"width="900"@close="resetAdd"><el-form:model="form"ref="addFormRef":rules="rules"label-width="120px":disabled="type == 3"><el-row><el-col :span="14"><el-form-item label="心率范围" prop="heartRateLowerLimit"><el-form-item label="" prop="heartRateLowerLimit"><el-input-number:min="1":max="1000"controls-position="right"v-model="form.heartRateLowerLimit"placeholder=""type="number"style="width: 120px"/></el-form-item><span class="mlr-10"> — </span><el-form-item label="" prop="heartRateUpperLimit"><el-input-number:min="1":max="1000"controls-position="right"v-model="form.heartRateUpperLimit"placeholder=""type="number"style="width: 120px"/></el-form-item><span class="ml-10">次/分钟</span></el-form-item></el-col><el-col :span="10"><el-form-item label="血糖阈值" prop="bloodSugarThreshold"><el-input-number:min="1":max="1000"controls-position="right":precision="1":step="0.1"v-model="form.bloodSugarThreshold"placeholder=""type="number"style="width: 120px"/><span class="ml-10">mmol/L</span></el-form-item></el-col></el-row><el-row><el-col :span="14"><el-form-item label="收缩压范围" prop="systolicLowerLimit"><el-form-item label="" prop="systolicLowerLimit"><el-input-number:min="1":max="1000"controls-position="right"v-model="form.systolicLowerLimit"placeholder=""type="number"style="width: 120px"/></el-form-item><span class="mlr-10"> — </span><el-form-item label="" prop="systolicUpperLimit"><el-input-number:min="1":max="1000"controls-position="right"v-model.number="form.systolicUpperLimit"placeholder=""type="number"style="width: 120px"/></el-form-item><span class="ml-10">mmhg</span></el-form-item></el-col><el-col :span="10"><el-form-item label="血氧阈值" prop="bloodOxygenThreshold"><el-input-number:min="1":max="1000"controls-position="right"v-model="form.bloodOxygenThreshold"placeholder=""type="number"style="width: 120px"/><span class="ml-10">%</span></el-form-item></el-col></el-row><el-row><el-col :span="14"><el-form-item label="舒张压范围" prop="diastolicLowerLimit"><el-form-item label="" prop="diastolicLowerLimit"><el-input-number:min="1":max="1000"controls-position="right"v-model="form.diastolicLowerLimit"placeholder=""type="number"style="width: 120px"/></el-form-item><span class="mlr-10"> — </span><el-form-item label="" prop="diastolicUpperLimit"><el-input-number:min="1":max="1000"controls-position="right"v-model="form.diastolicUpperLimit"placeholder=""type="number"style="width: 120px"/></el-form-item><span class="ml-10">mmhg</span></el-form-item></el-col><el-col :span="10"><el-form-item label="体温阈值" prop="bodyTemperatureUpperLimit"><el-input-number:min="1":max="1000"controls-position="right":precision="1":step="0.1"v-model="form.bodyTemperatureUpperLimit"placeholder=""type="number"style="width: 120px"/><span class="ml-10">℃</span></el-form-item></el-col></el-row><el-form-item label="适用对象" prop="configType"><el-radio-group v-model="form.configType"><el-radio label="1">适用所有使用者</el-radio><el-radio label="2">仅适用此使用者</el-radio></el-radio-group></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="cancelAdd">取消</el-button><el-button type="primary" @click="confirmAdd"> 提交 </el-button></span></template></el-dialog></div>
</template>
<script setup>
import { getSet, saveSet } from "@/api/userCenter/userManage.js";
const { proxy } = getCurrentInstance();
let show = ref(false);
let userId = ref(null);
// 表单数据
let form = ref({systolicUpperLimit: 140, //收缩压阈值上限（mmhg）systolicLowerLimit: 90, //收缩压阈值下限（mmhg）systolicRuleSymbol: "1", //收缩压规则符号diastolicUpperLimit: 90, //舒张压阈值上限（mmhg）diastolicLowerLimit: 60, //舒张压阈值下限（mmhg）diastolicRuleSymbol: "1", //舒张压规则符号heartRateUpperLimit: 100, //心率阈值上限(次/分钟)heartRateLowerLimit: 60, //心率阈值下限(次/分钟)heartRateRuleSymbol: "1", //心率规则符号bloodSugarThreshold: 7.8, //血糖阈值(mmol/L)bloodSugarRuleSymbol: "2", //血糖规则符号bloodOxygenThreshold: 95, //血氧阈值（%）bloodOxygenRuleSymbol: 3, //血氧规则符号bodyTemperatureUpperLimit: 37.2, //体温阈值上限(℃)bodyTemperatureRuleSymbol: "5", //体温规则符号configType: "1", //配置类型 1、适用于租户所与人 2、仅限于自己
});let init = (id) => {userId.value = id;show.value = true;getSet({userId: userId.value,}).then((response) => {form.value = response.data;});
};const rules = reactive({// 收缩压阈值上限（mmhg）上限要大于下限systolicUpperLimit: [{required: true,message: "请输入收缩压阈值上限",trigger: "blur",},{validator: (rule, value, callback) => {if (value < form.value.systolicLowerLimit) {callback(new Error("上限不能小于下限"));} else {callback();}},},],systolicLowerLimit: [{ required: true, message: "请输入收缩压阈值下限", trigger: "blur" },],diastolicUpperLimit: [{ required: true, message: "请输入舒张压阈值上限", trigger: "blur" },{validator: (rule, value, callback) => {if (value < form.value.diastolicLowerLimit) {callback(new Error("上限不能小于下限"));} else {callback();}},},],diastolicLowerLimit: [{ required: true, message: "请输入舒张压阈值下限", trigger: "blur" },],heartRateUpperLimit: [{ required: true, message: "请输入心率阈值上限", trigger: "blur" },{validator: (rule, value, callback) => {if (value < form.value.heartRateLowerLimit) {callback(new Error("上限不能小于下限"));} else {callback();}},},],heartRateLowerLimit: [{ required: true, message: "请输入心率阈值下限", trigger: "blur" },],bloodSugarThreshold: [{ required: true, message: "请输入血糖阈值", trigger: "blur" },],bloodOxygenThreshold: [{ required: true, message: "请输入血氧阈值", trigger: "blur" },],bodyTemperatureUpperLimit: [{ required: true, message: "请输入体温阈值", trigger: "blur" },],configType: [{ required: true, message: "请选择适用对象", trigger: "blur" }],
});
function confirmAdd() {proxy.$refs["addFormRef"].validate((valid) => {if (valid) {saveSet({ ...form.value, userId: userId.value }).then((response) => {proxy.$modal.msgSuccess("提交成功");cancelAdd();});}});
}
/** 重置操作表单 */
function resetAdd() {proxy.resetForm("addFormRef");
}
/** 取消按钮 */
function cancelAdd() {show.value = false;
}
//关键点 把 方法暴露给父组件
defineExpose({ init });
</script>