updated command template

src/modules/05_command/components/FormTemplate.vue

@@ -44,9 +44,9 @@ const onSave = () => {
     showLoader();
     http
       .put(config.API.commandType + `/text/${commandId.value}`, {
-        detailHeader: textHeader.value,
+        detailHeader: textHeader.value ?? "",
-        detailBody: textBody.value,
+        detailBody: textBody.value ?? "",
-        detailFooter: textFooter.value,
+        detailFooter: textFooter.value ?? "",
       })
       .then(async () => {
         await fetchDataTemplate(commandId.value);

src/modules/05_command/components/ViewPdf.vue

@@ -7,23 +7,16 @@ import config from "@/app.config";
 import axios from "axios";
 import { useCounterMixin } from "@/stores/mixin";
 
-import genReport from "@/plugins/genreport";
-
 import type { DataTemplateDetail } from "@/modules/05_command/interface/response/Main";
+import http from "@/plugins/http";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
+const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
-  dialogConfirm,
-  success,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  messageError,
-} = mixin;
 
-const idOrder = defineModel<string>("idOrder", { required: true }); // แยก tab
+const commandId = defineModel<string>("commandId", { required: true }); // id คำสั่ง
 const type = defineModel<string>("type", { required: true }); // แยก tab
+// รายละเอียดคำสั่ง
 const dataTemplateDetail = defineModel<DataTemplateDetail>(
   "dataTemplateDetail",
   {
@@ -31,77 +24,63 @@ const dataTemplateDetail = defineModel<DataTemplateDetail>(
   }
 );
 
-const documentFile = ref<File | null>(null); // file
+const documentFile = ref<File | null>(null); // file อัปโหลด
-const isLoadPDF = ref<boolean>(false);
+const isLoadPDF = ref<boolean>(false); // Loading display pdf
-
-/** download file */
-async function downloadFile() {
-  showLoader();
-  const body = {
-    template: "command_test",
-    reportName: "docx-report",
-    data: {
-      issue: ".....", //
-      title: "....", //
-      commandNo: "....",
-      commandYear: ".....",
-      commandTitle: dataTemplateDetail.value.name, //name
-      detailHeader: dataTemplateDetail.value.detailHeader,
-      detailBody: dataTemplateDetail.value.detailBody,
-      detailFooter: dataTemplateDetail.value.detailFooter,
-      commandDate: "๑ สิงหาคม ๒๕๖๗",
-      name: "นายสมชาย ใจดี",
-      position: "ผู้อำนวยการเขตพระนคร",
-    },
-  };
-
-  await genReport(body, `คำสั่ง`);
-}
-
-/** uplaod file */
-function clickUpload(file: File | null) {
-  const dataFile = file;
-}
 
 /** page PDF */
-const pdfSrc = ref<any>();
+const pdfSrc = ref<any>(null); // PDF path display
-const page = ref<number>(1);
+const page = ref<number>(1); // หน้าที่แสดง
-const numOfPages = ref<number>(0);
+const numOfPages = ref<number>(0); // จำนวนหน้า PDF ทั้งหมด
 const splitterModel = ref(14);
-
+const typeFile = ref<string>(type.value === "cover" ? "docx" : "xlsx"); // นามสกุลไฟล์ cover=docx หรือ attachment=xlsx
+// next page PDF
 function nextPage() {
   if (page.value < numOfPages.value) {
     page.value++;
   }
 }
+// back page PDF
 function backPage() {
   if (page.value !== 1) {
     page.value--;
   }
 }
 
+const { fetchDataTemplate } = defineProps({
+  fetchDataTemplate: {
+    type: Function,
+    required: true,
+  },
+});
+
+/**
+ * ฟังก์ชั่น fillin ข้อมูลคำสั่งและแสดงตัวอย่าง Template คำสั่งในหน้า UI
+ * @param dataTemple รายละเอียดคำสั่ง
+ */
 async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) {
   showLoader();
+  const reportName = await `${dataTemplateDetail.value.code}_${type.value}`;
+
   const body = {
-    template: "command_test",
+    template: reportName,
-    reportName: "docx-report",
+    reportName: `${typeFile.value}-report`,
     data: {
-      issue: ".....", //
+      issue: "............", //
-      title: "....", //
+      title: "......", //
-      commandNo: "....",
+      commandNo: "......",
-      commandYear: ".....",
+      commandYear: "......",
-      commandTitle: dataTemple.name, //name
+      commandTitle: dataTemple.name,
       detailHeader: dataTemple.detailHeader,
       detailBody: dataTemple.detailBody,
       detailFooter: dataTemple.detailFooter,
-      commandDate: "๑ สิงหาคม ๒๕๖๗",
+      commandDate: "..................",
-      name: "นายสมชาย ใจดี",
+      name: "....................................",
-      position: "ผู้อำนวยการเขตพระนคร",
+      position: "ผู้อำนวยการสำนัก/เขต",
     },
   };
 
   await axios
-    .post(config.API.reportTemplate + `/docx/html`, body, {
+    .post(config.API.reportTemplate + `/${typeFile.value}`, body, {
       headers: {
         accept: "application/pdf",
         "content-Type": "application/json",
@@ -112,23 +91,124 @@ async function fetchDocumentTemplate(dataTemple: DataTemplateDetail) {
       isLoadPDF.value = false;
       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;
+        hideLoader();
       }, 1500);
     })
-    .catch(async (e) => {
+    .catch((e) => {
-      messageError($q, e);
+      // ไม่พบข้อมูล Template
-    })
+      messageError($q, "", "ไม่พบข้อมูล Template");
-    .finally(() => {
+      isLoadPDF.value = false;
       hideLoader();
     });
 }
 
+/**
+ * ฟังชั่นอัปโหลดไฟล์ Template คำสั่ง/บัญชีแนบท้าย
+ */
+async function uploadTemplate() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const reportName = await `${dataTemplateDetail.value.code}_${type.value}`;
+      await axios
+        .post(
+          config.API.reportTemplate +
+            `/${typeFile.value}/upload?report_name=${reportName}`,
+          documentFile.value,
+          {
+            headers: {
+              accept: documentFile.value?.type,
+              "content-Type": "application/octet-stream",
+            },
+          }
+        )
+        .then(async (res) => {
+          // update ชื่อไฟล์คำสั่ง/บัญชีแนบท้าย ในข้อมูลำสั่ง
+          await updateReportName(reportName);
+          success($q, "อัปโหลดไฟล์สำเร็จ");
+          hideLoader();
+
+          // โหลดไฟล์ Template ที่แสดงในหน้า UI ใหม่
+          fetchDocumentTemplate(dataTemplateDetail.value);
+          fetchDataTemplate(commandId.value);
+        })
+        .catch(async (e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          documentFile.value = null;
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์ต้นแบบ",
+    "คุณต้องการอัปโหลดไฟล์ต้นแบบนี้ใช่หรือไม่?"
+  );
+}
+
+/**
+ * ฟังก์ชั่นดาวน์โหลดไฟล์ Template คำสั่ง/บัญชีแนบท้าย
+ */
+async function downloadTemplate() {
+  const check = await (type.value == "cover"
+    ? dataTemplateDetail.value.fileCover
+    : dataTemplateDetail.value.fileAttachment);
+  await axios
+    .post(
+      config.API.reportTemplate + `/${typeFile.value}/download`,
+      {
+        template: check,
+      },
+      {
+        headers: {
+          accept: "application/pdf",
+          "content-Type": "application/json",
+        },
+        responseType: "blob",
+      }
+    )
+    .then(async (res) => {
+      var a = document.createElement("a");
+      a.href = URL.createObjectURL(res.data);
+      a.download = `${dataTemplateDetail.value.code}_${type.value}.${typeFile.value}`;
+      a.click();
+      hideLoader();
+    })
+    .catch(async (e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชั่นแก้ไขชื่อไฟล์คำสั่ง/บัญชีแนบท้าย
+ * @param name ชื่อไฟล์
+ */
+async function updateReportName(name: string) {
+  await http
+    .put(config.API.commandType + `/${type.value}/${commandId.value}`, {
+      name: name,
+    })
+    .then(async (res) => {
+      hideLoader();
+    })
+    .catch(async (e) => {
+      messageError($q, e);
+    });
+}
+
+// working on click command list
+watch(dataTemplateDetail, () => {
+  fetchDocumentTemplate(dataTemplateDetail.value);
+});
+
+// working on change tab
 onMounted(() => {
   fetchDocumentTemplate(dataTemplateDetail.value);
 });
@@ -146,9 +226,9 @@ defineExpose({
         outlined
         dense
         v-model="documentFile"
-        :label="`ไฟล์ต้นแบบ${type == 'order' ? 'คำสั่ง' : 'บัญชีแนบท้าย'}`"
+        :label="`ไฟล์ต้นแบบ${type == 'cover' ? 'คำสั่ง' : 'บัญชีแนบท้าย'}`"
         hide-bottom-space
-        :accept="type == 'order' ? '.docx' : '.pdf'"
+        :accept="`.${type == 'cover' ? 'docx' : 'xlsx'}`"
         clearable
       >
         <template v-slot:prepend>
@@ -163,8 +243,8 @@ defineExpose({
             dense
             color="blue"
             icon="mdi-upload"
-            @click="clickUpload(documentFile)"
+            @click="uploadTemplate()"
-            ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+            ><q-tooltip>อัปโหลดไฟล์ต้นแบบ</q-tooltip></q-btn
           >
           <q-btn
             flat
@@ -172,9 +252,9 @@ defineExpose({
             dense
             color="primary"
             icon="mdi-download"
-            @click="downloadFile()"
+            @click="downloadTemplate()"
           >
-            <q-tooltip>ดาวน์โหลด Template คำสั่ง</q-tooltip>
+            <q-tooltip>ดาวน์โหลดไฟล์ต้นแบบ</q-tooltip>
           </q-btn>
         </template>
       </q-file>

src/modules/05_command/interface/response/Main.ts

@@ -15,6 +15,8 @@ interface DataTemplateDetail {
   detailHeader: string;
   detailBody: string;
   detailFooter: string;
+  fileCover?: string;
+  fileAttachment?: string;
   isActive: boolean;
   commandSysId: string;
 }

src/modules/05_command/stores/main.ts

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useDataStore = defineStore("commandStore", () => {
-  const currentTab = ref<string>("order");
+  const currentTab = ref<string>("cover");
   const toolbarOptions = ref([
     ["left", "center", "right", "justify"],
     ["token", "bold", "italic", "underline", "subscript", "superscript"],

src/modules/05_command/views/lists.vue

@@ -25,14 +25,7 @@ import TemplateDetail from "@/modules/05_command/components/FormTemplate.vue";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useDataStore();
-const {
+const { dialogConfirm, success, showLoader, hideLoader, messageError } = mixin;
-  dialogConfirm,
-  success,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-  messageError,
-} = mixin;
 
 const childTemplateDetailRef = ref<InstanceType<typeof TemplateDetail> | null>(
   null
@@ -55,11 +48,11 @@ const activeOptions = ref<ActiveOptions[]>([
 // Tabs
 const tabs = ref<Tabs[]>([
   {
-    value: "order",
+    value: "cover",
     label: "คำสั่ง",
   },
   {
-    value: "account",
+    value: "attachment",
     label: "บัญชีแนบท้าย",
   },
   {
@@ -71,8 +64,8 @@ const tabs = ref<Tabs[]>([
 const dataCategory = ref<DateOption[]>([]); //ข้อมูล หมวดหมู่
 const categoryOP = ref<DateOption[]>([]); // options หมวดหมู่
 
-const idOrder = ref<string>(""); // Id คำสั่ง
+const commandId = ref<string>(""); // Id คำสั่ง
-const activeOrderId = ref<string>(""); // Id คำสั่งที่เลือก
+const activeCommandId = ref<string>(""); // Id คำสั่งที่เลือก
 const name = ref<string>(""); // ชื่อคำสั่ง
 const category = ref<string>(""); // หมวดหมู่
 const listOrder = ref<ListOrder[]>([]); // list คำสั่ง
@@ -140,7 +133,7 @@ function fetchCommandSys() {
  * @param val สถานะ true/false
  */
 function searchByStatus() {
-  activeOrderId.value = "";
+  activeCommandId.value = "";
   page.value = 1;
   pageSize.value = 13;
   fetchCommandType();
@@ -151,7 +144,7 @@ function searchByStatus() {
  * @param data ข้อมูลคำสั่ง
  */
 function onDialogEdit(data: ListOrder) {
-  idOrder.value = data.id;
+  commandId.value = data.id;
   name.value = data.name;
   status.value = data.isActive;
   category.value = data.commandSysId;
@@ -184,7 +177,7 @@ function onDialogEdit(data: ListOrder) {
  * ปิด dialog
  */
 function closeDialog() {
-  idOrder.value = "";
+  commandId.value = "";
   isEdit.value = false;
   dialogFormCommand.value = false;
   name.value = "";
@@ -199,7 +192,7 @@ function onSubmit() {
   dialogConfirm($q, async () => {
     showLoader();
     await http
-      .put(config.API.commandType + `/${idOrder.value}`, {
+      .put(config.API.commandType + `/${commandId.value}`, {
         name: name.value,
         commandSysId: category.value,
         isActive: status.value,
@@ -222,7 +215,7 @@ function onSubmit() {
  * เก็บ id list คำสั่งที่เลือก เพื่อใช้ class
  */
 function selectInbox(data: ListOrder) {
-  activeOrderId.value = data.id;
+  activeCommandId.value = data.id;
   fetchDataCommandTypeId(data.id);
 }
 
@@ -239,7 +232,7 @@ async function fetchDataCommandTypeId(id: string) {
       dataTemplateDetail.value = data;
       await Promise.all([
         childTemplateDetailRef?.value?.fetchData(data),
-        childPageOrderRef?.value?.fetchDocumentTemplate(data),
+        //   childPageOrderRef?.value?.fetchDocumentTemplate(data),
       ]);
     })
     .catch((err) => {
@@ -310,15 +303,11 @@ onMounted(async () => {
         </div>
         <q-separator />
         <q-card-section class="q-pa-sm">
-          <q-list
+          <q-list v-for="(item, index) in listOrder" bordered :key="item.id">
-            v-for="(item, index) in listOrder"
-            :key="item.id"
-            class="q-pr-sm"
-          >
             <q-item
               clickable
               v-ripple
-              :active="activeOrderId === item.id"
+              :active="activeCommandId === item.id"
               active-class="my-menu_link"
               @click="selectInbox(item)"
             >
@@ -329,13 +318,14 @@ onMounted(async () => {
               </q-item-section>
               <q-item-section side center @click.stop>
                 <q-icon
-                  name="mdi-dots-vertical"
+                  name="edit"
                   class="q-pa-none q-ml-xs"
-                  color="grey-13"
+                  color="edit"
                   flat
                   dense
-                >
+                  @click="onDialogEdit(item)"
-                  <q-menu transition-show="jump-down" transition-hide="jump-up">
+                />
+                <!-- <q-menu transition-show="jump-down" transition-hide="jump-up">
                     <q-list dense style="min-width: 160px">
                       <q-item
                         clickable
@@ -352,7 +342,7 @@ onMounted(async () => {
                         <q-item-section>แก้ไข</q-item-section>
                       </q-item>
                       <q-separator />
-                      <!-- <q-item
+                      <q-item
                         clickable
                         v-close-popup
                         @click="onDelete(item.id)"
@@ -365,35 +355,18 @@ onMounted(async () => {
                           <q-icon color="red" size="xs" name="mdi-delete" />
                         </q-item-section>
                         <q-item-section>ลบ</q-item-section>
-                      </q-item> -->
+                      </q-item>
-
+                    </q-list>
-                      <q-separator />
+                  </q-menu> -->
-                    </q-list> </q-menu
+                <!-- </q-icon> -->
-                ></q-icon>
               </q-item-section>
             </q-item>
-            <q-separator v-if="listOrder.length !== index + 1" />
           </q-list>
           <div
-            class="full-width row flex-center text-accent q-gutter-sm"
             v-if="listOrder.length === 0"
+            class="full-width row flex-center text-accent q-gutter-sm"
           >
-            <span
+            <div class="text-grey-5">ไม่พบข้อมูล</div>
-              ><div
-                style="
-                  height: 76vh;
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  align-items: center;
-                "
-                class="text-grey-5"
-              >
-                <q-icon name="search" size="4rem" />
-
-                <span>{{ "ไม่พบข้อมูล" }}</span>
-              </div>
-            </span>
           </div>
         </q-card-section>
         <q-separator />
@@ -415,7 +388,7 @@ onMounted(async () => {
     </div>
     <div class="col-8">
       <q-card bordered style="height: 100%">
-        <div v-if="activeOrderId !== ''">
+        <div v-if="activeCommandId !== ''">
           <q-tabs
             dense
             v-model="store.currentTab"
@@ -436,20 +409,22 @@ onMounted(async () => {
           </q-tabs>
           <q-separator />
           <q-tab-panels v-model="store.currentTab" animated>
-            <q-tab-panel name="order">
+            <q-tab-panel name="cover">
               <PageOrder
                 ref="childPageOrderRef"
                 v-model:type="store.currentTab"
                 v-model:data-template-detail="dataTemplateDetail  as DataTemplateDetail"
-                :id-order="activeOrderId"
+                :command-id="activeCommandId"
+                :fetch-data-template="fetchDataCommandTypeId"
               />
             </q-tab-panel>
-            <q-tab-panel name="account">
+            <q-tab-panel name="attachment">
               <PageOrder
                 ref="childPageOrderRef"
                 v-model:type="store.currentTab"
                 v-model:data-template-detail="dataTemplateDetail  as DataTemplateDetail"
-                :id-order="activeOrderId"
+                :command-id="activeCommandId"
+                :fetch-data-template="fetchDataCommandTypeId"
               />
             </q-tab-panel>
             <q-tab-panel name="template">
@@ -457,7 +432,7 @@ onMounted(async () => {
                 ref="childTemplateDetailRef"
                 v-model:type="store.currentTab"
                 v-model:data-template-detail="dataTemplateDetail as DataTemplateDetail"
-                :command-id="activeOrderId"
+                :command-id="activeCommandId"
                 :fetch-data-template="fetchDataCommandTypeId"
               />
             </q-tab-panel>
@@ -483,7 +458,7 @@ onMounted(async () => {
   </div>
 
   <q-dialog v-model="dialogFormCommand" persistent>
-    <q-card class="col-12" style="min-width: 30%">
+    <q-card class="col-12" style="width: 40vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
           :tittle="isEdit ? 'แก้ไขคำสั่ง' : 'เพิ่มคำสั่ง'"

src/stores/mixin.ts

@@ -439,18 +439,29 @@ export const useCounterMixin = defineStore("mixin", () => {
         }
       }
     } else {
-      console.log("errror===>", e);
+      if (msg === "") {
-
+        q.dialog({
-      q.dialog({
+          component: CustomComponent,
-        component: CustomComponent,
+          componentProps: {
-        componentProps: {
+            title: `พบข้อผิดพลาด`,
-          title: `พบข้อผิดพลาด`,
+            message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
-          message: `ข้อมูลผิดพลาดทำให้เกิดการไม่ตอบสนองต่อการเรียกใช้งานดูเว็บไซต์`,
+            icon: "warning",
-          icon: "warning",
+            color: "red",
-          color: "red",
+            onlycancel: true,
-          onlycancel: true,
+          },
-        },
+        });
-      });
+      } else {
+        q.dialog({
+          component: CustomComponent,
+          componentProps: {
+            title: `พบข้อผิดพลาด`,
+            message: msg,
+            icon: "warning",
+            color: "red",
+            onlycancel: true,
+          },
+        });
+      }
     }
   };