api ระบบ รอบการปฏิบัติงาน

src/modules/09_leave/views/RoundMain.vue

@@ -1,18 +1,29 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted } from "vue";
-
-import router from "@/router";
 import { useQuasar } from "quasar";
-import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** ImportStores*/
 import { useRoundDataStore } from "@/modules/09_leave/stores/RoundStores";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** ImportComponents*/
+import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
+
+const mixin = useCounterMixin();
 const dataStore = useRoundDataStore();
 const { fetchData } = dataStore;
-
+const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
+
+const attrs = ref<any>(useAttrs());
+
 const modal = ref<boolean>(false);
 const detailData = ref<any>();
 const editCheck = ref<string>("");
-// ค้นหาในตาราง
+
+/** ค้นหาข้อมูลใน Table */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const resetFilter = () => {
@@ -22,19 +33,52 @@ const resetFilter = () => {
   }
 };
 
-const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
+onMounted(() => {
+  fetchListRoind();
 });
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
 
+/** Function get ข้อมูลรายการรอบการปฏิบัติงาน */
+async function fetchListRoind() {
+  showLoader();
+  await http
+    .get(config.API.roundDutytime())
+    .then((res) => {
+      const data = res.data.result;
+      fetchData(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * Function delete รายการรอบการปฏิบัติงาน
+ * @param id ค่า ID ของ rows
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.roundDutytimeByid(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(async () => {
+        await fetchListRoind();
+      });
+  });
+}
+
+/**
+ *
+ * @param data ข้อมูลรอบการปฏิบัติงาน
+ * @param check action แก้ไข,เพิ่ม
+ */
 function openModal(data: any, check: string) {
   modal.value = true;
   editCheck.value = check;
@@ -43,45 +87,18 @@ function openModal(data: any, check: string) {
   }
 }
 
+/** Function ปิด popup รายละเอียดและการเพิ่ม*/
 function closeDialog() {
   modal.value = false;
   editCheck.value = "add";
 }
-onMounted(() => {
-  dataStore.fetchData([
-    {
-      am: "07:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: true,
-      isDefault: true,
-    },
-    {
-      am: "08:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: false,
-      isDefault: false,
-    },
-    {
-      am: "09:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: true,
-      isDefault: false,
-    },
-    {
-      am: "10:30",
-      amOut: "12:00",
-      pm: "13:00",
-      pmOut: "15:30",
-      status: true,
-      isDefault: false,
-    },
-  ]);
+
+/**  pagination */
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
 </script>
 <template>
@@ -158,7 +175,6 @@ onMounted(() => {
         class="custom-header-table"
         v-bind="attrs"
         :visible-columns="dataStore.visibleColumns"
-        :pagination-label="paginationLabel"
         v-model:pagination="pagination"
       >
         <template v-slot:header="props">
@@ -172,6 +188,7 @@ onMounted(() => {
             >
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
+            <q-th auto-width></q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
@@ -192,15 +209,15 @@ onMounted(() => {
               :props="props"
               @click.prevent="openModal(props.row, 'edit')"
             >
-              <div v-if="col.name === 'status'" class="text-center">
+              <div v-if="col.name === 'isActive'" class="text-center">
                 <q-icon
-                  v-if="props.row.status === true"
+                  v-if="props.row.isActive === true"
                   name="mdi-check"
                   size="sm"
                   color="positive"
                 />
                 <q-icon
-                  v-if="props.row.status === false"
+                  v-if="props.row.isActive === false"
                   name="mdi-close"
                   size="sm"
                   color="grey"
@@ -210,6 +227,17 @@ onMounted(() => {
                 {{ col.value }}
               </div>
             </q-td>
+            <q-td>
+              <q-btn
+                v-if="props.row.isActive === false"
+                dense
+                flat
+                round
+                color="red"
+                icon="delete"
+                @click="onClickDelete(props.row.id)"
+              />
+            </q-td>
           </q-tr>
         </template>
       </d-table>
@@ -220,6 +248,7 @@ onMounted(() => {
     :closeDialog="closeDialog"
     :editCheck="editCheck"
     :detailData="detailData"
+    :fetchData="fetchListRoind"
   />
 </template>
 <style scoped lang="scss">