ออกคำสั่ง ==> รายละเอียด API Tab 3

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"