From eb4bc445cd5ba04295831dded240f4eecf7023e0 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 8 Feb 2024 17:52:25 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20pop=20up?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogAddPosition.vue          | 370 ++++++++++
 .../components/DialogFormPosition.vue         | 654 ++++++++----------
 2 files changed, 641 insertions(+), 383 deletions(-)
 create mode 100644 src/modules/02_organizationalNew/components/DialogAddPosition.vue

diff --git a/src/modules/02_organizationalNew/components/DialogAddPosition.vue b/src/modules/02_organizationalNew/components/DialogAddPosition.vue
new file mode 100644
index 000000000..2e54a91bc
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogAddPosition.vue
@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { ref, reactive, watch, defineProps } from "vue";
+import type { QTableProps } from "quasar";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type {
+  FormDataPosition,
+  FormPositionRef,
+  DataOption,
+  FormPositionSelect,
+  RowDetailPositions,
+  FormPositionSelectRef,
+  ListMenu,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+
+import type {
+  OptionType,
+  OptionLevel,
+  OptionExecutive,
+  DataPosition,
+} from "@/modules/02_organizationalNew/interface/response/organizational";
+
+const props = defineProps({
+  emitSearch: Function,
+});
+const modal = defineModel<boolean>("modalAdd", { required: true });
+const dataLevel = ref<any>();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = mixin;
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isDisValidate = ref<boolean>(false);
+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 typeOpsMain = ref<DataOption[]>([]);
+const levelOpsMain = ref<DataOption[]>([]);
+const executiveOpsMain = ref<DataOption[]>([]);
+const executiveOps = ref<DataOption[]>([]);
+const typeOps = ref<DataOption[]>([]);
+const levelOps = ref<DataOption[]>([]);
+
+const formPositionSelect = reactive<FormPositionSelect>({
+  positionId: "",
+  positionName: "",
+  positionField: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveField: "",
+  positionArea: "",
+});
+
+const objectPositionSelectRef: FormPositionSelectRef = {
+  positionName: positionNameRef,
+  positionField: positionFieldRef,
+  positionType: positionTypeRef,
+  positionLevel: positionLevelRef,
+  positionExecutive: positionExecutiveRef,
+  positionExecutiveField: positionExecutiveFieldRef,
+  positionArea: positionAreaRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateFormPositionEdit() {
+  isDisValidate.value = false;
+  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 !== ""
+            ? formPositionSelect.positionExecutive
+            : null, //ตำแหน่งทางการบริหาร
+        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
+        posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
+      };
+      await http
+        .post(config.API.orgPosPosition, body)
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+
+          props.emitSearch?.(formPositionSelect.positionName, "positionName");
+          close();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการเพิ่มตำแหน่ง",
+    "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+async function clearFormPositionSelect() {
+  isDisValidate.value = await true;
+  formPositionSelect.positionId = "";
+  formPositionSelect.positionName = "";
+  formPositionSelect.positionField = "";
+  formPositionSelect.positionType = "";
+  formPositionSelect.positionLevel = "";
+  formPositionSelect.positionExecutive = "";
+  formPositionSelect.positionExecutiveField = "";
+  formPositionSelect.positionArea = "";
+  setTimeout(async () => {
+    isDisValidate.value = await false;
+  }, 1000);
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+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 close() {
+  modal.value = false;
+  clearFormPositionSelect();
+}
+
+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 เรียกรายการตำแหน่งทางการบริหาร */
+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">
+      <DialogHeader :tittle="'เพิ่มข้อมูลตำแหน่ง'" :close="close" />
+      <q-separator />
+
+      <q-card-section class="q-pa-none">
+        <form @submit.prevent="validateFormPositionEdit">
+          <div class="row q-col-gutter-sm col-12 q-pa-sm">
+            <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="
+                  !isDisValidate
+                    ? [(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="
+                  !isDisValidate
+                    ? [(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="
+                  !isDisValidate
+                    ? [(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="
+                  !isDisValidate
+                    ? [(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-separator />
+          <q-card-actions align="right" class="bg-white text-teal q-pa-sm">
+            <q-btn type="submit" label="เพิ่มตำแหน่ง" color="public" />
+          </q-card-actions>
+        </form>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
index 398c1fcf2..32472ecc4 100644
--- a/src/modules/02_organizationalNew/components/DialogFormPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -4,6 +4,8 @@ import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogAddPosition from "@/modules/02_organizationalNew/components/DialogAddPosition.vue";
+
 import type {
   FormDataPosition,
   FormPositionRef,
@@ -33,9 +35,12 @@ const props = defineProps({
   fetchDataTable: Function,
 });
 
+const modalAdd = ref<boolean>(false);
 const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const isDisValidate = ref<boolean>(false);
+const isPosition = ref<boolean>(false);
+const succession = ref<boolean>(false);
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -371,7 +376,7 @@ function onSubmit() {
             messageError($q, err);
           })
           .finally(() => {
-            props.close?.();
+            close();
             hideLoader();
           })
       : props.rowId &&
@@ -389,7 +394,7 @@ function onSubmit() {
             messageError($q, err);
           })
           .finally(() => {
-            props.close?.();
+            close();
             hideLoader();
           }));
   });
@@ -560,211 +565,93 @@ async function clearFormPositionSelect() {
     isDisValidate.value = await false;
   }, 1000);
 }
+
+function close() {
+  props.close?.();
+  isPosition.value = false;
+}
+
+function emitSearch(keyword: string, typeSelect: string) {
+  search.value = keyword;
+  type.value = typeSelect;
+  searchInput();
+}
 </script>
+
 <template>
-  <template>
-    <q-dialog v-model="props.modal" persistent>
-      <q-card style="min-width: 96vw">
-        <DialogHeader
-          :tittle="
-            props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
-          "
-          :close="props.close"
-        />
-        <q-separator />
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 96vw">
+      <DialogHeader
+        :tittle="
+          props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
+        "
+        :close="close"
+      />
+      <q-separator />
 
-        <q-card-section class="q-pa-sm">
-          <div class="row q-col-gutter-sm">
-            <div class="col-12">
-              <form @submit.prevent="validateForm">
-                <q-card
-                  bordered
-                  class="col-12"
-                  style="border: 1px solid #d6dee1"
-                >
-                  <div
-                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-                  >
-                    ข้อมูลอัตรากำลัง
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="row q-col-gutter-sm col-12 q-pa-sm">
-                    <div class="col-3">
-                      <q-input
-                        v-model="formData.shortName"
-                        dense
-                        outlined
-                        readonly
-                        for="#shortName"
-                        label="อักษรย่อ"
-                      />
-                    </div>
-                    <div class="col-3">
-                      <q-input
-                        v-model="formData.prefixNo"
-                        :class="inputEdit(isReadonly)"
-                        ref="prefixNoRef"
-                        dense
-                        outlined
-                        for="#prefixNo"
-                        label="Prefix เลขที่ตำเเหน่ง"
-                      />
-                    </div>
-                    <div class="col-3">
-                      <q-input
-                        v-model="formData.positionNo"
-                        :class="inputEdit(isReadonly)"
-                        ref="positionNoRef"
-                        dense
-                        outlined
-                        for="#positionNo"
-                        label="เลขที่ตำแหน่ง"
-                        lazy-rules
-                        hide-bottom-space
-                        :rules="[
-                          (val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`,
-                        ]"
-                      />
-                    </div>
-                    <div class="col-3">
-                      <q-input
-                        v-model="formData.suffixNo"
-                        :class="inputEdit(isReadonly)"
-                        dense
-                        outlined
-                        for="#suffixNo"
-                        label="Suffix เลขที่ตำแหน่ง"
-                      />
-                    </div>
-                    <div class="col-12">
-                      <d-table
-                        ref="table"
-                        :columns="columns"
-                        :rows="rows"
-                        row-key="idcard"
-                        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"
-                            >
-                              <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-delete"
-                                class="q-pa-none q-ml-xs"
-                                color="red"
-                                @click="deleteData(props.row.id)"
-                              >
-                                <q-tooltip>ลบข้อมูล</q-tooltip>
-                              </q-btn>
-                            </q-td>
-                          </q-tr>
-                        </template>
-                      </d-table>
-                    </div>
-                  </div>
-                  <q-separator />
-                  <q-card-actions
-                    align="right"
-                    class="bg-white text-teal q-pa-xs"
-                  >
-                    <q-btn type="submit" :label="`บันทึก`" color="public" />
-                  </q-card-actions>
-                </q-card>
-              </form>
-            </div>
-          </div>
-
-          <div class="row q-col-gutter-sm q-mt-sm">
-            <div class="col-7">
+      <q-card-section class="q-pa-sm">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <form @submit.prevent="validateForm">
               <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
                 <div
                   class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
                 >
-                  เลือกตำแหน่ง
+                  ข้อมูลอัตรากำลัง
                 </div>
                 <div class="col-12"><q-separator /></div>
-                <div class="q-pa-sm">
-                  <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 class="row q-col-gutter-sm col-12 q-pa-sm">
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.shortName"
+                      dense
+                      outlined
+                      readonly
+                      for="#shortName"
+                      label="อักษรย่อ"
+                    />
                   </div>
-
-                  <div class="full-width q-mt-sm">
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.prefixNo"
+                      :class="inputEdit(isReadonly)"
+                      ref="prefixNoRef"
+                      dense
+                      outlined
+                      for="#prefixNo"
+                      label="Prefix เลขที่ตำเเหน่ง"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.positionNo"
+                      :class="inputEdit(isReadonly)"
+                      ref="positionNoRef"
+                      dense
+                      outlined
+                      for="#positionNo"
+                      label="เลขที่ตำแหน่ง"
+                      lazy-rules
+                      hide-bottom-space
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
+                    />
+                  </div>
+                  <div class="col-3">
+                    <q-input
+                      v-model="formData.suffixNo"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#suffixNo"
+                      label="Suffix เลขที่ตำแหน่ง"
+                    />
+                  </div>
+                  <div class="col-12">
                     <d-table
                       ref="table"
                       :columns="columns"
-                      :rows="rowsPositionSelect"
-                      row-key="id"
+                      :rows="rows"
+                      row-key="idcard"
                       flat
                       bordered
                       :paging="true"
@@ -793,7 +680,6 @@ async function clearFormPositionSelect() {
                             v-for="col in props.cols"
                             :key="col.name"
                             :props="props"
-                            @click="addPosition(props.row)"
                           >
                             <div v-if="col.name == 'no'">
                               {{ props.rowIndex + 1 }}
@@ -806,38 +692,12 @@ async function clearFormPositionSelect() {
                             <q-btn
                               flat
                               dense
-                              icon="mdi-dots-vertical"
+                              icon="mdi-delete"
                               class="q-pa-none q-ml-xs"
-                              color="grey-13"
+                              color="red"
+                              @click="deleteData(props.row.id)"
                             >
-                              <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-tooltip>ลบข้อมูล</q-tooltip>
                             </q-btn>
                           </q-td>
                         </q-tr>
@@ -845,169 +705,197 @@ async function clearFormPositionSelect() {
                     </d-table>
                   </div>
                 </div>
-              </q-card>
-            </div>
+                <q-separator />
 
-            <div class="col-5">
-              <form @submit.prevent="validateFormPositionEdit">
-                <q-card
-                  bordered
-                  class="col-12"
-                  style="border: 1px solid #d6dee1"
-                >
-                  <div
-                    class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+                <q-card-actions class="bg-white q-pa-xs">
+                  <q-btn
+                    :icon="
+                      !isPosition
+                        ? 'mdi-arrow-right-drop-circle'
+                        : 'mdi-arrow-down-drop-circle'
+                    "
+                    flat
+                    round
+                    color="teal"
+                    class="q-ml-sm"
+                    @click="isPosition = !isPosition"
+                    ><q-tooltip>{{
+                      !isPosition
+                        ? "เลือกตำแหน่งที่ต้องการเพิ่ม"
+                        : "ปิดหน้าต่าง"
+                    }}</q-tooltip></q-btn
                   >
-                    เพิ่มข้อมูลตำแหน่ง
-                  </div>
-                  <div class="col-12"><q-separator /></div>
-                  <div class="row q-col-gutter-sm col-12 q-pa-sm">
-                    <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="
-                          !isDisValidate
-                            ? [
-                                (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="
-                          !isDisValidate
-                            ? [(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="
-                          !isDisValidate
-                            ? [(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="
-                          !isDisValidate
-                            ? [(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-separator />
-                  <q-card-actions
-                    align="right"
-                    class="bg-white text-teal q-pa-xs"
+                  <q-checkbox
+                    keep-color
+                    v-model="succession"
+                    label="สืบทอดตำแหน่ง"
+                    color="primary"
                   >
-                    <q-btn type="submit" label="เพิ่มตำแหน่ง" color="public" />
-                  </q-card-actions>
-                </q-card>
-              </form>
-            </div>
+                    <q-tooltip
+                      >สืบทอดตำแหน่ง</q-tooltip
+                    >
+                  </q-checkbox>
+                  <q-space />
+                  <q-btn type="submit" :label="`บันทึก`" color="public" />
+                </q-card-actions>
+              </q-card>
+            </form>
           </div>
-        </q-card-section>
-        <!-- <q-separator />
+        </div>
+
+        <div v-if="isPosition" class="row q-col-gutter-sm q-mt-sm">
+          <div class="col-12">
+            <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
+              <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
+                เลือกตำแหน่งที่ต้องการเพิ่ม
+                <q-btn
+                  icon="mdi-plus"
+                  flat
+                  round
+                  color="teal"
+                  @click="() => (modalAdd = true)"
+                  ><q-tooltip>สร้างตำแหน่ง</q-tooltip></q-btn
+                >
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="q-pa-sm">
+                <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>
+              </div>
+            </q-card>
+          </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> -->
-      </q-card>
-    </q-dialog>
-  </template>
+    </q-card>
+  </q-dialog>
+  <DialogAddPosition v-model:modalAdd="modalAdd" :emitSearch="emitSearch" />
 </template>