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

2023-11-24 17:28:37 +07:00 · 2023-11-24 17:28:37 +07:00 · 1c74095abe
commit 1c74095abe
parent 3482ec0ae4
5 changed files with 342 additions and 236 deletions
--- a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
+++ b/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>
--- a/src/modules/09_leave/interface/request/changeRound.ts
+++ b/src/modules/09_leave/interface/request/changeRound.ts
@ -1,28 +1,34 @@
 interface dataPost {
-    cardId: string
-    firstName: string
-    lastName: string
+  cardId: string;
+  firstName: string;
+  lastName: string;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
 }
 interface changeRoundEdit {
-    round: string
-    date: string
-    reson: string
-    effectiveDate: Date | null
+  round: string;
+  date: string;
+  reson: string;
+  effectiveDate: Date | null;
 }
 interface MyObjectRoundChangeRef {
-    round: object | null
-    effectiveDate: object | null
-    [key: string]: any;
+  round: object | null;
+  effectiveDate: object | null;
+  [key: string]: any;
 }
 interface MyObjectRoundChangeMainRef {
-    cardId:object|null
-    firstName:object|null
-    lastName:object|null
-    [key: string]: any;
+  cardId: object | null;
+  firstName: object | null;
+  lastName: object | null;
+  [key: string]: any;
 }
 export type {
-    dataPost,
-    changeRoundEdit,
-    MyObjectRoundChangeRef,
-    MyObjectRoundChangeMainRef
-}
+  dataPost,
+  changeRoundEdit,
+  MyObjectRoundChangeRef,
+  MyObjectRoundChangeMainRef,
+  DataOption,
+};
--- a/src/modules/09_leave/stores/ChangeRoundStore.ts
+++ b/src/modules/09_leave/stores/ChangeRoundStore.ts
@ -1,167 +1,237 @@
 import { defineStore } from "pinia";
 import { ref, reactive } from "vue";
-import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
+import type {
+  changeShow,
+  dataRowChangeRound,
+  dataRowChangeRoundHistory,
+  historyShow,
+} from "@/modules/09_leave/interface/response/changeRound";
 import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";

-const mixin = useCounterMixin()
-const { date2Thai } = mixin
-const checkCilck = ref<boolean>(false)
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  dialogMessageNotify,
+  dialogConfirm,
+  success,
+  hideLoader,
+} = mixin;
+const checkCilck = ref<boolean>(false);
+const profileId = ref<string>("");
 // store ลา >> รอบการปฏิบัติงาน
 export const useChangeRoundDataStore = defineStore(
-    "changeRoundDataStore",
-    () => {
-        //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-        const visibleColumns = ref<string[]>([
-            "cardId",
-            "fullName",
-            "currentRound",
-            "effectiveDate"
-        ]);
-        const visibleColumnsHistory = ref<string[]>([
-            "round",
-            "time",
-            "effectiveDate",
-            "reson"
-        ]);
+  "changeRoundDataStore",
+  () => {
+    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+    const visibleColumns = ref<string[]>([
+      "cardId",
+      "fullName",
+      "currentRound",
+      "effectiveDate",
+    ]);
+    const visibleColumnsHistory = ref<string[]>([
+      "round",
+      "time",
+      "effectiveDate",
+      "reson",
+    ]);

-        // หัวตาราง
-        const columns = ref<QTableProps["columns"]>([
-            {
-                name: "cardId",
-                align: "left",
-                label: "เลขบัตรประชาชน",
-                sortable: true,
-                field: "cardId",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "fullName",
-                align: "left",
-                label: "ชื่อ-นามสกุล",
-                sortable: true,
-                field: "fullName",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "currentRound",
-                align: "left",
-                label: "รอบปัจจุบัน",
-                sortable: true,
-                field: "currentRound",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "effectiveDate",
-                align: "left",
-                label: "วันที่มีผล",
-                sortable: true,
-                field: "effectiveDate",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-        ]);
-        const columnsHistory = ref<QTableProps["columns"]>([
-            {
-                name: "round",
-                align: "left",
-                label: "ครั้งที่",
-                sortable: true,
-                field: "round",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "time",
-                align: "left",
-                label: "รอบเวลา",
-                sortable: true,
-                field: "time",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "effectiveDate",
-                align: "left",
-                label: "วันที่มีผล",
-                sortable: true,
-                field: "effectiveDate",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-            {
-                name: "reson",
-                align: "left",
-                label: "เหตุผล",
-                sortable: true,
-                field: "reson",
-                headerStyle: "font-size: 14px",
-                style: "font-size: 14px",
-            },
-        ]);
+    // หัวตาราง
+    const columns = ref<QTableProps["columns"]>([
+      {
+        name: "cardId",
+        align: "left",
+        label: "เลขบัตรประชาชน",
+        sortable: true,
+        field: "cardId",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "fullName",
+        align: "left",
+        label: "ชื่อ-นามสกุล",
+        sortable: true,
+        field: "fullName",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "currentRound",
+        align: "left",
+        label: "รอบปัจจุบัน",
+        sortable: true,
+        field: "currentRound",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "effectiveDate",
+        align: "left",
+        label: "วันที่มีผล",
+        sortable: true,
+        field: "effectiveDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);
+    const columnsHistory = ref<QTableProps["columns"]>([
+      {
+        name: "round",
+        align: "left",
+        label: "ครั้งที่",
+        sortable: true,
+        field: "round",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "time",
+        align: "left",
+        label: "รอบเวลา",
+        sortable: true,
+        field: "time",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "effectiveDate",
+        align: "left",
+        label: "วันที่มีผล",
+        sortable: true,
+        field: "effectiveDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+      {
+        name: "reson",
+        align: "left",
+        label: "เหตุผล",
+        sortable: true,
+        field: "reson",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px",
+      },
+    ]);

-
-        // ข้อมูลในตาราง
-        const rows = ref<changeShow[]>([]);
-        const rowsHistory = ref<historyShow[]>([]);
-        function fetchDatainHistory(data: dataRowChangeRoundHistory[]) {
-            let datalistHistory: historyShow[] = data.map((e: dataRowChangeRoundHistory) => {
-                return {
-                    id: e.id,
-                    time: `${e.roundStart}-${e.roundEnd}`,
-                    effectiveDate: date2Thai(e.effectiveDate),
-                    reson: e.reson ?? '-'
-
-                };
-            });
-            rowsHistory.value = datalistHistory;
-        }
-
-        function fetchDataForCardId(dataDetail: any, data: any) {
-            if (dataDetail) {
-              const filteredData = data.filter((e:any) => {
-                return (!dataDetail.cardId || e.cardId === dataDetail.cardId) &&
-                       (!dataDetail.firstName || e.firstName === dataDetail.firstName) &&
-                       (!dataDetail.lastName || e.lastName === dataDetail.lastName);
-              });
-          
-              if (filteredData.length > 0) {
-                checkCilck.value = false;
-                rows.value = filteredData.map((e:any) => ({
-                  cardId: e.cardId,
-                  prefix: e.prefix,
-                  firstName: e.firstName,
-                  lastName: e.lastName,
-                  fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
-                  roundStart: e.roundStart,
-                  roundEnd: e.roundEnd,
-                  currentRound: `${e.roundStart}-${e.roundEnd}`,
-                  effectiveDate: date2Thai(e.effectiveDate),
-                }));
-              } else {
-                rows.value = [];
-                console.log(3);
-                checkCilck.value = true;
-              }
-            }
-          }
-          
-
-
-        return {
-            visibleColumns,
-            columns,
-            columnsHistory,
-            rows,
-            rowsHistory,
-            fetchDatainHistory,
-            visibleColumnsHistory,
-            fetchDataForCardId,
-            checkCilck
-        };
+    // ข้อมูลในตาราง
+    function setProfileId(id: string) {
+      console.log(profileId);
+      profileId.value = id;
    }
+    function fetchDataForCardId(dataDetail: any) {
+      if (dataDetail) {
+        showLoader();
+        http
+          .post(config.API.leaveSearch(), {
+            citizenId: dataDetail.cardId || "", //เลขบัตรประชาชน
+            firstname: dataDetail.firstName || "", //ชื่อจริง
+            lastname: dataDetail.lastName || "", //นามสกุล
+            page: dataDetail.page || 1, //*หน้า
+            pageSize: dataDetail.pageSize || 10, //*จำนวนแถวต่อหน้า
+            keyword: dataDetail.keyword || "", //keyword ค้นหา
+          })
+          .then((res) => {
+            const apiData = res.data.result.data;
+            if (apiData.length > 0) {
+              checkCilck.value = false;
+              rows.value = apiData.map((e: any) => ({
+                profileId: e.profileId,
+                cardId: e.citizenId,
+                fullName: e.fullName,
+                roundStart: e.startTimeMorning,
+                roundEnd: e.leaveTimeAfterNoon,
+                currentRound: `${e.startTimeMorning}-${e.leaveTimeAfterNoon}`,
+                effectiveDate: date2Thai(e.effectiveDate),
+              }));
+              console.log(profileId.value);
+              console.log(apiData.length);
+            } else {
+              rows.value = [];
+              checkCilck.value = true;
+            }
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(async () => {
+            hideLoader();
+          });
+      }
+    }
+    const rows = ref<changeShow[]>([]);
+    const rowsHistory = ref<historyShow[]>([]);
+    // paging
+    const page = ref<number>(1);
+    const pageSize = ref<number>(10);
+    const filter = ref<string>(""); //search data table
+    /**
+     * ฟังก์ชั่น api เปลี่ยนหน้า
+     * @param pageVal page
+     * @param pageSizeVal pagesize
+     */
+    async function changePage(pageVal: number, pageSizeVal: number) {
+      page.value = await pageVal;
+      pageSize.value = await pageSizeVal;
+      fetchDatainHistory();
+    }
+
+    async function fetchDatainHistory() {
+      console.log("tes");
+      console.log(profileId.value);
+      showLoader();
+      await http
+        .post(
+          config.API.leaveRoundById(profileId.value),
+          {
+            page: page.value,
+            pageSize: pageSize.value,
+            keyword: filter.value,
+          }
+          // `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+        )
+        .then((res) => {
+          const dataHistory = res.data.result.data;
+          rowsHistory.value = [];
+          dataHistory.map((e: any) => {
+            rowsHistory.value.push({
+              round: e.round,
+              startTimeMorning: e.startTimeMorning,
+              leaveTimeAfternoon: e.leaveTimeAfternoon,
+              time: `${e.startTimeMorning}-${e.leaveTimeAfternoon}`,
+              effectiveDate: date2Thai(e.effectiveDate),
+              reson: e.remark ?? "-",
+            });
+            console.log(rowsHistory.value);
+          });
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+
+    return {
+      visibleColumns,
+      columns,
+      columnsHistory,
+      rows,
+      rowsHistory,
+      fetchDatainHistory,
+      visibleColumnsHistory,
+      fetchDataForCardId,
+      checkCilck,
+      setProfileId,
+    };
+  }
 );
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@ -37,7 +37,12 @@ const formData = reactive<dataPost>({
 function Openmodal(check: string, detail: any) {
  DataRow.value = detail;
  modal.value = true;
+  console.log(DataRow.value.profileId);
+  dataStore.setProfileId(DataRow.value.profileId);
+  console.log(DataRow.value.profileId);
  editCheck.value = check;
+  dataStore.fetchDatainHistory();
+  console.log(detail);
 }

 /** Function closePopup */
@ -47,29 +52,8 @@ function closeDialog() {

 /** Function ค้นหาข้อมูล */
 function searchData() {
-  const data = [
-    {
-      cardId: "3514210651232",
-      prefix: "นางสาว",
-      firstName: "กัณฐิมา",
-      lastName: "กาฬสินธุ์",
-      roundStart: "07:00",
-      roundEnd: "11:00",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-    },
-    {
-      cardId: "1231231231234",
-      prefix: "นายสาว",
-      firstName: "test",
-      lastName: "test",
-      roundStart: "07:00",
-      roundEnd: "16:00",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-    },
-  ];
-
  if (formData.cardId || formData.firstName || formData.lastName) {
-    dataStore.fetchDataForCardId(formData, data);
+    dataStore.fetchDataForCardId(formData);
  } else {
    dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
  }
@ -77,22 +61,7 @@ function searchData() {

 /** Hook */
 onMounted(() => {
-  dataStore.fetchDatainHistory([
-    {
-      id: "xxx1",
-      roundStart: "08:30",
-      roundEnd: "16:00",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-      reson: null,
-    },
-    {
-      id: "xxx2",
-      roundStart: "08:00",
-      roundEnd: "16:30",
-      effectiveDate: new Date("2023-11-01T03:08:43.217"),
-      reson: null,
-    },
-  ]);
+  // dataStore.fetchDatainHistory();
 });
 </script>
 <template>
@ -160,11 +129,11 @@ onMounted(() => {
        row-key="interrogated"
        flat
        bordered
-        :paging="true"
        dense
        class="custom-header-table"
        :visible-columns="dataStore.visibleColumns"
      >
+        <!-- :paging="true" -->
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th
@ -231,6 +200,7 @@ onMounted(() => {
    :closeDialog="closeDialog"
    :editCheck="editCheck"
    :DataRow="DataRow"
+    :personId="DataRow == null ? '' : DataRow.profileId"
  />
 </template>
 <style scoped lang="scss">