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

src/modules/04_registryNew/components/registry/DialogAddData.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+import type { DataType } from "@/modules/04_registryNew/interface/response/Main";
+import type {
+  FormAddPerson,
+  MyObjectRef,
+} from "@/modules/04_registryNew/interface/request/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const store = useRegistryNewDataStore();
+const {
+  dialogRemove,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps({
+  fetchData: { type: Function },
+  fetchType: { type: Function },
+});
+
+const prefixOps = ref<DataOption[]>([]);
+const levelOps = ref<DataType[]>([]);
+
+const formData = reactive<FormAddPerson>({
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  citizenId: "",
+  position: "",
+  posTypeId: "",
+  posLevelId: "",
+});
+
+const prefixRef = ref<object | null>(null);
+const firstNameRef = ref<object | null>(null);
+const lastNameRef = ref<object | null>(null);
+const citizenIdRef = ref<object | null>(null);
+const positionRef = ref<object | null>(null);
+const posTypeIdRef = ref<object | null>(null);
+const posLevelIdRef = ref<object | null>(null);
+
+const objectRef: MyObjectRef = {
+  prefix: prefixRef,
+  firstName: firstNameRef,
+  lastName: lastNameRef,
+  citizenId: citizenIdRef,
+  position: positionRef,
+  posTypeId: posTypeIdRef,
+  posLevelId: posLevelIdRef,
+};
+
+function fetchPrefix() {
+  http
+    .get(config.API.orgPrefix)
+    .then((res) => {
+      prefixOps.value = res.data.result.map((v: any) => ({
+        id: v.name,
+        name: v.name,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function ตรวจสอบเลขประจำตัวประชาชน
+ * @param citizenId เลขประจำตัวประชาชน
+ */
+function changeCardID(citizenId: string | number | null) {
+  if (citizenId != null && typeof citizenId == "string") {
+    if (citizenId.length == 13 && citizenId) {
+      http
+        .put(config.API.profileNewCitizenId(citizenId), {
+          citizenId: citizenId,
+        })
+        .then(() => {})
+        .catch((err) => {
+          if (err.response.data.status === 500) {
+            dialogMessageNotify($q, err.response.data.message);
+          } else {
+            messageError($q, err);
+          }
+        });
+    }
+  }
+}
+
+function fetchLevel(id: string) {
+  const listLevel = store.posTypeMain.find((e: DataType) => e.id === id);
+  levelOps.value = listLevel?.posLevels;
+
+  const checkLevel = levelOps.value.filter(
+    (e: DataType) => e.id === formData.posLevelId
+  );
+  if (checkLevel.length === 0) {
+    formData.posLevelId = "";
+  }
+}
+
+function closeDialog() {
+  modal.value = false;
+  clearFormData();
+}
+
+function clearFormData() {
+  formData.prefix = "";
+  formData.firstName = "";
+  formData.lastName = "";
+  formData.citizenId = "";
+  formData.position = "";
+  formData.posTypeId = "";
+  formData.posLevelId = "";
+}
+
+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();
+  }
+}
+
+async function onSubmit() {
+  showLoader();
+  await http
+    .post(config.API.registryNew, formData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      props.fetchData?.();
+      closeDialog();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchPrefix();
+      props.fetchType?.();
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <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 q-col-gutter-md">
+          <q-select
+            bg-color="white"
+            ref="prefixRef"
+            v-model="formData.prefix"
+            label="คำนำหน้าชื่อ"
+            outlined
+            dense
+            :options="prefixOps"
+            option-label="name"
+            option-value="id"
+            map-options
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+            emit-value
+          />
+          <q-input
+            bg-color="white"
+            ref="firstNameRef"
+            outlined
+            v-model="formData.firstName"
+            label="ชื่อ"
+            dense
+            lazy-rules
+            borderless
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
+            hide-bottom-space
+          />
+          <q-input
+            bg-color="white"
+            ref="lastNameRef"
+            outlined
+            v-model="formData.lastName"
+            label="นามสกุล"
+            dense
+            lazy-rules
+            borderless
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
+            hide-bottom-space
+          />
+          <q-input
+            bg-color="white"
+            ref="citizenIdRef"
+            outlined
+            v-model="formData.citizenId"
+            label="เลขประจำตัวประชาชน"
+            dense
+            lazy-rules
+            borderless
+            :rules="[
+                        (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
+                        (val: string) =>
+                          val.length >= 13 ||
+                          `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                      ]"
+            maxlength="13"
+            hide-bottom-space
+            mask="#############"
+            @update:model-value="changeCardID"
+          />
+          <q-input
+            bg-color="white"
+            ref="positionRef"
+            outlined
+            v-model="formData.position"
+            label="ตำแหน่ง"
+            dense
+            lazy-rules
+            borderless
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
+            hide-bottom-space
+          />
+          <q-select
+            bg-color="white"
+            ref="posTypeIdRef"
+            v-model="formData.posTypeId"
+            label="ประเภทตำแหน่ง"
+            outlined
+            :options="store.posTypeOps"
+            dense
+            options-cover
+            map-options
+            emit-value
+            option-label="name"
+            option-value="id"
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง']"
+            @update:model-value="fetchLevel"
+          />
+          <q-select
+            bg-color="white"
+            ref="posLevelIdRef"
+            v-model="formData.posLevelId"
+            label="ระดับตำแหน่ง"
+            :options="levelOps"
+            outlined
+            dense
+            map-options
+            emit-value
+            option-label="posLevelName"
+            option-value="id"
+            options-cover
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกระดับตำแหน่ง']"
+          />
+        </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>
+</template>
+
+<style scoped></style>

src/modules/04_registryNew/components/registry/DialogHistory.vue

@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+import type { QForm } from "quasar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const myForm = ref<QForm>();
+const router = useRouter();
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, date2Thai, dialogMessageNotify } =
+  useCounterMixin();
+
+/**props*/
+const modal = defineModel<boolean>("modal", { required: true });
+
+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>([]);
+
+function fecthPositionOfficer() {
+  http
+    .get(config.API.listPositionPathHistory)
+    .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);
+    });
+}
+function fetchPositionPerm() {
+  http
+    .get(config.API.listPositionEmployeePositionHistory)
+    .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);
+    });
+}
+
+function changeEmployeeClass() {
+  typeKeyword.value = "";
+  Keyword.value = "";
+  positionKeyword.value = "";
+  rows.value = [];
+}
+function selectTypeKeyword(typeKeyword: string) {
+  positionOps.value = [];
+  positionKeyword.value = "";
+  Keyword.value = "";
+
+  if (typeKeyword == "position" && employeeClass.value === "officer") {
+    fecthPositionOfficer();
+  } else if (typeKeyword == "position" && employeeClass.value === "perm") {
+    fetchPositionPerm();
+  }
+}
+
+function clickSearch(type: string) {
+  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;
+          if (data.length !== 0) {
+            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),
+            }));
+          } else {
+            dialogMessageNotify($q, "ไม่มีข้อมูลที่ต้องการค้นหา");
+            rows.value = [];
+          }
+        })
+        .catch((err) => {
+          messageError($q, err);
+          rows.value = [];
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  });
+}
+const options = ref<any>([]);
+function filterFn(val: string, update: any) {
+  if (val === "") {
+    update(() => {
+      options.value = positionOps.value;
+    });
+    return;
+  } else {
+    update(() => {
+      options.value = positionOps.value.filter(
+        (e) => e.name.search(val) !== -1
+      );
+    });
+  }
+}
+function clickRedirect(id: string) {
+  router.push(`/registry/${id}`);
+}
+
+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-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"
+                    @filter="filterFn"
+                    behavior="menu"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template></q-select
+                  >
+                  <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"
+                class="text-primary"
+                @click="clickRedirect(props.row.id)"
+                :props="props"
+                >{{ props.row.citizenId }}</q-td
+              >
+              <q-td
+                key="name"
+                class="text-primary"
+                @click="clickRedirect(props.row.id)"
+                :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>

src/modules/04_registryNew/components/registry/TableView.vue

@@ -1,112 +1,272 @@
 <script setup lang="ts">
-import type { QTableColumn } from "quasar";
+import { ref, watch, computed, onMounted } from "vue";
 
-const visibleColumns = defineModel<string[]>("visibleColumns");
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
 
-const mode = defineModel<string>("mode");
+/** importComponent*/
+import DialogAddData from "@/modules/04_registryNew/components/registry/DialogAddData.vue";
+import DialogHistory from "@/modules/04_registryNew/components/registry/DialogHistory.vue";
 
-const props = defineProps<{
-  columns: QTableColumn[];
-}>();
+/** importStore*/
+import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
 
-const rows = [
+const store = useRegistryNewDataStore();
+
+const formFilter = defineModel<FormFilter>("formFilter", { required: true });
+const maxPage = defineModel<Number>("maxPage", { required: true });
+const props = defineProps({
+  rows: { type: Array },
+  fetchData: { type: Function },
+  fetchType: { type: Function },
+});
+
+const columns = ref<QTableProps["columns"]>([
   {
-    no: 1,
-    fullName: "นางสาวกัณฐิมา กานสิน",
-    citizenId: "1231231231234",
-    posNo: "สกก.1",
-    position: "นักบริหาร",
-    posPath: "บริหาร",
-    posType: "บริหาร",
-    posLevel: "ชำนาญการพิเศษ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "40,000",
+    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" }),
   },
   {
-    no: 2,
-    fullName: "นายธามไทย คนคูเมือง",
-    citizenId: "5555555555555",
-    posNo: "สกก.5",
-    position: "นักจัดการงานทั่วไป",
-    posPath: "จัดการงานทั่วไป",
-    posType: "วิชาการ",
-    posLevel: "ปฏิบัติการ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "25,000",
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    no: 2,
-    fullName: "นายธามไทย คนคูเมือง",
-    citizenId: "5555555555555",
-    posNo: "สกก.5",
-    position: "นักจัดการงานทั่วไป",
-    posPath: "จัดการงานทั่วไป",
-    posType: "วิชาการ",
-    posLevel: "ปฏิบัติการ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "25,000",
+    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" }),
   },
   {
-    no: 2,
-    fullName: "นายธามไทย คนคูเมือง",
-    citizenId: "5555555555555",
-    posNo: "สกก.5",
-    position: "นักจัดการงานทั่วไป",
-    posPath: "จัดการงานทั่วไป",
-    posType: "วิชาการ",
-    posLevel: "ปฏิบัติการ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "25,000",
+    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" }),
   },
   {
-    no: 2,
-    fullName: "นายธามไทย คนคูเมือง",
-    citizenId: "5555555555555",
-    posNo: "สกก.5",
-    position: "นักจัดการงานทั่วไป",
-    posPath: "จัดการงานทั่วไป",
-    posType: "วิชาการ",
-    posLevel: "ปฏิบัติการ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "25,000",
+    name: "posPath",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "posPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    no: 2,
-    fullName: "นายธามไทย คนคูเมือง",
-    citizenId: "5555555555555",
-    posNo: "สกก.5",
-    position: "นักจัดการงานทั่วไป",
-    posPath: "จัดการงานทั่วไป",
-    posType: "วิชาการ",
-    posLevel: "ปฏิบัติการ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "25,000",
+    name: "posType",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "posPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-];
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posOc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "posOc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "posNo",
+  "position",
+  "posPath",
+  "posType",
+  "posLevel",
+  "posOc",
+  "year",
+  "salary",
+]);
+
+function updatePagePagination() {
+  props.fetchData?.();
+}
+
+function updatePageSizePagination(newPagination: any) {
+  formFilter.value.page = 1;
+  formFilter.value.pageSize = newPagination.rowsPerPage;
+}
+
+const pagination = ref({
+  page: formFilter.value.page,
+  rowsPerPage: formFilter.value.pageSize,
+});
+
+const modalDialogAdd = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+
+function onClickAddData() {
+  modalDialogAdd.value = !modalDialogAdd.value;
+}
+
+function onClickHistory() {
+  modalHistory.value = !modalHistory.value;
+}
+
+watch(
+  () => formFilter.value.pageSize,
+  () => {
+    props.fetchData?.();
+  }
+);
 </script>
-<!-- :filter="filterKeyword"
-:visible-columns="visibleColumns" -->
 
 <template>
+  <q-toolbar style="padding: 0px">
+    <q-btn
+      round
+      flat
+      color="primary"
+      icon="add"
+      size="16px"
+      @click="onClickAddData"
+    >
+      <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+    >
+    <q-btn
+      round
+      flat
+      color="blue"
+      icon="mdi-history"
+      size="16px"
+      @click="onClickHistory"
+    >
+      <q-tooltip>ประวัติถือครองตำแหน่ง</q-tooltip></q-btn
+    >
+    <q-space />
+    <q-select
+      v-if="store.mode === 'table'"
+      v-model="visibleColumns"
+      multiple
+      outlined
+      dense
+      options-dense
+      :display-value="$q.lang.table.columns"
+      emit-value
+      map-options
+      :options="columns"
+      option-value="name"
+      options-cover
+      style="min-width: 150px"
+      class="q-mr-sm"
+    />
+
+    <q-btn-toggle
+      v-model="store.mode"
+      dense
+      class="no-shadow"
+      toggle-color="grey-4"
+      :options="[
+        { value: 'table', slot: 'table' },
+        { value: 'card', slot: 'card' },
+      ]"
+    >
+      <template v-slot:table>
+        <q-icon
+          name="format_list_bulleted"
+          size="24px"
+          :style="{
+            color: store.mode === 'table' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+
+      <template v-slot:card>
+        <q-icon
+          name="mdi-view-grid-outline"
+          size="24px"
+          :style="{
+            color: store.mode === 'card' ? '#787B7C' : '#C9D3DB',
+          }"
+        />
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
   <d-table
     ref="table"
-    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
-    :columns="props.columns"
-    :rows="rows"
-    row-key="name"
+    row-key="id"
     flat
     bordered
-    :grid="mode === 'card'"
-    :paging="true"
     dense
-    class="custom-header-table"
+    :card-container-class="store.mode === 'card' ? 'q-col-gutter-md' : ''"
+    :columns="columns"
+    :rows="props.rows"
+    :grid="store.mode === 'card'"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
+    @update:pagination="updatePageSizePagination"
   >
     >
     <template v-slot:header="props">
@@ -116,27 +276,44 @@ const rows = [
         </q-th>
       </q-tr>
     </template>
-    <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer" v-if="mode === 'table'">
+    <template v-slot:body="props" v-if="store.mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.id">
-          <template v-if="col.name == 'fullName'">
-            <q-item v-ripple>
-              <q-item-section avatar>
-                <img
-                  src="@/assets/avatar_user.jpg"
-                  class="col-4 img-info"
-                  style="width: 35px; height: 40px; border-radius: 50%"
-                />
-              </q-item-section>
-
-              <q-item-section>
-                <div class="text-weight-medium">{{ props.row.fullName }}</div>
-                <div class="text-weight-light">{{ props.row.citizenId }}</div>
-              </q-item-section>
-            </q-item>
+          <div v-if="col.name === 'no'">
+            {{
+              (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
+            }}
+          </div>
+          <template v-else-if="col.name == 'fullName'">
+            <div class="row col-12 wrap items-center">
+              <q-item>
+                <q-item-section avatar>
+                  <q-avatar>
+                    <img
+                      v-if="props.row.avatar == null"
+                      src="@/assets/avatar_user.jpg"
+                      class="col-4 img-info"
+                    />
+                    <img
+                      v-else
+                      :src="props.row.avatar"
+                      class="col-4 img-info"
+                    />
+                  </q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  <div class="text-weight-medium">
+                    {{
+                      `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
+                    }}
+                  </div>
+                  <div class="text-weight-light">{{ props.row.citizenId }}</div>
+                </q-item-section>
+              </q-item>
+            </div>
           </template>
           <template v-else>
-            {{ col.value }}
+            {{ col.value ? col.value : "-" }}
           </template>
         </q-td>
       </q-tr>
@@ -152,7 +329,9 @@ const rows = [
                 style="width: 120px; height: 120px; border-radius: 50%"
               />
               <div class="text-weight-medium q-mt-md">
-                {{ props.row.fullName }}
+                {{
+                  `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
+                }}
               </div>
               <div class="text-weight-light full-width text-center">
                 {{ props.row.citizenId }}
@@ -198,7 +377,48 @@ const rows = [
         </q-card>
       </div>
     </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+        @update:model-value="updatePagePagination()"
+      ></q-pagination>
+    </template>
+    <template v-slot:no-data="{ icon, message, filter }">
+      <div class="full-width row flex-center text-accent q-gutter-sm">
+        <span
+          ><div
+            style="
+              height: 50vh;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+            "
+            class="text-grey-5"
+          >
+            <q-icon name="search" size="4rem" />
+
+            <span>ไม่พบข้อมูล</span>
+          </div>
+        </span>
+      </div>
+    </template>
   </d-table>
+
+  <DialogAddData
+    v-model:modal="modalDialogAdd"
+    :fetchData="props.fetchData"
+    :fetchType="props.fetchType"
+  />
+
+  <DialogHistory v-model:modal="modalHistory" />
 </template>
 
 <style scoped>
@@ -206,4 +426,8 @@ const rows = [
   background-color: #089cfc;
   color: white;
 }
+.my-card {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/modules/04_registryNew/interface/request/Main.ts

@@ -1,14 +1,36 @@
-interface DataSumCalendarObject {
-  id: number;
-  monthFull: String;
-  count: number;
-  color: String;
+interface FormFilter {
+  page: number;
+  pageSize: number;
+  keyword: string;
+  type: string;
+  posType: string;
+  posLevel: string;
+  retireYear: string | null;
+  rangeYear: { min: number; max: number };
+  isShowRetire: boolean;
+  isProbation: boolean;
 }
 
-interface DataListsObject {
-  id: number;
-  count: number;
-  name: string;
+interface FormAddPerson {
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  position: string;
+  posTypeId: string;
+  posLevelId: string;
 }
 
-export type { DataSumCalendarObject, DataListsObject };
+interface MyObjectRef {
+  prefix: object | null;
+  firstName: object | null;
+  lastName: object | null;
+  citizenId: object | null;
+  position: object | null;
+  posTypeId: object | null;
+  posLevelId: object | null;
+
+  [key: string]: any;
+}
+
+export type { FormFilter, FormAddPerson, MyObjectRef };

src/modules/04_registryNew/interface/response/Main.ts

@@ -12,4 +12,15 @@ interface DataLevel {
   posLevelRank: number;
 }
 
-export type { DataType, DataLevel };
+interface DataPerson {
+  citizenId: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  posLevelId: string;
+  posTypeId: string;
+  position: string;
+  prefix: string;
+}
+
+export type { DataType, DataLevel, DataPerson };

src/modules/04_registryNew/store.ts

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
 import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
 import type {
@@ -7,22 +8,47 @@ import type {
 } from "@/modules/04_registryNew/interface/response/Main";
 
 export const useRegistryNewDataStore = defineStore("registryNew", () => {
+  const searchTypeOption = ref<DataOption[]>([
+    { id: "fullName", name: "ชื่อ-นามสกุล" },
+    { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+    { id: "posNo", name: "ตำแหน่งเลขที่" },
+    { id: "position", name: "ตำแหน่งสายงาน" },
+  ]);
+  const employeeClassOps = ref<DataOption[]>([
+    { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ]);
+  const posTypeOps = ref<DataOption[]>([]);
+  const posTypeMain = ref<DataType[]>([]);
+  const posLevelOps = ref<DataOption[]>([]);
+  const yearOps = ref<DataOption[]>([]);
+  const mode = ref<string>("card");
+
   function fetchType(data: DataType[]) {
+    posTypeMain.value = data;
     const list: DataOption[] = data.map((e: DataType) => ({
       id: e.id,
       name: e.posTypeName,
     }));
-    return list;
+    posTypeOps.value = list;
   }
   function fetchLevel(data: DataLevel[]) {
     const list: DataOption[] = data.map((e: DataLevel) => ({
       id: e.id,
       name: e.posLevelName,
     }));
-    return list;
+    posLevelOps.value = list;
   }
   return {
     fetchType,
     fetchLevel,
+    posTypeMain,
+    searchTypeOption,
+    employeeClassOps,
+    posTypeOps,
+    posLevelOps,
+    yearOps,
+    mode,
   };
 });

src/modules/04_registryNew/views/list.vue

@@ -7,7 +7,8 @@ import config from "@/app.config";
 /** importType*/
 import type { QTableColumn } from "quasar";
 import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
-import type { RangeYear } from "@/modules/04_registryNew/interface/index/registry";
+import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
+import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
 
 /** importComponents*/
 import Search from "@/modules/04_registryNew/components/registry/Search.vue";
@@ -22,211 +23,127 @@ const store = useRegistryNewDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const mode = ref<"table" | "card">("table");
-const 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: "fullName",
-    align: "center",
-    label: "ชื่อ - นามสกุล",
-    sortable: true,
-    field: "fullName",
-    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: "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: "posPath",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "posPath",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "posPath",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับชั้นงาน",
-    sortable: true,
-    field: "posLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posOc",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "posOc",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "salary",
-    align: "left",
-    label: "ค่าจ้าง",
-    sortable: true,
-    field: "salary",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-] satisfies QTableColumn[];
 
-const visibleColumns = ref<string[]>([
-  "no",
-  "fullName",
-  "posNo",
-  "position",
-  "posPath",
-  "posType",
-  "posLevel",
-  "posOc",
-  "year",
-  "salary",
-]);
-
-const isSearchData = ref<boolean>(true);
-const isShowFilter = ref<boolean>(true);
-const keyword = ref<string>("");
-
-const searchType = ref<string>("fullName");
-
-const searchTypeOption = ref<DataOption[]>([
-  { id: "fullName", name: "ชื่อ-นามสกุล" },
-  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "posNo", name: "ตำแหน่งเลขที่" },
-  { id: "position", name: "ตำแหน่งสายงาน" },
-]);
+const isShowFilter = ref<boolean>(false);
+const isShowBtnFilter = ref<boolean>(true);
 
 const labelOption = reactive({
-  type: "ทั้งหมด",
+  type: "ข้าราชการทั้งหมด",
   posType: "ทั้งหมด",
   posLevel: "ทั้งหมด",
+  retireYear: "",
 });
 
-const type = ref<string>("ข้าราชการทั้งหมด");
-const posType = ref<string>("ทั้งหมด");
-const posLevel = ref<string>("ทั้งหมด");
-const retireYear = ref<number | null>(null);
-const isShowRetire = ref<boolean>(false);
-const isProbation = ref<boolean>(false);
-const TypeOption = ref<DataOption[]>([
-  { id: "0", name: "ข้าราชการทั้งหมด" },
-  { id: "1", name: "ข้าราชการ กทม.สามัญ" },
-  { id: "2", name: "ลูกจ้างประจำ" },
-  { id: "3", name: "ลููกจ้างชั่วคราว" },
-]);
-const posTypeOption = ref<DataOption[]>([]);
-const posLevelOption = ref<DataOption[]>([]);
-const rangeYear = ref<RangeYear>({
-  min: 0,
-  max: 60,
+const searchType = ref<string>("fullName");
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 12,
+  keyword: "",
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: false,
+  isProbation: false,
 });
+const maxPage = ref<number>(1);
+
+const dataPersonMain = ref<DataPerson[]>([]);
 
 const conditionTotal = computed(() => {
   let num: string = "";
-  if (isProbation.value && isShowRetire.value) {
+  if (formFilter.isProbation && formFilter.isShowRetire) {
     num = "(2)";
-  } else if (isProbation.value || isShowRetire.value) {
+  } else if (formFilter.isProbation || formFilter.isShowRetire) {
     num = "(1)";
   } else "";
 
   return num;
 });
 
+/** function เรียกข้อมูลประเภทตำแหน่ง*/
 function fetchType() {
-  http
-    .get(config.API.orgPosType)
-    .then(async (res) => {
-      posTypeOption.value = store.fetchType(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  if (store.posTypeOps.length === 0) {
+    http
+      .get(config.API.orgPosType)
+      .then((res) => {
+        store.fetchType(res.data.result);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 }
 
-async function fetchLevel() {
+/** function เรียกข้อมูลระดับตำแหน่ง*/
+function fetchLevel() {
+  if (store.posLevelOps.length === 0) {
+    http
+      .get(config.API.orgPosLevel)
+      .then((res) => {
+        store.fetchLevel(res.data.result);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+function fetchYearOption() {
+  if (store.yearOps.length === 0) {
+    const options = [];
+    const year = new Date().getFullYear();
+
+    for (let i = year - 40; i <= year + 60; i++) {
+      options.push({ id: i.toString(), name: (i + 543).toString() });
+    }
+    if (options) {
+      store.yearOps.push(...options);
+    }
+  }
+}
+
+function fetchDataPerson() {
+  showLoader();
   http
-    .get(config.API.orgPosLevel)
-    .then(async (res) => {
-      posLevelOption.value = store.fetchLevel(res.data.result);
+    .get(
+      config.API.registryNew +
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
+    )
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      dataPersonMain.value = res.data.result.data;
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 500);
     });
 }
 
 function onClickShowFilter() {
   isShowFilter.value = !isShowFilter.value;
+  isShowBtnFilter.value = false;
+  if (isShowFilter.value) {
+    fetchType();
+    fetchLevel();
+    fetchYearOption();
+  }
+}
+
+function onclickSearch() {
+  formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword;
+  fetchDataPerson();
 }
 
 function selectType(item: DataOption) {
@@ -241,24 +158,27 @@ function selectPosLevel(item: DataOption) {
   labelOption.posLevel = item.name;
 }
 
+function selectRetireYear(item: DataOption) {
+  labelOption.retireYear = item.name;
+}
+
 function clearSelect(t: string) {
   if (t === "type") {
-    labelOption.type = "ทั้งหมด";
+    labelOption.type = "ข้าราชการทั้งหมด";
   } else if (t === "posType") {
     labelOption.posType = "ทั้งหมด";
   } else if (t === "posLevel") {
     labelOption.posLevel = "ทั้งหมด";
   } else if (t === "retireYear") {
-    retireYear.value = null;
+    labelOption.retireYear = "";
   } else if (t === "rangeYear") {
-    rangeYear.value.min = 0;
-    rangeYear.value.max = 60;
+    formFilter.rangeYear.min = 0;
+    formFilter.rangeYear.max = 60;
   }
 }
 
 onMounted(async () => {
-  fetchType();
-  fetchLevel();
+  fetchDataPerson();
 });
 </script>
 <template>
@@ -270,34 +190,41 @@ onMounted(async () => {
     <q-card-section class="card-img">
       <div class="text-h5 text-center q-pa-md">ค้นหาข้อมูลทะเบียนประวัติ</div>
       <div class="row justify-center">
-        <div class="col-12 col-md-10">
-          <q-toolbar style="padding: 0px">
-            <q-select
-              outlined
-              bg-color="white"
-              v-model="searchType"
-              :options="searchTypeOption"
-              emit-value
-              dense
-              emit-option
-              option-label="name"
-              option-value="id"
-              map-options
-            />
-            <q-toolbar-title>
-              <q-input
+        <div class="col-12 q-pa-md">
+          <q-form @submit="onclickSearch">
+            <q-toolbar style="padding: 0px">
+              <q-select
                 outlined
-                dense
                 bg-color="white"
-                v-model="keyword"
-                clearable
-                placeholder="ค้นหา"
-              >
-              </q-input>
-            </q-toolbar-title>
-            <q-btn color="blue" label="ค้นหา" />
-          </q-toolbar>
-          <q-toolbar inset align="right" style="padding: 0px">
+                v-model="searchType"
+                :options="store.searchTypeOption"
+                emit-value
+                dense
+                emit-option
+                option-label="name"
+                option-value="id"
+                map-options
+              />
+              <q-toolbar-title>
+                <q-input
+                  outlined
+                  dense
+                  bg-color="white"
+                  v-model="formFilter.keyword"
+                  clearable
+                  placeholder="ค้นหา"
+                >
+                </q-input>
+              </q-toolbar-title>
+              <q-btn color="blue" label="ค้นหา" type="submit" />
+            </q-toolbar>
+          </q-form>
+          <q-toolbar
+            inset
+            align="right"
+            style="padding: 0px"
+            v-if="isShowBtnFilter"
+          >
             <q-toolbar-title>
               <q-btn
                 flat
@@ -307,223 +234,267 @@ onMounted(async () => {
             /></q-toolbar-title>
           </q-toolbar>
 
-          <div class="q-pa-md" v-if="isShowFilter">
-            <div class="row q-gutter-sm">
-              <q-btn-dropdown
-                rounded
-                outline
-                class="custom-btn"
-                label-color="white"
-              >
-                <template v-slot:label>
-                  {{ `ประเภทข้าราชการ ${labelOption.type}` }}
+          <div
+            class="row q-mt-md q-gutter-sm justify-center"
+            v-if="isShowFilter"
+          >
+            <q-btn-dropdown
+              rounded
+              outline
+              class="custom-btn"
+              label-color="white"
+            >
+              <template v-slot:label>
+                {{ `${labelOption.type}` }}
 
-                  <q-btn
-                    size="10px"
-                    flat
-                    round
-                    color="white"
-                    icon="close"
-                    v-if="labelOption.type !== 'ทั้งหมด'"
-                    @click.stop.prevent="clearSelect('type')"
-                  />
-                </template>
-                <q-list>
-                  <q-item
-                    v-for="(item, index) in TypeOption"
-                    :key="index"
-                    clickable
-                    v-close-popup
-                    @click="selectType(item)"
-                  >
-                    <q-item-section>
-                      <q-item-label>{{ item.name }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-btn-dropdown>
+                <q-btn
+                  size="10px"
+                  flat
+                  round
+                  color="white"
+                  icon="close"
+                  v-if="labelOption.type !== 'ข้าราชการทั้งหมด'"
+                  @click.stop.prevent="clearSelect('type')"
+                />
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.employeeClassOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
 
-              <q-btn-dropdown
-                rounded
-                outline
-                label-color="white"
-                class="custom-btn"
-              >
-                <template v-slot:label>
-                  {{ `ประเภทตำแหน่ง ${labelOption.posType}` }}
-                  <q-btn
-                    size="10px"
-                    flat
-                    round
-                    color="white"
-                    icon="close"
-                    v-if="labelOption.posType !== 'ทั้งหมด'"
-                    @click.stop.prevent="clearSelect('posType')"
-                  />
-                </template>
-                <q-list>
-                  <q-item
-                    v-for="(item, index) in posTypeOption"
-                    :key="index"
-                    clickable
-                    v-close-popup
-                    @click="selectPosType(item)"
-                  >
-                    <q-item-section>
-                      <q-item-label>{{ item.name }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-btn-dropdown>
+            <q-btn-dropdown
+              rounded
+              outline
+              label-color="white"
+              class="custom-btn"
+            >
+              <template v-slot:label>
+                {{ `ประเภทตำแหน่ง${labelOption.posType}` }}
+                <q-btn
+                  size="10px"
+                  flat
+                  round
+                  color="white"
+                  icon="close"
+                  v-if="labelOption.posType !== 'ทั้งหมด'"
+                  @click.stop.prevent="clearSelect('posType')"
+                />
+              </template>
+              <q-list>
+                <q-item
+                  v-for="(item, index) in store.posTypeOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectPosType(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
 
-              <q-btn-dropdown
-                rounded
-                outline
-                class="custom-btn"
-                label-color="white"
-              >
-                <template v-slot:label>
-                  {{ `ระดับตำแหน่ง ${labelOption.posLevel}` }}
-                  <q-btn
-                    size="10px"
-                    flat
-                    round
-                    color="white"
-                    icon="close"
-                    v-if="labelOption.posLevel !== 'ทั้งหมด'"
-                    @click.stop.prevent="clearSelect('posLevel')"
-                  />
-                </template>
-                <q-list>
-                  <q-item
-                    v-for="(item, index) in posLevelOption"
-                    :key="index"
-                    clickable
-                    v-close-popup
-                    @click="selectPosLevel(item)"
-                  >
-                    <q-item-section>
-                      <q-item-label>{{ item.name }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-btn-dropdown>
+            <q-btn-dropdown
+              rounded
+              outline
+              class="custom-btn"
+              label-color="white"
+            >
+              <template v-slot:label>
+                {{ `ระดับตำแหน่ง${labelOption.posLevel}` }}
+                <q-btn
+                  size="10px"
+                  flat
+                  round
+                  color="white"
+                  icon="close"
+                  v-if="labelOption.posLevel !== 'ทั้งหมด'"
+                  @click.stop.prevent="clearSelect('posLevel')"
+                />
+              </template>
+              <q-list style="height: 300px">
+                <q-item
+                  v-for="(item, index) in store.posLevelOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectPosLevel(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
 
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="retireYear"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                clearable
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    class="cursor-pointer custom-select"
-                    rounded
-                    label-color="white"
-                    outlined
-                    dense
-                    input-style="color:white;"
-                    borderless
-                    :model-value="retireYear === null ? null : retireYear + 543"
-                    :label="`${'ปีเกษียณ'}`"
-                  >
-                    <template v-slot:append>
-                      <q-btn
-                        size="10px"
-                        flat
-                        round
-                        color="white"
-                        icon="close"
-                        v-if="retireYear !== null"
-                        @click.stop.prevent="clearSelect('retireYear')"
-                      />
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+            <q-btn-dropdown
+              rounded
+              outline
+              class="custom-btn"
+              label-color="white"
+            >
+              <template v-slot:label>
+                {{ `ปีเกษียณ${labelOption.retireYear}` }}
+                <q-btn
+                  size="10px"
+                  flat
+                  round
+                  color="white"
+                  icon="close"
+                  v-if="labelOption.retireYear !== ''"
+                  @click.stop.prevent="clearSelect('retireYear')"
+                />
+              </template>
+              <q-list style="height: 300px">
+                <q-item
+                  v-for="(item, index) in store.yearOps"
+                  :key="index"
+                  clickable
+                  v-close-popup
+                  @click="selectRetireYear(item)"
+                >
+                  <q-item-section>
+                    <q-item-label>{{ item.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
 
-              <q-btn-dropdown
-                rounded
-                outline
-                class="custom-btn"
-                label-color="white"
-              >
-                <template v-slot:label>
-                  {{ `อายุราชการ (${rangeYear.min} - ${rangeYear.max} ปี)` }}
-                  <q-btn
-                    size="10px"
-                    flat
-                    round
-                    color="white"
-                    icon="close"
-                    v-if="rangeYear.min !== 0 || rangeYear.max !== 60"
-                    @click.stop.prevent="clearSelect('rangeYear')"
-                  />
-                </template>
-                <div class="row justify-center">
-                  <div class="col-12 q-pa-md text-center">
-                    <div>
-                      <span>จำนวนปี</span>
-                      <q-badge
-                        color="grey-4"
-                        text-color="black"
-                        class="q-ml-sm"
-                        :label="`${rangeYear.min}-${rangeYear.max}`"
-                      />
-                    </div>
-                    <div class="q-ma-md">
-                      <q-range
-                        v-model="rangeYear"
-                        :min="0"
-                        :max="60"
-                        :step="1"
-                        label-always
-                        color="primary"
-                        selection-color="blue"
-                        label-color="primary"
-                        thumb-color="blue"
-                      />
-                    </div>
+            <!-- <datepicker
+              menu-class-name="modalfix"
+              v-model="formFilter.retireYear"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              clearable
+              style="width: 120px"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  class="cursor-pointer custom-select"
+                  rounded
+                  label-color="white"
+                  outlined
+                  dense
+                  input-style="color:white;"
+                  borderless
+                  :model-value="
+                    formFilter.retireYear === null
+                      ? null
+                      : formFilter.retireYear + 543
+                  "
+                  :label="`${'ปีเกษียณ'}`"
+                >
+                  <template v-slot:append>
+                    <q-btn
+                      size="10px"
+                      flat
+                      round
+                      color="white"
+                      icon="close"
+                      v-if="formFilter.retireYear !== null"
+                      @click.stop.prevent="clearSelect('retireYear')"
+                    />
+                  </template>
+                </q-input>
+              </template>
+            </datepicker> -->
+
+            <q-btn-dropdown
+              rounded
+              outline
+              class="custom-btn"
+              label-color="white"
+            >
+              <template v-slot:label>
+                {{
+                  `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
+                }}
+                <q-btn
+                  size="10px"
+                  flat
+                  round
+                  color="white"
+                  icon="close"
+                  v-if="
+                    formFilter.rangeYear.min !== 0 ||
+                    formFilter.rangeYear.max !== 60
+                  "
+                  @click.stop.prevent="clearSelect('rangeYear')"
+                />
+              </template>
+              <div class="row justify-center">
+                <div class="col-12 q-pa-md text-center">
+                  <div>
+                    <span>จำนวนปี</span>
+                    <q-badge
+                      color="grey-4"
+                      text-color="black"
+                      class="q-ml-sm"
+                      :label="`${formFilter.rangeYear.min}-${formFilter.rangeYear.max}`"
+                    />
+                  </div>
+                  <div class="q-mt-lg">
+                    <q-range
+                      v-model="formFilter.rangeYear"
+                      :min="0"
+                      :max="60"
+                      :step="1"
+                      label
+                      color="primary"
+                      selection-color="blue"
+                      label-color="primary"
+                      thumb-color="blue"
+                    />
                   </div>
                 </div>
-              </q-btn-dropdown>
+              </div>
+            </q-btn-dropdown>
 
-              <q-btn-dropdown
-                rounded
-                outline
-                class="custom-btn"
-                color="white"
-                :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
-              >
-                <q-list>
-                  <q-item clickable v-close-popup>
-                    <q-item-section>
-                      <q-toggle
-                        v-model="isProbation"
-                        color="primary"
-                        label="ทดลองปฏิบัติหน้าที่ราชการ"
-                      />
-                    </q-item-section>
-                  </q-item>
-                  <q-item clickable v-close-popup>
-                    <q-item-section>
-                      <q-toggle
-                        v-model="isShowRetire"
-                        color="primary"
-                        label="แสดงข้อมูลผู้พ้นจากราชการ"
-                      />
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-btn-dropdown>
-            </div>
+            <q-btn-dropdown
+              rounded
+              outline
+              class="custom-btn"
+              color="white"
+              :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
+            >
+              <q-list>
+                <q-item clickable v-close-popup>
+                  <q-item-section>
+                    <q-toggle
+                      v-model="formFilter.isProbation"
+                      color="primary"
+                      label="ทดลองปฏิบัติหน้าที่ราชการ"
+                    />
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section>
+                    <q-toggle
+                      v-model="formFilter.isShowRetire"
+                      color="primary"
+                      label="แสดงข้อมูลผู้พ้นจากราชการ"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
           </div>
         </div>
       </div>
@@ -532,105 +503,18 @@ onMounted(async () => {
     <q-separator />
 
     <q-card-section>
-      <div
-        style="
-          height: 50vh;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        "
-        class="text-grey-5"
-        v-if="isSearchData"
-      >
-        <q-icon name="search" size="4rem" />
-
-        <span>ไม่พบข้อมูล</span>
-      </div>
-      <div v-else class="col-12 q-pa-md">
-        <!-- <TableView
-            :columns="columns"
-            v-model:visibleColumns="visibleColumns"
-            v-model:mode="mode"
-          /> -->
+      <div class="col-12">
+        <TableView
+          v-model:mode="mode"
+          :rows="dataPersonMain"
+          v-model:formFilter="formFilter"
+          v-model:maxPage="maxPage"
+          :fetchData="fetchDataPerson"
+          :fetchType="fetchType"
+        />
       </div>
     </q-card-section>
   </q-card>
-
-  <!-- <Search /> -->
-  <!-- <div
-    flat
-    class="q-py-lg bg-white"
-    style="width: 100%"
-  > -->
-  <!-- <div class="flex justify-between q-mb-md q-pr-lg q-pl-sm">
-      <div>
-        <q-btn round flat color="primary" icon="add" size="16px">
-          <q-tooltip>เพิ่ม</q-tooltip></q-btn
-        >
-        <q-btn round flat color="blue" icon="mdi-history" size="16px">
-          <q-tooltip>ประวัติ</q-tooltip></q-btn
-        >
-      </div>
-      <div class="flex items-center">
-        <q-select
-          v-if="mode === 'table'"
-          class="q-mr-md"
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-        <div style="border: 1px solid #c8c4c4; border-radius: 5px">
-          <q-btn-toggle
-            v-model="mode"
-            dense
-            class="no-shadow"
-            toggle-color="grey-4"
-            :options="[
-              { value: 'table', slot: 'table' },
-              { value: 'card', slot: 'card' },
-            ]"
-          >
-            <template v-slot:table>
-              <q-icon
-                name="format_list_bulleted"
-                size="24px"
-                :style="{
-                  color: mode === 'table' ? '#787B7C' : '#C9D3DB',
-                }"
-              />
-            </template>
-
-            <template v-slot:card>
-              <q-icon
-                name="mdi-view-grid-outline"
-                size="24px"
-                :style="{
-                  color: mode === 'card' ? '#787B7C' : '#C9D3DB',
-                }"
-              />
-            </template>
-          </q-btn-toggle>
-        </div>
-      </div>
-    </div> -->
-
-  <!-- <TableView
-      :columns="columns"
-      v-model:visibleColumns="visibleColumns"
-      v-model:mode="mode"
-    /> -->
-  <!-- <CardView v-if="mode === 'card'" /> -->
-  <!-- </div> -->
 </template>
 
 <style scoped>