From a48282c1cb7fba5b9c7474eb51411fae0324b9cd Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Fri, 2 Feb 2024 11:21:51 +0700
Subject: [PATCH] =?UTF-8?q?tab=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=95=E0=B8=B3=E0=B9=81=E0=B8=AB=E0=B8=99?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/position/01ListPosition.vue    | 410 ++++++++++++++++++
 .../components/position/02ListType.vue        |   3 +
 .../components/position/03ListExecutive.vue   |   3 +
 .../components/position/DialogAddPosition.vue | 313 +++++++++++++
 .../interface/request/position/index.ts       |  48 ++
 src/modules/01_metadataNew/views/position.vue |  48 +-
 6 files changed, 820 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/01_metadataNew/components/position/01ListPosition.vue
 create mode 100644 src/modules/01_metadataNew/components/position/02ListType.vue
 create mode 100644 src/modules/01_metadataNew/components/position/03ListExecutive.vue
 create mode 100644 src/modules/01_metadataNew/components/position/DialogAddPosition.vue
 create mode 100644 src/modules/01_metadataNew/interface/request/position/index.ts

diff --git a/src/modules/01_metadataNew/components/position/01ListPosition.vue b/src/modules/01_metadataNew/components/position/01ListPosition.vue
new file mode 100644
index 000000000..308903835
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position/01ListPosition.vue
@@ -0,0 +1,410 @@
+<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 } from "@/modules/01_metadataNew/interface/index/Main";
+import type { QTableProps } from "quasar";
+import DialogAddPosition from "@/modules/01_metadataNew/components/position/DialogAddPosition.vue";
+
+interface FormPositionSelect {
+  positionId: string;
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+}
+interface ListMenu {
+  label: string;
+  icon: string;
+  type: string;
+  color: string;
+}
+interface OptionLevel {
+  id: string;
+  posLevelName: string;
+}
+interface RowDetailPositions {
+  id: string;
+  positionId: string;
+  positionName: string;
+  positionField: string;
+  positionType: string;
+  positionLevel: string;
+  positionExecutive: string;
+  positionExecutiveField: string;
+  positionArea: string;
+  posTypeId: string;
+  posLevelId: string;
+  posExecutiveId: string;
+}
+
+const modalAddPosition = ref<boolean>(false);
+const levelOpsMain = ref<DataOption[]>([]);
+const dataLevel = ref<any>();
+const levelOps = ref<DataOption[]>([]);
+
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+});
+
+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: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    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",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "positionName",
+  "positionField",
+  "posTypeName",
+  "posLevelName",
+  "posExecutiveName",
+  "positionExecutiveField",
+  "positionArea",
+]);
+
+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: "positionField", name: "สายงาน" },
+  { id: "positionType", name: "ประเภทตำแหน่ง" },
+  { id: "positionLevel", name: "ระดับตำแหน่ง" },
+  { id: "positionExecutive", name: "ตำแหน่งทางการบริหาร" },
+  { id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
+  { id: "positionArea", name: "ด้าน/สาขา" },
+]);
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  updateSelectType(data.posTypeId);
+  formPositionSelect.positionId = data.positionId;
+  formPositionSelect.positionName = data.positionName;
+  formPositionSelect.positionField = data.positionField;
+  formPositionSelect.positionType = data.posTypeId;
+  formPositionSelect.positionLevel = data.posLevelId;
+  formPositionSelect.positionExecutive = data.posExecutiveId;
+  formPositionSelect.positionExecutiveField = data.positionExecutiveField;
+  formPositionSelect.positionArea = data.positionArea;
+}
+
+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;
+  formPositionSelect.positionLevel = "";
+}
+
+/**
+ * ส่งค่า 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() {
+  searchRef.value.validate();
+  if (!searchRef.value.hasError) {
+    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;
+}
+</script>
+<template>
+  <div class="row col-12 q-mb-sm">
+    <div class="col-1">
+      <q-btn
+        id="addComplaints"
+        for="addComplaints"
+        size="12px"
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="popupAdd()"
+        ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
+      >
+    </div>
+    <q-space />
+  </div>
+  <div class="row col-12 q-col-gutter-sm items-start">
+    <div class="col-12 col-sm-6 col-md-3">
+      <q-select
+        label="ค้นหาจาก"
+        v-model="type"
+        :options="optionFilter"
+        emit-value
+        dense
+        map-options
+        outlined
+        option-label="name"
+        option-value="id"
+      />
+    </div>
+
+    <div class="col-12 col-sm-6 col-md-6">
+      <q-input
+        ref="searchRef"
+        :class="inputEdit(isReadonly)"
+        v-model="search"
+        outlined
+        clearable
+        dense
+        lazy-rules
+        label="คำค้น"
+        hide-bottom-space
+        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
+      />
+    </div>
+
+    <div class="col-12 col-sm-6 col-md-3">
+      <q-btn
+        color="primary"
+        icon="search"
+        label="ค้นหา"
+        class="full-width q-pa-sm"
+        @click="searchInput()"
+      >
+      </q-btn>
+    </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>
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              flat
+              dense
+              icon="mdi-dots-vertical"
+              class="q-pa-none q-ml-xs"
+              color="grey-13"
+            >
+              <q-menu anchor="bottom middle" self="top middle">
+                <q-list dense v-for="(item, index) in listMenu" :key="index">
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'copy'
+                        ? copyDetiail(props.row)
+                        : deletePos(props.row.id)
+                    "
+                  >
+                    <q-item-section avatar>
+                      <q-icon :color="item.color" :name="item.icon" size="sm" />
+                    </q-item-section>
+                    <q-item-section>{{ item.label }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+  <DialogAddPosition v-model:add-position="modalAddPosition" />
+</template>
diff --git a/src/modules/01_metadataNew/components/position/02ListType.vue b/src/modules/01_metadataNew/components/position/02ListType.vue
new file mode 100644
index 000000000..e5ea378b1
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position/02ListType.vue
@@ -0,0 +1,3 @@
+<template>
+    ประเภทและระดับตำแหน่ง 
+ </template>
\ No newline at end of file
diff --git a/src/modules/01_metadataNew/components/position/03ListExecutive.vue b/src/modules/01_metadataNew/components/position/03ListExecutive.vue
new file mode 100644
index 000000000..0e98b7230
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position/03ListExecutive.vue
@@ -0,0 +1,3 @@
+<template>
+    ตำแหน่งทางการบริหาร 
+ </template>
\ No newline at end of file
diff --git a/src/modules/01_metadataNew/components/position/DialogAddPosition.vue b/src/modules/01_metadataNew/components/position/DialogAddPosition.vue
new file mode 100644
index 000000000..e6b6fffeb
--- /dev/null
+++ b/src/modules/01_metadataNew/components/position/DialogAddPosition.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { ref, reactive, watch } 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,
+  FormPositionSelect,
+  FormPositionSelectRef,
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+} from "@/modules/01_metadataNew/interface/request/position/index";
+import { useCounterMixin } from "@/stores/mixin";
+const executiveOpsMain = ref<DataOption[]>([]);
+const levelOps = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const typeOpsMain = ref<DataOption[]>([]);
+const dataLevel = ref<any>();
+const executiveOps = ref<DataOption[]>([]);
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+});
+const $q = useQuasar();
+
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const modal = defineModel<boolean>("addPosition", { required: true });
+
+const positionNameRef = ref<Object | null>(null);
+const positionFieldRef = ref<Object | null>(null);
+const positionTypeRef = ref<Object | null>(null);
+const positionLevelRef = ref<Object | null>(null);
+const positionExecutiveRef = ref<Object | null>(null);
+const positionExecutiveFieldRef = ref<Object | null>(null);
+const positionAreaRef = ref<Object | null>(null);
+
+const objectPositionSelectRef: FormPositionSelectRef = {
+  positionName: positionNameRef,
+  positionField: positionFieldRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+  positionExecutive: positionExecutiveRef,
+  positionExecutiveField: positionExecutiveFieldRef,
+  positionArea: positionAreaRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+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)) {
+    onSubmitSelectEdit();
+  }
+}
+
+/** ฟังชั่น บันทึก */
+function onSubmitSelectEdit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      // showLoader();
+      // const body = {
+      //   posDictName: formPositionSelect.positionName,
+      //   posDictField: formPositionSelect.positionField, //สายงาน
+      //   posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
+      //   posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
+      //   posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+      //   posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+      //   posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+      // };
+      // await http
+      //   .post(config.API.orgPosPosition, body)
+      //   .then(() => {
+      //     success($q, "เพิ่มข้อมูลสำเร็จ");
+      //     clearFormPositionSelect();
+      //   })
+      //   .catch((err) => {
+      //     messageError($q, err);
+      //   })
+      //   .finally(() => {
+      //     hideLoader();
+      //   });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+/**
+ * ส่งค่า 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) => {
+      dataLevel.value = res.data.result;
+      typeOpsMain.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      typeOps.value = typeOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+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;
+  formPositionSelect.positionLevel = "";
+}
+
+/** function เรียกรายการตำแหน่งทางการบริหาร */
+async function fetchExecutive() {
+  showLoader();
+  await http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
+        id: e.id,
+        name: e.posExecutiveName,
+      }));
+      executiveOps.value = executiveOpsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      fetchType();
+      fetchExecutive();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <form @submit.prevent="validateFormPositionEdit">
+        <DialogHeader
+          :tittle="`เพิ่มข้อมูลตำแหน่ง`"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm col-12">
+            <div class="col-6">
+              <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-input
+                ref="positionFieldRef"
+                v-model="formPositionSelect.positionField"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionField"
+                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 class="col-6">
+              <q-select
+                ref="positionExecutiveRef"
+                :class="inputEdit(isReadonly)"
+                label="ตำแหน่งทางการบริหาร"
+                v-model="formPositionSelect.positionExecutive"
+                :options="executiveOps"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                ref="positionExecutiveFieldRef"
+                v-model="formPositionSelect.positionExecutiveField"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionExecutiveField"
+                label="ด้านทางการบริหาร"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                ref="positionAreaRef"
+                v-model="formPositionSelect.positionArea"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionArea"
+                label="ด้าน/สาขา"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/01_metadataNew/interface/request/position/index.ts b/src/modules/01_metadataNew/interface/request/position/index.ts
new file mode 100644
index 000000000..8c1e1d37f
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/request/position/index.ts
@@ -0,0 +1,48 @@
+interface Pagination {
+    rowsPerPage: number;
+  }
+  
+  interface DataOption {
+    id: string;
+    name: string;
+  }
+  
+  interface FormPositionSelect {
+    positionId: string;
+    positionName: string;
+    positionField: string;
+    positionType: string;
+    positionLevel: string;
+    positionExecutive: string;
+    positionExecutiveField: string;
+    positionArea: string;
+  }
+
+  interface FormPositionSelectRef {
+    positionName: object | null;
+    positionField: object | null;
+    positionType: object | null;
+    positionLevel: object | null;
+    positionExecutive: object | null;
+    positionExecutiveField: object | null;
+    positionArea: object | null;
+    [key: string]: any;
+  }
+
+  interface OptionType {
+    id: string;
+    posTypeName: string;
+  }
+
+  interface OptionLevel {
+    id: string;
+    posLevelName: string;
+  }
+
+  interface OptionExecutive {
+    id: string;
+    posExecutiveName: string;
+  }
+  
+  export type { Pagination, DataOption,FormPositionSelect,FormPositionSelectRef,OptionType,OptionLevel,OptionExecutive };
+  
\ No newline at end of file
diff --git a/src/modules/01_metadataNew/views/position.vue b/src/modules/01_metadataNew/views/position.vue
index f309c1b9a..19fd2c540 100644
--- a/src/modules/01_metadataNew/views/position.vue
+++ b/src/modules/01_metadataNew/views/position.vue
@@ -1,11 +1,49 @@
-<script setup lang="ts"></script>
+div
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import ListPosition from "@/modules/01_metadataNew/components/position/01ListPosition.vue";
+import ListType from "@/modules/01_metadataNew/components/position/02ListType.vue";
+import ListExecutive from "@/modules/01_metadataNew/components/position/03ListExecutive.vue";
+const currentTab = ref<string>("list_position");
+const tabs = ref<Array<any>>([]);
+
+onMounted(() => {
+  const tabsPerson = [
+    { label: "ตำแหน่ง", value: "list_position" },
+    { label: "ประเภทและระดับตำแหน่ง", value: "list_type" },
+    { label: "ตำแหน่งทางการบริหาร", value: "list_executive" },
+  ];
+  tabs.value = tabsPerson;
+});
+</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 class="q-pa-md"> ตำแหน่ง </q-card>
+  <q-card flat bordered class="q-pa-md">
+    <q-tabs
+      dense
+      v-model="currentTab"
+      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="currentTab = tab.value"
+        :label="tab.label"
+        :name="tab.value"
+        class="q-py-xs"
+      />
+    </q-tabs>
+    <q-separator size="2px" />
+    <ListPosition v-if="currentTab == 'list_position'"/>
+    <ListType v-if="currentTab == 'list_type'"/>
+    <ListExecutive v-if="currentTab == 'list_executive'"/>
+  </q-card>
 </template>
 
 <style scoped></style>