vue3_弹窗数字表单组件

<template>
  <div>
    <el-dialog
      v-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>