โครงสร้าง => refactor code

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

@@ -11,7 +11,6 @@ import config from "@/app.config";
 import type {
   DataOption,
   FormPositionSelect,
-  FormPositionSelectRef,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 import type {
   OptionType,

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

@@ -70,10 +70,10 @@ function onSubmit() {
       .put(config.API.orgSetDateTime(store.draftId as string), {
         orgPublishDate: dateTime.value,
       })
-      .then((res) => {
+      .then(async () => {
-        props.close?.();
+        await props.fetchActive();
-        props.fetchActive();
+        await props.close?.();
-        success($q, "บันทึกข้อมูลสำเร็จ");
+        await success($q, "บันทึกข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
@@ -91,9 +91,9 @@ function onClickPublish() {
       showLoader();
       http
         .get(config.API.organizationPublishGet)
-        .then((res) => {
+        .then(async () => {
-          props.fetchActive();
+          await props.fetchActive();
-          props.close?.();
+          await props.close?.();
         })
         .catch((e) => {
           messageError($q, e);

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

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
-import DialogAddPosition from "@/modules/02_organizationalNew/components/DialogAddPosition.vue";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
 import type {
   FormDataPosition,
   FormPositionRef,
@@ -17,14 +20,40 @@ import type {
 } from "@/modules/02_organizationalNew/interface/index/Main";
 import type {
   OptionType,
-  OptionLevel,
   OptionExecutive,
-  DataPosition,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
 import type { FilterMaster } from "@/modules/02_organizationalNew/interface/request/organizational";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
+/**
+ * importComponents
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogAddPosition from "@/modules/02_organizationalNew/components/DialogAddPosition.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+  dialogMessageNotify,
+} = mixin;
+
+/**
+ * props
+ */
+const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
 const props = defineProps({
   modal: Boolean,
   close: Function,
@@ -39,24 +68,10 @@ const props = defineProps({
 
 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 succession = ref<boolean>(false); // id ของตำแหน่งที่จะสืบทอด
 const dataCopy = ref<any>();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-  dialogRemove,
-  dialogMessageNotify,
-} = mixin;
-const selected = ref<any>([]);
 const search = ref<string>("");
 const type = ref<string>("positionName");
 const optionFilter = ref<DataOption[]>([
@@ -68,12 +83,10 @@ const optionFilter = ref<DataOption[]>([
   { id: "positionExecutiveField", name: "ด้านทางการบริหาร" },
   { id: "positionArea", name: "ด้าน/สาขา" },
 ]);
-
 const typeOpsMain = ref<DataOption[]>([]);
 const executiveOpsMain = ref<DataOption[]>([]);
 const executiveOps = ref<DataOption[]>([]);
 const typeOps = ref<DataOption[]>([]);
-
 const listMenu = ref<ListMenu[]>([
   {
     label: "คัดลอก",
@@ -135,16 +148,6 @@ const objectPositionRef: FormPositionRef = {
   positionNo: positionNoRef,
 };
 
-const objectPositionSelectRef: FormPositionSelectRef = {
-  positionName: positionNameRef,
-  positionField: positionFieldRef,
-  positionType: positionTypeRef,
-  positionLevel: positionLevelRef,
-  positionExecutive: positionExecutiveRef,
-  positionExecutiveField: positionExecutiveFieldRef,
-  positionArea: positionAreaRef,
-};
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -274,26 +277,6 @@ async function fetchType() {
     });
 }
 
-/** function เรียกรายการระดับตำแหน่ง */
-// async function fetchLevel() {
-//   showLoader();
-//   await http
-//     .get(config.API.orgPosLevel)
-//     .then((res) => {
-//       levelOpsMain.value = res.data.result.map((e: OptionLevel) => ({
-//         id: e.id,
-//         name: e.posLevelName,
-//       }));
-//       levelOps.value = levelOpsMain.value;
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// }
-
 /** function เรียกรายการตำแหน่งทางการบริหาร */
 async function fetchExecutive() {
   showLoader();
@@ -335,24 +318,6 @@ function validateForm() {
   }
 }
 
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
-// function validateFormPositionEdit() {
-//   isDisValidate.value = false;
-//   const hasError = [];
-//   for (const key in objectPositionSelectRef) {
-//     if (Object.prototype.hasOwnProperty.call(objectPositionSelectRef, key)) {
-//       const property = objectPositionSelectRef[key];
-//       if (property.value && typeof property.value.validate === "function") {
-//         const isValid = property.value.validate();
-//         hasError.push(isValid);
-//       }
-//     }
-//   }
-//   if (hasError.every((result) => result === true)) {
-//     onSubmitSelectEdit();
-//   }
-// }
-
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, async () => {
@@ -387,15 +352,15 @@ function onSubmit() {
     props.actionType === "ADD" || props.actionType === "COPY"
       ? await http
           .post(config.API.orgPosMaster, body)
-          .then(() => {
+          .then(async () => {
-            success($q, "เพิ่มข้อมูลสำเร็จ");
+            await props.fetchDataTable?.(
-            props.fetchDataTable?.(
               reqMaster.value.id,
               reqMaster.value.type,
               false
             );
-            props.getSummary?.();
+            await props.getSummary?.();
-            close();
+            await close();
+            await success($q, "เพิ่มข้อมูลสำเร็จ");
           })
           .catch((err) => {
             messageError($q, err);
@@ -406,14 +371,14 @@ function onSubmit() {
       : props.rowId &&
         (await http
           .put(config.API.orgPosMasterById(props.rowId), body)
-          .then(() => {
+          .then(async () => {
-            success($q, "แก้ไขข้อมูลสำเร็จ");
+            await props.fetchDataTable?.(
-            props.fetchDataTable?.(
               reqMaster.value.id,
               reqMaster.value.type,
               false
             );
-            close();
+            await close();
+            await success($q, "แก้ไขข้อมูลสำเร็จ");
           })
           .catch((err) => {
             messageError($q, err);
@@ -423,42 +388,6 @@ function onSubmit() {
           }));
   });
 }
-/** ฟังชั่น บันทึก */
-// function onSubmitSelectEdit() {
-//   dialogConfirm(
-//     $q,
-//     async () => {
-//       showLoader();
-//       const body = {
-//         posDictName: formPositionSelect.positionName,
-//         posDictField: formPositionSelect.positionField, //สายงาน
-//         posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
-//         posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-//         posExecutiveId:
-//           formPositionSelect.positionExecutive !== ""
-//             ? formPositionSelect.positionExecutive
-//             : null, //ตำแหน่งทางการบริหาร
-//         posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
-//         posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-//       };
-//       await http
-//         .post(config.API.orgPosPosition, body)
-//         .then(() => {
-//           success($q, "เพิ่มข้อมูลสำเร็จ");
-
-//           clearFormPositionSelect();
-//         })
-//         .catch((err) => {
-//           messageError($q, err);
-//         })
-//         .finally(() => {
-//           hideLoader();
-//         });
-//     },
-//     "ยืนยันการเพิ่มตำแหน่ง",
-//     "ต้องการยืนยันการเพิ่มตำแหน่งนี้ใช่หรือไม่?"
-//   );
-// }
 
 /** input ค้นหา */
 const searchRef = ref<any>(null);
@@ -483,16 +412,6 @@ async function searchInput() {
   }
 }
 
-// function updateSelectType(val: string) {
-//   const listLevel = dataLevel.value.find((e: any) => e.id === val);
-//   levelOpsMain.value = listLevel.posLevels.map((e: OptionLevel) => ({
-//     id: e.id,
-//     name: e.posLevelName,
-//   }));
-//   levelOps.value = levelOpsMain.value;
-//   formPositionSelect.positionLevel = "";
-// }
-
 /**
  * คัดลอกข้อมูล
  * @param data ข้อมูลตำแหน่ง
@@ -779,7 +698,6 @@ async function emitSearch(keyword: string, typeSelect: string) {
                               {{ col.value }}
                             </div>
                           </q-td>
-
                         </q-tr>
                       </template>
                     </d-table>
@@ -983,7 +901,6 @@ async function emitSearch(keyword: string, typeSelect: string) {
                               {{ col.value }}
                             </div>
                           </q-td>
-
                         </q-tr>
                       </template>
                     </d-table>

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

@@ -1,26 +1,43 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import type { HistoryPostType } from "@/modules/02_organizationalNew/interface/index/Main";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
-import { getDateMeta } from "@fullcalendar/core/internal";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { HistoryPostType } from "@/modules/02_organizationalNew/interface/index/Main";
+
+/**
+ * importComponrnts
+ */
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+/**
+ * props
+ */
 const modal = defineModel<boolean>("history", { required: true });
 const type = defineModel<number>("type", { required: true });
 const orgId = defineModel<string>("orgId", { required: true });
 
-const $q = useQuasar();
+/**
-const mixin = useCounterMixin();
+ * ข้อมุล Table
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+ */
 const rows = ref<HistoryPostType[]>([]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -67,6 +84,9 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
+/**
+ * function เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
+ */
 function postData() {
   showLoader();
   http
@@ -79,7 +99,9 @@ function postData() {
       const dataMap = dataList.map((item: HistoryPostType) => ({
         id: item.id ? item.id : "-",
         name: item.name ? item.name : "-",
-        lastUpdatedAt: item.lastUpdatedAt ? date2Thai(item.lastUpdatedAt as Date,false,true) : "-",
+        lastUpdatedAt: item.lastUpdatedAt
+          ? date2Thai(item.lastUpdatedAt as Date, false, true)
+          : "-",
         orgRevisionName: item.orgRevisionName ? item.orgRevisionName : "-",
       }));
       rows.value = dataMap;
@@ -91,6 +113,10 @@ function postData() {
       hideLoader();
     });
 }
+
+/**
+ * callback function  เมื่อ modal = true เรียกข้อมูล ประวัติหน่วยงาน,ประวัติส่วนราชการ
+ */
 watch(
   () => modal.value,
   () => {

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

@@ -37,8 +37,9 @@ const props = defineProps({
 });
 
 /**
- * Table
+ * ข้อมูล Table
  */
+const rows = ref<HistoryPos[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -145,8 +146,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<HistoryPos[]>([]);
 
+/**
+ *  function เรียกข้อมูลประวัติตำแหน่ง
+ * @param id
+ */
 function fetchHistoryPos(id: string) {
   showLoader();
   http

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

@@ -4,6 +4,9 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
 import type {
   OrgTree,
@@ -16,11 +19,20 @@ import type {
 } from "@/modules/02_organizationalNew/interface/request/organizational";
 import type { DataTree } from "@/modules/02_organizationalNew/interface/index/organizational";
 
+/**
+ * importComponents
+ */
 import HeaderDialog from "@/components/DialogHeader.vue";
 
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+/**
+ * use
+ */
 const $q = useQuasar();
 const store = useOrganizational();
 const {
@@ -32,13 +44,15 @@ const {
   success,
 } = useCounterMixin();
 
+/**
+ * props
+ */
 const modal = defineModel<boolean>("modal", { required: true });
 const reqMaster = defineModel<FilterMaster>("reqMaster", { required: true });
 const totalPage = defineModel<number>("totalPage", { required: true });
 const nodeTree = defineModel<OrgTree[]>("nodeTree", { required: true });
 const columns = defineModel<QTableProps[]>("columns", {});
 const rows = defineModel<PosMaster2[]>("rows", { required: true });
-
 const props = defineProps({
   fetchDataTree: {
     type: Function,
@@ -63,19 +77,13 @@ 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() {
+const pagination = ref({
-  filterTree.value = "";
+  page: reqMaster.value.page,
-  filterRef.value.focus();
+  rowsPerPage: reqMaster.value.pageSize,
-}
+});
-
-function updateSelected(data: DataTree) {
-  levelTree.value = data.orgLevel;
-  selectedTree.value = data.orgTreeId;
-}
 
 const isDisable = computed(() => {
   if (selectedTree.value === "" && selectedFilter.value.length === 0) {
@@ -83,12 +91,29 @@ const isDisable = computed(() => {
   } else return false;
 });
 
+/**
+ * function รีเช็ด filter
+ */
+function resetFilter() {
+  filterTree.value = "";
+  filterRef.value.focus();
+}
+
+/**
+ * function เลือกข้อมูลหน่วยงาน
+ */
+function updateSelected(data: DataTree) {
+  levelTree.value = data.orgLevel;
+  selectedTree.value = data.orgTreeId;
+}
+
+/**
+ * function ยืนยันการย้ายแหน่งจากหน่วยงาน/ส่วนราชการปัจจุบัน
+ */
 function onClickMovePos() {
   if (selectedTree.value === "" || selectedTree.value === null) {
-    console.log("เลือกหน่วยงาน");
     dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่จะย้ายไป");
   } else if (selectedFilter.value.length === 0) {
-    console.log("เลือกตำแห่นง");
     dialogMessageNotify($q, "กรุณาเลือกตำแห่นงที่จะย้าย");
   } else {
     dialogConfirm(
@@ -148,11 +173,6 @@ function updatePagination(newPagination: NewPagination) {
   reqMaster.value.pageSize = newPagination.rowsPerPage;
   reqMaster.value.page = 1;
 }
-
-const pagination = ref({
-  page: reqMaster.value.page,
-  rowsPerPage: reqMaster.value.pageSize,
-});
 </script>
 
 <template>

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

@@ -4,8 +4,9 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import DialogHeader from "@/components/DialogHeader.vue";
+/**
-
+ * importType
+ */
 import type {
   FormDataNewStructure,
   FormNewStructureRef,
@@ -13,18 +14,29 @@ import type {
   HistoryType,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+/**
+ * use
+ */
 const $q = useQuasar();
 const store = useOrganizational();
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
+/**
+ * props
+ */
 const modal = defineModel<boolean>("newStructure", { required: true });
 const status = defineModel<boolean>("status", { required: true });
 const type = defineModel<string>("type", { default: "NEW" });
-
 const props = defineProps({
   fetchActive: {
     type: Function,
@@ -51,8 +63,6 @@ const typeOp = ref<DataOption[]>([
     name: "ทำสำเนาโครงสร้าง ตำแหน่ง และคนครอง",
   },
 ]);
-const orgRevisionOpMain = ref<DataOption[]>([]);
-const orgRevisionOp = ref<DataOption[]>([]);
 
 const orgRevisionNameRef = ref<Object | null>(null);
 const typeRef = ref<Object | null>(null);
@@ -64,14 +74,18 @@ const formData = reactive<FormDataNewStructure>({
   typeDraft: "",
 });
 
-/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+/**
+ * maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ
+ */
 const objectRef: FormNewStructureRef = {
   orgRevisionName: orgRevisionNameRef,
   type: typeRef,
   orgRevisionId: orgRevisionIdRef,
 };
 
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+/**
+ * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ */
 function validateForm() {
   const hasError = [];
   for (const key in objectRef) {
@@ -88,7 +102,9 @@ function validateForm() {
   }
 }
 
-/** ฟังชั่น บันทึก */
+/**
+ * ฟังชั่น บันทึก
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -120,6 +136,9 @@ function onSubmit() {
   );
 }
 
+/**
+ * ฟังชั่น ปิด popup
+ */
 function close() {
   modal.value = false;
   formData.orgRevisionId = "";
@@ -127,20 +146,18 @@ function close() {
   formData.typeDraft = "";
 }
 
-async function fetchOrgRevision() {
+/**
+ * เรียกข้อมูล
+ */
+function fetchOrgRevision() {
   showLoader();
-  await http
+  http
     .get(config.API.organizationHistoryNew)
     .then(async (res) => {
       const data = res.data.result.filter(
         (e: HistoryType) => e.orgRevisionIsDraft === false
       );
       if (data) {
-        // const listOption = data.map((e: HistoryType) => ({
-        //   id: e.orgRevisionId,
-        //   name: e.orgRevisionName,
-        // }));
-        // orgRevisionOpMain.value = listOption;
         const currentStr = await data.find(
           (x: any) => x.orgRevisionIsCurrent === true
         );
@@ -155,20 +172,6 @@ async function fetchOrgRevision() {
     });
 }
 
-// function filterSelector(val: any, update: Function, refData: string) {
-//   switch (refData) {
-//     case "orgRevisionId":
-//       update(() => {
-//         orgRevisionOp.value = orgRevisionOpMain.value.filter(
-//           (v: DataOption) => v.name.indexOf(val) > -1
-//         );
-//       });
-//       break;
-//     default:
-//       break;
-//   }
-// }
-
 watch(
   () => modal.value,
   () => {
@@ -218,36 +221,6 @@ watch(
                   lazy-rules
                 />
               </div>
-              <!-- <div class="col-6" v-if="type !== 'NEW'">
-                <q-select
-                  for="#orgRevisionId"
-                  ref="orgRevisionIdRef"
-                  dense
-                  hide-bottom-space
-                  outlined
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  v-model="formData.orgRevisionId"
-                  :options="orgRevisionOp"
-                  label="เลือกโครงสร้าง"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกโครงการสร้าง'}`]"
-                  lazy-rules
-                  use-input
-                  @filter="(inputValue:any,
-                  doneFn:Function) => filterSelector(inputValue, doneFn,'orgRevisionId'
-                  ) "
-                >
-                  <template v-slot:no-option>
-                    <q-item>
-                      <q-item-section class="text-grey-5">
-                        ไม่พบข้อมูล
-                      </q-item-section>
-                    </q-item>
-                  </template>
-                </q-select>
-              </div> -->
             </div>
           </q-card-section>
           <q-separator />

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

@@ -1,30 +1,31 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-/** import type*/
+/**
-import type { QTableProps } from "quasar";
+ * import type
-import type {
+ */
-  FormDetailPosition,
+import type { FormDetailPosition } from "@/modules/02_organizationalNew/interface/index/organizational";
-  Position,
-} from "@/modules/02_organizationalNew/interface/index/organizational";
 
-/** importComponents*/
+/**
+ * importComponents
+ */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importStore*/
+/**
-import { useCounterMixin } from "@/stores/mixin";
+ * importStore
+ */
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
-/**use*/
+/**
+ * use
+ */
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const store = useOrganizational();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
-/**Props*/
+/**
+ * Props
+ */
 const modal = defineModel<boolean>("positionDetail", { required: true });
 const prosp = defineProps({
   dataDetailPos: { type: Object, require: true },
@@ -43,88 +44,16 @@ const formData = reactive<FormDetailPosition>({
   status: "", //*สถานะตำแหน่ง
 });
 
-// const columns = ref<QTableProps["columns"]>([
+/**
-//   {
+ * function ปิด popup
-//     name: "no",
+ */
-//     align: "left",
-//     label: "ลำดับ",
-//     sortable: false,
-//     field: "no",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "positionName",
-//     align: "left",
-//     label: "ตำแหน่งในสายงาน",
-//     sortable: true,
-//     field: "positionName",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "positionField",
-//     align: "left",
-//     label: "สายงาน",
-//     sortable: true,
-//     field: "positionField",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "posTypeName",
-//     align: "left",
-//     label: "ประเภทตำเเหน่ง",
-//     sortable: true,
-//     field: "posTypeName",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "posLevelName",
-//     align: "left",
-//     label: "ระดับตำแหน่ง",
-//     sortable: true,
-//     field: "posLevelName",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "posExecutiveName",
-//     align: "left",
-//     label: "ตำแหน่งทางการบริหาร",
-//     sortable: true,
-//     field: "posExecutiveName",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "positionExecutiveField",
-//     align: "left",
-//     label: "ด้านทางการบริหาร",
-//     sortable: true,
-//     field: "positionExecutiveField",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-//   {
-//     name: "positionArea",
-//     align: "left",
-//     label: "ด้าน/สาขา",
-//     sortable: true,
-//     field: "positionArea",
-//     headerStyle: "font-size: 14px",
-//     style: "font-size: 14px",
-//   },
-// ]);
-// const row = ref<Position[]>([]);
-
-/** function ปิด popup*/
 function close() {
   modal.value = false;
 }
 
-/** callblack function ทำเมื่อเปิด popup set ตำแหน่งเลขที่ และสถานะตำแหน่ง */
+/**
+ * callblack function ทำเมื่อเปิด popup set ตำแหน่งเลขที่ และสถานะตำแหน่ง
+ */
 watch(
   () => modal.value,
   () => {
@@ -151,19 +80,6 @@ watch(
           .positionExecutiveField
           ? prosp.dataDetailPos.positionExecutiveField
           : "-";
-
-        // row.value = prosp.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 : "-",
-        // }));
       }
     }
   }

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

@@ -4,7 +4,9 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/** importType*/
+/**
+ * importType
+ */
 import type { QTableProps } from "quasar";
 import type {
   Position,
@@ -22,14 +24,20 @@ import type {
   TypePos,
 } from "@/modules/02_organizationalNew/interface/response/organizational";
 
-/** importCompoonents*/
+/**
+ * importCompoonents
+ */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** import*Store*/
+/**
+ * import*Store
+ */
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
-/** use*/
+/**
+ * use
+ */
 const $q = useQuasar();
 const store = useOrganizational();
 const {
@@ -41,7 +49,9 @@ const {
   dialogMessageNotify,
 } = useCounterMixin();
 
-/** props*/
+/**
+ * props
+ */
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   fetchActive: {
@@ -60,7 +70,6 @@ const props = defineProps({
 });
 
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const isDisValidate = ref<boolean>(false);
 const typeOpsMain = ref<DataOption[]>([]);
 const levelOpsMain = ref<DataOption[]>([]);
 const typeOps = ref<DataOption[]>([]);
@@ -78,7 +87,11 @@ const formData = reactive<FormPositionFilter>({
   status: "",
 });
 
-/** Table*/
+/**
+ * ข้อมูลธฟิสำ Table
+ */
+const row = ref<Position[]>([]);
+const rowResult = ref<SeaechResult[]>([]);
 const visibleColumnsResult = ref<String[]>([
   "no",
   "citizenId",
@@ -216,18 +229,20 @@ const columnsResult = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const row = ref<Position[]>([]);
-const rowResult = ref<SeaechResult[]>([]);
 
-/** function closePopup*/
+/**
+ * function closePopup
+ */
 function close() {
   modal.value = false;
 }
 
-/** function เรียกข้อมูลประเภทตำแหน่ง*/
+/**
-async function fetchType() {
+ * function เรียกข้อมูลประเภทตำแหน่ง
+ */
+function fetchType() {
   showLoader();
-  await http
+  http
     .get(config.API.orgPosType)
     .then((res) => {
       dataLevel.value = res.data.result;
@@ -256,7 +271,9 @@ function inputEdit(val: boolean) {
   };
 }
 
-/** function เรียกข้แมูลระดับตำแหน่ง*/
+/**
+ * function เรียกข้แมูลระดับตำแหน่ง
+ */
 function updateSelectType(val: string) {
   const listLevel: any = dataLevel.value.find((e: TypePos) => e.id === val);
   levelOpsMain.value = listLevel?.posLevels.map((e: OptionLevel) => ({
@@ -267,7 +284,9 @@ function updateSelectType(val: string) {
   formData.positionLevel = "";
 }
 
-/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+/**
+ * ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
+ */
 function validateForm() {
   if (selected.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกรายการตำแหน่ง");
@@ -278,7 +297,9 @@ function validateForm() {
   }
 }
 
-/** function ยืนยันการบันทึกข้อมูล */
+/**
+ * function ยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -292,17 +313,16 @@ function onSubmit() {
       showLoader();
       http
         .post(config.API.orgProfile, body)
-        .then(() => {
+        .then(async () => {
-          props.fetchDataTable?.(store.treeId, store.level, false);
+          await props.fetchDataTable?.(store.treeId, store.level, false);
-          props.getSummary();
+          await props.getSummary();
           success($q, "บันทึกข้อมูลสำเร็จ");
+          modal.value = false;
         })
         .catch((err) => {
           messageError($q, err);
         })
-        .finally(async () => {
+        .finally(() => {
-          modal.value = await false;
-          close();
           hideLoader();
         });
     },
@@ -315,8 +335,11 @@ const page = ref<number>(1);
 const pageSize = ref<number>(10);
 const totalPage = ref<number>(0);
 const selectedProfile = ref<SeaechResult[]>([]);
-/** functiuon ค้นหาคนครอง */
+
-async function searchData() {
+/**
+ * functiuon ค้นหาคนครอง
+ */
+function searchData() {
   showLoader();
   const reqBody = {
     posTypeId: formData.positionType, // id ประเภทตำแหน่ง
@@ -326,7 +349,7 @@ async function searchData() {
     pageSize: pageSize.value, //*จำนวนแถวต่อหน้า
     keyword: formData.personal, //นามสกุล ชื่อ สกุล เลขบัตร
   };
-  await http
+  http
     .post(config.API.orgSearchProfile, reqBody)
     .then((res) => {
       totalPage.value = Math.ceil(res.data.result.total / pageSize.value);
@@ -349,13 +372,17 @@ async function searchData() {
     });
 }
 
-/** function update PageSize*/
+/**
+ * function update PageSize
+ */
 function updatePagination(newPagination: NewPagination) {
   pageSize.value = newPagination.rowsPerPage;
   page.value = 1;
 }
 
-/** function เคลียร์Form*/
+/**
+ * function เคลียร์Form
+ */
 function clearForm() {
   formData.positionType = "";
   formData.positionLevel = "";
@@ -368,7 +395,9 @@ function clearForm() {
   isSit.value = false;
 }
 
-/** function เคลียร์ตำแหน่ง*/
+/**
+ * function เคลียร์ตำแหน่ง
+ */
 function clearPosition() {
   formData.positionType = "";
   formData.positionLevel = "";
@@ -625,11 +654,11 @@ watch([() => page.value, () => pageSize.value], () => {
                   />
                   <div class="col-12">
                     <d-table
-                    ref="table"
+                      ref="table"
-                    flat
+                      flat
-                    :columns="columnsResult"
+                      :columns="columnsResult"
-                    :rows="rowResult"
+                      :rows="rowResult"
-                    row-key="id"
+                      row-key="id"
                       dense
                       class="custom-header-table"
                       :paging="true"

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

@@ -1,22 +1,40 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { QTableProps } from "quasar";
 
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataSortAgency } from "@/modules/02_organizationalNew/interface/index/organizational";
+
+/**
+ * importComponents
+ */
 import DialogHeader from "@/components/DialogHeader.vue";
 
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+/**
+ * use
+ */
 const $q = useQuasar();
 const store = useOrganizational();
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
+/**
+ * props
+ */
 const type = defineModel<number>("type", { required: true });
-
+const modal = defineModel<boolean>("sortAgency", { required: true });
+const modalSort = defineModel<Array<any>>("data", { required: true });
 const props = defineProps({
   fetchDataTree: {
     type: Function,
@@ -25,9 +43,8 @@ const props = defineProps({
   },
 });
 
-const modal = defineModel<boolean>("sortAgency", { required: true });
+/** ข้อมูล Table*/
-const modalSort = defineModel<Array<any>>("data", { required: true });
+const rows = ref<DataSortAgency[]>([]);
-const rows = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -39,29 +56,33 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onDrop(from: any, to: any) {
+/**
-  onDropRow(from, to);
+ * fiunction จัดลำดับ
-}
+ * @param from ตำแหน่งปัจุบัน
-
+ * @param to ตำแหน่งที่จะย้ายไป
-function onDropRow(from: any, to: any) {
+ */
+function onDrop(from: number, to: number) {
   rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
 }
 
+/**
+ * function บันทึกการจัดลำดับ
+ */
 function save() {
   dialogConfirm($q, () => {
     showLoader();
     const data = rows.value;
-    const dataId = data.map((item: any) => item.orgTreeId);
+    const dataId = data.map((item: DataSortAgency) => item.orgTreeId);
     http
       .post(config.API.organizationShortName, {
         id: data[0].orgLevel === 0 ? data[0].orgRevisionId : data[0].orgRootId,
         type: data[0].orgLevel,
         sortId: dataId,
       })
-      .then((res) => {
+      .then(async () => {
+        await props.fetchDataTree(store.draftId);
+        await success($q, "บันทึกข้อมูลสำเร็จ");
         modal.value = false;
-        props.fetchDataTree(store.draftId);
-        success($q, "บันทึกข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
@@ -71,6 +92,10 @@ function save() {
       });
   });
 }
+
+/**
+ * callback function ทำงานเมื่อ modal = true ทำการเรียกข้อมูลตำแหน่ง
+ */
 watch(
   () => modal.value,
   () => {
@@ -124,7 +149,7 @@ watch(
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <q-btn type="submit" :label="`บันทึก`" color="public" @click="save" >
+          <q-btn type="submit" :label="`บันทึก`" color="public" @click="save">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>

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

@@ -3,20 +3,42 @@ 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";
 
+/**
+ * importType
+ */
+import type { QTableProps } from "quasar";
+import type { DataSortPos } from "@/modules/02_organizationalNew/interface/index/organizational";
+
+/**
+ * importComponents
+ */
 import DialogHeader from "@/components/DialogHeader.vue";
 
+/**
+ * importStore
+ */
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+/**
+ * use
+ */
 const $q = useQuasar();
 const store = useOrganizational();
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
+/**
+ * props
+ */
 const modal = defineModel<boolean>("sortPosition", { required: true });
-const rows = ref<any[]>([]);
+const props = defineProps({
+  fetchDataTable: Function,
+});
+
+/** ข้อมูล Table*/
+const rows = ref<DataSortPos[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -28,22 +50,22 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const props = defineProps({
+/**
-  fetchDataTable: Function,
+ * fiunction จัดลำดับ
-});
+ * @param from ตำแหน่งปัจุบัน
-
+ * @param to ตำแหน่งที่จะย้ายไป
-function onDrop(from: any, to: any) {
+ */
-  onDropRow(from, to);
+function onDrop(from: number, to: number) {
-}
-
-function onDropRow(from: any, to: any) {
   rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
 }
 
+/**
+ * function บันทึกการจัดลำดับ
+ */
 function save() {
   dialogConfirm($q, () => {
     const data = rows.value;
-    const dataId = data.map((item: any) => item.id);
+    const dataId = data.map((item: DataSortPos) => item.id);
     showLoader();
     http
       .post(config.API.orgPosSort, {
@@ -51,10 +73,10 @@ function save() {
         type: store.level,
         sortId: dataId,
       })
-      .then((res) => {
+      .then(async () => {
+        await props.fetchDataTable?.(store.treeId, store.level, false);
+        await success($q, "บันทึกข้อมูลสำเร็จ");
         modal.value = false;
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        props.fetchDataTable?.(store.treeId, store.level, false);
       })
       .catch((e) => {
         messageError($q, e);
@@ -65,6 +87,9 @@ function save() {
   });
 }
 
+/**
+ * function เรียกรายการข้อมูลตำแหน่ง
+ */
 function getData() {
   showLoader();
   http
@@ -79,8 +104,6 @@ function getData() {
     })
     .then((res) => {
       const dataList = res.data.result.data;
-      console.log(dataList);
-
       const dataMap = dataList.map((item: any) => ({
         id: item.id,
         name: `${item.orgShortname}${
@@ -92,6 +115,7 @@ function getData() {
         posMasterNo: item.posMasterNo,
         posMasterNoSuffix: item.posMasterNoSuffix,
       }));
+
       rows.value = dataMap;
     })
     .catch((e) => {
@@ -102,6 +126,9 @@ function getData() {
     });
 }
 
+/**
+ * callback function ทำงานเมื่อ modal = true ทำการเรียกข้อมูลตำแหน่ง
+ */
 watch(
   () => modal.value,
   () => {

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

@@ -97,6 +97,24 @@ interface FormPositionFilter {
   status: string;
 }
 
+interface DataSortPos {
+  id: string;
+  name: string;
+  posMasterNo: number;
+  posMasterNoPrefix: string;
+  posMasterNoSuffix: string;
+}
+
+interface DataSortAgency {
+  name: string;
+  orgLevel: number;
+  orgRevisionId: string;
+  orgRootId: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeShortName: string;
+}
+
 export type {
   DataPosition,
   Position,
@@ -104,4 +122,6 @@ export type {
   DataTree,
   SeaechResult,
   FormPositionFilter,
+  DataSortPos,
+  DataSortAgency,
 };

src/stores/menuList.ts

@@ -1,13 +1,13 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 
-import type {
+/**
-  ListMenu,
+ * importType 
-  ChildLevelTree,
+*/
-  ChildConfig,
+import type { ListMenu, ChildLevelTree } from "@/interface/response/main";
-} from "@/interface/response/main";
 
 export const useMenuDataStore = defineStore("menuUse", () => {
+  /** รายการเมนู*/
   const menuList = ref<ListMenu[]>([
     {
       id: "dashboard",
@@ -21,6 +21,7 @@ export const useMenuDataStore = defineStore("menuUse", () => {
     },
   ]);
 
+  /** ข้อมูล Level3*/
   const childLevelTree = ref<ChildLevelTree>({
     SYS_EVA_INDICATOR: [
       {
@@ -90,6 +91,10 @@ export const useMenuDataStore = defineStore("menuUse", () => {
     ],
   });
 
+  /**
+   * function เรียกรายการเมนูทั้งหมด
+   * @param data ข้อมูลรายการทั้งหมด
+   */
   function fetchListMenu(data: ListMenu[]) {
     data.forEach((item) => {
       if (item.children && item.children.length !== 0) {