From 94996f6d28f5272d6cb3f991e7d1fb88bf40bcbd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 31 Aug 2023 14:16:40 +0700
Subject: [PATCH] =?UTF-8?q?POPUP=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=96=E0=B8=B7=E0=B8=AD=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=AD=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.profile.ts               |   2 +
 .../04_registry/components/PopupHistory.vue   | 400 +++++++++++++
 .../04_registry/components/TableProfile.vue   | 526 +++++++++---------
 3 files changed, 663 insertions(+), 265 deletions(-)
 create mode 100644 src/modules/04_registry/components/PopupHistory.vue

diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index 62574c66f..c3741f71f 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -183,6 +183,8 @@ export default {
   profileCitizenId: (citizenId: string) => `${profile}citizenId/${citizenId}`,
   profileEmployeeIn: `${profile}information/employee`,
 
+  profileHistory: (type: string) => `${profile}search/history/oc/${type}`
+
 
 
 
diff --git a/src/modules/04_registry/components/PopupHistory.vue b/src/modules/04_registry/components/PopupHistory.vue
new file mode 100644
index 000000000..73ef17ba7
--- /dev/null
+++ b/src/modules/04_registry/components/PopupHistory.vue
@@ -0,0 +1,400 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const $q = useQuasar();
+
+const modal = ref<boolean>(false);
+const employeeClass = ref<string>("");
+const typeKeyword = ref<string>("");
+const Keyword = ref<string>("");
+const positionKeyword = ref<string>("");
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+]);
+const typeKeywordOps = ref<DataOption[]>([
+  { id: "no", name: "เลขที่ตำแหน่ง" },
+  { id: "position", name: "ตำแหน่ง" },
+]);
+const positionOps = ref<DataOption[]>([]);
+const columns = ref<any["columns"]>([
+  {
+    name: "no",
+    label: "ลำดับ",
+    field: "no",
+    align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ถือครอง",
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([]);
+
+const clickOpenpopup = () => {
+  modal.value = true;
+  employeeClass.value = "";
+  changeEmployeeClass();
+};
+const fecthPositionOfficer = async () => {
+  await http
+    .get(config.API.listPositionPathHistory)
+    .then((res) => {
+      let data = res.data.result.items;
+      console.log(data);
+      positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
+      options.value = positionOps.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+};
+const fetchPositionPerm = async () => {
+  await http
+    .get(config.API.listPositionEmployeeGroupHistory)
+    .then((res) => {
+      let data = res.data.result.items;
+      positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
+      options.value = positionOps.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+};
+
+const changeEmployeeClass = () => {
+  typeKeyword.value = "";
+  Keyword.value = "";
+  positionKeyword.value = "";
+  rows.value = [];
+};
+const selectTypeKeyword = async (typeKeyword: string) => {
+  positionOps.value = [];
+  positionKeyword.value = "";
+  Keyword.value = "";
+
+  if (typeKeyword == "position" && employeeClass.value === "officer") {
+    fecthPositionOfficer();
+  } else if (typeKeyword == "position" && employeeClass.value === "perm") {
+    fetchPositionPerm();
+  }
+};
+const clickSearch = async (type: string) => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      showLoader();
+      let body = {};
+      if (typeKeyword.value === "no") {
+        Object.assign(body, {
+          posNo: Keyword.value,
+        });
+      } else if (typeKeyword.value === "position") {
+        Object.assign(body, {
+          positionId: positionKeyword.value,
+        });
+      }
+      http
+        .post(config.API.profileHistory(type), body)
+        .then((res) => {
+          let data = res.data.result;
+          rows.value = data.map((e: any) => ({
+            id: e.id,
+            citizenId: e.citizenId,
+            name: e.firstName + "    " + e.lastName,
+            posNo: e.posNo,
+            position: e.position,
+            date: date2Thai(e.date),
+          }));
+        })
+        .catch((err) => {
+          messageError($q, err);
+          rows.value = [];
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  });
+};
+const options = ref<any>([]);
+// const filterFn = (val: string) => {
+//   options.value = positionOps.value;
+//   console.log(options.value);
+//   if (val !== "") {
+//     options.value = positionOps.value.filter(
+//       (e: any) => e.name.search(val) !== -1
+//     );
+//     console.log(options.value);
+
+//   }
+// };
+
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "order",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+</script>
+
+<template>
+  <q-btn round flat color="primary" icon="mdi-history" @click="clickOpenpopup">
+    <q-tooltip>แสดงประวัติถือครอง</q-tooltip></q-btn
+  >
+
+  <q-dialog v-model="modal">
+    <q-card style="width: 850px; max-width: 80vw">
+      <q-card-section>
+        <div class="my-content">
+          <div
+            class="row q-pa-xs items-center bg-blue-1"
+            style="border-radius: 4px 4px 0px 0px"
+          >
+            <q-icon
+              size="20px"
+              color="blue-9"
+              name="mdi-filter-variant"
+              class="q-mx-sm"
+            />
+            <div class="text-blue-9 text-subtitle2 text-weight-medium">
+              <span>ประวัติถือครองตำแหน่ง</span>
+            </div>
+            <q-space />
+            <q-btn
+              color="blue-9"
+              icon="mdi-close"
+              size="12px"
+              flat
+              round
+              dense
+              v-close-popup
+            />
+          </div>
+          <q-separator color="blue-1" />
+          <div class="dialog-card-contain">
+            <q-card-section class="q-pa-sm">
+              <q-form ref="myForm">
+                <div class="row col-12 q-col-gutter-xs">
+                  <q-select
+                    class="col-4"
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="employeeClass"
+                    emit-value
+                    map-options
+                    :options="employeeClassOps"
+                    option-label="name"
+                    option-value="id"
+                    :label="`${'ประเภท'}`"
+                    use-input
+                    input-debounce="0"
+                    @update:model-value="changeEmployeeClass"
+                  />
+                  <q-select
+                    class="col-4"
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="typeKeyword"
+                    emit-value
+                    map-options
+                    :options="typeKeywordOps"
+                    option-label="name"
+                    option-value="id"
+                    :label="`${' เลือกฟิลด์ที่จะค้น'}`"
+                    use-input
+                    input-debounce="0"
+                    @update:model-value="selectTypeKeyword(typeKeyword)"
+                  />
+                  <q-input
+                    v-if="typeKeyword === 'no'"
+                    class="col-4"
+                    borderless
+                    outlined
+                    dense
+                    debounce="300"
+                    v-model="Keyword"
+                    placeholder="เลขที่ตำแหน่ง"
+                    :rules="[(val:string) => !!val || `${'กรุณากรอก เลขที่ตำแหน่ง'}`]"
+                  />
+                  <q-select
+                    v-if="typeKeyword === 'position'"
+                    class="col-4"
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
+                    outlined
+                    dense
+                    v-model="positionKeyword"
+                    emit-value
+                    map-options
+                    :options="options"
+                    option-label="name"
+                    option-value="id"
+                    :label="`${' เลือกตำแหน่ง'}`"
+                    use-input
+                    input-debounce="0"
+                  />
+                  <q-space />
+                  <div>
+                    <q-btn
+                      dense
+                      color="primary"
+                      icon="mdi-magnify"
+                      label="ค้นหา"
+                      class="q-px-md"
+                      @click="clickSearch(employeeClass)"
+                    />
+                  </div>
+                </div>
+              </q-form>
+            </q-card-section>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-table
+          flat
+          dense
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="order"
+          class="custom-header-table"
+          no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <div class="text-grey-7 text-weight-medium">
+                  <span class="row">{{ col.label }}</span>
+                </div>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props"> {{ props.rowIndex + 1 }}</q-td>
+              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
+              <q-td key="citizenId" :props="props">{{
+                props.row.citizenId
+              }}</q-td>
+              <q-td key="name" :props="props">{{ props.row.name }}</q-td>
+
+              <q-td key="posNo" :props="props">{{ props.row.posNo }}</q-td>
+              <q-td key="position" :props="props">{{
+                props.row.position
+              }}</q-td>
+              <q-td key="date" :props="props">{{ props.row.date }}</q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </q-card-section>
+
+      <!-- <q-card-actions align="right">
+        <q-btn flat label="OK" color="primary" v-close-popup />
+      </q-card-actions> -->
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  .q-table thead tr:last-child th {
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index a946465f2..157105aef 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -19,6 +19,7 @@
       <div class="q-py-sm col-12 row">
         <q-space />
         <div class="items-center row col-12 q-gutter-x-sm">
+          <PopupHistory />
           <q-btn
             size="13px"
             color="grey-7"
@@ -118,269 +119,269 @@
             <q-separator color="blue-1" />
             <div class="dialog-card-contain">
               <q-card-section class="q-pa-sm">
-                  <div class="row col-12 q-col-gutter-xs">
-                    <selector
-                      class="col-4"
-                      hide-bottom-space
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
-                      outlined
-                      dense
-                      lazy-rules
-                      :model-value="employeeClass"
-                      emit-value
-                      map-options
-                      :options="employeeClassOps"
-                      option-label="name"
-                      option-value="id"
-                      :label="`${'ประเภท'}`"
-                      use-input
-                      input-debounce="0"
-                      @update:model-value="updateEmployeeClass"
-                    />
-                    <!-- @filter="(inputValue:any,
+                <div class="row col-12 q-col-gutter-xs">
+                  <selector
+                    class="col-4"
+                    hide-bottom-space
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                    outlined
+                    dense
+                    lazy-rules
+                    :model-value="employeeClass"
+                    emit-value
+                    map-options
+                    :options="employeeClassOps"
+                    option-label="name"
+                    option-value="id"
+                    :label="`${'ประเภท'}`"
+                    use-input
+                    input-debounce="0"
+                    @update:model-value="updateEmployeeClass"
+                  />
+                  <!-- @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
                       ) " -->
-                    <q-input
-                      class="col-3"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="profileId"
-                      hide-bottom-space
-                      label="เลขประจำตัวประชาชน"
-                      @update:model-value="updateProfileId"
-                      type="number"
-                    />
-                    <q-input
-                      class="col-3"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="fullName"
-                      hide-bottom-space
-                      label="ชื่อ-นามสกุล"
-                      @update:model-value="updateFullname"
-                    />
-                    <datepicker
-                      class="col-2"
-                      menu-class-name="modalfix"
-                      :model-value="retireYear"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      @update:model-value="updateRetireYear"
-                      clearable
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          class="inputgreen cursor-pointer"
-                          hide-bottom-space
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            retireYear == null ? null : retireYear + 543
-                          "
-                          :label="`${'ปีเกษียณ'}`"
-                          clearable
-                          @clear="clearDate"
-                        >
-                          <!-- <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template> -->
-                        </q-input>
-                      </template>
-                    </datepicker>
-                    <q-input
-                      class="col-2"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="govAge"
-                      hide-bottom-space
-                      label="อายุราชการ(ปี)"
-                      type="number"
-                      @update:model-value="updateGovAge"
-                    />
-                    <q-input
-                      v-if="employeeClass == 'officer'"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="positionPath"
-                      hide-bottom-space
-                      label="ตำแหน่งในสายงาน"
-                      @update:model-value="updatePositionPath"
-                      class="col-3"
-                    />
-                    <q-input
-                      v-if="employeeClass == 'officer'"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="positionLevel"
-                      hide-bottom-space
-                      label="ระดับ"
-                      @update:model-value="updatePositionLevel"
-                      class="col-3"
-                    />
-                    <q-input
-                      v-if="employeeClass == 'officer'"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="positionExecutive"
-                      hide-bottom-space
-                      label="ตำแหน่งทางการบริหาร"
-                      @update:model-value="updatePositionExecutive"
-                      class="col-4"
-                    />
-                    <q-input
-                      v-if="employeeClass != 'officer'"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="employeePosition"
-                      hide-bottom-space
-                      label="ตำแหน่ง"
-                      @update:model-value="updateEmployeePosition"
-                      class="col-3"
-                    />
-                    <q-input
-                      v-if="employeeClass != 'officer'"
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="employeeLevel"
-                      hide-bottom-space
-                      label="ระดับชั้นงาน"
-                      @update:model-value="updateEmployeeLevel"
-                      class="col-4"
-                    />
-                    <q-input
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="posNo"
-                      hide-bottom-space
-                      label="ตำแหน่งเลขที่"
-                      @update:model-value="updatePosNo"
-                      class="col-3"
-                    />
-                    <datepicker
-                      class="col-2"
-                      menu-class-name="modalfix"
-                      :model-value="reportYear"
-                      :locale="'th'"
-                      autoApply
-                      year-picker
-                      :enableTimePicker="false"
-                      @update:model-value="updateReportYear"
-                      clearable
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          class="inputgreen cursor-pointer q-mb-sm"
-                          hide-bottom-space
-                          outlined
-                          dense
-                          lazy-rules
-                          borderless
-                          :model-value="
-                            reportYear == null ? null : reportYear + 543
-                          "
-                          :label="`${'ปีงบประมาณ'}`"
-                          clearable
-                          @clear="clearReportDate"
-                        >
-                          <!-- <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              style="color: var(--q-primary)"
-                            >
-                            </q-icon>
-                          </template> -->
-                        </q-input>
-                      </template>
-                    </datepicker>
-                    <q-input
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="reportNo"
-                      hide-bottom-space
-                      label="เลขที่คำสั่ง"
-                      @update:model-value="updateReportNo"
-                      class="col-3"
-                    />
-                    <q-input
-                      clearable
-                      dense
-                      outlined
-                      lazy-rules
-                      :model-value="reportType"
-                      hide-bottom-space
-                      label="ประเภทคำสั่ง"
-                      @update:model-value="updateReportType"
-                      class="col-4"
-                    />
-                  
-                    <q-toggle
-                      dense
-                      :model-value="isShowRetire"
-                      color="primary"
-                      @update:model-value="updateIsShowRetire"
-                      class="q-pr-md"
-                    >
-                      แสดงข้อมูลผู้พ้นจากราชการ
-                    </q-toggle>
-                    <q-toggle
-                      dense
-                      :model-value="isProbation"
-                      color="primary"
-                      @update:model-value="updateIsProbation"
-                    >
-                      ทดลองปฏิบัติหน้าที่ราชการ
-                    </q-toggle>
-                    <q-space />
-                    <div>
-                      <q-btn
+                  <q-input
+                    class="col-3"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="profileId"
+                    hide-bottom-space
+                    label="เลขประจำตัวประชาชน"
+                    @update:model-value="updateProfileId"
+                    type="number"
+                  />
+                  <q-input
+                    class="col-3"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="fullName"
+                    hide-bottom-space
+                    label="ชื่อ-นามสกุล"
+                    @update:model-value="updateFullname"
+                  />
+                  <datepicker
+                    class="col-2"
+                    menu-class-name="modalfix"
+                    :model-value="retireYear"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    @update:model-value="updateRetireYear"
+                    clearable
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        class="inputgreen cursor-pointer"
+                        hide-bottom-space
+                        outlined
                         dense
-                        color="primary"
-                        icon="mdi-magnify"
-                        label="ค้นหา"
-                        class="q-px-md"
-                        @click="doSearch"
-                      />
-                    </div>
+                        lazy-rules
+                        borderless
+                        :model-value="
+                          retireYear == null ? null : retireYear + 543
+                        "
+                        :label="`${'ปีเกษียณ'}`"
+                        clearable
+                        @clear="clearDate"
+                      >
+                        <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                      </q-input>
+                    </template>
+                  </datepicker>
+                  <q-input
+                    class="col-2"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="govAge"
+                    hide-bottom-space
+                    label="อายุราชการ(ปี)"
+                    type="number"
+                    @update:model-value="updateGovAge"
+                  />
+                  <q-input
+                    v-if="employeeClass == 'officer'"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="positionPath"
+                    hide-bottom-space
+                    label="ตำแหน่งในสายงาน"
+                    @update:model-value="updatePositionPath"
+                    class="col-3"
+                  />
+                  <q-input
+                    v-if="employeeClass == 'officer'"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="positionLevel"
+                    hide-bottom-space
+                    label="ระดับ"
+                    @update:model-value="updatePositionLevel"
+                    class="col-3"
+                  />
+                  <q-input
+                    v-if="employeeClass == 'officer'"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="positionExecutive"
+                    hide-bottom-space
+                    label="ตำแหน่งทางการบริหาร"
+                    @update:model-value="updatePositionExecutive"
+                    class="col-4"
+                  />
+                  <q-input
+                    v-if="employeeClass != 'officer'"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="employeePosition"
+                    hide-bottom-space
+                    label="ตำแหน่ง"
+                    @update:model-value="updateEmployeePosition"
+                    class="col-3"
+                  />
+                  <q-input
+                    v-if="employeeClass != 'officer'"
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="employeeLevel"
+                    hide-bottom-space
+                    label="ระดับชั้นงาน"
+                    @update:model-value="updateEmployeeLevel"
+                    class="col-4"
+                  />
+                  <q-input
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="posNo"
+                    hide-bottom-space
+                    label="ตำแหน่งเลขที่"
+                    @update:model-value="updatePosNo"
+                    class="col-3"
+                  />
+                  <datepicker
+                    class="col-2"
+                    menu-class-name="modalfix"
+                    :model-value="reportYear"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    @update:model-value="updateReportYear"
+                    clearable
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        class="inputgreen cursor-pointer q-mb-sm"
+                        hide-bottom-space
+                        outlined
+                        dense
+                        lazy-rules
+                        borderless
+                        :model-value="
+                          reportYear == null ? null : reportYear + 543
+                        "
+                        :label="`${'ปีงบประมาณ'}`"
+                        clearable
+                        @clear="clearReportDate"
+                      >
+                        <!-- <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template> -->
+                      </q-input>
+                    </template>
+                  </datepicker>
+                  <q-input
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="reportNo"
+                    hide-bottom-space
+                    label="เลขที่คำสั่ง"
+                    @update:model-value="updateReportNo"
+                    class="col-3"
+                  />
+                  <q-input
+                    clearable
+                    dense
+                    outlined
+                    lazy-rules
+                    :model-value="reportType"
+                    hide-bottom-space
+                    label="ประเภทคำสั่ง"
+                    @update:model-value="updateReportType"
+                    class="col-4"
+                  />
+
+                  <q-toggle
+                    dense
+                    :model-value="isShowRetire"
+                    color="primary"
+                    @update:model-value="updateIsShowRetire"
+                    class="q-pr-md"
+                  >
+                    แสดงข้อมูลผู้พ้นจากราชการ
+                  </q-toggle>
+                  <q-toggle
+                    dense
+                    :model-value="isProbation"
+                    color="primary"
+                    @update:model-value="updateIsProbation"
+                  >
+                    ทดลองปฏิบัติหน้าที่ราชการ
+                  </q-toggle>
+                  <q-space />
+                  <div>
+                    <q-btn
+                      dense
+                      color="primary"
+                      icon="mdi-magnify"
+                      label="ค้นหา"
+                      class="q-px-md"
+                      @click="doSearch"
+                    />
                   </div>
-                  <!-- <div class="col-12 row q-col-gutter-y-md">
+                </div>
+                <!-- <div class="col-12 row q-col-gutter-y-md">
                     <div class="row q-gutter-md">
                       <q-radio
                         dense
@@ -435,6 +436,7 @@
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 import type { DataOption } from "@/modules/04_registry/components/profileType";
+import PopupHistory from "./PopupHistory.vue";
 
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
@@ -578,7 +580,6 @@ const clearDate = () => {
 const clearReportDate = () => {
   emit("update:reportYear", null);
 };
-
 const clickSearchPanel = () => {
   emit("update:retireYear", null);
   emit("update:govAge", null);
@@ -589,23 +590,18 @@ const clickSearchPanel = () => {
   emit("update:employeeClass", null);
   searchPanel.value = !searchPanel.value;
 };
-
 const paginationLabel = (start: string, end: string, total: string) => {
   return start + "-" + end + " ใน " + total;
 };
-
 const doSearch = () => {
   props.doSearch();
 };
-
 const onExport = () => {
   props.onExport();
 };
-
 const onTab = () => {
   props.onTab();
 };
-
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   emit("update:inputfilter", "");