Merge branch 'develop' into devTee

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/01_Information/01_Information.vue

@@ -64,10 +64,9 @@ const visibleColumnsHistory = ref<string[]>([
   "ethnicity",
   "religion",
   "phone",
-  "createdFullName",
+  "lastUpdateFullName",
-  "createdAt",
+  "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "citizenId",
@@ -214,25 +213,25 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdFullName",
+    name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "createdFullName",
+    field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "createdAt",
+    name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },

src/modules/10_registry/01_Information/02_ChangeName.vue

@@ -94,6 +94,9 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "prefix",
@@ -309,6 +312,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/01_Information/03_Address.vue

@@ -211,7 +211,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -267,7 +267,7 @@ function getHistory() {
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
-      console.log("🚀 ~ .then ~ data:", data)
+      console.log("🚀 ~ .then ~ data:", data);
       rowsHistoryData.value = data;
     })
     .catch((e) => {

src/modules/10_registry/01_Information/04_Family.vue

@@ -15,7 +15,7 @@ import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
 const idFamily = ref<string>("");
 const store = useRegistryInFormationStore();
@@ -67,6 +67,8 @@ const visibleColumnsHistory = ref<string[]>([
   "job",
   "isLive",
   "lastNameOld",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -134,6 +136,29 @@ const columnsHistory = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
     format: (val) => (val ? "มีชีวิต" : "ถึงแก่กรรม"),
   },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 
 const checkFatherData = ref<boolean>(false);
@@ -202,6 +227,8 @@ async function getData(type: string) {
 
 /** get history */
 function getHistory() {
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserFamilyHistory(typeForm.value, "", idFamily.value)
@@ -216,8 +243,8 @@ function getHistory() {
     .get(url)
     .then((res) => {
       const data = res.data.result;
-      const listData = 
+      const listData = data.map((e: any) => ({
-       data.map((e: any) => ({
+        ...e,
         citizenId: e[`${typeForm.value}CitizenId`],
         prefix: e[`${typeForm.value}Prefix`],
         firstName: e[`${typeForm.value}FirstName`],
@@ -227,8 +254,8 @@ function getHistory() {
         lastNameOld:
           typeForm.value === "couple" ? e.coupleLastNameOld : undefined,
       }));
-      rowsHistory.value = listData
+      rowsHistory.value = listData;
-      rowsHistoryData.value = listData
+      rowsHistoryData.value = listData;
     })
     .catch((e) => {
       messageError($q, e);

src/modules/10_registry/01_Information/05_Educations.vue

@@ -49,7 +49,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -237,13 +236,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -434,14 +436,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const visibleColumnsHistory = ref<string[]>([
   "educationLevel",
   "institute",
@@ -569,6 +570,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -589,7 +591,7 @@ onMounted(async () => {
               {{ props.row.status ? props.row.status : "-" }}
             </div>
             <div v-else>
-              {{ col.value ? col.value:'-' }}
+              {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
           <q-td auto-width>

src/modules/10_registry/01_Information/06_Ability.vue

@@ -36,7 +36,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "field",
@@ -99,13 +98,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "field",
@@ -177,7 +179,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -290,6 +292,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/02_Discipline.vue

@@ -127,13 +127,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 function onHistory(id: string) {
   modalHistory.value = true;
@@ -236,6 +239,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/03_Leave.vue

@@ -83,7 +83,9 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -124,13 +126,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "no",
@@ -187,7 +192,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -387,6 +394,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/04_Duty.vue

@@ -22,7 +22,8 @@ const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
 const mode = ref<any>($q.screen.gt.xs);
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -126,11 +127,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
@@ -340,6 +344,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/02_Government/05_Actposition.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -34,6 +34,7 @@ const visibleColumns = ref<String[]>([
   "posNo",
   "position",
   "status",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -83,10 +84,25 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
@@ -144,7 +160,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sortable: true,
     field: "status",
     format(val, row) {
-      return row.status ? "Active" : "-";
+      return row.status ? "ใช้งาน" : "-";
     },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -224,6 +240,7 @@ onMounted(async () => {
   getData();
 });
 </script>
+
 <template>
   <!-- v-if="mode" -->
   <div class="col-12">
@@ -273,6 +290,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -352,6 +370,7 @@ onMounted(async () => {
     :columns="columnsHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/02_Government/06_Assistance.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -34,6 +34,7 @@ const visibleColumns = ref<string[]>([
   "dateEnd",
   "commandNo",
   "document",
+  "lastUpdatedAt",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -83,7 +84,22 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    format: (v) => date2Thai(v, false, true),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "agency",
@@ -264,6 +280,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

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,82 @@ function onSearch() {
   );
 }
 
+async function fetchDataTenure() {
+  console.log(link.value);
+
+  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 = data.position ? formatData(data.position) : []; //ระยะเวลาดำรงตำแหน่งในสายงาน
+        const posLevel = data.posLevel ? formatData(data.posLevel) : []; //ระยะเวลาดำรงตำแหน่งตามระดับ
+        const posExecutive = data.posExecutive
+          ? formatData(data.posExecutive)
+          : []; //ระยะเวลาดำรงตำแหน่งทางการบริหาร
+
+        // นำข้อมูลไปใส่ใน cardData
+        cardData.value[0].data = position;
+        cardData.value[1].data = posLevel;
+        if (link.value !== "-employee") {
+          cardData.value[2].data = posExecutive;
+        }
+
+        //เช็คค่า ระยะเวลาดำรงตำแหน่งทางการบริหาร ถ้าไม่มีให้ลบออกจาก cardData
+        if (
+          posExecutive.length === 0 &&
+          link.value !== "-employee" &&
+          cardData.value.length > 2
+        ) {
+          cardData.value.splice(2, 1);
+        }
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
+  if (link.value === "-employee") {
+    cardData.value.splice(2, 1);
+  }
   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">
+      <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 +613,98 @@ 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-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="(col, index) in props.cols"
+              :key="col.name"
+              :class="props.row.isEntry ? 'text-red' : ''"
             >
-              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+              <div v-if="col.name == 'no'">
-            </q-btn>
+                {{ props.rowIndex + 1 }}
-          </q-td>
+              </div>
-        </q-tr>
+              <div v-else-if="col.name == 'status'">
-      </template>
+                {{ props.row.status ? props.row.status : "-" }}
-      <template v-else v-slot:item="props">
+              </div>
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+              <div v-else>
-          <q-card bordered flat>
+                {{ col.value ? col.value : "-" }}
-            <q-list dense class="q-mt-lg relative-position">
+              </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/03_Salary/01_Salary.vue

@@ -551,7 +551,11 @@ onMounted(async () => {
 
       <template v-if="mode" v-slot:body="props">
         <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
+          <q-td
+            v-for="(col, index) in props.cols"
+            :key="col.name"
+            :class="props.row.isEntry ? 'text-red' : ''"
+          >
             <div v-if="col.name == 'no'">
               {{ props.rowIndex + 1 }}
             </div>

src/modules/10_registry/03_Salary/02_Nopaid.vue

@@ -22,7 +22,8 @@ const rowsHistoryData = ref<NopaidFormType[]>([]);
 const $q = useQuasar();
 const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const modalHistory = ref<boolean>(false);
 /** ตัวแปรข้อมูล */
@@ -115,11 +116,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "date",
@@ -208,7 +212,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -319,6 +323,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/01_Certificate.vue

@@ -16,7 +16,8 @@ const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 
 const idByRow = ref<string>("");
 const rows = ref<CertificateDetail[]>([]);
@@ -38,7 +39,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
@@ -114,13 +114,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "certificateType",
@@ -131,7 +134,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
@@ -207,7 +209,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -323,6 +325,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/02_Training.vue

@@ -43,7 +43,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -178,13 +177,16 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "name", // ชื่อโครงงาน
@@ -200,7 +202,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName", // แก้ไขโดย
   "lastUpdatedAt", // แก้ไขเมื่อวันที่
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -335,7 +336,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     label: "วันที่แก้ไข",
     sortable: true,
     field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -451,6 +452,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/03_Insignia.vue

@@ -47,7 +47,6 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -230,11 +229,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "insignia",
@@ -253,7 +255,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -425,7 +426,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, true, false),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -540,6 +541,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/04_Honor.vue

@@ -40,7 +40,6 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "issueDate",
@@ -118,11 +117,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "issuer",
@@ -210,7 +212,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -323,6 +325,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/05_Assessments.vue

@@ -170,7 +170,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -306,7 +306,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -325,6 +325,9 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumns = ref<string[]>([
   "point1Total",
@@ -469,6 +472,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue

@@ -24,7 +24,8 @@ const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
 const mode = ref<boolean>($q.screen.gt.xs);
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai,onSearchDataTable } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  mixin;
 const modalDevelop = ref<boolean>(false);
 const kpiDevelopmentId = ref<string>("");
 
@@ -47,7 +48,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "no",
     align: "left",
     label: "ลำดับ",
-    sortable: true,
+    sortable: false,
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -57,7 +58,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "name",
     align: "left",
     label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -68,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentProjects",
     align: "left",
     label: "วิธีการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentProjects",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -79,7 +80,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentTarget",
     align: "left",
     label: "เป้าหมายการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -90,7 +91,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentResults",
     align: "left",
     label: "วิธีการวัดผลการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -101,7 +102,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentReport",
     align: "left",
     label: "รายงานผลการพัฒนา",
-    sortable: true,
+    sortable: false,
     field: "developmentReport",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -112,7 +113,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastUpdateFullName",
     align: "left",
     label: "ผู้ดำเนินการ",
-    sortable: true,
+    sortable: false,
     field: "lastUpdateFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -123,11 +124,11 @@ const columns = ref<QTableProps["columns"]>([
     name: "lastUpdatedAt",
     align: "left",
     label: "วันที่แก้ไข",
-    sortable: true,
+    sortable: false,
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -192,7 +193,7 @@ function getHistory() {
 function openDialogDevelop(data: any) {
   modalDevelop.value = true;
   kpiDevelopmentId.value = data.kpiDevelopmentId;
-  typeIDP.value = data.type
+  typeIDP.value = data.type;
 }
 
 function onSearch() {
@@ -376,7 +377,11 @@ onMounted(async () => {
     </d-table>
   </div>
 
-  <DialogDevelop v-model:modal="modalDevelop" v-model:id="kpiDevelopmentId" :type="typeIDP"/>
+  <DialogDevelop
+    v-model:modal="modalDevelop"
+    v-model:id="kpiDevelopmentId"
+    :type="typeIDP"
+  />
 </template>
 <style scoped>
 .absolute_button {

src/modules/10_registry/05_Other/01_Other.vue

@@ -77,11 +77,14 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const visibleColumnsHistory = ref<string[]>([
   "date",
@@ -130,7 +133,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => date2Thai(v),
+    format: (v) => date2Thai(v, false, true),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -235,6 +238,7 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
+      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">

src/modules/10_registry/Dialog/DialogHistory.vue

@@ -17,6 +17,9 @@ const rows = defineModel<any>("rows");
 const rowsData = defineModel<any>("rowsData");
 const columns = defineModel<QTableProps["columns"]>("columns");
 const visibleColumns = defineModel<string[]>("visibleColumns");
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
 const props = defineProps({
   getData: Function,
@@ -24,7 +27,7 @@ const props = defineProps({
 });
 function close() {
   modal.value = false;
-  filter.value = ''
+  filter.value = "";
 }
 
 function dateThaiRange(val: [Date, Date]) {
@@ -119,6 +122,7 @@ watch(
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
           :virtual-scroll-sticky-size-start="48"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">

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/modules/10_registry/tabs/01_information.vue

@@ -11,6 +11,7 @@ import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";
 
 const router = useRouter();
 </script>
+
 <template>
   <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle text-white col-12 row items-center">
@@ -37,6 +38,7 @@ const router = useRouter();
     <Ability />
   </div>
 </template>
+
 <style scoped>
 .mobileClass {
   background-color: #fff;

src/modules/10_registry/views/requestEditMain.vue

@@ -69,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "topic",
     align: "left",
     label: "ชื่อเรื่อง",
-    sortable: true,
+    sortable: false,
     field: "topic",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -79,7 +79,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "detail",
     align: "left",
     label: "รายละเอียด",
-    sortable: true,
+    sortable: false,
     field: "detail",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -98,7 +98,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะคำร้อง",
-    sortable: true,
+    sortable: false,
     field: "status",
     format: (v) => store.convertStatus(v),
     headerStyle: "font-size: 14px",
@@ -108,7 +108,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ ",
-    sortable: true,
+    sortable: false,
     field: "remark",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",

src/stores/mixin.ts

@@ -1158,6 +1158,20 @@ 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(" ") : `${y} ปี ${m} เดือน ${d} วัน`; // กรณีที่ทั้งหมดเป็น 0
+    // return `${y} ปี ${m} เดือน ${d} วัน`;
+  }
+
   return {
     calAge,
     date2Thai,
@@ -1197,5 +1211,6 @@ export const useCounterMixin = defineStore("mixin", () => {
     findOrgNameOld,
     findPosMasterNo,
     onSearchDataTable,
+    formatDatePosition,
   };
 });