diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index e0f20c207..10a453642 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -74,7 +74,9 @@ async function onSubmit() {
   showLoader();
   await http
     .put(config.API.commandAction(commandId.value, "tab1"), formData)
-    .then(() => {})
+    .then(() => {
+      fetchData();
+    })
     .catch((err) => {
       messageError($q, err);
     })
@@ -87,8 +89,8 @@ async function onSubmit() {
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
-onMounted(() => {
-  fetchData();
+onMounted(async () => {
+  await fetchData();
 });
 
 /**
@@ -188,7 +190,18 @@ defineExpose({
 
       <!-- เนื้อหาคำสั่งส่วนต้น -->
       <div class="col-12">
-        <q-card bordered flat>
+        <q-input
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          outlined
+          dense
+          v-model="formData.detailHeader"
+          hide-bottom-space
+          :label="`${'เนื้อหาคำสั่งส่วนต้น'}`"
+          @update:model-value="onCheckChangeData()"
+          type="textarea"
+        />
+        <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนต้น
           </div>
@@ -224,12 +237,23 @@ defineExpose({
               </template>
             </q-field>
           </q-card-section>
-        </q-card>
+        </q-card> -->
       </div>
 
       <!-- เนื้อหาคำสั่งส่วนกลาง -->
       <div class="col-12">
-        <q-card bordered flat>
+        <q-input
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          outlined
+          dense
+          v-model="formData.detailBody"
+          hide-bottom-space
+          :label="`${'เนื้อหาคำสั่งส่วนกลาง'}`"
+          @update:model-value="onCheckChangeData()"
+          type="textarea"
+        />
+        <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนกลาง
           </div>
@@ -265,12 +289,23 @@ defineExpose({
               </template>
             </q-field>
           </q-card-section>
-        </q-card>
+        </q-card> -->
       </div>
 
       <!-- เนื้อหาคำสั่งส่วนท้าย -->
       <div class="col-12">
-        <q-card bordered flat>
+        <q-input
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          outlined
+          dense
+          v-model="formData.detailFooter"
+          hide-bottom-space
+          :label="`${'เนื้อหาคำสั่งส่วนท้าย'}`"
+          @update:model-value="onCheckChangeData()"
+          type="textarea"
+        />
+        <!-- <q-card bordered flat>
           <div class="bg-grey-2 row q-py-sm q-px-md text-bold">
             เนื้อหาคำสั่งส่วนท้าย
           </div>
@@ -306,7 +341,7 @@ defineExpose({
               </template>
             </q-field>
           </q-card-section>
-        </q-card>
+        </q-card> -->
       </div>
     </div>
   </q-card-section>
@@ -317,5 +352,8 @@ defineExpose({
     <q-btn label="บันทึก" color="public" @click="onSubmit" />
   </q-card-actions>
 
-  <DialogPerview v-model:modal="modalPreview" />
+  <DialogPerview
+    v-model:modal="modalPreview"
+    v-model:data-template-detail="formData"
+  />
 </template>
diff --git a/src/modules/18_command/components/Step/Dialog1_Perview.vue b/src/modules/18_command/components/Step/Dialog1_Perview.vue
index b18357f43..7d0520a57 100644
--- a/src/modules/18_command/components/Step/Dialog1_Perview.vue
+++ b/src/modules/18_command/components/Step/Dialog1_Perview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import axios from "axios";
@@ -17,29 +17,33 @@ const $q = useQuasar();
 const { dialogConfirm } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
+const dataTemplateDetail = defineModel<any>("dataTemplateDetail", {
+  required: true,
+});
 
 const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const vuePDFRef = ref<any>(null);
 
-function fetchPDF(type: string = "docx") {
-  axios
+async function fetchPDF(type: string = "docx") {
+  await axios
     .post(
       config.API.reportTemplate + `/${type}`,
       {
         template: "command_test",
         reportName: "docx-report",
         data: {
-          commandNo: "๑๒๓๔๕",
-          commandYear: "กระผม",
+          commandNo: dataTemplateDetail.value.commandNo, //
+          commandYear: dataTemplateDetail.value.commandYear, //
           commandTitle: "นาย",
-          detailHeader: "Administrator",
-          detailBody: "detailBody",
-          detailFooter: "detailFooter",
+          detailHeader: dataTemplateDetail.value.detailHeader, //
+          detailBody: dataTemplateDetail.value.detailBody, //
+          detailFooter: dataTemplateDetail.value.detailFooter, //
           commandDate: "",
           name: "Chief Technology Officer",
           position: "Chief Technology Officer",
+          issue: dataTemplateDetail.value.issue, //
         },
       },
       {
@@ -70,7 +74,9 @@ function onClose() {
 }
 
 onMounted(() => {
-  fetchPDF();
+  setTimeout(() => {
+    fetchPDF();
+  }, 1000);
 });
 </script>