API เลือกคนครอง

src/modules/02_organizationalNew/components/DialogSelectPerson.vue

@@ -1,15 +1,16 @@
 <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 { useCounterMixin } from "@/stores/mixin";
-import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { Position } from "@/modules/02_organizationalNew/interface/index/organizational";
+import type {
+  Position,
+  SeaechResult,
+  FormPositionFilter,
+} from "@/modules/02_organizationalNew/interface/index/organizational";
 import type {
   DataOption,
   NewPagination,
@@ -18,37 +19,20 @@ import type {
   OptionType,
   OptionExecutive,
   OptionLevel,
+  SelectPerson,
+  TypePos,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
-interface FormDetailPosition {
-  positionNo: string;
-  positionType: string;
-  positionLevel: string;
-  personal: string;
-  position: string;
-  status: string;
-}
 
-interface SeaechResult {
-  id: string;
-  citizenId: string;
-  name: string;
-  posTypeName: string;
-  posLevelName: string;
-}
+/** importCompoonents*/
+import DialogHeader from "@/components/DialogHeader.vue";
 
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isDisValidate = ref<boolean>(false);
-const executiveOpsMain = ref<DataOption[]>([]);
-const typeOpsMain = ref<DataOption[]>([]);
-const levelOpsMain = ref<DataOption[]>([]);
-const typeOps = ref<DataOption[]>([]);
-const levelOps = ref<DataOption[]>([]);
-const dataLevel = ref<any>();
-const selected = ref<Position[]>([]);
-const isSit = ref<boolean>(false);
-const executiveOps = ref<DataOption[]>([]);
-const store = useOrganizational();
+/** import*Store*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+/** use*/
 const $q = useQuasar();
+const store = useOrganizational();
 const {
   dialogConfirm,
   showLoader,
@@ -58,9 +42,8 @@ const {
   dialogMessageNotify,
 } = useCounterMixin();
 
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
-// const modal = ref<boolean>(true);
-
 const props = defineProps({
   fetchActive: {
     type: Function,
@@ -72,10 +55,18 @@ const props = defineProps({
     required: true,
   },
 });
-const row = ref<Position[]>([]);
-const rowResult = ref<SeaechResult[]>([]);
 
-const formData = reactive<FormDetailPosition>({
+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: "", //*เลขที่ตำแหน่ง
@@ -84,6 +75,7 @@ const formData = reactive<FormDetailPosition>({
   status: "",
 });
 
+/** Table*/
 const visibleColumnsResult = ref<String[]>([
   "no",
   "citizenId",
@@ -91,7 +83,6 @@ const visibleColumnsResult = ref<String[]>([
   "posTypeName",
   "posLevelName",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -222,11 +213,15 @@ const columnsResult = ref<QTableProps["columns"]>([
     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
@@ -247,26 +242,6 @@ async function fetchType() {
     });
 }
 
-/** function เรียกรายการตำแหน่งทางการบริหาร */
-async function fetchExecutive() {
-  showLoader();
-  await http
-    .get(config.API.orgPosExecutive)
-    .then((res) => {
-      executiveOpsMain.value = res.data.result.map((e: OptionExecutive) => ({
-        id: e.id,
-        name: e.posExecutiveName,
-      }));
-      executiveOps.value = executiveOpsMain.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**
  * ส่งค่า css ออกไปตามเงื่อนไข
  * @param val true/false
@@ -278,51 +253,10 @@ function inputEdit(val: boolean) {
   };
 }
 
-function clearForm() {
-  formData.positionType = "";
-  formData.positionLevel = "";
-  formData.personal = "";
-  formData.position = "";
-  row.value = [];
-  rowResult.value = [];
-}
-
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value == true) {
-      clearForm();
-      fetchType();
-      fetchExecutive();
-
-      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 : "-",
-        }));
-      }
-    }
-  }
-);
-
+/** function เรียกข้แมูลระดับตำแหน่ง*/
 function updateSelectType(val: string) {
-  const listLevel = dataLevel.value.find((e: any) => e.id === val);
-  levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
+  const listLevel: any = dataLevel.value.find((e: TypePos) => e.id === val);
+  levelOpsMain.value = listLevel?.posLevels.map((e: OptionLevel) => ({
     id: e.id,
     name: e.posLevelName,
   }));
@@ -341,16 +275,11 @@ function validateForm() {
   }
 }
 
-/** ฟังชั่น บันทึก */
+/** function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm(
     $q,
     () => {
-      // console.log("ตำแหน่ง==>", selected.value[0]?.id);
-      // console.log("ตำแหน่ง==>", selectedProfile.value[0]?.id);
-      // console.log("ทับที่==>", isSit.value);
-      // console.log(props.dataDetailPos);
-
       const body = {
         posMaster: props.dataDetailPos?.id, //*id อัตรากำลัง
         position: selected.value[0]?.id, //*id ตำแหน่ง
@@ -378,14 +307,13 @@ function onSubmit() {
   );
 }
 
-/** เมื่อ enter ให้ทำการ ค้นหาข้อมูล */
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
 const totalPage = ref<number>(0);
 const selectedProfile = ref<SeaechResult[]>([]);
+/** functiuon ค้นหาคนครอง */
 async function searchData() {
   showLoader();
-  console.log(formData);
   const reqBody = {
     posTypeId: formData.positionType, // id ประเภทตำแหน่ง
     posLevelId: formData.positionLevel, // id ระดับตำแหน่ง
@@ -397,12 +325,11 @@ async function searchData() {
   await http
     .post(config.API.orgSearchProfile, reqBody)
     .then((res) => {
-      console.log(res);
       totalPage.value = Math.ceil(res.data.result.total / pageSize.value);
-      const list = res.data.result.data.map((e: any) => ({
+      const list = res.data.result.data.map((e: SelectPerson) => ({
         id: e.id,
         citizenId: e.citizenId,
-        name: `${e.prefix + e.firstName + e.lastName}`,
+        name: `${e.prefix + e.firstName + " " + e.lastName}`,
         posTypeName: e.posType ?? "-",
         positionName: e.position ?? "-",
         posLevelName: e.posLevel ?? "-",
@@ -416,24 +343,70 @@ async function searchData() {
     .finally(() => {
       hideLoader();
     });
-
-  // rowResult.value = data;
-  // props.fetchListDisciplinary?.();
 }
 
+/** 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,
+  () => {
+    if (modal.value == true) {
+      clearForm();
+      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 : "-",
+        }));
+      }
+    }
+  }
+);
+
+/** callback function ทำงานการค้นหาข้อมุลคนครองเมื่อมีการ update Pagination*/
 watch([() => page.value, () => pageSize.value], () => {
   searchData();
 });
-
-function updatePagination(newPagination: NewPagination) {
-  pageSize.value = newPagination.rowsPerPage;
-  page.value = 1;
-}
 </script>
 
 <template>

src/modules/02_organizationalNew/interface/index/organizational.ts

@@ -81,4 +81,27 @@ interface DataTree {
   children?: DataTree[];
 }
 
-export type { DataPosition, Position, FormDetailPosition, 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/02_organizationalNew/interface/response/organizational.ts

@@ -156,6 +156,30 @@ interface HistoryPos {
   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,
@@ -170,4 +194,7 @@ export type {
   Position2,
   SumPosition,
   HistoryPos,
+  SelectPerson,
+  TypePos,
+ 
 };