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

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>