hrms-mgt/src/modules/01_metadataNew/components/personal/DialogForm.vue

<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import dialogHeader from "@/components/DialogHeader.vue";
import { useQuasar } from "quasar";

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;

const dataRef = ref<any>(null);
const data = defineModel<string>("data", {
  required: true,
});
const personalName = defineModel<string>("personalName");
const dialogStatus = defineModel<string>("dialogStatus");
const dialog = defineModel<boolean>("dialog");

function closeDialog() {
  dialog.value = false;
}

function validateForm() {
  dataRef.value.validate();
  onSubmit();
}

async function onSubmit() {
  if (data.value.length > 0) {
    dialogConfirm(
      $q,
      async () => {
        closeDialog();
        data.value = "";
      },
      "ยืนยันการบันทึกข้อมูล",
      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
    );
  }
}
</script>

<template>
  <q-dialog v-model="dialog" class="dialog" persistent>
    <q-card style="min-width: 350px" class="bg-grey-11">
      <form @submit.prevent="validateForm">
        <q-card-section class="flex justify-between" style="padding: 0">
          <dialog-header
            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
            :close="closeDialog"
          />
        </q-card-section>

        <q-separator color="grey-4" />
        <q-card-section class="q-pa-none">
          <q-input
            ref="dataRef"
            outlined
            v-model="data"
            :label="personalName"
            dense
            lazy-rules
            borderless
            class="col-12 bg-white q-ma-md"
            :rules="[(val) => val.length > 0 || 'กรุณากรอก' + personalName]"
            hide-bottom-space
          />
        </q-card-section>

        <q-card-actions align="right">
          <q-btn
            id="onSubmit"
            type="submit"
            dense
            unelevated
            label="บันทึก"
            color="public"
            class="q-px-md"
          >
            <q-tooltip>บันทึกข้อมูล</q-tooltip>
          </q-btn>
        </q-card-actions>
      </form>
    </q-card>
  </q-dialog>
</template>