From b7a71dbb45ae534ef1beb7367223b8ace546ea46 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 8 Mar 2024 13:11:20 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{registry => }/DialogAddData.vue          |   0
 .../{registry => }/DialogHistory.vue          |   0
 .../components/{registry => }/TableView.vue   |  90 ++-
 .../components/detail/TabMain.vue             |   0
 .../components/registry/Search.vue            | 556 --------------
 .../components/registry/registry.vue          | 692 ------------------
 src/modules/04_registryNew/router.ts          |  20 +-
 .../04_registryNew/views/detailView.vue       |   6 +
 src/modules/04_registryNew/views/list.vue     |  21 +-
 .../SalaryLists/DialogAddPerson.vue           |   8 +-
 10 files changed, 111 insertions(+), 1282 deletions(-)
 rename src/modules/04_registryNew/components/{registry => }/DialogAddData.vue (100%)
 rename src/modules/04_registryNew/components/{registry => }/DialogHistory.vue (100%)
 rename src/modules/04_registryNew/components/{registry => }/TableView.vue (80%)
 create mode 100644 src/modules/04_registryNew/components/detail/TabMain.vue
 delete mode 100644 src/modules/04_registryNew/components/registry/Search.vue
 delete mode 100644 src/modules/04_registryNew/components/registry/registry.vue
 create mode 100644 src/modules/04_registryNew/views/detailView.vue

diff --git a/src/modules/04_registryNew/components/registry/DialogAddData.vue b/src/modules/04_registryNew/components/DialogAddData.vue
similarity index 100%
rename from src/modules/04_registryNew/components/registry/DialogAddData.vue
rename to src/modules/04_registryNew/components/DialogAddData.vue
diff --git a/src/modules/04_registryNew/components/registry/DialogHistory.vue b/src/modules/04_registryNew/components/DialogHistory.vue
similarity index 100%
rename from src/modules/04_registryNew/components/registry/DialogHistory.vue
rename to src/modules/04_registryNew/components/DialogHistory.vue
diff --git a/src/modules/04_registryNew/components/registry/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
similarity index 80%
rename from src/modules/04_registryNew/components/registry/TableView.vue
rename to src/modules/04_registryNew/components/TableView.vue
index 8e2e57af5..f5552c3f4 100644
--- a/src/modules/04_registryNew/components/registry/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -6,8 +6,8 @@ import type { QTableProps } from "quasar";
 import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
 
 /** importComponent*/
-import DialogAddData from "@/modules/04_registryNew/components/registry/DialogAddData.vue";
-import DialogHistory from "@/modules/04_registryNew/components/registry/DialogHistory.vue";
+import DialogAddData from "@/modules/04_registryNew/components/DialogAddData.vue";
+import DialogHistory from "@/modules/04_registryNew/components/DialogHistory.vue";
 
 /** importStore*/
 import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
@@ -319,8 +319,81 @@ watch(
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-6 col-md-3">
-        <q-card style="border: 0.5px solid #e4e4e4">
+      <div class="col-xs-12 col-sm-4 col-md-3 q-pa-lg">
+        <q-card flat bordered>
+          <q-card-section class="text-center">
+            <q-avatar size="82px">
+              <img src="@/assets/avatar_user.jpg" />
+            </q-avatar>
+
+            <div class="text-weight-medium q-mt-md">
+              {{
+                `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
+              }}
+            </div>
+            <div class="text-weight-light full-width text-center">
+              {{ props.row.citizenId }}
+            </div>
+          </q-card-section>
+
+          <q-card-section class="q-pa-lg">
+            <q-card bordered class="bg-grey-12">
+              <q-list>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label caption>ตำแหน่งเลขที่</q-item-label>
+                    <q-item-label>{{
+                      props.row.posNo ? props.row.posNo : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section>
+                    <q-item-label caption>ตำแหน่ง</q-item-label>
+                    <q-item-label>
+                      {{
+                        props.row.position ? props.row.position : "-"
+                      }}</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+
+                <q-item>
+                  <q-item-section>
+                    <q-item-label caption>ประเภท</q-item-label>
+                    <q-item-label>
+                      {{
+                        props.row.posType ? props.row.posType : "-"
+                      }}</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label caption>ระดับชั้นงาน</q-item-label>
+                    <q-item-label>
+                      {{
+                        props.row.posLevel ? props.row.posLevel : "-"
+                      }}</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </q-card-section>
+          <q-separator inset />
+          <q-btn
+            flat
+            color="black"
+            label="ดูเพิ่มเติม"
+            class="hover-button full-width q-pa-md"
+          />
+        </q-card>
+      </div>
+
+      <!-- <div class="col-xs-12 col-sm-6 col-md-3"> -->
+      <!-- <q-card style="border: 0.5px solid #e4e4e4">
           <div class="flex justify-center q-pt-md q-px-md">
             <q-item-section avatar class="q-pa-none">
               <img
@@ -374,8 +447,8 @@ watch(
           <div class="see-more text-center q-py-md" style="width: 100%">
             <span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
           </div>
-        </q-card>
-      </div>
+        </q-card> -->
+      <!-- </div> -->
     </template>
     <template v-slot:pagination="scope">
       <q-pagination
@@ -422,10 +495,11 @@ watch(
 </template>
 
 <style scoped>
-.see-more:hover {
+.hover-button:hover {
   background-color: #089cfc;
-  color: white;
+  color: white !important;
 }
+
 .my-card {
   width: 100%;
   height: 100%;
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/04_registryNew/components/registry/Search.vue b/src/modules/04_registryNew/components/registry/Search.vue
deleted file mode 100644
index 6e099e1ec..000000000
--- a/src/modules/04_registryNew/components/registry/Search.vue
+++ /dev/null
@@ -1,556 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive } from "vue";
-import SearchBanner from "@/assets/registry-banner.png";
-import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
-import type {
-  FormData,
-  YearRange,
-} from "@/modules/04_registryNew/interface/index/form";
-
-const search = ref<string>("");
-const dropdownInput = ref<boolean>(false);
-const retireYear = ref<number | null>(null);
-const year = ref<number>();
-const searchType = ref<string>("fullName");
-const posLevel = ref<string>("");
-const posExecutive = ref<string>("");
-const posType = ref<string>("");
-const type = ref<string>("");
-const posNo = ref<string>("");
-const posOc = ref<string>("");
-
-const rangeYear = ref<YearRange>({
-  min: 0,
-  max: 60,
-});
-const formData = reactive<FormData>({
-  citizenId: "",
-  fullName: "",
-  posLevel: "",
-  posOc: "",
-  posPath: "",
-  retireYear: null,
-  type: "",
-  year: null,
-  isShowRetire: false,
-  isProbation: false,
-});
-
-const employeeClassOps = ref<DataOption[]>([
-  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
-  { id: "perm", name: "ลูกจ้างประจำ" },
-  { id: "temp", name: "ลูกจ้างชั่วคราว" },
-]);
-
-const posLevelMock = ref<DataOption[]>([
-  { id: "officer", name: "1" },
-  { id: "perm", name: "2" },
-  { id: "temp", name: "3" },
-]);
-
-const searchTypeOption = ref<DataOption[]>([
-  { id: "fullName", name: "ชื่อ-นามสกุล" },
-  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "posNo", name: "ตำแหน่งเลขที่" },
-  { id: "position", name: "ตำแหน่งสายงาน" },
-]);
-
-const TypeOption = ref<DataOption[]>([
-  { id: "1", name: "ข้าราชการ กทม.สามัญ" },
-  { id: "2", name: "ลูกจ้างประจำ" },
-  { id: "3", name: "ลููกจ้างชั่วคราว" },
-]);
-
-const posTypeOption = ref<DataOption[]>([
-  { id: "1", name: "ทั่วไป" },
-  { id: "2", name: "วิชาการ" },
-  { id: "3", name: "อำนวยการ" },
-  { id: "4", name: "บริหาร" },
-]);
-
-const posLevelOption = ref<DataOption[]>([
-  { id: "1", name: "ชำนาญงาน" },
-  { id: "2", name: "ปฏิบัติงาน" },
-  { id: "3", name: "อาวุโส" },
-  { id: "4", name: "ทักษะพิเศษ" },
-]);
-
-const posExecutiveOption = ref<DataOption[]>([
-  { id: "1", name: "นักบริหาร" },
-  { id: "2", name: "ผู้ช่วยหัวหน้าสำนักงาน" },
-  { id: "3", name: "ผู้ช่วยหัวหน้าสำนักงานก.ก." },
-  { id: "4", name: "นักการช่าง" },
-]);
-
-const isActive1 = ref<boolean>(false);
-const isActive2 = ref<boolean>(false);
-
-function onSubmit() {
-  dropdownInput.value = false;
-}
-</script>
-<template>
-  <div
-    class="column full-width justify-center items-center inline-block q-py-xl q-px-xl banner"
-    style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
-    :style="{
-      background: `url('${SearchBanner}') center center no-repeat`,
-    }"
-  >
-    <span
-      style="
-        display: block;
-        text-align: center;
-        color: white;
-        font-size: 20px;
-        font-weight: bold;
-      "
-    >
-      ค้นหาข้อมูลทะเบียนประวัติ
-    </span>
-
-    <div class="row q-col-gutter-x-md q-col-gutter-y-lg">
-      <div class="col-2">
-        <q-select
-          outlined
-          bg-color="white"
-          v-model="searchType"
-          :options="searchTypeOption"
-          emit-value
-          dense
-          emit-option
-          option-label="name"
-          option-value="id"
-          map-options
-          style="border-radius: 0.4rem; background-color: whitesmoke"
-        />
-      </div>
-      <div class="col-9">
-        <q-input
-          outlined
-          dense
-          bg-color="white"
-          v-model="search"
-          clearable
-          placeholder="ค้นหา"
-        >
-          <!-- <template v-slot:append>
-            <q-btn
-              outlined
-              color="blue"
-              icon="filter_list"
-              dense
-              size="12px"
-              @click="() => (dropdownInput = !dropdownInput)"
-            />
-          </template> -->
-        </q-input>
-      </div>
-      <div class="col-1">
-        <q-btn color="blue" label="ค้นหา" @click="onSubmit" />
-      </div>
-      <div class="col">
-        <q-select
-          rounded
-          dense
-          outlined
-          emit-value
-          clearable
-          emit-option
-          class="custom-select custom-arrow"
-          label-color="white"
-          option-label="name"
-          option-value="id"
-          map-options
-          v-model="type"
-          :options="TypeOption"
-          label="ประเภท"
-        >
-        </q-select>
-      </div>
-      <div class="col">
-        <q-select
-          rounded
-          dense
-          outlined
-          emit-value
-          clearable
-          emit-option
-          class="custom-select"
-          label-color="white"
-          option-label="name"
-          option-value="id"
-          map-options
-          v-model="posType"
-          :options="posTypeOption"
-          label="ประเภทตำแหน่ง"
-        />
-      </div>
-      <div class="col">
-        <q-select
-          rounded
-          dense
-          emit-value
-          emit-option
-          label-color="white"
-          option-label="name"
-          option-value="id"
-          map-options
-          outlined
-          class="custom-select"
-          clearable
-          v-model="posLevel"
-          :options="posLevelOption"
-          label="ระดับตำแหน่ง"
-        />
-      </div>
-      <div class="col-2">
-        <q-select
-          rounded
-          outlined
-          label-color="white"
-          emit-value
-          dense
-          emit-option
-          class="custom-select"
-          clearable
-          input-class="text-white"
-          option-label="name"
-          option-value="id"
-          map-options
-          v-model="posExecutive"
-          :options="posExecutiveOption"
-          label="ตำแหน่งทางการบริหาร"
-        />
-      </div>
-      <div class="col">
-        <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="inputgreen cursor-pointer custom-select"
-              hide-bottom-space
-              rounded
-              label-color="white"
-              outlined
-              dense
-              input-style="color:white;"
-              lazy-rules
-              borderless
-              :model-value="retireYear === null ? null : retireYear + 543"
-              :label="`${'ปีเกษียณ'}`"
-            >
-              <template v-slot:append>
-                <q-icon
-                  v-if="retireYear !== null"
-                  name="close"
-                  @click="retireYear = null"
-                  class="cursor-pointer"
-                />
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-      </div>
-      <div>
-        <q-btn-dropdown
-          rounded
-          outline
-          class="custom-btn"
-          clearable
-          :label="`อายุราชการ (${rangeYear.min} - ${rangeYear.max} ปี)`"
-          label-color="white"
-          style="height: 40px"
-        >
-          <div
-            class="row no-wrap q-px-md q-pt-xs"
-            style="border: 1px #ededed solid"
-          >
-            <div
-              class="column q-py-sm q-px-md text-center"
-              style="width: 250px"
-            >
-              <div class="q-mb-sm">
-                <span>จำนวนปี</span>
-                <span
-                  class="q-px-sm q-ml-sm"
-                  style="
-                    background-color: #f2f2f2;
-                    border-radius: 5px;
-                    border: 1px #ededed solid;
-                    letter-spacing: 1px;
-                  "
-                >
-                  {{ `${rangeYear.min}-${rangeYear.max}` }}
-                </span>
-              </div>
-              <q-range
-                class="q-mt-lg"
-                v-model="rangeYear"
-                :min="0"
-                :max="60"
-                :step="1"
-                label-always
-                color="primary"
-                selection-color="blue"
-                label-color="primary"
-                thumb-color="blue"
-              />
-            </div>
-          </div>
-        </q-btn-dropdown>
-      </div>
-      <div class="col">
-        <q-btn-dropdown
-          rounded
-          outline
-          class="custom-btn"
-          clearable
-          label="เงื่อนไขอื่นๆ"
-          label-color="white"
-          style="height: 40px"
-        >
-          <div class="row no-wrap q-px-md">
-            <div class="column text-center">
-              <div
-                class="flex"
-                style="
-                  align-content: flex-end;
-                  flex-direction: row-reverse;
-                  gap: 0.5rem;
-                "
-              >
-                <q-toggle
-                  v-model="formData.isShowRetire"
-                  color="primary"
-                  label="แสดงข้อมูลผู้พ้นจากราชการ"
-                />
-                <q-toggle
-                  v-model="formData.isProbation"
-                  color="primary"
-                  label="ทดลองปฏิบัติหน้าที่ราชการ"
-                />
-              </div>
-            </div>
-          </div>
-        </q-btn-dropdown>
-      </div>
-    </div>
-
-    <div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
-      <div
-        class="flex full-width items-center bg-white"
-        style="flex-grow: 1; border-radius: 0.5rem; position: relative"
-      >
-        <div
-          v-if="dropdownInput"
-          class="full-width bg-white q-px-md q-pt-sm q-pb-md"
-          style="
-            top: 85%;
-            position: absolute;
-            border-bottom-left-radius: 0.5rem;
-            border-bottom-right-radius: 0.5rem;
-            z-index: 10;
-          "
-        >
-          <div
-            class="q-pa-md"
-            style="
-              border-radius: 0.5rem;
-              background-color: whitesmoke;
-              border: 1px solid gainsboro;
-            "
-          >
-            <div class="row q-gutter--md q-mb-md">
-              <div class="col">
-                <q-select
-                  outlined
-                  dense
-                  v-model="formData.type"
-                  label="ประเภท"
-                  class="bg-white"
-                  clearable
-                  :options="employeeClassOps"
-                  emit-value
-                  emit-option
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  outlined
-                  dense
-                  v-model="formData.citizenId"
-                  label="เลขประจำตัวประชาชน"
-                  class="bg-white"
-                  clearable
-                  lazy-rules
-                  hide-bottom-space
-                  maxlength="13"
-                  mask="#############"
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  outlined
-                  dense
-                  clearable
-                  v-model="formData.fullName"
-                  label="ชื่อ - นามสกุล"
-                  class="bg-white"
-                />
-              </div>
-            </div>
-            <div class="row q-gutter-md">
-              <div class="col-2">
-                <datepicker
-                  class="col-2 bg-white"
-                  menu-class-name="modalfix"
-                  v-model="formData.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="inputgreen cursor-pointer"
-                      hide-bottom-space
-                      outlined
-                      dense
-                      lazy-rules
-                      borderless
-                      :model-value="
-                        formData.retireYear === null
-                          ? null
-                          : formData.retireYear + 543
-                      "
-                      :label="`${'ปีเกษียณ'}`"
-                    >
-                      <template v-slot:append>
-                        <q-icon
-                          v-if="formData.retireYear !== null"
-                          name="close"
-                          @click="formData.retireYear = null"
-                          class="cursor-pointer"
-                        />
-                      </template>
-                    </q-input>
-                  </template>
-                </datepicker>
-              </div>
-              <div class="col-2">
-                <q-input
-                  outlined
-                  dense
-                  v-model="year"
-                  label="อายุราชการ (ปี)"
-                  class="bg-white"
-                  clearable
-                  mask="###"
-                />
-              </div>
-              <div class="col-2">
-                <q-select
-                  outlined
-                  dense
-                  v-model="formData.posLevel"
-                  label="ประเภท"
-                  class="bg-white"
-                  :options="posLevelMock"
-                  emit-value
-                  emit-option
-                  clearable
-                  option-label="name"
-                  option-value="id"
-                  map-options
-                />
-              </div>
-              <div class="col-2">
-                <q-input
-                  outlined
-                  dense
-                  v-model="posNo"
-                  label="ตำแหน่งเลขที่"
-                  class="bg-white"
-                  clearable
-                />
-              </div>
-              <div class="col">
-                <q-input
-                  outlined
-                  clearable
-                  dense
-                  v-model="posOc"
-                  label="ตำแหน่งทางการบริหาร"
-                  class="bg-white"
-                />
-              </div>
-            </div>
-          </div>
-          <div
-            class="flex q-mt-xs"
-            style="
-              align-content: flex-end;
-              flex-direction: row-reverse;
-              gap: 0.5rem;
-            "
-          >
-            <q-toggle
-              v-model="formData.isShowRetire"
-              color="primary"
-              label="แสดงข้อมูลผู้พ้นจากราชการ"
-            />
-            <q-toggle
-              v-model="formData.isProbation"
-              color="primary"
-              label="ทดลองปฏิบัติหน้าที่ราชการ"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.custom-select.q-field--outlined .q-field__control::before) {
-  border: 2px solid #fff;
-}
-
-:deep(.custom-select.q-field--outlined .q-field__control) {
-  color: white;
-  background-color: #36969f;
-
-  .q-select__dropdown-icon {
-    color: white;
-  }
-}
-
-:deep(.custom-btn.q-btn--outline) {
-  color: white;
-}
-
-:deep(.custom-btn.q-btn--outline::before) {
-  border: 2px solid #ffffff;
-  background-color: #36969f;
-}
-</style>
diff --git a/src/modules/04_registryNew/components/registry/registry.vue b/src/modules/04_registryNew/components/registry/registry.vue
deleted file mode 100644
index 0527e9303..000000000
--- a/src/modules/04_registryNew/components/registry/registry.vue
+++ /dev/null
@@ -1,692 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, reactive } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter } from "vue-router";
-import { useRegistryDataStore } from "@/modules/04_registryNew/stores/registry";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = useRegistryDataStore();
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogMessageNotify,
-} = mixin;
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "citizenId",
-    align: "left",
-    label: "เลขประจำตัวประชาชน",
-    sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fullName",
-    align: "left",
-    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: "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" }),
-  },
-]);
-
-const $q = useQuasar();
-
-const editId = ref<string>("");
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<"create" | "edit">("create");
-
-const prefix = ref<string>("");
-const firstName = ref<string>("");
-const lastName = ref<string>("");
-const citizenId = ref<string>("");
-const position = ref<string>("");
-const posTypeId = ref<string>("");
-const posLevelId = ref<string>("");
-const dataLevel = ref<any>();
-
-const prefixRef = ref<QInput | null>(null);
-const firstNameRef = ref<QInput | null>(null);
-const lastNameRef = ref<QInput | null>(null);
-const citizenIdRef = ref<QInput | null>(null);
-const positionRef = ref<QInput | null>(null);
-const posTypeIdRef = ref<QInput | null>(null);
-const posLevelIdRef = ref<QInput | null>(null);
-
-type SelectOptions = {
-  label: string;
-  value: string;
-}[];
-
-const prefixDropdown = ref<SelectOptions>([]);
-const posTypeIdDropdown = ref<SelectOptions>([]);
-const posLevelIdDropdown = ref<SelectOptions>([]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "citizenId",
-  "fullName",
-  "position",
-]);
-
-onMounted(async () => {
-  fetchData();
-  fetchPrefix();
-  fetchType();
-});
-
-/** queryString*/
-const formQuery = reactive({
-  page: 1, //*หน้า
-  pageSize: 10, //*จำนวนแถวต่อหน้า
-  keyword: "", //keyword ค้นหา
-});
-const maxPage = ref<number>(1);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(
-      config.API.registryNew +
-        `?page=${formQuery.page}&pageSise=${formQuery.pageSize}&keyword=${formQuery.keyword}`
-    )
-    .then(async (res) => {
-      maxPage.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      store.save(res.data.result.data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function fetchType() {
-  showLoader();
-  await http
-    .get<{
-      result: {
-        posTypeName: string;
-        id: string;
-      }[];
-    }>(config.API.orgPosType)
-    .then(async (res) => {
-      const data = res.data.result;
-      dataLevel.value = data;
-      posTypeIdDropdown.value = data.map((v) => ({
-        label: v.posTypeName,
-        value: v.id,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function fetchPrefix() {
-  showLoader();
-  await http
-    .get(config.API.orgPrefix)
-    .then(async (res) => {
-      prefixDropdown.value = res.data.result.map((v: any) => ({
-        label: v.name,
-        value: v.name,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function addData() {
-  showLoader();
-  await http
-    .post(config.API.registryNew, {
-      prefix: prefix.value,
-      firstName: firstName.value,
-      lastName: lastName.value,
-      citizenId: citizenId.value,
-      position: position.value,
-      posTypeId: posTypeId.value,
-      posLevelId: posLevelId.value,
-    })
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      fetchData();
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  showLoader();
-  await http
-    .put(config.API.registryNewId(id), {
-      prefix: prefix.value,
-      firstName: firstName.value,
-      lastName: lastName.value,
-      citizenId: citizenId.value,
-      position: position.value,
-      posTypeId: posTypeId.value,
-      posLevelId: posLevelId.value,
-    })
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      fetchData();
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.registryNewId(id))
-    .then(() => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      fetchData();
-      hideLoader();
-    });
-}
-
-function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  posLevelIdDropdown.value = listLevel.posLevels.map((e: any) => ({
-    value: e.id,
-    label: e.posLevelName,
-  }));
-}
-
-function validateForm() {
-  if (
-    [
-      prefixRef.value,
-      firstNameRef.value,
-      lastNameRef.value,
-      citizenIdRef.value,
-      positionRef.value,
-      posTypeIdRef.value,
-      posLevelIdRef.value,
-    ].every((v) => v?.validate())
-  ) {
-    onSubmit();
-  }
-}
-
-async function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      dialogStatus.value === "create" ? addData() : editData(editId.value);
-      closeDialog();
-      prefix.value = "";
-      firstName.value = "";
-      lastName.value = "";
-      citizenId.value = "";
-      position.value = "";
-      posTypeId.value = "";
-      posLevelId.value = "";
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-function closeDialog() {
-  dialog.value = false;
-}
-watch(posTypeId, () => {
-  setTimeout(() => {
-    updateSelectType(posTypeId.value);
-  }, 200);
-});
-
-watch([() => formQuery.page, () => formQuery.pageSize], async () => {
-  await fetchData();
-});
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: any) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
-async function filterFn(page: number) {
-  page !== 1 ? (formQuery.page = 1) : await fetchData();
-}
-
-/**
- * function ตรวจสอบเลขประจำตัวประชาชน
- * @param citizenId เลขประจำตัวประชาชน
- */
-async function changeCardID(citizenId: string | number | null) {
-  if (citizenId != null && typeof citizenId == "string") {
-    if (citizenId.length == 13 && citizenId) {
-      await 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);
-          }
-        });
-    }
-  }
-}
-</script>
-
-<template>
-  <q-toolbar style="padding: 0">
-    <q-btn
-      flat
-      round
-      color="primary"
-      icon="add"
-      @click.stop="
-        () => {
-          dialogStatus = 'create';
-          dialog = true;
-          prefix = '';
-          firstName = '';
-          lastName = '';
-          citizenId = '';
-          position = '';
-          posTypeId = '';
-          posLevelId = '';
-        }
-      "
-    >
-      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-    </q-btn>
-    <q-space />
-    <div class="row q-gutter-sm">
-      <q-input
-        outlined
-        dense
-        v-model="formQuery.keyword"
-        label="ค้นหา"
-        @keydown.enter.prevent="filterFn(formQuery.page)"
-      ></q-input>
-      <q-select
-        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>
-  </q-toolbar>
-  <div class="col-12">
-    <d-table
-      ref="table"
-      :columns="columns"
-      :rows="store.row"
-      row-key="name"
-      flat
-      bordered
-      :paging="true"
-      dense
-      class="custom-header-table"
-      :visible-columns="visibleColumns"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      @update:pagination="updatePagination"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width />
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
-          <q-td v-for="col in props.cols" :key="col.id">
-            <div v-if="col.name == 'no'">
-              {{
-                (formQuery.page - 1) * formQuery.pageSize + props.rowIndex + 1
-              }}
-            </div>
-            <div v-else-if="col.name == 'fullName'">
-              {{ props.row.prefix }}{{ props.row.firstName }}
-              {{ props.row.lastName }}
-            </div>
-
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              color="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              size="12px"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  dialog = true;
-                  editId = props.row.id;
-                  prefix = props.row.prefix;
-                  firstName = props.row.firstName;
-                  lastName = props.row.lastName;
-                  citizenId = props.row.citizenId;
-                  position = props.row.position;
-                  posTypeId = props.row.posTypeId;
-                  posLevelId = props.row.posLevelId;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="12px"
-              icon="mdi-delete"
-              clickable
-              @click.stop="
-                dialogRemove($q, async () => await deleteData(props.row.id))
-              "
-              v-close-popup
-            >
-              <q-tooltip>ลบข้อมูล</q-tooltip>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-      <template v-slot:pagination="scope">
-        <q-pagination
-          v-model="formQuery.page"
-          active-color="primary"
-          color="dark"
-          :max="maxPage"
-          :max-pages="5"
-          size="sm"
-          boundary-links
-          direction-links
-        ></q-pagination>
-      </template>
-    </d-table>
-  </div>
-
-  <q-dialog v-model="dialog" class="dialog" 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">
-          <dialog-header
-            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <q-select
-            ref="prefixRef"
-            v-model="prefix"
-            label="คำนำหน้าชื่อ"
-            outlined
-            dense
-            :options="prefixDropdown"
-            option-label="label"
-            option-value="value"
-            map-options
-            class="col-12 bg-white q-ma-md"
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-            emit-value
-          />
-          <q-input
-            ref="firstNameRef"
-            outlined
-            v-model="firstName"
-            label="ชื่อ"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
-            hide-bottom-space
-          />
-          <q-input
-            ref="lastNameRef"
-            outlined
-            v-model="lastName"
-            label="นามสกุล"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
-            hide-bottom-space
-          />
-          <q-input
-            ref="citizenIdRef"
-            outlined
-            v-model="citizenId"
-            label="เลขประจำตัวประชาชน"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[
-                        (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
-                        (val: string) =>
-                          val.length >= 13 ||
-                          `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-                      ]"
-            maxlength="13"
-            hide-bottom-space
-            mask="#############"
-            @update:model-value="changeCardID"
-          />
-          <q-input
-            ref="positionRef"
-            outlined
-            v-model="position"
-            label="ตำแหน่ง"
-            dense
-            lazy-rules
-            borderless
-            class="col-12 bg-white q-ma-md"
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
-            hide-bottom-space
-          />
-          <q-select
-            ref="posTypeIdRef"
-            v-model="posTypeId"
-            label="ประเภทตำแหน่ง"
-            outlined
-            :options="posTypeIdDropdown"
-            dense
-            class="col-12 bg-white q-ma-md"
-            options-cover
-            map-options
-            emit-value
-            option-label="label"
-            option-value="value"
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง']"
-          />
-          <q-select
-            ref="posLevelIdRef"
-            v-model="posLevelId"
-            label="ระดับตำแหน่ง"
-            :options="posLevelIdDropdown"
-            outlined
-            dense
-            @update:model-value="updateSelectType"
-            class="col-12 bg-white q-ma-md"
-            map-options
-            emit-value
-            option-label="label"
-            option-value="value"
-            options-cover
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกระดับตำแหน่ง']"
-          />
-        </q-card-section>
-
-        <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 lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>
diff --git a/src/modules/04_registryNew/router.ts b/src/modules/04_registryNew/router.ts
index 181e50e8b..463704fc6 100644
--- a/src/modules/04_registryNew/router.ts
+++ b/src/modules/04_registryNew/router.ts
@@ -5,16 +5,6 @@ export default [
   {
     path: "/registry-new",
     name: "registryNew",
-    component: mainPage,
-    meta: {
-      Auth: true,
-      Key: [7],
-      Role: "organization",
-    },
-  },
-  {
-    path: "/registry-new/list",
-    name: "registryNewList",
     component: listPage,
     meta: {
       Auth: true,
@@ -22,4 +12,14 @@ export default [
       Role: "organization",
     },
   },
+  // {
+  //   path: "/registry-new/list",
+  //   name: "registryNewList",
+  //   component: listPage,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [7],
+  //     Role: "organization",
+  //   },
+  // },
 ];
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
new file mode 100644
index 000000000..371c2a2f5
--- /dev/null
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index 166c61b30..bbcd28ff0 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -11,8 +11,7 @@ import type { DataPerson } from "@/modules/04_registryNew/interface/response/Mai
 import type { FormFilter } from "@/modules/04_registryNew/interface/request/Main";
 
 /** importComponents*/
-import Search from "@/modules/04_registryNew/components/registry/Search.vue";
-import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
+import TableView from "@/modules/04_registryNew/components/TableView.vue";
 
 /** importStore*/
 import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
@@ -503,16 +502,14 @@ onMounted(async () => {
     <q-separator />
 
     <q-card-section>
-      <div class="col-12">
-        <TableView
-          v-model:mode="mode"
-          :rows="dataPersonMain"
-          v-model:formFilter="formFilter"
-          v-model:maxPage="maxPage"
-          :fetchData="fetchDataPerson"
-          :fetchType="fetchType"
-        />
-      </div>
+      <TableView
+        v-model:mode="mode"
+        :rows="dataPersonMain"
+        v-model:formFilter="formFilter"
+        v-model:maxPage="maxPage"
+        :fetchData="fetchDataPerson"
+        :fetchType="fetchType"
+      />
     </q-card-section>
   </q-card>
 </template>
diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
index 43c04b675..9e161c03c 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@@ -96,7 +96,7 @@ const formFilter = reactive<DataFilterPerson>({
   page: 1,
   pageSize: 10,
   keyword: "",
-  rootId: ""
+  rootId: "",
 });
 const maxPage = ref<number>(1);
 
@@ -109,7 +109,7 @@ function closeModal() {
 
 /** function เรียกรายชื่อ คนเลื่อนเงินเดือน*/
 function fetchListPerson() {
-  showLoader();  
+  showLoader();
   formFilter.rootId = store.rootId;
   http
     .post(config.API.salaryListPerson, formFilter)
@@ -180,9 +180,9 @@ function searchData() {
 /** callblack function เรียกข้อมูลรายชื่อคนเลื่อนเงินเดือน เมื่อมีการเปิด Popup*/
 watch(
   () => modal.value,
-  async () => {
+  () => {
     if (modal.value) {
-      await fetchListPerson();
+      fetchListPerson();
     }
   }
 );