From 380eb0d10bb67c8893d7008ab481246606f2daf7 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Wed, 22 Mar 2023 00:25:55 +0700
Subject: [PATCH] consend form

---
 src/components/NotifyError.vue                |  24 ++-
 src/components/TableView.vue                  | 154 ++++++++----------
 src/modules/01_exam/components/Conference.vue |  68 ++++++++
 .../01_exam/components/ExamFinished.vue       |   2 +-
 src/modules/01_exam/components/ExamForm.vue   |  63 ++-----
 .../01_exam/components/ExamPayment.vue        |  80 +++------
 .../01_exam/components/Form/Career.vue        |  42 +++--
 .../01_exam/components/Form/Document.vue      | 128 ++++++++-------
 .../01_exam/components/Form/Education.vue     |  42 +++--
 .../01_exam/components/Form/Profile.vue       |  24 +--
 .../components/Form/Profile/Address.vue       |  35 +++-
 .../components/Form/Profile/Family.vue        |  35 +++-
 .../components/Form/Profile/Information.vue   |  37 ++++-
 .../components/Form/Profile/Occupation.vue    |  36 +++-
 src/modules/01_exam/store.ts                  |   5 +-
 src/modules/01_exam/views/ExamDetail.vue      |   3 +-
 src/stores/mixin.ts                           |  50 ++++--
 17 files changed, 482 insertions(+), 346 deletions(-)
 create mode 100644 src/modules/01_exam/components/Conference.vue

diff --git a/src/components/NotifyError.vue b/src/components/NotifyError.vue
index c18cae7..64f3069 100644
--- a/src/components/NotifyError.vue
+++ b/src/components/NotifyError.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog :model-value="modalError" persistent @update:model-value="updateClose">
+  <q-dialog :model-value="modal" persistent @update:model-value="updateClose">
     <q-card class="q-pa-sm">
       <q-card-section class="row items-center">
         <div class="q-pr-md">
@@ -12,9 +12,9 @@
           />
         </div>
         <div class="col text-dark">
-          <span class="text-bold text-red">{{ modalErrorTittle }}</span>
+          <span class="text-bold text-red">{{ tittle }}</span>
           <br />
-          <span>{{ modalErrorDetail }}</span>
+          <span>{{ detail }}</span>
         </div>
       </q-card-section>
 
@@ -28,25 +28,21 @@
 import { ref, useAttrs } from 'vue'
 
 const props = defineProps({
-  modalError: Boolean,
-  modalErrorTittle: String,
-  modalErrorDetail: String,
+  modal: Boolean,
+  tittle: String,
+  detail: String,
   close: {
     type: Function,
     default: () => console.log('not function')
   }
 })
 
-const emit = defineEmits([
-  'update:modalError',
-  'update:modalErrorTittle',
-  'update:modalErrorDetail'
-])
+const emit = defineEmits(['update:modal', 'update:tittle', 'update:detail'])
 
 const updateClose = () => {
-  emit('update:modalError', false)
-  emit('update:modalErrorTittle', '')
-  emit('update:modalErrorDetail', '')
+  emit('update:modal', false)
+  emit('update:tittle', '')
+  emit('update:detail', '')
   props.close()
 }
 </script>
diff --git a/src/components/TableView.vue b/src/components/TableView.vue
index 4f17b78..53d363c 100644
--- a/src/components/TableView.vue
+++ b/src/components/TableView.vue
@@ -44,9 +44,7 @@
           flat
           round
           :disabled="!(editvisible == true && updateData == true)"
-          :color="
-            !(editvisible == true && updateData == true) ? 'grey-7' : 'public'
-          "
+          :color="!(editvisible == true && updateData == true) ? 'grey-7' : 'public'"
           @click="checkSave"
           v-if="saveNoDraft == false"
           icon="mdi-content-save-outline"
@@ -72,9 +70,7 @@
         flat
         round
         :disabled="!(publicData == false || updateData == true)"
-        :color="
-          !(publicData == false || updateData == true) ? 'grey-7' : 'public'
-        "
+        :color="!(publicData == false || updateData == true) ? 'grey-7' : 'public'"
         @click="publishModal"
         icon="mdi-cloud-upload-outline"
         v-if="publicNoBtn == false"
@@ -87,9 +83,7 @@
           style="display: flex"
           v-if="publicData == false && publicNoBtn == false"
         >
-          <div class="text-public text-body2 text-weight-medium q-px-sm">
-            ข้อมูลยังไม่เผยแพร่
-          </div>
+          <div class="text-public text-body2 text-weight-medium q-px-sm">ข้อมูลยังไม่เผยแพร่</div>
         </div>
       </div>
 
@@ -219,9 +213,7 @@
           </q-th>
           <q-th
             auto-width
-            v-if="
-              editvisible == true || nextPageVisible == true || history == true
-            "
+            v-if="editvisible == true || nextPageVisible == true || history == true"
           />
         </q-tr>
       </template>
@@ -236,13 +228,7 @@
     <q-card class="q-pa-sm">
       <q-card-section class="row">
         <div class="q-pr-md">
-          <q-avatar
-            icon="public"
-            size="lg"
-            font-size="25px"
-            color="blue-1"
-            text-color="public"
-          />
+          <q-avatar icon="public" size="lg" font-size="25px" color="blue-1" text-color="public" />
         </div>
         <div class="col text-dark">
           <span class="text-bold">ต้องการเผยแพร่ข้อมูลนี้หรือไม่?</span>
@@ -253,12 +239,7 @@
 
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn label="ยกเลิก" flat color="grey-8" v-close-popup />
-        <q-btn
-          label="เผยแพร่"
-          color="public"
-          @click="publish()"
-          v-close-popup
-        />
+        <q-btn label="เผยแพร่" color="public" @click="publish()" v-close-popup />
       </q-card-actions>
     </q-card>
   </q-dialog>
@@ -291,162 +272,157 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs } from 'vue'
 
-const attrs = ref<any>(useAttrs());
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-const modalPublish = ref<boolean>(false);
-const modalDelete = ref<boolean>(false);
+const attrs = ref<any>(useAttrs())
+const table = ref<any>(null)
+const filterRef = ref<any>(null)
+const modalPublish = ref<boolean>(false)
+const modalDelete = ref<boolean>(false)
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
   editvisible: Boolean,
   boss: {
     type: Boolean,
-    defualt: false,
+    defualt: false
   },
   saveNoDraft: {
     type: Boolean,
-    defualt: false,
+    defualt: false
   },
   history: {
     type: Boolean,
-    defualt: false,
+    defualt: false
   },
   paging: {
     type: Boolean,
-    defualt: false,
+    defualt: false
   },
   nornmalData: {
     type: Boolean,
-    defualt: false,
+    defualt: false
   },
   nextPageVisible: {
     type: Boolean,
-    defualt: false,
+    defualt: false
   },
   publicData: {
     type: Boolean,
     defualt: true,
-    required: false,
+    required: false
   },
   updateData: {
     type: Boolean,
     defualt: true,
-    required: false,
+    required: false
   },
   publicNoBtn: {
     type: Boolean,
-    defualt: false,
+    defualt: false
   },
   add: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   edit: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   save: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   deleted: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   cancel: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   publish: {
     type: Function,
-    default: () => console.log("not function"),
+    default: () => console.log('not function')
   },
   validate: {
     type: Function,
-    default: () => console.log("not function"),
-  },
-});
+    default: () => console.log('not function')
+  }
+})
 const initialPagination = ref<any>({
   //   descending: false,
-  rowsPerPage: props.paging == true ? 25 : 0,
-});
+  rowsPerPage: props.paging == true ? 25 : 0
+})
 
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
+const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])
 
 const updateEdit = (value: any) => {
-  emit("update:editvisible", value);
-};
+  emit('update:editvisible', value)
+}
 const updateInput = (value: any) => {
-  emit("update:inputfilter", value);
-};
+  emit('update:inputfilter', value)
+}
 const updateVisible = (value: any) => {
-  emit("update:inputvisible", value);
-};
+  emit('update:inputvisible', value)
+}
 
 const paginationLabel = (start: string, end: string, total: string) => {
-  if (props.paging == true)
-    return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
-  else return start + "-" + end + " ใน " + total;
-};
+  if (props.paging == true) return ' ' + start + ' ใน ' + end + ' จากจำนวน ' + total + ' รายการ'
+  else return start + '-' + end + ' ใน ' + total
+}
 
 const checkSave = () => {
-  props.validate();
-  props.save();
+  props.validate()
+  props.save()
   //   if (myForm.value !== null) {
   //     myForm.value.validate().then((success) => {
   //       if (success) {
   //       }
   //     });
   //   }
-};
+}
 
 const publishModal = () => {
-  props.validate();
-  const filter = attrs.value.rows.filter((r: any) => r.name == "");
+  props.validate()
+  const filter = attrs.value.rows.filter((r: any) => r.name == '')
 
   if (filter.length == 0 || attrs.value.rows.length == 0) {
-    modalPublish.value = true;
+    modalPublish.value = true
   }
-};
+}
 
 const DeleteModal = () => {
-  modalDelete.value = true;
-};
+  modalDelete.value = true
+}
 
 const edit = async () => {
-  updateEdit(!props.editvisible);
-  props.edit();
-};
+  updateEdit(!props.editvisible)
+  props.edit()
+}
 
 const add = async () => {
   //   if (myForm.value !== null) {
   //     myForm.value.validate();
   //   }
-  props.validate();
-  props.add();
-  await table.value.lastPage();
-  await table.value.scrollTo(attrs.value.rows.length - 1);
-};
+  props.validate()
+  props.add()
+  await table.value.lastPage()
+  await table.value.scrollTo(attrs.value.rows.length - 1)
+}
 
 const deleted = async () => {
   if (props.publicNoBtn === false) {
-    updateEdit(false);
+    updateEdit(false)
   }
-  props.deleted();
-};
+  props.deleted()
+}
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-};
+  emit('update:inputfilter', '')
+  filterRef.value.focus()
+}
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/modules/01_exam/components/Conference.vue b/src/modules/01_exam/components/Conference.vue
new file mode 100644
index 0000000..54a33a7
--- /dev/null
+++ b/src/modules/01_exam/components/Conference.vue
@@ -0,0 +1,68 @@
+<template>
+  <q-card-section class="row items-center col-12 q-py-sm">
+    <div class="row col-11">
+      <div class="text-bold">ข้อกำหนดและเงื่อนไข</div>
+    </div>
+    <q-space />
+    <q-btn
+      icon="close"
+      unelevated
+      round
+      dense
+      @click="close"
+      style="color: #ff8080; background-color: #ffdede"
+    />
+  </q-card-section>
+  <q-separator />
+  <q-card-section style="max-height: 50vh" class="scroll">
+    <div class="text-center">
+      <div class="col-12 text-subtitle1 text-weight-bold text-negative q-pt-sm">
+        ข้อกำหนดและเงื่อนไขฉบับนี้ ถือเป็นข้อตกลงในการเก็บข้อมูล
+      </div>
+      <q-card class="col-12 q-pa-md" flat>
+        <q-card-section class="text-black text-left"
+          >ข้าพเจ้าเข้าใจดีว่า ผู้ให้บริการ จะเก็บรวบรวม ใช้ และเปิดเผยข้อมูลส่วนบุคคลของข้าพเจ้า
+          เพื่อวัตถุประสงค์ในการให้บริการตามสัญญานี้ การวิเคราะห์ข้อมูลเพื่อวางแผนทางการตลาด
+          การนำเสนอสินค้าและบริการอื่นๆ ของผู้ให้บริการแก่ข้าพเจ้า รวมถึงวัตถุประสงค์อื่นๆ
+          ตามที่ผู้ให้บริการเห็นสมควร <br /><br />
+          ข้าพเจ้ารับทราบดีกว่า หากข้าพเจ้าไม่ตกลงยอมรับข้อกำหนดและเงื่อนไขนี้
+          ผู้ให้บริการสงวนสิทธิไม่ให้บริการแก่ข้าพเจ้าได้
+        </q-card-section>
+      </q-card>
+    </div>
+  </q-card-section>
+  <q-separator />
+  <q-card-actions align="right" class="bg-white text-teal">
+    <q-btn label="ตกลง" color="primary" @click="ok" />
+  </q-card-actions>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+const props = defineProps({
+  close: {
+    type: Function,
+    default: () => console.log('not function')
+  },
+  ok: {
+    type: Function,
+    default: () => console.log('not function')
+  }
+})
+
+const ok = async () => {
+  props.ok()
+}
+
+const close = async () => {
+  props.close()
+}
+</script>
+<style>
+.mycard {
+  border-radius: 30px 30px 0px 0px;
+}
+.mycardxl {
+  border-radius: 30px;
+}
+</style>
diff --git a/src/modules/01_exam/components/ExamFinished.vue b/src/modules/01_exam/components/ExamFinished.vue
index 1ab0a06..2330d1a 100644
--- a/src/modules/01_exam/components/ExamFinished.vue
+++ b/src/modules/01_exam/components/ExamFinished.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="q-pa-md row items-center justify-center">
-      <q-card class="my-card" style="max-width: 600px; width: 100%" bordered>
+      <q-card style="max-width: 40%; width: 100%" bordered>
         <q-card-actions class="q-pa-md" :class="getClass(status)">
           <div v-if="status == false" class="text-black text-bold">
             เจ้าหน้าที่กำลังตรวจสถานที่สอบ
diff --git a/src/modules/01_exam/components/ExamForm.vue b/src/modules/01_exam/components/ExamForm.vue
index 149f21b..073d739 100644
--- a/src/modules/01_exam/components/ExamForm.vue
+++ b/src/modules/01_exam/components/ExamForm.vue
@@ -1,7 +1,7 @@
 <!-- step กรอกข้อมูล -->
 <template>
   <div>
-    <q-splitter v-model="splitterModel" style="height: 500px">
+    <q-splitter v-model="splitterModel" style="height: 450px">
       <template v-slot:before>
         <q-tab-panels
           v-model="tab"
@@ -80,19 +80,6 @@
       />
     </div>
   </div>
-  <NotifyConfirm
-    :modal="modalConfirm"
-    :tittle="modalConfirmTittle"
-    :detail="modalConfirmDetail"
-    :ok="applyCandidate"
-    :cancel="cancelModalConfirm"
-  />
-  <NotifyError
-    :modal="modalNoEdit"
-    :Tittle="modalNoEditTittle"
-    :Detail="modalNoEditDetail"
-    :close="closeModalError"
-  />
 </template>
 
 <script setup lang="ts">
@@ -101,8 +88,8 @@ import Profile from '@/modules/01_exam/components/Form/Profile.vue'
 import Education from '@/modules/01_exam/components/Form/Education.vue'
 import Career from '@/modules/01_exam/components/Form/Career.vue'
 import Document from '@/modules/01_exam/components/Form/Document.vue'
-import NotifyError from '@/components/NotifyError.vue'
-import NotifyConfirm from '@/components/NotifyConfirm.vue'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
 
 const props = defineProps({
   fetchStep: {
@@ -115,18 +102,14 @@ const props = defineProps({
   }
 })
 
+const $q = useQuasar()
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const { modalConfirm, modalError, success } = mixin
 const tab = ref<string>('profile')
 const splitterModel = ref<number>(90)
-const tabRaw = ref<string>('profile')
 const loader = ref<boolean>(false)
 const statusEdit = ref<boolean>(false)
 const acceptTermOfUse = ref<boolean>(false)
-const modalConfirm = ref<boolean>(false)
-const modalConfirmTittle = ref<string>('ยืนยันการสมัครสอบ?')
-const modalConfirmDetail = ref<string>('เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้')
-const modalNoEdit = ref<boolean>(false)
-const modalNoEditTittle = ref<string>('ไม่สามารถเปลี่ยนแท็ปได้?')
-const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
 
 onMounted(async () => {
   if (props.step > 2) {
@@ -136,23 +119,20 @@ onMounted(async () => {
 
 const okModalConfirm = () => {
   if (statusEdit.value == true) {
-    modalNoEditTittle.value = 'ไม่สามารถสมัครสอบได้?'
-    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
-    modalNoEdit.value = true
+    modalError($q, 'ไม่สามารถสมัครสอบได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
   } else {
-    modalConfirm.value = true
+    modalConfirm(
+      $q,
+      'ยืนยันการสมัครสอบ?',
+      'เมื่อยืนยันการสมัครสอบแล้วจะไม่สามารถแก้ไขข้อมูลได้',
+      saveForm
+    )
   }
 }
 
-const cancelModalConfirm = () => {
-  modalConfirm.value = false
-}
-
-const closeModalError = () => {
-  modalNoEdit.value = false
-}
-
-const applyCandidate = () => {
+const saveForm = () => {
+  //saveform
+  success($q, 'บันทึกข้อมูลสำเร็จ')
   props.fetchStep()
 }
 
@@ -186,17 +166,6 @@ const clickNext = (val: string) => {
       return (tab.value = 'profile')
   }
 }
-
-const changeTab = () => {
-  if (statusEdit.value == true) {
-    modalNoEditTittle.value = 'ไม่สามารถเปลี่ยนแท็ปได้?'
-    modalNoEditDetail.value = 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล'
-    tab.value = tabRaw.value
-    modalNoEdit.value = true
-  } else {
-    tabRaw.value = tab.value
-  }
-}
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/modules/01_exam/components/ExamPayment.vue b/src/modules/01_exam/components/ExamPayment.vue
index e28ce6a..70b6aa9 100644
--- a/src/modules/01_exam/components/ExamPayment.vue
+++ b/src/modules/01_exam/components/ExamPayment.vue
@@ -1,70 +1,32 @@
 <template>
-  <div>
-    <q-card class="my-card q-mb-sm" bordered>
-      <q-card-actions class="q-pa-md text-left row justify-center" :class="getClass(status)">
-        <div class="text-bold col-12" :class="getFontColor(status)">
-          {{ message(status) }}
-        </div>
-        <div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
-          <li>{{ rejectMessage }}</li>
-        </div>
-        <!-- <q-space /> -->
-      </q-card-actions>
-    </q-card>
-  </div>
-  <div class="d-flex justify-content-center align-items-center row col-12">
-    <!-- <div class="text-center q-pb-lg">
-      <q-badge
-          :outline="badgeOutline"
-          :color="badgeColor"
-          :label="badgeLabel"
-          class="q-pa-nond text-center"
-          style="font-size: 16px"
-        />
-    </div> -->
-
-    <!-- <div class="row q-pa-nond text-center col-6"> -->
-    <!-- <q-img :src="img" fit="contain" style="max-height: 300px" class="col-6">
-      <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
-    </q-img> -->
-    <q-file
-      borderless
-      v-model="fileData"
-      stack-label
-      @update:model-value="uploadImg"
-      class="col-12"
-    >
-      <!-- <q-img src="@/assets/avatar_user.jpg" class="col-12">
-              <div class="overlay" v-if="edit">
-                <q-icon name="mdi-camera" />
-                <br />อัปเดต
-              </div>
-            </q-img> -->
-      <q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
-        <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
-      </q-img>
-    </q-file>
-    <!-- <q-uploader
-      ref="uploader"
-      type="file"
-      :factory="uploadImg"
-      class="col-6"
-      label="กรุณาอัปโหลดหลักฐานการชำระเงิน"
-      flat
-      color="blue"
-      bordered
-    /> -->
-    <!-- </div> -->
+  <div class="col-12">
+    <div class="row justify-center q-pa-md">
+      <div class="col-4">
+        <q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
+          <div class="text-bold col-12" :class="getFontColor(status)">
+            {{ message(status) }}
+          </div>
+          <div class="col-12" v-if="status === 'rejected'" :class="getFontColor(status)">
+            <li>{{ rejectMessage }}</li>
+          </div>
+        </q-card-actions>
+        <q-file borderless v-model="fileData" stack-label @update:model-value="uploadImg">
+          <q-img :src="img" fit="contain" style="max-height: 300px" class="col-12">
+            <div class="absolute-bottom text-center">หลักฐานชำระเงิน</div>
+          </q-img>
+        </q-file>
+      </div>
+    </div>
     <div class="q-pa-md text-center col-12">
       <q-btn color="primary" @click="setStatus('processing')" label="ส่งหลักฐานการชำระเงิน" />
     </div>
     <div class="text-black text-center q-pb-lg col-12">
       ***ถ้าต้องการเเก้ไขหลักฐานการโอนเงินกรุณาอัพโหลดซ้ำ***
     </div>
-    <q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
-    <q-btn color="positive" @click="setStatus('success')">Su</q-btn>
-    <q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
   </div>
+  <q-btn color="negative" @click="setStatus('rejected')">Re</q-btn>
+  <q-btn color="positive" @click="setStatus('success')">Su</q-btn>
+  <q-btn color="positive" @click="setStatus('next')">Ne</q-btn>
 </template>
 
 <script setup lang="ts">
diff --git a/src/modules/01_exam/components/Form/Career.vue b/src/modules/01_exam/components/Form/Career.vue
index 71e9e55..c227416 100644
--- a/src/modules/01_exam/components/Form/Career.vue
+++ b/src/modules/01_exam/components/Form/Career.vue
@@ -177,10 +177,14 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <q-dialog :model-value="modalConsend" persistent>
+    <q-card style="min-width: 800px">
+      <Conference :ok="consendOk" :close="consenClose" />
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
 import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
@@ -194,6 +198,8 @@ import type {
 import type { ResponseObject } from '@/modules/01_exam/interface/response/Career'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import Conference from '@/modules/01_exam/components/Conference.vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
 
 const props = defineProps({
   loader: {
@@ -213,7 +219,7 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, notifyDelete, notifyConfirm } = mixin
+const { dateThaiRange, modalDelete, modalConfirm } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
@@ -234,6 +240,7 @@ const next = ref<boolean>() //แสดงปุ่มดูข้อมูล
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
 const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
+const modalConsend = ref<boolean>(false)
 
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
@@ -397,7 +404,7 @@ const clickAdd = () => {
 
 const checkDelete = (row: RequestItemsObject) => {
   rawItem.value = row
-  notifyDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
+  modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
 }
 
 /**
@@ -414,10 +421,14 @@ function clickDeleteRow() {
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      if (modalEdit.value) {
-        await editData()
+      if (store.consend == true) {
+        if (modalEdit.value) {
+          await editData()
+        } else {
+          await saveData()
+        }
       } else {
-        await saveData()
+        modalConsend.value = true
       }
     }
   })
@@ -427,8 +438,8 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
+  edit.value = false
   modal.value = false
-
   //   loader.value = true;
   //   await http
   //     .post(config.API.xxxxxxxxxxxxxxx, {
@@ -453,9 +464,8 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  //   edit.value = false
-  editRow.value = false
-
+  edit.value = false
+  modal.value = false
   //   loader.value = true;
   //   await http
   //     .post(config.API.xxxxxxxxxxxxxxx(id.value), {
@@ -478,7 +488,7 @@ const editData = async () => {
 
 const checkClose = async () => {
   if (editRow.value == true) {
-    notifyConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
+    modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
   } else {
     await clickClose()
   }
@@ -532,6 +542,16 @@ const addRow = () => {
   reason.value = ''
 }
 
+const consenClose = () => {
+  modalConsend.value = false
+}
+
+const consendOk = () => {
+  modalConsend.value = false
+  store.consend = true
+  clickSave()
+}
+
 /**
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
diff --git a/src/modules/01_exam/components/Form/Document.vue b/src/modules/01_exam/components/Form/Document.vue
index 92656ce..c995436 100644
--- a/src/modules/01_exam/components/Form/Document.vue
+++ b/src/modules/01_exam/components/Form/Document.vue
@@ -1,66 +1,78 @@
 <!-- card อัปโหลดเอกสาร -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
-    <HeaderTop
-      v-model:edit="edit"
-      header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
-      icon="mdi-file-document"
-      :addData="true"
-      :editOnly="true"
-      :cancel="cancelData"
-      :editData="step == 2"
-    />
-    <div class="row col-12 q-gutter-sm q-pt-sm">
-      <div v-if="edit" class="col-12 q-ma-none">
-        <q-input
-          class="q-my-sm"
-          hide-bottom-space
-          :outlined="edit"
-          dense
-          lazy-rules
-          :readonly="!edit"
-          :borderless="!edit"
-          v-model="name"
-          :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
-          :label="`${'ชื่อเอกสาร'}`"
-        />
-        <q-uploader
-          color="blue"
-          type="file"
-          flat
-          auto-upload
-          :factory="fileUpload"
-          class="full-width"
-          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-          bordered
-          label="[ไฟล์ jpg,png,pdf,csv,doc]"
-        />
-      </div>
+    <div class="col-12">
+      <HeaderTop
+        v-model:edit="edit"
+        header="อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)"
+        icon="mdi-file-document"
+        :addData="true"
+        :editOnly="true"
+        :cancel="cancelData"
+        :editData="step == 2"
+      />
     </div>
-    <q-separator class="q-mt-sm" />
-    <q-card bordered flat class="full-width">
-      <q-list separator>
-        <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-          <q-item-section>
-            <q-item-label class="full-width ellipsis">
-              {{ file.name }}
-            </q-item-label>
+    <div class="col-12">
+      <div v-if="edit" class="row justify-center q-pa-md">
+        <div class="col-4">
+          <q-input
+            class="q-my-sm"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="name"
+            :rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
+            :label="`${'ชื่อเอกสาร'}`"
+          />
+          <q-uploader
+            color="blue"
+            type="file"
+            flat
+            auto-upload
+            :factory="fileUpload"
+            class="full-width"
+            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+            bordered
+            label="[ไฟล์ jpg,png,pdf,csv,doc]"
+          />
+        </div>
+      </div>
+      <q-separator class="q-mt-sm" />
+      <q-card bordered flat class="full-width">
+        <q-list separator>
+          <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+            <q-item-section>
+              <q-item-label class="full-width ellipsis">
+                {{ file.name }}
+              </q-item-label>
 
-            <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
-          </q-item-section>
-          <q-item-section top side>
-            <div class="q-gutter-sm">
-              <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
-              </q-btn>
-              <q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
-                <q-tooltip>ลบไฟล์</q-tooltip>
-              </q-btn>
-            </div>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </q-card>
+              <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
+            </q-item-section>
+            <q-item-section top side>
+              <div class="q-gutter-sm">
+                <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
+                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  size="12px"
+                  flat
+                  dense
+                  round
+                  color="red"
+                  icon="mdi-delete-outline"
+                  v-if="edit"
+                >
+                  <q-tooltip>ลบไฟล์</q-tooltip>
+                </q-btn>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
   </q-card>
 </template>
 <script setup lang="ts">
diff --git a/src/modules/01_exam/components/Form/Education.vue b/src/modules/01_exam/components/Form/Education.vue
index 4765502..3e32400 100644
--- a/src/modules/01_exam/components/Form/Education.vue
+++ b/src/modules/01_exam/components/Form/Education.vue
@@ -178,10 +178,14 @@
       </q-form>
     </q-card>
   </q-dialog>
+  <q-dialog :model-value="modalConsend" persistent>
+    <q-card style="min-width: 800px">
+      <Conference :ok="consendOk" :close="consenClose" />
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { useExamDataStore } from '@/modules/01_exam/store'
 import Table from '@/components/Table.vue'
 import DialogHeader from '@/components/DialogHeader.vue'
 import DialogFooter from '@/components/DialogFooter.vue'
@@ -196,6 +200,8 @@ import type { ResponseObject } from '@/modules/01_exam/interface/response/Educat
 import type { DataOption } from '@/modules/01_exam/interface/index/Main'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import Conference from '@/modules/01_exam/components/Conference.vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
 
 const props = defineProps({
   loader: {
@@ -215,7 +221,7 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { dateThaiRange, notifyDelete, notifyConfirm } = mixin
+const { dateThaiRange, modalDelete, modalConfirm } = mixin
 const store = useExamDataStore()
 const { examData, changeExamColumns } = store
 const loader = ref<boolean>(false)
@@ -238,6 +244,7 @@ const next = ref<boolean>() //แสดงปุ่มดูข้อมูล
 const editRow = ref<boolean>(false) //เช็คมีการแก้ไขข้อมูล
 const statusCode = ref<number>()
 const checkValidate = ref<boolean>(false) //validate data ผ่านหรือไม่
+const modalConsend = ref<boolean>(false)
 
 const emit = defineEmits(['update:loader', 'update:statusEdit'])
 
@@ -424,7 +431,7 @@ const clickAdd = () => {
 
 const checkDelete = (row: RequestItemsObject) => {
   rawItem.value = row
-  notifyDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
+  modalDelete($q, 'ยืนยันการลบข้อมูล', 'หากต้องการลบกดให้กดตกลง', clickDeleteRow)
 }
 
 /**
@@ -441,10 +448,14 @@ function clickDeleteRow() {
 const clickSave = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      if (modalEdit.value) {
-        await editData()
+      if (store.consend == true) {
+        if (modalEdit.value) {
+          await editData()
+        } else {
+          await saveData()
+        }
       } else {
-        await saveData()
+        modalConsend.value = true
       }
     }
   })
@@ -454,8 +465,8 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
+  edit.value = false
   modal.value = false
-
   //   loader.value = true;
   //   await http
   //     .post(config.API.xxxxxxxxxxxxxxx, {
@@ -480,9 +491,8 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  //   edit.value = false
-  editRow.value = false
-
+  edit.value = false
+  modal.value = false
   //   loader.value = true;
   //   await http
   //     .post(config.API.xxxxxxxxxxxxxxx(id.value), {
@@ -505,7 +515,7 @@ const editData = async () => {
 
 const checkClose = async () => {
   if (editRow.value == true) {
-    notifyConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
+    modalConfirm($q, 'ข้อมูลมีการแก้ไข', 'ยืนยันการดำเนินต่อใช่หรือไม่', clickClose)
   } else {
     await clickClose()
   }
@@ -561,6 +571,16 @@ const addRow = () => {
   duration.value = [new Date(), new Date()]
 }
 
+const consenClose = () => {
+  modalConsend.value = false
+}
+
+const consendOk = () => {
+  modalConsend.value = false
+  store.consend = true
+  clickSave()
+}
+
 /**
  * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
  */
diff --git a/src/modules/01_exam/components/Form/Profile.vue b/src/modules/01_exam/components/Form/Profile.vue
index 9f09c08..a54150b 100644
--- a/src/modules/01_exam/components/Form/Profile.vue
+++ b/src/modules/01_exam/components/Form/Profile.vue
@@ -19,12 +19,6 @@
     :step="step"
   />
   <Occupation v-model:statusEdit="statusEdit" :notiNoEdit="notiNoEdit" :step="step" />
-  <NotifyError
-    :modal="modalNoEdit"
-    :tittle="modalNoEditTittle"
-    :detail="modalNoEditDetail"
-    :close="closeModalError"
-  />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -33,7 +27,6 @@ import Information from '@/modules/01_exam/components/Form/Profile/Information.v
 import Address from '@/modules/01_exam/components/Form/Profile/Address.vue'
 import Family from '@/modules/01_exam/components/Form/Profile/Family.vue'
 import Occupation from '@/modules/01_exam/components/Form/Profile/Occupation.vue'
-import NotifyError from '@/components/NotifyError.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useQuasar } from 'quasar'
@@ -55,18 +48,11 @@ const props = defineProps({
   }
 })
 
+const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { notifyConfirm } = mixin
+const { modalError } = mixin
 const loader = ref<boolean>(true)
 const statusEdit = ref<boolean>(false)
-const modalNoEdit = ref<boolean>(false)
-// const modalNoEditTittle = ref<string>('ยืนยันการเปลี่ยนแท็ปใช่หรือไม่?')
-// const modalNoEditDetail = ref<string>(
-//   'ยังมีข้อมูลที่ยังไม่ถูกบันทึก ถ้าตกลงเปลี่ยนแท็ปข้อมูลที่ยังไม่ถูกบันทึกจะหาย'
-// )
-const modalNoEditTittle = ref<string>('ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?')
-const modalNoEditDetail = ref<string>('มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
-
 const prefixOptions = ref<DataOption[]>([])
 const bloodOptions = ref<DataOption[]>([])
 const genderOptions = ref<DataOption[]>([])
@@ -80,11 +66,7 @@ watch(statusEdit, (count: boolean, prevCount: boolean) => {
   emit('update:statusEdit', count)
 })
 
-const closeModalError = () => {
-  modalNoEdit.value = false
-}
-
 const notiNoEdit = () => {
-  modalNoEdit.value = true
+  modalError($q, 'ไม่สามารถไม่สามารถแก้ไขข้อมูลได้', 'มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล')
 }
 </script>
diff --git a/src/modules/01_exam/components/Form/Profile/Address.vue b/src/modules/01_exam/components/Form/Profile/Address.vue
index 8a5da1c..2282e68 100644
--- a/src/modules/01_exam/components/Form/Profile/Address.vue
+++ b/src/modules/01_exam/components/Form/Profile/Address.vue
@@ -220,6 +220,11 @@
       </div>
     </q-form>
   </q-card>
+  <q-dialog :model-value="modalConsend" persistent>
+    <q-card style="min-width: 800px">
+      <Conference :ok="consendOk" :close="consenClose" />
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -230,8 +235,11 @@ import config from '@/app.config'
 import type { Address, DataOption, zipCodeOption } from '@/modules/01_exam/interface/index/Main'
 import { defaultAddress } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
+import Conference from '@/modules/01_exam/components/Conference.vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
 
 const mixin = useCounterMixin()
+const store = useExamDataStore()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
@@ -239,6 +247,7 @@ const addressData = ref<Address>(defaultAddress)
 const myform = ref<any>()
 const codep = ref<string>('')
 const codec = ref<string>('')
+const modalConsend = ref<boolean>(false)
 
 const provinceOptions = ref<DataOption[]>([])
 const districtOptions = ref<DataOption[]>([])
@@ -270,11 +279,17 @@ onMounted(() => {
 })
 
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-    } else {
-    }
-  })
+  if (store.consend == true) {
+    edit.value = false
+    emit('update:statusEdit', false)
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+      } else {
+      }
+    })
+  } else {
+    modalConsend.value = true
+  }
 }
 
 const changeBtn = async () => {
@@ -402,6 +417,16 @@ const fetchSubDistrict = async (id: string, position: string) => {
   //     })
 }
 
+const consenClose = () => {
+  modalConsend.value = false
+}
+
+const consendOk = () => {
+  modalConsend.value = false
+  store.consend = true
+  saveData()
+}
+
 const cancelData = () => {}
 
 const getClass = (val: boolean) => {
diff --git a/src/modules/01_exam/components/Form/Profile/Family.vue b/src/modules/01_exam/components/Form/Profile/Family.vue
index 82395ad..7a018af 100644
--- a/src/modules/01_exam/components/Form/Profile/Family.vue
+++ b/src/modules/01_exam/components/Form/Profile/Family.vue
@@ -272,6 +272,11 @@
       </div>
     </q-form>
   </q-card>
+  <q-dialog :model-value="modalConsend" persistent>
+    <q-card style="min-width: 800px">
+      <Conference :ok="consendOk" :close="consenClose" />
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
@@ -280,14 +285,18 @@ import { useCounterMixin } from '@/stores/mixin'
 import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
 import { defaultFamily } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
+import Conference from '@/modules/01_exam/components/Conference.vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
 
 const mixin = useCounterMixin()
+const store = useExamDataStore()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
 const myform = ref<any>()
 const familyData = ref<Family>(defaultFamily)
 const statusOptions = ref<DataOption[]>([])
+const modalConsend = ref<boolean>(false)
 
 // const prefixOptions = ref<any>([
 //   { id: "1", name: "นาย" },
@@ -319,11 +328,17 @@ const emit = defineEmits(['update:statusEdit'])
 onMounted(() => {})
 
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-    } else {
-    }
-  })
+  if (store.consend == true) {
+    edit.value = false
+    emit('update:statusEdit', false)
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+      } else {
+      }
+    })
+  } else {
+    modalConsend.value = true
+  }
 }
 
 const changeBtn = async () => {
@@ -348,6 +363,16 @@ const selectRadio = (e: boolean, i: any) => {
   }
 }
 
+const consenClose = () => {
+  modalConsend.value = false
+}
+
+const consendOk = () => {
+  modalConsend.value = false
+  store.consend = true
+  saveData()
+}
+
 const cancelData = () => {}
 
 const getClass = (val: boolean) => {
diff --git a/src/modules/01_exam/components/Form/Profile/Information.vue b/src/modules/01_exam/components/Form/Profile/Information.vue
index 01c7a4f..46cd7cf 100644
--- a/src/modules/01_exam/components/Form/Profile/Information.vue
+++ b/src/modules/01_exam/components/Form/Profile/Information.vue
@@ -84,6 +84,7 @@
             :enableTimePicker="false"
             week-start="0"
             :max-date="new Date()"
+            :disabled="!edit"
           >
             <template #year="{ year }">
               {{ year + 543 }}
@@ -218,6 +219,7 @@
             :enableTimePicker="false"
             week-start="0"
             :max-date="new Date()"
+            :disabled="!edit"
           >
             <template #year="{ year }">
               {{ year + 543 }}
@@ -325,6 +327,11 @@
       </div>
     </q-form>
   </q-card>
+  <q-dialog :model-value="modalConsend" persistent>
+    <q-card style="min-width: 800px">
+      <Conference :ok="consendOk" :close="consenClose" />
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -336,8 +343,11 @@ import HeaderTop from '@/components/top.vue'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import type { file } from '@babel/types'
+import Conference from '@/modules/01_exam/components/Conference.vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
 
 const mixin = useCounterMixin()
+const store = useExamDataStore()
 const { date2Thai, calAge } = mixin
 
 const edit = ref<boolean>(false)
@@ -346,6 +356,7 @@ const provinceOptions = ref<DataOption[]>([])
 const myform = ref<any>()
 const imageUrl = ref<string | null>(null)
 const disabledPic = ref<boolean>(false)
+const modalConsend = ref<boolean>(false)
 const fileData = ref<File | null>()
 const props = defineProps({
   prefixOptions: {
@@ -393,11 +404,17 @@ onMounted(() => {
 })
 
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-    } else {
-    }
-  })
+  if (store.consend == true) {
+    edit.value = false
+    emit('update:statusEdit', false)
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+      } else {
+      }
+    })
+  } else {
+    modalConsend.value = true
+  }
 }
 
 const changeBtn = async () => {
@@ -442,6 +459,16 @@ const pickFile = () => {
   disabledPic.value = true
 }
 
+const consenClose = () => {
+  modalConsend.value = false
+}
+
+const consendOk = () => {
+  modalConsend.value = false
+  store.consend = true
+  saveData()
+}
+
 const cancelData = () => {
   fileData.value = null
   disabledPic.value = false
diff --git a/src/modules/01_exam/components/Form/Profile/Occupation.vue b/src/modules/01_exam/components/Form/Profile/Occupation.vue
index 2ad3d35..97b481b 100644
--- a/src/modules/01_exam/components/Form/Profile/Occupation.vue
+++ b/src/modules/01_exam/components/Form/Profile/Occupation.vue
@@ -230,6 +230,11 @@
       </div>
     </q-form>
   </q-card>
+  <q-dialog :model-value="modalConsend" persistent>
+    <q-card style="min-width: 800px">
+      <Conference :ok="consendOk" :close="consenClose" />
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
@@ -239,10 +244,15 @@ import config from '@/app.config'
 import type { Occupation } from '@/modules/01_exam/interface/index/Main'
 import { defaultOccupation } from '@/modules/01_exam/interface/index/Main'
 import HeaderTop from '@/components/top.vue'
+import Conference from '@/modules/01_exam/components/Conference.vue'
+import { useExamDataStore } from '@/modules/01_exam/store'
+
+const store = useExamDataStore()
 
 const edit = ref<boolean>(false)
 const occupationData = ref<Occupation>(defaultOccupation)
 const myform = ref<any>()
+const modalConsend = ref<boolean>(false)
 
 const props = defineProps({
   statusEdit: {
@@ -264,11 +274,17 @@ const emit = defineEmits(['update:statusEdit'])
 onMounted(() => {})
 
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
-    if (success) {
-    } else {
-    }
-  })
+  if (store.consend == true) {
+    edit.value = false
+    emit('update:statusEdit', false)
+    await myform.value.validate().then(async (success: boolean) => {
+      if (success) {
+      } else {
+      }
+    })
+  } else {
+    modalConsend.value = true
+  }
 }
 
 const changeBtn = async () => {
@@ -284,6 +300,16 @@ const changeBtn = async () => {
   }
 }
 
+const consenClose = () => {
+  modalConsend.value = false
+}
+
+const consendOk = () => {
+  modalConsend.value = false
+  store.consend = true
+  saveData()
+}
+
 const cancelData = () => {}
 
 const getClass = (val: boolean) => {
diff --git a/src/modules/01_exam/store.ts b/src/modules/01_exam/store.ts
index b1cc140..6365120 100644
--- a/src/modules/01_exam/store.ts
+++ b/src/modules/01_exam/store.ts
@@ -14,6 +14,8 @@ export const useExamDataStore = defineStore('exam', () => {
     career: { columns: [] }
   })
 
+  const consend = ref<boolean>(false)
+
   const changeExamColumns = (system: String, val: String[]) => {
     if (system == 'main') examData.value.main.columns = val
     if (system == 'education') examData.value.education.columns = val
@@ -27,6 +29,7 @@ export const useExamDataStore = defineStore('exam', () => {
 
   return {
     examData,
-    changeExamColumns
+    changeExamColumns,
+    consend
   }
 })
diff --git a/src/modules/01_exam/views/ExamDetail.vue b/src/modules/01_exam/views/ExamDetail.vue
index 50baf47..d52c102 100644
--- a/src/modules/01_exam/views/ExamDetail.vue
+++ b/src/modules/01_exam/views/ExamDetail.vue
@@ -13,7 +13,6 @@
         class="col-2"
         v-model="step"
         ref="stepper"
-        alternative-labels
         header-nav
         animated
         done-color="positive"
@@ -56,7 +55,7 @@
           :disable="stepRaw < 4"
           :name="4"
           title="สำเร็จ"
-          :icon="stepRaw >= 4 ? (stepRaw == 4 ? 'mdi-pencil' : 'mdi-check-bold') : 'mdi-pencil'"
+          :icon="stepRaw >= 4 ? 'mdi-check-bold' : 'mdi-pencil'"
         >
           <ExamFinished :fetchStep="fetchStep" :step="stepRaw" />
         </q-step>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 8247980..90c154d 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -230,15 +230,18 @@ export const useCounterMixin = defineStore('mixin', () => {
     }
   }
 
-  function notifyDelete(q: any, title: string, message: string, ok: Function, cancel?: Function) {
+  function modalDelete(q: any, title: string, message: string, ok: Function, cancel?: Function) {
     q.dialog({
       title: `<span class="text-red">${title}</span>`,
-      message: `<span class="text-red">${message}</span>`,
-      cancel: true,
-      ok: {
-        push: true,
-        color: 'negative'
+      message: `<span class="text-black">${message}</span>`,
+      cancel: {
+        flat: true,
+        color: 'grey-14'
       },
+      ok: {
+        color: 'red-6'
+      },
+      focus: 'none',
       persistent: true,
       html: true
     })
@@ -251,15 +254,18 @@ export const useCounterMixin = defineStore('mixin', () => {
       .onDismiss(() => {})
   }
 
-  function notifyConfirm(q: any, title: string, message: string, ok: Function, cancel?: Function) {
+  function modalConfirm(q: any, title: string, message: string, ok: Function, cancel?: Function) {
     q.dialog({
       title: `<span class="text-primary">${title}</span>`,
-      message: `<span class="text-primary">${message}</span>`,
-      cancel: true,
+      message: `<span class="text-black">${message}</span>`,
+      cancel: {
+        flat: true,
+        color: 'grey'
+      },
       ok: {
-        push: true,
         color: 'primary'
       },
+      focus: 'none',
       persistent: true,
       html: true
     })
@@ -272,6 +278,25 @@ export const useCounterMixin = defineStore('mixin', () => {
       .onDismiss(() => {})
   }
 
+  function modalError(q: any, title: string, message: string, ok?: Function) {
+    q.dialog({
+      title: `<span class="text-primary">${title}</span>`,
+      message: `<span class="text-black">${message}</span>`,
+      ok: {
+        push: true,
+        color: 'primary'
+      },
+      focus: 'none',
+      persistent: true,
+      html: true
+    })
+      .onOk(() => {
+        if (ok != undefined) ok()
+      })
+      .onCancel(() => {})
+      .onDismiss(() => {})
+  }
+
   const dateText = (val: Date) => {
     if (val != null) {
       return date2Thai(val)
@@ -387,7 +412,8 @@ export const useCounterMixin = defineStore('mixin', () => {
     textToFax,
     dateThaiRange,
     monthThaiRange,
-    notifyDelete,
-    notifyConfirm
+    modalDelete,
+    modalConfirm,
+    modalError
   }
 })