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

<script setup lang="ts">
import { reactive, computed, ref } from "vue";
import { ElMessage } from "element-plus";
const emit = defineEmits(["closeDialog"]);
const visible = ref(false);
const ruleFormRef = ref(null);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});
const close = () => {
  // 请关闭弹框
  visible.value = false;
};
const save = () => {
  // 保存
  ElMessage({
    message: "保存成功",
    type: "success"
  });
  emit("closeDialog");
};
const open = () => {
  // 打开弹框
  visible.value = true;
  console.log("打开弹框");
};
defineExpose({
  open
});
</script>

<template>
  <el-dialog v-model="visible" title="新建指标" width="400">
    <div class="m-auto w-[300px]">
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-position="right"
        label-width="auto"
        style="max-width: 300px"
      >
        <el-form-item label="指标名称">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="指标分类">
          <el-select v-model="form.region" 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="指标定义">
          <el-input
            v-model="form.name"
            type="textarea"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="指标口径">
          <el-input
            v-model="form.name"
            type="textarea"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="form.region" 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="SQL语句">
          <el-input
            v-model="form.name"
            type="textarea"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="Zone No.1" value="shanghai" />
            <el-option label="Zone No.2" value="beijing" />
          </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>