รายการคำสั่ง ==> API

src/modules/18_command/views/detail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 
 import { useRouter, useRoute } from "vue-router";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
@@ -13,25 +13,51 @@ const router = useRouter();
 const route = useRoute();
 const store = useCommandDetail();
 
-const componentMap: any = {
-  Detail,
-  ListPersons,
-  ReceivedCopy,
-  Attached,
-};
+const childDetailRef = ref<InstanceType<typeof Detail> | null>(null);
+const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null);
+const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
+  null
+);
+const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null);
 
 const readonly = ref<boolean>(route.name === "commandViewDetailPage");
+const isChangeData = ref<boolean>(false);
+
 const tabs = ref<string>("Detail");
 const tabsManu = ref([
   { label: "รายละเอียดคำสั่ง", name: "Detail" },
-  { label: "รายชื่อผู้ออกคำสั่ง", name: "ListPersons" },
-  { label: "รายชื่อผู้ได้รับสำเนาคำสั่ง", name: "ReceivedCopy" },
+  {
+    label: "รายชื่อผู้ออกคำสั่ง",
+    name: "ListPersons",
+  },
+  {
+    label: "รายชื่อผู้ได้รับสำเนาคำสั่ง",
+    name: "ReceivedCopy",
+  },
   { label: "คำสั่งและบัญชีแนบท้าบ", name: "Attached" },
 ]);
 
+/**
+ * function เช็คการแกไข้ข้อมูล
+ */
+function onCheckChangeData() {
+  isChangeData.value = true;
+}
+
 onMounted(() => {
   store.readonly = readonly.value;
 });
+
+watch(tabs, (newValue, oldValue) => {
+  console.log(`Count changed from ${oldValue} to ${newValue}`);
+  if (isChangeData.value) {
+    // เรียกใช้ฟังก์ชันของ component ลูก
+    if (oldValue === "Detail") {
+      console.log(childDetailRef.value);
+      childDetailRef.value?.onSubmit();
+    }
+  }
+});
 </script>
 
 <template>
@@ -73,14 +99,43 @@ onMounted(() => {
       <q-separator />
 
       <q-tab-panels v-model="tabs" animated>
-        <q-tab-panel
-          style="padding: 0px"
-          v-for="(panel, index) in tabsManu"
-          :key="index"
-          :name="panel.name"
-        >
+        <q-tab-panel style="padding: 0px" name="Detail">
           <q-card>
-            <component :is="componentMap[panel.name]" />
+            <Detail
+              ref="childDetailRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
+          </q-card>
+        </q-tab-panel>
+
+        <q-tab-panel style="padding: 0px" name="ListPersons">
+          <q-card>
+            <ListPersons
+              ref="childListPersonsRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
+          </q-card>
+        </q-tab-panel>
+
+        <q-tab-panel style="padding: 0px" name="ReceivedCopy">
+          <q-card>
+            <ReceivedCopy
+              ref="childReceivedCopyRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
+          </q-card>
+        </q-tab-panel>
+
+        <q-tab-panel style="padding: 0px" name="Attached">
+          <q-card>
+            <Attached
+              ref="childAttachedRef"
+              v-model:is-change-data="isChangeData"
+              :on-check-change-data="onCheckChangeData"
+            />
           </q-card>
         </q-tab-panel>
       </q-tab-panels>

src/modules/18_command/views/lists.vue

@@ -1,53 +1,59 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { reactive, ref } from "vue";
+import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 
+import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
+import type { FormQuery } from "@/modules/18_command/interface/request/Main";
+import type { ResListCommand } from "@/modules/18_command/interface/response/Main";
+
 import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
 import TableList from "@/modules/18_command/components/Main/TableMain.vue";
 
+const $q = useQuasar();
 const store = useCommandListStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const yearly = ref<number>(new Date().getFullYear());
-const searchKeyword = ref<string>("");
 const modalAdd = ref<boolean>(false);
 
-const tabsManu = ref([
-  { label: "แบบร่าง", name: "list_draft" },
-  { label: "รอผู้มีอำนาจ", name: "list_authority" },
-  { label: "รอออกคำสั่ง", name: "list_orders" },
-  { label: "ออกคำสั่งเสร็จสิ้น", name: "list_completed" },
-  { label: "ยกเลิก", name: "list_cancel" },
+const tabsManu = ref<ItemTabs[]>([
+  { label: "แบบร่าง", name: "DRAFT" },
+  { label: "รอผู้มีอำนาจ", name: "PENDING" },
+  { label: "รอออกคำสั่ง", name: "WAITING" },
+  { label: "ออกคำสั่งเสร็จสิ้น", name: "REPORTED" },
+  { label: "ยกเลิก", name: "CANCEL" },
 ]);
 
-onMounted(() => {
-  store.rows = [
-    {
-      id: "1",
-      caseFault: null,
-      faultLevel: null,
-      fiscalYear: "2024",
-      fullName: "นายพิชัยยุทธ แสงศรี",
-      orderBy: "สำนักงานเขตพระนคร",
-      orderById: "32c99b86-c390-45d2-b1aa-7af5ba2de788",
-      orderByOrganization: "สำนักงานเขตพระนคร",
-      orderDate: "2024-08-23T03:09:00",
-      orderId: "08dcc321-17f7-43a8-80ef-40f7822a6e46",
-      orderName: "คำสั่งแต่งตั้ง",
-      orderNo: "23",
-      orderStatusName: "ออกคำสั่งแล้ว",
-      orderStatusValue: "e0d7c384-642d-4a01-a2e9-b06180ab466d",
-      orderTypeName: "คำสั่งแต่งตั้ง",
-      orderTypeValue: "3b3c8fcf-7940-4963-ab48-b8e803ed534d",
-      refRaw: null,
-      result: null,
-      signatoryBy: "นายวิษณุ สุวรรณรัตน์",
-      signatoryDate: "2024-08-23T03:09:00",
-      signatoryPosition: "ผู้อำนวยการ",
-    },
-  ];
-  console.log("mounted");
+const queryParams = reactive<FormQuery>({
+  page: 1,
+  pageSize: 10,
+  year: new Date().getFullYear(),
+  keyword: "",
 });
+
+async function fetchListCommand() {
+  showLoader();
+  await http
+    .get(config.API.commandList, {
+      params: { ...queryParams, status: store.tabsMain },
+    })
+    .then(async (res: ResListCommand) => {
+      const data = await res.data.result;
+      store.rows = data.data;
+      store.total = data.total;
+      store.maxPage = Math.ceil(data.total / queryParams.pageSize);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 </script>
 
 <template>
@@ -58,11 +64,12 @@ onMounted(() => {
     <q-toolbar class="q-pa-sm">
       <datepicker
         menu-class-name="modalfix"
-        v-model="yearly"
+        v-model="queryParams.year"
         :locale="'th'"
         autoApply
         year-picker
         :enableTimePicker="false"
+        @update:model-value="fetchListCommand"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -73,7 +80,9 @@ onMounted(() => {
             dense
             outlined
             hide-bottom-space
-            :model-value="yearly == null ? null : yearly + 543"
+            :model-value="
+              queryParams.year == null ? null : queryParams.year + 543
+            "
             :label="`${'ปีงบประมาณ'}`"
           >
             <template v-slot:prepend>
@@ -101,12 +110,12 @@ onMounted(() => {
       <q-input
         dense
         outlined
-        v-model="searchKeyword"
+        v-model="queryParams.keyword"
         label="ค้นหา"
         clearable
         style="width: 300px"
       >
-        <template v-slot:append v-if="!searchKeyword">
+        <template v-slot:append v-if="!queryParams.keyword">
           <q-icon name="search" /> </template
       ></q-input>
     </q-toolbar>
@@ -138,7 +147,11 @@ onMounted(() => {
           :key="index"
           :name="panel.name"
         >
-          <TableList />
+          <TableList
+            :fetch-list="fetchListCommand"
+            v-model:page="queryParams.page"
+            v-model:pageSize="queryParams.pageSize"
+          />
         </q-tab-panel>
       </q-tab-panels>
     </q-card-section>