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

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>