อัตรากำลังลูกจ้างชั่วคราว

src/modules/20_positionTemp/components/DialogAddPosition.vue

@@ -0,0 +1,232 @@
+<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 { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * importType
+ */
+import type {
+  ResGroup,
+  ResLevel,
+} from "@/modules/01_masterdata/interface/response/positionEmployee/Main";
+import type { DataOption } from "@/modules/20_positionTemp/interface/index/Main";
+import type { OptionType } from "@/modules/20_positionTemp/interface/response/organizational";
+
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modalAdd", { required: true });
+const isEditCheck = defineModel<boolean>("isEdit", { required: true });
+const props = defineProps({
+  emitSearch: Function,
+  getData: Function,
+  data: Object,
+  levelOp: Object,
+});
+
+//ข้อมูลตำแหน่ง
+const formDataPos = reactive({
+  posName: "", //ชือตำแหน่ง
+  posTypeName: "", //กลุ่มงาน
+  posLevelName: "", //ระดับชั้นงาน
+});
+
+const posTypeMain = ref<ResGroup[]>([]); //ข้อมูลกลุ่มงาน
+const posTypeOp = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const posLevelOp = ref<DataOption[]>([]); //รายการระดับชั้นงาน
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกข้อมุล
+ */
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    const body = {
+      posDictName: formDataPos.posName,
+      posTypeId: formDataPos.posTypeName,
+      posLevelId: formDataPos.posLevelName,
+    };
+    showLoader();
+    try {
+      const url = !isEditCheck.value
+        ? config.API.orgEmployeePos
+        : config.API.orgEmployeePosById(props?.data?.id);
+      await http[!isEditCheck.value ? "post" : "put"](url, body);
+      await props.emitSearch?.(formDataPos.posName, "positionName");
+      await success($q, "บันทีกข้อมูลสำเร็จ");
+      close();
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/**
+ * ฟังก์ชันปิด popup
+ */
+function close() {
+  modal.value = false;
+  isEditCheck.value = false;
+  formDataPos.posName = "";
+  formDataPos.posTypeName = "";
+  formDataPos.posLevelName = "";
+}
+
+/**
+ * ฟังก์ชันดึงข้อมุลกลุ่มงาน
+ */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgEmployeeType)
+    .then((res) => {
+      posTypeMain.value = res.data.result;
+      posTypeOp.value = res.data.result.map((e: OptionType) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันหาข้อมูลระดับชั้นงานตามกลุ่มงาน
+ * @param id  กลุ่มงาน
+ */
+function updatePosTypeName(id: string) {
+  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  posLevelOp.value =
+    posLevel?.posLevels.map((e: ResLevel) => ({
+      id: e.id,
+      name: e.posLevelName.toString(),
+    })) ?? [];
+  formDataPos.posLevelName = "";
+}
+
+/**
+ * ทำงานเมื่อ modal เป็น true
+ */
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value === true) {
+      await fetchType();
+
+      if (props.data) {
+        const dataList = props.data;
+        updatePosTypeName(dataList.posTypeId);
+
+        formDataPos.posName = dataList.posDictName;
+        formDataPos.posTypeName = dataList.posTypeId;
+        formDataPos.posLevelName = dataList.posLevelId;
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 50vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`${
+            isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`
+          }`"
+          :close="close"
+        />
+        <q-separator />
+
+        <q-card-section class="q-pa-none">
+          <div class="row q-col-gutter-sm col-12 q-pa-md">
+            <div class="col-12">
+              <q-input
+                ref="posNameRef"
+                v-model="formDataPos.posName"
+                dense
+                outlined
+                for="#positionName"
+                label="ชื่อตำแหน่ง"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
+                class="inputgreen"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posTypeNameRef"
+                label="กลุ่มงาน"
+                v-model="formDataPos.posTypeName"
+                :options="posTypeOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
+                @update:model-value="updatePosTypeName"
+                class="inputgreen"
+              />
+            </div>
+
+            <div class="col-6">
+              <q-select
+                ref="posLevelNameRef"
+                label="ระดับชั้นงาน"
+                v-model="formDataPos.posLevelName"
+                :disable="formDataPos.posTypeName === ''"
+                :options="posLevelOp"
+                emit-value
+                dense
+                map-options
+                outlined
+                option-label="name"
+                option-value="id"
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
+                class="inputgreen"
+              />
+            </div>
+          </div>
+
+          <q-separator />
+          <q-card-actions align="right" class="bg-white text-teal q-pa-sm">
+            <q-btn
+              type="submit"
+              :label="`${isEditCheck ? 'แก้ไขตำแหน่ง' : 'เพิ่มตำแหน่ง'}`"
+              color="public"
+            />
+          </q-card-actions>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/20_positionTemp/components/DialogFormPosition.vue

@@ -0,0 +1,727 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type {
+  FormDataPosition,
+  DataOption,
+  RowDetailPositions,
+  ListMenu,
+} from "@/modules/20_positionTemp/interface/index/Main";
+import type { FilterMaster } from "@/modules/20_positionTemp/interface/request/organizational";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogAddPosition from "@/modules/20_positionTemp/components/DialogAddPosition.vue"; //เพิ่มตำแหน่ง
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+  dialogMessageNotify,
+} = mixin;
+
+/**
+ * props
+ */
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+  orgLevel: Number,
+  treeId: String,
+  actionType: String,
+  rowId: { type: String, default: "" },
+  fetchDataTable: Function,
+  getSummary: Function,
+  shortName: { type: String, required: true },
+});
+
+const modalAdd = ref<boolean>(false); //เพิ่มข้อมูลตำแหน่ง
+const isEdit = ref<boolean>(false); //แก้ไขข้อมูล
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isPosition = ref<boolean>(false); //แสดงเลือกตำแหน่งที่ต้องการเพิ่ม
+const dataCopy = ref<RowDetailPositions>(); //ข้อมูลตำแหน่งที่ต้องการคัดลอก
+const search = ref<string>(""); //คำค้นหา
+const type = ref<string>("positionName");
+const optionFilter = ref<DataOption[]>([
+  { id: "positionName", name: "ชื่อตำแหน่ง" },
+  { id: "positionType", name: "กลุ่มงาน" },
+  { id: "positionLevel", name: "ระดับชั้นงาน" },
+]);
+
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "คัดลอก",
+    icon: "mdi-content-copy",
+    type: "copy",
+    color: "blue-6",
+  },
+  {
+    label: "แก้ไข",
+    icon: "mdi-pencil",
+    type: "edit",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "remove",
+    color: "red",
+  },
+]);
+
+const rows = ref<RowDetailPositions[]>([]); //รายกานข้อมูลอัตรากำลัง
+const rowsPositionSelect = ref<RowDetailPositions[]>([]); //รายการตำแหน่ง
+
+const formData = reactive<FormDataPosition>({
+  shortName: props.shortName,
+  prefixNo: "",
+  positionNo: "",
+  suffixNo: "",
+  reason: "",
+});
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posDictName",
+    align: "left",
+    label: "ชื่อตำแหน่ง",
+    sortable: true,
+    field: "posDictName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "posDictName",
+  "posTypeName",
+  "posLevelName",
+]);
+
+async function fetchPosition(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgPosPositionEmpById(id))
+    .then((res) => {
+      const data = res.data.result;
+
+      formData.prefixNo = data.posMasterNoPrefix;
+      formData.positionNo = data.posMasterNo;
+      formData.suffixNo = data.posMasterNoSuffix;
+      formData.reason = data.reason;
+      rows.value = data.positions.map((e: any) => ({
+        ...e,
+        posDictName: e.positionName,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ *  ฟังก์ชันบันทึกข่อมูลอัตรากำลัง
+ */
+function onSubmit() {
+  if (rows.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const positionsData = rows.value.map((e: any) => ({
+        posDictName: e.posDictName, //ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
+        posTypeId: e.posTypeId, //*ประเภทตำแหน่ง
+        posLevelId: e.posLevelId, //*ระดับตำแหน่ง
+      }));
+      const body = {
+        posMasterNoPrefix: formData.prefixNo, //*Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+        posMasterNo: Number(formData.positionNo), //*ตำแหน่งเลขที่ เป็นตัวเลข
+        posMasterNoSuffix: formData.suffixNo, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        reason: formData.reason, //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+        orgRootId: props.orgLevel === 0 ? props.treeId : null, //Id สำนัก
+        orgChild1Id: props.orgLevel === 1 ? props.treeId : null,
+        orgChild2Id: props.orgLevel === 2 ? props.treeId : null,
+        orgChild3Id: props.orgLevel === 3 ? props.treeId : null,
+        orgChild4Id: props.orgLevel === 4 ? props.treeId : null,
+        positions: positionsData,
+        isDirector: false,
+      };
+      try {
+        const url =
+          props.actionType === "ADD"
+            ? config.API.orgPosMasterEmp
+            : config.API.orgPosMasterByIdEmp(props.rowId);
+        await http[props.actionType === "ADD" ? "post" : "put"](url, body);
+        await props.getSummary?.();
+        await props.fetchDataTable?.(
+          reqMaster.value.id,
+          reqMaster.value.type,
+          false
+        );
+        await success($q, "บันทีกข้อมูลสำเร็จ");
+        close();
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+      }
+    });
+  }
+}
+
+/**
+ * ฟังก์ชันค้นหาข้อมูลตำแหน่ง
+ */
+const searchRef = ref<any>(null);
+async function searchInput() {
+  searchRef.value.validate();
+  if (!searchRef.value.hasError) {
+    showLoader();
+    await http
+      .get(
+        config.API.orgEmployeePos +
+          `?keyword=${search.value.trim()}&type=${type.value}`
+      )
+      .then((res) => {
+        rowsPositionSelect.value = res.data.result;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * คัดลอกข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function copyDetiail(data: RowDetailPositions) {
+  modalAdd.value = true;
+  dataCopy.value = data;
+}
+/**
+ * แก้ไขข้อมูล
+ * @param data ข้อมูลตำแหน่ง
+ */
+function editDetiail(data: RowDetailPositions) {
+  isEdit.value = true;
+  modalAdd.value = true;
+  dataCopy.value = data;
+}
+
+/**
+ * ฟังก์ชันเลือกตำแหน่ง
+ * @param data  ตำแหน่งที่เลือก
+ */
+function addPosition(data: RowDetailPositions) {
+  rows.value = [];
+  rows.value.push(data);
+}
+
+/**
+ * ฟังก์ชัยลบตำแหน่ง
+ * @param id  คำแหน่งีที่เลือก
+ */
+function deletePos(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.orgEmployeePosById(id))
+      .then(async () => {
+        await searchInput();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ฟังก์ชันปืด Popup
+ */
+function close() {
+  props.close?.();
+  isPosition.value = false;
+  search.value = "";
+  type.value = "positionName";
+}
+
+/**
+ * ฟังก์ชันค้นหาตำแหน่ง
+ * @param keyword คำค้นหา
+ * @param typeSelect ค้นหาจาก
+ */
+async function emitSearch(keyword: string, typeSelect: string) {
+  search.value = keyword;
+  type.value = typeSelect;
+  await searchInput();
+}
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      if (props.actionType === "ADD") {
+        rowsPositionSelect.value = [];
+        search.value = "";
+        rows.value = [];
+        formData.prefixNo = "";
+        formData.positionNo = "";
+        formData.suffixNo = "";
+      } else {
+        props.rowId && fetchPosition(props.rowId);
+      }
+    }
+  }
+);
+
+watch(
+  () => modalAdd.value,
+  () => {
+    if (!modalAdd.value) {
+      dataCopy.value = undefined;
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 80vw">
+      <DialogHeader
+        :tittle="
+          props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
+        "
+        :close="close"
+      />
+      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <q-card-section class="q-pa-sm fixed-height">
+          <div class="row q-col-gutter-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"
+                >
+                  ข้อมูลอัตรากำลัง
+                </div>
+                <div class="col-12"><q-separator /></div>
+                <div class="row q-col-gutter-sm col-12 q-pa-sm">
+                  <div class="row col-8 q-col-gutter-sm">
+                    <div class="col-12">
+                      <q-input
+                        v-model="formData.shortName"
+                        dense
+                        outlined
+                        readonly
+                        for="#shortName"
+                        label="อักษรย่อ"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <q-input
+                        v-model="formData.prefixNo"
+                        :class="inputEdit(isReadonly)"
+                        ref="prefixNoRef"
+                        dense
+                        outlined
+                        for="#prefixNo"
+                        label="Prefix เลขที่ตำเเหน่ง"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <q-input
+                        v-model="formData.positionNo"
+                        :class="inputEdit(isReadonly)"
+                        ref="positionNoRef"
+                        dense
+                        outlined
+                        for="#positionNo"
+                        label="ตำแหน่งเลขที่"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="[
+                          (val:string) => !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`,
+                        ]"
+                        mask="########################"
+                      />
+                    </div>
+                    <div class="col-4">
+                      <q-input
+                        v-model="formData.suffixNo"
+                        :class="inputEdit(isReadonly)"
+                        dense
+                        outlined
+                        for="#suffixNo"
+                        label="Suffix ตำแหน่งเลขที่"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-4">
+                    <q-input
+                      v-model="formData.reason"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#reason"
+                      label="หมายเหตุ"
+                      type="textarea"
+                      rows="4"
+                    />
+                  </div>
+
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      :columns="columns"
+                      :rows="rows"
+                      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-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props">
+                          <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-if="col.name === 'posExecutiveName'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+
+                            <div
+                              v-else-if="col.name === 'positionExecutiveField'"
+                            >
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else-if="col.name === 'posLevelName'">
+                              {{
+                                props.row.posLevelName
+                                  ? props.row.isSpecial == true
+                                    ? `${props.row.posLevelName} (ฉ)`
+                                    : props.row.posLevelName
+                                  : "-"
+                              }}
+                            </div>
+                            <div v-else-if="col.name === 'positionArea'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+                <q-separator />
+
+                <q-card-actions class="bg-white q-pa-xs">
+                  <q-btn
+                    :icon="!isPosition ? 'mdi-menu-right' : 'mdi-menu-down'"
+                    flat
+                    color="teal"
+                    class="q-ml-sm"
+                    label="เพิ่มตำแหน่ง"
+                    @click="isPosition = !isPosition"
+                    ><q-tooltip>{{
+                      !isPosition
+                        ? "คลิกเพื่อแสดงส่วนของการเพิ่มตำแหน่ง"
+                        : "ปิดหน้าต่างการเพิ่มตำแหน่ง"
+                    }}</q-tooltip></q-btn
+                  >
+                  <q-space />
+                </q-card-actions>
+              </q-card>
+            </div>
+          </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"
+                        v-model="search"
+                        outlined
+                        dense
+                        lazy-rules
+                        label="คำค้น"
+                        hide-bottom-space
+                        @keydown.enter.prevent="searchInput()"
+                      />
+                    </div>
+
+                    <div class="col-12 col-sm-6 col-md-3">
+                      <q-btn
+                        color="primary"
+                        icon="search"
+                        label="ค้นหา"
+                        class="full-width q-pa-sm"
+                        outline
+                        @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 auto-width></q-th>
+                          <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-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td auto-width>
+                            <q-btn
+                              flat
+                              dense
+                              color="secondary"
+                              icon="mdi-dots-horizontal-circle-outline"
+                              round
+                            >
+                              <q-menu
+                                transition-show="jump-down"
+                                transition-hide="jump-up"
+                              >
+                                <q-list
+                                  dense
+                                  v-for="(item, index) in listMenu"
+                                  :key="index"
+                                >
+                                  <q-item
+                                    clickable
+                                    v-close-popup
+                                    @click="
+                                      item.type === 'copy'
+                                        ? copyDetiail(props.row)
+                                        : item.type === 'edit'
+                                        ? editDetiail(props.row)
+                                        : deletePos(props.row.id)
+                                    "
+                                  >
+                                    <q-item-section
+                                      avatar
+                                      style="min-width: 0px"
+                                    >
+                                      <q-icon
+                                        :color="item.color"
+                                        :name="item.icon"
+                                        size="xs"
+                                      />
+                                    </q-item-section>
+                                    <q-item-section>{{
+                                      item.label
+                                    }}</q-item-section>
+                                  </q-item>
+                                </q-list>
+                              </q-menu>
+                            </q-btn>
+                          </q-td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                            @click="addPosition(props.row)"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{ props.rowIndex + 1 }}
+                            </div>
+                            <div v-else-if="col.name === 'posExecutiveName'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+
+                            <div
+                              v-else-if="col.name === 'positionExecutiveField'"
+                            >
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else-if="col.name === 'posLevelName'">
+                              {{
+                                props.row.posLevelName
+                                  ? props.row.isSpecial == true
+                                    ? `${props.row.posLevelName} (ฉ)`
+                                    : props.row.posLevelName
+                                  : "-"
+                              }}
+                            </div>
+
+                            <div v-else-if="col.name === 'positionArea'">
+                              {{ col.value ? col.value : "-" }}
+                            </div>
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- เพิ่มตำแหน่ง -->
+  <DialogAddPosition
+    v-model:modalAdd="modalAdd"
+    v-model:is-edit="isEdit"
+    :get-data="searchInput"
+    :emit-search="emitSearch"
+    :data="dataCopy"
+  />
+</template>
+
+<style scoped>
+.fixed-height {
+  overflow-y: auto;
+  height: 80vh;
+}
+</style>

src/modules/20_positionTemp/components/DialogHistoryPos.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { HistoryPos } from "@/modules/20_positionTemp/interface/response/organizational";
+
+/**
+ * importCompoonents
+ */
+import Header from "@/components/DialogHeader.vue";
+
+/**
+ * use
+ */
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const $q = useQuasar();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  rowId: {
+    type: String,
+  },
+});
+
+const rows = ref<HistoryPos[]>([]); //รายการแก้ไขประวัติ
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgShortName",
+    align: "left",
+    label: "อักษรย่อ",
+    sortable: true,
+    field: "orgShortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    field: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoPrefix",
+    align: "left",
+    label: " Prefix ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posMasterNoPrefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoSuffix",
+    align: "left",
+    label: "Suffix ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posMasterNoSuffix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/**
+ *  function เรียกข้อมูลประวัติตำแหน่ง
+ * @param id
+ */
+function fetchHistoryPos(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgPosHistory(id))
+    .then((res) => {
+      const data: HistoryPos[] = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * callback function ทำงานเมื่อ   modal === true
+ */
+watch(
+  () => modal.value,
+  () => {
+    modal.value && props.rowId && fetchHistoryPos(props.rowId);
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <Header
+        :tittle="'ประวัติตำแหน่ง'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm">
+        <d-table
+          flat
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="id"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-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'">
+                  {{
+                    store.typeOrganizational === "current"
+                      ? props.rowIndex + 1
+                      : props.rowIndex + 1 == 1
+                      ? "1 (แบบร่าง)"
+                      : props.rowIndex + 1 == 2
+                      ? "2 (ปัจจุบัน)"
+                      : props.rowIndex + 1
+                  }}
+                </div>
+
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/20_positionTemp/components/DialogMovePos.vue

@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type {
+  OrgTree,
+  PosMaster2,
+} from "@/modules/20_positionTemp/interface/response/organizational";
+import type {
+  MovePos,
+  FilterMaster,
+} from "@/modules/20_positionTemp/interface/request/organizational";
+import type { DataTree } from "@/modules/20_positionTemp/interface/index/organizational";
+
+/**
+ * importCompoonents
+ */
+import HeaderDialog from "@/components/DialogHeader.vue";
+
+/**
+ * import*Store
+ */
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
+const columns = defineModel<QTableProps[]>("columns", {});
+const rows = defineModel<PosMaster2[]>("rows", { required: true });
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  rowId: {
+    type: String,
+    required: true,
+  },
+  mainTree: {
+    type: Object,
+    required: true,
+  },
+  fetchDataTable: Function,
+});
+
+const title = ref<string>("ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน");
+const filterTree = ref<string>("");
+const filterRef = ref();
+const selectedTree = ref<string>("");
+const levelTree = ref<number>(0);
+
+const filterTable = ref<string>("");
+const selectedFilter = ref<PosMaster2[]>([]);
+
+/**
+ * function รีเช็ด filter
+ */
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+/**
+ * function เลือกข้อมูลหน่วยงาน
+ */
+function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+}
+
+const isDisable = computed(() => {
+  if (selectedTree.value === "" && selectedFilter.value.length === 0) {
+    return true;
+  } else return false;
+});
+
+/**
+ * function ยืนยันการย้ายแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน
+ */
+function onClickMovePos() {
+  if (selectedTree.value === "" || selectedTree.value === null) {
+    dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
+  } else if (selectedFilter.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแห่นงที่จะย้าย");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        const position = selectedFilter.value.map((e: PosMaster2) => e.id);
+        const body: MovePos = {
+          id: selectedTree.value,
+          type: levelTree.value,
+          positionMaster: position,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosMoveEmp, body)
+          .then(async () => {
+            await props.fetchDataTree?.(store.activeId);
+            await success($q, "ย้ายตำแหน่งสำเร็จ");
+            modal.value = false;
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการย้ายตำแหน่ง",
+      "ต้องการยืนยันการย้ายตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+const pagination = ref({
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
+});
+
+function onSearchData() {
+  reqMaster.value.page = 1;
+  reqMaster.value.keyword = filterTable.value;
+  props.fetchDataTable?.(store.treeId, store.level, false);
+}
+
+watch(
+  () => modal.value,
+  () => {
+    reqMaster.value.page = 1;
+    filterTree.value = "";
+    filterTable.value = "";
+    pagination.value.rowsPerPage = reqMaster.value.pageSize;
+
+    title.value = `ย้ายตำแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน ${props.mainTree.orgName}`;
+    if (modal.value && props.type === "SINGER") {
+      const data = rows.value.filter((e: PosMaster2) => e.id === props.rowId);
+      selectedFilter.value = data;
+      selectedTree.value = "";
+    } else {
+      selectedFilter.value = [];
+      selectedTree.value = "";
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-layout
+      view="lHh lpr lFf"
+      container
+      style="height: 90vh"
+      class="bg-white"
+    >
+      <q-header>
+        <q-toolbar>
+          <HeaderDialog
+            :tittle="title"
+            :close="() => ((modal = false), (reqMaster.keyword = ''))"
+          />
+        </q-toolbar>
+        <q-separator color="grey-4" />
+      </q-header>
+
+      <q-page-container>
+        <q-page class="q-pa-md">
+          <div class="row">
+            <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกตำแหน่งที่ต้องการย้าย</q-toolbar-title
+                >
+                <q-space />
+
+                <div>
+                  <q-input
+                    outlined
+                    dense
+                    v-model="filterTable"
+                    label="ค้นหา"
+                    @keydown.enter="onSearchData"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="search" />
+                    </template>
+                  </q-input>
+                </div>
+              </q-toolbar>
+
+              <div class="col-12">
+                <d-table
+                  flat
+                  bordered
+                  :rows="rows"
+                  :columns="columns"
+                  row-key="id"
+                  no-data-label="ไม่มีข้อมูล"
+                  selection="multiple"
+                  v-model:selected="selectedFilter"
+                  :rows-per-page-options="[10, 25, 50, 100]"
+                  v-model:pagination="pagination"
+                  @update:pagination="updatePagination"
+                >
+                  <template v-slot:header-selection="scope">
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="scope.selected"
+                    />
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props">
+                      <q-td>
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
+
+                      <q-td
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <div v-if="col.name == 'no'">
+                          {{
+                            (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                            props.rowIndex +
+                            1
+                          }}
+                        </div>
+
+                        <div v-else>
+                          {{ col.value }}
+                        </div>
+                      </q-td>
+                    </q-tr>
+                  </template>
+                  <template v-slot:pagination="scope">
+                    <q-pagination
+                      v-model="reqMaster.page"
+                      active-color="primary"
+                      color="dark"
+                      :max="totalPage"
+                      :max-pages="5"
+                      size="sm"
+                      boundary-links
+                      direction-links
+                    ></q-pagination>
+                  </template>
+                </d-table>
+              </div>
+            </q-card>
+
+            <q-card
+              bordered
+              class="col-12 col-sm-4 scroll q-pa-sm"
+              style="height: 75vh"
+            >
+              <q-toolbar style="padding: 0">
+                <q-toolbar-title class="text-subtitle2 text-bold"
+                  >เลือกหน่วยงาน/ส่วนราชการปลายทาง</q-toolbar-title
+                >
+              </q-toolbar>
+
+              <q-input
+                ref="filterRef"
+                dense
+                outlined
+                v-model="filterTree"
+                label="ค้นหา"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+              <q-tree
+                class="q-pa-md q-gutter-sm"
+                dense
+                selected-color="primary"
+                :nodes="nodeTree"
+                node-key="orgTreeId"
+                label-key="labelName"
+                :filter="filterTree.trim()"
+                no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                no-nodes-label="ไม่มีข้อมูล"
+              >
+                <template v-slot:default-header="prop">
+                  <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                  <q-item
+                    clickable
+                    :active="selectedTree == prop.node.orgTreeId"
+                    @click.stop="updateSelected(prop.node)"
+                    active-class="my-list-link text-primary text-weight-medium"
+                    class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                  >
+                    <div>
+                      <div class="text-weight-medium">
+                        {{ prop.node.orgTreeName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.orgCode == null ? null : prop.node.orgCode
+                        }}
+                        {{
+                          prop.node.orgTreeShortName == null
+                            ? null
+                            : prop.node.orgTreeShortName
+                        }}
+                      </div>
+                    </div>
+                  </q-item>
+                </template>
+              </q-tree>
+            </q-card>
+          </div>
+        </q-page>
+      </q-page-container>
+
+      <q-footer>
+        <q-separator color="grey-4" />
+        <q-toolbar class="fit row wrap justify-end items-start content-start">
+          <q-btn
+            unelevated
+            label="ย้ายตำแหน่ง"
+            color="public"
+            @click="onClickMovePos"
+            class="q-px-md"
+            :disable="isDisable"
+          >
+            <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+          </q-btn>
+        </q-toolbar>
+      </q-footer>
+    </q-layout>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/20_positionTemp/components/DialogPositionDetail.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**use*/
+const $q = useQuasar();
+
+/**Props*/
+const modal = defineModel<boolean>("positionDetail", { required: true });
+const prosp = defineProps({
+  dataDetailPos: { type: Object, require: true },
+});
+
+/** function ปิด popup*/
+function close() {
+  modal.value = false;
+}
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card :style="$q.screen.gt.md ? 'min-width: 40vw' : 'min-width: 80vw'">
+        <DialogHeader :tittle="`รายละเอียดตำแหน่ง`" :close="close" />
+        <q-separator />
+        <q-card-section>
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>กลุ่มงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ prosp?.dataDetailPos?.posTypeName }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ตำแหน่ง</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ prosp?.dataDetailPos?.positionName }}</p>
+              </div>
+            </div>
+
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="col-4 text-bold">
+                <div>
+                  <p>ระดับชั้นงาน</p>
+                </div>
+              </div>
+              <div class="col-8 text-grey-8">
+                <p>{{ prosp?.dataDetailPos?.posLevelName }}</p>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>

src/modules/20_positionTemp/components/DialogSelectPerson.vue

@@ -0,0 +1,731 @@
+<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 { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type {
+  Position,
+  SeaechResult,
+  FormPositionFilter,
+} from "@/modules/20_positionTemp/interface/index/organizational";
+import type {
+  DataOption,
+  NewPagination,
+} from "@/modules/20_positionTemp/interface/index/Main";
+import type {
+  OptionType,
+  OptionLevel,
+  SelectPerson,
+  TypePos,
+} from "@/modules/20_positionTemp/interface/response/organizational";
+
+/**
+ * importCompoonents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  dialogConfirm,
+  showLoader,
+  success,
+  hideLoader,
+  messageError,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchActive: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    required: true,
+  },
+  getSummary: {
+    type: Function,
+    required: true,
+  },
+  dataDetailPos: { type: Object, require: true },
+});
+
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const typeOpsMain = ref<DataOption[]>([]); //ข้อมูลกลุ่มงาน
+const levelOpsMain = ref<DataOption[]>([]); //ข้อมูลระดับกลุ่มงาน
+const typeOps = ref<DataOption[]>([]); //รายการกลุ่มงาน
+const levelOps = ref<DataOption[]>([]); //รายการระดับกลุ่มงาน
+const dataLevel = ref<TypePos[]>([]);
+const selected = ref<Position[]>([]); //ตำแหน่งที่เลือก
+const isSit = ref<boolean>(false);
+
+const formData = reactive<FormPositionFilter>({
+  positionNo: "", //*ตำแหน่งเลขที่
+  positionType: "", //*ตำแหน่งเลขที่
+  positionLevel: "", //*ตำแหน่งเลขที่
+  personal: "", //*ตำแหน่งเลขที่
+  position: "", //*ตำแหน่งเลขที่
+  status: "",
+});
+
+/**
+ * ข้อมูล Table
+ */
+const row = ref<Position[]>([]);
+const rowResult = ref<SeaechResult[]>([]);
+const visibleColumnsResult = ref<String[]>([
+  "no",
+  "citizenId",
+  "name",
+  "posTypeName",
+  "posLevelName",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsResult = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขบัตรประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/**
+ * function closePopup
+ */
+function close() {
+  modal.value = false;
+  clearForm();
+}
+
+/**
+ *  function เรียกข้อมูลประเภทตำแหน่ง
+ */
+async function fetchType() {
+  showLoader();
+  await http
+    .get(config.API.orgEmployeeType)
+    .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();
+    });
+}
+
+/**
+ * ส่งค่า css ออกไปตามเงื่อนไข
+ * @param val true/false
+ */
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer inputgreen ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * function เรียกข้แมูลระดับตำแหน่ง
+ */
+function updateSelectType(val: string) {
+  const listLevel: any = dataLevel.value.find((e: TypePos) => e.id === val);
+  levelOpsMain.value = listLevel?.posLevels.map((e: OptionLevel) => ({
+    id: e.id,
+    name: e.posLevelName,
+  }));
+  levelOps.value = levelOpsMain.value;
+  formData.positionLevel = "";
+}
+
+/**
+ * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ */
+function validateForm() {
+  if (selected.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกรายการตำแหน่ง");
+  } else if (selectedProfile.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกคนครอง");
+  } else {
+    onSubmit();
+  }
+}
+
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    () => {
+      const body = {
+        posMaster: props.dataDetailPos?.id, //*id อัตรากำลัง
+        position: selected.value[0]?.id, //*id ตำแหน่ง
+        profileId: selectedProfile.value[0]?.id, //*id profile
+        isSit: isSit.value, //*นั่งทับที่ไหม
+      };
+      showLoader();
+      http
+        .post(config.API.orgProfileEmp, body)
+        .then(async () => {
+          await props.fetchDataTable?.(store.treeId, store.level, false);
+          await props.getSummary();
+          await success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(async () => {
+          modal.value = await false;
+          close();
+          hideLoader();
+        });
+    },
+    "ยืนยันการเลือกคนครอง",
+    "ต้องการยืนยันการเลือกคนครองตำแหน่งนี้ใช่หรือไม่?"
+  );
+}
+
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const totalPage = ref<number>(0);
+const selectedProfile = ref<SeaechResult[]>([]);
+
+/**
+ * functiuon ค้นหาคนครอง
+ */
+function searchData() {
+  showLoader();
+  const reqBody = {
+    posTypeId: formData.positionType, // id ประเภทตำแหน่ง
+    posLevelId: formData.positionLevel, // id ระดับตำแหน่ง
+    position: formData.position, // ตำแหน่ง
+    page: page.value, //*หน้า
+    pageSize: pageSize.value, //*จำนวนแถวต่อหน้า
+    keyword: formData.personal, //นามสกุล ชื่อ สกุล เลขบัตร
+  };
+  http
+    .post(config.API.orgSearchProfileEmp, reqBody)
+    .then((res) => {
+      totalPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      const list = res.data.result.data.map((e: SelectPerson) => ({
+        id: e.id,
+        citizenId: e.citizenId,
+        name: `${e.prefix + e.firstName + " " + e.lastName}`,
+        posTypeName: e.posType ?? "-",
+        positionName: e.position ?? "-",
+        posLevelName: e.posLevel ?? "-",
+      }));
+      rowResult.value = list;
+    })
+
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getSearch() {
+  page.value = 1;
+  searchData();
+}
+
+/**
+ * function update PageSize
+ */
+function updatePagination(newPagination: NewPagination) {
+  pageSize.value = newPagination.rowsPerPage;
+  page.value = 1;
+}
+
+/**
+ * function เคลียร์Form
+ */
+function clearForm() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+  formData.personal = "";
+  formData.position = "";
+  row.value = [];
+  rowResult.value = [];
+  selected.value = [];
+  selectedProfile.value = [];
+  isSit.value = false;
+}
+
+/**
+ * function เคลียร์ตำแหน่ง
+ */
+function clearPosition() {
+  formData.positionType = "";
+  formData.positionLevel = "";
+}
+
+/**
+ * callback function ทำงานเมื่อเปิด popup
+ */
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value == true) {
+      await fetchType();
+
+      if (props.dataDetailPos) {
+        formData.positionNo = props.dataDetailPos.posMasterNo;
+        formData.status =
+          store.typeOrganizational === "current"
+            ? "ปกติ"
+            : store.typeOrganizational === "draft"
+            ? "แบบร่าง"
+            : "ยุบเลิก";
+        row.value = props.dataDetailPos.positions.map((e: Position) => ({
+          ...e,
+          positionName: e.positionName ? e.positionName : "-",
+          positionField: e.positionField ? e.positionField : "-",
+          posTypeName: e.posTypeName ? e.posTypeName : "-",
+          posLevelName: e.posLevelName ? e.posLevelName : "-",
+          posExecutiveName: e.posExecutiveName ? e.posExecutiveName : "-",
+          positionExecutiveField: e.positionExecutiveField
+            ? e.positionExecutiveField
+            : "-",
+          positionArea: e.positionArea ? e.positionArea : "-",
+        }));
+        if (row.value.length === 1) {
+          selected.value.push(row.value[0]);
+        }
+      }
+    }
+  }
+);
+
+watch(
+  () => pageSize.value,
+  async () => {
+    getSearch();
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 80vw">
+      <form @submit.prevent="validateForm">
+        <DialogHeader :tittle="`เลือกคนครอง`" :close="close" />
+        <q-separator />
+
+        <q-card-section class="fixed-height">
+          <div class="q-px-md">
+            <div class="row q-col-gutter-sm q-mb-xs">
+              <div class="text-bold text-body1">
+                <p>ตำแหน่งเลขที่</p>
+              </div>
+              <div class="text-grey-8 q-ml-sm text-body1">
+                <p>{{ formData.positionNo }}</p>
+              </div>
+            </div>
+
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-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 col-12">
+                <d-table
+                  flat
+                  :columns="columns"
+                  :rows="row"
+                  row-key="id"
+                  dense
+                  hide-pagination
+                  class="custom-header-table"
+                  selection="single"
+                  v-model:selected="selected"
+                >
+                  <template v-slot:header-selection="scope">
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="scope.checkBox"
+                    />
+                  </template>
+                  <template v-slot:header="props">
+                    <q-tr :props="props">
+                      <q-th class="text-center"> </q-th>
+
+                      <q-th
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                      >
+                        <span class="text-weight-medium">{{ col.label }}</span>
+                      </q-th>
+                    </q-tr>
+                  </template>
+                  <template v-slot:body="props">
+                    <q-tr :props="props" class="cursor-pointer">
+                      <q-td class="text-center">
+                        <q-checkbox
+                          keep-color
+                          color="primary"
+                          dense
+                          v-model="props.selected"
+                        />
+                      </q-td>
+
+                      <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-tr>
+                  </template>
+                </d-table>
+              </div>
+            </q-card>
+
+            <q-card
+              bordered
+              class="row col-12 q-mt-sm"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ค้นหาคนครอง
+              </div>
+              <div class="col-12"><q-separator /></div>
+              <div class="col-12">
+                <div class="row q-col-gutter-sm q-pa-sm">
+                  <div class="col-2">
+                    <q-input
+                      ref="positionExecutiveFieldRef"
+                      v-model="formData.personal"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#search"
+                      label="ค้นหาจากชื่อ-นามสกุล หรือเลขประจำตัวประชาชน"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-2">
+                    <q-input
+                      ref="positionRef"
+                      v-model="formData.position"
+                      :class="inputEdit(isReadonly)"
+                      dense
+                      outlined
+                      for="#position"
+                      label="ตำแหน่ง"
+                      lazy-rules
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-2">
+                    <q-select
+                      ref="positionTypeRef"
+                      :class="inputEdit(isReadonly)"
+                      label="กลุ่มงาน"
+                      v-model="formData.positionType"
+                      :options="typeOps"
+                      emit-value
+                      dense
+                      @update:model-value="updateSelectType"
+                      map-options
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      lazy-rules
+                      hide-bottom-space
+                      ><template v-if="formData.positionType" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="clearPosition()"
+                          class="cursor-pointer"
+                        /> </template
+                    ></q-select>
+                  </div>
+                  <div class="col-2">
+                    <q-select
+                      ref="positionLevelRef"
+                      :class="inputEdit(isReadonly)"
+                      label="ระดับชั้นงาน"
+                      v-model="formData.positionLevel"
+                      :disable="formData.positionType == ''"
+                      :options="levelOps"
+                      emit-value
+                      dense
+                      map-options
+                      outlined
+                      option-label="name"
+                      option-value="id"
+                      lazy-rules
+                      hide-bottom-space
+                    >
+                      <template v-if="formData.positionLevel" v-slot:append>
+                        <q-icon
+                          name="cancel"
+                          @click.stop.prevent="formData.positionLevel = ''"
+                          class="cursor-pointer"
+                        /> </template
+                    ></q-select>
+                  </div>
+                  <div class="col-2">
+                    <q-btn
+                      label="ค้นหา"
+                      color="teal-5"
+                      class="full-height"
+                      icon="search"
+                      @click="getSearch()"
+                    />
+                  </div>
+
+                  <q-select
+                    for="#select"
+                    v-model="visibleColumnsResult"
+                    multiple
+                    outlined
+                    dense
+                    options-dense
+                    :display-value="$q.lang.table.columns"
+                    emit-value
+                    map-options
+                    :options="columnsResult"
+                    option-value="name"
+                    
+                    style="min-width: 140px"
+                    class="col-xs-12 col-sm-3 col-md-2"
+                  />
+                  <div class="col-12">
+                    <d-table
+                      ref="table"
+                      flat
+                      :columns="columnsResult"
+                      :rows="rowResult"
+                      row-key="id"
+                      dense
+                      class="custom-header-table"
+                      :paging="true"
+                      :rows-per-page-options="[10, 25, 50, 100]"
+                      @update:pagination="updatePagination"
+                      selection="single"
+                      v-model:selected="selectedProfile"
+                      :visible-columns="visibleColumnsResult"
+                    >
+                      <template v-slot:header="props">
+                        <q-tr :props="props">
+                          <q-th auto-width />
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <span class="text-weight-medium">{{
+                              col.label
+                            }}</span>
+                          </q-th>
+                        </q-tr>
+                      </template>
+                      <template v-slot:body="props">
+                        <q-tr :props="props" class="cursor-pointer">
+                          <q-td>
+                            <q-checkbox
+                              keep-color
+                              color="primary"
+                              dense
+                              v-model="props.selected"
+                            />
+                          </q-td>
+                          <q-td
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            <div v-if="col.name == 'no'">
+                              {{
+                                (page - 1) * Number(pageSize) +
+                                props.rowIndex +
+                                1
+                              }}
+                            </div>
+
+                            <div v-else>
+                              {{ col.value }}
+                            </div>
+                          </q-td>
+                        </q-tr>
+                      </template>
+                      <template v-slot:pagination="scope">
+                        <q-pagination
+                          v-model="page"
+                          active-color="primary"
+                          color="dark"
+                          :max="totalPage"
+                          :max-pages="5"
+                          size="sm"
+                          boundary-links
+                          direction-links
+                          @update:model-value="searchData"
+                        ></q-pagination>
+                      </template>
+                    </d-table>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+
+            <div class="row col-12 q-pa-sm">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isSit"
+                label="นั่งทับตำแหน่ง"
+              />
+            </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>
+
+<style scoped>
+.fixed-height {
+  overflow-y: auto;
+  height: 80vh;
+}
+</style>

src/modules/20_positionTemp/components/DialogSortPosition.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataSortPos } from "@/modules/02_organization/interface/index/organizational";
+
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = usePositionEmp();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("sortPosition", { required: true });
+const props = defineProps({
+  fetchDataTable: Function,
+});
+
+/** ข้อมูล Table*/
+const rows = ref<DataSortPos[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    required: true,
+    label: "ชื่อ",
+    align: "left",
+    field: "name",
+    sortable: true,
+  },
+]);
+
+/**
+ * fiunction จัดลำดับ
+ * @param from ตำแหน่งปัจุบัน
+ * @param to ตำแหน่งที่จะย้ายไป
+ */
+function onDrop(from: number, to: number) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+/**
+ * function บันทึกการจัดลำดับ
+ */
+function save() {
+  dialogConfirm($q, () => {
+    const data = rows.value;
+    const dataId = data.map((item: DataSortPos) => item.id);
+    showLoader();
+    http
+      .post(config.API.orgPosSortEmp, {
+        id: store.treeId,
+        type: store.level,
+        sortId: dataId,
+      })
+      .then(async () => {
+        await props.fetchDataTable?.(store.treeId, store.level, false);
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function เรียกรายการข้อมูลตำแหน่ง
+ */
+function getData() {
+  showLoader();
+  http
+    .post(config.API.orgPosMasterListEmp, {
+      id: store.treeId,
+      type: store.level,
+      isAll: false,
+      page: 1,
+      pageSize: 100,
+      keyword: "",
+      revisionId: store.activeId,
+    })
+    .then((res) => {
+      const dataList = res.data.result.data;
+
+      const dataMap = dataList.map((item: any) => ({
+        id: item.id,
+        name: `${item.orgShortname}${
+          item.posMasterNoPrefix ? item.posMasterNoPrefix : ""
+        }${item.posMasterNo ? item.posMasterNo : ""}${
+          item.posMasterNoSuffix ? item.posMasterNoSuffix : ""
+        } ${item.fullNameCurrentHolder ? item.fullNameCurrentHolder : ""}`,
+        posMasterNoPrefix: item.posMasterNoPrefix,
+        posMasterNo: item.posMasterNo,
+        posMasterNoSuffix: item.posMasterNoSuffix,
+      }));
+      rows.value = dataMap;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * callback function ทำงานเมื่อ modal = true ทำการเรียกข้อมูลตำแหน่ง
+ */
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      getData();
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 50vw">
+        <DialogHeader
+          :tittle="`จัดลำดับตำแหน่ง`"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+
+        <q-card-section style="max-height: 70vh" class="scroll">
+          <q-table
+            v-if="rows.length > 0"
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'th,td',
+              },
+              onDrop,
+            }"
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[100]"
+            row-key="orgTreeId"
+            hide-bottom
+            hide-pagination
+            hide-header
+          />
+          <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            :disable="rows.length === 0"
+            type="submit"
+            :label="`บันทึก`"
+            color="public"
+            @click="save"
+          >
+            <q-tooltip>บันทึก</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>

src/modules/20_positionTemp/components/DialogSuccession.vue

@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/20_positionTemp/interface/index/Main";
+import type { DataTree } from "@/modules/20_positionTemp/interface/index/organizational";
+import type {
+  OrgTree,
+  PosMaster,
+} from "@/modules/20_positionTemp/interface/response/organizational";
+import type {
+  FilterMaster,
+  Inherit,
+} from "@/modules/20_positionTemp/interface/request/organizational";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = useCounterMixin();
+const route = useRoute();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  rowId: { type: String, default: "" },
+});
+
+/*************************** Tree ***********************************/
+const filterTree = ref<string>("");
+const nodeTree = ref<OrgTree[]>([]);
+const selectedTree = ref<string>("");
+const filterRef = ref();
+const levelTree = ref<number>(0);
+
+/**
+ * function เรียกข้อมูล Tree แบบ ปัจจุบัน
+ */
+async function fetchTree() {
+  showLoader();
+  const id: string = store.activeId ? store.activeId?.toString() : "";
+  await http
+    .get(config.API.orgByIdSystem(id, route.meta.Key as string))
+    .then((res) => {
+      nodeTree.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * resetFilterTree
+ */
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+/**
+ * function เลือกหน่วยงาน
+ */
+async function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+  reqMaster.id = data.orgTreeId;
+  reqMaster.type = data.orgLevel;
+  await fetchTable();
+}
+
+/*************************** TABLE ***********************************/
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<PosMaster[]>([]);
+const reqMaster = reactive<FilterMaster>({
+  id: "",
+  type: 0,
+  isAll: false,
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+  revisionId: store.activeId,
+});
+const totalRow = ref<number>(0);
+const selectedPos = ref<PosMaster[]>([]);
+
+/**
+ * function เรียกข้อมูล Table Position
+ */
+async function fetchTable() {
+  selectedPos.value = [];
+  await http
+    .post(config.API.orgPosMasterList, reqMaster)
+    .then((res) => {
+      totalRow.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
+      const data = res.data.result.data;
+      const list = data.map((e: PosMaster) => ({
+        ...e,
+        posMasterNo:
+          (e.orgShortname !== null ? e.orgShortname : "") +
+          (e.posMasterNoPrefix ? e.posMasterNoPrefix : "") +
+          (e.posMasterNo !== null ? e.posMasterNo : "") +
+          (e.posMasterNoSuffix !== null ? e.posMasterNoPrefix : ""),
+      }));
+      rows.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.pageSize = newPagination.rowsPerPage;
+  reqMaster.page = 1;
+}
+
+/** 
+ funcion ค้นหาข้อมูลใน Table
+ */
+async function filterKeyword() {
+  reqMaster.page = await 1;
+  await fetchTable();
+}
+
+/**
+ * function ยืนยันกาสืบทอดตำแหน่ง
+ */
+function onClickConfirm() {
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่งสืบทอด");
+  } else {
+    dialogConfirm(
+      $q,
+      async () => {
+        const body: Inherit = {
+          draftPositionId: props.rowId,
+          publishPositionId: selectedPos.value[0].id,
+        };
+        showLoader();
+        await http
+          .post(config.API.orgPosDNA, body)
+          .then(() => {
+            success($q, "การสืบทอดตำแหน่งสำเร็จ");
+            modal.value = false;
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      },
+      "ยืนยันการสืบทอดตำแหน่ง",
+      "ต้องการยืนยันการสืบทอดตำแหน่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+/**
+ * callblck function ทำการ fetch ข้อมูล tree เมื่อเปิด popup
+ */
+watch(
+  () => modal.value,
+  () => {
+    modal.value ? fetchTree() : clearForm();
+  }
+);
+
+/**
+ * callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า
+ */
+watch([() => reqMaster.page, () => reqMaster.pageSize], async () => {
+  await fetchTable();
+});
+
+/**
+ *  function clear ข้อมูล
+ */
+function clearForm() {
+  nodeTree.value = [];
+  rows.value = [];
+  selectedTree.value = "";
+  reqMaster.id = "";
+  reqMaster.type = 0;
+  reqMaster.isAll = false;
+  reqMaster.page = 1;
+  reqMaster.pageSize = 10;
+  reqMaster.keyword = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <Header
+        :tittle="'เลือกตำแหน่งที่ต้องการสืบทอดจากโครงสร้างปัจจุบัน'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm bg-grey-2">
+        <div class="row">
+          <q-card
+            bordered
+            class="col-12 col-sm-4 scroll q-pa-sm"
+            style="height: 75vh"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="resetFilter"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-md q-gutter-sm"
+              dense
+              default-expand-all
+              selected-color="primary"
+              :nodes="nodeTree"
+              node-key="orgTreeId"
+              label-key="labelName"
+              :filter="filterTree.trim()"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:default-header="prop">
+                <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+
+                <q-item
+                  clickable
+                  :active="selectedTree == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card bordered class="col-12 col-sm-8 q-pa-sm">
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกตำแหน่งที่ต้องการสืบทอด</q-toolbar-title
+              >
+              <q-space />
+
+              <div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="reqMaster.keyword"
+                  label="ค้นหา"
+                  @keyup.enter="filterKeyword"
+                />
+              </div>
+            </q-toolbar>
+            <div class="col-12">
+              <d-table
+                flat
+                bordered
+                :rows="rows"
+                :columns="columns"
+                row-key="id"
+                no-data-label="ไม่มีข้อมูล"
+                ref="table"
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                @update:pagination="updatePagination"
+                selection="single"
+                v-model:selected="selectedPos"
+              >
+                <template v-slot:header-selection="scope">
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="scope.selected"
+                  />
+                </template>
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width></q-th>
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td>
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="props.selected"
+                      />
+                    </q-td>
+
+                    <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-tr>
+                </template>
+                <template v-slot:pagination="scope">
+                  <q-pagination
+                    v-model="reqMaster.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="totalRow"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </div>
+          </q-card>
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm">
+          <q-tooltip>สืบทอดตำแหน่ง</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>

src/modules/20_positionTemp/components/TableMain.vue

@@ -0,0 +1,737 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+import genreport from "@/plugins/genreportxlsx";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type {
+  ListMenu,
+  NewPagination,
+  DataDocumentList,
+} from "@/modules/20_positionTemp/interface/index/Main";
+import type { FilterMaster } from "@/modules/20_positionTemp/interface/request/organizational";
+import type { PosMaster2 } from "@/modules/20_positionTemp/interface/response/organizational";
+import type { DataPosition } from "@/modules/20_positionTemp/interface/index/organizational";
+
+/**
+ * importComponents
+ */
+import DialogFormPosotion from "@/modules/20_positionTemp/components/DialogFormPosition.vue";
+import DialogPositionDetail from "@/modules/20_positionTemp/components/DialogPositionDetail.vue";
+import DialogSort from "@/modules/20_positionTemp/components/DialogSortPosition.vue";
+import DialogMovePos from "@/modules/20_positionTemp/components/DialogMovePos.vue";
+import DialogHistoryPos from "@/modules/20_positionTemp/components/DialogHistoryPos.vue";
+import DialogSelectPerson from "@/modules/20_positionTemp/components/DialogSelectPerson.vue";
+import DialogSuccession from "@/modules/20_positionTemp/components/DialogSuccession.vue";
+
+/**
+ * ues
+ */
+const $q = useQuasar();
+const store = usePositionEmp();
+const { showLoader, hideLoader, messageError, success, dialogRemove } =
+  useCounterMixin();
+
+/**
+ * prosp
+ */
+const nodeTree = defineModel<any>("nodeTree", { required: true });
+const orgLevel = defineModel<number>("orgLevel", { required: true });
+const treeId = defineModel<string>("treeId", { required: true });
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
+const totalPage = defineModel<number>("totalPage", { required: true });
+const totalData = defineModel<number>("totalData", { required: true });
+const posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
+const props = defineProps({
+  filterKeyword: { type: Function, require: true, default: () => {} },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  shortName: { type: String, required: true },
+  fetchDataTree: {
+    type: Function,
+    require: true,
+    default: () => {},
+  },
+  mainTree: {
+    type: Object,
+    require: true,
+  },
+});
+
+/**
+ * modal popup
+ */
+const dialogDetail = ref<boolean>(false); // รายละเอียดตำแหน่ง
+const modalSelectPerson = ref<boolean>(false); // เลือกคนครอง
+const dialogPosition = ref<boolean>(false); // อัตรากำลัง
+const modalSort = ref<boolean>(false); // จัดลำดับ
+const modalDialogMMove = ref<boolean>(false); // ย้ายตำแหน่ง
+const modalDialogSuccession = ref<boolean>(false); // สืบทอดตำแหน่ง
+const modalDialogHistoryPos = ref<boolean>(false); // ประวัติตำแหน่ง
+
+const rowId = ref<string>("");
+const actionType = ref<string>("");
+/** ListMenu Table*/
+const listMenu = ref<ListMenu[]>([
+  {
+    label: "ย้ายตำแหน่ง",
+    icon: "mdi-cursor-move",
+    type: "MOVE",
+    color: "blue-10",
+  },
+  {
+    label: "แก้ไข",
+    icon: "edit",
+    type: "EDIT",
+    color: "edit",
+  },
+  {
+    label: "ลบ",
+    icon: "delete",
+    type: "DEL",
+    color: "red",
+  },
+]);
+const documentItems = ref<DataDocumentList[]>([
+  {
+    name: "รายงานสรุปจำนวนกรอบอัตรากำลังของลูกจ้างประจำกรุงเทพมหานคร",
+    val: "report4-employee",
+  },
+]);
+
+/** columns*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "ตำแหน่งเลขที่",
+    sortable: false,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    field: "positionName",
+    sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: false,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: false,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: false,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/**
+ * function  openPopup เพิ่มอัตรากำลัง
+ * @param type ประเภท
+ * @param id id
+ */
+function onClickPosition(type: string, id: string) {
+  rowId.value = id ? id : "";
+  actionType.value = type;
+  dialogPosition.value = !dialogPosition.value;
+}
+
+const dataDetailPos = ref<DataPosition[]>([]);
+/**
+ * function ดูรายละเอียดประวัติตำแหน่ง
+ * @param data ข้อมูล ประวัติตำแหน่ง
+ */
+function onClickViewDetail(data: DataPosition[]) {
+  dialogDetail.value = !dialogDetail.value;
+  dataDetailPos.value = data;
+}
+
+/**
+ * function ยืนยันการลบตำแหน่ง
+ * @param id id ตำแหน่ง
+ */
+function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.orgPosMasterByIdEmp(id))
+      .then(async () => {
+        await props.fetchDataTable?.(
+          reqMaster.value.id,
+          reqMaster.value.type,
+          false
+        );
+        await getSummary();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * fdunction จัดลำดับตำแหน่ง
+ */
+function onClickSort() {
+  modalSort.value = true;
+}
+
+const typeMove = ref<string>("");
+/**
+ * function openPopup  ย้ายตำแหน่ง
+ * @param id ID ตำแหน่ง
+ * @param type ประเภท [ALL,SINGER]
+ */
+function onClickMovePos(id: string, type: string) {
+  modalDialogMMove.value = !modalDialogMMove.value;
+  typeMove.value = type;
+  rowId.value = id;
+}
+
+/**
+ * function ดูประวัติตำแหน่ง
+ * @param id ID ตำแหน่ง
+ */
+function onClickHistoryPos(id: string) {
+  modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
+  rowId.value = id;
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  reqMaster.value.pageSize = newPagination.rowsPerPage;
+  reqMaster.value.page = 1;
+}
+
+/**
+ * function openPopup เลือกตนครอง
+ */
+function openSelectPerson(data: DataPosition[]) {
+  modalSelectPerson.value = true;
+  dataDetailPos.value = data;
+}
+
+/**
+ * ลบคนครอง
+ */
+function removePerson(id: string) {
+  dialogRemove(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.orgDeleteProfileEmp(id))
+        .then(async () => {
+          await props.fetchDataTable?.(
+            reqMaster.value.id,
+            reqMaster.value.type,
+            false
+          );
+          await getSummary();
+          await success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการลบคนครอง",
+    "ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?"
+  );
+}
+
+/**
+ * function openPopup สืบทอดตำแหน่ง
+ */
+function onClickInherit(id: string) {
+  modalDialogSuccession.value = !modalDialogSuccession.value;
+  rowId.value = id;
+}
+
+/**
+ * ดึงข้อมูลสถิติจำนวนด้านบน
+ */
+function getSummary() {
+  showLoader();
+  http
+    .post(config.API.orgSummaryEmp, {
+      id: reqMaster.value.id, //*Id node
+      type: reqMaster.value.type, //*ประเภทnode
+      isNode: reqMaster.value.isAll, //*นับทั้ง node ไหม
+    })
+    .then(async (res: any) => {
+      const data = await res.data.result;
+
+      store.getSumPosition({
+        totalPosition: data.totalPosition,
+        totalPositionCurrentUse: data.totalPositionCurrentUse,
+        totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalPositionNextUse: data.totalPositionNextUse,
+        totalPositionNextVacant: data.totalPositionNextVacant,
+        totalRootPosition: data.totalPosition,
+        totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+        totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+        totalRootPositionNextUse: data.totalPositionNextUse,
+        totalRootPositionNextVacant: data.totalPositionNextVacant,
+      });
+    })
+    .catch((err) => {
+      // messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function DownloadReport*/
+async function onClickDownloadReport(val: string, name: string) {
+  // รอ API
+  showLoader();
+  await http
+    .get(config.API.orgReport(val) + `/${treeId.value}`)
+    .then(async (res) => {
+      const data = res.data.result;
+      if (data) {
+        await genreport(data, name);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const pagination = ref({
+  page: reqMaster.value.page,
+  rowsPerPage: reqMaster.value.pageSize,
+});
+
+watch(
+  () => modalDialogMMove.value,
+  () => {
+    if (!modalDialogMMove.value) {
+      pagination.value.page = 1;
+      pagination.value.rowsPerPage = reqMaster.value.pageSize;
+
+      if (posMaster.value.length === 0) {
+        props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <!-- TOOLBAR -->
+  <div class="col-12">
+    <q-toolbar style="padding: 0">
+      <div>
+        <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
+          flat
+          round
+          dense
+          color="primary"
+          icon="add"
+          @click="onClickPosition('ADD', '')"
+        >
+          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          v-if="checkPermission($route)?.attrIsUpdate"
+          flat
+          round
+          dense
+          color="blue"
+          icon="mdi-sort"
+          @click="onClickSort()"
+        >
+          <q-tooltip>จัดลำดับ</q-tooltip>
+        </q-btn>
+
+        <q-btn
+          v-if="checkPermission($route)?.attrIsUpdate"
+          flat
+          round
+          dense
+          color="blue-10"
+          icon="mdi-cursor-move"
+          @click="onClickMovePos('', 'All')"
+        >
+          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
+        </q-btn>
+
+        <q-btn flat round dense color="deep-purple" icon="save_alt">
+          <q-menu>
+            <q-list
+              dense
+              style="min-width: 100px"
+              v-for="(item, index) in documentItems"
+              :key="index"
+            >
+              <q-item
+                clickable
+                v-close-popup
+                @click.stop="onClickDownloadReport(item.val, item.name)"
+              >
+                <q-item-section>{{ item.name }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+          <q-tooltip>ดาวน์โหลด</q-tooltip>
+        </q-btn>
+      </div>
+
+      <q-space />
+      <div class="row q-gutter-md">
+        <div>
+          <q-checkbox
+            keep-color
+            v-model="reqMaster.isAll"
+            label="แสดงตำแหน่งทั้งหมด"
+            color="primary"
+          >
+            <q-tooltip
+              >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+            >
+          </q-checkbox>
+        </div>
+        <div>
+          <q-input
+            outlined
+            dense
+            v-model="reqMaster.keyword"
+            label="ค้นหา"
+            @keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
+          >
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+    </q-toolbar>
+  </div>
+
+  <!-- TABLE -->
+  <div class="col-12">
+    <d-table
+      ref="table"
+      :columns="columns"
+      :rows="posMaster"
+      row-key="id"
+      flat
+      bordered
+      :paging="true"
+      dense
+      :rows-per-page-options="[10, 25, 50, 100]"
+      @update:pagination="updatePagination"
+      class="tableTb"
+      v-model:pagination="pagination"
+    >
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width></q-th>
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            <span class="text-weight-medium">{{ col.label }}</span>
+          </q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td>
+            <q-btn
+              v-if="
+                checkPermission($route)?.attrIsUpdate ||
+                checkPermission($route)?.attrIsDelete
+              "
+              class="q-pa-none q-ml-xs"
+              flat
+              dense
+              color="secondary"
+              icon="mdi-dots-horizontal-circle-outline"
+              round
+            >
+              <q-menu>
+                <q-list dense style="min-width: 150px">
+                  <!-- เลือกคนครอง -->
+                  <q-item
+                    v-if="
+                      props.row.positionIsSelected == 'ว่าง' &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                    clickable
+                    v-close-popup
+                    @click="openSelectPerson(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          color="secondary"
+                          size="xs"
+                          name="mdi-account"
+                        />
+                        <div class="q-pl-md">เลือกคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-else-if="
+                      props.row.positionIsSelected != 'ว่าง' &&
+                      checkPermission($route)?.attrIsUpdate
+                    "
+                    clickable
+                    v-close-popup
+                    @click="removePerson(props.row.id)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          color="red"
+                          size="xs"
+                          name="mdi-account-remove"
+                        />
+                        <div class="q-pl-md">ลบคนครอง</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-for="(item, index) in checkPermission($route)
+                      ?.attrIsUpdate && !checkPermission($route)?.attrIsDelete
+                      ? listMenu.filter((e) => e.type !== 'DEL')
+                      : checkPermission($route)?.attrIsDelete &&
+                        !checkPermission($route)?.attrIsUpdate
+                      ? listMenu.filter((e) => e.type === 'DEL')
+                      : listMenu"
+                    :key="index"
+                    clickable
+                    v-close-popup
+                    @click="
+                      item.type === 'EDIT'
+                        ? onClickPosition('EDIT', props.row.id)
+                        : item.type === 'DEL'
+                        ? onClickDelete(props.row.id)
+                        : item.type === 'MOVE'
+                        ? onClickMovePos(props.row.id, 'SINGER')
+                        : item.type === 'HISTORY'
+                        ? onClickHistoryPos(props.row.id)
+                        : item.type === 'INHERIT'
+                        ? onClickInherit(props.row.id)
+                        : null
+                    "
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon
+                          :color="item.color"
+                          size="xs"
+                          :name="item.icon"
+                        />
+                        <div class="q-pl-md">{{ item.label }}</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="props.row.positionIsSelected != 'ว่าง'"
+                    clickable
+                    v-close-popup
+                    @click="onClickViewDetail(props.row)"
+                  >
+                    <q-item-section>
+                      <div class="row items-center">
+                        <q-icon color="info" size="xs" name="mdi-eye" />
+                        <div class="q-pl-md">ดูรายละเอียด</div>
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'no'">
+              {{
+                (reqMaster.page - 1) * Number(reqMaster.pageSize) +
+                props.rowIndex +
+                1
+              }}
+            </div>
+            <div v-else-if="col.name === 'posMasterNo'">
+              {{
+                props.row.isSit
+                  ? col.value + " " + "(นั่งทับตำแหน่ง)"
+                  : col.value
+              }}
+            </div>
+            <div v-else-if="col.name === 'posLevelName'">
+              {{
+                props.row.posLevelName
+                  ? props.row.isSpecial == true
+                    ? `${props.row.posLevelName} (ฉ)`
+                    : props.row.posLevelName
+                  : "-"
+              }}
+            </div>
+            <div v-else>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ totalData }} รายการ
+        <q-pagination
+          v-model="reqMaster.page"
+          active-color="primary"
+          color="dark"
+          :max="totalPage"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
+    </d-table>
+  </div>
+
+  <!-- รายละเอียดตำแหน่ง -->
+  <DialogPositionDetail
+    v-model:position-detail="dialogDetail"
+    :dataDetailPos="dataDetailPos"
+  />
+
+  <!-- อัตรากำลัง -->
+  <DialogFormPosotion
+    :modal="dialogPosition"
+    :shortName="shortName"
+    :close="onClickPosition"
+    :orgLevel="orgLevel"
+    :treeId="treeId"
+    :actionType="actionType"
+    :rowId="rowId"
+    v-model:reqMaster="reqMaster"
+    :fetchDataTable="props.fetchDataTable"
+    :getSummary="getSummary"
+  />
+
+  <!-- จัดลำดับ -->
+  <DialogSort
+    v-model:sort-position="modalSort"
+    :fetchDataTable="props.fetchDataTable"
+  />
+
+  <!-- ย้ายตำแหน่ง -->
+  <DialogMovePos
+    v-model:modal="modalDialogMMove"
+    v-model:nodeTree="nodeTree"
+    v-model:columns="columns as QTableProps[]"
+    v-model:rows="posMaster"
+    v-model:totalPage="totalPage"
+    v-model:reqMaster="reqMaster"
+    :fetchDataTree="props.fetchDataTree"
+    :type="typeMove"
+    :rowId="rowId"
+    :mainTree="props.mainTree ? props.mainTree : []"
+    :fetchDataTable="props.fetchDataTable"
+  />
+
+  <!-- ประวัติตำแหน่ง -->
+  <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
+
+  <!-- เลือกคนครอง -->
+  <DialogSelectPerson
+    v-model:modal="modalSelectPerson"
+    :dataDetailPos="dataDetailPos"
+    :fetchDataTable="props.fetchDataTable"
+    :getSummary="getSummary"
+  />
+
+  <!-- สืบทอดตำแหน่ง -->
+  <DialogSuccession v-model:modal="modalDialogSuccession" :rowId="rowId" />
+</template>
+
+<style lang="scss" scoped>
+.custom-header-table-expand {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: white;
+  }
+
+  .q-table thead tr {
+    background: white;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+    padding: 0px;
+  }
+}
+</style>

src/modules/20_positionTemp/components/TreeMain.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { OrgTree } from "@/modules/20_positionTemp/interface/response/organizational";
+import type { DataTree } from "@/modules/20_positionTemp/interface/index/organizational";
+
+/** importStore*/
+import { usePositionEmp } from "@/modules/20_positionTemp/store/organizational";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const store = usePositionEmp();
+const {} = useCounterMixin();
+
+/** props*/
+const nodeMain = defineModel<OrgTree[]>("nodeTree", { default: [] });
+const nodeId = defineModel<string>("nodeId", { required: true });
+const shortName = defineModel<string>("shortName", { required: true });
+const props = defineProps({
+  fetchDataTree: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
+});
+
+const filter = ref<string>(""); //ค้าหาข้อมูลโครงสร้าง
+const nodes = ref<Array<OrgTree>>([]); //ข้อมูลโครงสร้าง
+const lazy = ref(nodes);
+const expanded = ref<Array<string[]>>([]);
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: DataTree) {
+  shortName.value = data.orgTreeShortName;
+
+  if (!store.treeId || store.treeId != data.orgTreeId) {
+    store.treeId = data.orgTreeId;
+    store.level = data.orgLevel;
+
+    nodeId.value = data.orgTreeId ? data.orgTreeId : "111";
+
+    data.orgTreeId &&
+      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
+    /** ดึงข้อมูลสถิติจำนวนด้านบน*/
+    http
+      .post(config.API.orgSummaryEmp, {
+        id: data.orgTreeId, //*Id node
+        type: data.orgLevel, //*ประเภทnode
+        isNode: false, //*นับทั้ง node ไหม
+      })
+      .then(async (res: any) => {
+        const data = await res.data.result;
+        if (data) {
+          store.getSumPosition({
+            totalPosition: data.totalPosition,
+            totalPositionCurrentUse: data.totalPositionCurrentUse,
+            totalPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalPositionNextUse: data.totalPositionNextUse,
+            totalPositionNextVacant: data.totalPositionNextVacant,
+            totalRootPosition: data.totalPosition,
+            totalRootPositionCurrentUse: data.totalPositionCurrentUse,
+            totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
+            totalRootPositionNextUse: data.totalPositionNextUse,
+            totalRootPositionNextVacant: data.totalPositionNextVacant,
+          });
+        }
+      });
+  }
+}
+
+watch(
+  () => nodeMain.value,
+  () => {
+    nodes.value = nodeMain.value;
+  }
+);
+</script>
+
+<template>
+  <div class="col-12 q-py-sm q-px-sm">
+    <div class="q-gutter-sm">
+      <div class="row q-col-gutter-sm q-pl-sm">
+        <div class="col-12">
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+      </div>
+      <div class="bg-white tree-container q-pa-xs">
+        <q-tree
+          class="q-pa-sm q-gutter-sm"
+          dense
+          default-expand-all
+          :nodes="lazy"
+          node-key="orgTreeId"
+          label-key="labelName"
+          :filter="filter.trim()"
+          no-results-label="ไม่พบข้อมูลที่ค้นหา"
+          no-nodes-label="ไม่มีข้อมูล"
+          v-model:expanded="expanded"
+        >
+          <template v-slot:default-header="prop">
+            <q-item
+              clickable
+              :active="nodeId == prop.node.orgTreeId"
+              @click.stop="updateSelected(prop.node)"
+              active-class="my-list-link text-primary text-weight-medium"
+              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+            >
+              <div>
+                <div class="text-weight-medium">
+                  {{ prop.node.orgTreeName }}
+                </div>
+                <div class="text-weight-light text-grey-8">
+                  {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                  {{
+                    prop.node.orgTreeShortName == null
+                      ? null
+                      : prop.node.orgTreeShortName
+                  }}
+                </div>
+              </div>
+            </q-item>
+          </template>
+        </q-tree>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree-container {
+  overflow: auto;
+  height: 73vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>