ui command tab 2/3/5

src/api/18_command/api.command.ts

@@ -10,5 +10,5 @@ export default {
   commandAction: (commandId: string, type: string) =>
     `${command}/${type}/${commandId}`,
 
-  commandSalaryList:(command:string)=>`${commandSalary}/list&commandSysId=${command}`
+  commandSalaryList:(command:string)=>`${commandSalary}/list?commandSysId=${command}`
 };

src/modules/18_command/components/Step/1_Detail.vue

@@ -29,10 +29,7 @@ const props = defineProps({
 
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 // ฟอร์มข้อมูล
-const formData = reactive<FormDataDetail>({
+let formData = reactive<FormDataDetail>({
-  id: "",
-  status: "",
-  commandTypeName: "",
   commandNo: "",
   commandYear: null,
   detailHeader: "",
@@ -41,7 +38,6 @@ const formData = reactive<FormDataDetail>({
   issue: null,
   commandAffectDate: null, //วันที่ลงนาม
   commandExcecuteDate: null, //วันที่คำสั่งมีผล
-  commandSysId: "", // ประเภท คำสั่ง
 });
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
@@ -69,14 +65,16 @@ async function onSubmit() {
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
-watch(
+onMounted(() => {
-  () => props.formCommandList,
+  formData.commandNo = props.formCommandList.commandNo;
-  () => {
+  formData.commandYear = props.formCommandList.commandYear;
-    const list = props.formCommandList;
+  formData.detailHeader = props.formCommandList.detailHeader;
-    console.log("🚀 ~ props.formCommandList:", props.formCommandList)
+  formData.detailBody = props.formCommandList.detailBody;
-    console.log("🚀 ~ onMounted ~ list:", list);
+  formData.detailFooter = props.formCommandList.detailFooter;
-  }
+  formData.issue = props.formCommandList.issue;
-);
+  formData.commandAffectDate = props.formCommandList.commandAffectDate;
+  formData.commandExcecuteDate = props.formCommandList.commandExcecuteDate;
+});
 
 /**
  * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
@@ -90,7 +88,6 @@ defineExpose({
   <q-card-section>
     <div class="row q-col-gutter-sm">
       <!-- คำสั่งเลขที่ -->
-       {{ props.formCommandList }}
       <div class="col-4 row">
         <div class="col-6">
           <q-input

src/modules/18_command/components/Step/2_ListPersons.vue

@@ -9,7 +9,7 @@ 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 { FormDataDetail } from "@/modules/18_command/interface/request/Main";
+import type { ListCommandSalaryType } from "@/modules/18_command/interface/request/Main";
 
 import DialogAddPerson from "@/modules/18_command/components/Step/Dialog2_AddPerson.vue";
 import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vue";
@@ -31,23 +31,10 @@ const isChangeData = defineModel<boolean>("isChangeData", { required: true }); /
 const props = defineProps({
   onCheckChangeData: { type: Function, required: true },
   fetchDataCommandList: { type: Function, required: true },
-  formCommandList: { type: Object, required: true },
+  commandSysId: { type: String, required: true },
 });
 
-const formData = reactive<FormDataDetail>({
+const ListCommandSalary = ref<ListCommandSalaryType[]>([]);
-  id: "",
-  status: "",
-  commandTypeName: "",
-  commandNo: "",
-  commandYear: null,
-  detailHeader: "",
-  detailBody: "",
-  detailFooter: "",
-  issue: null,
-  commandAffectDate: null, //วันที่ลงนาม
-  commandExcecuteDate: null, //วันที่คำสั่งมีผล
-  commandSysId: "", // ประเภท คำสั่ง
-});
 
 const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
 const templatePos = ref<string>("");
@@ -142,16 +129,20 @@ function filterSelector(val: string, update: Function, filtername: string) {
   }
 }
 
-function getCommandSalaryList() {
+function getCommandSalaryList(type: string) {
+  showLoader();
   http
-    .get(config.API.commandSalaryList("PLACEMENT"))
+    .get(config.API.commandSalaryList(type))
     .then((res) => {
-      console.log(res.data.result);
+      const data = res.data.result;
+      ListCommandSalary.value = data;
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function onSubmit() {}
@@ -164,11 +155,9 @@ defineExpose({
 });
 
 onMounted(() => {
-  if (props.formCommandList) {
+  if (props.commandSysId) {
-    const list = props.formCommandList;
+    getCommandSalaryList(props.commandSysId);
-    console.log("🚀 ~ onMounted ~ list:", list);
   }
-  getCommandSalaryList();
 });
 </script>
 
@@ -187,7 +176,7 @@ onMounted(() => {
           v-model="templatePos"
           :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
           option-label="name"
-          :options="posNoOptions"
+          :options="ListCommandSalary"
           option-value="name"
           hide-bottom-space
           emit-value

src/modules/18_command/components/Step/4_Attached.vue

@@ -1,19 +1,369 @@
 <script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import axios from "axios";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+
+import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = mixin;
+
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const { onCheckChangeData } = defineProps({
   onCheckChangeData: { type: Function, required: true },
 });
 
+const tab = ref<string>("main"); //tab
+const page = ref<number>(1);
+const numOfPages = ref<number>(0); //จำนวนหน้า pdf
+const pdfSrc = ref<PDFDocumentLoadingTask | undefined>(); // ตัวแปรเก็บ เเสดง pdf
+
+const isAttachment = ref<boolean>(true);
+const dialog = ref<boolean>(false); // เปิด dialog
+
+/**
+ * เปลี่ยน tab
+ * @param val ชื่อ tab
+ */
+function setTab(val: string) {
+  tab.value = val;
+  page.value = 1;
+}
+
+/** ดึง class ตามที่ set ไว้ */
+function getClass(val: boolean) {
+  return {
+    "card-header-active q-px-lg q-py-md cursor-pointer": val,
+    "card-header q-px-lg q-py-md cursor-pointer": !val,
+  };
+}
 function onSubmit() {}
 
+/** ฟังชั่นจองลอง แสดง pdf */
+async function genPDf(data: any, type: string = "docx") {
+  showLoader();
+  await axios
+    .post(config.API.reportTemplate + `/${type}`, data, {
+      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 = usePDF(`${objectUrl}`);
+      setTimeout(() => {
+        pdfSrc.value = pdfData.pdf.value;
+        numOfPages.value = pdfData.pages.value;
+        hideLoader();
+      }, 1500);
+    })
+    .catch(async (e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังชั่นดาวห์โหลดไฟล์
+ * @param type pdf/docx
+ */
+async function downloadCover(type: string) {
+  genReport(
+    tab.value == "main" ? data1 : data2,
+    `${
+      tab.value == "main"
+        ? "คำสั่ง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
+        : "เอกสารแนบท้าย คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้"
+    }`,
+    type
+  );
+}
+
+/** ข้อมูลจำลอง */
+const data1 = {
+  template: "C-PM-01",
+  reportName: "docx-report",
+  data: {
+    commandNo: "",
+    commandYear: "๒๕๖๗",
+    issuerOrganizationName: "",
+    conclusionRegisterNo: "test",
+    conclusionRegisterDate: "๒ สิงหาคม ๒๕๖๗",
+    conclusionResultNo: "test",
+    conclusionResultDate: "๓ สิงหาคม ๒๕๖๗",
+    positionList: "",
+    count: "๑",
+    commandAffectDate: "๑ สิงหาคม ๒๕๖๗",
+    authorizedUserFullName: "นายวิษณุ สุวรรณรัตน์",
+    authorizedPosition: "ผู้อำนวยการ",
+    subject: "เรื่อง คำสั่งบรรจุและแต่งตั้ง: สำหรับผู้สอบแข่งขันได้",
+  },
+};
+const data2 = {
+  template: "C-PM-01-attachment",
+  reportName: "docx-report",
+  data: {
+    commandNo: "",
+    commandYear: "๒๕๖๗",
+    issuerOrganizationName: "",
+    commandExcecuteDate: "-",
+    data: [
+      {
+        citizenId: "๒๔๕๙๙๐๐๐๑๙๖๘๐",
+        fullName: "นางสาวบุปผารัตน์ สีลาเหลี่ยม",
+        oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+        positionName: "นักบริหาร",
+        positionLevel: "ต้น",
+        positionType: "บริหาร",
+        positionNumber: "สกก.๒",
+        salary: "๑๒,๐๐๐",
+        appointDate: "๒๓ ส.ค. ๖๗",
+        examNumber: "๑",
+        placementName: "สอบแข่งขันนักคอมพิวเตอร์ ครั้งที่ ๑/๒๕๖๗",
+        seq: "๑",
+        education: "การศึกษาบัณฑิต",
+        remarkHorizontal:
+          "โดยมีเงื่อนไขว่าต้องปฏิบัติงานให้กรุงเทพมหานครเป็นระยะเวลาไม่น้อยกว่า ๕ ปี นับแต่วันที่ได้รับการบรรจุและแต่งตั้ง โดยห้ามโอนไปหน่วยงานหรือส่วนราชการอื่น เว้นเเต่ลาออกจากราชการ",
+        remarkVertical: null,
+      },
+    ],
+  },
+};
+
 /**
  * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
  */
 defineExpose({
   onSubmit,
 });
+
+/** check tab เมื่อมีการเปลี่ยน tab */
+watch(tab, () => {
+  if (tab.value === "main") {
+    genPDf(data1);
+  }
+  if (tab.value === "second") {
+    genPDf(data2);
+  }
+});
+
+/** hook */
+onMounted(async () => {
+  await genPDf(data1);
+});
 </script>
 
 <template>
-  <div>คำสั่งและบัญชีแนบท้าย</div>
+  <div class="space">
+    <div @click="setTab('main')" :class="getClass(tab == 'main')">
+      <div class="q-pr-sm">คำสั่ง</div>
+    </div>
+
+    <div @click="setTab('second')" :class="getClass(tab == 'second')">
+      <div class="q-pr-sm">เอกสารแนบท้าย</div>
+    </div>
+    <q-space />
+    <q-btn
+      class="text-dark"
+      flat
+      dense
+      icon="mdi-fullscreen"
+      color="add"
+      @click="dialog = true"
+    />
+  </div>
+  <q-separator style="margin-top: -1px; z-index: 1" />
+  <div class="q-pa-sm">
+    <div class="q-pa-sm row q-gutter-sm">
+      <q-btn
+        flat
+        dense
+        round
+        color="red"
+        icon="mdi-file-pdf"
+        @click="downloadCover('pdf')"
+      >
+        <q-tooltip>ไฟล์ .PDF</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        dense
+        round
+        color="blue"
+        icon="mdi-file-word"
+        @click="downloadCover('docx')"
+      >
+        <q-tooltip>ไฟล์ .docx</q-tooltip>
+      </q-btn>
+    </div>
+    <q-card bordered class="card-pdf q-mx-sm q-pa-md">
+      <div class="justify-between items-center align-center q-pb-sm row">
+        <q-btn
+          class="text-dark bg-grey-4"
+          flat
+          dense
+          @click="page = page > 1 ? page - 1 : page"
+        >
+          <q-icon name="mdi-chevron-left" />
+        </q-btn>
+
+        <span class="body-2 grey--text">
+          หน้าที่ {{ page }} จาก {{ numOfPages }}
+        </span>
+
+        <q-btn
+          class="text-dark bg-grey-4"
+          flat
+          dense
+          @click="page = page < numOfPages ? page + 1 : page"
+        >
+          <q-icon name="mdi-chevron-right" />
+        </q-btn>
+      </div>
+      <div class="pdfWidth">
+        <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
+      </div>
+    </q-card>
+  </div>
+
+  <q-dialog
+    v-model="dialog"
+    persistent
+    :maximized="true"
+    transition-show="slide-up"
+    transition-hide="slide-down"
+  >
+    <q-card class="bg-white text-white">
+      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          style="color: #ff8080; background-color: #ffdede"
+          size="12px"
+          v-close-popup
+        />
+      </div>
+      <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
+        <div class="justify-between items-center align-center q-pb-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+        <div class="pdfWidth">
+          <VuePDF
+            ref="vuePDFRef"
+            :pdf="pdfSrc"
+            :page="page"
+            fit-parent
+            :scale="0.1"
+          />
+          <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
+        </div>
+        <div class="justify-between items-center align-center q-pt-sm row">
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page > 1 ? page - 1 : page"
+          >
+            <q-icon name="mdi-chevron-left" />
+          </q-btn>
+
+          <span class="body-2 grey--text text-black">
+            หน้าที่ {{ page }} จาก {{ numOfPages }}
+          </span>
+
+          <q-btn
+            class="text-dark bg-grey-4"
+            flat
+            dense
+            @click="page = page < numOfPages ? page + 1 : page"
+          >
+            <q-icon name="mdi-chevron-right" />
+          </q-btn>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
+
+<style scoped lang="scss">
+.space {
+  background-color: #e9eaec61;
+  display: flex;
+  z-index: 3;
+  min-height: 40px;
+}
+
+.card-header-active {
+  margin-top: 5px;
+  margin-left: -1px;
+  background-color: white;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  border: 1px solid #e9eaec;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  border-bottom-style: none;
+  font-weight: 600;
+  align-items: center;
+}
+
+.card-header {
+  margin-top: 5px;
+  background-color: transparent;
+  padding: 2px !important;
+  border-radius: 10px 10px 0px 0px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  font-weight: normal;
+  align-items: center;
+}
+
+.card-pdf {
+  border-radius: 10px;
+  border: 1px solid #e9eaec;
+  background-color: #e9eaec61;
+}
+</style>

src/modules/18_command/interface/request/Main.ts

@@ -12,8 +12,8 @@ interface FormCommand {
 }
 
 interface FormDataDetail {
-  id: string;
+  id?: string;
-  status: string;
+  status?: string;
   commandNo: string;
   commandYear: number | null;
   detailHeader: string;
@@ -22,8 +22,17 @@ interface FormDataDetail {
   issue: string | null;
   commandAffectDate: Date | null;
   commandExcecuteDate: Date | null;
-  commandSysId: string;
+  commandSysId?: string;
-  commandTypeName: string;
+  commandTypeName?: string;
 }
 
-export type { FormQuery, FormCommand, FormDataDetail };
+interface ListCommandSalaryType {
+  id: string;
+  createdAt: Date|null;
+  lastUpdatedAt: Date|null;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+  commandSysId: string;
+}
+export type { FormQuery, FormCommand, FormDataDetail,ListCommandSalaryType };

src/modules/18_command/views/detail.vue

@@ -23,6 +23,7 @@ const router = useRouter();
 const route = useRoute();
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 const store = useCommandDetail();
+const isMomFirst = ref<boolean>(false);
 
 const childDetailRef = ref<InstanceType<typeof Detail> | null>(null); //ref components รายละเอียดคำสั่ง
 const childListPersonsRef = ref<InstanceType<typeof ListPersons> | null>(null); //ref components รายชื่อผู้ออกคำสั่ง
@@ -31,7 +32,7 @@ const childReceivedCopyRef = ref<InstanceType<typeof ReceivedCopy> | null>(
 ); //ref components รายชื่อผู้ได้รับสำเนาคำสั่ง
 const childAttachedRef = ref<InstanceType<typeof Attached> | null>(null); //ref components คำสั่งและบัญชีแนบท้าบ
 
-const tabs = ref<string>("Detail"); //Tab
+const tabs = ref<string>("Main"); //Tab
 const readonly = ref<boolean>(route.name === "commandViewDetailPage"); //อ่านได้อย่างเดียว
 const isChangeData = ref<boolean>(false); //การเปลี่ยนแปลงของข้อมูล
 //รายการ Tab ละเอียดคำสั่ง
@@ -49,7 +50,7 @@ const tabsManu = ref<ItemTabs[]>([
   { label: "พรีวิวคำสั่ง", name: "Attached" },
 ]);
 
-const formCommandList = reactive<FormDataDetail>({
+let formCommandList = reactive<FormDataDetail>({
   id: "",
   status: "",
   commandTypeName: "",
@@ -84,19 +85,7 @@ async function fetchDataCommandList() {
     .get(config.API.commandAction(commandId.value, "tab1"))
     .then(async (res) => {
       const data = await res.data.result;
-      formCommandList.id = data.id;
+      formCommandList = data;
-      formCommandList.status = data.status;
-      formCommandList.commandTypeName = data.commandTypeName;
-      formCommandList.commandNo = data.commandNo;
-      formCommandList.commandYear = data.commandYear;
-      formCommandList.detailHeader = data.detailHeader;
-      formCommandList.detailBody = data.detailBody;
-      formCommandList.detailFooter = data.detailFooter;
-      formCommandList.issue = data.issue;
-      formCommandList.commandAffectDate = data.commandAffectDate;
-      formCommandList.commandExcecuteDate = data.commandExcecuteDate;
-      formCommandList.commandSysId = data.commandSysId;
-
       isChangeData.value = false;
     })
     .catch((err) => {
@@ -204,7 +193,7 @@ onMounted(async () => {
               ref="childListPersonsRef"
               v-model:is-change-data="isChangeData"
               :on-check-change-data="onCheckChangeData"
-              :form-command-list="formCommandList"
+              :command-sys-id="formCommandList.commandSysId as string"
               :fetch-data-command-list="fetchDataCommandList"
             />
           </q-card>