Merge branch 'develop' of github.com:Frappet/bma-ehr-admin into develop

# Conflicts:
#	src/api/index.ts

src/api/14_KPI/api.KPI.ts

@@ -0,0 +1,70 @@
+import env from "../index";
+const KPI = `${env.API_URI}/kpi`;
+const kpiPeriod = `${env.API_URI}/kpi/period`;
+const kpiEvaluation = `${env.API_URI}/kpi/evaluation`;
+const kpiUserEvaluation = `${env.API_URI}/kpi/user/evaluation`;
+const kpiPlan = `${env.API_URI}/kpi/plan`;
+const kpiRole = `${env.API_URI}/kpi/role`;
+const kpiSpecial = `${env.API_URI}/kpi/special`;
+const kpiCapacity = `${env.API_URI}/kpi/capacity`;
+const KpiFile = `${env.API_URI}/salary/file`;
+const KpiEvaluationInfo = `${env.API_URI}/kpi/evaluation`;
+const Kpiorg = `${env.API_URI}/org/profile/commander`;
+
+const KpiUser = `${env.API_URI}/kpi/user`;
+const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
+const kpiReason = `${env.API_URI}/kpi/reason`;
+
+const urlFile = `${env.API_URI}/salary`;
+
+const kpiGroup = `${env.API_URI}/kpi/group`;
+const kpiLink = `${env.API_URI}/kpi/link`;
+
+export default {
+  KPI,
+  kpiUserEvaluation,
+  /** รอบการประเมินผล*/
+  kpiPeriod,
+  kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
+
+  kpiEvaluation,
+  kpiPlan,
+  kpiPlanById: (id: string) => `${kpiPlan}/${id}`,
+
+  /** role */
+  kpiRole,
+  kpiRoleMainList: `${KPI}/role`,
+
+  kpiSpecial,
+  kpiCapacity,
+  KpiFile: KpiFile,
+
+  kpiAchievement: (type: string) => `${kpiAchievement}/${type}`,
+  kpiAchievementPoint: (type: string) => `${kpiAchievement}/${type}/point`,
+
+  kpiScoreTotal: () => `${kpiEvaluation}/point`,
+
+  /** ผลสัมฤทธิ์ของงาน*/
+  fileByFile: (name: string, group: string, id: string, fileName: string) =>
+    `${urlFile}/file/${name}/${group}/${id}/${fileName}`,
+  kpiUserCapacity: `${KpiUser}/capacity`,
+  KpiEvaluationInfo,
+  Kpiorg,
+  kpiEvaluationCheck: `${kpiEvaluation}/check`,
+  kpiSendToStatus: (id: string) => `${kpiEvaluation}/status/${id}`,
+  kpiReqEdit: (id: string) => `${kpiEvaluation}/edit/${id}`,
+  /**ประเมิน*/
+  kpiAchievementDevelop: `${kpiAchievement}/development`,
+
+  kpiCommentP: (typP: string, type: string, role: string, id: string) =>
+    `${kpiReason}/${typP}/${type}/${role}/${id}`,
+
+  kpiGroup,
+  kpiGroupById: (id: string) => `${kpiGroup}/${id}`,
+
+  /** สมรรถนะ */
+
+  kpiLink,
+
+  profilePosition: () => `${env.API_URI}/org/profile/keycloak/position`,
+};

src/api/15_development/api.development.ts

@@ -0,0 +1,51 @@
+import env from "../index";
+const development = `${env.API_URI}/development`;
+const developmentOrg = `${env.API_URI}/org`;
+const devScholarship = `${env.API_URI}/development/scholarship`;
+const developmentReport = `${env.API_URI}/development/report`;
+const devStrategy = `${env.API_URI}/development/strategy`;
+export default {
+  development,
+  /** history */
+  developmentHistoryList: (type: string) =>
+    `${development}/history/${type}/filter`,
+  developmentHistoryListByid: (type: string, id: string) =>
+    `${development}/history/${type}/${id}`,
+  developmentHistoryAdd: (type: string) => `${development}/history/${type}`,
+  developmentProjectSearch: () => `${development}/main/search`,
+  developmentHistoryListOrg: (type: string, year: number) =>
+    `${development}/history/${type}/org/${year}`,
+
+  /** history employee */
+  developmentProjectSearchEmployee: () => `${developmentOrg}/profile-employee/`,
+
+  /** รายการโครงการ*/
+  developmentMain: `${development}/main`,
+  developmentMainById: (id: string) => `${development}/main/${id}`,
+  developmentMainTab: (tab: string, id: string) =>
+    `${development}/main/${tab}/${id}`,
+
+  /** ทุนการศึกษา/ฝึกอบรม*/
+  devScholarship,
+  devScholarshipByid: (id: string) => `${devScholarship}/${id}`,
+  devScholarshipStatus: (id: string, status: string) =>
+    `${devScholarship}/status/${id}/${status}`,
+
+  /** download File */
+  developmentReportMain: () => `${developmentReport}/main`,
+  developmentReportHistory: () => `${developmentReport}/history-officer`,
+  developmentReportHistoryOfficer: () =>
+    `${developmentReport}/history-employee`,
+  developmentReportScholarship: () => `${developmentReport}/scholarship`,
+
+  // ปิดโครงการ
+  developmentMainFinish: (id: string) => `${development}/main/finish/${id}`,
+  // ข้อมูล status ของโครงการ
+  developmentMainStatus: (id: string) => `${development}/main/status/${id}`,
+
+  /** โครงการ tab ข้อมูลเบื้องต้น */
+  developmentBasicInfoById: (id: string) => `${development}/main/tab1/${id}`,
+
+  /**API ยุทธศาสตร์*/
+  devStrategy,
+};

src/api/index.ts

@@ -2,9 +2,8 @@
 import { ref } from "vue"
 
 const env = ref<string>(process.env.NODE_ENV || "development")
-export const apiUrlConfig = import.meta.env.VITE_API_URI_CONFIG
-// export const apiUrlConfigPublish = import.meta.env.VITE_API_PUBLISH_URL;
-// export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL;
+export const apiUrlConfigPublish = import.meta.env.VITE_API_PUBLISH_URL
+export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL
 // if (process.env.VUE_APP_TEST) {
 //   env = "test";
 // }

src/app.config.ts

@@ -32,6 +32,12 @@ import file from "./api/file/api.file";
 /** API ManagementUsers*/
 import menagement from "./api/manage/api.management";
 
+/** API ระเมินผลการปฏิบัติราชการระดับบุคคล*/
+import KPI from "./api/14_KPI/api.KPI";
+
+/** API เงินเดือน/ค่าจ้าง*/
+import development from "./api/15_development/api.development";
+
 // environment variables
 export const compettitivePanel = import.meta.env.VITE_COMPETITIVE_EXAM_PANEL;
 export const qualifyDisableExamPanel = import.meta.env
@@ -69,6 +75,9 @@ const API = {
 
   /**  menagement*/
   ...menagement,
+  /** KPI*/
+  ...KPI,
+  ...development,
 };
 
 export default {

src/modules/01_metadata/components/Indicators/indicatorByPlan/IndicatorByPlan.vue

@@ -9,7 +9,7 @@ import http from "@/plugins/http";
 import type { DataOption } from "@/modules/01_metadata/interface/index/Main";
 
 /** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
+import { usePositionEmp } from "@/modules/01_metadata/stores/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 
 /**use*/

src/modules/01_metadata/interface/request/Main.ts

@@ -28,7 +28,7 @@ interface FormDataRole {
   includingName: string;
   target: string;
   unit: string;
-  weight: string;
+  weight: string | null;
   meaning: string;
   formula: string;
   documentInfoEvidence: string;

src/modules/01_metadata/stores/organizational.ts

@@ -1,18 +1,18 @@
 import { defineStore } from "pinia";
 import { reactive, ref } from "vue";
 
-/** importType*/
-import type {
-  DataActive,
-  SumPosition,
-  PosMaster,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
+// /** importType*/
+// import type {
+//   DataActive,
+//   SumPosition,
+//   PosMaster,
+// } from "@/modules/16_positionEmployee/interface/response/organizational";
 
 export const usePositionEmp = defineStore("positionEmpStore", () => {
   const typeOrganizational = ref<string>("current");
   const statusView = ref<string>("list");
 
-  const dataActive = ref<DataActive>();
+  const dataActive = ref<any>();
   const activeId = ref<string>();
   const draftId = ref<string>();
   const historyId = ref<string>();
@@ -29,7 +29,7 @@ export const usePositionEmp = defineStore("positionEmpStore", () => {
     vacantRoot: 0,
   });
 
-  function getSumPosition(data: SumPosition) {
+  function getSumPosition(data: any) {
     sumPosition.total = data.totalPosition;
     sumPosition.totalRoot = data.totalRootPosition ? data.totalRootPosition : 0;
 
@@ -56,7 +56,7 @@ export const usePositionEmp = defineStore("positionEmpStore", () => {
     }
   }
 
-  function fetchDataActive(data: DataActive) {
+  function fetchDataActive(data: any) {
     activeId.value = data.activeId;
     draftId.value = data.draftId;
     dataActive.value = data;
@@ -64,8 +64,8 @@ export const usePositionEmp = defineStore("positionEmpStore", () => {
     orgPublishDate.value = data.orgPublishDate;
   }
 
-  function fetchPosMaster(data: PosMaster[]) {
-    const newPosMaster = data.map((e: PosMaster) => ({
+  function fetchPosMaster(data: any[]) {
+    const newPosMaster = data.map((e: any) => ({
       ...e,
       positionIsSelected: e.fullNameCurrentHolder
         ? e.fullNameCurrentHolder

src/modules/16_positionEmployee/components/DialogAddPosition.vue

@@ -1,235 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch, defineProps } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type {
-  ResGroup,
-  ResLevel,
-} from "@/modules/01_metadataNew/interface/response/positionEmployee/Main";
-import type { ObjectPosRef } from "@/modules/01_metadataNew/interface/index/positionEmployee";
-import type { DataOption } from "@/modules/16_positionEmployee/interface/index/Main";
-
-import type { OptionType } from "@/modules/16_positionEmployee/interface/response/organizational";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const isSpecial = ref<boolean>(false);
-const props = defineProps({
-  emitSearch: Function,
-  getData: Function,
-  data: Object,
-  levelOp: Object,
-});
-const modal = defineModel<boolean>("modalAdd", { required: true });
-const isEditCheck = defineModel<boolean>("isEdit", { required: true });
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
-
-const isDisValidate = ref<boolean>(false);
-const formDataPos = reactive({
-  posName: "",
-  posTypeName: "",
-  posLevelName: "",
-});
-
-const posNameRef = ref<object | null>(null);
-const posTypeNameRef = ref<object | null>(null);
-const posLevelNameRef = ref<object | null>(null);
-const objectRef: ObjectPosRef = {
-  posName: posNameRef,
-  posTypeName: posTypeNameRef,
-  posLevelName: posLevelNameRef,
-};
-const posTypeMain = ref<ResGroup[]>([]);
-const posTypeOp = ref<DataOption[]>([]);
-const posLevelOp = ref<DataOption[]>([]);
-
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-function validateFormPositionEdit() {
-  isDisValidate.value = false;
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      submit();
-    });
-  }
-}
-async function submit() {
-  const body = {
-    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);
-    success($q, "บันทีกข้อมูลสำเร็จ");
-    props.emitSearch?.(formDataPos.posName, "positionName");
-    close();
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    hideLoader();
-  }
-}
-
-async function clearFormPositionSelect() {
-  isEditCheck.value = false;
-  isDisValidate.value = true;
-  formDataPos.posName = "";
-  formDataPos.posTypeName = "";
-  formDataPos.posLevelName = "";
-  isSpecial.value = false;
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
-function close() {
-  modal.value = false;
-  clearFormPositionSelect();
-}
-
-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();
-    });
-}
-
-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 = "";
-}
-
-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">
-      <DialogHeader
-        :tittle="`${isEditCheck ? `แก้ไขข้อมูลตำแหน่ง` : `เพิ่มข้อมูลตำแหน่ง`}`"
-        :close="close"
-      />
-      <q-separator />
-
-      <q-card-section class="q-pa-none">
-        <form @submit.prevent="validateFormPositionEdit">
-          <div class="row q-col-gutter-sm col-12 q-pa-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) => !!val || `${'กรุณากรอกชื่อตำแหน่ง'}`]"
-              />
-            </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) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
-                @update:model-value="updatePosTypeName"
-              />
-            </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) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`]"
-              />
-            </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>
-        </form>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>

src/modules/16_positionEmployee/components/DialogFormPosition.vue

@@ -1,727 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type {
-  FormDataPosition,
-  FormPositionRef,
-  DataOption,
-  FormPositionSelect,
-  RowDetailPositions,
-  FormPositionSelectRef,
-  ListMenu,
-} from "@/modules/16_positionEmployee/interface/index/Main";
-import type {
-  OptionType,
-  OptionLevel,
-  OptionExecutive,
-  DataPosition,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
-import DialogHeader from "@/components/DialogHeader.vue";
-import DialogAddPosition from "@/modules/16_positionEmployee/components/DialogAddPosition.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-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 isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false);
-const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isDisValidate = ref<boolean>(false);
-const isPosition = ref<boolean>(false);
-
-const dataCopy = ref<any>();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-  dialogMessageNotify,
-} = mixin;
-
-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 prefixNoRef = ref<Object | null>(null);
-const positionNoRef = ref<Object | null>(null);
-
-const formData = reactive<FormDataPosition>({
-  shortName: props.shortName,
-  prefixNo: "",
-  positionNo: "",
-  suffixNo: "",
-  reason: "",
-});
-
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
-const objectPositionRef: FormPositionRef = {
-  prefixNo: prefixNoRef,
-  positionNo: positionNoRef,
-};
-
-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 validateForm() {
-  const hasError = [];
-  for (const key in objectPositionRef) {
-    if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
-      const property = objectPositionRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    if (rows.value.length == 0) {
-      dialogMessageNotify($q, "กรุณาเลือกตำแหน่งอย่างน้อย 1 ตำแหน่ง");
-    } else {
-      onSubmit();
-    }
-  }
-}
-
-/** ฟังชั่น บันทึก */
-function onSubmit() {
-  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,
-      // succession: succession.value,
-    };
-    try {
-      const url =
-        props.actionType === "ADD"
-          ? config.API.orgPosMasterEmp
-          : config.API.orgPosMasterByIdEmp(props.rowId);
-      await http[props.actionType === "ADD" ? "post" : "put"](url, body);
-      success($q, "บันทีกข้อมูลสำเร็จ");
-      props.getSummary?.();
-      props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
-      close();
-    } catch (err) {
-      messageError($q, err);
-    } finally {
-      hideLoader();
-    }
-  });
-}
-
-/** input ค้นหา */
-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}&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;
-}
-
-/**
- * ส่งค่า css ออกไปตามเงื่อนไข
- * @param val true/false
- */
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer inputgreen ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-function addPosition(data: RowDetailPositions) {
-  rows.value = [];
-  rows.value.push(data);
-}
-
-function deletePos(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.orgEmployeePosById(id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        searchInput();
-        hideLoader();
-      });
-  });
-}
-
-function clearFormPositionSelect() {
-  isDisValidate.value = true;
-  search.value = "";
-  type.value = "positionName";
-
-  setTimeout(() => {
-    isDisValidate.value = false;
-  }, 1000);
-}
-
-function close() {
-  props.close?.();
-  isPosition.value = false;
-  clearFormPositionSelect();
-}
-
-async function emitSearch(keyword: string, typeSelect: string) {
-  search.value = keyword;
-  type.value = typeSelect;
-  await searchInput();
-}
-
-watch(
-  () => props.modal,
-  () => {
-    if (props.modal === true) {
-      if (props.actionType === "ADD") {
-        rowsPositionSelect.value = [];
-        search.value = "";
-        rows.value = [];
-        clearFormPositionSelect();
-        formData.prefixNo = "";
-        formData.positionNo = "";
-        formData.suffixNo = "";
-      } else {
-        props.rowId && fetchPosition(props.rowId);
-      }
-    }
-  }
-);
-</script>
-
-<template>
-  <q-dialog v-model="props.modal" persistent>
-    <q-card style="min-width: 80vw">
-      <DialogHeader
-        :tittle="
-          props.actionType === 'ADD' ? 'เพิ่มอัตรากำลัง' : 'แก้ไขอัตรากำลัง'
-        "
-        :close="close"
-      />
-      <q-separator />
-      <form @submit.prevent="validateForm">
-        <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) => !!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-th auto-width></q-th>
-                        </q-tr>
-                      </template>
-                      <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
-                          <q-td
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                          >
-                            <div v-if="col.name == 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
-                            <div v-else-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"
-                        :class="inputEdit(isReadonly)"
-                        v-model="search"
-                        outlined
-                        clearable
-                        dense
-                        lazy-rules
-                        label="คำค้น"
-                        hide-bottom-space
-                        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
-                        @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"
-                        @click="searchInput()"
-                      >
-                      </q-btn>
-                    </div>
-                  </div>
-
-                  <div class="full-width q-mt-sm">
-                    <d-table
-                      ref="table"
-                      :columns="columns"
-                      :rows="rowsPositionSelect"
-                      row-key="id"
-                      flat
-                      bordered
-                      :paging="true"
-                      dense
-                      class="custom-header-table"
-                      :visible-columns="visibleColumns"
-                    >
-                      <template v-slot:header="props">
-                        <q-tr :props="props">
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            style="color: #000000; font-weight: 500"
-                          >
-                            <span class="text-weight-medium">{{
-                              col.label
-                            }}</span>
-                          </q-th>
-                          <q-th auto-width></q-th>
-                        </q-tr>
-                      </template>
-                      <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
-                          <q-td
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                            @click="addPosition(props.row)"
-                          >
-                            <div v-if="col.name == 'no'">
-                              {{ props.rowIndex + 1 }}
-                            </div>
-                            <div v-else-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-td auto-width>
-                            <q-btn
-                              flat
-                              dense
-                              icon="mdi-dots-vertical"
-                              class="q-pa-none q-ml-xs"
-                              color="grey-13"
-                            >
-                              <q-menu anchor="bottom middle" self="top middle">
-                                <q-list
-                                  dense
-                                  v-for="(item, index) in listMenu"
-                                  :key="index"
-                                >
-                                  <q-item
-                                    clickable
-                                    v-close-popup
-                                    @click="
-                                      item.type === 'copy'
-                                        ? copyDetiail(props.row)
-                                        : item.type === 'edit'
-                                        ? editDetiail(props.row)
-                                        : deletePos(props.row.id)
-                                    "
-                                  >
-                                    <q-item-section avatar>
-                                      <q-icon
-                                        :color="item.color"
-                                        :name="item.icon"
-                                        size="sm"
-                                      />
-                                    </q-item-section>
-                                    <q-item-section>{{
-                                      item.label
-                                    }}</q-item-section>
-                                  </q-item>
-                                </q-list>
-                              </q-menu>
-                            </q-btn>
-                          </q-td>
-                        </q-tr>
-                      </template>
-                    </d-table>
-                  </div>
-                </div>
-              </q-card>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-  <DialogAddPosition
-    v-model:modalAdd="modalAdd"
-    :emitSearch="emitSearch"
-    :data="dataCopy"
-    v-model:is-edit="isEdit"
-    :get-data="searchInput"
-  />
-</template>
-
-<style scoped>
-.fixed-height {
-  overflow-y: auto;
-  height: 80vh;
-}
-</style>

src/modules/16_positionEmployee/components/DialogHistoryPos.vue

@@ -1,168 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type { HistoryPos } from "@/modules/16_positionEmployee/interface/response/organizational";
-
-import Header from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-const store = usePositionEmp();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
-const $q = useQuasar();
-const modal = defineModel<boolean>("modal", { required: true });
-
-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: "lastUpdatedAt",
-    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",
-  },
-]);
-const rows = ref<any>([]);
-
-const props = defineProps({
-  rowId: {
-    type: String,
-  },
-});
-
-async function fetchHistoryPos(id: string) {
-  showLoader();
-  await http
-    .get(config.API.orgPosHistory(id))
-    .then((res) => {
-      const data: HistoryPos[] = res.data.result;
-      const list = data.map((e: HistoryPos) => ({
-        ...e,
-        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
-        posMasterNoPrefix: e.posMasterNoPrefix ?? "-",
-        posMasterNo: e.posMasterNo ?? "-",
-        posMasterNoSuffix: e.posMasterNoSuffix ?? "-",
-      }));
-      rows.value = list;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    modal.value && props.rowId && fetchHistoryPos(props.rowId);
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal">
-    <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/16_positionEmployee/components/DialogMovePos.vue

@@ -1,349 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type {
-  OrgTree,
-  PosMaster2,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type {
-  MovePos,
-  FilterMaster,
-} from "@/modules/16_positionEmployee/interface/request/organizational";
-import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
-
-import HeaderDialog from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
-const $q = useQuasar();
-const store = usePositionEmp();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  messageError,
-  dialogMessageNotify,
-  success,
-} = useCounterMixin();
-
-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,
-  },
-});
-
-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 resetFilter() {
-  filterTree.value = "";
-  filterRef.value.focus();
-}
-
-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 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(() => {
-            props.fetchDataTree?.(store.activeId);
-            modal.value = false;
-            success($q, "ย้ายตำแหน่งสำเร็จ");
-          })
-          .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,
-});
-
-watch(
-  () => modal.value,
-  () => {
-    reqMaster.value.page = 1;
-    filterTree.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)" />
-        </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="ค้นหา" />
-                </div>
-              </q-toolbar>
-
-              <d-table
-                flat
-                bordered
-                :rows="rows"
-                :columns="columns"
-                row-key="id"
-                :filter="filterTable"
-                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" 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'">
-                        {{
-                          (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>
-            </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
-                    v-if="filterTree !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </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"
-                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/16_positionEmployee/components/DialogPositionDetail.vue

@@ -1,76 +0,0 @@
-<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?.posMasterNo }}</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?.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/16_positionEmployee/components/DialogSelectPerson.vue

@@ -1,693 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, 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 {
-  Position,
-  SeaechResult,
-  FormPositionFilter,
-} from "@/modules/16_positionEmployee/interface/index/organizational";
-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/16_positionEmployee/interface/index/Main";
-import type {
-  OptionType,
-  OptionLevel,
-  SelectPerson,
-  TypePos,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-
-/** importCompoonents*/
-import DialogHeader from "@/components/DialogHeader.vue";
-
-/** import*Store*/
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
-/** 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 isDisValidate = 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 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",
-  },
-]);
-const row = ref<Position[]>([]);
-const rowResult = ref<SeaechResult[]>([]);
-
-/** function closePopup*/
-function close() {
-  modal.value = false;
-}
-
-/** 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(() => {
-          props.fetchDataTable?.(store.treeId, store.level, false);
-          props.getSummary();
-          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 ค้นหาคนครอง */
-async 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, //นามสกุล ชื่อ สกุล เลขบัตร
-  };
-  await 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 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 clearForm();
-      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]);
-        }
-      }
-    }
-  }
-);
-
-/** callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination*/
-watch([() => page.value, () => pageSize.value], () => {
-  searchData();
-});
-</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="searchData"
-                    />
-                  </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"
-                    options-cover
-                    style="min-width: 150px"
-                    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"
-                    >
-                      <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
-                        ></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/16_positionEmployee/components/DialogSortPosition.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, defineProps } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps } from "quasar";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-
-const $q = useQuasar();
-const store = usePositionEmp();
-const { dialogConfirm, showLoader, success, hideLoader, messageError } =
-  useCounterMixin();
-
-const modal = defineModel<boolean>("sortPosition", { required: true });
-const rows = ref<any>([]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    required: true,
-    label: "ชื่อ",
-    align: "left",
-    field: "name",
-    sortable: true,
-  },
-]);
-
-const props = defineProps({
-  fetchDataTable: Function,
-});
-
-function onDrop(from: any, to: any) {
-  onDropRow(from, to);
-}
-
-function onDropRow(from: any, to: any) {
-  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
-}
-
-function save() {
-  dialogConfirm($q, () => {
-    const data = rows.value;
-    const dataId = data.map((item: any) => item.id);
-    showLoader();
-    http
-      .post(config.API.orgPosSortEmp, {
-        id: store.treeId,
-        type: store.level,
-        sortId: dataId,
-      })
-      .then((res) => {
-        modal.value = false;
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        props.fetchDataTable?.(store.treeId, store.level, false);
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-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.fullNameNextHolder ? item.fullNameNextHolder : ""}`,
-        posMasterNoPrefix: item.posMasterNoPrefix,
-        posMasterNo: item.posMasterNo,
-        posMasterNoSuffix: item.posMasterNoSuffix,
-      }));
-      rows.value = dataMap;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-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>
-          <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-card-actions>
-      </q-card>
-    </q-dialog>
-  </template>
-</template>

src/modules/16_positionEmployee/components/DialogSuccession.vue

@@ -1,411 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importType*/
-import type { QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/16_positionEmployee/interface/index/Main";
-import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
-import type {
-  OrgTree,
-  PosMaster,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type {
-  FilterMaster,
-  Inherit,
-} from "@/modules/16_positionEmployee/interface/request/organizational";
-
-/** importComponents*/
-import Header from "@/components/DialogHeader.vue";
-
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { usePositionEmp } from "@/modules/16_positionEmployee/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 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.orgByid(id))
-    .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 = await data.orgTreeId;
-  reqMaster.type = await 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 = 1;
-  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,
-  async () => {
-    modal.value ? await 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"
-              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" class="bg-white text-teal">
-        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
-      </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/16_positionEmployee/components/TreeMain.vue

@@ -1,168 +0,0 @@
-<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/16_positionEmployee/interface/response/organizational";
-import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";
-
-/** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
-/** use*/
-const $q = useQuasar();
-const store = usePositionEmp();
-const {} = useCounterMixin();
-
-/** props*/
-const nodeTEST = 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<any>>([]);
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<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(
-  () => nodeTEST.value,
-  () => {
-    nodes.value = nodeTEST.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
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
-              <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"
-          :no-results-label="notFound"
-          :no-nodes-label="noData"
-          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>

src/modules/16_positionEmployee/components/TreeTable.vue

@@ -1,705 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-import genreport from "@/plugins/genreportxlsx";
-
-/** importType*/
-import type { QTableProps } from "quasar";
-import type {
-  ListMenu,
-  NewPagination,
-} from "@/modules/16_positionEmployee/interface/index/Main";
-import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
-import type {
-  PosMaster2,
-  OrgTree,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type { DataPosition } from "@/modules/16_positionEmployee/interface/index/organizational";
-
-/** importComponents*/
-import DialogFormPosotion from "@/modules/16_positionEmployee/components/DialogFormPosition.vue";
-import DialogPositionDetail from "@/modules/16_positionEmployee/components/DialogPositionDetail.vue";
-import DialogSort from "@/modules/16_positionEmployee/components/DialogSortPosition.vue";
-import DialogMovePos from "@/modules/16_positionEmployee/components/DialogMovePos.vue";
-import DialogHistoryPos from "@/modules/16_positionEmployee/components/DialogHistoryPos.vue";
-import DialogSelectPerson from "@/modules/16_positionEmployee/components/DialogSelectPerson.vue";
-import DialogSuccession from "@/modules/16_positionEmployee/components/DialogSuccession.vue";
-
-/** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
-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 posMaster = defineModel<PosMaster2[]>("posMaster", { required: true });
-// const shortName = defineModel<string>("shortName", { 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,
-  },
-});
-
-const modalSelectPerson = ref<boolean>(false);
-const rowId = ref<string>("");
-const actionType = ref<string>("");
-/** ListMenu Table*/
-const listMenu = ref<ListMenu[]>([
-  {
-    label: "แก้ไข",
-    icon: "edit",
-    type: "EDIT",
-    color: "edit",
-  },
-  {
-    label: "ลบ",
-    icon: "delete",
-    type: "DEL",
-    color: "red",
-  },
-  {
-    label: "ย้ายตำแหน่ง",
-    icon: "mdi-cursor-move",
-    type: "MOVE",
-    color: "blue-10",
-  },
-  // {
-  //   label: "สืบทอดตำแหน่ง",
-  //   icon: "mdi-account-multiple-outline",
-  //   type: "INHERIT",
-  //   color: "deep-orange",
-  // },
-  // {
-  //   label: "ประวัติตำแหน่ง",
-  //   icon: "history",
-  //   type: "HISTORY",
-  //   color: "deep-purple",
-  // },
-]);
-const document = ref<any>([
-  {
-    name: "บัญชี 1",
-    val: "report1",
-  },
-  {
-    name: "บัญชี 2",
-    val: "report2",
-  },
-  {
-    name: "บัญชี 3",
-    val: "report3",
-  },
-]);
-
-/** 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",
-  },
-]);
-
-const dialogPosition = ref<boolean>(false);
-/**
- * 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 dialogDetail = ref<boolean>(false);
-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(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        props.fetchDataTable?.(reqMaster.value.id, reqMaster.value.type, false);
-        getSummary();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-const modalSort = ref<boolean>(false);
-/** fdunction จัดลำดับตำแหน่ง */
-function onClickSort() {
-  modalSort.value = true;
-}
-
-const modalDialogMMove = ref<boolean>(false);
-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;
-}
-
-const modalDialogHistoryPos = ref<boolean>(false);
-/**
- * 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(() => {
-          success($q, "ลบข้อมูลสำเร็จ");
-          props.fetchDataTable?.(
-            reqMaster.value.id,
-            reqMaster.value.type,
-            false
-          );
-          getSummary();
-        })
-        .catch((err) => {
-          messageError($q, err);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    },
-    "ยืนยันการลบคนครอง",
-    "ต้องการยืนยันการลบคนครองนี้ใช่หรือไม่?"
-  );
-}
-
-const modalDialogSuccession = ref<boolean>(false);
-/** 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) {
-  showLoader();
-  await http
-    .get(config.API.orgReportEmp(val))
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        genreport(data, name);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
-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;
-    }
-  }
-);
-</script>
-
-<template>
-  <!-- TOOLBAR -->
-  <div class="col-12">
-    <q-toolbar style="padding: 0">
-      <div>
-        <q-btn
-          flat
-          round
-          dense
-          color="primary"
-          icon="add"
-          @click="onClickPosition('ADD', '')"
-        >
-          <q-tooltip>เพิ่มตำแหน่ง</q-tooltip>
-        </q-btn>
-
-        <q-btn
-          flat
-          round
-          dense
-          color="blue"
-          icon="mdi-sort"
-          @click="onClickSort()"
-        >
-          <q-tooltip>จัดลำดับ</q-tooltip>
-        </q-btn>
-
-        <q-btn
-          flat
-          round
-          dense
-          color="blue-10"
-          icon="mdi-cursor-move"
-          @click="onClickMovePos('', 'All')"
-        >
-          <q-tooltip>ย้ายตำแหน่ง</q-tooltip>
-        </q-btn>
-      </div>
-
-      <!-- <q-btn
-        v-if="store.typeOrganizational === 'draft'"
-        flat
-        round
-        dense
-        color="deep-purple"
-        icon="save_alt"
-      >
-        <q-menu>
-          <q-list
-            dense
-            style="min-width: 100px"
-            v-for="(item, index) in document"
-            :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> -->
-      <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 v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-          <q-th auto-width></q-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'">
-              {{
-                (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-td>
-            <q-btn
-              flat
-              dense
-              icon="mdi-dots-vertical"
-              class="q-pa-none q-ml-xs"
-              color="grey-13"
-              size="12px"
-            >
-              <q-menu>
-                <q-list dense style="min-width: 150px">
-                  <!-- เลือกคนครอง -->
-                  <q-item
-                    v-if="props.row.positionIsSelected == 'ว่าง'"
-                    clickable
-                    v-close-popup
-                    @click="openSelectPerson(props.row)"
-                  >
-                    <q-item-section>
-                      <div class="row items-center">
-                        <q-icon
-                          color="secondary"
-                          size="17px"
-                          name="mdi-account"
-                        />
-                        <div class="q-pl-md">เลือกคนครอง</div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    v-else-if="props.row.positionIsSelected != 'ว่าง'"
-                    clickable
-                    v-close-popup
-                    @click="removePerson(props.row.id)"
-                  >
-                    <q-item-section>
-                      <div class="row items-center">
-                        <q-icon
-                          color="red"
-                          size="17px"
-                          name="mdi-account-remove"
-                        />
-                        <div class="q-pl-md">ลบคนครอง</div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    v-for="(item, index) in 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="17px"
-                          :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="blue" size="17px" name="mdi-eye" />
-                        <div class="q-pl-md">ดูรายละเอียด</div>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </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>
-
-  <!-- รายละเอียดตำแหน่ง -->
-  <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 : []"
-  />
-
-  <!-- ประวัติตำแหน่ง -->
-  <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/16_positionEmployee/components/TreeView.vue

@@ -1,318 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importType*/
-import type {
-  OrgTree,
-  PosMaster,
-  Position,
-  PosMaster2,
-} from "@/modules/16_positionEmployee/interface/response/organizational";
-import type { FilterMaster } from "@/modules/16_positionEmployee/interface/request/organizational";
-
-/** importComponents*/
-import TreeMain from "@/modules/16_positionEmployee/components/TreeMain.vue";
-import TreeTable from "@/modules/16_positionEmployee/components/TreeTable.vue";
-
-/** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
-/** use*/
-const store = usePositionEmp();
-const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-
-const nodeTree = ref<OrgTree[]>(); // ข้อมูล Tree
-const nodeId = ref<string>(""); // id ของ Tree
-const orgLevel = ref<number>(0); // levelTree
-const isLoad = ref<boolean>(false); // loadTable
-const isLoadTree = ref<boolean>(false); // loadTable
-const mainTree = ref<OrgTree>();
-
-const selected = ref<string>("");
-
-const reqMaster = reactive<FilterMaster>({
-  id: "",
-  type: 0,
-  isAll: false,
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-  revisionId: "",
-});
-const totalPage = ref<number>(1);
-const action1 = ref<boolean>(false);
-const posMaster = ref<PosMaster2[]>([]);
-const shortName = ref<string>("");
-
-/**
- * function fetch ข้อมูลของ Tree
- * @param id id โครงสร้าง
- */
-async function fetchDataTree(id: string) {
-  isLoadTree.value = false;
-  showLoader();
-  await http
-    .get(config.API.orgByid(id.toString()))
-    .then((res) => {
-      const data = res.data.result;
-      nodeTree.value = data;
-      selected.value = "";
-      nodeId.value = "";
-      store.treeId = "";
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function fetch ข้อรายการตำแหน่ง
- * @param id  idTree
- * @param level  levelTree
- */
-async function fetchDataTable(id: string, level: number, action: boolean) {
-  searchAndReplaceOrgName(nodeTree.value, id);
-
-  orgLevel.value = level;
-  reqMaster.id = id;
-  reqMaster.type = level;
-  action1.value = action;
-  if (action) {
-    setTimeout(() => {
-      action1.value = false;
-    }, 1000);
-    reqMaster.isAll = false;
-    reqMaster.page = 1;
-    reqMaster.pageSize = 10;
-    reqMaster.keyword = "";
-    reqMaster.revisionId = store.activeId;
-  }
-
-  if (action === true) {
-    isLoad.value = true;
-  }
-  await http
-    .post(config.API.orgPosMasterListEmp, reqMaster)
-    .then(async (res) => {
-      posMaster.value = [];
-      const dataMain: PosMaster[] = [];
-      totalPage.value = Math.ceil(res.data.result.total / reqMaster.pageSize);
-      res.data.result.data.forEach((e: PosMaster) => {
-        const p = e.positions;
-        if (p.length !== 0) {
-          const a = p.find((el: Position) => el.positionIsSelected === true);
-          const { id, ...rest } = a ? a : p[0];
-          const test = { ...e, ...rest };
-          dataMain.push(test);
-        }
-      });
-      posMaster.value = await store.fetchPosMaster(dataMain);
-    })
-    .catch((err) => {
-      messageError($q, err);
-      posMaster.value = [];
-    })
-    .finally(() => {
-      setTimeout(() => {
-        isLoad.value = false;
-      }, 500);
-    });
-}
-
-/** ดึงข้อมูลสถิติจำนวนด้านบน*/
-function getSummary() {
-  http
-    .post(config.API.orgSummaryEmp, {
-      id: reqMaster.id, //*Id node
-      type: reqMaster.type, //*ประเภทnode
-      isNode: reqMaster.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,
-      });
-    });
-}
-
-/** funcion ค้นหาข้อมูลใน Table*/
-async function filterKeyword() {
-  reqMaster.page = 1;
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-}
-
-function searchAndReplaceOrgName(data: any, targetId: string) {
-  for (const child of data) {
-    if (child.orgTreeId === targetId) {
-      mainTree.value = child;
-
-      return true; // Found the targetId in this level
-    }
-    if (child.children && searchAndReplaceOrgName(child.children, targetId)) {
-      return true; // Found the targetId in the nested children
-    }
-  }
-  return false; // Not found in this branch
-}
-
-/**lifecycle Hook*/
-onMounted(() => {
-  setTimeout(async () => {
-    store.activeId && (await fetchDataTree(store.activeId));
-  }, 200);
-});
-
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อมีการเปลี่ยนหน้า*/
-watch([() => reqMaster.page, () => reqMaster.pageSize], () => {
-  action1.value === false &&
-    fetchDataTable(reqMaster.id, reqMaster.type, false);
-});
-
-/** callblck function ทำการ fetch ข้อมูล Table เมื่อแสดงตำแหน่งทั้งหมด*/
-watch(
-  () => reqMaster.isAll,
-  () => {
-    getSummary();
-    if (reqMaster.page !== 1) {
-      reqMaster.page = 1;
-    } else {
-      fetchDataTable(reqMaster.id, reqMaster.type, false);
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="col-12">
-    <q-card bordered class="col-12 row caedNone">
-      <div class="col-xs-12 col-sm-3 row">
-        <div class="col-12 row no-wrap bg-grey-1">
-          <TreeMain
-            v-model:nodeTree="nodeTree"
-            v-model:shortName="shortName"
-            v-model:nodeId="nodeId"
-            :fetchDataTree="fetchDataTree"
-            :fetchDataTable="fetchDataTable"
-          />
-
-          <div class="col-12 row">
-            <q-separator :vertical="!$q.screen.lt.md" />
-          </div>
-        </div>
-      </div>
-
-      <div class="col-xs-12 col-sm-9 q-pa-md row">
-        <div class="col-12 row">
-          <div
-            class="row col-12 justify-center"
-            v-if="isLoad"
-            style="height: 550px"
-          >
-            <div class="col-2">
-              <q-spinner color="primary" size="3em" />
-            </div>
-          </div>
-
-          <div v-else class="col-12 row">
-            <div class="col-12" v-if="nodeId !== ''">
-              <!-- summary -->
-              <q-card
-                bordered
-                v-if="nodeId"
-                class="row col-12 justify-between list-summary q-gutter-xs bg-grey-1 q-pb-xs q-pr-xs"
-              >
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งทั้งหมด</div>
-                  <q-space />
-                  <q-badge
-                    color="secondary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.total
-                        : store.sumPosition.totalRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งที่มีคนครอง</div>
-                  <q-space />
-                  <q-badge
-                    color="primary"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.use
-                        : store.sumPosition.useRoot
-                    "
-                  />
-                </div>
-                <div class="row col q-pa-sm item">
-                  <div class="ellipsis">ตำแหน่งว่าง</div>
-                  <q-space />
-                  <q-badge
-                    color="red"
-                    :label="
-                      reqMaster.isAll
-                        ? store.sumPosition.vacant
-                        : store.sumPosition.vacantRoot
-                    "
-                  />
-                </div>
-              </q-card>
-
-              <TreeTable
-                v-if="nodeId !== ''"
-                v-model:nodeTree="nodeTree"
-                v-model:orgLevel="orgLevel"
-                v-model:treeId="nodeId"
-                v-model:reqMaster="reqMaster"
-                v-model:totalPage="totalPage"
-                v-model:posMaster="posMaster"
-                :shortName="shortName"
-                :mainTree="mainTree"
-                :fetchDataTable="fetchDataTable"
-                :filterKeyword="filterKeyword"
-                :fetchDataTree="fetchDataTree"
-              />
-            </div>
-            <div class="row col-12 items-center" v-else>
-              <q-banner class="q-pa-lg col-12 text-center">
-                <q-icon
-                  name="mdi-hand-pointing-left"
-                  size="lg"
-                  color="primary"
-                />
-                <p class="text-grey-9 q-pt-sm">กรุณาเลือกโครงสร้าง</p>
-              </q-banner>
-            </div>
-          </div>
-        </div>
-      </div>
-    </q-card>
-  </div>
-</template>
-
-<style scoped>
-.list-summary .item {
-  border: 1px solid rgb(231, 231, 231);
-  border-radius: 4px;
-  background-color: white;
-}
-</style>

src/modules/16_positionEmployee/interface/index/Main.ts

@@ -1,147 +0,0 @@
-interface Pagination {
-  rowsPerPage: number;
-}
-
-interface DataOption {
-  id: string;
-  name: string;
-}
-
-interface ListMenu {
-  label: string;
-  icon: string;
-  type: string;
-  color: string;
-}
-
-interface FormDataAgency {
-  orgName: string;
-  orgShortName: string;
-  orgCode: string;
-  orgPhoneEx: string;
-  orgPhoneIn: string;
-  orgFax: string;
-  orgLevel: string;
-  orgLevelSub: string;
-}
-
-interface FormDataPosition {
-  shortName: string;
-  prefixNo: string;
-  positionNo: string;
-  suffixNo: string;
-  reason: string;
-}
-
-interface FormDataNewStructure {
-  orgRevisionId: string;
-  orgRevisionName: string;
-  typeDraft: string;
-}
-
-interface FormAgencyRef {
-  orgName: object | null;
-  orgShortName: object | null;
-  orgCode: object | null;
-  // orgPhoneEx: object | null;
-  // orgPhoneIn: object | null;
-  // orgFax: object | null;
-  orgLevel: object | null;
-  [key: string]: any;
-}
-
-interface FormPositionRef {
-  prefixNo: object | null;
-  positionNo: object | null;
-  [key: string]: any;
-}
-
-interface FormDateTimeRef {
-  dateTime: object | null;
-  [key: string]: any;
-}
-
-interface FormNewStructureRef {
-  orgRevisionName: object | null;
-  orgRevisionId: object | null;
-  type: object | null;
-  [key: string]: any;
-}
-
-interface HistoryType {
-  orgRevisionId: string;
-  orgRevisionName: string;
-  orgRevisionIsCurrent: boolean;
-  orgRevisionIsDraft: boolean;
-  orgRevisionCreatedAt: Date | string;
-}
-interface HistoryPostType {
-  id: string;
-  name: string;
-  lastUpdatedAt: Date;
-  orgRevisionName: string;
-}
-
-interface FormPositionSelect {
-  positionId: string;
-  positionName: string;
-  positionField: string;
-  positionType: string;
-  positionLevel: string;
-  positionExecutive: string;
-  positionExecutiveField: string;
-  positionArea: string;
-}
-
-interface FormPositionSelectRef {
-  positionName: object | null;
-  positionField: object | null;
-  positionType: object | null;
-  positionLevel: object | null;
-  positionExecutive: object | null;
-  positionExecutiveField: object | null;
-  positionArea: object | null;
-  [key: string]: any;
-}
-
-interface RowDetailPositions {
-  id: string;
-  positionId: string;
-  positionName: string;
-  positionField: string;
-  positionType: string;
-  positionLevel: string;
-  positionExecutive: string;
-  positionExecutiveField: string;
-  positionArea: string;
-  posTypeId: string;
-  posLevelId: string;
-  posExecutiveId: string;
-  isSpecial: boolean;
-}
-
-interface NewPagination {
-  descending: boolean;
-  page: number;
-  rowsPerPage: number;
-  sortBy: string;
-}
-
-export type {
-  Pagination,
-  DataOption,
-  FormDataAgency,
-  FormDataPosition,
-  FormAgencyRef,
-  FormPositionRef,
-  FormDateTimeRef,
-  FormDataNewStructure,
-  FormNewStructureRef,
-  HistoryType,
-  ListMenu,
-  FormPositionSelect,
-  RowDetailPositions,
-  HistoryPostType,
-  FormPositionSelectRef,
-  NewPagination,
-};

src/modules/16_positionEmployee/interface/index/organizational.ts

@@ -1,107 +0,0 @@
-interface DataPosition {
-  id: string;
-  orgRootId: string;
-  orgChild1Id: string | null;
-  orgChild2Id: string | null;
-  orgChild3Id: string | null;
-  orgChild4Id: string | null;
-  posMasterNoPrefix: string;
-  posMasterNo: string;
-  posMasterNoSuffix: string;
-  orgShortname: string;
-  positions: Position[];
-  positionName: string;
-  positionField: string;
-  posTypeId: string;
-  posTypeName: string;
-  posLevelId: string;
-  posLevelName: string;
-  posExecutiveId: string;
-  posExecutiveName: string;
-  positionExecutiveField: string;
-  positionArea: string;
-  positionIsSelected: string | boolean;
-}
-
-interface Position {
-  id: string;
-  positionName: string;
-  positionField: string;
-  posTypeId: string;
-  posTypeName: string;
-  posLevelId: string;
-  posLevelName: string;
-  posExecutiveId: string;
-  posExecutiveName: string;
-  positionExecutiveField: string;
-  positionArea: string;
-  positionIsSelected: boolean;
-}
-
-interface FormDetailPosition {
-  positionNo: string;
-  positionType: string;
-  positionPathSide: string;
-  positionLine: string;
-  positionSide: string;
-  positionLevel: string;
-  positionExecutive: string;
-  positionExecutiveSide: string;
-  status: string;
-}
-
-interface DataTree {
-  orgTreeId: string;
-  orgRootId?: string;
-  orgLevel: number;
-  orgName: string;
-  orgTreeName: string;
-  orgTreeShortName: string;
-  orgTreeCode: string;
-  orgCode: string;
-  orgTreeRank: string;
-  orgTreeOrder: number;
-  orgRootCode?: string;
-  orgTreePhoneEx: string;
-  orgTreePhoneIn: string;
-  orgTreeFax: string;
-  orgRevisionId: string;
-  orgRootName: string;
-  totalPosition: number;
-  totalPositionCurrentUse: number;
-  totalPositionCurrentVacant: number;
-  totalPositionNextUse: number;
-  totalPositionNextVacant: number;
-  totalRootPosition: number;
-  totalRootPositionCurrentUse: number;
-  totalRootPositionCurrentVacant: number;
-  totalRootPositionNextUse: number;
-  totalRootPositionNextVacant: number;
-
-  children?: DataTree[];
-}
-
-interface SeaechResult {
-  id: string;
-  citizenId: string;
-  name: string;
-  posTypeName: string;
-  posLevelName: string;
-}
-interface FormPositionFilter {
-  positionNo: string;
-  positionType: string;
-  positionLevel: string;
-  personal: string;
-  position: string;
-  status: string;
-}
-
-export type {
-  DataPosition,
-  Position,
-  FormDetailPosition,
-  DataTree,
-  SeaechResult,
-  FormPositionFilter,
-};

src/modules/16_positionEmployee/interface/request/Main.ts

@@ -1,14 +0,0 @@
-interface DataSumCalendarObject {
-  id: number;
-  monthFull: String;
-  count: number;
-  color: String;
-}
-
-interface DataListsObject {
-  id: number;
-  count: number;
-  name: string;
-}
-
-export type { DataSumCalendarObject, DataListsObject };

src/modules/16_positionEmployee/interface/request/organizational.ts

@@ -1,21 +0,0 @@
-interface FilterMaster {
-  id: string; //*Id node
-  type: number; //*ประเภทnode
-  isAll: boolean; //*(true->ทั้งหมด, false->ในระดับตัวเอง)
-  page: number; //*หน้า
-  pageSize: number; //*จำนวนแถวต่อหน้า
-  keyword: string; //ข้อความที่ต้องการค้นหา
-  revisionId?: string
-}
-interface MovePos {
-  id: string;
-  type: number;
-  positionMaster: string[];
-}
-
-interface Inherit {
-  draftPositionId: string;
-  publishPositionId: string;
-}
-
-export type { FilterMaster, MovePos, Inherit };

src/modules/16_positionEmployee/interface/response/organizational.ts

@@ -1,203 +0,0 @@
-interface DataActive {
-  activeId: string;
-  activeName: string;
-  draftId: string;
-  draftName: string;
-  isPublic: boolean;
-  orgPublishDate: Date | null;
-}
-
-interface SumPosition {
-  totalPosition: number;
-  totalPositionCurrentUse: number;
-  totalPositionCurrentVacant: number;
-  totalPositionNextUse: number;
-  totalPositionNextVacant: number;
-  totalRootPosition: number;
-  totalRootPositionCurrentUse: number;
-  totalRootPositionCurrentVacant: number;
-  totalRootPositionNextUse: number;
-  totalRootPositionNextVacant: number;
-}
-
-interface OrgTree {
-  orgTreeId: string;
-  orgRootId: string;
-  orgLevel: number;
-  orgTreeName: string;
-  orgTreeShortName: string;
-  orgTreeCode: string;
-  orgCode: string;
-  orgTreeRank: string;
-  orgTreeOrder: number | null;
-  orgRootCode: string;
-  orgTreePhoneEx: string;
-  orgTreePhoneIn: string;
-  orgTreeFax: string;
-  orgRevisionId: string;
-  children: OrgTree[];
-}
-
-interface OrgRevision {
-  orgRevisionCreatedAt: string | null;
-  orgRevisionId: string;
-  orgRevisionIsCurrent: boolean;
-  orgRevisionIsDraft: boolean;
-  orgRevisionName: string;
-}
-
-interface OptionType {
-  id: string;
-  posTypeName: string;
-}
-
-interface OptionLevel {
-  id: string;
-  posLevelName: string;
-}
-
-interface OptionExecutive {
-  id: string;
-  posExecutiveName: string;
-}
-
-interface DataPosition {
-  id: string;
-  posExecutiveId: string;
-  posExecutiveName: string;
-  posLevelId: string;
-  posLevelName: string;
-  posTypeId: string;
-  posTypeName: string;
-  positionArea: string;
-  positionExecutiveField: string;
-  positionField: string;
-  positionIsSelected: boolean;
-  positionName: string;
-}
-
-interface Position {
-  id: string; // id ตำแหน่ง
-  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-  positionField: string; // สายงาน
-  posTypeId: string; // ประเภทตำแหน่ง
-  posTypeName: string; // ประเภทตำแหน่ง
-  posLevelId: string; // ระดับตำแหน่ง
-  posLevelName: string; // ระดับตำแหน่ง
-  posExecutiveId: string; // ตำแหน่งทางการบริหาร
-  posExecutiveName: string; // ตำแหน่งทางการบริหาร
-  positionExecutiveField: string; // ด้านทางการบริหาร
-  positionArea: string; // ด้าน/สาขา
-  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
-}
-
-interface PosMaster {
-  id: string; // id อัตรากำลัง posmaster
-  orgShortname: string; // อักษรย่อตำแหน่ง
-  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-  posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
-  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
-  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-  positionField: string; // สายงาน
-  posTypeId: string; // ประเภทตำแหน่ง
-  posTypeName: string; // ประเภทตำแหน่ง
-  posLevelId: string; // ระดับตำแหน่ง
-  posLevelName: string; // ระดับตำแหน่ง
-  posExecutiveId: string; // ตำแหน่งทางการบริหาร
-  posExecutiveName: string; // ตำแหน่งทางการบริหาร
-  positionExecutiveField: string; // ด้านทางการบริหาร
-  positionArea: string; // ด้าน/สาขา
-  positionIsSelected: boolean; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
-  fullNameCurrentHolder: string | null;
-  fullNameNextHolder: string | null;
-  positions: Position[]; // ตำแหน่ง
-  isSit: boolean;
-  profilePosition: string;
-  profilePostype: string;
-  profilePoslevel: string;
-}
-interface Position2 {
-  id: string; // id ตำแหน่ง
-  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-  positionField: string; // สายงาน
-  posTypeId: string; // ประเภทตำแหน่ง
-  posTypeName: string; // ประเภทตำแหน่ง
-  posLevelId: string; // ระดับตำแหน่ง
-  posLevelName: string; // ระดับตำแหน่ง
-  posExecutiveId: string; // ตำแหน่งทางการบริหาร
-  posExecutiveName: string; // ตำแหน่งทางการบริหาร
-  positionExecutiveField: string; // ด้านทางการบริหาร
-  positionArea: string; // ด้าน/สาขา
-  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
-}
-
-interface PosMaster2 {
-  id: string; // id อัตรากำลัง posmaster
-  orgShortname: string; // อักษรย่อตำแหน่ง
-  posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-  posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
-  posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
-  positionName: string; // ชื่อตำแหน่งในสายงาน (ชื่อตำแหน่ง)
-  positionField: string; // สายงาน
-  posTypeId: string; // ประเภทตำแหน่ง
-  posTypeName: string; // ประเภทตำแหน่ง
-  posLevelId: string; // ระดับตำแหน่ง
-  posLevelName: string; // ระดับตำแหน่ง
-  posExecutiveId: string; // ตำแหน่งทางการบริหาร
-  posExecutiveName: string; // ตำแหน่งทางการบริหาร
-  positionExecutiveField: string; // ด้านทางการบริหาร
-  positionArea: string; // ด้าน/สาขา
-  positionIsSelected: string; // เป็นตำแหน่งที่ถูกเลือกในรอบนั้น ๆ หรือไม่?
-  positions: Position[]; // ตำแหน่ง
-}
-
-interface HistoryPos {
-  id: string; //id node
-  orgShotName: string; //ชื่อย่อส่วนราชการ
-  lastUpdatedAt: Date; //วันที่แก้ไข
-  posMasterNoPrefix: string; //Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
-  posMasterNo: number; //เลขที่ตำแหน่ง เป็นตัวเลข
-  posMasterNoSuffix: string; //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
-}
-
-interface SelectPerson {
-  citizenId: string;
-  firstName: string;
-  id: string;
-  lastName: string;
-  posLevel: string;
-  posType: string;
-  position: string;
-  prefix: string;
-}
-
-interface PosLevels {
-  id: string;
-  posLevelAuthority: null;
-  posLevelName: string;
-  posLevelRank: number;
-}
-interface TypePos {
-  id: string;
-  PosLevels: PosLevels[];
-  posTypeName: string;
-  posTypeRank: number;
-}
-
-export type {
-  DataActive,
-  OrgTree,
-  OrgRevision,
-  OptionType,
-  OptionLevel,
-  OptionExecutive,
-  DataPosition,
-  PosMaster,
-  PosMaster2,
-  Position,
-  Position2,
-  SumPosition,
-  HistoryPos,
-  SelectPerson,
-  TypePos,
-};

src/modules/16_positionEmployee/router.ts

@@ -1,14 +0,0 @@
-const mainPage = () => import("@/modules/16_positionEmployee/views/main.vue");
-
-export default [
-  {
-    path: "/position-employee",
-    name: "positionEmployee",
-    component: mainPage,
-    meta: {
-      Auth: true,
-      Key: [1],
-      Role: "positionEmployee",
-    },
-  },
-];

src/modules/16_positionEmployee/views/main.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importComponents*/
-import TreeView from "@/modules/16_positionEmployee/components/TreeView.vue";
-
-/** importStore*/
-import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
-import { useCounterMixin } from "@/stores/mixin";
-
-/** use*/
-const $q = useQuasar();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
-const store = usePositionEmp();
-
-/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
-async function fetchOrganizationActive() {
-  showLoader();
-  await http
-    .get(config.API.activeOrganization)
-    .then((res) => {
-      const data = res.data.result;
-      if (data) {
-        store.fetchDataActive(data);
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** lifecycleHook */
-onMounted(async () => {
-  await fetchOrganizationActive();
-});
-</script>
-
-<template>
-  <div class="row items-center">
-    <div class="toptitle text-dark row items-center q-py-xs">
-      อัตรากำลังลูกจ้างประจำ ฯ
-    </div>
-  </div>
-
-  <q-card flat bordered>
-    <q-card class="my-card">
-      <q-card-section style="padding: 0px">
-        <TreeView />
-      </q-card-section>
-    </q-card>
-  </q-card>
-</template>
-
-<style scoped></style>