diff --git a/src/modules/05_command/components/ViewPdf.vue b/src/modules/05_command/components/ViewPdf.vue
index 16cc27c8..85bf401d 100644
--- a/src/modules/05_command/components/ViewPdf.vue
+++ b/src/modules/05_command/components/ViewPdf.vue
@@ -17,12 +17,9 @@ const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
 const commandId = defineModel<string>("commandId", { required: true }); // id คำสั่ง
 const type = defineModel<string>("type", { required: true }); // แยก tab
 // รายละเอียดคำสั่ง
-const dataTemplateDetail = defineModel<DataTemplateDetail>(
-  "dataTemplateDetail",
-  {
-    required: true,
-  }
-);
+const dataTemplate = defineModel<DataTemplateDetail>("dataTemplateDetail", {
+  required: true,
+});
 
 const documentFile = ref<File | null>(null); // file อัปโหลด
 const isLoadPDF = ref<boolean>(false); // Loading display pdf
@@ -57,69 +54,71 @@ const { fetchDataTemplate } = defineProps({
  * @param dataTemple รายละเอียดคำสั่ง
  */
 async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) {
-  showLoader();
-  isLoadPDF.value = false;
-  pdfSrc.value = undefined;
-  page.value = 1;
-  const reportName = await `${dataTemplateDetail.value.code}_${type.value}`;
-  const body = {
-    template: reportName,
-    reportName: `${typeFile.value}-report`,
-    data: {
-      issue: "............", //
-      title: "......", //
-      commandNo: "......",
-      commandYear: "......",
-      commandTitle: dataTemple.name,
-      detailHeader: dataTemple.detailHeader,
-      detailBody: dataTemple.detailBody,
-      detailFooter: dataTemple.detailFooter,
-      commandDate: "..................",
-      commandAffectDate: "..................",
-      commandExcecuteDate: "..................",
-      name: "....................................",
-      name1: dataTemple.name1,
-      name2: dataTemple.name2,
-      name3: dataTemple.name3,
-      name4: dataTemple.name4,
-      position: "ผู้อำนวยการสำนัก/เขต",
-      authorizedUserFullName: "............",
-      authorizedPosition: "...................",
-      ...(dataTemple.persons ? { persons: dataTemple.persons } : {}),
-    },
-  };
+  if (dataTemple) {
+    showLoader();
+    isLoadPDF.value = false;
+    pdfSrc.value = undefined;
+    page.value = 1;
+    const reportName = `${dataTemple.code}_${type.value}`;
+    const body = {
+      template: reportName,
+      reportName: `${typeFile.value}-report`,
+      data: {
+        issue: "............", //
+        title: "......", //
+        commandNo: "......",
+        commandYear: "......",
+        commandTitle: dataTemple.name,
+        detailHeader: dataTemple.detailHeader,
+        detailBody: dataTemple.detailBody,
+        detailFooter: dataTemple.detailFooter,
+        commandDate: "..................",
+        commandAffectDate: "..................",
+        commandExcecuteDate: "..................",
+        name: "....................................",
+        name1: dataTemple.name1,
+        name2: dataTemple.name2,
+        name3: dataTemple.name3,
+        name4: dataTemple.name4,
+        position: "ผู้อำนวยการสำนัก/เขต",
+        authorizedUserFullName: "............",
+        authorizedPosition: "...................",
+        ...(dataTemple.persons ? { persons: dataTemple.persons } : {}),
+      },
+    };
 
-  await axios
-    .post(
-      config.API.reportTemplate + `/${typeFile.value}?folder=command`,
-      body,
-      {
-        headers: {
-          accept: "application/pdf",
-          "content-Type": "application/json",
-        },
-        responseType: "blob",
-      }
-    )
-    .then(async (res) => {
-      const blob = new Blob([res.data]);
-      const objectUrl = URL.createObjectURL(blob);
-      const pdfData = await usePDF(`${objectUrl}`);
+    await axios
+      .post(
+        config.API.reportTemplate + `/${typeFile.value}?folder=command`,
+        body,
+        {
+          headers: {
+            accept: "application/pdf",
+            "content-Type": "application/json",
+          },
+          responseType: "blob",
+        }
+      )
+      .then(async (res) => {
+        const blob = new Blob([res.data]);
+        const objectUrl = URL.createObjectURL(blob);
+        const pdfData = await usePDF(`${objectUrl}`);
 
-      // แสดง PDF หลังจากโหลดเสร็จ
-      setTimeout(() => {
-        pdfSrc.value = pdfData.pdf.value;
-        numOfPages.value = pdfData.pages.value;
-        isLoadPDF.value = true;
+        // แสดง PDF หลังจากโหลดเสร็จ
+        setTimeout(() => {
+          pdfSrc.value = pdfData.pdf.value;
+          numOfPages.value = pdfData.pages.value;
+          isLoadPDF.value = true;
+          hideLoader();
+        }, 1500);
+      })
+      .catch((e) => {
+        // ไม่พบข้อมูล Template
+        messageError($q, "", "ไม่พบข้อมูล Template");
+        isLoadPDF.value = false;
         hideLoader();
-      }, 1500);
-    })
-    .catch((e) => {
-      // ไม่พบข้อมูล Template
-      messageError($q, "", "ไม่พบข้อมูล Template");
-      isLoadPDF.value = false;
-      hideLoader();
-    });
+      });
+  }
 }
 
 /**
@@ -130,7 +129,7 @@ async function uploadTemplate() {
     $q,
     async () => {
       showLoader();
-      const reportName = await `${dataTemplateDetail.value.code}_${type.value}`;
+      const reportName = await `${dataTemplate.value.code}_${type.value}`;
       await axios
         .post(
           config.API.reportTemplate +
@@ -150,7 +149,7 @@ async function uploadTemplate() {
           hideLoader();
 
           // โหลดไฟล์ Template ที่แสดงในหน้า UI ใหม่
-          fetchDocumentTemplate(dataTemplateDetail.value);
+          fetchDocumentTemplate(dataTemplate.value);
           fetchDataTemplate(commandId.value);
         })
         .catch(async (e) => {
@@ -170,8 +169,8 @@ async function uploadTemplate() {
  */
 async function downloadTemplate() {
   const check = await (type.value == "cover"
-    ? dataTemplateDetail.value.fileCover
-    : dataTemplateDetail.value.fileAttachment);
+    ? dataTemplate.value.fileCover
+    : dataTemplate.value.fileAttachment);
   await axios
     .post(
       config.API.reportTemplate + `/${typeFile.value}/download?folder=command`,
@@ -189,7 +188,7 @@ async function downloadTemplate() {
     .then(async (res) => {
       var a = document.createElement("a");
       a.href = URL.createObjectURL(res.data);
-      a.download = `${dataTemplateDetail.value.code}_${type.value}.${typeFile.value}`;
+      a.download = `${dataTemplate.value.code}_${type.value}.${typeFile.value}`;
       a.click();
       hideLoader();
     })
@@ -217,17 +216,16 @@ async function updateReportName(name: string) {
 }
 
 // working on click command list
-watch(dataTemplateDetail, () => {
-  fetchDocumentTemplate(dataTemplateDetail.value);
-});
+watch(
+  () => dataTemplate.value,
+  async (newValue, oldValue) => {
+    await fetchDocumentTemplate(newValue);
+  }
+);
 
 // working on change tab
 onMounted(() => {
-  fetchDocumentTemplate(dataTemplateDetail.value);
-});
-
-defineExpose({
-  fetchDocumentTemplate,
+  fetchDocumentTemplate(dataTemplate.value);
 });
 </script>