hospital-project/src/views/indexDefine/children/components/dialog.vue

<script setup lang="ts">
import { reactive, computed, ref } from "vue";
import { ElMessage } from "element-plus";
import { addQuota } from "@/api/indexDefine";
const emit = defineEmits(["closeDialog"]);
const visible = ref(false);
const ruleFormRef = ref(null);
const form = reactive({
  name: "",
  categoryName: "",
  define: "",
  caliber: "",
  source: "",
  statue: null
});
const msgName = ref("");
const addQuotaApi = async () => {
  ruleFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const { code, msg } = await addQuota(form);
      if (code === 200) {
        ElMessage({
          message: "添加成功",
          type: "success"
        });
        emit("closeDialog");
      }
      if (code === 10027) {
        msgName.value = msg;
        // rules.name[0].message = msg; // 将 msg 设置为 name 字段的错误信息
        // ruleFormRef.value.validateField("name"); // 触发验证以显示错误消息
      }
    }
  });
};
const rules = reactive({
  name: [{ required: true, message: "请填写指标名称", trigger: "blur" }],
  define: [{ required: true, message: "请填写指标分类", trigger: "blur" }],
  categoryName: [
    { required: true, message: "请填写指标定义", trigger: "blur" }
  ],
  caliber: [{ required: true, message: "请填写指标口径", trigger: "blur" }],
  source: [{ required: true, message: "来源", trigger: "blur" }],
  statue: [{ required: true, message: "请填写选择状态", trigger: "blur" }]
});
const close = () => {
  // 请关闭弹框
  console.log(visible.value);
  visible.value = false;
};
const save = () => {
  addQuotaApi();
};
const open = () => {
  // 打开弹框
  const form = {
    name: "",
    categoryName: "",
    define: "",
    caliber: "",
    source: "",
    statue: null
  };
  msgName.value = "";
  visible.value = true;
  console.log("打开弹框");
};
defineExpose({
  open
});
</script>

<template>
  <el-dialog v-model="visible" title="新建指标" width="480">
    <div class="m-auto w-full">
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-position="right"
        label-width="auto"
        :rules="rules"
        style="max-width: 600px"
      >
        <el-form-item label="指标名称" prop="name">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入"
          />
          <el-text v-if="msgName" class="absolute top-6 msgName" type="warning">
            指标名称已存在，请更换一个名称
          </el-text>
        </el-form-item>
        <el-form-item label="指标分类">
          <el-select v-model="form.categoryName" placeholder="请选择">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="指标定义" prop="define">
          <el-input
            v-model="form.define"
            type="textarea"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="指标口径" prop="caliber">
          <el-input
            v-model="form.caliber"
            type="textarea"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="form.source" placeholder="请选择">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="statue">
          <el-select v-model="form.statue" placeholder="请选择">
            <el-option label="草稿" value="0" />
            <el-option label="发布" value="1" />
            <el-option label="下架" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scope>
.msgName {
  font-size: 10px;
}
</style>