รายงานทะเบียนประวัติ รอฟิล ระยะเวลาดำรงตำแหน่งปัจจุบัน/ระยะเวลาดำรงตำแหน่งในเเต่ละระดับ

src/modules/21_report/views/02_reportRegistry.vue

@@ -4,6 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import axios from "axios";
 import genReportXLSX from "@/plugins/genreportxlsx";
+import * as XLSX from "xlsx";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -90,6 +91,7 @@ const org = ref<string>("");
 const isProbation = ref<boolean>(false);
 const isRetire = ref<boolean>(false);
 
+const sortBy = ref<string>("ASC");
 const retireType = ref<string>("");
 const retireTypeOps = ref<DataOption[]>([]);
 const retireTypeOpsMain = ref<DataOption[]>([
@@ -115,7 +117,6 @@ const visibleColumns = ref<string[]>([
   "fullName",
   "posNo",
   "position",
-  "posPath",
   "posType",
   "posLevel",
   "org",
@@ -123,7 +124,7 @@ const visibleColumns = ref<string[]>([
   "gender",
   "status",
   "education",
-  "date",
+  "dateAppoint",
   "age",
   "currentPosition",
   "lengthPosition",
@@ -175,7 +176,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "posPath",
+    name: "posType",
     align: "left",
     label: "ตำแหน่งประเภท",
     sortable: true,
@@ -193,11 +194,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "posLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format(val, row) {
-      return row.posTypeShortName
-        ? row.posTypeShortName + " " + row.posLevel
-        : row.posLevel;
-    },
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -257,11 +253,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "date",
+    name: "dateAppoint",
     align: "left",
     label: "วันที่บรรจุ",
     sortable: true,
-    field: "date",
+    field: "dateAppoint",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -482,7 +478,8 @@ async function onSearch() {
   loadingBtn.value = true;
 
   const queryParams = {
-    nodeId: storeReport.formFilter.nodeId,
+    node: storeReport.formFilter.node ?? null,
+    nodeId: storeReport.formFilter.nodeId ?? "",
 
     posType: posType.value,
     posLevel: posLevel.value,
@@ -493,12 +490,14 @@ async function onSearch() {
     education: education.value,
     ageMin: rangeAge.value.min,
     ageMax: rangeAge.value.max,
-    dateStart: dateStart.value,
-    dateEnd: dateEnd.value,
+    dateStart: dateStart.value ?? "",
+    dateEnd: dateEnd.value ?? "",
 
     isProbation: isProbation.value,
     isRetire: isRetire.value,
     retireType: retireType.value,
+    sortBy: sortBy.value ? "dateAppoint" : "",
+    sort: sortBy.value ? sortBy.value : "ASC",
   };
   showLoader();
   await http
@@ -509,20 +508,54 @@ async function onSearch() {
       { params: queryParams }
     )
     .then(async (res) => {
-      const data = res.data.result;
-      rows.value = data;
+      const data = res.data.result.data;
+      total.value = res.data.result.total;
+      rows.value = data.map((item: any, index: number) => ({
+        no: index + 1,
+        fullName: `${item.prefix ?? ""}${item.firstName ?? ""} ${
+          item.lastName ?? ""
+        }`,
+        posNo: item.searchShortName ?? "-",
+        position: item.position ?? "-",
+        posType: item.posTypeName ?? "-",
+        posLevel: item.posLevelName ?? "-",
+        org: item.org ?? "-",
+        positionExecutive: item.posExecutiveName ?? "-",
+        gender: item.gender ?? "-",
+        status: item.relationship ?? "-",
+        education: item.degree ?? "-",
+        dateAppoint: item.dateAppoint ? date2Thai(item.dateAppoint) : "-",
+        age: item.age ?? "-",
+        currentPosition: item.currentPosition ?? "-",
+        lengthPosition: item.lengthPosition ?? "-",
+      }));
     })
     .catch((e) => {
       messageError($q, e);
       hideLoader();
     })
     .finally(() => {
+      hideLoader();
       setTimeout(() => {
         loadingBtn.value = false;
       }, 500);
     });
 }
 
+function exportToExcel() {
+  const headers = columns.value?.map((item: any) => item.label) || []; // หัวคอลัมน์ภาษาไทย
+  const worksheet = XLSX.utils.json_to_sheet(rows.value, {
+    header: visibleColumns.value,
+  });
+
+  //แทรกหัวคอลัมน์ภาษาไทย (ใช้ A1, B1, C1 แทน)
+  XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: "A1" });
+
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "ข้อมูล"); //ชื่อไฟล เเละ ชื่อ sheet
+  XLSX.writeFile(workbook, "ข้อมูล.xlsx");
+}
+
 onMounted(async () => {
   showLoader();
   Promise.all([
@@ -602,9 +635,10 @@ onMounted(async () => {
               color="primary"
               icon="download"
               v-if="checkPermission($route)?.attrIsGet"
-              :disable="!org"
+              :disable="rows.length == 0"
+              @click="exportToExcel()"
             >
-              <q-menu>
+              <!-- <q-menu>
                 <q-list style="min-width: 150px">
                   <q-item
                     clickable
@@ -647,7 +681,7 @@ onMounted(async () => {
                     <q-item-section>ไฟล์ .xlsx</q-item-section>
                   </q-item>
                 </q-list>
-              </q-menu>
+              </q-menu> -->
             </q-btn>
           </div>
         </div>
@@ -1083,6 +1117,46 @@ onMounted(async () => {
                 </q-select>
               </div>
             </div>
+            <div class="col-12">
+              <q-btn-dropdown
+                :label="
+                  sortBy
+                    ? sortBy == 'DESC'
+                      ? `เรียงตามวันที่บรรจุเเต่งตั้ง
+                        (เก่า-ล่าสุด)`
+                      : `เรียงตามวันที่บรรจุเเต่งตั้ง
+                        (ล่าสุด-เก่า)`
+                    : 'ลำดับการเเสดงผล'
+                "
+                dropdown-icon="mdi-chevron-down"
+                rounded
+                text-color="primary"
+                dense
+                padding="xs md"
+                label-color="white"
+                outline
+              >
+                <q-list>
+                  <q-item clickable v-close-popup @click="sortBy = 'ASC'">
+                    <q-item-section>
+                      <q-item-label
+                        >เรียงตามวันที่บรรจุเเต่งตั้ง
+                        (ล่าสุด-เก่า)</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+
+                  <q-item clickable v-close-popup @click="sortBy = 'DESC'">
+                    <q-item-section>
+                      <q-item-label
+                        >เรียงตามวันที่บรรจุเเต่งตั้ง
+                        (เก่า-ล่าสุด)</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </div>
           </div>
         </q-card>
 
@@ -1116,7 +1190,6 @@ onMounted(async () => {
         >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th auto-width />
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>