From 544b8c1998c344bd9f870cb3efd10e0ae0d61731 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 11 Mar 2024 14:35:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?(=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/GovernmentInformation/01_Info.vue  | 768 +++++++++++++++++-
 .../interface/index/government.ts             |  28 +
 2 files changed, 794 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/04_registryNew/interface/index/government.ts

diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
index 94f83fdf0..a5e544100 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
@@ -1,6 +1,770 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type {
+  MyObjectRef,
+  RequestItemsHistoryObject,
+} from "@/modules/04_registryNew/interface/index/government";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** ฟังชั่นกลาง */
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dateToISO,
+  dialogConfirm,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+
+/** ตัวแปรข้อมูลหลัก */
+const formMain = reactive<any>({
+  ocId: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร", //สังกัด
+  positionId: "ผู้อำนวยการ", //ตำแหน่ง
+  positionLine: "อำนวยการ", //สายงาน
+  positionLevel: "ต้น", //ระดับ
+  numberId: "กทข.1", //เลขที่ตำแหน่ง
+  positionExecutive: "ผู้อำนวยการกอง", //ตำแหน่งทางการบริหาร
+  positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร
+  positionType: "ทั่วไป", //ประเภท
+  positionPathSide: "", //ด้าน/สาขา
+
+  containDate: "2024-01-22T02:43:00", //วันที่สั่งบรรจุ
+  workDate: "2024-01-22T02:43:00", //วันที่เริ่มปฏิบัติราชการ
+  reasonSameDate: "เนื่องจากเป็นวันหยุด",
+  retireDate: "2024-01-22T02:43:00", //วันเกษียณอายุ
+  ageAll: "0 ปี 2 เดือน 10 วัน", //อายุราชการ
+  absent: 0, //ขาดราชการ
+  age: 0, //อายุราชการเกื้อกูล
+});
+
+/** dialog */
+const modalEdit = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+
+const filterKeyword = ref<string>('');
+
+const containDate = ref<Date | null>(null);
+const workDate = ref<Date | null>(null);
+const reasonSameDate = ref<string | null>(null);
+const containDateRef = ref<object | null>(null);
+const workDateRef = ref<object | null>(null);
+const reasonSameDateRef = ref<object | null>(null);
+
+const objectRef: MyObjectRef = {
+  containDate: containDateRef,
+  workDate: workDateRef,
+  reasonSameDate: reasonSameDateRef,
+};
+
+const visibleColumnsHistory = ref<String[]>([
+  "oc",
+  "position",
+  "positionPathSide",
+  "posNo",
+  "positionLine",
+  "positionType",
+  "positionLevel",
+  "positionExecutive",
+  "positionExecutiveSide",
+  "dateAppoint",
+  "dateStart",
+  "retireDate",
+  "govAge",
+  "govAgeAbsent",
+  "govAgePlus",
+  "reasonSameDate",
+  "createdFullName",
+  "createdAt",
+]);
+
+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",
+    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",
+    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",
+    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: "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: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+/** เปิด dialog */
+function openDialogEdit() {
+  modalEdit.value = true;
+}
+
+function openDialogHistory() {
+  modalHistory.value = true;
+}
+/** ปิด dialog */
+function closeDialog() {
+  modalEdit.value = false;
+  containDate.value = null;
+  workDate.value = null;
+  reasonSameDate.value = null;
+}
+
+/** validate check*/
+function validateForm() {
+  const hasError = [];
+  for (const key in objectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
+      const property = objectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    // showLoader()
+    // http
+    // .put(config.API.???)
+    // .then((res)=>{
+    //   closeDialog()
+    //   getData()
+    // }).catch((e)=>{
+    //   messageError($q,e)
+    // }).finally(()=>{
+    //   hideLoader()
+    // })
+
+    closeDialog();
+  });
+}
+
+/** ดึงข้อมูลประวัติ */
+function getDataHistory() {
+  // showLoader();
+  // http
+  //   .get(config.API.profileGovHisId(route.params.id.toString()))
+  //   .then((res) => {
+  //     let data = res.data.result;
+  //     rowsHistory.value = [];
+  //     data.map((e: RequestItemsHistoryObject) => {
+  //       rowsHistory.value.push({
+  //         oc: e.oc,
+  //         position: e.position,
+  //         positionPathSide: e.positionPathSide,
+  //         posNo: e.posNo,
+  //         positionLine: e.positionLine,
+  //         positionType: e.positionType,
+  //         positionLevel: e.positionLevel,
+  //         positionExecutive: e.positionExecutive,
+  //         positionExecutiveSide: e.positionExecutiveSide,
+  //         dateAppoint: new Date(e.dateAppoint),
+  //         dateStart: new Date(e.dateStart),
+  //         retireDate: e.retireDate,
+  //         govAge: e.govAge,
+  //         govAgeAbsent: e.govAgeAbsent,
+  //         govAgePlus: e.govAgePlus,
+  //         reasonSameDate: e.reasonSameDate,
+  //         createdFullName: e.createdFullName,
+  //         createdAt: new Date(e.createdAt),
+  //       });
+  //     });
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+watch(() => modalHistory.value, (isOpen) => {
+  if(isOpen === true) {
+    getDataHistory()
+  }
+});
+
+</script>
 <template>
-  <div>ข้อมูลราชการ</div>
+  <div class="row">
+    <div class="text-weight-bold text-subtitle1">ประวัติราชการ</div>
+    <q-space />
+    <div class="q-gutter-x-sm">
+      <q-btn
+        color="teal-5"
+        icon="mdi-pencil-outline"
+        flat
+        round
+        @click="openDialogEdit()"
+        ><q-tooltip>แก้ไข</q-tooltip></q-btn
+      >
+      <q-btn
+        color="edit"
+        icon="mdi-history"
+        flat
+        round
+        @click="openDialogHistory()"
+        ><q-tooltip>ประวิติข้อมูลราชการ</q-tooltip></q-btn
+      >
+    </div>
+  </div>
+
+  <q-card bordered class="bg-grey-2 q-pa-md">
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="column">
+          <span class="text-grey-7">สังกัด</span>
+          <span>{{ formMain.ocId !== "" ? formMain.ocId : "-" }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ตำแหน่ง</span>
+          <span>{{
+            formMain.positionId !== "" ? formMain.positionId : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">สายงาน</span>
+          <span>{{
+            formMain.positionLine !== "" ? formMain.positionLine : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ระดับ</span>
+          <span>{{
+            formMain.positionLevel !== "" ? formMain.positionLevel : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">เลขที่ตำแหน่ง</span>
+          <span>{{ formMain.numberId !== "" ? formMain.numberId : "-" }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ตำแหน่งทางการบริหาร</span>
+          <span>{{
+            formMain.positionExecutive !== "" ? formMain.positionExecutive : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ด้านตำแหน่งทางการบริหาร</span>
+          <span>{{
+            formMain.positionExecutiveSide !== ""
+              ? formMain.positionExecutiveSide
+              : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ประเภท</span>
+          <span>{{
+            formMain.positionType !== "" ? formMain.positionType : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ด้าน/สาขา</span>
+          <span>{{
+            formMain.positionPathSide !== "" ? formMain.positionPathSide : "-"
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <q-separator inset color="grey-5" class="q-my-md" />
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">วันที่สั่งบรรจุ</span>
+          <span>{{
+            formMain.containDate ? date2Thai(formMain.containDate) : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">วันที่เริ่มปฏิบัติราชการ</span>
+          <span>{{
+            formMain.workDate !== "" ? date2Thai(formMain.workDate) : "-"
+          }}</span>
+        </div>
+      </div>
+      <div
+        v-if="dateToISO(formMain.containDate as Date) !== dateToISO(formMain.workDate as Date)"
+        class="col-12 col-sm-12 col-md-6"
+      >
+        <div class="column">
+          <span class="text-grey-7">เหตุผลที่วันที่ไม่ตรงกัน</span>
+          <span>{{
+            formMain.reasonSameDate !== "" ? formMain.reasonSameDate : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">วันเกษียณอายุ</span>
+          <span>{{
+            formMain.retireDate !== "" ? date2Thai(formMain.retireDate) : "-"
+          }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">อายุราชการ</span>
+          <span>{{ formMain.ageAll !== "" ? formMain.ageAll : "-" }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">ขาดราชการ</span>
+          <span>{{ formMain.absent ? formMain.absent : 0 }}</span>
+        </div>
+      </div>
+      <div class="col-12 col-sm-6 col-md-3">
+        <div class="column">
+          <span class="text-grey-7">อายุราชการเกื้อกูล</span>
+          <span>{{ formMain.age ? formMain.age : 0 }}</span>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- dialog edit -->
+  <q-dialog v-model="modalEdit" persistent>
+    <q-card style="min-width: 600px">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader tittle="แก้ไขข้อมูล" :close="closeDialog" />
+        </q-card-section>
+
+        <q-separator />
+        <q-card-section class="q-pa-md">
+          <div class="row q-col-gutter-sm">
+            <div class="col-6">
+              <datepicker
+                v-model="containDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="containDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="
+                  containDate !== null
+                    ? date2Thai(containDate as Date)
+                    : null
+                "
+                    :rules="[
+                      (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
+                    ]"
+                    label="วัน/เดือน/ปี ที่บรรจุ"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="'color: var(--q-primary)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-6">
+              <datepicker
+                v-model="workDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    ref="workDateRef"
+                    class="full-width inputgreen cursor-pointer"
+                    hide-bottom-space
+                    dense
+                    outlined
+                    :model-value="
+                  workDate !== null
+                    ? date2Thai(workDate as Date)
+                    : null
+                "
+                    :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
+                    label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="'color: var(--q-primary)'"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div
+              class="col-12"
+              v-if="containDate && workDate ? dateToISO(containDate as Date) !== dateToISO(workDate as Date):false"
+            >
+              <q-input
+                ref="reasonSameDateRef"
+                class="full-width inputgreen cursor-pointer"
+                label="เหตุผลกรณีไม่ตรงกัน"
+                type="textarea"
+                outlined
+                dense
+                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+                v-model="reasonSameDate"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <!-- dialog History -->
+  <q-dialog v-model="modalHistory" persistent>
+    <q-card style="min-width: 80%">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <DialogHeader
+          tittle="ประวัติแก้ไขข้อมูลราชการ"
+          :close="() => (modalHistory = !modalHistory)"
+        />
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section class="q-pa-sm">
+        <div class="row q-pb-sm q-gutter-x-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            class="col-2"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword == ''" name="search" @click.stop.prevent="filterKeyword = ''" class="cursor-pointer" />
+              <q-icon v-if="filterKeyword" name="cancel" @click.stop.prevent="filterKeyword = ''" class="cursor-pointer" />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumnsHistory"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columnsHistory"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+        <d-table
+          ref="table"
+          :columns="columnsHistory"
+          :rows="rowsHistory"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :filter="filterKeyword"
+          :visible-columns="visibleColumnsHistory"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width></q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div
+                  v-if="
+                    col.name == 'dateStart' ||
+                    col.name == 'dateAppoint' ||
+                    col.name == 'createdAt'
+                  "
+                  class="table_ellipsis"
+                >
+                  {{ date2Thai(col.value) }}
+                </div>
+                <div v-else>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/interface/index/government.ts b/src/modules/04_registryNew/interface/index/government.ts
new file mode 100644
index 000000000..df450a86c
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/government.ts
@@ -0,0 +1,28 @@
+interface MyObjectRef {
+    containDate: object | null;
+    workDate: object | null;
+    reasonSameDate: object | null;
+    [key: string]: any;
+}
+
+interface RequestItemsHistoryObject {
+    oc: string | null;
+    position: string | null;
+    positionPathSide: string | null;
+    posNo: string | null;
+    positionLine: string | null;
+    positionType: string | null;
+    positionLevel: string | null;
+    positionExecutive: string | null;
+    positionExecutiveSide: string | null;
+    dateAppoint: Date;
+    dateStart: Date;
+    retireDate: string | null;
+    govAge: string | null;
+    govAgeAbsent: string | null;
+    govAgePlus: string | null;
+    reasonSameDate: string | null;
+    createdFullName: string | null;
+    createdAt: Date;
+  }
+export type { MyObjectRef,RequestItemsHistoryObject };