From 15b33b147a1b6b94e69f821fa2c8cc11bcbdf3f9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 12 Sep 2024 17:11:00 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=20=3D=3D>=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/18_command/api.command.ts             |   8 +-
 .../components/Main/DialogFormCommand.vue     |  86 ++++++---
 .../18_command/components/Main/TableMain.vue  | 172 +++++++++++++++---
 .../18_command/components/Step/1_Detail.vue   | 166 +++++++++++++----
 .../components/Step/2_ListPersons.vue         |  10 +
 .../components/Step/3_ReceivedCopy.vue        |  10 +
 .../18_command/components/Step/4_Attached.vue |  12 +-
 .../18_command/interface/index/Main.ts        |   7 +-
 .../18_command/interface/request/Main.ts      |  25 ++-
 .../18_command/interface/response/Main.ts     |  23 ++-
 src/modules/18_command/store/DetailStore.ts   |   2 +
 src/modules/18_command/store/ListStore.ts     |  10 +-
 src/modules/18_command/views/detail.vue       |  87 +++++++--
 src/modules/18_command/views/lists.vue        |  95 +++++-----
 14 files changed, 568 insertions(+), 145 deletions(-)

diff --git a/src/api/18_command/api.command.ts b/src/api/18_command/api.command.ts
index 17756dfbf..c9e8621b6 100644
--- a/src/api/18_command/api.command.ts
+++ b/src/api/18_command/api.command.ts
@@ -1,7 +1,11 @@
 import env from "../index";
 
-const command = `${env.API_URI}/order`;
+const command = `${env.API_URI}/org/command`;
 
 export default {
-  commandType: `${command}/order-type`,
+  commandType: `${command}Type/list`, //ประเภทคำสั่ง
+  commandList: `${command}/list`, //list รายการ
+  command, //สร้างคำสั่ง
+  commandAction: (commandId: string, type: string) =>
+    `${command}/${type}/${commandId}`,
 };
diff --git a/src/modules/18_command/components/Main/DialogFormCommand.vue b/src/modules/18_command/components/Main/DialogFormCommand.vue
index 4be1731ec..c9f6c3f61 100644
--- a/src/modules/18_command/components/Main/DialogFormCommand.vue
+++ b/src/modules/18_command/components/Main/DialogFormCommand.vue
@@ -6,7 +6,8 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
+import type { FormCommand } from "@/modules/18_command/interface/request/Main";
+import type { DataCommandType } from "@/modules/18_command/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -14,18 +15,19 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const router = useRouter();
-const { dialogConfirm, showLoader, hideLoader, messageError } =
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const isCopy = defineModel<boolean>("isCopy", { required: true });
+const commandId = defineModel<string>("commandId", { default: "" });
 
 const commandType = ref<string>("");
 const commandNo = ref<string>("");
-const commandYear = ref<string>("");
+const commandYear = ref<number>(new Date().getFullYear());
 
-const listCommand = ref<DataListCommand[]>([]);
-const commandOp = ref<DataListCommand[]>([]);
+const listCommand = ref<DataCommandType[]>([]);
+const commandOp = ref<DataCommandType[]>([]);
 
 async function fetchCommandType() {
   showLoader();
@@ -46,10 +48,29 @@ async function fetchCommandType() {
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    !isCopy.value && router.push(`/command/edit/1234`);
-    console.log(commandNo.value);
-    console.log(commandYear.value);
-    onClose();
+    showLoader();
+    const body: FormCommand = {
+      commandYear: commandYear.value,
+      commandNo: commandNo.value,
+      commandTypeId: !isCopy.value ? commandType.value : undefined,
+    };
+    const path = !isCopy.value
+      ? config.API.command
+      : config.API.commandAction(commandId.value, "copy");
+
+    http[!isCopy.value ? "post" : "put"](path, body)
+      .then(async (res) => {
+        const id = await res.data.result;
+        router.push(`/command/edit/${id}`);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClose();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -72,7 +93,7 @@ function filterSelector(val: string, update: Function, refData: string) {
 function onClose() {
   modal.value = false;
   commandNo.value = "";
-  commandYear.value = "";
+  commandYear.value = new Date().getFullYear();
 }
 
 watch(modal, () => {
@@ -130,7 +151,6 @@ watch(modal, () => {
                 v-model="commandNo"
                 hide-bottom-space
                 :label="`${'คำสั่งเลขที่'}`"
-                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
                 lazy-rules
               />
             </div>
@@ -138,17 +158,41 @@ watch(modal, () => {
               >/</label
             >
             <div class="col-5">
-              <q-input
-                class="inputgreen"
-                outlined
-                dense
+              <datepicker
+                menu-class-name="modalfix"
                 v-model="commandYear"
-                hide-bottom-space
-                :label="`${'พ.ศ.'}`"
-                mask="####"
-                :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                lazy-rules
-              />
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                class="inputgreen"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    :model-value="
+                      commandYear == null ? null : commandYear + 543
+                    "
+                    :label="`${'พ.ศ.'}`"
+                    :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
             </div>
           </div>
         </q-card-section>
diff --git a/src/modules/18_command/components/Main/TableMain.vue b/src/modules/18_command/components/Main/TableMain.vue
index 8e60111e7..9cefdca9b 100644
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@@ -1,81 +1,113 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 
-import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
-
 import type { QTableProps } from "quasar";
+import type { Pagination } from "@/modules/18_command/interface/index/Main";
+
+import DialogFormCommand from "@/modules/18_command/components/Main/DialogFormCommand.vue";
 
 const $q = useQuasar();
 const router = useRouter();
 
 const store = useCommandListStore();
-const { date2Thai, dialogRemove, dialogConfirm } = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  date2Thai,
+  dialogRemove,
+  dialogConfirm,
+} = useCounterMixin();
+
+const page = defineModel<number>("page", { required: true });
+const pageSize = defineModel<number>("pageSize", { required: true });
+
+const props = defineProps({
+  fetchList: { type: Function, required: true },
+});
 
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "orderNo",
+    name: "commandNo",
     align: "left",
     label: "เลขที่คำสั่ง",
     sortable: false,
-    field: "orderNo",
+    field: "commandNo",
+    format(val, row) {
+      return val ? `${val} / ${row.commandYear + 543}` : "-";
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "orderName",
-    align: "center",
+    name: "issue",
+    align: "left",
     label: "ชื่อคำสั่ง",
     sortable: true,
-    field: "orderName",
+    field: "issue",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "signatoryDate",
-    align: "center",
+    name: "commandExcecuteDate",
+    align: "left",
     label: "วันที่ลงนาม",
     sortable: false,
-    field: (v) => date2Thai(v),
+    field: "commandExcecuteDate",
+    format(val) {
+      return val ? date2Thai(val) : "-";
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "orderDate",
-    align: "center",
+    name: "commandAffectDate",
+    align: "left",
     label: "วันที่คำสั่งมีผล",
     sortable: false,
-    field: (v) => date2Thai(v),
+    field: "commandAffectDate",
+    format(val) {
+      return val ? date2Thai(val) : "-";
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "orderBy",
-    align: "center",
+    name: "createdFullName",
+    align: "left",
     label: "ผู้สร้าง",
     sortable: false,
-    field: "orderBy",
+    field: "createdFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "signatoryBy",
-    align: "center",
+    name: "assignFullName",
+    align: "left",
     label: "ผู้ลงนาม",
     sortable: false,
-    field: "signatoryBy",
+    field: "assignFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
 const modalCopy = ref<boolean>(false);
+const isCheckPageSize = ref<boolean>(false);
 const commandId = ref<string>("");
 
+async function fetchListCommand() {
+  await props.fetchList?.();
+}
+
 function onRedirectToDetail(type: string, id: string) {
   router.push(`/command/${type}/${id}`);
 }
@@ -88,7 +120,21 @@ function onCopy(id: string) {
 function onCancel(id: string) {
   dialogRemove(
     $q,
-    () => {},
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.commandAction(id, "cancel"))
+        .then(async () => {
+          await fetchListCommand();
+          success($q, "ยกเลิกรายการสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
     "ยืนยันการยกเลิกการออกคำสั่ง",
     "ต้องการยืนยันการยกเลิกการออกคำสั่งนี้ใช่หรือไม่ ?"
   );
@@ -102,6 +148,46 @@ function onReCommand(id: string) {
     "ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
   );
 }
+function onDeleteCommand(id: string) {
+  dialogRemove(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .delete(config.API.command + `/${id}`)
+        .then(async () => {
+          await fetchListCommand();
+          success($q, "ลบรายการสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการลบคำสั่ง",
+    "ต้องการยืนยืนยันการลบคำสั่งนี้ใช่หรือไม่ ?"
+  );
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: Pagination) {
+  page.value = 1;
+  pageSize.value = newPagination.rowsPerPage;
+}
+
+watch(pageSize, () => {
+  isCheckPageSize.value = true;
+  fetchListCommand();
+});
+
+onMounted(() => {
+  !isCheckPageSize.value && fetchListCommand();
+});
 </script>
 
 <template>
@@ -114,6 +200,8 @@ function onReCommand(id: string) {
     dense
     bordered
     :paging="true"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -139,7 +227,7 @@ function onReCommand(id: string) {
                 <q-item
                   clickable
                   v-close-popup
-                  v-if="store.tabsMain !== 'list_cancel'"
+                  v-if="store.tabsMain !== 'CANCEL'"
                   @click.pervent="onRedirectToDetail('edit', props.row.id)"
                 >
                   <q-item-section>
@@ -196,7 +284,7 @@ function onReCommand(id: string) {
                 <q-item
                   clickable
                   v-close-popup
-                  v-if="store.tabsMain !== 'list_cancel'"
+                  v-if="store.tabsMain !== 'CANCEL'"
                   @click.pervent="onCancel(props.row.id)"
                 >
                   <q-item-section>
@@ -216,7 +304,7 @@ function onReCommand(id: string) {
                 <q-item
                   clickable
                   v-close-popup
-                  v-if="store.tabsMain === 'list_cancel'"
+                  v-if="store.tabsMain === 'CANCEL'"
                   @click.pervent="onReCommand(props.row.id)"
                 >
                   <q-item-section>
@@ -226,6 +314,20 @@ function onReCommand(id: string) {
                     </div>
                   </q-item-section>
                 </q-item>
+
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-if="store.tabsMain === 'CANCEL'"
+                  @click.pervent="onDeleteCommand(props.row.id)"
+                >
+                  <q-item-section>
+                    <div class="row items-center">
+                      <q-icon color="red" size="xs" name="mdi-delete" />
+                      <div class="q-pl-md">ลบคำสั่ง</div>
+                    </div>
+                  </q-item-section>
+                </q-item>
               </q-list>
             </q-menu>
           </q-btn>
@@ -237,9 +339,27 @@ function onReCommand(id: string) {
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ store.total }} รายการ
+      <q-pagination
+        v-model="page"
+        active-color="primary"
+        color="dark"
+        :max="Number(store.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+        :max-pages="5"
+        @update:model-value="fetchListCommand"
+      ></q-pagination>
+    </template>
   </d-table>
 
-  <DialogFormCommand v-model:modal="modalCopy" :is-copy="true" />
+  <DialogFormCommand
+    v-model:modal="modalCopy"
+    :is-copy="true"
+    :command-id="commandId"
+  />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index 60f1a833f..7cc394c5f 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -1,27 +1,101 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
+import { useQuasar } from "quasar";
 
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 
+import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
+
 import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.vue";
 
+const $q = useQuasar();
+const route = useRoute();
 const store = useCommandDetail();
+const { showLoader, hideLoader, success, messageError } = useCounterMixin();
 
-const formData = reactive({
-  commandNo: "",
-  commandYear: "",
-  commandName: "",
-  commandHeader: "",
-  commandCenter: "",
-  commandFooter: "",
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
+const props = defineProps({
+  onCheckChangeData: { type: Function, required: true },
 });
 
+const commandId = ref<string>(route.params.id.toString());
+const formData = reactive<FormDataDetail>({
+  commandNo: "",
+  commandYear: null,
+  // commandName: "",
+  detailHeader: "",
+  detailBody: "",
+  detailFooter: "",
+  issue: null,
+});
 const modalPreview = ref<boolean>(false);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab1"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      formData.commandNo = data.commandNo;
+      formData.commandYear = data.commandYear;
+      formData.detailHeader = data.detailHeader;
+      formData.detailBody = data.detailBody;
+      formData.detailFooter = data.detailFooter;
+      formData.issue = data.issue;
+      isChangeData.value = false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function onSubmit() {
+  showLoader();
+  await http
+    .put(config.API.commandAction(commandId.value, "tab1"), formData)
+    .then(async () => {
+      // await fetchData();
+      // success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fetchData();
+});
+
+/**
+ * เรียก function ไปใช่หน้าหลัก
+ */
+defineExpose({
+  onSubmit,
+});
 </script>
 
 <template>
   <q-card-section>
     <div class="row q-col-gutter-sm">
+      <div class="col-12 row justify-end">
+        <q-btn
+          label="แสดงตัวอย่าง"
+          color="info"
+          icon="mdi-eye"
+          @click.prevent="modalPreview = true"
+        />
+      </div>
+
       <!-- คำสั่งเลขที่ -->
       <div class="col-4 row">
         <div class="col-6">
@@ -33,22 +107,53 @@ const modalPreview = ref<boolean>(false);
             v-model="formData.commandNo"
             hide-bottom-space
             :label="`${'คำสั่งเลขที่'}`"
+            @update:model-value="props.onCheckChangeData()"
           />
         </div>
         <label class="col-1 flex justify-center items-center text-bold">
           /
         </label>
         <div class="col-5">
-          <q-input
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formData.commandYear"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
-            outlined
-            dense
-            v-model="formData.commandYear"
-            hide-bottom-space
-            :label="`${'พ.ศ.'}`"
-            mask="####"
-          />
+            @update:model-value="props.onCheckChangeData()"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                outlined
+                hide-bottom-space
+                :class="store.classInput(!store.readonly)"
+                :readonly="store.readonly"
+                :model-value="
+                  formData.commandYear == null
+                    ? null
+                    : formData.commandYear + 543
+                "
+                :label="`${'พ.ศ.'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
         </div>
       </div>
 
@@ -59,9 +164,10 @@ const modalPreview = ref<boolean>(false);
           :readonly="store.readonly"
           outlined
           dense
-          v-model="formData.commandName"
+          v-model="formData.issue"
           hide-bottom-space
           :label="`${'คำสั่งเรื่อง'}`"
+          @update:model-value="props.onCheckChangeData()"
         />
       </div>
 
@@ -76,15 +182,16 @@ const modalPreview = ref<boolean>(false);
             <q-field
               class="q_field_p_none"
               ref="fieldRef"
-              v-model="formData.commandHeader"
+              v-model="formData.detailHeader"
               borderless
               hide-bottom-space
             >
               <template #control>
                 <q-editor
+                  @update:model-value="props.onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
-                  v-model="formData.commandHeader"
+                  v-model="formData.detailHeader"
                   min-height="5rem"
                   :toolbar="[
                     ['left', 'center', 'right', 'justify'],
@@ -116,15 +223,16 @@ const modalPreview = ref<boolean>(false);
             <q-field
               class="q_field_p_none"
               ref="fieldRef"
-              v-model="formData.commandCenter"
+              v-model="formData.detailBody"
               borderless
               hide-bottom-space
             >
               <template #control>
                 <q-editor
+                  @update:model-value="props.onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
-                  v-model="formData.commandCenter"
+                  v-model="formData.detailBody"
                   min-height="5rem"
                   :toolbar="[
                     ['left', 'center', 'right', 'justify'],
@@ -156,15 +264,16 @@ const modalPreview = ref<boolean>(false);
             <q-field
               class="q_field_p_none"
               ref="fieldRef"
-              v-model="formData.commandFooter"
+              v-model="formData.detailFooter"
               borderless
               hide-bottom-space
             >
               <template #control>
                 <q-editor
+                  @update:model-value="props.onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
-                  v-model="formData.commandFooter"
+                  v-model="formData.detailFooter"
                   min-height="5rem"
                   :toolbar="[
                     ['left', 'center', 'right', 'justify'],
@@ -184,22 +293,13 @@ const modalPreview = ref<boolean>(false);
           </q-card-section>
         </q-card>
       </div>
-
-      <div class="col-12 row justify-end">
-        <q-btn
-          label="แสดงตัวอย่าง"
-          color="info"
-          icon="mdi-eye"
-          @click.prevent="modalPreview = true"
-        />
-      </div>
     </div>
   </q-card-section>
 
   <q-separator />
 
   <q-card-actions align="right" v-if="!store.readonly">
-    <q-btn label="บันทึก" color="public" />
+    <q-btn label="บันทึก" color="public" @click="onSubmit" />
   </q-card-actions>
 
   <DialogPerview v-model:modal="modalPreview" />
diff --git a/src/modules/18_command/components/Step/2_ListPersons.vue b/src/modules/18_command/components/Step/2_ListPersons.vue
index 4b60f68bd..0b11e1fb2 100644
--- a/src/modules/18_command/components/Step/2_ListPersons.vue
+++ b/src/modules/18_command/components/Step/2_ListPersons.vue
@@ -24,6 +24,11 @@ const {
   success,
 } = useCounterMixin();
 
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
+const props = defineProps({
+  onCheckChangeData: { type: Function, required: true },
+});
+
 const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
 const templatePos = ref<string>("");
 const position = ref<string>("");
@@ -116,6 +121,11 @@ function filterSelector(val: string, update: Function, filtername: string) {
       break;
   }
 }
+
+function onSubmit() {}
+defineExpose({
+  onSubmit,
+});
 </script>
 
 <template>
diff --git a/src/modules/18_command/components/Step/3_ReceivedCopy.vue b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
index de28212fe..42a7b80d9 100644
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@@ -21,6 +21,11 @@ const {
   success,
 } = useCounterMixin();
 
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
+const props = defineProps({
+  onCheckChangeData: { type: Function, required: true },
+});
+
 const filter = ref<string>("");
 const rows = ref<any[]>([
   {
@@ -109,6 +114,11 @@ function onDelete(id: string) {
 }
 
 function onSubmitPerson() {}
+
+function onSubmit() {}
+defineExpose({
+  onSubmit,
+});
 </script>
 
 <template>
diff --git a/src/modules/18_command/components/Step/4_Attached.vue b/src/modules/18_command/components/Step/4_Attached.vue
index 53e1a4e2d..faf0acf5a 100644
--- a/src/modules/18_command/components/Step/4_Attached.vue
+++ b/src/modules/18_command/components/Step/4_Attached.vue
@@ -1,4 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
+const props = defineProps({
+  onCheckChangeData: { type: Function, required: true },
+});
+
+function onSubmit() {}
+defineExpose({
+  onSubmit,
+});
+</script>
 
 <template>
   <div>คำสั่งและบัญชีแนบท้าย</div>
diff --git a/src/modules/18_command/interface/index/Main.ts b/src/modules/18_command/interface/index/Main.ts
index 7a77d8c18..32b4e7361 100644
--- a/src/modules/18_command/interface/index/Main.ts
+++ b/src/modules/18_command/interface/index/Main.ts
@@ -7,4 +7,9 @@ interface DataOption {
   name: string;
 }
 
-export type { Pagination, DataOption };
+interface ItemTabs {
+  label: string;
+  name: string;
+}
+
+export type { Pagination, DataOption, ItemTabs };
diff --git a/src/modules/18_command/interface/request/Main.ts b/src/modules/18_command/interface/request/Main.ts
index e4ea7770c..647d2a5d5 100644
--- a/src/modules/18_command/interface/request/Main.ts
+++ b/src/modules/18_command/interface/request/Main.ts
@@ -1 +1,24 @@
-export type {};
+interface FormQuery {
+  page: number;
+  pageSize: number;
+  year: number;
+  keyword: string;
+}
+
+interface FormCommand {
+  commandYear: number;
+  commandNo: string;
+  commandTypeId?: string;
+}
+
+interface FormDataDetail {
+  commandNo: string;
+  commandYear: number | null;
+  // commandName: string;
+  detailHeader: string;
+  detailBody: string;
+  detailFooter: string;
+  issue: string | null;
+}
+
+export type { FormQuery, FormCommand, FormDataDetail };
diff --git a/src/modules/18_command/interface/response/Main.ts b/src/modules/18_command/interface/response/Main.ts
index bfae59100..2e2a4b5a7 100644
--- a/src/modules/18_command/interface/response/Main.ts
+++ b/src/modules/18_command/interface/response/Main.ts
@@ -1,4 +1,25 @@
+interface ResListCommand {
+  data: {
+    result: {
+      data: DataListCommand[];
+      total: number;
+    };
+  };
+}
+
 interface DataListCommand {
+  assignFullName: string;
+  commandAffectDate: null | Date | string;
+  commandExcecuteDate: null | Date | string;
+  commandNo: string;
+  commandYear: number;
+  createdFullName: string;
+  id: string;
+  status: string;
+  issue?: string;
+}
+
+interface DataCommandType {
   category: string;
   commandCode: string;
   createdAt: string | Date;
@@ -11,4 +32,4 @@ interface DataListCommand {
   name: string;
 }
 
-export type { DataListCommand };
+export type { ResListCommand, DataListCommand, DataCommandType };
diff --git a/src/modules/18_command/store/DetailStore.ts b/src/modules/18_command/store/DetailStore.ts
index dbf1f0f58..9de22776a 100644
--- a/src/modules/18_command/store/DetailStore.ts
+++ b/src/modules/18_command/store/DetailStore.ts
@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 
 export const useCommandDetail = defineStore("commandDetailStore", () => {
   const readonly = ref<boolean>(false);
+  const isChangeData = ref<boolean>(false);
 
   const classInput = (val: boolean) => {
     return {
@@ -14,5 +15,6 @@ export const useCommandDetail = defineStore("commandDetailStore", () => {
   return {
     classInput,
     readonly,
+   
   };
 });
diff --git a/src/modules/18_command/store/ListStore.ts b/src/modules/18_command/store/ListStore.ts
index 06d0c97ad..ec0b4554a 100644
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@@ -1,12 +1,18 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
+import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
+
 export const useCommandListStore = defineStore("commandListStore", () => {
-  const tabsMain = ref<string>("list_draft");
-  const rows = ref<any[]>([]);
+  const tabsMain = ref<string>("DRAFT");
+  const rows = ref<DataListCommand[]>([]);
+  const total = ref<number>(0);
+  const maxPage = ref<number>(0);
 
   return {
     tabsMain,
     rows,
+    total,
+    maxPage,
   };
 });
diff --git a/src/modules/18_command/views/detail.vue b/src/modules/18_command/views/detail.vue
index 154b3672a..ff3c09d20 100644
--- a/src/modules/18_command/views/detail.vue
+++ b/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>
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index ec380fb77..f5451d305 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/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>