ข้อมูลทะเบียนประวัติ

src/api/KPI/api.kpis.ts

@@ -31,6 +31,8 @@ export default {
   /** ผลสัมฤทธิ์ของงาน*/
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
+  fileByFileUser: (name: string, group: string, id: string) =>
+    `${url}/file/${name}/${group}/${id}`,
   kpiUserCapacity: `${KpiUser}/capacity`,
   KpiEvaluationInfo,
   Kpiorg,

src/api/org/api.org.ts

@@ -1,10 +1,55 @@
 import env from "../index";
 
 const org = `${env.API_URI}/org`;
-
+const profileOrg = `${env.API_URI}/org/profile`;
+const report = `${env.API_URI}/report/profile/`;
 export default {
   profilePosition: () => `${org}/profile/keycloak/position`,
 
   searchCommander: `${org}/profile/search/commander`,
-  dataUserInformation: `${org}/profile/user`,
+
+  proFileType:`${profileOrg}/type`,
+  dataUserInformation: `${profileOrg}/user`,
+  dataUserChangeName: `${profileOrg}/changeName/user`,
+  dataUserAddress: `${profileOrg}/address/user`,
+  dataUserFamily:(type:string)=> `${profileOrg}/family/${type}/user`,
+  dataUserEducations: `${profileOrg}/educations/user`,
+  dataUserAbility: `${profileOrg}/ability/user`,
+
+
+
+  dataUserGovernment: `${profileOrg}/government/user`,
+  dataUserDiscipline: `${profileOrg}/discipline/user`,
+  dataUserLeave: `${profileOrg}/leave/user`,
+  dataUserDuty: `${profileOrg}/duty/user`,
+
+  dataUserSalary: `${profileOrg}/salary/user`,
+  dataUserNopaid: `${profileOrg}/nopaid/user`,
+
+  dataUserCertificate:(type:string) => `${profileOrg}/${type}/user`,
+
+  dataUserOther:`${profileOrg}/other/user`,
+
+  profileReportId: (profileId: string) => `${report}kk1/${profileId}`,
+  profileKp7ShortId: (profileId: string) => `${report}kp7-short/${profileId}`,
+  
+  /** history */
+  dataUserInformatioHistory:(type:string)=> `${profileOrg}${type}/history/user`,
+  dataUserChangeNameHistory: `${profileOrg}/changeName/history`,
+  dataUserHistory:(type:string)=>  `${profileOrg}${type}/address/history/user`,
+  dataUserFamilyHistory:(type:string,emType:string,id:string)=> `${profileOrg}${emType}/family/${type}/history/${id}`,
+  dataUserEducationsHistory:(id:string)=> `${profileOrg}/educations/history/${id}`,
+  dataUserAbilityHistory:(id:string)=> `${profileOrg}/ability/history/${id}`,
+
+  dataUserGovernmentHistory:(type:string)=>  `${profileOrg}${type}/government/history/user`,
+  dataUserDisciplineHistory:(id:string)=> `${profileOrg}/discipline/history/${id}`,
+  dataUserLeaveHistory: (id:string)=>`${profileOrg}/leave/history/${id}`,
+  dataUserDutyHistory:(id:string)=> `${profileOrg}/duty/history/${id}`,
+
+  dataUserSalaryHistory: (id:string)=>`${profileOrg}/salary/history/${id}`,
+  dataUserSalaryNopaidHistory: (id:string)=>`${profileOrg}/nopaid/history/${id}`,
+
+  dataUserCertificateHistory:(type:string,id:string) => `${profileOrg}/${type}/history/${id}`,
+  dataUserHonorHistory:(type:string,emType:string,id:string) => `${profileOrg}${emType}/${type}/history/${id}`,
+  dataUserOtherHistory:(id:string)=>`${profileOrg}/other/history/${id}`,
 };

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

@@ -0,0 +1,421 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
+import { ref, reactive,onMounted } from "vue";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const store = useRegistryInFormationStore();
+const rowsHistory = ref<any[]>([])
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+const formDataInformation = reactive<any>({
+  citizenId: "", //เลขบัตรประจำตัวประชาชน
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  birthDate: "", //วันเกิด
+  gender: "", //เพศ
+  relationship: "", //สถานภาพ
+
+  nationality: "", //สัญชาติ
+  ethnicity: "", //เชื้อชาติ
+  religion: "", //ศาสนา
+  bloodGroup: "", //หมู่เลือด
+  phone: "", //เบอร์โทร
+});
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "rank",
+    align: "left",
+    label: "ยศ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "birthDate",
+    align: "left",
+    label: "วัน/เดือน/ปี เกิด",
+    sortable: true,
+    field: "birthDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "gender",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "relationship",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "หมู่เลือด",
+    sortable: true,
+    field: "bloodGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "nationality",
+    align: "left",
+    label: "สัญชาติ",
+    sortable: true,
+    field: "nationality",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "ethnicity",
+    align: "left",
+    label: "เชื้อชาติ",
+    sortable: true,
+    field: "ethnicity",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "religion",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "phone",
+    align: "left",
+    label: "เบอร์โทร",
+    sortable: true,
+    field: "phone",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumnsHistory = ref<string[]>([
+  "citizenId",
+  "prefix",
+  "rank",
+  "firstName",
+  "lastName",
+  "birthDate",
+  "gender",
+  "relationship",
+  "bloodGroup",
+  "nationality",
+  "ethnicity",
+  "religion",
+  "phone",
+  "createdFullName",
+  "createdAt",
+]);
+
+
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserInformation)
+    .then((res) => {
+      const data = res.data.result;
+      formDataInformation.citizenId = data.citizenId;
+      formDataInformation.prefix = data.prefix;
+      formDataInformation.firstName = data.firstName;
+      formDataInformation.lastName = data.lastName;
+      formDataInformation.birthDate = data.birthDate;
+      formDataInformation.gender = data.gender;
+      formDataInformation.relationship = data.relationship;
+
+      formDataInformation.nationality = data.nationality;
+      formDataInformation.ethnicity = data.ethnicity;
+      formDataInformation.religion = data.religion;
+      formDataInformation.bloodGroup = data.bloodGroup;
+      formDataInformation.phone = data.phone;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  const url = store.typeProfile == 'OFFICER' ? config.API.dataUserInformatioHistory(''):config.API.dataUserInformatioHistory('-employee')
+  showLoader();
+  http
+    .get(url)
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <div class="col-12">
+    <q-toolbar class="q-px-none">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >ประวัติส่วนตัว</span
+      >
+      <q-space />
+      <q-btn
+        icon="mdi-history"
+        color="info"
+        flat
+        dense
+        round
+        size="14px"
+        @click="onHistory"
+      >
+        <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
+      </q-btn>
+    </q-toolbar>
+    <q-card bordered class="bg-grey-1 q-pa-md">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขบัตรประจำตัวประชาชน
+            </div>
+            <div class="col-7">
+              {{
+                formDataInformation.citizenId
+                  ? formDataInformation.citizenId
+                  : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ - สกุล</div>
+            <div class="col-7">
+              {{
+                formDataInformation.firstName
+                  ? `${formDataInformation.prefix}${formDataInformation.firstName} ${formDataInformation.lastName}`
+                  : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              วัน/เดือน/ปีเกิด
+            </div>
+            <div class="col-7">
+              {{
+                formDataInformation.birthDate
+                  ? date2Thai(formDataInformation.birthDate)
+                  : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
+            <div class="col-7">
+              {{
+                formDataInformation.gender ? formDataInformation.gender : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
+            <div class="col-7">
+              {{
+                formDataInformation.relationship
+                  ? formDataInformation.relationship
+                  : "-"
+              }}
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
+            <div class="col-7">
+              {{
+                formDataInformation.nationality
+                  ? formDataInformation.nationality
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
+            <div class="col-7">
+              {{
+                formDataInformation.ethnicity
+                  ? formDataInformation.ethnicity
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
+            <div class="col-7">
+              {{
+                formDataInformation.religion
+                  ? formDataInformation.religion
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
+            <div class="col-7">
+              {{
+                formDataInformation.bloodGroup
+                  ? formDataInformation.bloodGroup
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
+            <div class="col-7">
+              {{ formDataInformation.phone ? formDataInformation.phone : "-" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขข้อมูลส่วนตัว'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>

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

@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByrow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    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[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByrow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserChangeName)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserChangeNameHistory+`/${idByrow.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >ประวัติการเปลี่ยนชื่อ-นามสกุล</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else>
+              {{ col.value? col.value:'-' }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+              </q-btn>
+              <q-item v-for="col in props.cols" :key="col.name">
+
+                <q-item-section>
+                  <q-item-label class="text-grey-6 text-weight-medium">{{
+                    col.label
+                  }}</q-item-label>
+                </q-item-section>
+                <q-item-section>
+                  <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
+          </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+</style>

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

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+const store = useRegistryInFormationStore();
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const formData = reactive<any>({
+  registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
+  registrationProvince: "", //จังหวัด
+  registrationDistrict: "", //เขต / อำเภอ
+  registrationSubDistrict: "", //แขวง / ตำบล
+  registrationZipCode: "", //รหัสไปรษณีย์
+
+  currentAddress: "", //ที่อยู่ปัจจุบัน
+  currentProvince: "", //จังหวัด
+  currentDistrict: "", //เขต / อำเภอ
+  currentSubDistrict: "", //แขวง / ตำบล
+  currentZipCode: "", //รหัสไปรษณีย์
+});
+
+const visibleColumnsHistory = ref<string[]>([
+  "currentAddress",
+  "currentDistrict",
+  "currentProvince",
+  "currentSubDistrict",
+  "currentZipCode",
+  "registrationAddress",
+  "registrationDistrict",
+  "registrationProvince",
+  "registrationSame",
+  "registrationSubDistrict",
+  "registrationZipCode",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "registrationAddress",
+    align: "left",
+    label: "ที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationProvince",
+    align: "left",
+    label: "จังหวัดตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v ? v.name : "-"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationDistrict",
+    align: "left",
+    label: "เขต/อำเภอตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v ? v.name : "-"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSubDistrict",
+    align: "left",
+    label: "แขวง/ตำบลตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v ? v.name : "-"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
+    sortable: true,
+    field: "registrationZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "registrationSame",
+    align: "left",
+    label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
+    sortable: true,
+    field: (v) =>
+      v.registrationAddress === v.currentAddress &&
+      v.registrationZipCode === v.currentZipCode
+        ? "ใช่"
+        : "ไม่",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentAddress",
+    align: "left",
+    label: "ที่อยู่ปัจจุบัน",
+    sortable: true,
+    field: "currentAddress",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentProvince",
+    align: "left",
+    label: "จังหวัดปัจจุบัน",
+    sortable: true,
+    field: "currentProvince",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v ? v.name : "-"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentDistrict",
+    align: "left",
+    label: "เขต/อำเภอปัจจุบัน",
+    sortable: true,
+    field: "currentDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v ? v.name : "-"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentSubDistrict",
+    align: "left",
+    label: "แขวง/ตำบลปัจจุบัน",
+    sortable: true,
+    field: "currentSubDistrict",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v ? v.name : "-"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "currentZipCode",
+    align: "left",
+    label: "รหัสไปรษณีย์ปัจจุบัน",
+    sortable: true,
+    field: "currentZipCode",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserAddress)
+    .then((res) => {
+      const data = res.data.result;
+      formData.registrationAddress = data.registrationAddress;
+      formData.registrationProvince = data.registrationProvince;
+      formData.registrationDistrict = data.registrationDistrict;
+      formData.registrationSubDistrict = data.registrationSubDistrict;
+      formData.registrationZipCode = data.registrationZipCode;
+      formData.currentAddress = data.currentAddress;
+      formData.currentProvince = data.currentProvince;
+      formData.currentDistrict = data.currentDistrict;
+      formData.currentSubDistrict = data.currentSubDistrict;
+      formData.currentZipCode = data.currentZipCode;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  const url = store.typeProfile == 'OFFICER' ? config.API.dataUserHistory(''):config.API.dataUserHistory('-employee')
+  showLoader();
+  http
+    .get(url)
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <div class="col-12">
+    <q-toolbar class="q-px-none">
+      <span class="text-blue-6 text-weight-bold text-body1">ข้อมูลที่อยู่</span>
+      <q-space />
+      <q-btn icon="mdi-history" color="info" flat dense round size="14px" @click="onHistory">
+        <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
+      </q-btn>
+    </q-toolbar>
+    <q-card bordered class="bg-grey-1 q-pa-md">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              ที่อยู่ตามทะเบียนบ้าน
+            </div>
+            <div class="col-7">
+              {{
+                formData.registrationAddress
+                  ? formData.registrationAddress
+                  : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
+            <div class="col-7">
+              {{
+                formData.registrationProvince
+                  ? formData.registrationProvince
+                  : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
+            <div class="col-7">
+              {{
+                formData.registrationDistrict
+                  ? formData.registrationDistrict
+                  : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
+            <div class="col-7">
+              {{
+                formData.registrationSubDistrict
+                  ? formData.registrationSubDistrict
+                  : "-"
+              }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
+            <div class="col-7">
+              {{
+                formData.registrationZipCode
+                  ? formData.registrationZipCode
+                  : "-"
+              }}
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              ที่อยู่ปัจจุบัน
+            </div>
+            <div class="col-7">
+              {{ formData.currentAddress ? formData.currentAddress : "-" }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
+            <div class="col-7">
+              {{ formData.currentProvince ? formData.currentProvince : "-" }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
+            <div class="col-7">
+              {{ formData.currentDistrict ? formData.currentDistrict : "-" }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
+            <div class="col-7">
+              {{
+                formData.currentSubDistrict ? formData.currentSubDistrict : "-"
+              }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
+            <div class="col-7">
+              {{ formData.currentZipCode ? formData.currentZipCode : "-" }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขข้อมูลที่อยู่'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>

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

@@ -0,0 +1,600 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { FormChildren } from "@/modules/10_registry/interface/index/Family";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+const idFamily = ref<string>('')
+const store = useRegistryInFormationStore();
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const typeForm = ref<string>("");
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+/** ข้อมูล*/
+const fromData = reactive({
+  isLive: 1,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+  lastNameOld: "",
+  statusMarital: "",
+});
+
+const fatherData = reactive<any>({
+  isLive: null,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+  profileId:''
+});
+const motherData = reactive<any>({
+  isLive: null,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+  profileId:''
+});
+const coupleData = reactive<any>({
+  isLive: null,
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  job: "",
+  lastNameOld: "",
+  statusMarital: "",
+  profileId:''
+});
+
+const childData = ref<FormChildren[]>([]);
+
+const visibleColumnsHistory = ref<string[]>([
+  "citizenId",
+  "prefix",
+  "firstName",
+  "lastName",
+  "job",
+  "isLive",
+  "lastNameOld",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastNameOld",
+    align: "left",
+    label: "นามสกุลเดิม",
+    sortable: true,
+    field: "lastNameOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "job",
+    align: "left",
+    label: "อาชีพ",
+    sortable: true,
+    field: "job",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "isLive",
+    align: "left",
+    label: "สถานภาพการมีชีวิต",
+    sortable: true,
+    field: "isLive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => (val ? "มีชีวิต" : "ถึงแก่กรรม"),
+  },
+]);
+
+function onHistory(type: string,id:string) {
+  modalHistory.value = true;
+  typeForm.value = type;
+  idFamily.value = id ? id:'user'
+}
+
+/** get data */
+function getData(type: string) {
+  //   father
+  // mother
+  // couple
+  // children
+  showLoader();
+  http
+    .get(config.API.dataUserFamily(type))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        if (type == "father") {
+          fatherData.isLive = data.fatherLive;
+          fatherData.citizenId = data.fatherCitizenId;
+          fatherData.prefix = data.fatherPrefix;
+          fatherData.firstName = data.fatherFirstName;
+          fatherData.lastName = data.fatherLastName;
+          fatherData.job = data.fatherCareer;
+          fatherData.profileId = data.profileId;
+        } else if (type == "mother") {
+          motherData.isLive = data.motherLive;
+          motherData.citizenId = data.motherCitizenId;
+          motherData.prefix = data.motherPrefix;
+          motherData.firstName = data.motherFirstName;
+          motherData.lastName = data.motherLastName;
+          motherData.job = data.motherCareer;
+          motherData.profileId = data.profileId;
+        } else if (type == "couple") {
+          coupleData.isLive = data.coupleLive;
+          coupleData.citizenId = data.coupleCitizenId;
+          coupleData.prefix = data.couplePrefix;
+          coupleData.firstName = data.coupleFirstName;
+          coupleData.lastName = data.coupleLastName;
+          coupleData.job = data.coupleCareer;
+          coupleData.lastNameOld = data.coupleLastNameOld;
+          coupleData.statusMarital = data.relationship;
+          coupleData.profileId = data.profileId;
+        } else {
+          childData.value = data;
+        }
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  const url = store.typeProfile == 'OFFICER' ? config.API.dataUserFamilyHistory(typeForm.value,'',idFamily.value):config.API.dataUserFamilyHistory(typeForm.value,'-employee',idFamily.value)
+
+  showLoader();
+  http
+    .get(url)
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data.map((e: any) => ({
+        citizenId: e[`${typeForm.value}CitizenId`],
+        prefix: e[`${typeForm.value}Prefix`],
+        firstName: e[`${typeForm.value}FirstName`],
+        lastName: e[`${typeForm.value}LastName`],
+        job: e[`${typeForm.value}Career`],
+        isLive: e[`${typeForm.value}Live`],
+        lastNameOld: typeForm.value === "couple" ? e.coupleLastNameOld : undefined,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await getData("father");
+  await getData("mother");
+  await getData("couple");
+  await getData("children");
+});
+</script>
+<template>
+  <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">
+
+
+      <div class="col-12" v-if="fatherData.profileId !== ''">
+        <q-card bordered class="q-pa-md">
+          <div class="row">
+            <span class="text-blue-6 text-weight-bold text-body1">• บิดา</span>
+            <q-space />
+            <q-btn
+              icon="mdi-history"
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              @click="onHistory('father','')"
+            >
+              <q-tooltip>ประวัติการแก้ไขข้อมูลบิดา</q-tooltip>
+            </q-btn>
+            <div class="col-12">
+              <q-card bordered class="bg-grey-1 q-pa-sm">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        เลขบัตรประจำตัวประชาชน
+                      </div>
+                      <div class="col-7">
+                        {{ fatherData.citizenId ? fatherData.citizenId : "-" }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        ชื่อ-นามสกุล
+                      </div>
+                      <div class="col-7">
+                        {{
+                          fatherData.firstName
+                            ? `${fatherData.prefix}${fatherData.firstName} ${fatherData.lastName}`
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        สถานภาพการมีชีวิต
+                      </div>
+                      <div class="col-7">
+                        {{
+                          fatherData.isLive === true
+                            ? "มีชีวิตอยู่"
+                            : fatherData.isLive === false
+                            ? "ถึงแก่กรรม"
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        อาชีพ
+                      </div>
+                      <div class="col-7">
+                        {{ fatherData.job ? fatherData.job : "-" }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card>
+      </div>
+      <!-- แม่ -->
+      <div class="col-12" v-if="motherData.profileId !== ''">
+        <q-card bordered class="q-pa-md">
+          <div class="row">
+            <span class="text-blue-6 text-weight-bold text-body1">• มารดา</span>
+            <q-space />
+            <q-btn
+              icon="mdi-history"
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              @click="onHistory('mother','')"
+            >
+              <q-tooltip>ประวัติการแก้ไขข้อมูลมารดา</q-tooltip>
+            </q-btn>
+            <div class="col-12">
+              <q-card bordered class="bg-grey-1 q-pa-sm">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        เลขบัตรประจำตัวประชาชน
+                      </div>
+                      <div class="col-7">
+                        {{ motherData.citizenId ? motherData.citizenId : "-" }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        ชื่อ-นามสกุล
+                      </div>
+                      <div class="col-7">
+                        {{
+                          motherData.firstName
+                            ? `${motherData.prefix}${motherData.firstName} ${motherData.lastName}`
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        สถานภาพการมีชีวิต
+                      </div>
+                      <div class="col-7">
+                        {{
+                          motherData.isLive === true
+                            ? "มีชีวิตอยู่"
+                            : motherData.isLive === false
+                            ? "ถึงแก่กรรม"
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        อาชีพ
+                      </div>
+                      <div class="col-7">
+                        {{ motherData.job ? motherData.job : "-" }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <!-- คู่สมรส -->
+      <div class="col-12" v-if="coupleData.profileId !== ''">
+        <q-card bordered class="q-pa-md">
+          <div class="row">
+            <span class="text-blue-6 text-weight-bold text-body1"
+              >• คู่สมรส</span
+            >
+            <q-space />
+            <q-btn
+              icon="mdi-history"
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              @click="onHistory('couple','')"
+            >
+              <q-tooltip>ประวัติการแก้ไขข้อมูลคู่สมรส</q-tooltip>
+            </q-btn>
+            <div class="col-12">
+              <q-card bordered class="bg-grey-1 q-pa-sm">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        สถานภาพการสมรส
+                      </div>
+                      <div class="col-7">
+                        {{ coupleData.statusMarital ? coupleData.statusMarital : "-" }}
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        เลขบัตรประจำตัวประชาชน
+                      </div>
+                      <div class="col-7">
+                        {{ coupleData.citizenId ? coupleData.citizenId : "-" }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        ชื่อ-นามสกุล
+                      </div>
+                      <div class="col-7">
+                        {{
+                          coupleData.firstName
+                            ? `${coupleData.prefix}${coupleData.firstName} ${coupleData.lastName}`
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        นามสกุลเดิม
+                      </div>
+                      <div class="col-7">
+                        {{ coupleData.lastNameOld ? coupleData.lastNameOld : "-" }}
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        สถานภาพการมีชีวิต
+                      </div>
+                      <div class="col-7">
+                        {{
+                          coupleData.isLive === true
+                            ? "มีชีวิตอยู่"
+                            : coupleData.isLive === false
+                            ? "ถึงแก่กรรม"
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        อาชีพ
+                      </div>
+                      <div class="col-7">
+                        {{ coupleData.job ? coupleData.job : "-" }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <!-- ลูก -->
+      <div v-if="childData.length !== 0" class="col-12 q-gutter-y-sm">
+        <q-card
+          v-for="(item, index) in childData"
+          bordered
+          class="q-pa-md"
+          :key="item.id"
+        >
+          <div class="row">
+            <span class="text-blue-6 text-weight-bold text-body1"
+              >• บุตรคนที่ {{ index + 1 }}</span
+            >
+            <q-space />
+            <q-btn
+              icon="mdi-history"
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              @click="onHistory('children',item.id)"
+            >
+              <q-tooltip>ประวัติการแก้ไขข้อมูลบุตร</q-tooltip>
+            </q-btn>
+            <div class="col-12">
+              <q-card bordered class="bg-grey-1 q-pa-sm">
+                <div class="row">
+                  <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        เลขบัตรประจำตัวประชาชน
+                      </div>
+                      <div class="col-7">
+                        {{
+                          item.childrenCitizenId ? item.childrenCitizenId : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        ชื่อ-นามสกุล
+                      </div>
+                      <div class="col-7">
+                        {{
+                          item.childrenFirstName
+                            ? `${item.childrenPrefix}${item.childrenFirstName} ${item.childrenLastName}`
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        สถานภาพการมีชีวิต
+                      </div>
+                      <div class="col-7">
+                        {{
+                          item.childrenLive === true
+                            ? "มีชีวิตอยู่"
+                            : item.childrenLive === false
+                            ? "ถึงแก่กรรม"
+                            : "-"
+                        }}
+                      </div>
+                    </div>
+
+                    <div class="row">
+                      <div class="col-5 text-grey-6 text-weight-medium">
+                        อาชีพ
+                      </div>
+                      <div class="col-7">
+                        {{ item.childrenCareer ? item.childrenCareer : "-" }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    mother
+    :title="`ประวัติการแก้ไขข้อมูล${
+      typeForm === 'father'
+        ? 'บิดา'
+        : typeForm === 'mother'
+        ? 'มารดา'
+        : typeForm === 'couple'
+        ? 'คู่สมรส'
+        : 'บุตร'
+    }`"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="
+      typeForm === 'couple'
+        ? columnsHistory
+        : columnsHistory?.filter((e) => e.name !== 'lastNameOld')
+    "
+  />
+</template>
+
+<style scoped>
+.cardStyle {
+  border-radius: 8px !important;
+  border: 1px solid #eeeded;
+  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+}
+</style>

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

@@ -0,0 +1,636 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "educationLevel",
+  "institute",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "educationLevel",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "educationLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: (v) =>
+      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร (ปี)",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "educationLevel",
+    align: "left",
+    label: "ระดับศึกษา",
+    sortable: true,
+    field: "educationLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: (v) =>
+      v.isDate
+        ? date2Thai(v.startDate)
+        : new Date(v.startDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: (v) =>
+      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร (ปี)",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    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",
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserEducations)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserEducationsHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >ประวัติการศึกษา</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลประวัติการศึกษา
+          </span>
+        </div>
+      </template>
+
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขประวัติการศึกษา'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

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

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    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[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "field",
+    align: "left",
+    label: "ด้าน",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px; width: 50px;",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "remark",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserAbility)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserAbilityHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >ความสามารถพิเศษ</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขความสามารถพิเศษ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลความสามารถพิเศษ
+          </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขความสามารถพิเศษ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

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

@@ -0,0 +1,500 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+import { useRegistryInFormationStore } from '@/modules/10_registry/store/registry'
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const store = useRegistryInFormationStore()
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
+
+const modalHistory = ref<boolean>(false);
+
+/** ตัวแปรข้อมูล */
+const formData = reactive<any>({
+  org: "",
+  positionField: "",
+  position: "",
+  posLevel: null,
+  posMasterNo: "",
+  posType: null,
+  posExecutive: "",
+  positionArea: "",
+  positionExecutiveField: "",
+  dateLeave: "",
+  dateRetireLaw: "",
+  govAge: {
+    year: 0,
+    month: 0,
+    day: 0,
+  },
+  dateAppoint: null,
+  dateStart: null,
+  govAgeAbsent: 0,
+  govAgePlus: 0,
+  reasonSameDate: "",
+});
+
+const visibleColumnsHistory = ref<string[]>([
+  "oc",
+  "position",
+  "positionPathSide",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่บรรจุ",
+    sortable: true,
+    field: "dateAppoint",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "retireDate",
+    align: "left",
+    label: "วันเกษียณอายุ",
+    sortable: true,
+    field: "retireDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgeAbsent",
+    align: "left",
+    label: "ขาดราชการ",
+    sortable: true,
+    field: "govAgeAbsent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "govAgePlus",
+    align: "left",
+    label: "อายุราชการเกื้อกูล",
+    sortable: true,
+    field: "govAgePlus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reasonSameDate",
+    align: "left",
+    label: "เหตุผลกรณีไม่ตรงวัน",
+    sortable: true,
+    field: "reasonSameDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserGovernment)
+    .then((res) => {
+      const data = res.data.result;
+      formData.org = data.org;
+      formData.positionField = data.positionField;
+      formData.position = data.position;
+      formData.posLevel = data.posLevel;
+      formData.posMasterNo = data.posMasterNo;
+      formData.posType = data.posType;
+      formData.posExecutive = data.posExecutive;
+      formData.positionArea = data.positionArea;
+      formData.positionExecutiveField = data.positionExecutiveField;
+      formData.dateLeave = data.dateLeave;
+      formData.dateRetireLaw = data.dateRetireLaw;
+
+      formData.govAge = data.govAge;
+      formData.dateAppoint = data.dateAppoint;
+      formData.dateStart = data.dateStart;
+      formData.govAgeAbsent = data.govAgeAbsent;
+      formData.govAgePlus = data.govAgePlus;
+      formData.reasonSameDate = data.reasonSameDate;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  const url = store.typeProfile == 'OFFICER' ? config.API.dataUserGovernmentHistory(''):config.API.dataUserGovernmentHistory('-employee')
+  showLoader();
+  http
+    .get(url)
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <div class="col-12">
+    <q-toolbar class="q-px-none">
+      <span class="text-blue-6 text-weight-bold text-body1">ข้อมูลราชการ</span>
+      <q-space />
+      <q-btn
+        icon="mdi-history"
+        color="info"
+        flat
+        dense
+        round
+        size="14px"
+        @click="onHistory"
+      >
+        <q-tooltip>ประวัติข้อมูลราชการ</q-tooltip>
+      </q-btn>
+    </q-toolbar>
+    <q-card bordered class="bg-grey-1 q-pa-md">
+      <div class="row q-col-gutter-y-sm">
+        <div class="col-12 col-sm-12 col-md-6">
+          <div class="row q-col-gutter-y-sm">
+            <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
+            <div class="col-7">
+              {{ formData.org ? formData.org : "-" }}
+            </div>
+            <div class="col-5 text-grey-6 text-weight-medium">ตำแหน่ง</div>
+            <div class="col-7">
+              {{ formData.position ? formData.position : "-" }}
+            </div>
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขที่ตำแหน่ง
+            </div>
+            <div class="col-7">
+              {{ formData.posMasterNo ? formData.posMasterNo : "-" }}
+            </div>
+            <div v-if="store.typeProfile == 'OFFICER'" class="col-5 text-grey-6 text-weight-medium">
+              ตำแหน่งทางการบริหาร
+            </div>
+            <div v-if="store.typeProfile == 'OFFICER'" class="col-7">
+              {{ formData.posExecutive ? formData.posExecutive : "-" }}
+            </div>
+            <div v-if="store.typeProfile == 'OFFICER'" class="col-5 text-grey-6 text-weight-medium">
+              ด้านทางการบริหาร
+            </div>
+            <div v-if="store.typeProfile == 'OFFICER'" class="col-7">
+              {{
+                formData.positionExecutiveField
+                  ? formData.positionExecutiveField
+                  : "-"
+              }}
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-sm-12 col-md-6">
+          <div class="row q-col-gutter-y-sm">
+            <div v-if="store.typeProfile == 'OFFICER'" class="col-5 text-grey-6 text-weight-medium">สายงาน</div>
+            <div v-if="store.typeProfile == 'OFFICER'" class="col-7">
+              {{ formData.positionField ? formData.positionField : "-" }}
+            </div>
+            <div class="col-5 text-grey-6 text-weight-medium">
+              {{store.typeProfile == 'OFFICER' ? 'ประเภทตำแหน่ง':'กลุ่มงาน'}}
+            </div>
+            <div class="col-7">
+              {{ formData.posType ? formData.posType : "-" }}
+            </div>
+            <div class="col-5 text-grey-6 text-weight-medium">{{store.typeProfile == 'OFFICER' ? 'ระดับตำแหน่ง':'ระดับชั้นงาน'}}</div>
+            <div class="col-7">
+              {{ formData.posLevel ? formData.posLevel : "-" }}
+            </div>
+            <div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
+            <div class="col-7">
+              {{ formData.positionArea ? formData.positionArea : "-" }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <q-separator class="q-my-md" />
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              วันที่สั่งบรรจุ
+            </div>
+            <div class="col-7">
+              {{ formData.dateAppoint ? date2Thai(formData.dateAppoint) : "-" }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              วันที่เริ่มปฏิบัติราชการ
+            </div>
+            <div class="col-7">
+              {{ formData.dateStart ? date2Thai(formData.dateStart) : "-" }}
+            </div>
+          </div>
+
+          <div
+            v-if="dateToISO(formData.dateAppoint as Date) !== dateToISO(formData.dateStart as Date)"
+            class="row"
+          >
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เหตุผลที่วันที่ไม่ตรงกัน
+            </div>
+            <div class="col-7">
+              {{ formData.reasonSameDate ? formData.reasonSameDate : "-" }}
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              วันครบเกษียณอายุ
+            </div>
+            <div class="col-7">
+              {{ formData.dateLeave ? date2Thai(formData.dateLeave) : "-" }}
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">อายุราชการ</div>
+            <div class="col-7">
+              {{
+                formData.govAge
+                  ? `${formData.govAge.year} วัน ${formData.govAge.month} เดือน ${formData.govAge.year} ปี`
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
+            <div class="col-7">
+              {{ formData.govAgeAbsent ? formData.govAgeAbsent : 0 }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              อายุราชการเกื้อกูล
+            </div>
+            <div class="col-7">
+              {{ formData.govAgePlus ? formData.govAgePlus : 0 }}
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              วันที่เกษียณอายุราชการตามกฏหมาย
+            </div>
+            <div class="col-7">
+              {{
+                formData.dateRetireLaw ? date2Thai(formData.dateRetireLaw) : "-"
+              }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขข้อมูลราชการ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>

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

@@ -0,0 +1,412 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+  "createdFullName",
+  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับการลงโทษทางวินัย",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    format: (v) => date2Thai(v),
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    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[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserDiscipline)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserDisciplineHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >วินัย</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value?col.value:'-' }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขวินัย</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลวินัย
+          </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขวินัย'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumns"
+    :columns="columns"
+  />
+
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

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

@@ -0,0 +1,480 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "typeLeave",
+  "dateLeave",
+  "numLeave",
+  "status",
+  "reason",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "left",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    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[]>([
+  "no",
+  "typeLeave",
+  "dateLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "typeLeave",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "typeLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateLeave",
+    align: "left",
+    label: "วัน เดือน ปี ที่ลา",
+    sortable: true,
+    field: "dateLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numLeave",
+    align: "left",
+    label: "จำนวนวันลา",
+    sortable: true,
+    field: "numLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reason",
+    align: "left",
+    label: "เหตุผล",
+    sortable: true,
+    field: "reason",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserLeave)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data.map((item: any) => ({
+        id: item.id,
+        typeLeave: item.leaveType.name,
+        code: item.leaveType.refCommandDate,
+        dateStartLeave: item.dateLeaveStart,
+        dateEndLeave: item.dateLeaveEnd,
+        numLeave: item.leaveDays,
+        status: item.status,
+        reason: item.reason,
+        typeLeaveId: item.leaveTypeId,
+
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserLeaveHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data.map((item: any) => ({
+        id: item.id,
+        typeLeave: item.leaveType.name,
+        code: item.leaveType.refCommandDate,
+        dateStartLeave: item.dateLeaveStart,
+        dateEndLeave: item.dateLeaveEnd,
+        numLeave: item.leaveDays,
+        status: item.status,
+        reason: item.reason,
+        typeLeaveId: item.leaveTypeId,
+        lastUpdateFullName: item.lastUpdateFullName,
+        lastUpdatedAt: item.lastUpdatedAt,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function statusLeave(val: string) {
+  switch (val) {
+    case "waitting":
+      return "รออนุมัติ";
+    case "reject":
+      return "ไม่ผ่านการอนุมัติ";
+    case "approve":
+      return "ผ่านการอนุมัติ";
+    case "cancel":
+      return "ยกเลิก";
+    default:
+      return "-";
+  }
+}
+
+function dateThaiRange(val: [Date, Date]) {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1">การลา</span>
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'dateLeave'">
+              {{
+                dateThaiRange([
+                  props.row.dateStartLeave,
+                  props.row.dateEndLeave,
+                ])
+              }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? statusLeave(props.row.status) : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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
+                    v-if="col.name == 'dateLeave'"
+                    class="text-dark text-weight-medium"
+                  >
+                    {{
+                      dateThaiRange([
+                        props.row.dateStartLeave,
+                        props.row.dateEndLeave,
+                      ])
+                    }}</q-item-label
+                  >
+                  <q-item-label
+                  v-else-if="col.name == 'status'"
+                    class="text-dark text-weight-medium"
+                  >
+                  {{ props.row.status ? statusLeave(props.row.status) : "-" }}</q-item-label
+                  >
+                  <q-item-label v-else class="text-dark text-weight-medium">{{
+                    col.value ? col.value : "-"
+                  }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
+      <template v-slot:no-data>
+        <div
+          class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+        >
+          <span> ไม่พบข้อมูลการลา </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขการลา'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+    :type="'Leave'"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

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

@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "dateStart",
+  "dateEnd",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumnsHistory = ref<string[]>([
+  "dateStart",
+  "dateEnd",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "dateStart",
+    align: "left",
+    label: "เริ่มต้น",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "สิ้นสุด",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserDuty)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserDutyHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >ปฏิบัติราชการพิเศษ</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value?col.value:'-' }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลปฏิบัติราชการพิเศษ
+          </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขปฏิบัติราชการพิเศษ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

src/modules/10_registry/03_Salary/01_Salary.vue

@@ -0,0 +1,521 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "positionType",
+  "positionLevel",
+  "templateDoc",
+  "refCommandNo",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "templateDoc",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "templateDoc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+const visibleColumnsHistory = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "oc",
+  "position",
+  "posNo",
+  "positionLine",
+  "positionPathSide",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "salaryClass",
+  "templateDoc",
+  "refCommandNo",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    style: "font-size: 14px",
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    headerStyle: "font-size: 14px",
+    format: (v) => Number(v).toLocaleString(),
+    style: "font-size: 14px",
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionPathSide",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutive",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "positionExecutive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salaryClass",
+    align: "left",
+    label: "ตำแหน่ง (รายละเอียด)",
+    sortable: true,
+    field: "salaryClass",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "templateDoc",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "templateDoc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserSalary)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserSalaryHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</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-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value?col.value:'-' }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลตำแหน่ง/เงินเดือน
+          </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

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

@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "date",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+
+const visibleColumnsHistory = ref<string[]>([
+  "date",
+  "reference",
+  "detail",
+  "refCommandNo",
+  "refCommandDate",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "reference",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "reference",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserNopaid)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserSalaryNopaidHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >บันทึกวันที่ไม่ได้รับเงินเดือนฯ</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value?col.value:'-' }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลบันทึกวันที่ไม่ได้รับเงินเดือนฯ
+          </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

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

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "certificateType",
+  "issuer",
+  "certificateNo",
+  "issueDate",
+  "expireDate",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    format: (v) => date2Thai(v),
+    field: "expireDate",
+    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[]>([
+  "certificateType",
+  "issuer",
+  "certificateNo",
+  "issueDate",
+  "expireDate",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "certificateType",
+    align: "left",
+    label: "ชื่อใบอนุญาต",
+    sortable: true,
+    field: "certificateType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "หน่วยงานผู้ออกใบอนุญาต",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "certificateNo",
+    align: "left",
+    label: "เลขที่ใบอนุญาต",
+    sortable: true,
+    field: "certificateNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ออกใบอนุญาต",
+    sortable: true,
+    field: "issueDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "expireDate",
+    align: "left",
+    label: "วันที่หมดอายุ",
+    sortable: true,
+    format: (v) => date2Thai(v),
+    field: "expireDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificate("certificate"))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificateHistory("certificate",idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</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-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div
+          class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+        >
+          <span> ไม่พบข้อมูลใบอนุญาตประกอบวิชาชีพ </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>

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

@@ -0,0 +1,506 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>([
+  "name", // ชื่อโครงงาน
+  "topic", // หัวข้อ
+  "yearly", // ปีที่อบรม
+  "place", // สถานที่
+  "duration", // รวมระยะเวลา
+  "department", // หน่วยงานที่รับผิดชอบ
+  "numberOrder", // เลขที่คำสั่ง
+  "dateOrder", // คำสั่งลงวันที่
+  "startDate", // วันเริ่มต้น
+  "endDate", // วันสิ้นสุด
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: (v) =>
+      v.isDate
+        ? date2Thai(v.startDate)
+        : new Date(v.startDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: (v) =>
+      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    format: (v) => (v !== null ? v + 543 : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    format: (v) => date2Thai(v),
+    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[]>([
+  "name", // ชื่อโครงงาน
+  "topic", // หัวข้อ
+  "yearly", // ปีที่อบรม
+  "place", // สถานที่
+  "duration", // รวมระยะเวลา
+  "department", // หน่วยงานที่รับผิดชอบ
+  "numberOrder", // เลขที่คำสั่ง
+  "dateOrder", // คำสั่งลงวันที่
+  "startDate", // วันเริ่มต้น
+  "endDate", // วันสิ้นสุด
+  "lastUpdateFullName", // แก้ไขโดย
+  "lastUpdatedAt", // แก้ไขเมื่อวันที่
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "หัวข้อการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "topic",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "วันเริ่มต้นการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: (v) =>
+      v.isDate
+        ? date2Thai(v.startDate)
+        : new Date(v.startDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "วันสิ้นสุดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: (v) =>
+      v.isDate ? date2Thai(v.endDate) : new Date(v.endDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "yearly",
+    align: "left",
+    label: "ปีที่อบรม (พ.ศ.)",
+    sortable: true,
+    field: "yearly",
+    format: (v) => (v !== null ? v + 543 : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "place",
+    align: "left",
+    label: "สถานที่ฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "place",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "รวมระยะเวลาในการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "department",
+    align: "left",
+    label: "หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน",
+    sortable: true,
+    field: "department",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "numberOrder",
+    align: "left",
+    label: "เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ",
+    sortable: true,
+    field: "numberOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateOrder",
+    align: "left",
+    label: "คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่",
+    sortable: true,
+    field: "dateOrder",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificate("training"))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificateHistory("training",idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >การฝึกอบรม/ดูงาน</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            {{ col.value ? col.value : "-" }}
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div
+          class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+        >
+          <span> ไม่พบข้อมูลการฝึกอบรม/ดูงาน </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขการฝึกอบรม/ดูงาน'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>

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

@@ -0,0 +1,607 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+const idByRow = ref<string>('')
+const store = useRegistryInFormationStore();
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<String[]>([
+  "insignia",
+  "insigniaType",
+  "year",
+  "no",
+  "issue",
+  "volumeNo",
+  "volume",
+  "section",
+  "page",
+  "receiveDate",
+  "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
+  "note",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => v + 543,
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insigniaId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: (v) => v.insignia.insigniaType.name,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับที่",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    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[]>([
+  "insignia",
+  "insigniaType",
+  "year",
+  "no",
+  "issue",
+  "volumeNo",
+  "volume",
+  "section",
+  "page",
+  "receiveDate",
+  "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีที่ยื่นขอ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => v + 543,
+  },
+  {
+    name: "receiveDate",
+    align: "left",
+    label: "ลงวันที่",
+    sortable: true,
+    field: "receiveDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insignia",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "insigniaId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้น",
+    sortable: true,
+    field: (v) => v.insignia.insigniaType.name,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับที่",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "issue",
+    align: "left",
+    label: "ราชกิจจาฯ ฉบับที่",
+    sortable: true,
+    field: "issue",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volumeNo",
+    align: "left",
+    label: "เล่มที่",
+    sortable: true,
+    field: "volumeNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "volume",
+    align: "left",
+    label: "เล่ม",
+    sortable: true,
+    field: "volume",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "section",
+    align: "left",
+    label: "ตอน",
+    sortable: true,
+    field: "section",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "page",
+    align: "left",
+    label: "หน้า",
+    sortable: true,
+    field: "page",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateAnnounce",
+    align: "left",
+    label: "วันที่ประกาศในราชกิจจาฯ",
+    sortable: true,
+    field: "dateAnnounce",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificate("insignia"))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificateHistory("insignia",idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >เครื่องราชอิสริยาภรณ์</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'insignia'">
+              {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
+              }}{{
+                props.row.insignia.shortName
+                  ? `(${props.row.insignia.shortName})`
+                  : ""
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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 v-if="col.name == 'insignia'" class="fix_top">
+                  <q-item-label class="text-dark text-weight-medium"
+                    >{{
+                      props.row.insignia ? `${props.row.insignia.name} ` : "-"
+                    }}{{
+                      props.row.insignia.shortName
+                        ? `(${props.row.insignia.shortName})`
+                        : ""
+                    }}</q-item-label
+                  >
+                </q-item-section>
+                <q-item-section v-else 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>
+      <template v-slot:no-data>
+        <div
+          class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+        >
+          <span> ไม่พบข้อมูลเครื่องราชอิสริยาภรณ์ </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขเครื่องราชอิสริยาภรณ์'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+    :type="'insignia'"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>

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

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+const idByRow = ref<string>('')
+const store = useRegistryInFormationStore();
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<String[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: (v) =>
+      v.isDate
+        ? date2Thai(v.issueDate)
+        : new Date(v.issueDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumnsHistory = ref<string[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "issueDate",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: (v) =>
+      v.isDate
+        ? date2Thai(v.issueDate)
+        : new Date(v.issueDate).getFullYear() + 543,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "issuer",
+    align: "left",
+    label: "ผู้มีอำนาจลงนาม",
+    sortable: true,
+    field: "issuer",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificate('honor'))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  const url = store.typeProfile == 'OFFICER' ? config.API.dataUserHonorHistory('honor','',idByRow.value):config.API.dataUserHonorHistory('honor','-employee',idByRow.value)
+  showLoader();
+  http
+    .get(url)
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >ประกาศเกียรติคุณ</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value?col.value:'-' }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium">
+          <span>
+            ไม่พบข้อมูลประกาศเกียรติคุณ
+          </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขประกาศเกียรติคุณ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top{
+  justify-content: start!important;
+}
+</style>

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

@@ -0,0 +1,469 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ได้รับ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "point1Total",
+    align: "left",
+    label: "ส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: (v) => `${textPoint(v.pointSum)} ${textRangePoint(v.pointSum)}`,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<string[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+const visibleColumns = ref<string[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificate("assessments"))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserCertificateHistory("assessments",idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function textRangePoint(val: number | undefined) {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+  else return "";
+}
+
+function textPoint(val: number | undefined) {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+  if (val >= 60 && val <= 69) return "พอใช้";
+  if (val >= 70 && val <= 79) return "ดี";
+  if (val >= 80 && val <= 89) return "ดีมาก";
+  if (val >= 90 && val <= 100) return "ดีเด่น";
+  else return "-";
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1"
+        >ผลการประเมินการปฏิบัติราชการ</span
+      >
+      <q-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name == 'status'">
+              {{ props.row.status ? props.row.status : "-" }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div
+          class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+        >
+          <span> ไม่พบข้อมูลผลการประเมินการปฏิบัติราชการ </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>

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

@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+//history dialog
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const idByRow = ref<string>('')
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+const visibleColumns = ref<string[]>(["date", "detail"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    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[]>([
+  "date",
+  "detail",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width: 50px;",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    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",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onHistory(id:string) {
+  modalHistory.value = true;
+  idByRow.value = id
+}
+
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(config.API.dataUserOther)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get history */
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.dataUserOtherHistory(idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</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-space />
+      <q-input
+        v-if="mode"
+        class="inputgreen"
+        outlined
+        dense
+        v-model="filter"
+        label="ค้นหา"
+        style="max-width: 200px"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filter !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+          <q-icon
+            v-else
+            name="search"
+            class="cursor-pointer"
+            @click="filter = ''"
+          />
+        </template>
+      </q-input>
+      <q-select
+        v-if="mode"
+        class="q-ml-sm"
+        dense
+        multiple
+        outlined
+        emit-value
+        map-options
+        options-cover
+        options-dense
+        option-value="name"
+        style="min-width: 150px"
+        v-model="visibleColumns"
+        :options="columns"
+        :display-value="$q.lang.table.columns"
+      />
+    </q-toolbar>
+    <d-table
+      flat
+      dense
+      bordered
+      virtual-scroll
+      :rows="rows"
+      :columns="columns"
+      :grid="!mode"
+      :filter="filter"
+      :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">
+        <q-tr :props="props" class="cursor-pointer">
+          <q-td v-for="(col, index) in props.cols" :key="col.name">
+            {{ col.value ? col.value : "-" }}
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="info"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-history"
+              @click="onHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติแก้ไขข้อมูลอื่นๆ</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-else v-slot:item="props">
+        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+          <q-card bordered flat>
+            <q-list dense class="q-mt-lg relative-position">
+              <q-btn
+                icon="mdi-history"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                class="absolute_button"
+                @click="onHistory(props.row.id)"
+              >
+                <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>
+      <template v-slot:no-data>
+        <div
+          class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+        >
+          <span> ไม่พบข้อมูลข้อมูลอื่นๆ </span>
+        </div>
+      </template>
+    </d-table>
+  </div>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :title="'ประวัติแก้ไขข้อมูลอื่นๆ'"
+    :getData="getHistory"
+    :rows="rowsHistory"
+    :visibleColumns="visibleColumnsHistory"
+    :columns="columnsHistory"
+  />
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>

src/modules/10_registry/05_Other/02_File.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar, type QTableProps } from "quasar";
+import { ref, reactive, onMounted } from "vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+
+interface ArrayFileList {
+    id:string
+    pathName:string
+    fileName:string
+}
+const fileList = ref<ArrayFileList[]>([]);
+const store = useRegistryInFormationStore();
+const rows = ref<any[]>([]);
+const filter = ref<string>("");
+const rowsHistory = ref<any[]>([]);
+const $q = useQuasar();
+const mode = ref<any>($q.screen.gt.xs);
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const modalHistory = ref<boolean>(false);
+/** ตัวแปรข้อมูล */
+
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** get data */
+function getData() {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFileUser(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐาน",
+        store.profileId
+      )
+    )
+    .then((res) => {
+      const data = res.data;
+      fileList.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+ function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบทะเบียนประวัติ",
+        "เอกสารหลักฐาน",
+        store.profileId,
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+<template>
+  <!-- v-if="mode" -->
+  <div class="col-12">
+    <q-toolbar class="q-px-none q-mt-md">
+      <span class="text-blue-6 text-weight-bold text-body1">เอกสารหลักฐาน</span>
+    </q-toolbar>
+    <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+        ไฟล์เอกสารหลักฐาน
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <q-list class="full-width rounded-borders" bordered separator>
+            <q-item
+              clickable
+              v-ripple
+              v-for="data in fileList"
+              :key="data.id"
+              class="items-center"
+            >
+              <q-item-section>{{ data.fileName }}</q-item-section>
+              <q-space />
+              <div>
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="blue"
+                  icon="mdi-download"
+                  @click="downloadFile(data.fileName)"
+                  ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </q-item>
+          </q-list>
+        </div>
+
+        <div class="col-12" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+<style scoped>
+.absolute_button {
+  position: absolute;
+  right: 5px;
+  top: -20px;
+}
+
+.fix_top {
+  justify-content: start !important;
+}
+</style>

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

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import { useCounterMixin } from "@/stores/mixin";
+
+const type = ref<string>("");
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const store = useRegistryInFormationStore();
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+
+const filter = ref<string>("");
+
+const rows = defineModel<any>("rows");
+const columns = defineModel<QTableProps["columns"]>("columns");
+const visibleColumns = defineModel<string[]>("visibleColumns");
+
+const props = defineProps({
+  getData: Function,
+  type: String,
+});
+function close() {
+  modal.value = false;
+}
+
+function dateThaiRange(val: [Date, Date]) {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+}
+
+function statusLeave(val: string) {
+  switch (val) {
+    case "waitting":
+      return "รออนุมัติ";
+    case "reject":
+      return "ไม่ผ่านการอนุมัติ";
+    case "approve":
+      return "ผ่านการอนุมัติ";
+    case "cancel":
+      return "ยกเลิก";
+    default:
+      return "-";
+  }
+}
+
+watch(
+  () => modal.value,
+  (n) => {
+    if (n) {
+      if (props.type) {
+        type.value = props.type;
+      }
+      props.getData?.();
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 70vw">
+      <DialogHeader :tittle="title" :close="close" />
+      <q-separator />
+      <q-card-section>
+        <div class="row justify-end q-col-gutter-sm q-mb-sm">
+          <div class="col-12 col-sm-3">
+            <q-input
+              class="inputgreen"
+              outlined
+              dense
+              v-model="filter"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filter !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filter = ''"
+                />
+                <q-icon
+                  v-else
+                  name="search"
+                  class="cursor-pointer"
+                  @click="filter = ''"
+                />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12 col-sm-2">
+            <q-select
+              dense
+              multiple
+              outlined
+              emit-value
+              map-options
+              options-cover
+              options-dense
+              option-value="name"
+              v-model="visibleColumns"
+              :options="columns"
+              :display-value="$q.lang.table.columns"
+            />
+          </div>
+        </div>
+
+        <d-table
+          flat
+          dense
+          bordered
+          virtual-scroll
+          :rows="rows"
+          :columns="columns"
+          :filter="filter"
+          :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-tr>
+          </template>
+
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="(col, index) in props.cols" :key="col.name">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name == 'insignia' && type == 'insignia'">
+                  {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
+                  }}{{
+                    props.row.insignia.shortName
+                      ? `(${props.row.insignia.shortName})`
+                      : ""
+                  }}
+                </div>
+
+                <div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
+                  {{
+                    dateThaiRange([
+                      props.row.dateStartLeave,
+                      props.row.dateEndLeave,
+                    ])
+                  }}
+                </div>
+                <div v-else-if="col.name == 'status' && type == 'Leave'">
+                  {{ props.row.status ? statusLeave(props.row.status) : "-" }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:item="props">
+            <div
+              class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+            >
+              <q-card bordered flat class="q-pt-md">
+                <q-list dense>
+                  <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
+                      v-if="col.name == 'insignia' && type == 'insignia'"
+                      class="fix_top"
+                    >
+                      <q-item-label class="text-dark text-weight-medium">
+                        {{
+                          props.row.insignia
+                            ? `${props.row.insignia.name} `
+                            : "-"
+                        }}{{
+                          props.row.insignia.shortName
+                            ? `(${props.row.insignia.shortName})`
+                            : ""
+                        }}</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section
+                      v-else-if="col.name == 'dateLeave' && type == 'Leave'"
+                      class="fix_top"
+                    >
+                      <q-item-label class="text-dark text-weight-medium">
+                        {{
+                          dateThaiRange([
+                            props.row.dateStartLeave,
+                            props.row.dateEndLeave,
+                          ])
+                        }}</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section
+                      v-else-if="col.name == 'status' && type == 'Leave'"
+                      class="fix_top"
+                    >
+                      <q-item-label class="text-dark text-weight-medium">
+                        {{ props.row.status ? statusLeave(props.row.status) : "-" }}</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section v-else 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>
+          <template v-slot:no-data>
+            <div
+              class="full-width row flex-center bg-grey-3 q-pa-md rounded-borders text-body2 text-weight-medium"
+            >
+              <span> ไม่พบข้อมูลประวัติการแก้ไข </span>
+            </div>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+<style scoped>
+.fix_top {
+  justify-content: start !important;
+}
+</style>

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

@@ -0,0 +1,19 @@
+interface DataOptionInsignia {
+  id: string;
+  name: string;
+  typeName: string;
+}
+
+interface ResponseObject {
+  id: string;
+  name: string;
+  shortName: string;
+  insigniaTypeName: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  lastUpdateFullName: string;
+  isActive: boolean;
+  note: string;
+}
+
+export type { DataOptionInsignia, ResponseObject };

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

@@ -0,0 +1,48 @@
+interface FormPerson {
+  isLive: null | number | boolean | string;
+  citizenId: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  job: string;
+  lastNameOld?: string;
+  statusMarital?: string;
+}
+
+interface FormChildren {
+  id: string;
+  createdAt: string;
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  childrenCareer: string;
+  childrenFirstName: string;
+  childrenLastName: string;
+  childrenPrefix: string;
+  childrenLive: boolean | number | null;
+  childrenCitizenId: string;
+  profileId: string | null;
+  profileEmployeeId: string | null;
+}
+
+interface DataOptionInsignia {
+  id: string;
+  name: string;
+  typeName: string;
+}
+
+interface ResponseObject {
+  id: string;
+  name: string;
+  shortName: string;
+  insigniaTypeName: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  lastUpdateFullName: string;
+  isActive: boolean;
+  note: string;
+}
+
+export type { FormPerson, FormChildren, DataOptionInsignia, ResponseObject };

src/modules/10_registry/router.ts

@@ -4,7 +4,7 @@ const registryPage = () => import("@/modules/10_registry/views/main.vue");
 const registryInformation = () => import("@/modules/10_registry/tabs/01_information.vue");
 const registryGovernment = () => import("@/modules/10_registry/tabs/02_government.vue");
 const registrySalary = () => import("@/modules/10_registry/tabs/03_salary.vue");
-const registryInsignia = () => import("@/modules/10_registry/tabs/04_insignia.vue");
+const registryAchievement = () => import("@/modules/10_registry/tabs/04_Achievement.vue");
 const registryOther = () => import("@/modules/10_registry/tabs/05_other.vue");
 
 export default [
@@ -46,9 +46,9 @@ export default [
     },
   },
   {
-    path: "/registry/insignia",
-    name: "registryInsignia",
-    component: registryInsignia,
+    path: "/registry/achievement",
+    name: "achievement",
+    component: registryAchievement,
     meta: {
       Auth: true,
       Key: [10],

src/modules/10_registry/store/registry.ts

@@ -0,0 +1,33 @@
+import { defineStore } from "pinia";
+import type { DataOptionInsignia, ResponseObject } from '@/modules/10_registry/interface/index/Achievement'
+import { ref } from "vue";
+
+
+export const useRegistryInFormationStore = defineStore(
+  "registryInFormationStore",
+  () => {
+    const typeProfile = ref<string>("OFFICER");
+    const profileId = ref<string>('')
+
+
+    function typeChangeName(val: string) {
+      switch (val) {
+        case "prefix":
+          return "เปลี่ยนคำนำหน้าชื่อ";
+        case "firstName":
+          return "เปลี่ยนชื่อ";
+        case "lastName":
+          return "เปลี่ยนนามสกุล";
+        case "all":
+          return "เปลี่ยนคำนำหน้าชื่อ, ชื่อ-นามสกุล";
+        case "firstNameLastName":
+          return "เปลี่ยนชื่อ-นามสกุล";
+        case "prefixAndlastName":
+          return "เปลี่ยนคำนำหน้าชื่อ และนามสกุล";
+        default:
+          return "-";
+      }
+    }
+    return { typeChangeName, typeProfile,profileId};
+  }
+);

src/modules/10_registry/tabs/01_information.vue

@@ -1,176 +1,16 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+/** component */
+import Information from "@/modules/10_registry/01_Information/01_Information.vue";
+import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue";
+import Address from "@/modules/10_registry/01_Information/03_Address.vue";
+import Family from "@/modules/10_registry/01_Information/04_Family.vue";
+import Educations from "@/modules/10_registry/01_Information/05_Educations.vue";
+import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";
 
 const router = useRouter();
-const rowsHistoryName = ref<any[]>([]);
-const filter = ref<string>("");
 
-const typeChangeName = (val: string) => {
-  switch (val) {
-    case "prefix":
-      return "เปลี่ยนคำนำหน้าชื่อ";
-    case "firstName":
-      return "เปลี่ยนชื่อ";
-    case "lastName":
-      return "เปลี่ยนนามสกุล";
-    case "all":
-      return "เปลี่ยนคำนำหน้าชื่อ, ชื่อ-นามสกุล";
-    case "firstNameLastName":
-      return "เปลี่ยนชื่อ-นามสกุล";
-    case "prefixAndlastName":
-      return "เปลี่ยนคำนำหน้าชื่อ และนามสกุล";
-    default:
-      return "-";
-  }
-};
-
-const formDataInformation = reactive<any>({
-  citizenId: "", //เลขบัตรประจำตัวประชาชน
-  name: "", //ชื่อ
-  birthDate: "", //วันเกิด
-  gender: "", //เพศ
-  relationship: "", //สถานภาพ
-
-  nationality: "", //สัญชาติ
-  ethnicity: "", //เชื้อชาติ
-  religion: "", //ศาสนา
-  bloodGroup: "", //หมู่เลือด
-  phone: "", //เบอร์โทร
-});
-
-const formDataAddress = reactive<any>({
-  registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
-  registrationProvince: "", //จังหวัด
-  registrationDistrict: "", //เขต / อำเภอ
-  registrationSubDistrict: "", //แขวง / ตำบล
-  registrationZipCode: "", //รหัสไปรษณีย์
-
-  currentAddress: "", //ที่อยู่ปัจจุบัน
-  currentProvince: "", //จังหวัด
-  currentDistrict: "", //เขต / อำเภอ
-  currentSubDistrict: "", //แขวง / ตำบล
-  currentZipCode: "", //รหัสไปรษณีย์
-});
-
-const visibleColumnsHistoryName = ref<string[]>([
-  "no",
-  "prefix",
-  "firstName",
-  "lastName",
-  "status",
-]);
-
-const columnsHistoryName = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะการเปลี่ยนชื่อ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-function getData() {
-  showLoader()
-  http
-  .get(config.API.dataUserInformation)
-  .then((res)=>{
-    console.log(res.data)
-  }).catch((e)=>{
-    messageError($q,e)
-  }).finally(()=>{
-    hideLoader()
-  })
-}
-
-onMounted(() => {
-  getData()
-  formDataInformation.citizenId = "4016500103241";
-  formDataInformation.name = "นางกัณฐิมา กาฬสินธุ์";
-  formDataInformation.birthDate = "24 พ.ย. 2511";
-  formDataInformation.gender = "หญิง";
-  formDataInformation.relationship = "";
-
-  formDataInformation.nationality = "";
-  formDataInformation.ethnicity = "";
-  formDataInformation.religion = "";
-  formDataInformation.bloodGroup = "";
-  formDataInformation.phone = "";
-
-  rowsHistoryName.value = [
-    {
-      prefix: "นางสาว",
-      firstName: "อรัญญาวินัย",
-      lastName: "พรไชยะสาร",
-      status: "all",
-    },
-    {
-      prefix: "นางสาว1",
-      firstName: "อรัญญาวินัย1",
-      lastName: "พรไชยะสาร1",
-      status: "prefix",
-    },
-  ];
-});
 </script>
 <template>
   <div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
@@ -190,420 +30,12 @@ onMounted(() => {
   </div>
 
   <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
-    <!-- ประวัติส่วนตัว -->
-    <div class="col-12">
-      <q-toolbar class="q-px-none">
-        <span class="text-blue-6 text-weight-bold text-body1"
-          >ประวัติส่วนตัว</span
-        >
-        <q-space />
-        <q-btn icon="mdi-history" color="info" flat dense round size="14px">
-          <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
-        </q-btn>
-      </q-toolbar>
-      <q-card bordered class="bg-grey-1 q-pa-md">
-        <div class="row">
-          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">
-                เลขบัตรประจำตัวประชาชน
-              </div>
-              <div class="col-7">
-                {{
-                  formDataInformation.citizenId
-                    ? formDataInformation.citizenId
-                    : "-"
-                }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">
-                ชื่อ - สกุล
-              </div>
-              <div class="col-7">
-                {{ formDataInformation.name ? formDataInformation.name : "-" }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">
-                วัน/เดือน/ปีเกิด
-              </div>
-              <div class="col-7">
-                {{
-                  formDataInformation.birthDate
-                    ? formDataInformation.birthDate
-                    : "-"
-                }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
-              <div class="col-7">
-                {{
-                  formDataInformation.gender ? formDataInformation.gender : "-"
-                }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
-              <div class="col-7">
-                {{
-                  formDataInformation.relationship
-                    ? formDataInformation.relationship
-                    : "-"
-                }}
-              </div>
-            </div>
-          </div>
-
-          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
-              <div class="col-7">
-                {{
-                  formDataInformation.nationality
-                    ? formDataInformation.nationality
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
-              <div class="col-7">
-                {{
-                  formDataInformation.ethnicity
-                    ? formDataInformation.ethnicity
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
-              <div class="col-7">
-                {{
-                  formDataInformation.religion
-                    ? formDataInformation.religion
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
-              <div class="col-7">
-                {{
-                  formDataInformation.bloodGroup
-                    ? formDataInformation.bloodGroup
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
-              <div class="col-7">
-                {{
-                  formDataInformation.phone ? formDataInformation.phone : "-"
-                }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div>
-
-    <!-- ประวัติการเปลี่ยนชื่อ-นามสกุล -->
-    <div v-if="$q.screen.gt.xs" class="col-12">
-      <q-toolbar class="q-px-none q-mt-md">
-        <span class="text-blue-6 text-weight-bold text-body1"
-          >ประวัติการเปลี่ยนชื่อ-นามสกุล</span
-        >
-        <q-space />
-        <q-input
-          v-if="$q.screen.gt.xs"
-          class="inputgreen"
-          outlined
-          dense
-          v-model="filter"
-          label="ค้นหา"
-          style="max-width: 200px"
-        >
-          <template v-slot:append>
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="filter = ''"
-            />
-            <q-icon
-              v-else
-              name="search"
-              class="cursor-pointer"
-              @click="filter = ''"
-            />
-          </template>
-        </q-input>
-        <q-select
-          v-if="$q.screen.gt.xs"
-          class="q-ml-sm"
-          dense
-          multiple
-          outlined
-          emit-value
-          map-options
-          options-cover
-          options-dense
-          option-value="name"
-          style="min-width: 150px"
-          v-model="visibleColumnsHistoryName"
-          :options="columnsHistoryName"
-          :display-value="$q.lang.table.columns"
-        />
-      </q-toolbar>
-      <d-table
-        flat
-        dense
-        bordered
-        virtual-scroll
-        :rows="rowsHistoryName"
-        :columns="columnsHistoryName"
-        :filter="filter"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumnsHistoryName"
-        :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-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="(col, index) in props.cols" :key="col.name">
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'status'">
-                {{ props.row.status ? typeChangeName(props.row.status) : "-" }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td auto-width>
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="14px"
-                icon="mdi-history"
-              >
-                <q-tooltip>ดูประวัติการเปลี่ยนชื่อ-นามสกุล</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
-
-    <div v-else class="col-12">
-      <q-toolbar class="q-px-none q-mt-md">
-        <span class="text-blue-6 text-weight-bold text-body1"
-          >ประวัติการเปลี่ยนชื่อ-นามสกุล</span
-        >
-      </q-toolbar>
-
-      <q-list bordered style="border-radius: 8px">
-        <div
-          v-for="(item, index) in rowsHistoryName"
-          :class="`${index % 2 !== 0 ? 'bg-grey-1' : ''}`"
-        >
-          <q-item class="q-pt-md relative-position" dense>
-            <q-btn
-              icon="mdi-history"
-              color="info"
-              flat
-              dense
-              round
-              size="14px"
-              class="absolute-top-right"
-            >
-              <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
-            </q-btn>
-            <q-item-section class="text-grey-6 text-weight-medium"
-              >คำนำหน้า</q-item-section
-            >
-            <q-item-section>{{
-              item.prefix ? item.prefix : "-"
-            }}</q-item-section>
-          </q-item>
-          <q-item class="q-py-none" dense>
-            <q-item-section class="text-grey-6 text-weight-medium"
-              >ชื่อ</q-item-section
-            >
-            <q-item-section>{{
-              item.firstName ? item.firstName : "-"
-            }}</q-item-section>
-          </q-item>
-          <q-item class="q-py-none" dense>
-            <q-item-section class="text-grey-6 text-weight-medium"
-              >นามสกุล</q-item-section
-            >
-            <q-item-section>{{
-              item.lastName ? item.lastName : "-"
-            }}</q-item-section>
-          </q-item>
-          <q-item class="q-py-none q-pb-sm" dense>
-            <q-item-section class="text-grey-6 text-weight-medium"
-              >สถานะ</q-item-section
-            >
-            <q-item-section>{{
-              item.status ? typeChangeName(item.status) : "-"
-            }}</q-item-section>
-          </q-item>
-          <q-separator v-if="index < rowsHistoryName.length - 1" />
-        </div>
-      </q-list>
-    </div>
-
-    <!-- ข้อมูลที่อยู่ -->
-    <div class="col-12">
-      <q-toolbar class="q-px-none">
-        <span class="text-blue-6 text-weight-bold text-body1"
-          >ข้อมูลที่อยู่</span
-        >
-        <q-space />
-        <q-btn icon="mdi-history" color="info" flat dense round size="14px">
-          <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
-        </q-btn>
-      </q-toolbar>
-      <q-card bordered class="bg-grey-1 q-pa-md">
-        <div class="row">
-          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">
-                เลขบัตรประจำตัวประชาชน
-              </div>
-              <div class="col-7">
-                {{
-                  formDataAddress.registrationAddress
-                    ? formDataAddress.registrationAddress
-                    : "-"
-                }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">
-                ชื่อ - สกุล
-              </div>
-              <div class="col-7">
-                {{
-                  formDataAddress.registrationProvince
-                    ? formDataAddress.registrationProvince
-                    : "-"
-                }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">
-                วัน/เดือน/ปีเกิด
-              </div>
-              <div class="col-7">
-                {{
-                  formDataAddress.registrationDistrict
-                    ? formDataAddress.registrationDistrict
-                    : "-"
-                }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">เพศ</div>
-              <div class="col-7">
-                {{
-                  formDataAddress.registrationSubDistrict
-                    ? formDataAddress.registrationSubDistrict
-                    : "-"
-                }}
-              </div>
-            </div>
-
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">สถานภาพ</div>
-              <div class="col-7">
-                {{
-                  formDataAddress.registrationZipCode
-                    ? formDataAddress.registrationZipCode
-                    : "-"
-                }}
-              </div>
-            </div>
-          </div>
-
-          <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">สัญชาติ</div>
-              <div class="col-7">
-                {{
-                  formDataAddress.currentAddress
-                    ? formDataAddress.currentAddress
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">เชื้อชาติ</div>
-              <div class="col-7">
-                {{
-                  formDataAddress.currentProvince
-                    ? formDataAddress.currentProvince
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">ศาสนา</div>
-              <div class="col-7">
-                {{
-                  formDataAddress.currentDistrict
-                    ? formDataAddress.currentDistrict
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">หมู่เลือด</div>
-              <div class="col-7">
-                {{
-                  formDataAddress.currentSubDistrict
-                    ? formDataAddress.currentSubDistrict
-                    : "-"
-                }}
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-5 text-grey-6 text-weight-medium">เบอร์โทร</div>
-              <div class="col-7">
-                {{
-                  formDataAddress.currentZipCode
-                    ? formDataAddress.currentZipCode
-                    : "-"
-                }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-card>
-    </div>
+    <Information />
+    <ChangeName />
+    <Address />
+    <Family />
+    <Educations />
+    <Ability />
   </div>
 </template>
 <style>

src/modules/10_registry/tabs/02_government.vue

@@ -1,3 +1,44 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+/** component */
+import Government from "@/modules/10_registry/02_Government/01_Government.vue";
+import Discipline from "@/modules/10_registry/02_Government/02_Discipline.vue";
+import Leave from "@/modules/10_registry/02_Government/03_Leave.vue";
+import Duty from "@/modules/10_registry/02_Government/04_Duty.vue";
+
+
+const router = useRouter();
+
+</script>
 <template>
-    <div>government</div>
-</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">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>ข้อมูลราชการ</div>
+    </div>
+  </div>
+
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <Government />
+    <Discipline />
+    <Leave />
+    <Duty />
+  </div>
+</template>
+<style>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>

src/modules/10_registry/tabs/03_salary.vue

@@ -1,3 +1,41 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+/** component */
+import Salary from "@/modules/10_registry/03_Salary/01_Salary.vue";
+import Nopaid from "@/modules/10_registry/03_Salary/02_Nopaid.vue";
+
+
+const router = useRouter();
+
+</script>
 <template>
-    <div>salary</div>
-</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">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>ข้อมูลเงินเดือน/ค่าจ้าง</div>
+    </div>
+  </div>
+
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <Salary />
+    <Nopaid />
+
+  </div>
+</template>
+<style>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+/** component */
+import Certificate from "@/modules/10_registry/04_Achievement/01_Certificate.vue";
+import Training from "@/modules/10_registry/04_Achievement/02_Training.vue";
+import Insignia from "@/modules/10_registry/04_Achievement/03_Insignia.vue";
+import Honor from "@/modules/10_registry/04_Achievement/04_Honor.vue";
+import Assessments from "@/modules/10_registry/04_Achievement/05_Assessments.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">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>ข้อมูลผลงานและเครื่องราชฯ</div>
+    </div>
+  </div>
+
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <Certificate />
+    <Training />
+    <Insignia />
+    <Honor />
+    <Assessments />
+  </div>
+</template>
+<style>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>

src/modules/10_registry/tabs/04_insignia.vue

@@ -1,3 +0,0 @@
-<template>
-    <div>insignia</div>
-</template>

src/modules/10_registry/tabs/05_other.vue

@@ -1,3 +1,39 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+/** component */
+import Other from "@/modules/10_registry/05_Other/01_Other.vue";
+import File from "@/modules/10_registry/05_Other/02_File.vue";
+
+
+const router = useRouter();
+</script>
 <template>
-    <div>other</div>
-</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">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>เอกสารหลักฐานและอื่นๆ</div>
+    </div>
+  </div>
+
+  <div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
+    <Other />
+    <File />
+  </div>
+</template>
+<style>
+.mobileClass {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+}
+</style>

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

@@ -1,25 +1,38 @@
 <script setup lang="ts">
 import avatar from "@/assets/avatar_user.jpg";
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import keycloak from "@/plugins/keycloak";
 
 //หน้าเมนู
 import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
 import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
 import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
-import InsigniaPage from "@/modules/10_registry/tabs/04_insignia.vue";
+import Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
 import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
+
 import { useRouter } from "vue-router";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+const store = useRegistryInFormationStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { messageError,dialogConfirm } = mixin;
+const profileImg = ref<string>("");
 const router = useRouter();
 const tab = ref<string>("information");
 const formData = reactive<any>({
-  prefix: "นาง",
-  firstName: "กัณฐิมา",
-  lastName: "กาฬสินธุ์",
-  position: "นักบริหาร",
-  posName: "หัวหน้าสำนักงาน",
-  posType: "บริหาร",
-  posLevel: "ชำนาญการพิเศษ",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  position: "",
+  posExecutiveName: "",
+  posTypeName: "",
+  posLevelName: "",
 });
 const sizeImg = ref<string>("");
 function onResize(size: any) {
@@ -28,9 +41,81 @@ function onResize(size: any) {
 }
 
 function onMobile(type: string) {
-  console.log(1111);
   router.push(`/registry/${type}`);
 }
+
+function getMain() {
+  http.get(config.API.profilePosition()).then((res) => {
+    const data = res.data.result;
+    formData.prefix = data.prefix;
+    formData.firstName = data.firstName;
+    formData.lastName = data.lastName;
+    formData.position = data.position;
+
+    formData.posTypeName = data.posTypeName;
+    formData.posExecutiveName = data.posExecutiveName;
+    formData.posLevelName = data.posLevelName;
+    store.profileId = data.profileId;
+    if (data.avatarName) {
+      getImg(data.profileId, data.avatarName);
+    } else {
+      profileImg.value = avatar;
+    }
+  });
+}
+
+function getImg(id: string, pathName: string) {
+  http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
+    .then((res) => {
+      profileImg.value = res.data.downloadUrl;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function getType() {
+  http
+    .get(config.API.proFileType)
+    .then((res) => {
+      store.typeProfile = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onClickDownloadKp7(type: string) {
+  if (type === "FULL") {
+    window.open(config.API.profileReportId(store.profileId));
+  } else if (type === "SHORT") {
+    window.open(config.API.profileKp7ShortId(store.profileId));
+  }
+}
+
+/**
+ * logout keycloak
+ * confirm ก่อนออกจากระบบ
+ */
+ const doLogout = () => {
+  dialogConfirm(
+    $q,
+    () => {
+      keycloak.logout();
+    },
+    "ยืนยันการออกจากระบบ",
+    "ต้องการออกจากระบบใช่หรือไม่"
+  );
+};
+
+onMounted(async () => {
+  store.typeProfile = "OFFICER";
+  await getType();
+  await getMain();
+});
 </script>
 <template>
   <div class="row justify-center">
@@ -43,15 +128,15 @@ function onMobile(type: string) {
           <q-card bordered>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
-              <div class="text-center">
-                <q-avatar :size="sizeImg">
-                  <img
-                    :src="avatar"
-                    style="border-radius: 50%; object-fit: cover"
-                  />
-                </q-avatar>
+              <div class="relative-position" style="height: 120px">
+                <div class="absolute-center">
+                  <q-avatar size="120px" class="bg-grey-2">
+                    <q-img :src="profileImg" />
+                  </q-avatar>
+                </div>
               </div>
-              <div class="column text-center q-mt-md q-mb-lg">
+
+              <div class="column text-center q-mt-md q-mb-sm">
                 <span class="text-teal text-weight-medium">{{
                   formData.firstName
                     ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
@@ -66,29 +151,45 @@ function onMobile(type: string) {
             <q-list separator class="q-mt-md">
               <q-separator />
               <q-item>
-                <q-item-section class="text-grey-6"
-                  >ตำแหน่งในสายงาน</q-item-section
-                >
-                <q-item-section>{{ formData.posName }}</q-item-section>
+                <q-item-section class="text-grey-6">{{
+                  store.typeProfile == "OFFICER" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง"
+                }}</q-item-section>
+                <q-item-section>{{ formData.posExecutiveName }}</q-item-section>
               </q-item>
               <q-item>
-                <q-item-section class="text-grey-6">ประเภท</q-item-section>
-                <q-item-section>{{ formData.posType }}</q-item-section>
+                <q-item-section class="text-grey-6">{{
+                  store.typeProfile == "OFFICER" ? "ประเภทตำแหน่ง" : "กลุ่มงาน"
+                }}</q-item-section>
+                <q-item-section>{{
+                  formData.posTypeName ? formData.posTypeName : "-"
+                }}</q-item-section>
               </q-item>
               <q-item>
-                <q-item-section class="text-grey-6"
-                  >ระดับชั้นงาน</q-item-section
-                >
-                <q-item-section>{{ formData.posLevel }}</q-item-section>
+                <q-item-section class="text-grey-6">{{
+                  store.typeProfile == "OFFICER"
+                    ? "ระดับตำแหน่ง"
+                    : "ระดับชั้นงาน"
+                }}</q-item-section>
+                <q-item-section>{{
+                  formData.posLevelName ? formData.posLevelName : "-"
+                }}</q-item-section>
               </q-item>
             </q-list>
 
             <q-card-section class="q-gutter-y-sm">
-              <q-btn class="full-width" unelevated color="blue-6"
+              <q-btn
+                class="full-width"
+                unelevated
+                color="blue-6"
+                @click="onClickDownloadKp7('FULL')"
                 ><q-icon left size="2em" name="mdi-file-download-outline" />
                 <div>ดาวน์โหลดประวัติแบบย่อ</div></q-btn
               >
-              <q-btn class="full-width" unelevated color="primary"
+              <q-btn
+                class="full-width"
+                unelevated
+                color="primary"
+                @click="onClickDownloadKp7('SHORT')"
                 ><q-icon left size="2em" name="mdi-folder-download-outline" />
                 <div>ดาวน์โหลด ก.พ.7/ก.ก. 1</div></q-btn
               >
@@ -104,10 +205,14 @@ function onMobile(type: string) {
               class="bg-grey-1 text-grey-6 shadow-2"
               align="left"
             >
-              <q-tab name="information" label="ข้อมูลส่วนตัว" class="bg-active"/>
+              <q-tab
+                name="information"
+                label="ข้อมูลส่วนตัว"
+                class="bg-active"
+              />
               <q-tab name="government" label="ข้อมูลราชการ" />
               <q-tab name="salary" label="ข้อมูลเงินเดือน/ค่าจ้าง" />
-              <q-tab name="insignia" label="ข้อมูลเครื่องราชฯ" />
+              <q-tab name="insignia" label="ข้อมูลผลงาน" />
               <q-tab name="other" label="ข้อมูลอื่นๆ" />
             </q-tabs>
 
@@ -129,7 +234,7 @@ function onMobile(type: string) {
               </q-tab-panel>
 
               <q-tab-panel name="insignia">
-                <InsigniaPage />
+                <Certificate />
               </q-tab-panel>
 
               <q-tab-panel name="other">
@@ -144,10 +249,10 @@ function onMobile(type: string) {
         <q-card bordered>
           <q-resize-observer @resize="onResize" />
           <q-card-section>
-            <div class="text-center">
+            <div class="text-center q-mt-md">
               <q-avatar :size="sizeImg">
                 <img
-                  :src="avatar"
+                  :src="profileImg"
                   style="border-radius: 50%; object-fit: cover"
                 />
               </q-avatar>
@@ -171,6 +276,7 @@ function onMobile(type: string) {
                 text-color="light-blue-5"
                 size="14px"
                 icon="mdi-file-download-outline"
+                @click="onClickDownloadKp7('FULL')"
               ></q-btn>
               <q-btn
                 color="teal-1"
@@ -180,6 +286,7 @@ function onMobile(type: string) {
                 round
                 size="14px"
                 icon="mdi-folder-download-outline"
+                @click="onClickDownloadKp7('SHORT')"
               ></q-btn>
               <q-btn
                 color="red-1"
@@ -189,6 +296,7 @@ function onMobile(type: string) {
                 round
                 size="14px"
                 icon="mdi-logout"
+                @click="doLogout"
               ></q-btn>
             </div>
           </q-card-section>
@@ -212,7 +320,7 @@ function onMobile(type: string) {
                 <q-avatar text-color="info" icon="mdi-chevron-right" />
               </q-item-section>
             </q-item>
-            <q-item clickable v-ripple @click="onMobile('insignia')">
+            <q-item clickable v-ripple @click="onMobile('achievement')">
               <q-item-section>ข้อมูลผลงาน</q-item-section>
               <q-item-section avatar>
                 <q-avatar text-color="info" icon="mdi-chevron-right" />
@@ -229,4 +337,4 @@ function onMobile(type: string) {
       </div>
     </div>
   </div>
-</template>
+</template>

src/stores/mixin.ts

@@ -1,8 +1,10 @@
 import { defineStore } from "pinia";
+import "moment/dist/locale/th";
 import moment from "moment";
 import CustomComponent from "@/components/CustomDialog.vue";
 import { Loading, QSpinnerCube } from "quasar";
 
+moment.locale("th");
 export const useCounterMixin = defineStore("mixin", () => {
   /**
    * ฟังก์ชันกลาง
@@ -76,75 +78,19 @@ export const useCounterMixin = defineStore("mixin", () => {
    * @returns
    */
   function date2Thai(
-    srcDate: Date,
+    srcDate: Date | null,
     isFullMonth: boolean = false,
     isTime: boolean = false
   ) {
-    if (srcDate == null) {
-      return null;
-      `
-    `;
-    }
-    const date = new Date(srcDate);
-    const isValidDate = Boolean(+date);
-    if (!isValidDate) return srcDate.toString();
-    if (isValidDate && date.getFullYear() < 1000) return srcDate.toString();
-    const fullMonthThai = [
-      "มกราคม",
-      "กุมภาพันธ์",
-      "มีนาคม",
-      "เมษายน",
-      "พฤษภาคม",
-      "มิถุนายน",
-      "กรกฎาคม",
-      "สิงหาคม",
-      "กันยายน",
-      "ตุลาคม",
-      "พฤศจิกายน",
-      "ธันวาคม",
-    ];
-    const abbrMonthThai = [
-      "ม.ค.",
-      "ก.พ.",
-      "มี.ค.",
-      "เม.ย.",
-      "พ.ค.",
-      "มิ.ย.",
-      "ก.ค.",
-      "ส.ค.",
-      "ก.ย.",
-      "ต.ค.",
-      "พ.ย.",
-      "ธ.ค.",
-    ];
-    let dstYear = 0;
-    if (date.getFullYear() > 2500) {
-      dstYear = date.getFullYear();
-    } else {
-      dstYear = date.getFullYear() + 543;
-    }
-    let dstMonth = "";
-    if (isFullMonth) {
-      dstMonth = fullMonthThai[date.getMonth()];
-    } else {
-      dstMonth = abbrMonthThai[date.getMonth()];
-    }
-    let dstTime = "";
-    if (isTime) {
-      const H = date.getHours().toString().padStart(2, "0");
-      const M = date.getMinutes().toString().padStart(2, "0");
-      // const S = date.getSeconds().toString().padStart(2, "0")
-      // dstTime = " " + H + ":" + M + ":" + S + " น."
-      dstTime = " " + H + ":" + M + " น.";
-    }
-    return (
-      date.getDate().toString().padStart(2, "0") +
-      " " +
-      dstMonth +
-      " " +
-      dstYear +
-      dstTime
-    );
+    if (srcDate == null || !moment(srcDate).isValid()) return "";
+
+    const dateMoment = moment(srcDate);
+    const day = dateMoment.format("DD");
+    const month = dateMoment.format(isFullMonth ? "MMMM" : "MMM");
+    const year = +dateMoment.format("YYYY") + 543;
+    return `${day} ${month} ${year}${
+      isTime ? dateMoment.format(" HH:mm น.") : ""
+    }`;
   }
 
   function dateThai(
@@ -322,13 +268,19 @@ export const useCounterMixin = defineStore("mixin", () => {
   }
 
   function dateToISO(date: Date) {
-    return (
-      date.getFullYear() +
-      "-" +
-      appendLeadingZeroes(date.getMonth() + 1) +
-      "-" +
-      appendLeadingZeroes(date.getDate())
-    );
+    if (date != null) {
+      const srcDate = new Date(date);
+
+      return (
+        srcDate.getFullYear() +
+        "-" +
+        appendLeadingZeroes(srcDate.getMonth() + 1) +
+        "-" +
+        appendLeadingZeroes(srcDate.getDate())
+      );
+    } else {
+      return "";
+    }
   }
 
   function appendLeadingZeroes(n: number) {