From e35edfeed74920ef9bb6f66bdb0a89ceaa4384e2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 Mar 2024 14:58:20 +0700
Subject: [PATCH 1/6] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=99=E0=B8=82=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=20=20=3D>=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20body=20filter=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B5=E0=B9=88=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SalaryLists/DialogAddPerson.vue           |  4 ++
 .../13_salary/interface/index/SalaryList.ts   |  2 +
 .../13_salary/store/SalaryListsStore.ts       |  4 +-
 src/modules/13_salary/views/salaryLists.vue   | 38 +++++++++++--------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
index 9e161c03c..6aaeefa4d 100644
--- a/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
+++ b/src/modules/13_salary/components/SalaryLists/DialogAddPerson.vue
@@ -97,6 +97,8 @@ const formFilter = reactive<DataFilterPerson>({
   pageSize: 10,
   keyword: "",
   rootId: "",
+  year: 0,
+  period: "",
 });
 const maxPage = ref<number>(1);
 
@@ -111,6 +113,8 @@ function closeModal() {
 function fetchListPerson() {
   showLoader();
   formFilter.rootId = store.rootId;
+  formFilter.period = store.roundMainCode;
+  formFilter.year = store.roundYear;
   http
     .post(config.API.salaryListPerson, formFilter)
     .then((res) => {
diff --git a/src/modules/13_salary/interface/index/SalaryList.ts b/src/modules/13_salary/interface/index/SalaryList.ts
index a490b5dff..0d62b7224 100644
--- a/src/modules/13_salary/interface/index/SalaryList.ts
+++ b/src/modules/13_salary/interface/index/SalaryList.ts
@@ -10,6 +10,8 @@ interface DataFilterPerson {
   pageSize: number;
   keyword: string;
   rootId: string;
+  year: number;
+  period: string;
 }
 
 export type { DataFilter, DataFilterPerson };
diff --git a/src/modules/13_salary/store/SalaryListsStore.ts b/src/modules/13_salary/store/SalaryListsStore.ts
index 2b43dc022..ff11a843e 100644
--- a/src/modules/13_salary/store/SalaryListsStore.ts
+++ b/src/modules/13_salary/store/SalaryListsStore.ts
@@ -21,6 +21,7 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
   const groupId = ref<string>("");
   const rootId = ref<string>("");
   const roundMainCode = ref<string>("");
+  const roundYear = ref<number>(0);
   const roundCode = ref<string>("");
   const isClosedRound = ref<boolean>(false); // การปิดรอบ
   /** List Menu*/
@@ -152,6 +153,7 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
     groupOp,
     roundMainCode,
     remaining,
-    isClosedRound
+    isClosedRound,
+    roundYear,
   };
 });
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index aa126ca50..e2122f53a 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
-import PageDashBoard from '@/modules/13_salary/components/SalaryLists/Dashboard.vue'
+import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
 /** importType*/
 import type {
   DataOption,
@@ -63,6 +63,7 @@ function getRound() {
         revisionId: x.revisionId,
         shortCode: x.period,
         isClose: x.isClose,
+        year: x.year,
         name:
           (x.period === "OCT"
             ? "รอบตุลาคม "
@@ -78,6 +79,7 @@ function getRound() {
         : "");
 
       store.roundMainCode = roundFilter.value.shortCode;
+      store.roundYear = roundFilter.value.year;
       store.isClosedRound = roundFilter.value.isClose;
 
       await getSnap(roundFilter.value.shortCode);
@@ -239,6 +241,7 @@ function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
 async function onChangeRound() {
   // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
   store.isClosedRound = roundFilter.value.isClose;
+  console.log(roundFilter.value);
 
   await getSnap(roundFilter.value.shortCode);
   await getAgency(roundFilter.value.revisionId);
@@ -251,6 +254,7 @@ async function onChangeRound() {
     // );
     store.tabType = "PENDING";
     store.roundMainCode = roundFilter.value.shortCode;
+    store.roundYear = roundFilter.value.year;
   } else {
     isLoad.value = false;
   }
@@ -271,7 +275,11 @@ async function onChangeSnap() {
 async function onChangeAgency() {
   store.rootId = agencyFilter.value;
 
-  if (agencyFilter.value !== 'ALL' && roundFilter.value.id && snapFilter.value) {
+  if (
+    agencyFilter.value !== "ALL" &&
+    roundFilter.value.id &&
+    snapFilter.value
+  ) {
     await fetchSalalyPeriod(
       agencyFilter.value,
       roundFilter.value.id,
@@ -394,20 +402,18 @@ onMounted(async () => {
     <q-separator /> -->
   <q-card flat bordered>
     <div v-if="agencyFilter !== 'ALL'">
-
-
-    <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
-    <q-card v-else class="q-pa-sm">
-      <div class="q-pa-sm">
-        <q-banner inline-actions rounded class="bg-grey-1 text-center">
-          ไม่มีข้อมูล
-        </q-banner>
-      </div>
-    </q-card>
-  </div>
-  <div v-else>
-    <PageDashBoard/>
-  </div>
+      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <q-card v-else class="q-pa-sm">
+        <div class="q-pa-sm">
+          <q-banner inline-actions rounded class="bg-grey-1 text-center">
+            ไม่มีข้อมูล
+          </q-banner>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <PageDashBoard />
+    </div>
   </q-card>
 
   <q-card

From e952d8dd6af60275a705548008997c757dc341f9 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 11 Mar 2024 15:58:36 +0700
Subject: [PATCH 2/6] =?UTF-8?q?=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=20=E0=B8=82=E0=B9=89=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=B1=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/04_Family.vue  | 1151 ++++++++++++++++-
 1 file changed, 1149 insertions(+), 2 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index ecfe8f03f..1c6623747 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -1,6 +1,1153 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { QForm, useQuasar } from "quasar";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
+
+const formRef = ref<QForm | null>(null);
+
+const dialog = ref<boolean>(false);
+const historyDialog = ref<boolean>(false);
+const fatherPrefixRef = ref<any>(null);
+const fatherFirstNameRef = ref<any>(null);
+const fatherLastNameRef = ref<any>(null);
+const fatherData = reactive({
+  isHaveInfo: "0",
+  isDead: false,
+  citizenId: null,
+  prefix: null,
+  optionPrefix: ["นาย", "จ่าสิบเอก"],
+  firstName: null,
+  lastName: null,
+  job: null,
+});
+const motherData = reactive({
+  isHaveInfo: "0",
+  isDead: false,
+  citizenId: null,
+  prefix: null,
+  optionPrefix: ["นาง", "นางสาว"],
+  firstName: null,
+  lastName: null,
+  job: null,
+});
+const spouseData = reactive({
+  isHave: "0",
+  isDead: false,
+  citizenId: null,
+  prefix: null,
+  optionPrefix: ["นาย", "นาง", "นางสาว"],
+  firstName: null,
+  lastName: null,
+  job: null,
+});
+
+const childrenData: any = reactive({
+  childrens: [],
+  // isHave: "0",
+  // isAlive: "0",
+  // citizenId: null,
+  // prefix: null,
+  // optionPrefix: ["นาย", "นาง", "นางสาว"],
+  // firstName: null,
+  // lastName: null,
+  // job: null,
+});
+
+const childrenOptionPrefix = ["นาย", "นาง", "นางสาว"];
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function closeHistoryDialog() {
+  historyDialog.value = false;
+}
+
+function validateForm() {
+  console.log("test");
+  onSubmit();
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      closeDialog();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+const addChildren = async () => {
+  childrenData.childrens.push({
+    isAlive: "0",
+    citizenId: "",
+    prefix: "",
+    id: `${childrenData.childrens.length + 1}`,
+    firstName: "",
+    lastName: "",
+    job: "",
+  });
+};
+
+function deleteChildren(items: any) {
+  const index = childrenData.childrens.findIndex((r: any) => r.id == items.id);
+
+  childrenData.childrens.splice(index, 1);
+}
+</script>
+
 <template>
-  <div>4</div>
+  <div>
+    <div class="flex justify-between text-center">
+      <div class="text-h6 text-center">ข้อมูลครอบครัว</div>
+      <div>
+        <q-btn
+          round
+          flat
+          color="primary"
+          icon="mdi-pencil-outline"
+          size="14px"
+          @click="dialog = true"
+        >
+          <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+        >
+        <q-btn
+          round
+          flat
+          color="blue"
+          icon="mdi-history"
+          size="14px"
+          @click="historyDialog = true"
+        >
+          <q-tooltip>ประวัติ</q-tooltip></q-btn
+        >
+      </div>
+    </div>
+    <div class="col-12 row q-pb-sm q-pt-md">
+      <div class="q-mr-md text-weight-bold">• บิดา</div>
+      <div class="flex q-gutter-sm">
+        <q-radio
+          v-model="fatherData.isHaveInfo"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="1"
+          label="มีข้อมูล"
+          dense
+          :disable="true"
+          color="primary"
+        />
+        <q-radio
+          v-model="fatherData.isHaveInfo"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="0"
+          color="red"
+          label="ไม่มีข้อมูล"
+          :disable="true"
+          dense
+        />
+        <q-separator color="grey-4" vertical />
+        <q-checkbox
+          :disable="true"
+          outline
+          v-model="fatherData.isDead"
+          label="เสียชีวิตแล้ว"
+          color="red"
+          dense
+        />
+      </div>
+    </div>
+    <div class="flex q-gutter-sm">
+      <q-input
+        class="col"
+        outlined
+        hide-bottom-space
+        dense
+        :readonly="true"
+        v-model="fatherData.citizenId"
+        :label="`${'เลขประจำตัวประชาชน'}`"
+        maxlength="13"
+        mask="#############"
+      />
+      <q-select
+        class="col"
+        outlined
+        dense
+        :readonly="true"
+        v-model="fatherData.prefix"
+        :options="fatherData.optionPrefix"
+        label="คำนำหน้าชื่อ"
+      />
+      <q-input
+        class="col"
+        outlined
+        dense
+        :readonly="true"
+        v-model="fatherData.firstName"
+        label="ชื่อ"
+      />
+      <q-input
+        class="col"
+        outlined
+        dense
+        :readonly="true"
+        v-model="fatherData.lastName"
+        label="นามสกุล"
+      />
+      <q-input
+        class="col"
+        outlined
+        dense
+        :readonly="true"
+        v-model="fatherData.job"
+        label="อาชีพ"
+      />
+    </div>
+    <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+      <div class="q-mr-md text-weight-bold">• มารดา</div>
+      <div class="flex q-gutter-sm">
+        <q-radio
+          v-model="motherData.isHaveInfo"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="1"
+          :disable="true"
+          label="มีข้อมูล"
+          dense
+          color="primary"
+        />
+        <q-radio
+          v-model="motherData.isHaveInfo"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="0"
+          :disable="true"
+          color="red"
+          label="ไม่มีข้อมูล"
+          dense
+        />
+        <q-separator color="grey-4" vertical />
+        <q-checkbox
+          :disable="true"
+          outline
+          v-model="motherData.isDead"
+          label="เสียชีวิตแล้ว"
+          color="red"
+          dense
+        />
+      </div>
+    </div>
+    <div class="flex q-gutter-sm">
+      <q-input
+        class="col"
+        outlined
+        hide-bottom-space
+        dense
+        :readonly="true"
+        v-model="motherData.citizenId"
+        :label="`${'เลขประจำตัวประชาชน'}`"
+        maxlength="13"
+        mask="#############"
+      />
+      <q-select
+        class="col"
+        outlined
+        dense
+        :readonly="true"
+        v-model="motherData.prefix"
+        :options="motherData.optionPrefix"
+        label="คำนำหน้าชื่อ"
+      />
+      <q-input
+        class="col"
+        outlined
+        dense
+        :readonly="true"
+        v-model="motherData.firstName"
+        label="ชื่อ"
+      />
+      <q-input
+        class="col"
+        outlined
+        dense
+        :readonly="true"
+        v-model="motherData.lastName"
+        label="นามสกุล"
+      />
+      <q-input
+        class="col"
+        outlined
+        :readonly="true"
+        dense
+        v-model="motherData.job"
+        label="อาชีพ"
+      />
+    </div>
+    <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+      <div class="q-mr-md text-weight-bold">• คู่สมรส</div>
+      <div class="flex q-gutter-sm">
+        <q-radio
+          v-model="spouseData.isHave"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="1"
+          label="มี"
+          dense
+          :disable="true"
+          color="primary"
+        />
+        <q-radio
+          v-model="spouseData.isHave"
+          checked-icon="task_alt"
+          unchecked-icon="panorama_fish_eye"
+          val="0"
+          color="red"
+          label="ไม่มี"
+          dense
+          :disable="true"
+        />
+        <q-separator color="grey-4" vertical />
+        <q-checkbox
+          :disable="true"
+          outline
+          v-model="spouseData.isDead"
+          label="เสียชีวิตแล้ว"
+          color="red"
+          dense
+        />
+      </div>
+    </div>
+    <div class="flex q-gutter-sm">
+      <q-input
+        class="col"
+        :readonly="true"
+        outlined
+        hide-bottom-space
+        dense
+        v-model="spouseData.citizenId"
+        :label="`${'เลขประจำตัวประชาชน'}`"
+        maxlength="13"
+        mask="#############"
+      />
+      <q-select
+        class="col"
+        :readonly="true"
+        outlined
+        dense
+        v-model="spouseData.prefix"
+        :options="spouseData.optionPrefix"
+        label="คำนำหน้าชื่อ"
+      />
+      <q-input
+        class="col"
+        :readonly="true"
+        outlined
+        dense
+        v-model="spouseData.firstName"
+        label="ชื่อ"
+      />
+      <q-input
+        class="col"
+        :readonly="true"
+        outlined
+        dense
+        v-model="spouseData.lastName"
+        label="นามสกุล"
+      />
+      <q-input
+        class="col"
+        :readonly="true"
+        outlined
+        dense
+        v-model="spouseData.job"
+        label="อาชีพ"
+      />
+    </div>
+    <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+      <div class="col-xs-2 col-sm-1 text-weight-bold q-mb-sm">• บุตร</div>
+      <div
+        class="col-12 items-center q-col-gutter-xs"
+        v-for="(items, index) in childrenData.childrens"
+        :key="index"
+      >
+        <div class="col-12 row q-gutter-sm q-pb-xs">
+          <q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
+          <q-radio
+            v-model="items.isAlive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            :disable="true"
+            label="มีชีวิต"
+            color="primary"
+            dense
+          />
+          <q-radio
+            v-model="items.isAlive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            :disable="true"
+            label="เสียชีวิต"
+            color="red"
+            dense
+          />
+        </div>
+        <div class="flex q-gutter-sm q-mb-md">
+          <q-input
+            class="col"
+            outlined
+            hide-bottom-space
+            dense
+            :readonly="true"
+            v-model="items.citizenId"
+            :label="`${'เลขประจำตัวประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+          <q-select
+            class="col"
+            outlined
+            dense
+            :readonly="true"
+            v-model="items.prefix"
+            :options="childrenOptionPrefix"
+            label="คำนำหน้าชื่อ"
+          />
+          <q-input
+            class="col"
+            outlined
+            dense
+            :readonly="true"
+            v-model="items.firstName"
+            label="ชื่อ"
+          />
+          <q-input
+            class="col"
+            outlined
+            dense
+            :readonly="true"
+            v-model="items.lastName"
+            label="นามสกุล"
+          />
+          <q-input
+            class="col"
+            outlined
+            dense
+            :readonly="true"
+            v-model="items.job"
+            label="อาชีพ"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header tittle="ข้อมูลครอบครัว" :close="closeDialog" />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold">• บิดา</div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="fatherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                label="มีข้อมูล"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="fatherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มีข้อมูล"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="fatherData.isHaveInfo === '0' ? true : false"
+                outline
+                v-model="fatherData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              hide-bottom-space
+              dense
+              v-model="fatherData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              lazy-rules
+              dense
+              v-model="fatherData.prefix"
+              :options="fatherData.optionPrefix"
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              lazy-rules
+              v-model="fatherData.firstName"
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              label="ชื่อ"
+            />
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              lazy-rules
+              v-model="fatherData.lastName"
+              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+              label="นามสกุล"
+            />
+            <q-input
+              :disable="fatherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              v-model="fatherData.job"
+              label="อาชีพ"
+            />
+          </div>
+          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+            <div class="q-mr-md text-weight-bold">• มารดา</div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="motherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                label="มีข้อมูล"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="motherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มีข้อมูล"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="motherData.isHaveInfo === '0' ? true : false"
+                outline
+                v-model="motherData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              hide-bottom-space
+              dense
+              v-model="motherData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              v-model="motherData.prefix"
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              lazy-rules
+              :options="motherData.optionPrefix"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              dense
+              lazy-rules
+              v-model="motherData.firstName"
+              label="ชื่อ"
+            />
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+              class="col"
+              outlined
+              lazy-rules
+              dense
+              v-model="motherData.lastName"
+              label="นามสกุล"
+            />
+            <q-input
+              :disable="motherData.isHaveInfo === '0' ? true : false"
+              class="col"
+              outlined
+              dense
+              v-model="motherData.job"
+              label="อาชีพ"
+            />
+          </div>
+          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+            <div class="q-mr-md text-weight-bold">• คู่สมรส</div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="spouseData.isHave"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                label="มี"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="spouseData.isHave"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มี"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="spouseData.isHave === '0' ? true : false"
+                outline
+                v-model="spouseData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              hide-bottom-space
+              dense
+              v-model="spouseData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              v-model="spouseData.prefix"
+              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+              :options="spouseData.optionPrefix"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+              v-model="spouseData.firstName"
+              label="ชื่อ"
+            />
+            <q-input
+              class="col"
+              :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              v-model="spouseData.lastName"
+              label="นามสกุล"
+            />
+            <q-input
+              class="col"
+              :disable="spouseData.isHave === '0' ? true : false"
+              outlined
+              dense
+              v-model="spouseData.job"
+              label="อาชีพ"
+            />
+          </div>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="text-weight-bold row items-center">• บุตร</div>
+            <q-btn flat round color="primary" icon="add" @click="addChildren">
+              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+            </q-btn>
+          </div>
+          <div v-for="(items, index) in childrenData.childrens" :key="index">
+            <div class="col-12 row q-gutter-sm q-pb-xs">
+              <q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
+              <q-radio
+                v-model="items.isAlive"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                label="มีชีวิต"
+                color="primary"
+                dense
+              />
+              <q-radio
+                v-model="items.isAlive"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                label="เสียชีวิต"
+                color="red"
+                dense
+              />
+            </div>
+            <div class="flex q-gutter-sm q-mb-md">
+              <q-btn
+                flat
+                dense
+                size="12px"
+                round
+                color="red"
+                @click="deleteChildren(items)"
+                icon="mdi-delete-outline"
+              >
+                <q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
+              </q-btn>
+              <q-input
+                class="col"
+                outlined
+                hide-bottom-space
+                dense
+                v-model="items.citizenId"
+                :label="`${'เลขประจำตัวประชาชน'}`"
+                maxlength="13"
+                mask="#############"
+              />
+              <q-select
+                class="col"
+                outlined
+                dense
+                lazy-rules
+                v-model="items.prefix"
+                :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                :options="childrenOptionPrefix"
+                label="คำนำหน้าชื่อ"
+              />
+              <q-input
+                class="col"
+                outlined
+                dense
+                lazy-rules
+                v-model="items.firstName"
+                :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
+                label="ชื่อ"
+              />
+              <q-input
+                class="col"
+                outlined
+                lazy-rules
+                dense
+                v-model="items.lastName"
+                :rules="[(val) => !!val || 'กรุณากรอกนามสกุล']"
+                label="นามสกุล"
+              />
+              <q-input
+                class="col"
+                outlined
+                dense
+                v-model="items.job"
+                label="อาชีพ"
+              />
+            </div>
+          </div>
+        </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>
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="historyDialog" class="dialog" persistent>
+    <q-card style="min-width: 70%" class="bg-grey-11">
+      <q-form @submit.prevent greedy @validation-success="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            tittle="ประวัติแก้ไขข้อมูลครอบครัว"
+            :close="closeHistoryDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section>
+          <div class="col-12 row q-pb-sm q-pt-md">
+            <div class="q-mr-md text-weight-bold">• บิดา</div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="fatherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                label="มีข้อมูล"
+                dense
+                :disable="true"
+                color="primary"
+              />
+              <q-radio
+                v-model="fatherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มีข้อมูล"
+                :disable="true"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="true"
+                outline
+                v-model="fatherData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              class="col"
+              outlined
+              hide-bottom-space
+              dense
+              :readonly="true"
+              v-model="fatherData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              class="col"
+              outlined
+              dense
+              :readonly="true"
+              v-model="fatherData.prefix"
+              :options="fatherData.optionPrefix"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              class="col"
+              outlined
+              dense
+              :readonly="true"
+              v-model="fatherData.firstName"
+              label="ชื่อ"
+            />
+            <q-input
+              class="col"
+              outlined
+              dense
+              :readonly="true"
+              v-model="fatherData.lastName"
+              label="นามสกุล"
+            />
+            <q-input
+              class="col"
+              outlined
+              dense
+              :readonly="true"
+              v-model="fatherData.job"
+              label="อาชีพ"
+            />
+          </div>
+          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+            <div class="q-mr-md text-weight-bold">• มารดา</div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="motherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                :disable="true"
+                label="มีข้อมูล"
+                dense
+                color="primary"
+              />
+              <q-radio
+                v-model="motherData.isHaveInfo"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                :disable="true"
+                color="red"
+                label="ไม่มีข้อมูล"
+                dense
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="true"
+                outline
+                v-model="motherData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              class="col"
+              outlined
+              hide-bottom-space
+              dense
+              :readonly="true"
+              v-model="motherData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              class="col"
+              outlined
+              dense
+              :readonly="true"
+              v-model="motherData.prefix"
+              :options="motherData.optionPrefix"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              class="col"
+              outlined
+              dense
+              :readonly="true"
+              v-model="motherData.firstName"
+              label="ชื่อ"
+            />
+            <q-input
+              class="col"
+              outlined
+              dense
+              :readonly="true"
+              v-model="motherData.lastName"
+              label="นามสกุล"
+            />
+            <q-input
+              class="col"
+              outlined
+              :readonly="true"
+              dense
+              v-model="motherData.job"
+              label="อาชีพ"
+            />
+          </div>
+          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+            <div class="q-mr-md text-weight-bold">• คู่สมรส</div>
+            <div class="flex q-gutter-sm">
+              <q-radio
+                v-model="spouseData.isHave"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="1"
+                label="มี"
+                dense
+                :disable="true"
+                color="primary"
+              />
+              <q-radio
+                v-model="spouseData.isHave"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="0"
+                color="red"
+                label="ไม่มี"
+                dense
+                :disable="true"
+              />
+              <q-separator color="grey-4" vertical />
+              <q-checkbox
+                :disable="true"
+                outline
+                v-model="spouseData.isDead"
+                label="เสียชีวิตแล้ว"
+                color="red"
+                dense
+              />
+            </div>
+          </div>
+          <div class="flex q-gutter-sm">
+            <q-input
+              class="col"
+              :readonly="true"
+              outlined
+              hide-bottom-space
+              dense
+              v-model="spouseData.citizenId"
+              :label="`${'เลขประจำตัวประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+            <q-select
+              class="col"
+              :readonly="true"
+              outlined
+              dense
+              v-model="spouseData.prefix"
+              :options="spouseData.optionPrefix"
+              label="คำนำหน้าชื่อ"
+            />
+            <q-input
+              class="col"
+              :readonly="true"
+              outlined
+              dense
+              v-model="spouseData.firstName"
+              label="ชื่อ"
+            />
+            <q-input
+              class="col"
+              :readonly="true"
+              outlined
+              dense
+              v-model="spouseData.lastName"
+              label="นามสกุล"
+            />
+            <q-input
+              class="col"
+              :readonly="true"
+              outlined
+              dense
+              v-model="spouseData.job"
+              label="อาชีพ"
+            />
+          </div>
+          <div class="col-12 row q-pb-sm q-pt-md q-mt-md">
+            <div class="col-xs-2 col-sm-1 text-weight-bold q-mb-sm">• บุตร</div>
+            <div
+              class="col-12 items-center q-col-gutter-xs"
+              v-for="(items, index) in childrenData.childrens"
+              :key="index"
+            >
+              <div class="col-12 row q-gutter-sm q-pb-xs">
+                <q-avatar class="bg-grey-2" size="28px">{{
+                  index + 1
+                }}</q-avatar>
+                <q-radio
+                  v-model="items.isAlive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  val="1"
+                  :disable="true"
+                  label="มีชีวิต"
+                  color="primary"
+                  dense
+                />
+                <q-radio
+                  v-model="items.isAlive"
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  val="0"
+                  :disable="true"
+                  label="เสียชีวิต"
+                  color="red"
+                  dense
+                />
+              </div>
+              <div class="flex q-gutter-sm q-mb-md">
+                <q-input
+                  class="col"
+                  outlined
+                  hide-bottom-space
+                  dense
+                  :readonly="true"
+                  v-model="items.citizenId"
+                  :label="`${'เลขประจำตัวประชาชน'}`"
+                  maxlength="13"
+                  mask="#############"
+                />
+                <q-select
+                  class="col"
+                  outlined
+                  dense
+                  :readonly="true"
+                  v-model="items.prefix"
+                  :options="childrenOptionPrefix"
+                  label="คำนำหน้าชื่อ"
+                />
+                <q-input
+                  class="col"
+                  outlined
+                  dense
+                  :readonly="true"
+                  v-model="items.firstName"
+                  label="ชื่อ"
+                />
+                <q-input
+                  class="col"
+                  outlined
+                  dense
+                  :readonly="true"
+                  v-model="items.lastName"
+                  label="นามสกุล"
+                />
+                <q-input
+                  class="col"
+                  outlined
+                  dense
+                  :readonly="true"
+                  v-model="items.job"
+                  label="อาชีพ"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

From f16d7e100e1d598a4e9b5f6931a2968c2f7133be Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 11 Mar 2024 17:42:27 +0700
Subject: [PATCH 3/6] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=A5=E0=B8=B1=E0=B8=81=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B3,=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20page=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99=E0=B8=A5=E0=B8=B9=E0=B8=81?=
 =?UTF-8?q?=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  15 +-
 .../position-employee/01ListPosition.vue      | 393 ++++++++++++++
 .../position-employee/02ListType.vue          | 409 ++++++++++++++
 .../position-employee/03ListLevel.vue         |  30 ++
 .../position-employee/05ListLevelDetail.vue   | 499 ++++++++++++++++++
 .../position-employee/DialogAddPosition.vue   | 286 ++++++++++
 .../components/position/01ListPosition.vue    |   6 +-
 .../interface/request/position/index.ts       |  32 +-
 src/modules/01_metadataNew/router.ts          |  28 +-
 .../stores/positionEmployeeStore.ts           |  34 ++
 src/modules/01_metadataNew/views/position.vue |   4 +-
 .../01_metadataNew/views/positionEmployee.vue |  62 +++
 .../04_registryNew/components/TableView.vue   |  18 +-
 src/modules/04_registryNew/views/list.vue     |  18 +-
 src/modules/13_salary/router.ts               |  24 +
 .../13_salary/views/salaryEmployeeChart.vue   |   3 +
 .../13_salary/views/salaryEmployeeLists.vue   | 412 +++++++++++++++
 src/modules/13_salary/views/salaryLists.vue   |  36 +-
 18 files changed, 2265 insertions(+), 44 deletions(-)
 create mode 100644 src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
 create mode 100644 src/modules/01_metadataNew/components/position-employee/02ListType.vue
 create mode 100644 src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
 create mode 100644 src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
 create mode 100644 src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
 create mode 100644 src/modules/01_metadataNew/stores/positionEmployeeStore.ts
 create mode 100644 src/modules/01_metadataNew/views/positionEmployee.vue
 create mode 100644 src/modules/13_salary/views/salaryEmployeeChart.vue
 create mode 100644 src/modules/13_salary/views/salaryEmployeeLists.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 993046ed6..d2c993c4b 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -66,16 +66,21 @@ const menuList = readonly<any[]>([
       },
       {
         key: 3.2,
-        label: "ข้อมูลตำแหน่ง",
+        label: "ข้อมูลตำแหน่งข้าราชการฯ",
         path: "masterPosition",
       },
       {
         key: 3.3,
+        label: "ข้อมูลตำแหน่งลูกจ้างประจำ",
+        path: "masterPositionEmployee",
+      },
+      {
+        key: 3.4,
         label: "ข้อมูลปฏิทินวันหยุด",
         path: "masterCalendarWork",
       },
       {
-        key: 3.4,
+        key: 3.5,
         label: "ข้อมูลเครื่องราชอิสริยาภรณ์",
         path: "masterInsignia",
       },
@@ -623,13 +628,13 @@ const menuList = readonly<any[]>([
     children: [
       {
         key: 12.1,
-        label: "ผังบัญชีเงินเดือนข้าราชการ",
+        label: "ผังบัญชีเงินเดือนข้าราชการฯ",
         path: "salaryChart",
         role: "salary",
       },
       {
         key: 12.2,
-        label: "ผังบัญชีค่าจ้างลูกจ้าง",
+        label: "ผังบัญชีค่าจ้างลูกจ้างประจำ",
         path: "salaryEmployeeChart",
         role: "salary",
       },
@@ -641,7 +646,7 @@ const menuList = readonly<any[]>([
       },
       {
         key: 12.4,
-        label: "เลื่อนเงินเดือนข้าราชการ",
+        label: "เลื่อนเงินเดือนข้าราชการฯ",
         path: "salaryLists",
         role: "salary",
       },
diff --git a/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue b/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
new file mode 100644
index 000000000..2f2f0af64
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import type {
+  DataOption,
+  FormPositionSelect,
+  ListMenu,
+  RowDetailPositions,
+} from "@/modules/01_metadataNew/interface/request/position/index";
+import type { QTableProps } from "quasar";
+import DialogAddPosition from "@/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue";
+
+const editPosition = ref<boolean>(false);
+const modalAddPosition = ref<boolean>(false);
+const levelOpsMain = ref<DataOption[]>([]);
+const dataLevel = ref<any>();
+const levelOps = ref<DataOption[]>([]);
+
+const isSpecial = ref<boolean>(false);
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  posTypeId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+  isSpecial: false,
+});
+
+const rows = ref<RowDetailPositions[]>([]);
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-content-copy",
+    type: "copy",
+    color: "blue-6",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "remove",
+    color: "red",
+  },
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ชื่อตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+]);
+
+const $q = useQuasar();
+const rowsPositionSelect = ref<RowDetailPositions[]>([]);
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
+
+/** input ค้นหา */
+const searchRef = ref<any>(null);
+const search = ref<string>("");
+const type = ref<string>("positionName");
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const optionFilter = ref<DataOption[]>([
+  { id: "positionName", name: "ชื่อตำแหน่ง" },
+  { id: "positionType", name: "กลุ่มงาน" },
+  { id: "positionLevel", name: "ระดับชั้นงาน" },
+]);
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  formPositionSelect.positionId = data.id;
+  formPositionSelect.posTypeId = data.posTypeId;
+  formPositionSelect.positionName = data.positionName;
+  formPositionSelect.positionType = data.posTypeId;
+  formPositionSelect.positionLevel = data.posLevelId;
+  modalAddPosition.value = true;
+}
+/**
+ * แก้ไขข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function editDetiail(data: RowDetailPositions) {
+  formPositionSelect.positionId = data.id;
+  formPositionSelect.posTypeId = data.posTypeId;
+  formPositionSelect.positionName = data.positionName;
+  formPositionSelect.positionType = data.posTypeId;
+  formPositionSelect.positionLevel = data.posLevelId;
+  modalAddPosition.value = true;
+  editPosition.value = true;
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+async function searchInput() {
+  // showLoader();
+  // await http
+  //   .get(
+  //     config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
+  //   )
+  //   .then((res) => {
+  //     rowsPositionSelect.value = res.data.result;
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+function addPosition(data: RowDetailPositions) {
+  const isIdExist = rows.value.some((item: any) => item.id === data.id);
+
+  if (!isIdExist) {
+    rows.value = [data, ...rows.value];
+  }
+}
+
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    // showLoader();
+    // http
+    //   .delete(config.API.orgPosPositionById(id))
+    //   .then(() => {
+    //     success($q, "ลบข้อมูลสำเร็จ");
+    //   })
+    //   .catch((err) => {
+    //     messageError($q, err);
+    //   })
+    //   .finally(() => {
+    //     searchInput();
+    //     hideLoader();
+    //   });
+  });
+}
+
+function popupAdd() {
+  modalAddPosition.value = true;
+}
+
+async function fetchData() {
+  // search.value = "";
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
+  //   .then((res) => {
+  //     rowsPositionSelect.value = res.data.result;
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+<template>
+  <div class="row col-12 q-mb-sm">
+    <div class="col-md-2">
+      <q-btn
+        id="addComplaints"
+        for="addComplaints"
+        size="12px"
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="popupAdd()"
+        ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
+      >
+    </div>
+
+    <div class="row col-md-10 q-col-gutter-sm">
+      <div class="col-md-4">
+        <q-select
+          label="ค้นหาจาก"
+          v-model="type"
+          :options="optionFilter"
+          emit-value
+          dense
+          map-options
+          outlined
+          option-label="name"
+          option-value="id"
+        />
+      </div>
+
+      <div class="col-md-6">
+        <q-input
+          ref="searchRef"
+          :class="inputEdit(isReadonly)"
+          v-model="search"
+          outlined
+          dense
+          lazy-rules
+          label="คำค้น"
+          hide-bottom-space
+        >
+          <template v-slot:append>
+            <q-icon
+              v-if="search"
+              name="cancel"
+              @click="fetchData()"
+              class="cursor-pointer"
+            ></q-icon>
+          </template>
+        </q-input>
+      </div>
+
+      <div class="row col-md-2">
+        <q-btn
+          color="primary"
+          icon="search"
+          label="ค้นหา"
+          class="full-width"
+          @click="searchInput()"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="full-width q-mt-sm">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="rowsPositionSelect"
+      row-key="id"
+      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"
+            style="color: #000000; font-weight: 500"
+          >
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+          <q-th auto-width></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"
+            @click="addPosition(props.row)"
+          >
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </div>
+            <div v-else-if="col.name === 'posLevelName'">
+              {{
+                props.row.posLevelName
+                  ? props.row.isSpecial == true
+                    ? `${props.row.posLevelName} (ฉ)`
+                    : props.row.posLevelName
+                  : "-"
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              color="blue-6"
+              flat
+              dense
+              round
+              class="q-mr-xs"
+              size="12px"
+              icon="mdi-content-copy"
+              clickable
+              @click.stop="
+                () => {
+                  copyDetiail(props.row);
+                }
+              "
+            >
+              <q-tooltip>คัดลอกข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              color="edit"
+              flat
+              dense
+              round
+              size="12px"
+              icon="mdi-pencil"
+              clickable
+              @click.stop="editDetiail(props.row)"
+              v-close-popup
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+            <q-btn
+              color="red"
+              flat
+              dense
+              round
+              size="12px"
+              icon="mdi-delete"
+              clickable
+              @click.stop="deletePos(props.row.id)"
+              v-close-popup
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+  <DialogAddPosition
+    v-model:add-position="modalAddPosition"
+    v-model:form-data="formPositionSelect"
+    v-model:edit-check="editPosition"
+    :get-data="searchInput"
+  />
+</template>
diff --git a/src/modules/01_metadataNew/components/position-employee/02ListType.vue b/src/modules/01_metadataNew/components/position-employee/02ListType.vue
new file mode 100644
index 000000000..ac710fe30
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position-employee/02ListType.vue
@@ -0,0 +1,409 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QInput, QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const store = usePositionTypeDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  dialogRemove,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const columns = [
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  // {
+  //   name: "posTypeRank",
+  //   align: "left",
+  //   label: "ระดับตำแหน่ง",
+  //   sortable: true,
+  //   field: "posTypeRank",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  //   sort: (a: string, b: string) =>
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  // },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+
+const $q = useQuasar();
+
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const posTypeName = ref<string>("");
+const posTypeNameRef = ref<QInput | null>(null);
+const posTypeRank = ref<number | undefined>();
+const posTypeRankRef = ref<QInput | null>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "posTypeName",
+  "posTypeRank",
+  // "createdAt",
+  // "lastUpdatedAt",
+  // "lastUpdateFullName",
+]);
+
+async function fetchData() {
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPosType)
+  //   .then(async (res) => {
+  //     store.save(res.data.result);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function addData() {
+  await http.post(config.API.orgPosType, {
+    posTypeName: posTypeName.value,
+    posTypeRank: posTypeRank.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.orgPosTypeId(id), {
+    posTypeName: posTypeName.value,
+    posTypeRank: posTypeRank.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgPosTypeId(id));
+  fetchData();
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function onclickDetail(id: string) {
+  router.push(`/master-data/position-employee/level/${id}`);
+}
+
+function validateForm() {
+  posTypeNameRef.value?.validate();
+  posTypeRankRef.value?.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (posTypeName.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
+        closeDialog();
+        posTypeName.value = "";
+        posTypeRank.value = undefined;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
+<template>
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <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"
+        @click.stop="onclickDetail(props.row.id)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          {{ col.value }}
+        </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;
+                posTypeName = props.row.posTypeName;
+                posTypeRank = props.row.posTypeRank;
+              }
+            "
+          >
+            <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>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px">
+      <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-input
+            ref="posTypeNameRef"
+            outlined
+            v-model="posTypeName"
+            label="ชื่อกลุ่มงาน"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 q-ma-md"
+            bg-color="white"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อกลุ่มงาน']"
+            hide-bottom-space
+          />
+          <!-- <q-input
+            ref="posTypeRankRef"
+            outlined
+            v-model="posTypeRank"
+            label="ระดับ"
+            dense
+            type="number"
+            lazy-rules
+            borderless
+            min="1"
+            class="col-12 q-ma-md"
+            :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+            hide-bottom-space
+          /> -->
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped 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/01_metadataNew/components/position-employee/03ListLevel.vue b/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
new file mode 100644
index 000000000..cd2b046b8
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import ListLevelDetail from "@/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue";
+
+const router = useRouter();
+const posName = ref<string>("");
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายการระดับชั้นงาน{{ posName }}
+  </div>
+
+  <q-card flat bordered>
+    <ListLevelDetail v-model:posName="posName" />
+  </q-card>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue b/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
new file mode 100644
index 000000000..ed05bcdc4
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
@@ -0,0 +1,499 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QInput, QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
+import { usePositionTypeDataStore } from "@/modules/01_metadataNew/stores/positionTypeStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const store = usePositionEmployeeDataStore();
+const storeName = usePositionTypeDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+
+const posName = defineModel<string>("posName", {
+  required: true,
+});
+
+const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
+  mixin;
+const $q = useQuasar();
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px; width:0px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  // {
+  //   name: "posLevelRank",
+  //   align: "left",
+  //   label: "ระดับของระดับตำแหน่ง",
+  //   sortable: true,
+  //   field: "posLevelRank",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  //   sort: (a: string, b: string) =>
+  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  // },
+  {
+    name: "posLevelAuthority",
+    align: "left",
+    label: "ผู้มีอำนาจสั่งบรรจุ",
+    sortable: true,
+    field: "posLevelAuthority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const dialogStatus = ref<string>("");
+const editId = ref<string>("");
+const posLevelName = ref<string>("");
+// const posLevelRank = ref<number>();
+const posLevelAuthority = ref<string>("");
+// const posTypeId = ref<null>();
+const posLevelNameRef = ref<QInput | null>(null);
+// const posLevelRankRef = ref<QInput | null>(null);
+const posTypeIdRef = ref<QInput | null>(null);
+// const name = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "no",
+  "posTypeName",
+  "posLevelName",
+  // "posLevelRank",
+  "posLevelAuthority",
+  //   "createdAt",
+  //   "lastUpdatedAt",
+  //   "lastUpdateFullName",
+]);
+
+async function fetchData() {
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPosLevel)
+  //   .then(async (res) => {
+  //     store.save(res.data.result, id.value);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function addData() {
+  await http.post(config.API.orgPosLevel, {
+    posLevelName: posLevelName.value,
+    // posLevelRank: posLevelRank.value,
+    posLevelAuthority:
+      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+    posTypeId: id.value,
+  });
+  fetchData();
+}
+
+async function editData(editId: string) {
+  await http.put(config.API.orgPosLevelId(editId), {
+    posLevelName: posLevelName.value,
+    // posLevelRank: posLevelRank.value,
+    posLevelAuthority:
+      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+    posTypeId: id.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.orgPosLevelId(id));
+  fetchData();
+}
+
+onMounted(async () => {
+  fetchName();
+  storeName.row.forEach((e) => {
+    if (e.id === id.value) {
+      posName.value = e.posTypeName ? e.posTypeName : "";
+    }
+  });
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  posLevelNameRef.value?.validate();
+  // posLevelRankRef.value?.validate();
+  posTypeIdRef.value?.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (posLevelName.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        dialogStatus.value === "create" ? addData() : editData(editId.value);
+        closeDialog();
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+
+async function fetchName() {
+  // showLoader();
+  // await http
+  //   .get(config.API.orgPosType)
+  //   .then(async (res) => {
+  //     storeName.save(res.data.result);
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+</script>
+
+<template>
+  <div class="q-pa-md">
+    <q-toolbar style="padding: 0">
+      <q-btn
+        flat
+        round
+        color="primary"
+        icon="add"
+        @click.stop="
+          () => {
+            dialogStatus = 'create';
+            dialog = true;
+            posLevelName = '';
+            // posLevelRank = undefined;
+            posLevelAuthority = '';
+          }
+        "
+      >
+        <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-bold">{{ 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, index) in props.cols" :key="col.id">
+            <div v-if="col.name == 'no'">
+              {{ props.rowIndex + 1 }}
+            </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;
+                  posLevelName = props.row.posLevelName;
+                  // posLevelRank = props.row.posLevelRank;
+                  posLevelAuthority = props.row.posLevelAuthority;
+                }
+              "
+            >
+              <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>
+    </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-input
+              outlined
+              ref="posLevelNameRef"
+              v-model="posLevelName"
+              label="ระดับชั้นงาน"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              class="col-12 q-ma-md"
+              hide-bottom-space
+              :rules="[(val) => val.length > 0 || 'กรุณากรอกระดับชั้นงาน']"
+            />
+            <!-- <q-input
+              bg-color="white"
+              ref="posLevelRankRef"
+              outlined
+              v-model="posLevelRank"
+              label="ระดับ"
+              dense
+              type="number"
+              lazy-rules
+              borderless
+              min="1"
+              class="col-12 q-ma-md"
+              :rules="[(val) => val != undefined || 'กรุณากรอกระดับ']"
+              hide-bottom-space
+            /> -->
+            <q-input
+              outlined
+              bg-color="white"
+              v-model="posLevelAuthority"
+              label="ผู้มีอำนาจสั่งบรรจุ"
+              dense
+              lazy-rules
+              borderless
+              class="col-12 q-ma-md"
+              hide-bottom-space
+            />
+            <q-select
+              ref="posTypeIdRef"
+              v-model="posName"
+              label="กลุ่มงาน"
+              outlined
+              dense
+              class="col-12 q-ma-md"
+              bg-color="white"
+              options-cover
+              hide-bottom-space
+              readonly
+            />
+          </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>
+  </div>
+</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/01_metadataNew/components/position-employee/DialogAddPosition.vue b/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
new file mode 100644
index 000000000..2da4369b0
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { ref, reactive, watch, defineProps } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+// import type { QTableProps } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  DataOption,
+  FormPositionEmployeeSelectDialog,
+  FormPositionEmployeeSelectRef,
+  OptionType,
+  OptionLevel,
+} from "@/modules/01_metadataNew/interface/request/position/index";
+import { useCounterMixin } from "@/stores/mixin";
+const levelOps = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]);
+const dataLevel = ref<any>();
+const formPositionSelect = reactive<FormPositionEmployeeSelectDialog>({
+  positionId: "",
+  positionName: "",
+  positionType: "",
+  positionLevel: "",
+});
+const $q = useQuasar();
+const isSpecial = ref<boolean>(false);
+const props = defineProps({
+  getData: Function,
+});
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const modal = defineModel<boolean>("addPosition", { required: true });
+const formData = defineModel<any>("formData", { required: true });
+const editCheck = defineModel<boolean>("editCheck", { required: true });
+
+const positionNameRef = ref<Object | null>(null);
+const positionTypeRef = ref<Object | null>(null);
+const positionLevelRef = ref<Object | null>(null);
+
+const objectPositionSelectRef: FormPositionEmployeeSelectRef = {
+  positionName: positionNameRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormPositionEdit() {
+  const hasError = [];
+  for (const key in objectPositionSelectRef) {
+    if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
+      const property = objectPositionSelectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    if (editCheck.value == true) {
+      saveSelectEdit();
+    } else {
+      onSubmitSelectEdit();
+    }
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function saveSelectEdit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      // showLoader();
+      // const body = {
+      //   posDictName: formPositionSelect.positionName,
+      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      // };
+      // await http
+      //   .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
+      //   .then(() => {
+      //     success($q, "เพิ่มข้อมูลสำเร็จ");
+      //     clearFormPositionSelect();
+      //     modal.value = false;
+      //     editCheck.value = false;
+      //     props.getData?.();
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(() => {
+      //     hideLoader();
+      //   });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+/** ฟังชั่น บันทึก */
+function onSubmitSelectEdit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      // showLoader();
+      // const body = {
+      //   posDictName: formPositionSelect.positionName,
+      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      // };
+      // await http
+      //   .post(config.API.orgPosPosition, body)
+      //   .then(() => {
+      //     success($q, "เพิ่มข้อมูลสำเร็จ");
+      //     clearFormPositionSelect();
+      //     modal.value = false;
+      //     editCheck.value = false;
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(() => {
+      //     hideLoader();
+      //   });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+async function clearFormPositionSelect() {
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/** function เรียกรายการประเภทตำแหน่ง */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgPosType)
+    .then((res) => {
+      const data = res.data.result;
+      dataLevel.value = data;
+      typeOpsMain.value = data.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      fetchType();
+      if (formData.value) {
+        const dataList = formData.value;
+        setTimeout(() => {
+          updateSelectType(dataList.posTypeId);
+        }, 1000);
+        formPositionSelect.positionId = dataList.positionId;
+        formPositionSelect.positionName = dataList.positionName;
+        formPositionSelect.positionType = dataList.positionType;
+        formPositionSelect.positionLevel = dataList.positionLevel;
+      }
+    }
+  }
+);
+
+function updateSelectType(val: string) {
+  const listLevel = dataLevel.value.find((e: any) => e.id === val);
+  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOps.value = levelOpsMain.value;
+}
+
+function close() {
+  modal.value = false;
+  editCheck.value = false;
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <form @submit.prevent="validateFormPositionEdit">
+        <DialogHeader
+          :tittle="`${
+            editCheck
+              ? 'แก้ไขข้อมูลตำแหน่งลูกจ้างประจำ'
+              : 'เพิ่มข้อมูลตำแหน่งลูกจ้างประจำ'
+          }`"
+          :close="close"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-12">
+              <q-input
+                ref="positionNameRef"
+                v-model="formPositionSelect.positionName"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="positionTypeRef"
+                :class="inputEdit(isReadonly)"
+                label="กลุ่มงาน"
+                v-model="formPositionSelect.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="[(val) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="positionLevelRef"
+                :class="inputEdit(isReadonly)"
+                label="ระดับชั้นงาน"
+                v-model="formPositionSelect.positionLevel"
+                :disable="formPositionSelect.positionType === ''"
+                :options="levelOps"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/01_metadataNew/components/position/01ListPosition.vue b/src/modules/01_metadataNew/components/position/01ListPosition.vue
index ce4df1e56..b82951a82 100644
--- a/src/modules/01_metadataNew/components/position/01ListPosition.vue
+++ b/src/modules/01_metadataNew/components/position/01ListPosition.vue
@@ -19,7 +19,7 @@ const levelOpsMain = ref<DataOption[]>([]);
 const dataLevel = ref<any>();
 const levelOps = ref<DataOption[]>([]);
 
-const isSpecial = ref<boolean>(false)
+const isSpecial = ref<boolean>(false);
 const formPositionSelect = reactive<FormPositionSelect>({
   positionId: "",
   posTypeId: "",
@@ -181,7 +181,7 @@ function copyDetiail(data: RowDetailPositions) {
  * @param data ข้อมูลตำแหน่ง
  */
 function editDetiail(data: RowDetailPositions) {
-  console.log(data)
+  console.log(data);
   formPositionSelect.positionId = data.id;
   formPositionSelect.posTypeId = data.posTypeId;
   formPositionSelect.positionName = data.positionName;
@@ -386,7 +386,7 @@ onMounted(() => {
               }}
             </div>
             <div v-else>
-              {{ col.value ? col.value:'-' }}
+              {{ col.value ? col.value : "-" }}
             </div>
           </q-td>
           <q-td auto-width>
diff --git a/src/modules/01_metadataNew/interface/request/position/index.ts b/src/modules/01_metadataNew/interface/request/position/index.ts
index 70a272cb9..098952d87 100644
--- a/src/modules/01_metadataNew/interface/request/position/index.ts
+++ b/src/modules/01_metadataNew/interface/request/position/index.ts
@@ -13,11 +13,18 @@ interface FormPositionSelectDialog {
   positionField: string;
   positionType: string;
   positionLevel: string;
-  positionExecutive: string|null;
+  positionExecutive: string | null;
   positionExecutiveField: string;
   positionArea: string;
 }
 
+interface FormPositionEmployeeSelectDialog {
+  positionId: string;
+  positionName: string;
+  positionType: string;
+  positionLevel: string;
+}
+
 interface FormPositionSelectRef {
   positionName: object | null;
   positionField: object | null;
@@ -28,6 +35,12 @@ interface FormPositionSelectRef {
   positionArea: object | null;
   [key: string]: any;
 }
+interface FormPositionEmployeeSelectRef {
+  positionName: object | null;
+  positionType: object | null;
+  positionLevel: object | null;
+  [key: string]: any;
+}
 interface FormExecutiveRef {
   posExecutiveName: object | null;
   posExecutivePriority: object | null;
@@ -86,17 +99,24 @@ interface RowDetailPositions {
 }
 
 interface RowListForm {
-  id:string
-  posExecutiveName: string
-  posExecutivePriority: number|null
+  id: string;
+  posExecutiveName: string;
+  posExecutivePriority: number | null;
 }
 
 export type {
-  Pagination, DataOption, FormPositionSelect, FormPositionSelectRef, OptionType, OptionLevel,
+  Pagination,
+  DataOption,
+  FormPositionSelect,
+  FormPositionSelectRef,
+  OptionType,
+  OptionLevel,
   OptionExecutive,
   ListMenu,
   RowDetailPositions,
   RowListForm,
   FormPositionSelectDialog,
-  FormExecutiveRef
+  FormExecutiveRef,
+  FormPositionEmployeeSelectDialog,
+  FormPositionEmployeeSelectRef,
 };
diff --git a/src/modules/01_metadataNew/router.ts b/src/modules/01_metadataNew/router.ts
index 50cb5bbc4..a3a31310f 100644
--- a/src/modules/01_metadataNew/router.ts
+++ b/src/modules/01_metadataNew/router.ts
@@ -10,6 +10,12 @@ const positionPage = () =>
   import("@/modules/01_metadataNew/views/position.vue");
 const positionLevelPage = () =>
   import("@/modules/01_metadataNew/components/position/03ListLevel.vue");
+const positionEmployeePage = () =>
+  import("@/modules/01_metadataNew/views/positionEmployee.vue");
+const positionEmployeeLevelPage = () =>
+  import(
+    "@/modules/01_metadataNew/components/position-employee/03ListLevel.vue"
+  );
 
 export default [
   {
@@ -68,7 +74,27 @@ export default [
     component: positionLevelPage,
     meta: {
       Auth: true,
-      Key: [7],
+      Key: [9],
+      Role: "metadata",
+    },
+  },
+  {
+    path: "/master-data/position-employee",
+    name: "masterPositionEmployee",
+    component: positionEmployeePage,
+    meta: {
+      Auth: true,
+      Key: [8],
+      Role: "metadata",
+    },
+  },
+  {
+    path: "/master-data/position-employee/level/:id",
+    name: "masterPositionEmployeeLevel",
+    component: positionEmployeeLevelPage,
+    meta: {
+      Auth: true,
+      Key: [9],
       Role: "metadata",
     },
   },
diff --git a/src/modules/01_metadataNew/stores/positionEmployeeStore.ts b/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
new file mode 100644
index 000000000..e3dea70ce
--- /dev/null
+++ b/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
@@ -0,0 +1,34 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type {
+  DataResponse,
+  DataRow,
+} from "../interface/response/position/ListType";
+import { useCounterMixin } from "@/stores/mixin";
+
+const { date2Thai } = useCounterMixin();
+
+export const usePositionEmployeeDataStore = defineStore(
+  "positionEmployeeStore",
+  () => {
+    const pathLocation = ref<string>("list_position");
+    const row = ref<DataRow[]>([]);
+    function save(data: DataResponse[], id: string) {
+      const list = data.map((e) => ({
+        ...e,
+        posTypes: undefined,
+        posTypeId: e.posTypes?.id,
+        posTypeName: e.posTypes?.posTypeName,
+        posTypeRank: e.posTypes?.posTypeRank,
+        createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+      })) satisfies DataRow[];
+      row.value = list.filter((e) => e.posTypeId === id);
+    }
+    return {
+      save,
+      row,
+      pathLocation,
+    };
+  }
+);
diff --git a/src/modules/01_metadataNew/views/position.vue b/src/modules/01_metadataNew/views/position.vue
index 0c2ce6698..0bc59bb19 100644
--- a/src/modules/01_metadataNew/views/position.vue
+++ b/src/modules/01_metadataNew/views/position.vue
@@ -20,7 +20,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">ข้อมูลตำแหน่ง</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลตำแหน่งข้าราชการฯ
+  </div>
 
   <q-card flat bordered>
     <q-tabs
diff --git a/src/modules/01_metadataNew/views/positionEmployee.vue b/src/modules/01_metadataNew/views/positionEmployee.vue
new file mode 100644
index 000000000..aff4e4000
--- /dev/null
+++ b/src/modules/01_metadataNew/views/positionEmployee.vue
@@ -0,0 +1,62 @@
+div
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import ListPosition from "@/modules/01_metadataNew/components/position-employee/01ListPosition.vue";
+import ListType from "@/modules/01_metadataNew/components/position-employee/02ListType.vue";
+import { usePositionEmployeeDataStore } from "../stores/positionEmployeeStore";
+// const store.pathLocation = ref<string>("list_position");
+const tabs = ref<Array<any>>([]);
+const store = usePositionEmployeeDataStore();
+
+onMounted(() => {
+  const tabsPerson = [
+    { label: "ตำแหน่ง", value: "list_position" },
+    { label: "รายการกลุ่มงาน", value: "list_type" },
+  ];
+  tabs.value = tabsPerson;
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลตำแหน่งลูกจ้างประจำ
+  </div>
+
+  <q-card flat bordered>
+    <q-tabs
+      dense
+      v-model="store.pathLocation"
+      align="left"
+      indicator-color="primary"
+      active-color="primary bg-teal-1"
+      inline-label
+      class="text-body2 text-grey-7"
+    >
+      <q-tab
+        v-for="tab in tabs"
+        :key="tab.value"
+        v-on:click="store.pathLocation = tab.value"
+        :label="tab.label"
+        :name="tab.value"
+        class="q-py-xs"
+      />
+    </q-tabs>
+    <q-separator />
+
+    <q-tab-panels v-model="store.pathLocation" animated>
+      <q-tab-panel name="list_position">
+        <ListPosition v-if="store.pathLocation == 'list_position'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_type">
+        <ListType v-if="store.pathLocation == 'list_type'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_executive">
+        <ListExecutive v-if="store.pathLocation == 'list_executive'" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index ba9554871..b35ff7074 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -329,10 +329,10 @@ watch(
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-4 col-md-3 q-pa-lg">
+      <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 q-pa-md">
         <q-card flat bordered>
           <q-card-section class="text-center">
-            <q-avatar size="82px">
+            <q-avatar size="100px">
               <img src="@/assets/avatar_user.jpg" />
             </q-avatar>
 
@@ -346,8 +346,8 @@ watch(
             </div>
           </q-card-section>
 
-          <q-card-section class="q-pa-lg">
-            <q-card bordered class="bg-grey-12">
+          <q-card-section class="q-px-md">
+            <q-card bordered class="bg-grey-13">
               <q-list>
                 <q-item>
                   <q-item-section>
@@ -371,7 +371,7 @@ watch(
 
                 <q-item>
                   <q-item-section>
-                    <q-item-label caption>ประเภท</q-item-label>
+                    <q-item-label caption>ประเภทตำแหน่ง</q-item-label>
                     <q-item-label>
                       {{
                         props.row.posType ? props.row.posType : "-"
@@ -381,7 +381,9 @@ watch(
                 </q-item>
                 <q-item>
                   <q-item-section>
-                    <q-item-label caption>ระดับชั้นงาน</q-item-label>
+                    <q-item-label caption
+                      >ระดับตำแหน่ง/ระดับชั้นงาน</q-item-label
+                    >
                     <q-item-label>
                       {{
                         props.row.posLevel ? props.row.posLevel : "-"
@@ -457,4 +459,8 @@ watch(
   width: 100%;
   height: 100%;
 }
+
+.bg-grey-13 {
+  background: #f1f2f4 !important;
+}
 </style>
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index 98a6feb57..699896726 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -27,7 +27,7 @@ const isShowFilter = ref<boolean>(false);
 const isShowBtnFilter = ref<boolean>(true);
 
 const labelOption = reactive({
-  type: "ข้าราชการทั้งหมด",
+  type: "ประเภททั้งหมด",
   posType: "ทั้งหมด",
   posLevel: "ทั้งหมด",
   retireYear: "",
@@ -170,7 +170,7 @@ function selectRetireYear(item: DataOption) {
 
 function clearSelect(t: string) {
   if (t === "type") {
-    labelOption.type = "ข้าราชการทั้งหมด";
+    labelOption.type = "ประเภททั้งหมด";
   } else if (t === "posType") {
     labelOption.posType = "ทั้งหมด";
   } else if (t === "posLevel") {
@@ -259,7 +259,7 @@ onMounted(async () => {
                   round
                   color="white"
                   icon="close"
-                  v-if="labelOption.type !== 'ข้าราชการทั้งหมด'"
+                  v-if="labelOption.type !== 'ประเภททั้งหมด'"
                   @click.stop.prevent="clearSelect('type')"
                 />
               </template>
@@ -285,7 +285,11 @@ onMounted(async () => {
               class="custom-btn"
             >
               <template v-slot:label>
-                {{ `ประเภทตำแหน่ง${labelOption.posType}` }}
+                {{
+                  labelOption.posType !== "ทั้งหมด"
+                    ? labelOption.posType
+                    : `ประเภทตำแหน่ง${labelOption.posType}`
+                }}
                 <q-btn
                   size="10px"
                   flat
@@ -318,7 +322,11 @@ onMounted(async () => {
               label-color="white"
             >
               <template v-slot:label>
-                {{ `ระดับตำแหน่ง${labelOption.posLevel}` }}
+                {{
+                  labelOption.posLevel !== "ทั้งหมด"
+                    ? labelOption.posLevel
+                    : `ระดับตำแหน่ง${labelOption.posLevel}`
+                }}
                 <q-btn
                   size="10px"
                   flat
diff --git a/src/modules/13_salary/router.ts b/src/modules/13_salary/router.ts
index 4cf164a0c..06937a91e 100644
--- a/src/modules/13_salary/router.ts
+++ b/src/modules/13_salary/router.ts
@@ -1,7 +1,11 @@
 const salaryChart = () => import("@/modules/13_salary/views/salaryChart.vue");
+const salaryEmployeeChart = () =>
+  import("@/modules/13_salary/views/salaryEmployeeChart.vue");
 const salaryRate = () => import("@/modules/13_salary/views/salaryRate.vue");
 const salaryRound = () => import("@/modules/13_salary/views/salaryRound.vue");
 const salaryLists = () => import("@/modules/13_salary/views/salaryLists.vue");
+const salaryEmployeeLists = () =>
+  import("@/modules/13_salary/views/salaryEmployeeLists.vue");
 
 export default [
   {
@@ -14,6 +18,16 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary-employee",
+    name: "salaryEmployeeChart",
+    component: salaryEmployeeChart,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "salary",
+    },
+  },
   {
     path: "/salary/rate/:id",
     name: "salaryRate",
@@ -44,4 +58,14 @@ export default [
       Role: "salary",
     },
   },
+  {
+    path: "/salary-employee/lists",
+    name: "salaryEmployeeLists",
+    component: salaryEmployeeLists,
+    meta: {
+      Auth: true,
+      Key: [1.4],
+      Role: "salary",
+    },
+  },
 ];
diff --git a/src/modules/13_salary/views/salaryEmployeeChart.vue b/src/modules/13_salary/views/salaryEmployeeChart.vue
new file mode 100644
index 000000000..31dbc5a64
--- /dev/null
+++ b/src/modules/13_salary/views/salaryEmployeeChart.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>ผังบัญชีลูกจ้างประจำ</div>
+</template>
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
new file mode 100644
index 000000000..c9b5c17fc
--- /dev/null
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -0,0 +1,412 @@
+<script setup lang="ts">
+import { onMounted, ref, computed, nextTick } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
+import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
+/** importType*/
+import type {
+  DataOption,
+  DataOptionShort,
+} from "@/modules/13_salary/interface/index/Main";
+import type {
+  DataRound,
+  DataAgency,
+  DataPeriodLatest,
+} from "@/modules/13_salary/interface/response/SalaryList";
+
+/** importComponents*/
+import TabGroup from "@/modules/13_salary/components/SalaryLists/TabMain.vue";
+
+/** importStore*/
+import { useSalaryListSDataStore } from "@/modules/13_salary/store/SalaryListsStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const store = useSalaryListSDataStore();
+const $q = useQuasar();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+/** ตัวแปร*/
+const roundFilter = ref<any>();
+const roundOptions = ref<DataOptionShort[]>([]);
+const agencyFilter = ref<string>("");
+const agencyOptions = ref<DataOption[]>();
+const snapFilter = ref<string>("");
+const snapOptions = ref<DataOption[]>();
+const periodLatest = ref<DataPeriodLatest>();
+
+const isLoad = ref<boolean>(false);
+
+/** ตัวแปร select*/
+const page = ref<number>(1);
+const pageSize = ref<number>(50);
+const lastPage = ref<number>(0);
+const loading = ref(false);
+const nextPage = ref<number>(1);
+
+/**function เรียกข้อมูลรอบการขึ้นเงินเดือน*/
+function getRound() {
+  showLoader();
+  http
+    .get(
+      config.API.salaryPeriod() +
+        `?page=${page.value}&pageSize=${pageSize.value}&keyword=&year=0`
+    )
+    .then(async (res) => {
+      const data = res.data.result.data;
+      lastPage.value = Math.ceil(res.data.result.total / pageSize.value);
+
+      const optionMain = await data.map((x: DataRound) => ({
+        id: x.id,
+        revisionId: x.revisionId,
+        shortCode: x.period,
+        isClose: x.isClose,
+        name:
+          (x.period === "OCT"
+            ? "รอบตุลาคม "
+            : x.period === "SPECIAL"
+            ? "รอบพิเศษ "
+            : "รอบเมษายน ") +
+          (Number(x.year) + 543),
+      }));
+      roundOptions.value.push(...optionMain);
+
+      roundFilter.value = await (roundOptions.value
+        ? roundOptions.value[0]
+        : "");
+
+      store.roundMainCode = roundFilter.value.shortCode;
+      store.isClosedRound = roundFilter.value.isClose;
+
+      await getSnap(roundFilter.value.shortCode);
+      await getAgency(roundFilter.value.revisionId);
+      await getAgencyPosition(roundFilter.value.revisionId);
+
+      //   if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+      //     await fetchSalalyPeriod(
+      //       agencyFilter.value,
+      //       roundFilter.value.id,
+      //       snapFilter.value
+      //     );
+      //   }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เรียกรอบ*/
+function getSnap(code: string) {
+  snapOptions.value =
+    code == "OCT"
+      ? [
+          {
+            id: "SNAP1",
+            name: "1 กันยายน",
+          },
+          {
+            id: "SNAP2",
+            name: "1 ตุลาคม",
+          },
+        ]
+      : code === "APR"
+      ? [
+          {
+            id: "SNAP1",
+            name: "1 มีนาคม",
+          },
+          {
+            id: "SNAP2",
+            name: "1 เมษายน",
+          },
+        ]
+      : [
+          {
+            id: "SNAP1",
+            name: "พิเศษ 1",
+          },
+          {
+            id: "SNAP2",
+            name: "พิเศษ 2",
+          },
+        ];
+  snapFilter.value = snapOptions.value[0].id;
+}
+
+/**
+ * function เรียกข้อมูลหน่ยวงาน
+ * @param id  revisionId
+ */
+async function getAgency(id: string) {
+  id &&
+    (await http
+      .get(config.API.activeOrganizationRootById(id))
+      .then(async (res) => {
+        const data = res.data.result;
+        agencyOptions.value = await [
+          {
+            id: "ALL",
+            name: "ทั้งหมด",
+          },
+        ].concat(
+          data.map((x: DataAgency) => ({
+            id: x.id,
+            name: x.orgRootName,
+          }))
+        );
+        // agencyFilter.value = store.rootId;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      }));
+}
+
+/**
+ * function เรียกข้อมูลหน่ยวงานปจุบัน
+ * @param id  revisionId
+ */
+async function getAgencyPosition(id: string) {
+  if (id) {
+    await http
+      .get(config.API.keycloakPositionByid(id))
+      .then(async (res) => {
+        const data = await res.data.result;
+
+        store.rootId = data.rootId;
+        const position = agencyOptions.value?.find(
+          (e: DataOption) => e.id === data.rootId
+        );
+
+        agencyFilter.value = position ? position.id : "";
+
+        if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+          fetchSalalyPeriod(
+            agencyFilter.value,
+            roundFilter.value.id,
+            snapFilter.value
+          );
+        }
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  } else agencyFilter.value = "";
+}
+
+/**
+ *
+ * @param rootId id หน่วยงาน
+ * @param periodId id รอบการขึ้นเงินเดือน
+ * @param snap id รอบ
+ */
+function fetchSalalyPeriod(rootId: string, periodId: string, snap: string) {
+  showLoader();
+  isLoad.value = false;
+  const body = {
+    rootId: rootId,
+    salaryPeriodId: periodId,
+    snapshot: snap,
+  };
+
+  http
+    .post(config.API.salaryListPeriodLatest, body)
+    .then(async (res) => {
+      const data = res.data.result;
+      if (Object.values(data).includes(null)) {
+        isLoad.value = false;
+      } else {
+        data && store.fetchPeriodLatest(data, store.tabGroup);
+        periodLatest.value = data;
+        isLoad.value = true;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 800);
+    });
+}
+
+/** function เปลี่ยนรอบการขั้นเงินเดือน*/
+async function onChangeRound() {
+  // เก็บสถานะการปิดรอบในตัวแปร isClosedRound เพื่อใช้ในการเช็ค
+  store.isClosedRound = roundFilter.value.isClose;
+
+  await getSnap(roundFilter.value.shortCode);
+  await getAgency(roundFilter.value.revisionId);
+  await getAgencyPosition(roundFilter.value.revisionId);
+  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+    // await fetchSalalyPeriod(
+    //   agencyFilter.value,
+    //   roundFilter.value.id,
+    //   snapFilter.value
+    // );
+    store.tabType = "PENDING";
+    store.roundMainCode = roundFilter.value.shortCode;
+  } else {
+    isLoad.value = false;
+  }
+}
+
+/** function เปลี่ยนรอบ*/
+async function onChangeSnap() {
+  if (agencyFilter.value && roundFilter.value.id && snapFilter.value) {
+    await fetchSalalyPeriod(
+      agencyFilter.value,
+      roundFilter.value.id,
+      snapFilter.value
+    );
+  }
+}
+
+/** function เปลี่ยนหน่วยงาน*/
+async function onChangeAgency() {
+  store.rootId = agencyFilter.value;
+
+  if (
+    agencyFilter.value !== "ALL" &&
+    roundFilter.value.id &&
+    snapFilter.value
+  ) {
+    await fetchSalalyPeriod(
+      agencyFilter.value,
+      roundFilter.value.id,
+      snapFilter.value
+    );
+  }
+}
+
+/** function onScrollSelect รอบการขึ้นเงินเดือน*/
+function onScroll({ to, ref }: { to: number; ref: any }) {
+  const lastIndex = roundOptions.value.length - 1;
+
+  if (
+    loading.value !== true &&
+    nextPage.value < lastPage.value &&
+    to === lastIndex
+  ) {
+    loading.value = true;
+
+    setTimeout(() => {
+      nextPage.value++;
+      page.value = nextPage.value;
+      getRound();
+      nextTick(() => {
+        ref.refresh();
+        loading.value = false;
+      });
+    }, 500);
+  }
+}
+
+onMounted(async () => {
+  await getRound();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      รายการเลื่อนเงินเดือนลูกจ้างประจำ
+    </div>
+    <q-space />
+
+    <q-select
+      v-model="roundFilter"
+      label="รอบการขึ้นเงินเดือน"
+      dense
+      outlined
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="roundOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+      @update:model-value="onChangeRound"
+      :loading="loading"
+      @virtual-scroll="onScroll"
+    >
+      <template v-slot:option="scope">
+        <q-item v-bind="scope.itemProps">
+          <q-item-section>
+            <q-item-label>{{ scope.opt.name }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-select>
+    <q-select
+      class="q-ml-xs"
+      v-model="snapFilter"
+      label="รอบ"
+      dense
+      outlined
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="snapOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+      @update:model-value="onChangeSnap"
+    />
+    <q-select
+      class="q-ml-xs"
+      v-model="agencyFilter"
+      label="หน่วยงาน"
+      dense
+      outlined
+      emit-value
+      map-options
+      option-label="name"
+      option-value="id"
+      :options="agencyOptions"
+      lazy-rules
+      hide-bottom-space
+      bg-color="white"
+      @update:model-value="onChangeAgency"
+    />
+  </div>
+
+  <q-card flat bordered>
+    <div v-if="agencyFilter !== 'ALL'">
+      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <q-card v-else class="q-pa-sm">
+        <div class="q-pa-sm">
+          <q-banner inline-actions rounded class="bg-grey-1 text-center">
+            ไม่มีข้อมูล
+          </q-banner>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <PageDashBoard />
+    </div>
+  </q-card>
+
+  <q-card
+    v-if="isLoad && !store.isClosedRound"
+    flat
+    bordered
+    class="row col-12 q-mt-xs"
+  >
+    <ProcessStep />
+  </q-card>
+
+  <!-- </q-card> -->
+</template>
+
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  max-width: 200px
+</style>
diff --git a/src/modules/13_salary/views/salaryLists.vue b/src/modules/13_salary/views/salaryLists.vue
index aa126ca50..40bd68f40 100644
--- a/src/modules/13_salary/views/salaryLists.vue
+++ b/src/modules/13_salary/views/salaryLists.vue
@@ -4,7 +4,7 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import ProcessStep from "@/modules/13_salary/components/SalaryLists/ProcessStep.vue";
-import PageDashBoard from '@/modules/13_salary/components/SalaryLists/Dashboard.vue'
+import PageDashBoard from "@/modules/13_salary/components/SalaryLists/Dashboard.vue";
 /** importType*/
 import type {
   DataOption,
@@ -271,7 +271,11 @@ async function onChangeSnap() {
 async function onChangeAgency() {
   store.rootId = agencyFilter.value;
 
-  if (agencyFilter.value !== 'ALL' && roundFilter.value.id && snapFilter.value) {
+  if (
+    agencyFilter.value !== "ALL" &&
+    roundFilter.value.id &&
+    snapFilter.value
+  ) {
     await fetchSalalyPeriod(
       agencyFilter.value,
       roundFilter.value.id,
@@ -311,7 +315,7 @@ onMounted(async () => {
 <template>
   <div class="row items-center">
     <div class="toptitle text-dark row items-center q-py-xs">
-      รายการเลื่อนเงินเดือนข้าราชการ
+      รายการเลื่อนเงินเดือนข้าราชการฯ
     </div>
     <q-space />
 
@@ -394,20 +398,18 @@ onMounted(async () => {
     <q-separator /> -->
   <q-card flat bordered>
     <div v-if="agencyFilter !== 'ALL'">
-
-
-    <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
-    <q-card v-else class="q-pa-sm">
-      <div class="q-pa-sm">
-        <q-banner inline-actions rounded class="bg-grey-1 text-center">
-          ไม่มีข้อมูล
-        </q-banner>
-      </div>
-    </q-card>
-  </div>
-  <div v-else>
-    <PageDashBoard/>
-  </div>
+      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <q-card v-else class="q-pa-sm">
+        <div class="q-pa-sm">
+          <q-banner inline-actions rounded class="bg-grey-1 text-center">
+            ไม่มีข้อมูล
+          </q-banner>
+        </div>
+      </q-card>
+    </div>
+    <div v-else>
+      <PageDashBoard />
+    </div>
   </q-card>
 
   <q-card

From f96643cc6c1aa95d09635695f19fa002a2028765 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 11 Mar 2024 17:48:15 +0700
Subject: [PATCH 4/6] =?UTF-8?q?=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=20=3D>=20=E0=B8=95=E0=B8=B3?=
 =?UTF-8?q?=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B9=80=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7=E0=B8=AD=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/salaryNew/Salary.vue           |   2 +-
 .../detail/Salary/01_PositionSalary.vue       | 726 +++++++++++++++++-
 .../Salary/01_PositionSalaryHistory.vue       | 227 ++++++
 .../04_registryNew/interface/index/Main.ts    |   6 +-
 .../04_registryNew/interface/index/salary.ts  |  12 +
 .../interface/request/Salary.ts               |  19 +
 .../04_registryNew/stores/DetailMain.ts       |   2 +-
 src/modules/04_registryNew/stores/salary.ts   | 187 +++++
 8 files changed, 1176 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
 create mode 100644 src/modules/04_registryNew/interface/index/salary.ts
 create mode 100644 src/modules/04_registryNew/interface/request/Salary.ts
 create mode 100644 src/modules/04_registryNew/stores/salary.ts

diff --git a/src/modules/04_registry/components/salaryNew/Salary.vue b/src/modules/04_registry/components/salaryNew/Salary.vue
index 264cac96a..bc3b5ca37 100644
--- a/src/modules/04_registry/components/salaryNew/Salary.vue
+++ b/src/modules/04_registry/components/salaryNew/Salary.vue
@@ -671,7 +671,7 @@
       </q-form>
     </q-card>
   </q-dialog>
-  
+
   <HistoryTable
     :rows="rowsHistory"
     :columns="columnsHistory"
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index 15b2df816..cbbdc460b 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -1,6 +1,728 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
+import type { ObjectSalaryRef } from "@/modules/04_registryNew/interface/index/salary";
+import type { FormSalaryNew } from "@/modules/04_registryNew/interface/request/Salary";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHistory from "@/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/04_registryNew/stores/salary";
+
+const $q = useQuasar();
+const store = useSalaryDataStore();
+const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    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: "postionTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "postionTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelName",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "postionTypeName",
+  "positionLevelName",
+  "salaryRef",
+  "refCommandNo",
+]);
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
+const maxPage = ref<number>(1);
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const rows = ref<any>([
+  {
+    id: "1",
+  },
+  {
+    id: "2",
+  },
+  {
+    id: "3",
+  },
+]);
+
+const formDataSalary = reactive<FormSalaryNew>({
+  date: null,
+  posNo: "",
+  templatePos: "",
+  position: "",
+  positionLineName: "",
+  typePosition: "",
+  levelPosition: "",
+  positionPathSideName: "",
+  positionExecutiveName: "",
+  salaryCompensation: null,
+  salary: null,
+  salaryPos: null,
+  refCommandNo: "",
+  templateDoc: "",
+  doc: "",
+});
+
+/** ตัวแปร ref สำหรับแสดง validate */
+const dateRef = ref<Object | null>(null);
+const posNoRef = ref<Object | null>(null);
+const positionRef = ref<Object | null>(null);
+const typePositionRef = ref<Object | null>(null);
+const levelPositionRef = ref<Object | null>(null);
+const salaryRef = ref<Object | null>(null);
+const docRef = ref<Object | null>(null);
+
+const ObjectRef: ObjectSalaryRef = {
+  date: dateRef,
+  posNo: posNoRef,
+  position: positionRef,
+  typePosition: typePositionRef,
+  levelPosition: levelPositionRef,
+  salary: salaryRef,
+  doc: docRef,
+};
+
+const modalDialogSalary = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+
+const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const positionLineOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const posTypeOptions = ref<DataOption2[]>(store.optionTemplatePos);
+const posLevelOption = ref<DataOption2[]>(store.optionTemplatePos);
+const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
+
+function onClickOpenDialog(type: string) {
+  if (type === "ADD") {
+    isStatusEdit.value = false;
+  } else {
+    isStatusEdit.value = true;
+  }
+  modalDialogSalary.value = true;
+}
+function onClickCcloseDialog() {
+  modalDialogSalary.value = false;
+}
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+  switch (filtername) {
+    case "pos":
+      update(() => {
+        posNoOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "positionLineName":
+      update(() => {
+        positionLineOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posType":
+      update(() => {
+        posTypeOptions.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "posLevel":
+      update(() => {
+        posLevelOption.value = store.optionTemplatePos.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "doc":
+      update(() => {
+        docOption.value = store.optionTemplateDoc.filter(
+          (v: DataOption2) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+function updatePos(val: string) {
+  formDataSalary.position = val;
+}
+
+function updateDoc(val: string) {
+  formDataSalary.doc = val;
+}
+
+function onSubmit() {
+  const hasError = [];
+  for (const key in ObjectRef) {
+    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
+      const property = ObjectRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm($q, () => {
+      onClickCcloseDialog();
+    });
+  }
+}
+
+const modalHistory = ref<boolean>(false);
+function ocClikcHistory() {
+  modalHistory.value = true;
+}
+</script>
 <template>
-  <div>ตำแหน่ง/เงินเดือน</div>
+  <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      ตำแหน่งเงินเดือน
+    </div>
+  </div>
+
+  <q-toolbar style="padding: 0px" class="text-primary">
+    <q-btn flat round dense icon="add" @click="onClickOpenDialog('ADD')">
+      <q-tooltip>เพิ่ม</q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-input
+      dense
+      outlined
+      v-model="formFilter.keyword"
+      label="ค้นหา"
+      class="q-mr-sm"
+    >
+      <template v-slot:append>
+        <q-icon name="search" />
+      </template>
+    </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"
+    />
+  </q-toolbar>
+  <d-table
+    ref="table"
+    row-key="id"
+    flat
+    bordered
+    dense
+    :columns="columns"
+    :rows="rows"
+    :paging="true"
+    v-model:pagination="pagination"
+    :rows-per-page-options="[20, 50, 100]"
+    :visible-columns="visibleColumns"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width />
+        <q-th auto-width />
+        <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 auto-width>
+          <q-btn
+            dense
+            size="12px"
+            flat
+            round
+            :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+            :disable="props.rowIndex + 1 == 1"
+            icon="mdi-arrow-up-bold"
+          >
+            <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+          </q-btn>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            dense
+            size="12px"
+            flat
+            round
+            :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+            :disable="rows.length == props.rowIndex + 1"
+            icon="mdi-arrow-down-bold"
+          >
+            <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+          </q-btn>
+        </q-td>
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="onClickOpenDialog('EDIT')"
+        >
+          <template>
+            {{ col.value ? col.value : "-" }}
+          </template>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="info"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-history"
+            @click="ocClikcHistory"
+          >
+            <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="formFilter.page"
+        active-color="primary"
+        color="dark"
+        :max="Number(maxPage)"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="modalDialogSalary" persistent full-width>
+    <q-card>
+      <form @submit.prevent.stop="onSubmit">
+        <DialogHeader
+          :tittle="
+            isStatusEdit ? 'แก้ไขตำแหน่งเงินเดือน' : 'เพิ่มตำแหน่งเงินเดือน'
+          "
+          :close="onClickCcloseDialog"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-12">
+              <q-card flat bordered class="fit q-pa-sm">
+                <div class="row col-12 q-col-gutter-xs">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-model="formDataSalary.date"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          ref="dateRef"
+                          outlined
+                          dense
+                          borderless
+                          :model-value="date2Thai(formDataSalary.date)"
+                          :rules="[
+                            (val: string) =>
+                              !!val ||
+                              `${'กรุณาเลือก วัน/เดือน/ปี'}`,
+                          ]"
+                          :label="`${'วัน/เดือน/ปี'}`"
+                          hide-bottom-space
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="event" class="cursor-pointer">
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      ref="posNoRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.posNo"
+                      hide-bottom-space
+                      :label="`${'เลขที่ตำแหน่ง'}`"
+                      :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                    >
+                    </q-input>
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12 q-mt-lg">
+                    <q-select
+                      ref="templatePosRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.templatePos"
+                      :label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
+                      option-label="name"
+                      :options="posNoOptions"
+                      option-value="name"
+                      hide-bottom-space
+                      emit-value
+                      use-input
+                      input-debounce="0"
+                      @update:modelValue="updatePos"
+                      @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
+                        )"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12">
+                    <q-input
+                      ref="positionRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.position"
+                      :label="`${'ตำแหน่ง'}`"
+                      type="textarea"
+                      hide-bottom-space
+                      :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่ง'}`]"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-select
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.positionLineName"
+                      :label="`${'สายงาน'}`"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="positionLineOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLineName'
+                        )"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-select
+                      ref="typePositionRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.typePosition"
+                      :label="`${'ตำแหน่งประเภท'}`"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posTypeOptions"
+                      option-value="id"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                      @filter="(inputValue: any,
+                        doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
+                        )"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-3">
+                    <q-select
+                      ref="levelPositionRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.levelPosition"
+                      :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
+                      :label="`${'ระดับ'}`"
+                      emit-value
+                      map-options
+                      option-label="name"
+                      :options="posLevelOption"
+                      option-value="name"
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
+                          )"
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-3">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      v-model="formDataSalary.positionPathSideName"
+                      hide-bottom-space
+                      :label="`${'ด้าน/สาขา'}`"
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.positionExecutiveName"
+                      hide-bottom-space
+                      :label="`${'ตำแหน่งทางการบริหาร'}`"
+                    >
+                    </q-input>
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-4">
+                    <q-input
+                      ref="salaryRef"
+                      dense
+                      outlined
+                      v-model="formDataSalary.salary"
+                      label="เงินเดือน"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-4">
+                    <q-input
+                      ref="amountRef"
+                      dense
+                      outlined
+                      v-model="formDataSalary.salaryPos"
+                      label="เงินประจำตำแหน่ง"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-4">
+                    <q-input
+                      ref="amountRef"
+                      dense
+                      outlined
+                      v-model="formDataSalary.salaryCompensation"
+                      label="เงินค่าตอบแทนรายเดือน"
+                      mask="###,###,###,###"
+                      reverse-fill-mask
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+
+                  <div class="col-xs-6 col-sm-6 col-md-12">
+                    <q-input
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.refCommandNo"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                      mask="#####################"
+                    >
+                      <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]" -->
+                    </q-input>
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12">
+                    <q-select
+                      ref="templateDocRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.templateDoc"
+                      :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                      option-label="name"
+                      :options="docOption"
+                      option-value="name"
+                      emit-value
+                      hide-bottom-space
+                      use-input
+                      input-debounce="0"
+                      @update:modelValue="updateDoc"
+                      @filter="(inputValue: any,
+                          doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
+                          )"
+                    />
+                  </div>
+
+                  <div class="col-xs-12 col-sm-12 col-md-12">
+                    <q-input
+                      ref="docRef"
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      v-model="formDataSalary.doc"
+                      :label="`${'เอกสารอ้างอิง'}`"
+                      type="textarea"
+                      hide-bottom-space
+                      :rules="[(val: number) => !!val  || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-section align="right">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-section>
+      </form>
+    </q-card>
+  </q-dialog>
+
+  <DialogHistory v-model:modal="modalHistory" />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
new file mode 100644
index 000000000..eb0c309a1
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วัน เดือน ปี",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "เงินเดือน",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionSalaryAmount",
+    align: "left",
+    label: "เงินประจำตำแหน่ง",
+    sortable: true,
+    field: "positionSalaryAmount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "mouthSalaryAmount",
+    align: "left",
+    label: "เงินค่าตอบแทนรายเดือน",
+    sortable: true,
+    field: "mouthSalaryAmount",
+    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: "postionTypeName",
+    align: "left",
+    label: "ตำแหน่งประเภท",
+    sortable: true,
+    field: "postionTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionLevelName",
+    align: "left",
+    label: "ระดับ",
+    sortable: true,
+    field: "positionLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "salaryRef",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "salaryRef",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "date",
+  "amount",
+  "positionSalaryAmount",
+  "mouthSalaryAmount",
+  "posNo",
+  "postionTypeName",
+  "positionLevelName",
+  "salaryRef",
+  "refCommandNo",
+]);
+const rows = ref<any>([]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const filter = ref<string>("");
+
+function closeDialog() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent full-width>
+    <q-card>
+      <DialogHeader
+        :tittle="'ประวัติแก้ไขตำแหน่ง/เงินเดือน'"
+        :close="closeDialog"
+      />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <q-toolbar style="padding: 0px" class="text-primary">
+          <q-space />
+          <q-input
+            dense
+            outlined
+            v-model="filter"
+            label="ค้นหา"
+            class="q-mr-sm"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </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"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          row-key="id"
+          flat
+          bordered
+          dense
+          :filter="filter"
+          :columns="columns"
+          :rows="rows"
+          :paging="true"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[20, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th auto-width />
+              <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">
+                <template>
+                  {{ col.value ? col.value : "-" }}
+                </template>
+              </q-td>
+            </q-tr>
+          </template>
+          <!-- <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="formFilter.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template> -->
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/interface/index/Main.ts b/src/modules/04_registryNew/interface/index/Main.ts
index 46133c9b9..5930b43ac 100644
--- a/src/modules/04_registryNew/interface/index/Main.ts
+++ b/src/modules/04_registryNew/interface/index/Main.ts
@@ -6,5 +6,9 @@ interface DataOption {
   id: string;
   name: string;
 }
+interface DataOption2 {
+  id: number;
+  name: string;
+}
 
-export type { Pagination, DataOption };
+export type { Pagination, DataOption, DataOption2 };
diff --git a/src/modules/04_registryNew/interface/index/salary.ts b/src/modules/04_registryNew/interface/index/salary.ts
new file mode 100644
index 000000000..b702cde70
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/salary.ts
@@ -0,0 +1,12 @@
+interface ObjectSalaryRef {
+  date: object | null;
+  posNo: object | null;
+  position: object | null;
+  typePosition: object | null;
+  levelPosition: object | null;
+  salary: object | null;
+  doc: object | null;
+
+  [key: string]: any;
+}
+export type { ObjectSalaryRef };
diff --git a/src/modules/04_registryNew/interface/request/Salary.ts b/src/modules/04_registryNew/interface/request/Salary.ts
new file mode 100644
index 000000000..fdaea5559
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Salary.ts
@@ -0,0 +1,19 @@
+interface FormSalaryNew {
+  date: Date | null;
+  posNo: string;
+  templatePos: string;
+  position: string;
+  positionLineName: string;
+  typePosition: string;
+  levelPosition: string;
+  positionPathSideName: string;
+  positionExecutiveName: string;
+  salary: number | null;
+  salaryPos: number | null;
+  salaryCompensation: number | null;
+  refCommandNo: string;
+  templateDoc: string;
+  doc: string;
+}
+
+export type { FormSalaryNew };
diff --git a/src/modules/04_registryNew/stores/DetailMain.ts b/src/modules/04_registryNew/stores/DetailMain.ts
index fec5f95ce..8ec35bba8 100644
--- a/src/modules/04_registryNew/stores/DetailMain.ts
+++ b/src/modules/04_registryNew/stores/DetailMain.ts
@@ -5,7 +5,7 @@ import { ref } from "vue";
 export const useRegistryDetailNewDataStore = defineStore(
   "registryNewDetail",
   () => {
-    const tabMain = ref<string>("1");
+    const tabMain = ref<string>("3");
     return { tabMain };
   }
 );
diff --git a/src/modules/04_registryNew/stores/salary.ts b/src/modules/04_registryNew/stores/salary.ts
new file mode 100644
index 000000000..2220e6692
--- /dev/null
+++ b/src/modules/04_registryNew/stores/salary.ts
@@ -0,0 +1,187 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
+
+export const useSalaryDataStore = defineStore("salatyDataStore", () => {
+  const optionTemplatePos = ref<DataOption2[]>([
+    {
+      id: 1,
+      name: "เลื่อนเงินเดือน",
+    },
+    {
+      id: 2,
+      name: "เลื่อนเงินเดือน (ดีเด่น)",
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+    },
+
+    {
+      id: 4,
+      name: "ปรับเงินเดือน",
+    },
+
+    {
+      id: 5,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+    },
+    {
+      id: 6,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+    },
+    {
+      id: 7,
+      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+    },
+    {
+      id: 8,
+      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+    },
+    {
+      id: 9,
+      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 10,
+      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 11,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "โปรดเกล้าฯ {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 13,
+      name: "ช่วยราชการที่{หน่วยงานและรายละเอียดต่างๆ}",
+    },
+
+    {
+      id: 14,
+      name: "ปฏิบัติหน้าที่ในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+
+    {
+      id: 15,
+      name: "รักษาการในตำแหน่ง{ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+    },
+    {
+      id: 16,
+      name: "พ้นจากการทดลองปฏิบัติหน้าที่ราชการ",
+    },
+
+    {
+      id: 17,
+      name: "งดเลื่อนขั้นเงินเดือน",
+    },
+    {
+      id: 18,
+      name: "แก้ไขคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 19,
+      name: "ยกเลิกคำสั่งเลื่อนขั้นเงินเดือน {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 20,
+      name: "กลับไปปฏิบัติงานทางต้นสังกัดเดิม",
+    },
+    {
+      id: 21,
+      name: "โปรดเกล้าฯ แต่งตั้งให้ดำรงตำแหน่ง{รายละเอียดของตำแหน่งและหน่วยงาน}",
+    },
+  ]);
+
+  const optionTemplateDoc = ref<DataOption2[]>([
+    {
+      id: 1,
+      name: "บรรจุและแต่งตั้งผู้สอบแข่งขันได้ คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 2,
+      name: "ปรับเงินเดือนตาม{รายละเอียดของบัญชี เช่นชื่อ ฉบับที่ ปี พ.ศ.}",
+    },
+    {
+      id: 3,
+      name: "เลื่อนขั้นเงินเดือนตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 4,
+      name: "เลื่อนขั้นเงินเดือน คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 5,
+      name: "เลื่อนขั้นเงินเดือน (1 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 6,
+      name: "เลื่อนขั้นเงินเดือน (1.5 ขั้น) คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 7,
+      name: "แต่งตั้งตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 8,
+      name: "คำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 9,
+      name: "ปรับเงินเดือนตาม{รายละเอียดข้อมูล}",
+    },
+    {
+      id: 10,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม} ตามคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 11,
+      name: "เลื่อนระดับและแต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 12,
+      name: "แต่งตั้งดำรงตำแหน่ง{ชื่อตำแหน่ง} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 13,
+      name: "แต่งตั้งคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 14,
+      name: "เลื่อนและแต่งตั้งโดยการสอบคัดเลือก คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 15,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งของ{รายละเอียดของตำแหน่งและหน่วยงาน} คำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 16,
+      name: "ย้ายตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+
+    {
+      id: 17,
+      name: "แต่งตั้งข้าราชการให้ดำรงตำแหน่งตามคำสั่ง{หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+    },
+    {
+      id: 18,
+      name: "ปรับอัตราเงินเดือนตามพระราชกฤษฎีกาการปรับอัตราเงินเดือนของข้าราชการ พ.ศ. (.............)",
+    },
+  ]);
+
+  return {
+    optionTemplatePos,
+    optionTemplateDoc,
+  };
+});

From 0ef521ddb04fe85690946dd4e95accd8d0f98a2d Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 11 Mar 2024 17:59:36 +0700
Subject: [PATCH 5/6] fix layout registry

---
 src/modules/04_registryNew/components/TableView.vue      | 2 +-
 src/modules/04_registryNew/components/detail/TabMain.vue | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index b35ff7074..f01b19854 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -329,7 +329,7 @@ watch(
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2 q-pa-md">
+      <div class="col-xs-12 col-sm-4 col-md-3 q-pa-md">
         <q-card flat bordered>
           <q-card-section class="text-center">
             <q-avatar size="100px">
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
index 17bca957e..e6b174f26 100644
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@@ -25,17 +25,17 @@ const itemsTab = ref<any>([
   {
     name: "3",
     icon: "mdi-cash",
-    label: "ข้อมูลเงินเดือน/ค่าจ้าง",
+    label: "เงินเดือน/ค่าจ้าง",
   },
   {
     name: "4",
     icon: "mdi-medal",
-    label: "ข้อมูลผลงานและเครื่องราชฯ",
+    label: "ข้อมูลผลงาน",
   },
   {
     name: "5",
     icon: "mdi-bookmark",
-    label: "เอกสารหลักฐานและอื่นๆ",
+    label: "ข้อมูลอื่นๆ",
   },
 ]);
 
@@ -64,6 +64,7 @@ const splitterModel = ref<number>(12);
         vertical
         transition-prev="jump-up"
         transition-next="jump-up"
+        class="q-pa-md"
       >
         <q-tab-panel
           v-for="(tab, index) in itemsTab"

From 389045dcfe5b1380f26e627bb726f7476f8d2884 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Mon, 11 Mar 2024 18:05:52 +0700
Subject: [PATCH 6/6] =?UTF-8?q?=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:=20=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AA=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B8=95=E0=B8=B1=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/PersonalInformation/01_Profile.vue | 603 +++++++++++++++++-
 1 file changed, 601 insertions(+), 2 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 3e136d8d4..761a2305c 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -1,6 +1,605 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+
+import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import type {
+  Information,
+  DataOption,
+} from "@/modules/04_registry/components/profileType";
+
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const profileStore = useProfileDataStore();
+const { showLoader, hideLoader, date2Thai, messageError } = mixin;
+
+const modal = ref<boolean>(false);
+const myForm = ref<any>();
+
+const Ops = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+const OpsFilter = ref<InformationOps>({
+  prefixOps: [],
+  prefixOldOps: [],
+  genderOps: [],
+  bloodOps: [],
+  statusOps: [],
+  religionOps: [],
+  employeeClassOps: [
+    { id: "perm", name: "ลูกจ้างประจำ" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
+  ],
+  employeeTypeOps: [
+    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+  ],
+});
+
+// mock data
+const resultData = ref({
+  citizenId: "3101502080439",
+  prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
+  prefix: "นางสาว",
+  firstName: "อรัญญาสาร",
+  lastName: "พรไชยะสิทธฺ์",
+  birthDate: new Date("1968-11-24T00:00:00"),
+  age: "55 ปี 3 เดือน 16 วัน",
+  genderId: "e2693577-6633-499b-9f0a-fec0bff0be6b",
+  gender: "หญิง",
+  relationshipId: null,
+  bloodGroupId: null,
+  nationality: "ไทย",
+  race: "ไทย",
+  religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
+  telephoneNumber: null,
+  profileType: "officer",
+  employeeType: null,
+  employeeClass: null,
+  changeName: true,
+  isVerified: true,
+  isSendVerified: false,
+});
+
+const dataLabel = {
+  citizenId: "เลขบัตรประจำตัวประชาชน",
+  name: "ชื่อ - สกุล",
+  birthDate: "วัน/เดือน/ปีเกิด",
+  age: "อายุ",
+  gender: "เพศ",
+  relationship: "สถานภาพ",
+  nationality: "สัญชาติ",
+  race: "เชื้อชาติ",
+  religion: "ศาสนา",
+  bloodGroup: "หมู่เลือด",
+  telephoneNumber: "เบอร์โทร",
+
+  prefix: "คำนำหน้าชื่อ",
+  firstName: "ชื่อ",
+  lastName: "นามสกุล",
+};
+
+// get person detail list
+const fetchPerson = async () => {
+  // showLoader();
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionbloodGroups: DataOption[] = [];
+      data.bloodGroups.map((r: any) => {
+        optionbloodGroups.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.bloodOps = optionbloodGroups;
+      OpsFilter.value.bloodOps = optionbloodGroups;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: any) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.genderOps = optiongenders;
+      OpsFilter.value.genderOps = optiongenders;
+
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: any) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.statusOps = optionrelationships;
+      OpsFilter.value.statusOps = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: any) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.religionOps = optionreligions;
+      OpsFilter.value.religionOps = optionreligions;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      // hideLoader();
+      profileStore.isLoad++;
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "genderOps":
+      update(() => {
+        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "bloodOps":
+      update(() => {
+        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "religionOps":
+      update(() => {
+        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeClassOps":
+      update(() => {
+        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "employeeTypeOps":
+      update(() => {
+        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // await saveData();
+      console.log("Hello");
+      modal.value = false;
+    }
+  });
+}
+
+onMounted(async () => {
+  await fetchPerson();
+});
+</script>
 <template>
-  <div>1</div>
+  <div class="row q-pt-sm q-pb-lg justyfy-between items-center">
+    <span class="col text-subtitle1 text-weight-bold text-dark">
+      ประวัติส่วนตัว
+    </span>
+    <div class="col text-right">
+      <q-btn
+        flat
+        round
+        icon="mdi-pencil-outline"
+        color="primary"
+        @click="modal = true"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn flat round icon="mdi-history" color="info">
+        <q-tooltip>ประวัติข้อมูลส่วนตัว</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+
+  <q-card bordered class="my-card bg-grey-1 q-pa-md">
+    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
+      <div class="col-md-7 col-12 row">
+        <!-- column 1 -->
+        <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(0, 6)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-md-8 col-7">
+          <div class="q-py-xs">
+            {{ resultData.citizenId }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              `${resultData.prefix} ${resultData.firstName} ${resultData.lastName}`
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ date2Thai(resultData.birthDate) }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.age ? resultData.age : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.gender ? resultData.gender : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.relationshipId
+                ? (
+                    Ops.statusOps.find(
+                      (r) => r.id === resultData.relationshipId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+        </div>
+      </div>
+      <!-- column 2 -->
+      <div class="col-md-5 col-12 row">
+        <div class="col-md-4 col-5 col text-grey-6 text-weight-medium">
+          <div
+            v-for="label in Object.keys(dataLabel).slice(6, 11)"
+            class="q-py-xs"
+          >
+            {{ dataLabel[label as keyof typeof dataLabel] }}
+          </div>
+        </div>
+        <!-- data -->
+        <div class="col-md-8 col-7">
+          <div class="q-py-xs">
+            {{ resultData.nationality ? resultData.nationality : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.race ? resultData.race : "-" }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.religionId
+                ? (
+                    Ops.religionOps.find(
+                      (r) => r.id === resultData.religionId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{
+              resultData.bloodGroupId
+                ? (
+                    Ops.bloodOps.find(
+                      (b) => b.id === resultData.bloodGroupId
+                    ) || {}
+                  ).name
+                : "-"
+            }}
+          </div>
+          <div class="q-py-xs">
+            {{ resultData.telephoneNumber ? resultData.telephoneNumber : "-" }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- Edit Dialog -->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm" @submit="onSubmit">
+        <DialogHeader tittle="แก้ไขประวัติส่วนตัว" :close="() => modal = false" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                maxlength="13"
+                mask="#############"
+                v-model="resultData.citizenId"
+                :label="dataLabel.citizenId"
+                :rules="[
+                (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                (val: string) =>
+                  val.length >= 13 ||
+                  `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+              ]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.prefixId"
+                :options="Ops.prefixOps"
+                :label="dataLabel.prefix"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.firstName"
+                :label="dataLabel.firstName"
+                :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.lastName"
+                :label="dataLabel.lastName"
+                :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="resultData.birthDate"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    outlined
+                    dense
+                    hide-bottom-space
+                    :model-value="
+                      resultData.birthDate != null
+                        ? date2Thai(resultData.birthDate)
+                        : null
+                    "
+                    :label="dataLabel.birthDate"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                    ]"
+                  >
+                    <template v-slot:append>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                readonly
+                v-model="resultData.age"
+                :label="dataLabel.age"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.genderId"
+                :options="Ops.genderOps"
+                :label="dataLabel.gender"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.relationshipId"
+                :options="Ops.statusOps"
+                :label="dataLabel.relationship"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.nationality"
+                :label="dataLabel.nationality"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="resultData.race"
+                :label="dataLabel.race"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.religionId"
+                :options="Ops.religionOps"
+                :label="dataLabel.religion"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="id"
+                option-label="name"
+                input-debounce="0"
+                v-model="resultData.bloodGroupId"
+                :options="Ops.bloodOps"
+                :label="dataLabel.bloodGroup"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="##########"
+                v-model="resultData.telephoneNumber"
+                :label="dataLabel.telephoneNumber"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <div class="text-right q-pa-sm">
+          <q-btn
+            flat
+            round
+            type="submit"
+            icon="mdi-pencil-outline"
+            color="primary"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>