ผูก API เปลี่ยนแปลงรอบการปฏิบัติงานของผู้ใช้งาน

src/modules/09_leave/components/4_ChangeRound/DialogForm.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
 
 /** importType */
 import type {
   changeRoundEdit,
   MyObjectRoundChangeRef,
+  DataOption,
 } from "@/modules/09_leave/interface/request/changeRound";
 
 /** importStore */
@@ -14,36 +18,34 @@ import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundSt
 /** useStore */
 const dataStore = useChangeRoundDataStore();
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai } = mixin;
+const {
+  dialogConfirm,
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+} = mixin;
 
+const route = useRoute();
 const $q = useQuasar();
-
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const roundRef = ref<Object | null>(null);
 const resonRef = ref<Object | null>(null);
 const effectiveDateRef = ref<Object | null>(null);
 
-const formData = reactive<changeRoundEdit>({
-  round: "",
-  date: "",
-  reson: "",
-  effectiveDate: null,
-});
-
-const roundOp = ref([
-  {
-    id: "1",
-    name: "08:30 - 17:00",
-  },
-  {
-    id: "2",
-    name: "08:00 - 16:30",
-  },
-]);
+const roundOp = ref<any>([]);
 const objectRoundChange: MyObjectRoundChangeRef = {
   round: roundRef,
   effectiveDate: effectiveDateRef,
 };
 
+onMounted(async () => {
+  await fetchDataOption();
+});
+
 /** Function validateForm */
 function validateForm() {
   const hasError = [];
@@ -63,22 +65,80 @@ function validateForm() {
   }
 }
 
+const formData = reactive<changeRoundEdit>({
+  round: "",
+  date: "",
+  reson: "",
+  effectiveDate: null,
+});
+
 /** Function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
+      changeRound();
       props.closeDialog?.();
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
+
+/** Function เปลี่ยนรอบเวลา*/
+async function changeRound() {
+  await http
+    .post(config.API.leaveRound(), {
+      profileId: props.personId,
+      roundId: formData.round,
+      effectDate: formData.effectiveDate,
+      remark: formData.round,
+    })
+    .then(() => {
+      success($q, "บันทึกข้อมูลเปลี่ยนรอบเวลา");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.closeDialog?.();
+    });
+}
+
+/**
+ *ประวัติการเปลี่ยนรอบการปฏิบัติงาน"
+ *
+ */
+async function fetchDataOption() {
+  showLoader();
+  await http
+    .get(config.API.leaveRound())
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: `${r.startTimeMorning}-${r.endTimeAfternoon}`,
+        });
+      });
+      roundOp.value = option;
+      console.log(roundOp.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const props = defineProps({
   modal: Boolean,
   closeDialog: Function,
   editCheck: String,
   DataRow: Object,
+  personId: String,
 });
 
 function close() {
@@ -262,9 +322,6 @@ watch(
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'round'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
                   <div>
                     {{ col.value }}
                   </div>