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

---
 .../Dialogs/DialogOrgSelectOneStep.vue        |   5 +-
 .../18_command/components/Main/TableMain.vue  |  16 +-
 .../18_command/components/Step/1_Detail.vue   |  45 +-
 .../components/Step/2_ListPersons.vue         |   8 +-
 .../components/Step/3_ReceivedCopy.vue        | 399 +++++++++++-------
 .../18_command/components/Step/4_Attached.vue |   6 +-
 .../18_command/interface/index/Main.ts        |  39 +-
 src/modules/18_command/views/detail.vue       |  61 ++-
 src/modules/18_command/views/lists.vue        |  17 +-
 9 files changed, 388 insertions(+), 208 deletions(-)

diff --git a/src/components/Dialogs/DialogOrgSelectOneStep.vue b/src/components/Dialogs/DialogOrgSelectOneStep.vue
index 6fbf932c1..a56878ab3 100644
--- a/src/components/Dialogs/DialogOrgSelectOneStep.vue
+++ b/src/components/Dialogs/DialogOrgSelectOneStep.vue
@@ -221,7 +221,7 @@ function updateSelected(data: DataTree) {
   seletcId.value = "";
   selectedPos.value = [];
   datePos.value = new Date();
-
+  selectedModal.value = []
   nodeId.value = data.orgTreeId ? data.orgTreeId : "";
   nodeLevel.value = data.orgLevel;
   getDataTable(data.orgTreeId, data.orgLevel);
@@ -367,7 +367,7 @@ watch(
   }
 );
 function onSubmit() {
-  if (nodeId.value == "") {
+  if (selectedModal.value?.length  == 0) {
     dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
   } else {
     dialogConfirm($q, async () => {
@@ -567,6 +567,7 @@ function resetFilter() {
     </q-card>
   </q-dialog>
 </template>
+
 <style scoped>
 .my-list-link {
   color: rgb(118, 168, 222);
diff --git a/src/modules/18_command/components/Main/TableMain.vue b/src/modules/18_command/components/Main/TableMain.vue
index 9cefdca9b..244614ccf 100644
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@@ -143,7 +143,21 @@ function onCancel(id: string) {
 function onReCommand(id: string) {
   dialogConfirm(
     $q,
-    () => {},
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.commandAction(id, "resume"))
+        .then(async () => {
+          await fetchListCommand();
+          success($q, "ดึงไปทำคำสั่งใหม่สำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
     "ยืนยันการดึงไปทำคำสั่งใหม่",
     "ต้องการยืนยืนยันการดึงไปทำคำสั่งใหม่ใช่หรือไม่ ?"
   );
diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index 7cc394c5f..e0f20c207 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -15,14 +15,18 @@ import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.
 const $q = useQuasar();
 const route = useRoute();
 const store = useCommandDetail();
-const { showLoader, hideLoader, success, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+/**
+ * props
+ */
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
-const commandId = ref<string>(route.params.id.toString());
+const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
+// ฟอร์มข้อมูล
 const formData = reactive<FormDataDetail>({
   commandNo: "",
   commandYear: null,
@@ -32,8 +36,13 @@ const formData = reactive<FormDataDetail>({
   detailFooter: "",
   issue: null,
 });
-const modalPreview = ref<boolean>(false);
+const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
+ *
+ * กำหนดข้อมูลที่ได้รับมาให้กับตัวแปร `formData`
+ */
 async function fetchData() {
   showLoader();
   await http
@@ -56,28 +65,34 @@ async function fetchData() {
     });
 }
 
+/**
+ * ฟังก์ชันบันทึกข้อมูลรายละเอียดคำสั่ง
+ *
+ * และกำหนด isChangeData เป็น false
+ */
 async function onSubmit() {
   showLoader();
   await http
     .put(config.API.commandAction(commandId.value, "tab1"), formData)
-    .then(async () => {
-      // await fetchData();
-      // success($q, "บันทึกข้อมูลสำเร็จ");
-    })
+    .then(() => {})
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData();
 });
 
 /**
- * เรียก function ไปใช่หน้าหลัก
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
  */
 defineExpose({
   onSubmit,
@@ -107,7 +122,7 @@ defineExpose({
             v-model="formData.commandNo"
             hide-bottom-space
             :label="`${'คำสั่งเลขที่'}`"
-            @update:model-value="props.onCheckChangeData()"
+            @update:model-value="onCheckChangeData()"
           />
         </div>
         <label class="col-1 flex justify-center items-center text-bold">
@@ -123,7 +138,7 @@ defineExpose({
             :enableTimePicker="false"
             :class="store.classInput(!store.readonly)"
             :readonly="store.readonly"
-            @update:model-value="props.onCheckChangeData()"
+            @update:model-value="onCheckChangeData()"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -167,7 +182,7 @@ defineExpose({
           v-model="formData.issue"
           hide-bottom-space
           :label="`${'คำสั่งเรื่อง'}`"
-          @update:model-value="props.onCheckChangeData()"
+          @update:model-value="onCheckChangeData()"
         />
       </div>
 
@@ -188,7 +203,7 @@ defineExpose({
             >
               <template #control>
                 <q-editor
-                  @update:model-value="props.onCheckChangeData()"
+                  @update:model-value="onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
                   v-model="formData.detailHeader"
@@ -229,7 +244,7 @@ defineExpose({
             >
               <template #control>
                 <q-editor
-                  @update:model-value="props.onCheckChangeData()"
+                  @update:model-value="onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
                   v-model="formData.detailBody"
@@ -270,7 +285,7 @@ defineExpose({
             >
               <template #control>
                 <q-editor
-                  @update:model-value="props.onCheckChangeData()"
+                  @update:model-value="onCheckChangeData()"
                   :readonly="store.readonly"
                   class="full-width"
                   v-model="formData.detailFooter"
diff --git a/src/modules/18_command/components/Step/2_ListPersons.vue b/src/modules/18_command/components/Step/2_ListPersons.vue
index 0b11e1fb2..17eb69934 100644
--- a/src/modules/18_command/components/Step/2_ListPersons.vue
+++ b/src/modules/18_command/components/Step/2_ListPersons.vue
@@ -24,8 +24,8 @@ const {
   success,
 } = useCounterMixin();
 
-const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const isChangeData = defineModel<boolean>("isChangeData", { required: true }); //การเปลี่ยนแปลงของข้อมูล
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
@@ -123,6 +123,10 @@ function filterSelector(val: string, update: Function, filtername: string) {
 }
 
 function onSubmit() {}
+
+/**
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ */
 defineExpose({
   onSubmit,
 });
diff --git a/src/modules/18_command/components/Step/3_ReceivedCopy.vue b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
index 42a7b80d9..1e37d633d 100644
--- a/src/modules/18_command/components/Step/3_ReceivedCopy.vue
+++ b/src/modules/18_command/components/Step/3_ReceivedCopy.vue
@@ -2,14 +2,22 @@
 import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { DataOption } from "@/modules/18_command/interface/index/Main";
+import type {
+  DataOption,
+  DataPerson,
+  DateSelectPerson,
+} from "@/modules/18_command/interface/index/Main";
 
 import DialogOrgSelectOneStep from "@/components/Dialogs/DialogOrgSelectOneStep.vue";
 
 const $q = useQuasar();
+const route = useRoute();
 const store = useCommandDetail();
 const {
   dialogMessageNotify,
@@ -22,20 +30,12 @@ const {
 } = useCounterMixin();
 
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
 const filter = ref<string>("");
-const rows = ref<any[]>([
-  {
-    idCard: "1",
-    name: "2",
-    position: "3",
-    unit: "4",
-    send: "5",
-  },
-]);
+const rows = ref<DataPerson[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -47,19 +47,19 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "idCard",
+    name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    field: "idCard",
+    field: "citizenId",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    field: "name",
+    field: "fullName",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -74,10 +74,10 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "unit",
+    name: "org",
     align: "left",
     label: "หน่วยงาน",
-    field: "unit",
+    field: "org",
     sortable: true,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -94,169 +94,254 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<String[]>([
   "no",
-  "idCard",
-  "name",
+  "citizenId",
+  "fullName",
   "position",
-  "unit",
+  "org",
   "send",
 ]);
 
 const optionSelect = ref<DataOption[]>([
-  { id: 1, name: "อีเมล" },
-  { id: 2, name: "กล่องข้อความ" },
+  { id: "EMAIL", name: "อีเมล" },
+  { id: "INBOX", name: "กล่องข้อความ" },
 ]);
 
-const modal = ref<boolean>(false);
-const selectedModal = ref<any[]>([]);
+const commandId = ref<string>(route.params.id.toString());
 
-function onDelete(id: string) {
-  dialogRemove($q, () => {});
+const modal = ref<boolean>(false);
+const selectedModal = ref<DateSelectPerson[]>([]);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab3"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data.map((e: DataPerson) => ({
+        ...e,
+        fullName: `${e.prefix}${e.fristName}  ${e.lastName}`,
+      }));
+
+      isChangeData.value = false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
-function onSubmitPerson() {}
+function onDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.commandAction(id, "tab3"))
+      .then(async () => {
+        await fetchData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
 
-function onSubmit() {}
+async function onSubmitPerson() {
+  const body = selectedModal.value.map((e: DateSelectPerson) => e.profileId);
+  showLoader();
+  await http
+    .put(config.API.commandAction(commandId.value, "tab3-add"), {
+      profileId: body,
+    })
+    .then(async () => {
+      await fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onSubmit() {
+  const body = rows.value.map((e: DataPerson) => ({
+    sendCC: e.sendCC,
+    id: e.id,
+  }));
+
+  showLoader();
+  http
+    .put(config.API.commandAction(commandId.value, "tab3"), {
+      commandSend: body,
+    })
+    .then(async () => {
+      // await fetchData();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+      isChangeData.value = false;
+    });
+}
+
+onMounted(() => {
+  fetchData();
+});
+
+/**
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ */
 defineExpose({
   onSubmit,
 });
 </script>
 
 <template>
-  <q-card-section>
-    <div class="row q-col-gutter-sm">
-      <div class="col-12 row items-center">
-        <q-btn
-          v-if="!store.readonly"
-          flat
-          round
-          color="primary"
-          @click="modal = true"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <q-space />
-        <div class="items-center" style="display: flex">
-          <!-- ค้นหาข้อความใน table -->
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            debounce="300"
-            placeholder="ค้นหา"
-            style="max-width: 200px"
-            class="q-ml-sm"
+  <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <q-card-section>
+      <div class="row q-col-gutter-sm">
+        <div class="col-12 row items-center">
+          <q-btn
+            v-if="!store.readonly"
+            flat
+            round
+            color="primary"
+            @click="modal = true"
+            icon="mdi-plus"
           >
-            <template v-slot:append>
-              <q-icon v-if="filter == ''" name="search" />
-              <q-icon
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+          <q-space />
+          <div class="items-center" style="display: flex">
+            <!-- ค้นหาข้อความใน table -->
+            <q-input
+              standout
+              dense
+              v-model="filter"
+              ref="filterRef"
+              outlined
+              debounce="300"
+              placeholder="ค้นหา"
+              style="max-width: 200px"
+              class="q-ml-sm"
+            >
+              <template v-slot:append>
+                <q-icon v-if="filter == ''" name="search" />
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filter = ''"
+                />
+              </template>
+            </q-input>
+            <!-- แสดงคอลัมน์ใน table -->
+            <q-select
+              v-model="visibleColumns"
+              :display-value="$q.lang.table.columns"
+              multiple
+              outlined
+              dense
+              :options="columns"
+              options-dense
+              option-value="name"
+              map-options
+              emit-value
+              style="min-width: 150px"
+              class="gt-xs q-ml-sm"
+            />
+          </div>
+        </div>
+
+        <div class="col-12">
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="id"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
             </template>
-          </q-input>
-          <!-- แสดงคอลัมน์ใน table -->
-          <q-select
-            v-model="visibleColumns"
-            :display-value="$q.lang.table.columns"
-            multiple
-            outlined
-            dense
-            :options="columns"
-            options-dense
-            option-value="name"
-            map-options
-            emit-value
-            style="min-width: 150px"
-            class="gt-xs q-ml-sm"
-          />
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    v-if="!store.readonly"
+                    dense
+                    flat
+                    round
+                    color="red"
+                    @click="onDelete(props.row.id)"
+                    icon="mdi-delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <div v-if="col.name === 'send'">
+                    <q-select
+                      :readonly="store.readonly"
+                      :class="store.classInput(!store.readonly)"
+                      hide-bottom-space
+                      multiple
+                      :outlined="true"
+                      dense
+                      v-model="props.row.sendCC"
+                      :rules="[
+                        (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                        (val) =>
+                          val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
+                      ]"
+                      :label="`${'เลือกช่องทางการส่งสำเนา'}`"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="optionSelect"
+                      option-value="id"
+                      input-debounce="0"
+                      color="primary"
+                      @update:model-value="onCheckChangeData()"
+                    >
+                      <template v-slot:no-option>
+                        <q-item>
+                          <q-item-section class="text-black">
+                            ไม่พบข้อมูลที่ค้นหา
+                          </q-item-section>
+                        </q-item>
+                      </template>
+                    </q-select>
+                  </div>
+                  <div v-else class="table_ellipsis2">
+                    {{ col.value ?? "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
         </div>
       </div>
+    </q-card-section>
 
-      <div class="col-12">
-        <d-table
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :filter="filter"
-          row-key="idCard"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th auto-width />
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td auto-width>
-                <q-btn
-                  v-if="!store.readonly"
-                  dense
-                  flat
-                  round
-                  color="red"
-                  @click="onDelete(props.row.personalId)"
-                  icon="mdi-delete"
-                >
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div v-if="col.name === 'send'">
-                  <q-select
-                    :readonly="store.readonly"
-                    :class="store.classInput(!store.readonly)"
-                    hide-bottom-space
-                    multiple
-                    :outlined="true"
-                    dense
-                    v-model="props.row.mutiselect"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
-                      (val) =>
-                        val.length > 0 || `${'กรุณาเลือกช่องทางการส่งสำเนา'}`,
-                    ]"
-                    :label="`${'เลือกช่องทางการส่งสำเนา'}`"
-                    emit-value
-                    map-options
-                    option-label="name"
-                    :options="optionSelect"
-                    option-value="id"
-                    input-debounce="0"
-                    color="primary"
-                  >
-                    <template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-black">
-                          ไม่พบข้อมูลที่ค้นหา
-                        </q-item-section>
-                      </q-item>
-                    </template>
-                  </q-select>
-                </div>
-                <div v-else>
-                  {{ col.value ?? "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </div>
-    </div>
-  </q-card-section>
+    <q-separator />
 
-  <q-separator />
-
-  <q-card-actions align="right" v-if="!store.readonly">
-    <q-btn label="บันทึก" color="public" />
-  </q-card-actions>
+    <q-card-actions align="right" v-if="!store.readonly">
+      <q-btn label="บันทึก" type="submit" color="public" />
+    </q-card-actions>
+  </q-form>
 
   <DialogOrgSelectOneStep
     v-model:modal="modal"
diff --git a/src/modules/18_command/components/Step/4_Attached.vue b/src/modules/18_command/components/Step/4_Attached.vue
index faf0acf5a..9eb0bbb65 100644
--- a/src/modules/18_command/components/Step/4_Attached.vue
+++ b/src/modules/18_command/components/Step/4_Attached.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const props = defineProps({
+const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
 function onSubmit() {}
+
+/**
+ * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
+ */
 defineExpose({
   onSubmit,
 });
diff --git a/src/modules/18_command/interface/index/Main.ts b/src/modules/18_command/interface/index/Main.ts
index 32b4e7361..f61ac091a 100644
--- a/src/modules/18_command/interface/index/Main.ts
+++ b/src/modules/18_command/interface/index/Main.ts
@@ -12,4 +12,41 @@ interface ItemTabs {
   name: string;
 }
 
-export type { Pagination, DataOption, ItemTabs };
+interface DataPerson {
+  fullName?: string;
+  citizenId: string;
+  fristName: string;
+  id: string;
+  lastName: string;
+  org: string;
+  position: string;
+  prefix: string;
+  profileId: string;
+  sendCC: string[];
+}
+
+interface DateSelectPerson {
+  citizenId: string;
+  firstName: string;
+  id: string;
+  isSit: boolean;
+  lastName: string;
+  name: string;
+  node: number;
+  nodeId: string;
+  orgChild1Id: string;
+  orgChild2Id: string;
+  orgChild3Id: string;
+  orgChild4Id: string;
+  orgRootId: string;
+  orgShortname: string;
+  organizationName: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+  position: string;
+  prefix: string;
+  profileId: string;
+}
+
+export type { Pagination, DataOption, ItemTabs, DataPerson, DateSelectPerson };
diff --git a/src/modules/18_command/views/detail.vue b/src/modules/18_command/views/detail.vue
index ff3c09d20..1ceab02ec 100644
--- a/src/modules/18_command/views/detail.vue
+++ b/src/modules/18_command/views/detail.vue
@@ -4,27 +4,29 @@ import { onMounted, ref, watch } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 
+import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
+
 import Detail from "@/modules/18_command/components/Step/1_Detail.vue"; //รายละเอียดคำสั่ง
 import ListPersons from "@/modules/18_command/components/Step/2_ListPersons.vue"; //รายชื่อผู้ออกคำสั่ง
-import ReceivedCopy from "@/modules/18_command/components/Step/3_ReceivedCopy.vue"; //รายชื่อผู้ออกคำสั่ง
+import ReceivedCopy from "@/modules/18_command/components/Step/3_ReceivedCopy.vue"; //รายชื่อผู้ได้รับสำเนาคำสั่ง
 import Attached from "@/modules/18_command/components/Step/4_Attached.vue"; //คำสั่งและบัญชีแนบท้าบ
 
 const router = useRouter();
 const route = useRoute();
 const store = useCommandDetail();
 
-const childDetailRef = ref<InstanceType<typeof Detail> | null>(null);
-const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null);
+const childDetailRef = ref<InstanceType<typeof Detail> | null>(null); //ref components รายละเอียดคำสั่ง
+const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null); //ref components รายชื่อผู้ออกคำสั่ง
 const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
   null
-);
-const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null);
+); //ref components รายชื่อผู้ได้รับสำเนาคำสั่ง
+const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null); //ref components คำสั่งและบัญชีแนบท้าบ
 
-const readonly = ref<boolean>(route.name === "commandViewDetailPage");
-const isChangeData = ref<boolean>(false);
-
-const tabs = ref<string>("Detail");
-const tabsManu = ref([
+const tabs = ref<string>("Detail"); //Tab
+const readonly = ref<boolean>(route.name === "commandViewDetailPage"); //อ่านได้อย่างเดียว
+const isChangeData = ref<boolean>(false); //การเปลี่ยนแปลงของข้อมูล
+//รายการ Tab ละเอียดคำสั่ง
+const tabsManu = ref<ItemTabs[]>([
   { label: "รายละเอียดคำสั่ง", name: "Detail" },
   {
     label: "รายชื่อผู้ออกคำสั่ง",
@@ -38,25 +40,40 @@ const tabsManu = ref([
 ]);
 
 /**
- * function เช็คการแกไข้ข้อมูล
+ * ฟังก์ชันเช็คการเปลี่นรแปลงของข้อมูล
+ *
+ * ถ้ามีการเปลี่นยแปลง กำหนด  'isChangeData' เป็น true
  */
 function onCheckChangeData() {
   isChangeData.value = true;
 }
 
-onMounted(() => {
-  store.readonly = readonly.value;
+/**
+ * ดูการเปลี่ยนแปลงของ tabs เมื่อมีการเปลี่ยนแปลง
+ *
+ * เช็คการเปลี่ยนแปลงของข้อมูล ถ้าการเปลี่ยนแปลงของข้อมูลจะบันทึกข้อมูล
+ */
+watch(tabs, (newValue, oldValue) => {
+  //เช็คการเปลี่ยนแปลงของข้อมูล
+  if (isChangeData.value) {
+    const refMap: { [key: string]: any } = {
+      Detail: childDetailRef,
+      ListPersons: childListPersonsRef,
+      ReceivedCopy: childReceivedCopyRef,
+      Attached: childAttachedRef,
+    };
+
+    refMap[oldValue]?.value?.onSubmit();
+  }
 });
 
-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();
-    }
-  }
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ *
+ * กำหนดค่า `store.readonly` เมื่อ  route.name เป็น "commandViewDetailPage" จะอ่านข้อมูลได้อย่างเดียว
+ */
+onMounted(() => {
+  store.readonly = route.name === "commandViewDetailPage";
 });
 </script>
 
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index f5451d305..ccda3eb75 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@@ -18,8 +18,7 @@ const $q = useQuasar();
 const store = useCommandListStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalAdd = ref<boolean>(false);
-
+//รายการ Tab รายการคำสั่ง
 const tabsManu = ref<ItemTabs[]>([
   { label: "แบบร่าง", name: "DRAFT" },
   { label: "รอผู้มีอำนาจ", name: "PENDING" },
@@ -27,14 +26,18 @@ const tabsManu = ref<ItemTabs[]>([
   { label: "ออกคำสั่งเสร็จสิ้น", name: "REPORTED" },
   { label: "ยกเลิก", name: "CANCEL" },
 ]);
-
+//ฟอร์มช้อมูลการค้นหา
 const queryParams = reactive<FormQuery>({
-  page: 1,
-  pageSize: 10,
-  year: new Date().getFullYear(),
-  keyword: "",
+  page: 1, //หน้า
+  pageSize: 10, //จำนวนต่อหน้า
+  year: new Date().getFullYear(), //ปีงบประมาณ
+  keyword: "", //คำค้นหา
 });
+const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการคำสั่ง
+ */
 async function fetchListCommand() {
   showLoader();
   await http