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] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=81=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B3,=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20pa?=
 =?UTF-8?q?ge=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=9B=E0=B8=A3=E0=B8=B0=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