refactor code

src/modules/01_exam/components/ExamPayment.vue

@@ -83,21 +83,6 @@
                     accept="image/*"
                     @change="uploadImage"
                   />
-                  <!-- <q-file
-                    id="file-upload"
-                    v-model="filePayment"
-                    dense
-                    label="อัพโหลดหลักฐานชำระเงิน"
-                    outlined
-                    use-chips
-                    multiple
-                    class="q-pl-sm"
-                    v-if="status == 'payment' || status == 'rejectPayment'"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file> -->
                 </div>
               </div>
             </div>
@@ -169,7 +154,6 @@
                 </div>
                 <div class="col-xs-12 col-sm-5">
                   <label for="file-upload" class="col-12 row">
-                    <!-- :src="img" -->
                     <q-img
                       src="@/assets/ex_slip.jpeg"
                       fit="contain"
@@ -196,21 +180,6 @@
                     accept="image/*"
                     @change="uploadImage"
                   />
-                  <!-- <q-file
-                    id="file-upload"
-                    v-model="filePayment"
-                    dense
-                    label="อัพโหลดหลักฐานชำระเงิน"
-                    outlined
-                    use-chips
-                    multiple
-                    class="q-pl-sm"
-                    v-if="status == 'payment' || status == 'rejectPayment'"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file> -->
                 </div>
               </div>
             </div>
@@ -230,11 +199,11 @@
     />
   </div>
 </template>
-
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { useQuasar } from 'quasar'
 import { useCounterMixin } from '@/stores/mixin'
+import { useDataStore } from '@/stores/data'
 import http from '@/plugins/http'
 import config from '@/app.config'
 import { useRoute } from 'vue-router'
@@ -252,10 +221,11 @@ const props = defineProps({
 
 const $q = useQuasar()
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
-const { success, modalError } = mixin
+const { success, modalError, messageError } = mixin
+const dataStore = useDataStore()
+const { loaderPage } = dataStore
 const rejectMessage = ref<string>('')
 const img = ref<string>('')
-const loader = ref<boolean>(false)
 const route = useRoute()
 const examId = ref<string>(route.params.id.toString())
 const positionId = ref<string>(route.params.positionId.toString())
@@ -269,7 +239,7 @@ onMounted(async () => {
 })
 
 const fetchPaymentExam = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.periodExamPayment(examId.value))
     .then((res) => {
@@ -277,14 +247,16 @@ const fetchPaymentExam = async () => {
       bank.value = data.bankExam
       fee.value = data.fee
     })
-    .catch(() => {})
-    .finally(async () => {
-      loader.value = false
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
     })
 }
 
 const fetchData = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidatePayment(examId.value, positionId.value))
     .then((res) => {
@@ -292,9 +264,11 @@ const fetchData = async () => {
       img.value = data.paymentImg
       rejectMessage.value = data.rejectDetail
     })
-    .catch(() => {})
-    .finally(async () => {
-      loader.value = false
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
     })
 }
 
@@ -302,17 +276,18 @@ const clickPayment = async () => {
   if (img.value != null || img.value != '') {
     const formData = new FormData()
     formData.append('', filePayment.value[0])
-    loader.value = true
+    loaderPage(true)
     await http
       .post(config.API.candidatePayment(examId.value, positionId.value))
       .then(() => {
         success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
       })
-      .catch(() => {})
+      .catch((e) => {
+        messageError($q, e)
+      })
       .finally(async () => {
-        loader.value = false
-        props.fetchStep()
         filePayment.value = []
+        await props.fetchStep()
       })
   } else {
     modalError($q, 'ไม่สามารถยืนยันการชำระเงินได้', 'กรุณาอัปโหลดเอกสารหลักฐานชำระเงิน')
@@ -324,16 +299,17 @@ const uploadImage = async (file: any) => {
   if (input.length > 0) {
     const formData = new FormData()
     formData.append('', input[0])
-    loader.value = true
+    loaderPage(true)
     await http
       .put(config.API.candidatePayment(examId.value, positionId.value), formData)
       .then(() => {
         success($q, 'ส่งหลักฐานชำระเงินสำเร็จ')
       })
-      .catch(() => {})
+      .catch((e) => {
+        messageError($q, e)
+      })
       .finally(async () => {
-        loader.value = false
-        props.fetchStep()
+        await props.fetchStep()
         await fetchData()
         file = []
       })
@@ -343,15 +319,19 @@ const uploadImage = async (file: any) => {
 }
 
 const downloadBillPayment = async () => {
-  loader.value = true
+  loaderPage(true)
   await http
     .get(config.API.candidateBill(examId.value, positionId.value))
     .then((res) => {
       const data = res.data.result
       window.open(data)
     })
-    .catch(() => {})
-    .finally(async () => {})
+    .catch((e) => {
+      messageError($q, e)
+    })
+    .finally(() => {
+      loaderPage(false)
+    })
 }
 </script>