เพิ่ม dialog confirm

src/components/FormTime.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted, defineProps } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import moment, { Moment } from "moment";
 
+// importStores
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, covertDateObject } = mixin;
+const { date2Thai, covertDateObject, dialogConfirm } = mixin;
 
 const props = defineProps({
   dataById: {
     type: Object,
     default: null,
   },
+  closePopup: {
+    type: Function,
+    required: true,
+  },
 });
 
 const dataById = ref<any>([]);
@@ -38,7 +46,10 @@ function updateClock() {
 }
 
 function onCkickSave() {
-  console.log("save");
+  dialogConfirm($q, async () => {
+    console.log("save");
+    props.closePopup();
+  });
 }
 </script>
 <template>
@@ -61,7 +72,7 @@ function onCkickSave() {
         </q-card-section>
       </q-card>
 
-      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm" v-if="statusAction">
+      <q-card flat bordered class="col-12 q-mt-sm" v-if="statusAction">
         <VueDatePicker
           v-model="date"
           :locale="'th'"
@@ -83,6 +94,7 @@ function onCkickSave() {
               :model-value="date !== null ? date2Thai(date) : null"
               :label="`${'กรอกวันที่'}`"
             >
+              <!-- :rules="[(val) => !!val || 'Field is required']" -->
               <template v-slot:prepend>
                 <q-icon
                   name="event"