From 97f640c090ab85797368c1faa1e4a7f1b8fbf549 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 8 Feb 2024 16:09:13 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20popu?=
 =?UTF-8?q?p=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=84?=
 =?UTF-8?q?=E0=B8=99=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogSelectPerson.vue         | 451 ++++++++++--------
 1 file changed, 258 insertions(+), 193 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
index 1755a769e..fa756a867 100644
--- a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
+++ b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
@@ -41,6 +41,8 @@ const levelOpsMain = ref<DataOption[]>([]);
 const typeOps = ref<DataOption[]>([]);
 const levelOps = ref<DataOption[]>([]);
 const dataLevel = ref<any>();
+const selected = ref<string[]>([]);
+const isSit = ref<boolean>(false);
 const executiveOps = ref<DataOption[]>([]);
 const store = useOrganizational();
 const $q = useQuasar();
@@ -258,8 +260,8 @@ function clearForm() {
   formData.positionLevel = "";
   formData.personal = "";
   formData.position = "";
-  row.value = []
-  rowResult.value = []
+  row.value = [];
+  rowResult.value = [];
 }
 
 watch(
@@ -328,6 +330,8 @@ function onSubmit() {
   dialogConfirm(
     $q,
     () => {
+      console.log("ตำแหน่ง==>", selected.value);
+      console.log("ทับที่==>", isSit);
       // showLoader();
       // http
       //   .post(config.API.createOrganization, formData)
@@ -380,6 +384,7 @@ function clearPosition() {
   formData.positionLevel = "";
 }
 </script>
+
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 80vw">
@@ -398,201 +403,261 @@ function clearPosition() {
               </div>
             </div>
 
-            <div class="row q-col-gutter-sm q-mb-xs">
-              <div class="col-12">
-                <d-table
-                  flat
-                  :columns="columns"
-                  :rows="row"
-                  row-key="id"
-                  dense
-                  hide-pagination
-                  class="custom-header-table"
-                >
-                  <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-tr>
-                  </template>
-                  <template v-slot:body="props">
-                    <q-tr :props="props" class="cursor-pointer">
-                      <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{ props.rowIndex + 1 }}
-                        </div>
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                รายการตำแหน่ง
+              </div>
+              <div class="col-12"><q-separator /></div>
 
-                        <div v-else>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
-              </div>
-            </div>
-            <div class="row q-col-gutter-sm q-mt-sm">
-              <div class="col-2">
-                <q-input
-                  ref="positionExecutiveFieldRef"
-                  v-model="formData.personal"
-                  :class="inputEdit(isReadonly)"
-                  dense
-                  outlined
-                  for="#search"
-                  label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-2">
-                <q-input
-                  ref="positionRef"
-                  v-model="formData.position"
-                  :class="inputEdit(isReadonly)"
-                  dense
-                  outlined
-                  for="#position"
-                  label="ตำแหน่งในสายงาน"
-                  lazy-rules
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-2">
-                <q-select
-                  ref="positionTypeRef"
-                  :class="inputEdit(isReadonly)"
-                  label="ประเภทตำแหน่ง"
-                  v-model="formData.positionType"
-                  :options="typeOps"
-                  emit-value
-                  dense
-                  @update:model-value="updateSelectType"
-                  map-options
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  lazy-rules
-                  hide-bottom-space
-                  :rules="
-                    !isDisValidate
-                      ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
-                      : []
-                  "
-                  ><template v-if="formData.positionType" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="clearPosition()"
-                      class="cursor-pointer"
-                    /> </template
-                ></q-select>
-              </div>
-              <div class="col-2">
-                <q-select
-                  
-                  ref="positionLevelRef"
-                  :class="inputEdit(isReadonly)"
-                  label="ระดับตำแหน่ง"
-                  v-model="formData.positionLevel"
-                  :disable="formData.positionType == ''"
-                  :options="levelOps"
-                  emit-value
-                  dense
-                  map-options
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  lazy-rules
-                  hide-bottom-space
-                  :rules="
-                    !isDisValidate
-                      ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
-                      : []
-                  "
-                >
-                  <template v-if="formData.positionLevel" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="formData.positionLevel = ''"
-                      class="cursor-pointer"
-                    /> </template
-                ></q-select>
-              </div>
-              <div class="col-2">
-                <q-btn 
-                label="ค้นหา"
-                color="teal-5"
-                class="full-height"
-                icon="search"
-                @click="searchData"
-                />
-              </div>
+              <div class="row q-col-gutter-sm q-pa-sm">
+                <div class="col-12">
+                  <d-table
+                    flat
+                    :columns="columns"
+                    :rows="row"
+                    row-key="id"
+                    dense
+                    hide-pagination
+                    class="custom-header-table"
+                    selection="single"
+                    v-model:selected="selected"
+                  >
+                    <template v-slot:header-selection="scope">
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="scope.checkBox"
+                      />
+                    </template>
+                    <template v-slot:header="props">
+                      <q-tr :props="props">
+                        <q-th class="text-center"> </q-th>
 
-              <q-select
-                for="#select"
-                v-model="visibleColumnsResult"
-                multiple
-                outlined
+                        <q-th
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <span class="text-weight-medium">{{
+                            col.label
+                          }}</span>
+                        </q-th>
+                      </q-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <td class="text-center">
+                          <q-checkbox
+                            keep-color
+                            color="primary"
+                            dense
+                            v-model="props.selected"
+                          />
+                        </td>
+
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+
+                          <div v-else>
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
+              </div>
+            </q-card>
+
+            <q-card
+              bordered
+              class="row col-12 q-mt-sm"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ค้นหาคนครอง
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="row q-col-gutter-sm q-pa-sm">
+                <div class="col-2">
+                  <q-input
+                    ref="positionExecutiveFieldRef"
+                    v-model="formData.personal"
+                    :class="inputEdit(isReadonly)"
+                    dense
+                    outlined
+                    for="#search"
+                    label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-2">
+                  <q-input
+                    ref="positionRef"
+                    v-model="formData.position"
+                    :class="inputEdit(isReadonly)"
+                    dense
+                    outlined
+                    for="#position"
+                    label="ตำแหน่งในสายงาน"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-2">
+                  <q-select
+                    ref="positionTypeRef"
+                    :class="inputEdit(isReadonly)"
+                    label="ประเภทตำแหน่ง"
+                    v-model="formData.positionType"
+                    :options="typeOps"
+                    emit-value
+                    dense
+                    @update:model-value="updateSelectType"
+                    map-options
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    lazy-rules
+                    hide-bottom-space
+                    :rules="
+                      !isDisValidate
+                        ? [(val) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`]
+                        : []
+                    "
+                    ><template v-if="formData.positionType" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="clearPosition()"
+                        class="cursor-pointer"
+                      /> </template
+                  ></q-select>
+                </div>
+                <div class="col-2">
+                  <q-select
+                    ref="positionLevelRef"
+                    :class="inputEdit(isReadonly)"
+                    label="ระดับตำแหน่ง"
+                    v-model="formData.positionLevel"
+                    :disable="formData.positionType == ''"
+                    :options="levelOps"
+                    emit-value
+                    dense
+                    map-options
+                    outlined
+                    option-label="name"
+                    option-value="id"
+                    lazy-rules
+                    hide-bottom-space
+                    :rules="
+                      !isDisValidate
+                        ? [(val) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]
+                        : []
+                    "
+                  >
+                    <template v-if="formData.positionLevel" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="formData.positionLevel = ''"
+                        class="cursor-pointer"
+                      /> </template
+                  ></q-select>
+                </div>
+                <div class="col-2">
+                  <q-btn
+                    label="ค้นหา"
+                    color="teal-5"
+                    class="full-height"
+                    icon="search"
+                    @click="searchData"
+                  />
+                </div>
+
+                <q-select
+                  for="#select"
+                  v-model="visibleColumnsResult"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="columnsResult"
+                  option-value="name"
+                  options-cover
+                  style="min-width: 150px"
+                  class="col-xs-12 col-sm-3 col-md-2"
+                />
+                <div class="col-12">
+                  <d-table
+                    flat
+                    :columns="columnsResult"
+                    :rows="rowResult"
+                    row-key="id"
+                    dense
+                    hide-pagination
+                    class="custom-header-table"
+                  >
+                    <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-tr>
+                    </template>
+                    <template v-slot:body="props">
+                      <q-tr :props="props" class="cursor-pointer">
+                        <q-td
+                          v-for="col in props.cols"
+                          :key="col.name"
+                          :props="props"
+                        >
+                          <div v-if="col.name == 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </div>
+
+                          <div v-else>
+                            {{ col.value }}
+                          </div>
+                        </q-td>
+                      </q-tr>
+                    </template>
+                  </d-table>
+                </div>
+              </div>
+            </q-card>
+
+            <div class="row col-12 q-pa-sm">
+              <q-checkbox
+                keep-color
+                color="primary"
                 dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columnsResult"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="col-xs-12 col-sm-3 col-md-2"
+                v-model="isSit"
+                label="ทับที่"
               />
-              <div class="col-12">
-                <d-table
-                  flat
-                  :columns="columnsResult"
-                  :rows="rowResult"
-                  row-key="id"
-                  dense
-                  hide-pagination
-                  class="custom-header-table"
-                >
-                  <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-tr>
-                  </template>
-                  <template v-slot:body="props">
-                    <q-tr :props="props" class="cursor-pointer">
-                      <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{ props.rowIndex + 1 }}
-                        </div>
-
-                        <div v-else>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </d-table>
-              </div>
             </div>
           </div>
         </q-card-section>

From 8a472dc923e2c0f74f760100f65f1604b8978a0e Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Thu, 8 Feb 2024 16:31:21 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=B9=E0=B8=A5=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4:=20UI+API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.profile.ts               |   8 +-
 .../components/registry/registry.vue          | 591 ++++++++++++++++++
 src/modules/04_registryNew/stores/registry.ts |  20 +
 src/modules/04_registryNew/views/main.vue     |  11 +-
 4 files changed, 625 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/registry/registry.vue
 create mode 100644 src/modules/04_registryNew/stores/registry.ts

diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index cc49aecba..ad1fdd93f 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -6,7 +6,7 @@ const profile = `${env.API_URI_PROFILE_SERVICE}/profile/`;
 const report = `${env.API_REPORT_URI}/report/profile/`;
 
 const organizationRoot = `${env.API_URI}/profile/organization/list/root`;
-
+const registryNew = `${env.API_URI}/org/profile/`;
 export default {
   /**
    * api สังกัด  ทะเบียนประวัติเงินเดือน
@@ -199,5 +199,9 @@ export default {
 
   // verify
   profileVerified: (profileId: string) => `${profile}verified/${profileId}`,
-  profileVerifiedUnlock: (profileId: string) => `${profile}not-verified/${profileId}`,
+  profileVerifiedUnlock: (profileId: string) =>
+    `${profile}not-verified/${profileId}`,
+
+  registryNew,
+  registryNewId: (id: string) => `${registryNew}${id}`,
 };
diff --git a/src/modules/04_registryNew/components/registry/registry.vue b/src/modules/04_registryNew/components/registry/registry.vue
new file mode 100644
index 000000000..50b315c9c
--- /dev/null
+++ b/src/modules/04_registryNew/components/registry/registry.vue
@@ -0,0 +1,591 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } 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,
+} = 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();
+});
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.registryNew)
+    .then(async (res) => {
+      store.save(res.data.result);
+    })
+    .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() {
+  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,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  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,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.registryNewId(id));
+  fetchData();
+}
+
+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);
+});
+</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="filterKeyword" label="ค้นหา"></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>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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'">
+            {{ 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="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  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-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="
+                      dialogRemove(
+                        $q,
+                        async () => await deleteData(props.row.id)
+                      )
+                    "
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <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) => val.length > 0 || 'กรุณากรอกเลขประจำตัวประชาชน']"
+            hide-bottom-space
+          />
+          <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/stores/registry.ts b/src/modules/04_registryNew/stores/registry.ts
new file mode 100644
index 000000000..c76b6d1ee
--- /dev/null
+++ b/src/modules/04_registryNew/stores/registry.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+// const { date2Thai } = useCounterMixin();
+
+export const useRegistryDataStore = defineStore("RegistryData", () => {
+  const row = ref<[]>([]);
+
+  function save(data: any) {
+    const list = data.map((e: any) => ({
+      ...e,
+    })) satisfies [];
+    row.value = list;
+  }
+  return {
+    save,
+    row,
+  };
+});
diff --git a/src/modules/04_registryNew/views/main.vue b/src/modules/04_registryNew/views/main.vue
index db4dfb1ec..22bd55098 100644
--- a/src/modules/04_registryNew/views/main.vue
+++ b/src/modules/04_registryNew/views/main.vue
@@ -1,7 +1,12 @@
+<script setup lang="ts">
+import Registry from "@/modules/04_registryNew/components/registry/registry.vue";
+</script>
 <template>
-  ทะเบียนประวัติ (ใหม่)
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลทะเบียนประวัติ
+  </div>
+
+  <q-card flat bordered class="q-pa-md"> <Registry /> </q-card>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>