From c0d0c9232a1b28e18a8d58c82bb4e4d3286f01a1 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 14 Mar 2024 13:25:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=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/api/02_organizational/api.organization.ts |   9 +
 .../position-employee/01ListPosition.vue      | 131 +++---
 .../position-employee/02ListType.vue          | 349 ++++++----------
 .../position-employee/03ListLevel.vue         | 391 +++++++++++++++++-
 .../position-employee/05ListLevelDetail.vue   |  39 +-
 .../position-employee/DialogAddPosition.vue   |   4 +-
 .../interface/index/positionEmployee.ts       |  15 +
 .../interface/request/positionEmployee.ts     |  13 +
 .../response/positionEmployee/Main.ts         |  16 +
 .../stores/positionEmployeeStore.ts           |  22 +-
 .../SalaryEmployeeLists/TabMain.vue           |   2 +-
 .../13_salary/views/salaryEmployeeLists.vue   |   5 +-
 12 files changed, 665 insertions(+), 331 deletions(-)
 create mode 100644 src/modules/01_metadataNew/interface/index/positionEmployee.ts
 create mode 100644 src/modules/01_metadataNew/interface/request/positionEmployee.ts
 create mode 100644 src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 95bfd4f19..41c50526d 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -3,6 +3,7 @@ import env from "../index";
 const organization = `${env.API_URI}/org`;
 const orgPos = `${env.API_URI}/org/pos`;
 const orgProfile = `${env.API_URI}/org/profile`;
+const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
 
 export default {
   /** โครงสร้างอัตรากำลัง*/
@@ -60,4 +61,12 @@ export default {
   activeOrganizationRoot: `${organization}/active/root`,
   activeOrganizationRootById: (id: string) =>
     `${organization}/active/root/${id}`,
+
+  /** ข้อมูลตำแหน่งลูกจ้างประจำ*/
+  orgEmployeePos: `${orgEmployeePos}/position`,
+  orgEmployeePosById: (id: string) => `${orgEmployeePos}/position/${id}`,
+  orgEmployeeType: `${orgEmployeePos}/type`,
+  orgEmployeeTypeById: (id: string) => `${orgEmployeePos}/type/${id}`,
+  orgEmployeelevel: `${orgEmployeePos}/level`,
+  orgEmployeelevelById: (id: string) => `${orgEmployeePos}/level/${id}`,
 };
diff --git a/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue b/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
index 2f2f0af64..d7fcc9ff9 100644
--- a/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
+++ b/src/modules/01_metadataNew/components/position-employee/01ListPosition.vue
@@ -1,53 +1,35 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 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[]>([]);
+import { useCounterMixin } from "@/stores/mixin";
 
-const isSpecial = ref<boolean>(false);
-const formPositionSelect = reactive<FormPositionSelect>({
-  positionId: "",
-  posTypeId: "",
-  positionName: "",
-  positionField: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  positionExecutiveField: "",
-  positionArea: "",
-  isSpecial: false,
-});
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
 
 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 rowsPositionSelect = ref<RowDetailPositions[]>([]);
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -93,17 +75,22 @@ const visibleColumns = ref<string[]>([
   "posLevelName",
 ]);
 
-const $q = useQuasar();
-const rowsPositionSelect = ref<RowDetailPositions[]>([]);
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-} = mixin;
+const editPosition = ref<boolean>(false);
+const modalAddPosition = ref<boolean>(false);
+
+const isSpecial = ref<boolean>(false);
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  posTypeId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+  isSpecial: false,
+});
 
 /** input ค้นหา */
 const searchRef = ref<any>(null);
@@ -180,19 +167,19 @@ function addPosition(data: RowDetailPositions) {
 
 function deletePos(id: string) {
   dialogRemove($q, () => {
-    // showLoader();
-    // http
-    //   .delete(config.API.orgPosPositionById(id))
-    //   .then(() => {
-    //     success($q, "ลบข้อมูลสำเร็จ");
-    //   })
-    //   .catch((err) => {
-    //     messageError($q, err);
-    //   })
-    //   .finally(() => {
-    //     searchInput();
-    //     hideLoader();
-    //   });
+    showLoader();
+    http
+      .delete(config.API.orgEmployeePosById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        searchInput();
+        hideLoader();
+      });
   });
 }
 
@@ -201,19 +188,19 @@ function popupAdd() {
 }
 
 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();
-  //   });
+  search.value = "";
+  showLoader();
+  await http
+    .get(config.API.orgEmployeePos + `?keyword=&type=ALL`)
+    .then((res) => {
+      rowsPositionSelect.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(() => {
diff --git a/src/modules/01_metadataNew/components/position-employee/02ListType.vue b/src/modules/01_metadataNew/components/position-employee/02ListType.vue
index 3de9086b8..28dc0d06c 100644
--- a/src/modules/01_metadataNew/components/position-employee/02ListType.vue
+++ b/src/modules/01_metadataNew/components/position-employee/02ListType.vue
@@ -1,15 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QInput, QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted, reactive } from "vue";
 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();
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { ObjectGroupRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
+import type { ResGroup } from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { FrmDataGroup } from "@/modules/01_metadataNew/interface/request/positionEmployee";
+
+/** importComponents*/
+import dialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { usePositionEmployeeDataStore } from "@/modules/01_metadataNew/stores/positionEmployeeStore";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmployeeDataStore();
 const router = useRouter();
 const mixin = useCounterMixin();
 const {
@@ -20,7 +31,8 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
-const columns = [
+
+const columns = ref<QTableProps["columns"]>([
   {
     name: "posTypeName",
     align: "left",
@@ -29,8 +41,15 @@ const columns = [
     field: "posTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posTypeShortName",
+    align: "left",
+    label: "อักษรย่อกลุ่มงาน",
+    sortable: true,
+    field: "posTypeShortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
     name: "posTypeRank",
@@ -40,71 +59,43 @@ const columns = [
     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 posTypeShortName = ref<string>("");
-const posTypeShortNameRef = ref<QInput | null>(null);
-const posTypeRank = ref<number | undefined>();
-const posTypeRankRef = ref<QInput | null>(null);
-const dialogStatus = ref<string>("");
+]);
 const visibleColumns = ref<string[]>([
   "posTypeName",
   "posTypeShortName",
   "posTypeRank",
-  // "createdAt",
-  // "lastUpdatedAt",
-  // "lastUpdateFullName",
 ]);
 
+/** from เพิ่มข้อมูลกลุ่มงาน */
+const formDataGroup = reactive<FrmDataGroup>({
+  posTypeName: "",
+  posTypeShortName: "",
+  posTypeRank: null,
+});
+
+/** formRef*/
+const posTypeNameRef = ref<Object | null>(null);
+const posTypeShortNameRef = ref<Object | null>(null);
+const posTypeRankRef = ref<Object | null>(null);
+const objectGroupRef: ObjectGroupRef = {
+  posTypeName: posTypeNameRef,
+  posTypeShortName: posTypeShortNameRef,
+  posTypeRank: posTypeRankRef,
+};
+
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const dialogStatus = ref<string>("");
+const rows = ref<ResGroup[]>([]);
+
 async function fetchData() {
   showLoader();
   await http
-    .get(config.API.orgPosType)
+    .get(config.API.orgEmployeeType)
     .then(async (res) => {
-      store.save(res.data.result);
+      rows.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -114,80 +105,91 @@ async function fetchData() {
     });
 }
 
-async function addData() {
-  await http
-    .post(config.API.orgPosType, {
-      posTypeName: posTypeName.value,
-      posTypeShortName: posTypeShortName.value,
-      posTypeRank: posTypeRank.value,
-    })
-    .then(() => {
-      fetchData();
-    })
-    .catch((err) => {
-      messageError($q, err);
+async function onClickSubmit() {
+  const hasError = [];
+  for (const key in objectGroupRef) {
+    if (Object.prototype.hasOwnProperty.call(objectGroupRef, key)) {
+      const property = objectGroupRef[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, () => {
+      submit();
     });
+  }
 }
 
-async function editData(id: string) {
-  await http
-    .put(config.API.orgPosTypeId(id), {
-      posTypeName: posTypeName.value,
-      posTypeShortName: posTypeShortName.value,
-      posTypeRank: posTypeRank.value,
-    })
-    .then(() => {
-      fetchData();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+async function submit() {
+  const body: FrmDataGroup = {
+    posTypeName: formDataGroup.posTypeName,
+    posTypeShortName: formDataGroup.posTypeShortName,
+    posTypeRank: Number(formDataGroup.posTypeRank),
+  };
+  showLoader();
+  try {
+    const url =
+      dialogStatus.value === "create"
+        ? config.API.orgEmployeeType
+        : config.API.orgEmployeeTypeById(editId.value);
+    await http[dialogStatus.value === "create" ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    fetchData();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+    closeDialog();
+  }
 }
 
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.orgPosTypeId(id))
-    .then(() => {
-      fetchData();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgEmployeeTypeById(id))
+      .then(() => {
+        fetchData();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
-onMounted(async () => {
-  fetchData();
-});
-
-function closeDialog() {
-  dialog.value = false;
+function onClickOpenDialogEdit(data: ResGroup) {
+  dialogStatus.value = "edit";
+  dialog.value = true;
+  editId.value = data.id;
+  formDataGroup.posTypeName = data.posTypeName;
+  // formDataGroup.posTypeShortName = data.posTypeShortName;
+  formDataGroup.posTypeRank = data.posTypeRank;
 }
 
-function onclickDetail(id: string) {
+function onClickDetail(id: string) {
   router.push(`/master-data/position-employee/level/${id}`);
 }
 
-function validateForm() {
-  posTypeNameRef.value?.validate();
-  posTypeRankRef.value?.validate();
-  onSubmit();
+function closeDialog() {
+  dialog.value = false;
+  clearFormData();
 }
 
-async function onSubmit() {
-  if (posTypeName.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        posTypeName.value = "";
-        posTypeRank.value = undefined;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
+function clearFormData() {
+  formDataGroup.posTypeName = "";
+  formDataGroup.posTypeShortName = "";
+  formDataGroup.posTypeRank = null;
 }
+
+onMounted(() => {
+  fetchData();
+});
 </script>
 
 <template>
@@ -229,7 +231,7 @@ async function onSubmit() {
   <d-table
     ref="table"
     :columns="columns"
-    :rows="store.row"
+    :rows="rows"
     :filter="filterKeyword"
     row-key="name"
     flat
@@ -237,6 +239,7 @@ async function onSubmit() {
     :paging="true"
     dense
     class="custom-header-table"
+    :rows-per-page-options="[10, 20, 50, 100]"
     :visible-columns="visibleColumns"
   >
     <template v-slot:header="props">
@@ -251,10 +254,10 @@ async function onSubmit() {
       <q-tr
         :props="props"
         class="cursor-pointer"
-        @click.stop="onclickDetail(props.row.id)"
+        @click.stop="onClickDetail(props.row.id)"
       >
         <q-td v-for="col in props.cols" :key="col.id">
-          {{ col.value }}
+          {{ col.value ? col.value : "-" }}
         </q-td>
         <q-td auto-width>
           <q-btn
@@ -265,16 +268,7 @@ async function onSubmit() {
             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;
-              }
-            "
+            @click.stop="onClickOpenDialogEdit(props.row)"
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
@@ -286,10 +280,7 @@ async function onSubmit() {
             size="12px"
             icon="mdi-delete"
             clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
+            @click.stop="onClickDelete(props.row.id)"
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
           </q-btn>
@@ -300,7 +291,7 @@ async function onSubmit() {
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="width: 350px">
-      <form @submit.prevent="validateForm">
+      <form @submit.prevent="onClickSubmit">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
             :tittle="
@@ -318,7 +309,7 @@ async function onSubmit() {
             <q-input
               ref="posTypeNameRef"
               outlined
-              v-model="posTypeName"
+              v-model="formDataGroup.posTypeName"
               label="ชื่อกลุ่มงาน"
               dense
               lazy-rules
@@ -332,7 +323,7 @@ async function onSubmit() {
           <div class="col-12">
             <q-input
               ref="posTypeShortNameRef"
-              v-model="posTypeShortName"
+              v-model="formDataGroup.posTypeShortName"
               dense
               outlined
               for="#positionShortName"
@@ -347,16 +338,16 @@ async function onSubmit() {
             <q-input
               ref="posTypeRankRef"
               outlined
-              v-model="posTypeRank"
+              v-model="formDataGroup.posTypeRank"
               label="ระดับกลุ่มงาน"
               dense
-              type="number"
               lazy-rules
               borderless
               min="1"
               bg-color="white"
               :rules="[(val) => val != undefined || 'กรุณากรอกระดับกลุ่มงาน']"
               hide-bottom-space
+              mask="############"
             />
           </div>
         </q-card-section>
@@ -379,72 +370,4 @@ async function onSubmit() {
   </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>
+<style scoped lang="scss"></style>
diff --git a/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue b/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
index cd2b046b8..d4b36f2fa 100644
--- a/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
+++ b/src/modules/01_metadataNew/components/position-employee/03ListLevel.vue
@@ -1,10 +1,222 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import ListLevelDetail from "@/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue";
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  ResGroup,
+  ResLevel,
+} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+import type { ObjectLevelRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
+import type { FormDataLevel } from "@/modules/01_metadataNew/interface/request/positionEmployee";
+
+/** importComponts*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**use*/
+const $q = useQuasar();
+const route = useRoute();
 const router = useRouter();
 const posName = ref<string>("");
+const posTypeId = ref<string>(route.params.id.toString());
+
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+const storeOption = useMainOptionDataStore();
+
+const columns = ref<QTableProps["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",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posLevelAuthority",
+    align: "left",
+    label: "ผู้มีอำนาจสั่งบรรจุ",
+    sortable: true,
+    field: "posLevelAuthority",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>();
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "posLevelName",
+  "posTypeName",
+  "posLevelAuthority",
+]);
+const filter = ref<string>("");
+
+const levelId = ref<string>("");
+const formDataLevel = reactive<FormDataLevel>({
+  posLevelName: null,
+  posTypeName: "",
+  commander: "",
+});
+
+/** formRef*/
+const posLevelNameRef = ref<Object | null>(null);
+const commanderRef = ref<Object | null>(null);
+const posTypeRankRef = ref<Object | null>(null);
+const objectLevelRef: ObjectLevelRef = {
+  posLevelName: posLevelNameRef,
+  commander: commanderRef,
+};
+
+function fetchPosGroup() {
+  showLoader();
+  http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      const data: ResGroup[] = res.data.result;
+      const group = data.find((e: ResGroup) => e.id === posTypeId.value);
+      formDataLevel.posTypeName = group?.posTypeName;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchData(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgEmployeelevel)
+    .then((res) => {
+      const data: ResLevel[] = res.data.result;
+      const list = data.filter((e: ResLevel) => e.posTypeId === id);
+
+      rows.value = list ? list : [];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const isStatusEdit = ref<boolean>(false);
+const modalDialog = ref<boolean>(false);
+function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+  isStatusEdit.value = statusEdit;
+  modalDialog.value = true;
+  if (statusEdit) {
+    levelId.value = data.id;
+    formDataLevel.posLevelName = data.posLevelName;
+    formDataLevel.posTypeName = data.posTypeName;
+    formDataLevel.commander = data.commander;
+  }
+}
+
+function onClickCloseDialog() {
+  modalDialog.value = false;
+  formDataLevel.posLevelName = null;
+  formDataLevel.posTypeName = "";
+  formDataLevel.commander = "";
+}
+
+function onClickSubmit() {
+  const hasError = [];
+  for (const key in objectLevelRef) {
+    if (Object.prototype.hasOwnProperty.call(objectLevelRef, key)) {
+      const property = objectLevelRef[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, () => {
+      submit();
+    });
+  }
+}
+
+async function submit() {
+  const body = {
+    posLevelName: Number(formDataLevel.posLevelName),
+    posTypeId: posTypeId.value,
+    posLevelRank: Number(formDataLevel.posLevelName),
+    posLevelAuthority: formDataLevel.commander,
+  };
+  showLoader();
+  try {
+    const url = !isStatusEdit.value
+      ? config.API.orgEmployeelevel
+      : config.API.orgEmployeelevelById(levelId.value);
+    await http[!isStatusEdit.value ? "post" : "put"](url, body);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    fetchData(posTypeId.value);
+    onClickCloseDialog();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    http
+      .delete(config.API.orgEmployeelevelById(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchData(posTypeId.value);
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  });
+}
+
+onMounted(() => {
+  posTypeId.value && fetchData(posTypeId.value);
+  fetchPosGroup();
+});
 </script>
 
 <template>
@@ -19,12 +231,181 @@ const posName = ref<string>("");
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายการระดับชั้นงาน{{ posName }}
+    รายการระดับชั้นงาน{{ formDataLevel.posTypeName }}
   </div>
 
   <q-card flat bordered>
-    <ListLevelDetail v-model:posName="posName" />
+    <div class="q-pa-md">
+      <q-toolbar style="padding: 0">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop.pervent="onClickOpenDialog()"
+        >
+          <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="row q-gutter-sm">
+          <q-input outlined dense v-model="filter" 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="rows"
+        :filter="filter"
+        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"
+                @click.stop.pervent="onClickOpenDialog(true, props.row)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+              <q-btn
+                color="red"
+                flat
+                dense
+                round
+                size="12px"
+                icon="mdi-delete"
+                @click="onClickDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
   </q-card>
+
+  <q-dialog v-model="modalDialog" class="dialog" persistent>
+    <q-card style="width: 350px">
+      <form @submit.prevent="onClickSubmit">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader
+            :tittle="isStatusEdit ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="onClickCloseDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="row q-gutter-y-md">
+          <div class="col-12">
+            <q-input
+              outlined
+              ref="posLevelNameRef"
+              v-model="formDataLevel.posLevelName"
+              label="ระดับชั้นงาน"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              mask="#######################################"
+              :rules="[(val) => !!val || 'กรุณากรอกระดับชั้นงาน']"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="commanderRef"
+              outlined
+              v-model="formDataLevel.commander"
+              emit-value
+              map-options
+              :options="storeOption.posLevelAuthorityOption"
+              option-value="label"
+              label="ผู้มีอำนาจสั่งบรรจุ"
+              dense
+              lazy-rules
+              borderless
+              bg-color="white"
+              hide-bottom-space
+              :rules="[(val) => !!val || 'กรุณาเลือกผู้มีอำนาจสั่งบรรจุ']"
+            />
+          </div>
+
+          <div class="col-12">
+            <q-select
+              ref="posTypeIdRef"
+              v-model="formDataLevel.posTypeName"
+              label="กลุ่มงาน"
+              outlined
+              dense
+              bg-color="white"
+              options-cover
+              hide-bottom-space
+              readonly
+            />
+          </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>
+      </form>
+    </q-card>
+  </q-dialog>
 </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
index 5fb09ee4d..00a478e6f 100644
--- a/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
+++ b/src/modules/01_metadataNew/components/position-employee/05ListLevelDetail.vue
@@ -140,34 +140,37 @@ const visibleColumns = ref<string[]>([
   //   "lastUpdateFullName",
 ]);
 
+const rows = ref<any>();
 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();
-  //   });
+  showLoader();
+  await http
+    .get(config.API.orgEmployeelevel)
+    .then(async (res) => {
+      rows.value = res.data.result;
+      // store.save(res.data.result, id.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 async function addData() {
-  await http.post(config.API.orgPosLevel, {
+  await http.post(config.API.orgEmployeelevel, {
     posLevelName: posLevelName.value,
     // posLevelRank: posLevelRank.value,
-    posLevelAuthority:
-      posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
+    // posLevelAuthority:
+    //   posLevelAuthority.value == "" ? "" : posLevelAuthority.value,
     posTypeId: id.value,
+    posLevelRank: 1,
   });
   fetchData();
 }
 
 async function editData(editId: string) {
-  await http.put(config.API.orgPosLevelId(editId), {
+  await http.put(config.API.orgEmployeelevelById(editId), {
     posLevelName: posLevelName.value,
     // posLevelRank: posLevelRank.value,
     posLevelAuthority:
@@ -178,7 +181,7 @@ async function editData(editId: string) {
 }
 
 async function deleteData(id: string) {
-  await http.delete(config.API.orgPosLevelId(id));
+  await http.delete(config.API.orgEmployeelevelById(id));
   fetchData();
 }
 
@@ -276,7 +279,7 @@ async function fetchName() {
     <d-table
       ref="table"
       :columns="columns"
-      :rows="store.row"
+      :rows="rows"
       :filter="filterKeyword"
       row-key="name"
       flat
diff --git a/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue b/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
index 2da4369b0..1a9a1ff74 100644
--- a/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
+++ b/src/modules/01_metadataNew/components/position-employee/DialogAddPosition.vue
@@ -80,7 +80,7 @@ function saveSelectEdit() {
       //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
       // };
       // await http
-      //   .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
+      //   .put(config.API.orgPosPositionById(orgEmployeePosById.positionId), body)
       //   .then(() => {
       //     success($q, "เพิ่มข้อมูลสำเร็จ");
       //     clearFormPositionSelect();
@@ -111,7 +111,7 @@ function onSubmitSelectEdit() {
       //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
       // };
       // await http
-      //   .post(config.API.orgPosPosition, body)
+      //   .post(config.API.orgEmployeePos, body)
       //   .then(() => {
       //     success($q, "เพิ่มข้อมูลสำเร็จ");
       //     clearFormPositionSelect();
diff --git a/src/modules/01_metadataNew/interface/index/positionEmployee.ts b/src/modules/01_metadataNew/interface/index/positionEmployee.ts
new file mode 100644
index 000000000..f95bfc72e
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/index/positionEmployee.ts
@@ -0,0 +1,15 @@
+interface ObjectGroupRef {
+  posTypeName: object | null;
+  posTypeShortName: object | null;
+  posTypeRank: object | null;
+  [key: string]: any;
+}
+
+interface ObjectLevelRef {
+  posLevelName: object | null;
+  commander: object | null;
+
+  [key: string]: any;
+}
+
+export type { ObjectGroupRef, ObjectLevelRef };
diff --git a/src/modules/01_metadataNew/interface/request/positionEmployee.ts b/src/modules/01_metadataNew/interface/request/positionEmployee.ts
new file mode 100644
index 000000000..b1b4e2e67
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/request/positionEmployee.ts
@@ -0,0 +1,13 @@
+interface FrmDataGroup {
+  posTypeName: string;
+  posTypeShortName: string;
+  posTypeRank: number | null;
+}
+
+interface FormDataLevel {
+  posLevelName: number | null;
+  posTypeName: string | undefined;
+  commander: string;
+}
+
+export type { FrmDataGroup, FormDataLevel };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts
new file mode 100644
index 000000000..6abe4aafd
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/Main.ts
@@ -0,0 +1,16 @@
+interface ResGroup {
+  id: string;
+  posLevels: ResLevel[];
+  posTypeName: string;
+  posTypeRank: number;
+}
+
+interface ResLevel {
+  id: string;
+  posLevelName: number;
+  posTypeName: string;
+  posTypeId: string;
+  commander: string;
+}
+
+export type { ResGroup, ResLevel };
diff --git a/src/modules/01_metadataNew/stores/positionEmployeeStore.ts b/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
index 297426e1b..3c95e77bb 100644
--- a/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
+++ b/src/modules/01_metadataNew/stores/positionEmployeeStore.ts
@@ -1,9 +1,12 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+
 import type {
   DataResponse,
   DataRow,
 } from "../interface/response/position/ListType";
+import type { ResGroup } from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useMainOptionDataStore } from "@/modules/01_metadataNew/stores/main";
 const storeOption = useMainOptionDataStore();
@@ -14,25 +17,8 @@ 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) : "",
-        posLevelAuthority: e.posLevelAuthority
-          ? storeOption.posLevelAuthorityConvert(e.posLevelAuthority)
-          : "-",
-      })) satisfies DataRow[];
-      row.value = list.filter((e) => e.posTypeId === id);
-    }
+
     return {
-      save,
-      row,
       pathLocation,
     };
   }
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index 7652d8b19..a2aa41812 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
-import DialogInfoCriteria from "@/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue";
 
 /** importType*/
 import type { DataOption } from "@/modules/13_salary/interface/index/Main";
@@ -17,6 +16,7 @@ import type {
 /** importComponents*/
 import TableTabType1 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypePending.vue";
 import TableTabType2 from "@/modules/13_salary/components/SalaryEmployeeLists/TableTypeOther.vue";
+import DialogInfoCriteria from "@/modules/13_salary/components/SalaryEmployeeLists/DialogInfoCriteria.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
diff --git a/src/modules/13_salary/views/salaryEmployeeLists.vue b/src/modules/13_salary/views/salaryEmployeeLists.vue
index 81283d7b2..6f9c23385 100644
--- a/src/modules/13_salary/views/salaryEmployeeLists.vue
+++ b/src/modules/13_salary/views/salaryEmployeeLists.vue
@@ -3,8 +3,7 @@ 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,
@@ -18,6 +17,8 @@ import type {
 
 /** importComponents*/
 import TabGroup from "@/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue";
+// import ProcessStep from "@/modules/13_salary/components/SalaryEmployeeLists/ProcessStep.vue";
+// import PageDashBoard from "@/modules/13_salary/components/SalaryEmployeeLists/Dashboard.vue";
 
 /** importStore*/
 import { useSalaryEmployeeListSDataStore } from "@/modules/13_salary/store/SalaryEmployeeListsStore";