ระยะเวลาดำลงตำแหน่ง

src/api/org/api.org.ts

@@ -111,6 +111,9 @@ export default {
   dataUserSalaryNopaidHistoryByType: (emType: string, id: string) =>
     `${org}/profile${emType}/nopaid/history/${id}`,
 
+  salaryTenurePosition: (emType: string) =>
+    `${org}/profile${emType}/salary/tenure/user`,
+
   dataUserCertificateHistory: (type: string, id: string) =>
     `${profileOrg}/${type}/history/${id}`,
   dataUserCertificateHistoryByType: (

src/modules/10_registry/02_Government/07_Position.vue

@@ -7,7 +7,10 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
+import type {
+  SalaryFormType,
+  CardDataPos,
+} from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
@@ -16,8 +19,14 @@ const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+const {
-  mixin;
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  onSearchDataTable,
+  formatDatePosition,
+} = mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<SalaryFormType[]>([]);
@@ -30,7 +39,20 @@ const checkType = ref<boolean>(
   dataPerson.officerType == "OFFICER" ? true : false
 );
 const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const cardData = ref<CardDataPos[]>([
+  {
+    label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งตามระดับ",
+    data: [],
+  },
+  {
+    label: "ระยะเวลาดำรงตำแหน่งทางการบริหาร",
+    data: [],
+  },
+]);
 
 const visibleColumns = ref<string[]>([
   "commandDateAffect",
@@ -485,16 +507,69 @@ function onSearch() {
   );
 }
 
+async function fetchDataTenure() {
+  await http
+    .get(config.API.salaryTenurePosition(link.value))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        // map ข้อมูลระยะเวลาดำรงตำแหน่ง
+        const formatData = (list: any) =>
+          list.map((e: any) => ({
+            name: e.name ?? "",
+            time: formatDatePosition(e.year, e.month, e.day),
+          }));
+
+        // แปลงข้อมูลจาก data
+        const position = formatData(data.position); //ระยะเวลาดำรงตำแหน่งในสายงาน
+        const posLevel = formatData(data.posLevel); //ระยะเวลาดำรงตำแหน่งตามระดับ
+        const posExecutive = formatData(data.posExecutive); //ระยะเวลาดำรงตำแหน่งทางการบริหาร
+
+        // นำข้อมูลไปใส่ใน cardData
+        cardData.value[0].data = position;
+        cardData.value[1].data = posLevel;
+        cardData.value[2].data = posExecutive;
+
+        //เช็คค่า ระยะเวลาดำรงตำแหน่งทางการบริหาร ถ้าไม่มีให้ลบออกจาก cardData
+        if (posExecutive.length === 0) {
+          cardData.value.splice(2, 2);
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
   getData();
+  fetchDataTenure();
 });
 </script>
+
 <template>
   <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">ตำแหน่ง</span>
+    </q-toolbar>
+
+    <div class="row q-col-gutter-sm q-pb-sm" v-if="link === ''">
+      <div class="col" v-for="(item, index) in cardData" :key="index">
+        <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+          <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+            {{ item.label }}
+          </div>
+          <div class="col-12"><q-separator /></div>
+          <q-card-section class="q-pt-none" style="min-height: 200px">
+            <li v-for="data in item.data">{{ data.name }} {{ data.time }}</li>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+
+    <div class="row col-12">
       <q-space />
       <q-input
         v-if="mode"
@@ -525,90 +600,94 @@ onMounted(async () => {
         :options="columns"
         :display-value="$q.lang.table.columns"
       />
-    </q-toolbar>
+    </div>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows.length !== 0 ? rows : []"
-      :columns="columns"
-      :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
 
-      <template v-if="mode" v-slot:body="props">
+    <div class="col-12 q-mt-sm">
-        <q-tr :props="props" class="cursor-pointer">
+      <d-table
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
+        flat
-            <div v-if="col.name == 'no'">
+        dense
-              {{ props.rowIndex + 1 }}
+        bordered
-            </div>
+        virtual-scroll
-            <div v-else-if="col.name == 'status'">
+        :rows="rows.length !== 0 ? rows : []"
-              {{ props.row.status ? props.row.status : "-" }}
+        :columns="columns"
-            </div>
+        :grid="!mode"
-            <div v-else>
+        :rows-per-page-options="[10, 25, 50, 100]"
-              {{ col.value ? col.value : "-" }}
+        :visible-columns="visibleColumns"
-            </div>
+        :virtual-scroll-sticky-size-start="48"
-          </q-td>
+      >
-          <q-td auto-width>
+        <template v-slot:header="props">
-            <q-btn
+          <q-tr :props="props">
-              color="info"
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              flat
+              <span class="text-weight-medium">{{ col.label }}</span>
-              dense
+            </q-th>
-              round
+            <q-th auto-width />
-              size="14px"
+          </q-tr>
-              icon="mdi-history"
+        </template>
-              @click="onHistory(props.row.id)"
+
-            >
+        <template v-if="mode" v-slot:body="props">
-              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+          <q-tr :props="props" class="cursor-pointer">
-            </q-btn>
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
-          </q-td>
+              <div v-if="col.name == 'no'">
-        </q-tr>
+                {{ props.rowIndex + 1 }}
-      </template>
+              </div>
-      <template v-else v-slot:item="props">
+              <div v-else-if="col.name == 'status'">
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                {{ props.row.status ? props.row.status : "-" }}
-          <q-card bordered flat>
+              </div>
-            <q-list dense class="q-mt-lg relative-position">
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
               <q-btn
-                icon="mdi-history"
                 color="info"
                 flat
                 dense
                 round
                 size="14px"
-                class="absolute_button"
+                icon="mdi-history"
                 @click="onHistory(props.row.id)"
               >
                 <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
               </q-btn>
-              <q-item v-for="col in props.cols" :key="col.name">
+            </q-td>
-                <q-item-section class="fix_top">
+          </q-tr>
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
+        </template>
-                    col.label
+        <template v-else v-slot:item="props">
-                  }}</q-item-label>
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-                </q-item-section>
+            <q-card bordered flat>
-                <q-item-section class="fix_top">
+              <q-list dense class="q-mt-lg relative-position">
-                  <q-item-label class="text-dark text-weight-medium">{{
+                <q-btn
-                    col.value ? col.value : "-"
+                  icon="mdi-history"
-                  }}</q-item-label>
+                  color="info"
-                </q-item-section>
+                  flat
-              </q-item>
+                  dense
-            </q-list>
+                  round
-          </q-card>
+                  size="14px"
-        </div>
+                  class="absolute_button"
-      </template>
+                  @click="onHistory(props.row.id)"
-    </d-table>
+                >
+                  <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                </q-btn>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section class="fix_top">
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ตำแหน่ง'"

src/modules/10_registry/interface/index/Main.ts

@@ -367,6 +367,17 @@ interface FileFormType {
   pathName: string;
   fileName: string;
 }
+
+interface CardDataPos {
+  label: string;
+  data?: Data[];
+}
+
+interface Data {
+  name: string;
+  time: string;
+}
+
 export type {
   DataOption,
   NewPagination,
@@ -386,4 +397,5 @@ export type {
   AssessmentsFormType,
   OtherFormType,
   FileFormType,
+  CardDataPos,
 };

src/stores/mixin.ts

@@ -1158,6 +1158,19 @@ export const useCounterMixin = defineStore("mixin", () => {
     });
   }
 
+  function formatDatePosition(year: string, month: string, day: string) {
+    const y = parseInt(year);
+    const m = parseInt(month);
+    const d = parseInt(day);
+
+    const parts = [];
+    if (y > 0) parts.push(`${y} ปี`);
+    if (m > 0) parts.push(`${m} เดือน`);
+    if (d > 0) parts.push(`${d} วัน`);
+
+    return parts.length > 0 ? parts.join(" ") : ""; // กรณีที่ทั้งหมดเป็น 0
+  }
+
   return {
     calAge,
     date2Thai,
@@ -1197,5 +1210,6 @@ export const useCounterMixin = defineStore("mixin", () => {
     findOrgNameOld,
     findPosMasterNo,
     onSearchDataTable,
+    formatDatePosition,
   };
 });