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

# Conflicts:
#	src/modules/01_metadata/components/person/Blood.vue
#	src/modules/01_metadata/store.ts

src/api/manage/api.organization.ts

@@ -2,129 +2,130 @@
  * api ระบบจัดการข้อมูลหลัก
  *  เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน
  */
-import env from "../index"
+import env from "../index";
-const organization = `${env.API_URI}/metadata/organization/`
+const organization = `${env.API_URI}/metadata/organization/`;
-const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`
+const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`;
-const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`
+const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`;
-const organizationCode = `${env.API_URI_ORG_SERVICE}/PositionMaster/`
+const organizationCode = `${env.API_URI_ORG_SERVICE}/PositionMaster/`;
-const organizationType = `${env.API_URI}/metadata/organization-type/`
+const organizationType = `${env.API_URI}/metadata/organization-type/`;
-const organizationLevel = `${env.API_URI}/metadata/organization-level/`
+const organizationLevel = `${env.API_URI}/metadata/organization-level/`;
-const organizationStatus = `${env.API_URI}/metadata/organization-status/`
+const organizationStatus = `${env.API_URI}/metadata/organization-status/`;
-const organizationAgency = `${env.API_URI}/metadata/organization-agency/`
+const organizationAgency = `${env.API_URI}/metadata/organization-agency/`;
-const organizationGovernmentAgency = `${env.API_URI}/metadata/organization-government-agency/`
+const organizationGovernmentAgency = `${env.API_URI}/metadata/organization-government-agency/`;
-const organizationTelExternal = `${env.API_URI}/metadata/organization-tel-external/`
+const organizationTelExternal = `${env.API_URI}/metadata/organization-tel-external/`;
-const organizationTelInternal = `${env.API_URI}/metadata/organization-tel-internal/`
+const organizationTelInternal = `${env.API_URI}/metadata/organization-tel-internal/`;
-const organizationFax = `${env.API_URI}/metadata/organization-fax/`
+const organizationFax = `${env.API_URI}/metadata/organization-fax/`;
-const dashbord = `${env.API_URI}/metadata/dashbord/`
+const dashbord = `${env.API_URI}/metadata/dashbord/`;
 
 export default {
-    /**
+  /**
-     * api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
+   * api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
-     */
+   */
-    organization,
+  organization,
-    countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
+  countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
-    countDashbordHistory: `${dashbord}`,
+  countDashbordHistory: `${dashbord}`,
 
-    /**
+  /**
-     * api หน่วยงาน
+   * api หน่วยงาน
-     */
+   */
-    listOrganizationOrganizationHistory: `${organizationOrganization}history`,
+  organizationOrganization,
-    listOrganizationOrganizationHistoryId: (id: string) =>
+  listOrganizationOrganizationHistory: `${organizationOrganization}history`,
-        `${organizationOrganization}history/${id}`,
+  listOrganizationOrganizationHistoryId: (id: string) =>
-    listOrganizationOrganizationPublished: `${organizationOrganization}history/published`,
+    `${organizationOrganization}history/${id}`,
-    listOrganizationOrganizationPublishedHistory: `${organizationOrganization}history/published-history`,
+  listOrganizationOrganizationPublished: `${organizationOrganization}history/published`,
+  listOrganizationOrganizationPublishedHistory: `${organizationOrganization}history/published-history`,
 
-    /**
+  /**
-     * api ชื่อย่อหน่วยงาน
+   * api ชื่อย่อหน่วยงาน
-     */
+   */
-    organizationShortName,
+  organizationShortName,
-    listOrganizationShortNameHistory: `${organizationShortName}history`,
+  listOrganizationShortNameHistory: `${organizationShortName}history`,
-    listOrganizationShortNameHistoryId: (id: string) =>
+  listOrganizationShortNameHistoryId: (id: string) =>
-        `${organizationShortName}history/${id}`,
+    `${organizationShortName}history/${id}`,
-    listOrganizationShortNamePublished: `${organizationShortName}history/published`,
+  listOrganizationShortNamePublished: `${organizationShortName}history/published`,
-    listOrganizationShortNamePublishedHistory: `${organizationShortName}history/published-history`,
+  listOrganizationShortNamePublishedHistory: `${organizationShortName}history/published-history`,
-    organizationCode: `${organizationCode}organization-code`,
+  organizationCode: `${organizationCode}organization-code`,
-    organizationGovernmentCode: (id: string) =>
+  organizationGovernmentCode: (id: string) =>
-        `${organizationCode}government/${id}`,
+    `${organizationCode}government/${id}`,
-    organizationAgencyCode: (id: string) => `${organizationCode}agency/${id}`,
+  organizationAgencyCode: (id: string) => `${organizationCode}agency/${id}`,
 
-    /**
+  /**
-     * api ประเภท
+   * api ประเภท
-     */
+   */
-    organizationType,
+  organizationType,
-    listOrganizationTypeHistory: `${organizationType}history`,
+  listOrganizationTypeHistory: `${organizationType}history`,
-    listOrganizationTypeHistoryId: (id: string) =>
+  listOrganizationTypeHistoryId: (id: string) =>
-        `${organizationType}history/${id}`,
+    `${organizationType}history/${id}`,
-    listOrganizationTypePublished: `${organizationType}history/published`,
+  listOrganizationTypePublished: `${organizationType}history/published`,
-    listOrganizationTypePublishedHistory: `${organizationType}history/published-history`,
+  listOrganizationTypePublishedHistory: `${organizationType}history/published-history`,
 
-    /**
+  /**
-     * api ระดับ
+   * api ระดับ
-     */
+   */
-    organizationLevel,
+  organizationLevel,
-    listOrganizationLevelHistory: `${organizationLevel}history`,
+  listOrganizationLevelHistory: `${organizationLevel}history`,
-    listOrganizationLevelHistoryId: (id: string) =>
+  listOrganizationLevelHistoryId: (id: string) =>
-        `${organizationLevel}history/${id}`,
+    `${organizationLevel}history/${id}`,
-    listOrganizationLevelPublished: `${organizationLevel}history/published`,
+  listOrganizationLevelPublished: `${organizationLevel}history/published`,
-    listOrganizationLevelPublishedHistory: `${organizationLevel}history/published-history`,
+  listOrganizationLevelPublishedHistory: `${organizationLevel}history/published-history`,
 
-    /**
+  /**
-     * api สถานะ
+   * api สถานะ
-     */
+   */
-    organizationStatus,
+  organizationStatus,
-    listOrganizationStatusHistory: `${organizationStatus}history`,
+  listOrganizationStatusHistory: `${organizationStatus}history`,
-    listOrganizationStatusHistoryId: (id: string) =>
+  listOrganizationStatusHistoryId: (id: string) =>
-        `${organizationStatus}history/${id}`,
+    `${organizationStatus}history/${id}`,
-    listOrganizationStatusPublished: `${organizationStatus}history/published`,
+  listOrganizationStatusPublished: `${organizationStatus}history/published`,
-    listOrganizationStatusPublishedHistory: `${organizationStatus}history/published-history`,
+  listOrganizationStatusPublishedHistory: `${organizationStatus}history/published-history`,
 
-    /**
+  /**
-     * api หน่วยงานต้นสังกัด
+   * api หน่วยงานต้นสังกัด
-     */
+   */
-    organizationAgency,
+  organizationAgency,
-    listOrganizationAgencyHistory: `${organizationAgency}history`,
+  listOrganizationAgencyHistory: `${organizationAgency}history`,
-    listOrganizationAgencyHistoryId: (id: string) =>
+  listOrganizationAgencyHistoryId: (id: string) =>
-        `${organizationAgency}history/${id}`,
+    `${organizationAgency}history/${id}`,
-    listOrganizationAgencyPublished: `${organizationAgency}history/published`,
+  listOrganizationAgencyPublished: `${organizationAgency}history/published`,
-    listOrganizationAgencyPublishedHistory: `${organizationAgency}history/published-history`,
+  listOrganizationAgencyPublishedHistory: `${organizationAgency}history/published-history`,
 
-    /**
+  /**
-     * api ส่วนราชการต้นสังกัด
+   * api ส่วนราชการต้นสังกัด
-     */
+   */
-    organizationGovernmentAgency,
+  organizationGovernmentAgency,
-    listOrganizationGovernmentAgencyHistory: `${organizationGovernmentAgency}history`,
+  listOrganizationGovernmentAgencyHistory: `${organizationGovernmentAgency}history`,
-    listOrganizationGovernmentAgencyHistoryId: (id: string) =>
+  listOrganizationGovernmentAgencyHistoryId: (id: string) =>
-        `${organizationGovernmentAgency}history/${id}`,
+    `${organizationGovernmentAgency}history/${id}`,
-    listOrganizationGovernmentAgencyPublished: `${organizationGovernmentAgency}history/published`,
+  listOrganizationGovernmentAgencyPublished: `${organizationGovernmentAgency}history/published`,
-    listOrganizationGovernmentAgencyPublishedHistory: `${organizationGovernmentAgency}history/published-history`,
+  listOrganizationGovernmentAgencyPublishedHistory: `${organizationGovernmentAgency}history/published-history`,
 
-    /**
+  /**
-     * api เบอร์ติดต่อภายนอก
+   * api เบอร์ติดต่อภายนอก
-     */
+   */
-    organizationTelExternal,
+  organizationTelExternal,
-    listOrganizationTelExternalHistory: `${organizationTelExternal}history`,
+  listOrganizationTelExternalHistory: `${organizationTelExternal}history`,
-    listOrganizationTelExternalHistoryId: (id: string) =>
+  listOrganizationTelExternalHistoryId: (id: string) =>
-        `${organizationTelExternal}history/${id}`,
+    `${organizationTelExternal}history/${id}`,
-    listOrganizationTelExternalPublished: `${organizationTelExternal}history/published`,
+  listOrganizationTelExternalPublished: `${organizationTelExternal}history/published`,
-    listOrganizationTelExternalPublishedHistory: `${organizationTelExternal}history/published-history`,
+  listOrganizationTelExternalPublishedHistory: `${organizationTelExternal}history/published-history`,
 
-    /**
+  /**
-     * api เบอร์ติดต่อภายใน
+   * api เบอร์ติดต่อภายใน
-     */
+   */
-    organizationTelInternal,
+  organizationTelInternal,
-    listOrganizationTelInternalHistory: `${organizationTelInternal}history`,
+  listOrganizationTelInternalHistory: `${organizationTelInternal}history`,
-    listOrganizationTelInternalHistoryId: (id: string) =>
+  listOrganizationTelInternalHistoryId: (id: string) =>
-        `${organizationTelInternal}history/${id}`,
+    `${organizationTelInternal}history/${id}`,
-    listOrganizationTelInternalPublished: `${organizationTelInternal}history/published`,
+  listOrganizationTelInternalPublished: `${organizationTelInternal}history/published`,
-    listOrganizationTelInternalPublishedHistory: `${organizationTelInternal}history/published-history`,
+  listOrganizationTelInternalPublishedHistory: `${organizationTelInternal}history/published-history`,
 
-    /**
+  /**
-     * api เบอร์โทรสาร
+   * api เบอร์โทรสาร
-     */
+   */
-    organizationFax,
+  organizationFax,
-    listOrganizationFaxHistory: `${organizationFax}history`,
+  listOrganizationFaxHistory: `${organizationFax}history`,
-    listOrganizationFaxHistoryId: (id: string) =>
+  listOrganizationFaxHistoryId: (id: string) =>
-        `${organizationFax}history/${id}`,
+    `${organizationFax}history/${id}`,
-    listOrganizationFaxPublished: `${organizationFax}history/published`,
+  listOrganizationFaxPublished: `${organizationFax}history/published`,
-    listOrganizationFaxPublishedHistory: `${organizationFax}history/published-history`,
+  listOrganizationFaxPublishedHistory: `${organizationFax}history/published-history`,
-}
+};

src/api/manage/api.person.ts

@@ -29,6 +29,7 @@ export default {
   /**
    * api เขต
    */
+  district,
   listDistrict: (id: string) => `${district}${id}`,
   listDistrictHistory: `${district}history`,
   listDistrictHistoryId: (id: string | string[]) => `${district}history/${id}`,

src/components/TableHistory.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog :model-value="modal" persistent>
-    <q-card style="min-width: 70vw;">
+    <q-card style="min-width: 70vw">
       <q-form ref="myForm">
         <div class="row items-center q-pa-sm">
           <div class="row">
@@ -89,8 +89,7 @@
             :virtual-scroll-sticky-size-start="48"
             dense
             :pagination-label="paginationLabel"
-            :pagination="initialPagination"
+            v-model:pagination="pagination"
-            :rows-per-page-options="[0]"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -104,6 +103,17 @@
             <template #body="props">
               <slot v-bind="props" name="columns"></slot>
             </template>
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="pagination.page"
+                color="grey-8"
+                :max="scope.pagesNumber"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
           </q-table>
         </div>
         <q-separator />
@@ -112,9 +122,10 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, computed } from "vue";
 import type { Pagination } from "@/modules/01_metadata/interface/index/Main";
 
+const rows = ref<any>([]);
 const attrs = ref<any>(useAttrs());
 const filterRef = ref<any>(null);
 // const history = ref<string>("");
@@ -123,6 +134,17 @@ const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const pagesNumber = computed(() => {
+  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
+});
+
 const props = defineProps({
   tittle: String,
   inputfilter: String,

src/interface/request/main/main.ts

@@ -277,5 +277,38 @@ const tabList = readonly<tabType[]>([
   },
 ]);
 
-export { menuList, tabList };
+const tabList_placement = readonly<tabType[]>([
+  {
+    key: 1,
+    label: "ข้อมูลทั่วไป",
+    tag: "information",
+  },
+  {
+    key: 2,
+    label: "ประวัติการศึกษา",
+    tag: "education",
+  },
+  {
+    key: 3,
+    label: "ใบอนุญาตประกอบอาชีพ",
+    tag: "certicate",
+  },
+  {
+    key: 4,
+    label: "เครื่องราชอิสริยาภรณ์",
+    tag: "insignia",
+  },
+  {
+    key: 5,
+    label: "ผลการสอบ",
+    tag: "examresult",
+  },
+  {
+    key: 6,
+    label: "การคัดกรองคุณสมบัติ",
+    tag: "qualification",
+  },
+]);
+
+export { menuList, tabList ,tabList_placement };
 export type { ScrollType, tabType, menuType, notiType, optionType };

src/modules/01_metadata/components/insignia/Insignia.vue

@@ -579,8 +579,21 @@ const fetchData = async (load: boolean = false) => {
   const result = await getInsignia(false, load);
   version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
   idVersion.value = result.idversion; //เลข id ใน mongodb
-  rows.value = result.data;
+  rows.value.sort(
+    (
+      firstItem: RequestItemsHistoryObject,
+      secondItem: RequestItemsHistoryObject
+    ) => firstItem.level - secondItem.level
+  );
   updateData.value = false;
+  rows.value = result.data;
+  const data = rows.value;
+  let option: DataOption[] = [];
+  data.map((r: RequestItemsHistoryObject) => {
+    option.push({ id: r.id.toString(), name: r.name.toString() });
+  });
+  insigniaTypeOption.value = option;
+  updateData.value = true;
   //   rows.value.splice(0);
   //   showLoader();
   //   await http
@@ -624,26 +637,26 @@ const fetchData = async (load: boolean = false) => {
 /**
  * รายการลำดับเครื่องราชฯ
  */
-const fetchinsigniaType = async () => {
+// const fetchinsigniaType = async () => {
-  showLoader();
+//   showLoader();
-  await http
+//   await http
-    .get(config.API.insigniaType)
+//     .get(config.API.insigniaType)
-    .then((res) => {
+//     .then((res) => {
-      const data = res.data.result;
+//       const data = res.data.result;
-      let option: DataOption[] = [];
+//       let option: DataOption[] = [];
-      data.map((r: RequestItemsHistoryObject) => {
+//       data.map((r: RequestItemsHistoryObject) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
+//         option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
+//       });
-      insigniaTypeOption.value = option;
+//       insigniaTypeOption.value = option;
-    })
+//     })
-    .catch((e) => {
+//     .catch((e) => {
-      messageError($q, e);
+//       messageError($q, e);
-    })
+//     })
-    .finally(() => {
+//     .finally(() => {
-      updateData.value = false;
+//       updateData.value = false;
-      hideLoader();
+//       hideLoader();
-    });
+//     });
-};
+// };
 
 /**
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
@@ -701,7 +714,7 @@ const clearPublishedData = async () => {
     })
     .finally(async () => {
       await fetchHistory();
-      await fetchData();
+      await fetchData(true);
     });
 };
 
@@ -720,7 +733,7 @@ const publishedData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      await fetchData();
+      await fetchData(true);
     });
 };
 

src/modules/01_metadata/components/organization/Fax.vue

@@ -204,7 +204,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getOrganizationFax,
+  dataOrganizationFax,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -363,37 +368,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganizationFax(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationFaxHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationFaxHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/organization/Level.vue

@@ -204,7 +204,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getOrganizationLevel,
+  dataOrganizationLevel,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -363,37 +368,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganizationLevel(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationLevelHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationLevelHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/organization/Organization.vue

@@ -216,7 +216,8 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getOrganization, dataOrganization } =
+  store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -399,38 +400,43 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganization(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationOrganizationHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationOrganizationHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-          note: e.note,
+  //           lastUpdateFullName: e.lastUpdateFullName,
-        });
+  //           isActive: e.isActive,
-      });
+  //           createdFullName: e.createdFullName,
-    })
+  //           createdUserId: e.createdUserId,
-    .catch((e) => {
+  //           lastUpdateUserId: e.lastUpdateUserId,
-      messageError($q, e);
+  //           note: e.note,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/organization/ShortName.vue

@@ -257,7 +257,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getOrganizationShortName,
+  dataOrganizationShortName,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -488,40 +493,45 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganizationShortName(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationShortNameHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationShortNameHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          agencyCode: e.agencyCode,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          governmentCode: e.governmentCode,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          name: e.name,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          createdAt: e.createdAt,
+  //         rows.value.push({
-          lastUpdatedAt: e.lastUpdatedAt,
+  //           id: e.id,
-          lastUpdateFullName: e.lastUpdateFullName,
+  //           agencyCode: e.agencyCode,
-          isActive: e.isActive,
+  //           governmentCode: e.governmentCode,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-          note: e.note,
+  //           lastUpdateFullName: e.lastUpdateFullName,
-        });
+  //           isActive: e.isActive,
-      });
+  //           createdFullName: e.createdFullName,
-    })
+  //           createdUserId: e.createdUserId,
-    .catch((e) => {
+  //           lastUpdateUserId: e.lastUpdateUserId,
-      messageError($q, e);
+  //           note: e.note,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/organization/Status.vue

@@ -204,7 +204,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getOrganizationStatus,
+  dataOrganizationStatus,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -363,37 +368,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganizationStatus(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationStatusHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationStatusHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/organization/TelExternal.vue

@@ -204,7 +204,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getOrganizationTelExternal,
+  dataOrganizationTelExternal,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -363,37 +368,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganizationTelExternal(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationTelExternalHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationTelExternalHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/organization/TelInternal.vue

@@ -204,7 +204,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getOrganizationTelInternal,
+  dataOrganizationTelInternal,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -363,37 +368,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganizationTelInternal(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationTelInternalHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationTelInternalHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/organization/Type.vue

@@ -204,7 +204,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getOrganizationType,
+  dataOrganizationType,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -363,37 +368,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getOrganizationType(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listOrganizationTypeHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listOrganizationTypeHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/person/Blood.vue

@@ -208,8 +208,8 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns, getBlood } = store;
+const { manageData, changeManageColumns, getBlood, dataBlood } = store;
-const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
+const rows = ref<RequestItemsHistoryObject[]>(dataBlood.data); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
 const tittleHistory = ref<string>("ประวัติแก้ไขกลุ่มเลือด"); //

src/modules/01_metadata/components/person/Education.vue

@@ -205,7 +205,7 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getEducation, dataEducation } = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +364,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getEducation(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listEducationLevelHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listEducationLevelHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/person/Gender.vue

@@ -205,7 +205,7 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getGender, dataGender } = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +364,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getGender(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listGenderHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listGenderHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/person/Province.vue

@@ -217,7 +217,7 @@ const { loaderPage } = dataStore; //ขึ้นหน้า load ขณะเ
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getProvince, dataProvince } = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -376,37 +376,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getProvince(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listProvinceHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listProvinceHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/person/Relationship.vue

@@ -205,7 +205,8 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getRelationship, dataRelationship } =
+  store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +365,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getRelationship(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listRelationshipHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listRelationshipHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/person/Religion.vue

@@ -205,7 +205,7 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getReligion, dataReligion } = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +364,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getReligion(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listReligionHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listReligionHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/position/Executive.vue

@@ -205,7 +205,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getPositionExecutive,
+  dataPositionExecutive,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +369,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getPositionExecutive(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listPositionExecutiveHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listPositionExecutiveHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/position/ExecutiveSide.vue

@@ -217,7 +217,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getPositionExecutiveSide,
+  dataPositionExecutiveSide,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -400,38 +405,43 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getPositionExecutiveSide(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listPositionExecutiveSideHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listPositionExecutiveSideHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-          note: e.note,
+  //           lastUpdateFullName: e.lastUpdateFullName,
-        });
+  //           isActive: e.isActive,
-      });
+  //           createdFullName: e.createdFullName,
-    })
+  //           createdUserId: e.createdUserId,
-    .catch((e) => {
+  //           lastUpdateUserId: e.lastUpdateUserId,
-      messageError($q, e);
+  //           note: e.note,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/position/Level.vue

@@ -268,7 +268,8 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getPositionLevel, dataPositionLevel } =
+  store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -475,45 +476,50 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getPositionLevel(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listPositionLevelHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listPositionLevelHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          level: e.level,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          name: e.name,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          shortName: e.shortName,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          createdAt: e.createdAt,
+  //         rows.value.push({
-          lastUpdatedAt: e.lastUpdatedAt,
+  //           id: e.id,
-          lastUpdateFullName: e.lastUpdateFullName,
+  //           level: e.level,
-          isActive: e.isActive,
+  //           name: e.name,
-          createdFullName: e.createdFullName,
+  //           shortName: e.shortName,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-      rows.value.sort(
+  //           createdFullName: e.createdFullName,
-        (
+  //           createdUserId: e.createdUserId,
-          firstItem: RequestItemsHistoryObject,
+  //           lastUpdateUserId: e.lastUpdateUserId,
-          secondItem: RequestItemsHistoryObject
+  //         });
-        ) => firstItem.level - secondItem.level
+  //       });
-      );
+  //       rows.value.sort(
-    })
+  //         (
-    .catch((e) => {
+  //           firstItem: RequestItemsHistoryObject,
-      messageError($q, e);
+  //           secondItem: RequestItemsHistoryObject
-    })
+  //         ) => firstItem.level - secondItem.level
-    .finally(() => {
+  //       );
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/position/Line.vue

@@ -205,7 +205,8 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getPositionLine, dataPositionLine } =
+  store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +365,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getPositionLine(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listPositionLineHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listPositionLineHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/position/PathSide.vue

@@ -217,7 +217,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getPositionPathSide,
+  dataPositionPathSide,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -400,38 +405,43 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getPositionPathSide(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listPositionSideHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listPositionSideHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-          note: e.note,
+  //           lastUpdateFullName: e.lastUpdateFullName,
-        });
+  //           isActive: e.isActive,
-      });
+  //           createdFullName: e.createdFullName,
-    })
+  //           createdUserId: e.createdUserId,
-    .catch((e) => {
+  //           lastUpdateUserId: e.lastUpdateUserId,
-      messageError($q, e);
+  //           note: e.note,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/position/Status.vue

@@ -205,7 +205,12 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const {
+  manageData,
+  changeManageColumns,
+  getPositionStatus,
+  dataPositionStatus,
+} = store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +369,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getPositionStatus(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listPositionStatusHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listPositionStatusHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/01_metadata/components/position/Type.vue

@@ -205,7 +205,8 @@ const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
 const { success, dateText, messageError, showLoader, hideLoader } = mixin;
 const store = useManageDataStore();
-const { manageData, changeManageColumns } = store;
+const { manageData, changeManageColumns, getPositionType, dataPositionType } =
+  store;
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
@@ -364,37 +365,42 @@ const $q = useQuasar();
 /**
  * ฟังก์ชัน get data ล่าสุด
  */
-const fetchData = async () => {
+const fetchData = async (load: boolean = false) => {
   await props.fetchDataComponent();
-  rows.value.splice(0);
+  const result = await getPositionType(false, load);
-  showLoader();
+  version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-  await http
+  idVersion.value = result.idversion; //เลข id ใน mongodb
-    .get(config.API.listPositionTypeHistory)
+  rows.value = result.data;
-    .then((res) => {
+  updateData.value = false;
-      let data = res.data.result;
+  //   rows.value.splice(0);
-      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  //   showLoader();
-      idVersion.value = data.id; //เลข id ใน mongodb
+  //   await http
-      data.items.map((e: RequestItemsHistoryObject) => {
+  //     .get(config.API.listPositionTypeHistory)
-        rows.value.push({
+  //     .then((res) => {
-          id: e.id,
+  //       let data = res.data.result;
-          name: e.name,
+  //       version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
-          createdAt: e.createdAt,
+  //       idVersion.value = data.id; //เลข id ใน mongodb
-          lastUpdatedAt: e.lastUpdatedAt,
+  //       data.items.map((e: RequestItemsHistoryObject) => {
-          lastUpdateFullName: e.lastUpdateFullName,
+  //         rows.value.push({
-          isActive: e.isActive,
+  //           id: e.id,
-          createdFullName: e.createdFullName,
+  //           name: e.name,
-          createdUserId: e.createdUserId,
+  //           createdAt: e.createdAt,
-          lastUpdateUserId: e.lastUpdateUserId,
+  //           lastUpdatedAt: e.lastUpdatedAt,
-        });
+  //           lastUpdateFullName: e.lastUpdateFullName,
-      });
+  //           isActive: e.isActive,
-    })
+  //           createdFullName: e.createdFullName,
-    .catch((e) => {
+  //           createdUserId: e.createdUserId,
-      messageError($q, e);
+  //           lastUpdateUserId: e.lastUpdateUserId,
-    })
+  //         });
-    .finally(() => {
+  //       });
-      updateData.value = false;
+  //     })
-      hideLoader();
+  //     .catch((e) => {
-    });
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       updateData.value = false;
+  //       hideLoader();
+  //     });
 };
 
 /**

src/modules/02_organizational/components/AddMappingPositions.vue

@@ -97,7 +97,7 @@
   </q-form>
   <!-- popup Edit window-->
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
+    <q-card style="min-width: 700px">
       <q-form ref="myForm">
         <DialogHeader
           :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}โครงสร้างและกรอบอัตรากำลัง`"
@@ -187,6 +187,7 @@
               <selector
                 :class="getClass(edit)"
                 hide-bottom-space
+                multiple
                 :outlined="edit"
                 dense
                 lazy-rules
@@ -195,17 +196,14 @@
                 v-model="positionPathSideId"
                 :label="`${'ด้าน/สาขา'}`"
                 @update:modelValue="clickEditRow"
-                emit-value
-                map-options
                 option-label="name"
                 :options="positionPathSideOptions"
                 option-value="id"
                 use-input
-                hide-selected
+                use-chips
-                fill-input
                 input-debounce="0"
                 @filter="positionPathSideFilterFn"
-                clearable
+                color="primary"
               />
               <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
             </div>
@@ -231,7 +229,7 @@
                 fill-input
                 input-debounce="0"
                 @filter="positionExecutiveFilterFn"
-                clearable
+                color="primary"
               />
               <!-- :rules="[
                   (val) => !!val || `${'กรุณาเลือกตำแหน่งทางการบริหาร'}`,
@@ -241,6 +239,7 @@
               <selector
                 :class="getClass(edit)"
                 hide-bottom-space
+                multiple
                 :outlined="edit"
                 dense
                 lazy-rules
@@ -249,17 +248,14 @@
                 v-model="positionExecutiveSideId"
                 :label="`${'ด้านทางการบริหาร'}`"
                 @update:modelValue="clickEditRow"
-                emit-value
-                map-options
                 option-label="name"
                 :options="positionExecutiveSideOptions"
                 option-value="id"
                 use-input
-                hide-selected
+                use-chips
-                fill-input
                 input-debounce="0"
                 @filter="positionExecutiveSideFilterFn"
-                clearable
+                color="primary"
               />
               <!-- :rules="[(val) => !!val || `${'กรุณาเลือกด้านทางการบริหาร'}`]" -->
             </div>
@@ -314,6 +310,21 @@
                 :rules="[(val:any) => !!val || `${'กรุณาเลือกสถานภาพของตำแหน่ง'}`]"
               />
             </div>
+            <div class="col-xs-12 col-sm-12 col-md-12">
+              <q-input
+                :class="getClass(edit)"
+                hide-bottom-space
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="qualification"
+                :label="`${'คุณวุฒิ'}`"
+                @update:modelValue="clickEditRow"
+                type="textarea"
+              />
+            </div>
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-input
                 :class="getClass(edit)"
@@ -328,7 +339,6 @@
                 @update:modelValue="clickEditRow"
                 type="textarea"
               />
-              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
             </div>
             <div class="col-xs-12 col-sm-12 col-md-12">
               <q-input
@@ -344,7 +354,6 @@
                 @update:modelValue="clickEditRow"
                 type="textarea"
               />
-              <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6 text-grey-9">
               <q-checkbox v-model="isDirector" label="หัวหน้า" />
@@ -431,14 +440,7 @@ const { loaderPage } = dataStore;
 
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-const {
+const { success, modalConfirm, modalError, modalDelete } = mixin;
-  success,
-  modalConfirm,
-  modalError,
-  modalDelete,
-  showLoader,
-  hideLoader,
-} = mixin;
 const { date2Thai } = mixin;
 const store = useOrganizationalDataStore();
 const { organizationalData, changeOrganizationalColumns } = store;
@@ -456,12 +458,13 @@ const positionTypeId = ref<string>();
 const positionMasterId = ref<string>("");
 const positionLineId = ref<string>();
 const positionPathId = ref<string>("");
-const positionPathSideId = ref<string>();
+const positionPathSideId = ref<any>();
 const positionExecutiveId = ref<string>();
-const positionExecutiveSideId = ref<string>();
+const positionExecutiveSideId = ref<any>();
 const positionStatusId = ref<string>();
 const positionLevelId = ref<string[]>([]);
 const positionCondition = ref<string>();
+const qualification = ref<string>();
 const positionMasterUserNote = ref<string>();
 const positionTypeOptions = ref<DataOption[]>([]);
 const positionLineOptions = ref<DataOption[]>([]);
@@ -519,6 +522,7 @@ organizationalData.mappingPosition.columns.length == 0
       "positionExecutiveSide",
       "positionLevel",
       "positionStatus",
+      "qualification",
       "positionCondition",
       "isDirector",
       "isActive",
@@ -625,6 +629,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "qualification",
+    align: "left",
+    label: "คุณวุฒิ",
+    sortable: true,
+    field: "qualification",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "positionCondition",
     align: "left",
@@ -749,6 +764,17 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "qualification",
+    align: "left",
+    label: "คุณวุฒิ",
+    sortable: true,
+    field: "qualification",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "positionCondition",
     align: "left",
@@ -804,6 +830,7 @@ const visibleColumnsHistory = ref<String[]>([
   "positionExecutiveSide",
   "positionLevel",
   "positionStatus",
+  "qualification",
   "positionCondition",
   "isDirector",
   "isActive",
@@ -816,7 +843,7 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchPosition();
   await fetchData();
   await fetchHistory();
@@ -826,7 +853,7 @@ onMounted(async () => {
  * ฟังก์ชัน get data ล่าสุด
  */
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPostionMasterDraft(true))
     .then((res) => {
@@ -854,6 +881,7 @@ const fetchData = async () => {
           positionExecutiveSideId: e.positionExecutiveSideId,
           positionLevelId: e.positionLevelId,
           positionStatusId: e.positionStatusId,
+          qualification: e.qualification,
           positionCondition: e.positionCondition,
           positionMasterUserNote: e.positionMasterUserNote,
           isDirector: e.isDirector,
@@ -869,7 +897,7 @@ const fetchData = async () => {
     })
     .finally(() => {
       //   updateData.value = false;
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -877,7 +905,7 @@ const fetchData = async () => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
  */
 const fetchHistory = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   //   await http
   //     .get(config.API.listxxxxxxxxPublishedHistory)
   //     .then((res) => {
@@ -909,7 +937,7 @@ const fetchHistory = async () => {
   //       statusCode.value = e.response.data.status;
   //     })
   //     .finally(async () => {
-  //       hideLoader();
+  //       loaderPage(false);
   //     });
 };
 
@@ -917,7 +945,7 @@ const fetchHistory = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1008,7 +1036,7 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1157,7 +1185,7 @@ const clickSave = async () => {
  */
 const saveData = async () => {
   modal.value = false;
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.getPositionMaster, {
       positionTypeId: positionTypeId.value,
@@ -1169,6 +1197,7 @@ const saveData = async () => {
       positionLevelId: positionLevelId.value,
       isDirector: isDirector.value,
       positionStatusId: positionStatusId.value,
+      qualification: qualification.value,
       positionCondition: positionCondition.value,
       positionMasterUserNote: positionMasterUserNote.value,
     })
@@ -1189,7 +1218,7 @@ const saveData = async () => {
  */
 const editData = async () => {
   modal.value = false;
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.getPositionMasterId(positionMasterId.value), {
       positionMasterId: positionMasterId.value,
@@ -1202,6 +1231,7 @@ const editData = async () => {
       positionLevelId: positionLevelId.value,
       isDirector: isDirector.value,
       positionStatusId: positionStatusId.value,
+      qualification: qualification.value,
       positionCondition: positionCondition.value,
       positionMasterUserNote: positionMasterUserNote.value,
     })
@@ -1222,7 +1252,7 @@ const editData = async () => {
  * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
  */
 const clearPublishedData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.getPositionMasterSync)
     .then((res) => {
@@ -1235,7 +1265,7 @@ const clearPublishedData = async () => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await fetchHistory();
       await fetchData();
     });
@@ -1247,7 +1277,7 @@ const clearPublishedData = async () => {
  */
 const publishedData = async () => {
   //   editvisible.value = false;
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.getPositionMasterPublish)
     .then((res) => {
@@ -1257,7 +1287,7 @@ const publishedData = async () => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await fetchData();
     });
 };
@@ -1308,6 +1338,7 @@ const selectData = (props: RequestItemsObject) => {
     positionExecutiveSideId.value = props.positionExecutiveSideId;
     positionLevelId.value = props.positionLevelId;
     positionStatusId.value = props.positionStatusId;
+    qualification.value = props.qualification;
     positionCondition.value = props.positionCondition;
     positionMasterUserNote.value = props.positionMasterUserNote;
     isDirector.value = props.isDirector;
@@ -1335,11 +1366,12 @@ const clickAdd = () => {
   positionTypeId.value = "";
   positionLineId.value = "";
   positionPathId.value = "";
-  positionPathSideId.value = "";
+  positionPathSideId.value = [];
   positionExecutiveId.value = "";
-  positionExecutiveSideId.value = "";
+  positionExecutiveSideId.value = [];
   positionLevelId.value = [];
   positionStatusId.value = positionStatusOptionsRaw.value[0].id;
+  qualification.value = "";
   positionCondition.value = "";
   positionMasterUserNote.value = "";
   isDirector.value = false;
@@ -1351,7 +1383,7 @@ const clickAdd = () => {
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
 const clickHistory = async (row: RequestItemsObject) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPositionMasterHistoryId(row.id))
     .then((res) => {
@@ -1380,6 +1412,7 @@ const clickHistory = async (row: RequestItemsObject) => {
             positionExecutiveSideId: e.positionExecutiveSideId,
             positionLevelId: e.positionLevelId,
             positionStatusId: e.positionStatusId,
+            qualification: e.qualification,
             positionCondition: e.positionCondition,
             positionMasterUserNote: e.positionMasterUserNote,
             isDirector: e.isDirector,
@@ -1394,7 +1427,7 @@ const clickHistory = async (row: RequestItemsObject) => {
     })
     .finally(async () => {
       modalHistory.value = true;
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1437,7 +1470,7 @@ const clickIsActive = async (val: string, status: boolean) => {
   })
     .onOk(async () => {
       // edit.value = false;
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.getPositionMasterId(val) + `?Id=${val}`)
         .then((res) => {

src/modules/02_organizational/components/Tree/MappingPositions.vue

@@ -8,7 +8,7 @@
 <template>
   <div v-if="isAddNew" class="row col-12 items-center q-pt-md">
     <div class="bg-white q-px-sm topCard">
-      <span class="text-weight-medium">เพิ่มตำแหน่ง</span>
+      <span class="text-weight-bold">เพิ่มตำแหน่ง</span>
       <q-btn
         flat
         color="primary"
@@ -47,7 +47,12 @@
           <template v-slot:option="scope">
             <q-item v-bind="scope.itemProps">
               <q-item-section>
-                <q-item-label>{{ scope.opt.positionPath }}</q-item-label>
+                <q-item-label>
+                  <span class="text-weight-bold">
+                    {{ scope.opt.positionPath }}</span
+                  >
+                  {{ scope.opt.positionLevel }}
+                </q-item-label>
                 <q-item-label caption>
                   <q-icon
                     class="q-mr-sm"
@@ -56,19 +61,36 @@
                     name="mdi-bookmark"
                     v-if="scope.opt.isDirector"
                   ></q-icon>
-                  {{ scope.opt.positionExecutive }}
+                  {{
-                  {{ scope.opt.positionExecutiveSide }}
+                    scope.opt.positionExecutive == null
-                  {{ scope.opt.positionLevel }}
+                      ? ""
-                  {{ scope.opt.positionLine }}
+                      : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
-                  {{ scope.opt.positionPathSide }}
+                  }}
-                  {{ scope.opt.positionType }}
+                  {{
+                    scope.opt.positionExecutiveSide == null
+                      ? ""
+                      : `ด้านทางการบริหาร: ${scope.opt.positionExecutiveSide}`
+                  }}
+                  <!-- {{
+                    scope.opt.positionLevel == null
+                      ? ""
+                      : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+                  }} -->
+                  {{
+                    scope.opt.positionPathSide == null
+                      ? ""
+                      : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+                  }}
                 </q-item-label>
               </q-item-section>
             </q-item>
           </template>
           <template v-slot:selected-item="scope">
             <q-chip dense square class="q-my-none q-ml-xs q-mr-none">
-              {{ scope.opt.positionPath }}
+              <span class="text-weight-bold">
+                {{ scope.opt.positionPath }}</span
+              >
+              {{ scope.opt.positionLevel }}
             </q-chip>
             <q-item-label caption>
               <q-icon
@@ -78,12 +100,31 @@
                 name="mdi-bookmark"
                 v-if="scope.opt.isDirector"
               ></q-icon>
-              {{ scope.opt.positionExecutive }}
+              {{
-              {{ scope.opt.positionExecutiveSide }}
+                scope.opt.positionExecutive == null
-              {{ scope.opt.positionLevel }}
+                  ? ""
-              {{ scope.opt.positionLine }}
+                  : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
-              {{ scope.opt.positionPathSide }}
+              }}
-              {{ scope.opt.positionType }}
+              {{
+                scope.opt.positionExecutiveSide == null
+                  ? ""
+                  : `ด้านทางการบริหาร: ${scope.opt.positionExecutiveSide}`
+              }}
+              <!-- {{
+                scope.opt.positionLevel == null
+                  ? ""
+                  : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+              }} -->
+              {{
+                scope.opt.positionPathSide == null
+                  ? ""
+                  : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+              }}
+              <!-- {{ scope.opt.positionExecutiveSide }} -->
+              <!-- {{ scope.opt.positionLevel }} -->
+              <!-- {{ scope.opt.positionLine }} -->
+              <!-- {{ scope.opt.positionPathSide }} -->
+              <!-- {{ scope.opt.positionType }} -->
             </q-item-label>
           </template>
           <template v-slot:no-option>
@@ -103,7 +144,11 @@
             :label="`${'หมายเหตุ'}`"
             type="textarea"
           />
-          <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-12">
+          <q-toggle v-model="item.isActive" dense size="34px" color="positive">
+            ปกติ
+          </q-toggle>
         </div>
       </div>
     </div>
@@ -157,7 +202,12 @@
             <template v-slot:option="scope">
               <q-item v-bind="scope.itemProps">
                 <q-item-section>
-                  <q-item-label>{{ scope.opt.positionPath }}</q-item-label>
+                  <q-item-label>
+                    <span class="text-weight-bold">
+                      {{ scope.opt.positionPath }}</span
+                    >
+                    {{ scope.opt.positionLevel }}
+                  </q-item-label>
                   <q-item-label caption>
                     <q-icon
                       class="q-mr-sm"
@@ -166,19 +216,36 @@
                       name="mdi-bookmark"
                       v-if="scope.opt.isDirector"
                     ></q-icon>
-                    {{ scope.opt.positionExecutive }}
+                    {{
-                    {{ scope.opt.positionExecutiveSide }}
+                      scope.opt.positionExecutive == null
-                    {{ scope.opt.positionLevel }}
+                        ? ""
-                    {{ scope.opt.positionLine }}
+                        : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
-                    {{ scope.opt.positionPathSide }}
+                    }}
-                    {{ scope.opt.positionType }}
+                    {{
+                      scope.opt.positionExecutiveSide == null
+                        ? ""
+                        : `ด้านทางการบริหาร: ${scope.opt.positionExecutiveSide}`
+                    }}
+                    <!-- {{
+                      scope.opt.positionLevel == null
+                        ? ""
+                        : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+                    }} -->
+                    {{
+                      scope.opt.positionPathSide == null
+                        ? ""
+                        : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+                    }}
                   </q-item-label>
                 </q-item-section>
               </q-item>
             </template>
             <template v-slot:selected-item="scope">
               <q-chip dense square class="q-my-none q-ml-xs q-mr-none">
-                {{ scope.opt.positionPath }}
+                <span class="text-weight-bold">
+                  {{ scope.opt.positionPath }}</span
+                >
+                {{ scope.opt.positionLevel }}
               </q-chip>
               <q-item-label caption>
                 <q-icon
@@ -188,13 +255,29 @@
                   name="mdi-bookmark"
                   v-if="scope.opt.isDirector"
                 ></q-icon>
-                {{ scope.opt.positionPathSide }}
+                <!-- {{ scope.opt.positionPathSide }}
                 {{ scope.opt.positionExecutive }}
-                {{ scope.opt.positionLevel }}
+                {{ scope.opt.positionLevel }} -->
-                {{ scope.opt.positionLine }}
+                <!-- {{ scope.opt.positionLine }} -->
 
                 <!-- {{ scope.opt.positionType }}
                 {{ scope.opt.positionExecutiveSide }} -->
+
+                {{
+                  scope.opt.positionPathSide == null
+                    ? ""
+                    : `ด้าน/สาขา: ${scope.opt.positionPathSide}`
+                }}
+                {{
+                  scope.opt.positionExecutive == null
+                    ? ""
+                    : `ตำแหน่งทางการบริหาร: ${scope.opt.positionExecutive}`
+                }}
+                {{
+                  scope.opt.positionLevel == null
+                    ? ""
+                    : `ระดับตำแหน่ง: ${scope.opt.positionLevel}`
+                }}
               </q-item-label>
             </template>
             <template v-slot:no-option>
@@ -224,7 +307,16 @@
               :label="`${'หมายเหตุ'}`"
               type="textarea"
             />
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
+          </div>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <q-toggle
+              v-model="item.isActive"
+              dense
+              size="34px"
+              color="positive"
+            >
+              ปกติ
+            </q-toggle>
           </div>
         </div>
       </q-card>
@@ -240,14 +332,10 @@ import { useDataStore } from "@/stores/data";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { DataOption } from "../../interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
 
 const ddNoResultMsg = defineAsyncComponent(
   () => import("@/components/DropDownNoResultMsg.vue")
 ); //แสดงข้อความเมื่อ Dropdown Filter ไม่เจอข้อมูล
-
-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
@@ -273,6 +361,7 @@ watch(myForm, (form: QForm | null, prevForm: QForm | null) => {
       //   console.log("props.editObj", props.editObj);
       positions.value[0].positionMasterId = props.editObj?.positionMasterId;
       positions.value[0].positionUserNote = props.editObj?.positionUserNote;
+      positions.value[0].isActive = props.editObj?.isActive;
     }
   }
   emit("update:formprops", form);
@@ -283,6 +372,7 @@ const positionSet = ref<object>({
   count: 1, // จำนวนตำแหน่งที่จะเพิ่ม
   positionMasterId: "", // ชื่อตำแหน่ง จากระบบข้อมูลหลัก Table PositionMaster เช่น นักจัดการงานทั่วไป,พยาบาลชำนาญการ
   positionUserNote: "",
+  isActive: true,
 }); //เก็บข้อมูลที่จะเลือกใน Drop Down แต่ละตัวจะต้องมี key ของมัน เพื่อส่งไปให้ API
 emit("update:positions", positions.value);
 
@@ -290,12 +380,12 @@ const positionFilter = ref<Array<any>>([]); //for DropDown
 const position = ref<Array<any>>([]); //for DropDown
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchPositionMaster();
 });
 
 const fetchPositionMaster = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.getPostionMasterDraft(false))
     .get(config.API.getPostionMaster(false))
@@ -322,6 +412,7 @@ const fetchPositionMaster = async () => {
           positionExecutiveSideId: e.positionExecutiveSideId,
           positionLevelId: e.positionLevelId,
           positionStatusId: e.positionStatusId,
+          qualification: e.qualification,
           positionCondition: e.positionCondition,
           positionMasterUserNote: e.positionMasterUserNote,
           isDirector: e.isDirector,
@@ -333,7 +424,7 @@ const fetchPositionMaster = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/02_organizational/components/Tree/OrganizationDialog.vue

@@ -54,7 +54,7 @@
                 v-model="item.organizationOrganizationId"
                 :options="organizationOri"
                 label="หน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-6 col-md-6"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -75,7 +75,7 @@
                 v-model="item.organizationAgencyCode"
                 :options="organizationAgencyCode"
                 label="รหัสหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -98,7 +98,7 @@
                 v-model="item.organizationGovernmentCode"
                 :options="item.organizationGovernmentCodeOption"
                 label="รหัสส่วนราชการ"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -121,51 +121,36 @@
                 outlined
                 :modelValue="item.organizationShortName.toString() ?? ''"
                 label="ชื่อย่อหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
               />
-
+              <q-input
-              <selector
-                hide-bottom-space
                 dense
                 outlined
-                v-model="item.organizationAgencyId"
+                v-model="item.agency"
-                :options="organizationAgency"
+                class="col-xs-12 col-sm-2 col-md-2"
-                label="หน่วยงานต้นสังกัด"
+                label="เลขที่หน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
-                use-input
-                input-debounce="0"
-                @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '1')
-                "
-                option-label="name"
-                option-value="id"
-                map-options
-                emit-value
-                clearable
               />
-
+              <q-input
-              <selector
-                hide-bottom-space
                 dense
                 outlined
-                v-model="item.organizationGovernmentAgencyId"
+                v-model="item.government"
-                :options="organizationGovernmentAgency"
+                class="col-xs-12 col-sm-2 col-md-2"
-                label="ส่วนราชการต้นสังกัด"
+                label="เลขที่ส่วนราชการ"
-                class="col-xs-12 col-sm-4 col-md-3"
+              />
-                use-input
+              <q-input
-                input-debounce="0"
+                dense
-                @filter="
+                outlined
-                  (inputValue:any, doneFn:Function) =>
+                v-model="item.department"
-                    filterSelector(inputValue, doneFn, '1')
+                class="col-xs-12 col-sm-2 col-md-2"
-                "
+                label="เลขที่ฝ่าย/ส่วน"
-                option-label="name"
+              />
-                option-value="id"
+              <q-input
-                map-options
+                dense
-                emit-value
+                outlined
-                clearable
+                v-model="item.pile"
+                class="col-xs-12 col-sm-2 col-md-2"
+                label="เลขที่กอง"
               />
-
               <selector
                 hide-bottom-space
                 dense
@@ -173,7 +158,7 @@
                 v-model="item.organizationTypeId"
                 :options="organizationType"
                 label="ประเภทหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -193,7 +178,7 @@
                 v-model="item.organizationLevelId"
                 :options="organizationLevel"
                 label="ระดับหน่วยงาน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-2 col-md-2"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -207,6 +192,54 @@
                 clearable
                 :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
               />
+              <selector
+                hide-bottom-space
+                dense
+                outlined
+                v-model="item.organizationAgencyId"
+                :options="organizationAgency"
+                label="หน่วยงานต้นสังกัด"
+                class="col-xs-12 col-sm-4 col-md-4"
+                use-input
+                input-debounce="0"
+                @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                clearable
+              />
+              <selector
+                hide-bottom-space
+                dense
+                outlined
+                v-model="item.organizationGovernmentAgencyId"
+                :options="organizationGovernmentAgency"
+                label="ส่วนราชการต้นสังกัด"
+                class="col-xs-12 col-sm-6 col-md-6"
+                use-input
+                input-debounce="0"
+                @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '1')
+                "
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
+                clearable
+              />
+              <q-input
+                dense
+                outlined
+                v-model="item.organizationOrder"
+                class="col-xs-12 col-sm-2 col-md-2"
+                type="number"
+                label="ลำดับผังโครงสร้าง"
+              />
               <selector
                 hide-bottom-space
                 dense
@@ -214,7 +247,7 @@
                 v-model="item.organizationExternalPhoneId"
                 :options="organizationTelExternal"
                 label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -234,7 +267,7 @@
                 v-model="item.organizationInternalPhoneId"
                 :options="organizationTelInternal"
                 label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -254,7 +287,7 @@
                 v-model="item.organizationFaxId"
                 :options="organizationFax"
                 label="หมายเลขโทรสาร"
-                class="col-xs-12 col-sm-4 col-md-3"
+                class="col-xs-12 col-sm-4 col-md-4"
                 use-input
                 input-debounce="0"
                 @filter="
@@ -267,43 +300,6 @@
                 emit-value
                 clearable
               />
-              <q-input
-                dense
-                outlined
-                v-model="item.agency"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="หน่วยงาน"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.government"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="ส่วนราชการ"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.department"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="ฝ่าย/ส่วน"
-              />
-              <q-input
-                dense
-                outlined
-                v-model="item.pile"
-                class="col-xs-12 col-sm-4 col-md-3"
-                label="กอง"
-              />
-
-              <q-input
-                dense
-                outlined
-                :modelValue="Number(item.organizationOrder) ?? 0"
-                class="col-xs-12 col-sm-4 col-md-3"
-                type="number"
-                label="ลำดับผังโครงสร้าง"
-              />
               <div class="col-xs-12 col-sm-12 col-md-12">
                 <q-input
                   :class="getClass(true)"
@@ -317,7 +313,6 @@
                   :label="`${'หน้าที่รับผิดชอบ'}`"
                   type="textarea"
                 />
-                <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
               </div>
             </div>
           </q-card>
@@ -339,8 +334,6 @@ import type {
 } from "../../interface/index/Main";
 import { log } from "console";
 import { useDataStore } from "@/stores/data";
-
-import { useCounterMixin } from "@/stores/mixin";
 // import { organizationSet } from "../interface/index/Main";
 
 const props = defineProps({
@@ -350,8 +343,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:organizprops", "update:formprops"]);
 
-const mixin = useCounterMixin();
-const {showLoader, hideLoader } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
@@ -390,7 +381,7 @@ const organizationAgencyCode = ref<GovermentOption[]>([]);
 const organizationAgencyCodeFilter = ref<GovermentOption[]>([]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchOrganizationOri();
   await fetchOrganizationAgencyCode();
   await fetchOrganizationGovernmentCode();
@@ -409,7 +400,7 @@ onMounted(async () => {
  *  หน่วยงาน
  */
 const fetchOrganizationOri = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -425,14 +416,14 @@ const fetchOrganizationOri = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -454,14 +445,14 @@ const fetchOrganizationAgencyCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสส่วนราชการ
  */
 const fetchOrganizationGovernmentCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -483,14 +474,14 @@ const fetchOrganizationGovernmentCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 // /**
 //  *  ชื่อย่อหน่วยงาน
 //  */
 // const fetchOrganizationShortName = async () => {
-//   showLoader();
+//   loaderPage(true);
 //   await http
 //     .get(config.API.organizationShortName)
 //     .then((res) => {
@@ -512,16 +503,16 @@ const fetchOrganizationGovernmentCode = async () => {
 //       console.log(e);
 //     })
 //     .finally(() => {
-//       hideLoader();
+//       loaderPage(false);
 //     });
 // };
 /**
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(config.API.listOrganizationAgency("หน่วยงาน"))
+    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -538,16 +529,16 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(config.API.listOrganizationAgency("ส่วนราชการ"))
+    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -564,14 +555,14 @@ const fetchOrganizationGovernmentAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *   ประเภทหน่วยงาน
  */
 const fetchOrganizationType = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationType)
     .then((res) => {
@@ -587,14 +578,14 @@ const fetchOrganizationType = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ระดับหน่วยงาน
  */
 const fetchOrganizationLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationLevel)
     .then((res) => {
@@ -610,14 +601,14 @@ const fetchOrganizationLevel = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายใน
  */
 const fetchOrganizationTelInternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelInternal)
     .then((res) => {
@@ -633,14 +624,14 @@ const fetchOrganizationTelInternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายนอก
  */
 const fetchOrganizationTelExternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelExternal)
     .then((res) => {
@@ -656,14 +647,14 @@ const fetchOrganizationTelExternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์โทรสาร
  */
 const fetchOrganizationFax = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationFax)
     .then((res) => {
@@ -679,7 +670,7 @@ const fetchOrganizationFax = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -771,6 +762,7 @@ const addOrganizationItem = async () => {
         organizationGovernmentCodeOption: organizationGovernmentCode.value,
         organizationGovernmentCodeOptionFilter:
           organizationGovernmentCodeFilter.value,
+        isActive: true,
       });
       emit("update:organizprops", organizations.value);
       //   console.log(organizations);
@@ -780,7 +772,7 @@ const addOrganizationItem = async () => {
 
 const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationGovernmentCode(val))
     .then((res) => {
@@ -800,14 +792,14 @@ const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };
 
 const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -827,7 +819,7 @@ const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };

src/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue

@@ -11,7 +11,7 @@
               v-model="organization.organizationOrganizationId"
               :options="organizationOri"
               label="หน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-6 col-md-6"
               use-input
               input-debounce="0"
               @filter="
@@ -31,7 +31,7 @@
               v-model="organization.organizationAgencyCode"
               :options="organizationAgencyCode"
               label="รหัสหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -53,7 +53,7 @@
               v-model="organization.organizationGovernmentCode"
               :options="organization.organizationGovernmentCodeOption"
               label="รหัสส่วนราชการ"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -68,16 +68,81 @@
               clearable
               :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
             />
-
             <q-input
               dense
               readonly
               outlined
               :modelValue="organization.organizationShortName.toString() ?? ''"
               label="ชื่อย่อหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.agency"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่หน่วยงาน"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.government"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่ส่วนราชการ"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.department"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่ฝ่าย/ส่วน"
+            />
+            <q-input
+              dense
+              outlined
+              v-model="organization.pile"
+              class="col-xs-12 col-sm-2 col-md-2"
+              label="เลขที่กอง"
+            />
+            <selector
+              dense
+              outlined
+              v-model="organization.organizationTypeId"
+              :options="organizationType"
+              label="ประเภทหน่วยงาน"
+              class="col-xs-12 col-sm-2 col-md-2"
+              use-input
+              input-debounce="0"
+              @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '5')
+                "
+              option-label="name"
+              option-value="id"
+              map-options
+              emit-value
+              clearable
+            /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
+            <selector
+              dense
+              outlined
+              v-model="organization.organizationLevelId"
+              :options="organizationLevel"
+              label="ระดับหน่วยงาน"
+              class="col-xs-12 col-sm-2 col-md-2"
+              use-input
+              input-debounce="0"
+              @filter="
+                  (inputValue:any, doneFn:Function) =>
+                    filterSelector(inputValue, doneFn, '6')
+                "
+              option-label="name"
+              option-value="id"
+              map-options
+              emit-value
+              clearable
+              :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
             />
-
             <selector
               dense
               disable
@@ -85,7 +150,7 @@
               v-model="organization.organizationAgencyId"
               :options="organizationAgency"
               label="หน่วยงานต้นสังกัด"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-4 col-md-4"
               use-input
               input-debounce="0"
               @filter="
@@ -106,7 +171,7 @@
               v-model="organization.organizationGovernmentAgencyId"
               :options="organizationGovernmentAgency"
               label="ส่วนราชการต้นสังกัด"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-6 col-md-6"
               use-input
               input-debounce="0"
               @filter="
@@ -120,44 +185,14 @@
               clearable
             />
             <!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกส่วนราชการต้นสังกัด'}`]" -->
-            <selector
+            <q-input
               dense
               outlined
-              v-model="organization.organizationTypeId"
+              :modelValue="Number(organization.organizationOrder) ?? 0"
-              :options="organizationType"
+              class="col-xs-12 col-sm-2 col-md-2"
-              label="ประเภทหน่วยงาน"
+              type="number"
-              class="col-xs-12 col-sm-4 col-md-3"
+              label="ลำดับ"
-              use-input
+              @update:model-value="(value) => updateNumber(organization, value)"
-              input-debounce="0"
-              @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '5')
-                "
-              option-label="name"
-              option-value="id"
-              map-options
-              emit-value
-              clearable
-            /><!-- :rules="[(val:any) => !!val || `${'กรุณาเลือกประเภทหน่วยงาน'}`]" -->
-            <selector
-              dense
-              outlined
-              v-model="organization.organizationLevelId"
-              :options="organizationLevel"
-              label="ระดับหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-3"
-              use-input
-              input-debounce="0"
-              @filter="
-                  (inputValue:any, doneFn:Function) =>
-                    filterSelector(inputValue, doneFn, '6')
-                "
-              option-label="name"
-              option-value="id"
-              map-options
-              emit-value
-              clearable
-              :rules="[(val:any) => !!val || `${'กรุณาเลือกระดับหน่วยงาน'}`]"
             />
             <selector
               dense
@@ -165,7 +200,7 @@
               v-model="organization.organizationExternalPhoneId"
               :options="organizationTelExternal"
               label="หมายเลขโทรศัพท์ติดต่อจากภายนอก"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-4 col-md-4"
               use-input
               input-debounce="0"
               @filter="
@@ -184,7 +219,7 @@
               v-model="organization.organizationInternalPhoneId"
               :options="organizationTelInternal"
               label="หมายเลขโทรศัพท์ติดต่อจากภายใน"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-4 col-md-4"
               use-input
               input-debounce="0"
               @filter="
@@ -203,7 +238,7 @@
               v-model="organization.organizationFaxId"
               :options="organizationFax"
               label="หมายเลขโทรสาร"
-              class="col-xs-12 col-sm-4 col-md-3"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -217,23 +252,13 @@
               clearable
             />
 
-            <q-input
-              dense
-              outlined
-              :modelValue="Number(organization.organizationOrder) ?? 0"
-              class="col-xs-12 col-sm-4 col-md-1"
-              type="number"
-              label="ลำดับ"
-              @update:model-value="(value) => updateNumber(organization, value)"
-            />
-
             <selector
               dense
               outlined
               v-model="organization.organizationStatusId"
               :options="organizationStatus"
               label="สถานะหน่วยงาน"
-              class="col-xs-12 col-sm-4 col-md-2"
+              class="col-xs-12 col-sm-2 col-md-2"
               use-input
               input-debounce="0"
               @filter="
@@ -245,35 +270,6 @@
               map-options
               emit-value
             />
-            <q-input
-              dense
-              outlined
-              v-model="organization.agency"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="หน่วยงาน"
-            />
-            <q-input
-              dense
-              outlined
-              v-model="organization.government"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="ส่วนราชการ"
-            />
-            <q-input
-              dense
-              outlined
-              v-model="organization.department"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="ฝ่าย/ส่วน"
-            />
-            <q-input
-              dense
-              outlined
-              v-model="organization.pile"
-              class="col-xs-12 col-sm-4 col-md-3"
-              label="กอง"
-            />
-
             <q-input
               :class="getClass(true)"
               hide-bottom-space
@@ -286,7 +282,6 @@
               :label="`${'หน้าที่รับผิดชอบ'}`"
               type="textarea"
             />
-            <!-- :rules="[(val) => !!val || `${'กรุณากรอกเงื่อนไขตำแหน่ง'}`]" -->
 
             <!-- v-model.number="item.organizationOrder" -->
             <!--<q-select
@@ -318,7 +313,6 @@ import { log } from "console";
 import { useDataStore } from "@/stores/data";
 import type { EnumStringMember } from "@babel/types";
 // import { organizationSet } from "../interface/index/Main";
-import { useCounterMixin } from "@/stores/mixin";
 
 const props = defineProps({
   organizprops: Object as PropType<OrganizaOption>,
@@ -329,8 +323,6 @@ const props = defineProps({
   },
 });
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const emit = defineEmits(["update:organizprops", "update:formprops"]);
@@ -396,11 +388,12 @@ const organization = ref<OrganizaOption>({
   organizationGovernmentCodeOption: organizationGovernmentCode.value,
   organizationGovernmentCodeOptionFilter:
     organizationGovernmentCodeFilter.value,
+  isActive: true,
 });
 emit("update:organizprops", organization.value);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   //   await fillOrgEdit(); //มาแค่ตรง selector(q-select)
   await fetchOrganizationOri();
   //   await fetchOrganizationShortName();
@@ -434,7 +427,7 @@ const getClass = (val: boolean) => {
  * @param node node that you want to edit data
  */
 const fillOrgEdit = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getOrgDraft(props.org.organizationId))
     .then((res) => {
@@ -506,7 +499,7 @@ const fillOrgEdit = async () => {
       console.log(e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
   console.log("success");
 };
@@ -515,7 +508,7 @@ const fillOrgEdit = async () => {
  *  หน่วยงาน
  */
 const fetchOrganizationOri = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -531,14 +524,14 @@ const fetchOrganizationOri = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสหน่วยงาน
  */
 const fetchOrganizationAgencyCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationCode)
     .then((res) => {
@@ -560,14 +553,14 @@ const fetchOrganizationAgencyCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  รหัสส่วนราชการ
  */
 const fetchOrganizationGovernmentCode = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -592,14 +585,14 @@ const fetchOrganizationGovernmentCode = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 // /**
 //  *  ชื่อย่อหน่วยงาน
 //  */
 // const fetchOrganizationShortName = async () => {
-//   showLoader();
+//   loaderPage(true);
 //   await http
 //     .get(config.API.organizationShortName)
 //     .then((res) => {
@@ -621,17 +614,17 @@ const fetchOrganizationGovernmentCode = async () => {
 //       console.log(e);
 //     })
 //     .finally(() => {
-//       hideLoader();
+//       loaderPage(false);
 //     });
 // };
 /**
  *  หน่วยงานต้นสังกัด
  */
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationAgency)
-    .get(config.API.listOrganizationAgency("หน่วยงาน"))
+    .get(config.API.listOrganizationHistoryAgency("หน่วยงาน"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -648,17 +641,17 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  ส่วนราชการต้นสังกัด
  */
 const fetchOrganizationGovernmentAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationGovernmentAgency)
-    .get(config.API.listOrganizationAgency("ส่วนราชการ"))
+    .get(config.API.listOrganizationHistoryAgency("ส่วนราชการ"))
     .then((res) => {
       const data = res.data.result;
       let option: DataOption[] = [];
@@ -676,14 +669,14 @@ const fetchOrganizationGovernmentAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *   ประเภทหน่วยงาน
  */
 const fetchOrganizationType = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationType)
     .then((res) => {
@@ -699,7 +692,7 @@ const fetchOrganizationType = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -707,7 +700,7 @@ const fetchOrganizationType = async () => {
  *   สถานะหน่วยงาน
  */
 const fetchOrganizationStatus = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationStatus)
     .then((res) => {
@@ -723,7 +716,7 @@ const fetchOrganizationStatus = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -731,7 +724,7 @@ const fetchOrganizationStatus = async () => {
  *  ระดับหน่วยงาน
  */
 const fetchOrganizationLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationLevel)
     .then((res) => {
@@ -747,14 +740,14 @@ const fetchOrganizationLevel = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายใน
  */
 const fetchOrganizationTelInternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelInternal)
     .then((res) => {
@@ -770,14 +763,14 @@ const fetchOrganizationTelInternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์ติดต่อภายนอก
  */
 const fetchOrganizationTelExternal = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationTelExternal)
     .then((res) => {
@@ -793,14 +786,14 @@ const fetchOrganizationTelExternal = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 /**
  *  เบอร์โทรสาร
  */
 const fetchOrganizationFax = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationFax)
     .then((res) => {
@@ -816,13 +809,13 @@ const fetchOrganizationFax = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationGovernmentCode(val))
     .then((res) => {
@@ -842,14 +835,14 @@ const fetchAgencyCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };
 
 const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
   let option: GovermentOption[] = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationAgencyCode(val))
     .then((res) => {
@@ -869,7 +862,7 @@ const fetchGovernmentCode = async (val: string, item: OrganizaOption) => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
   return option;
 };

src/modules/02_organizational/components/Tree/TreeButtonsSet.vue

@@ -65,7 +65,7 @@
       <q-tooltip>เผยแพร่</q-tooltip>
     </q-btn>
     <!-- refresh data -->
-    <q-btn
+    <!-- <q-btn
       flat
       round
       icon="mdi-refresh"
@@ -74,7 +74,7 @@
       class="q-mr-sm"
     >
       <q-tooltip>รีเฟรชข้อมูล</q-tooltip>
-    </q-btn>
+    </q-btn> -->
     <q-space />
   </div>
   <!-- ข้อมูลการเผยแพร่ข้อมูล -->

src/modules/02_organizational/interface/index/Main.ts

@@ -29,7 +29,7 @@ interface OrganizaOption {
   organizationInternalPhoneId: string; //เบอร์ติดต่อภายใน
   organizationExternalPhoneId: string; //เบอร์ติดต่อภายนอก
   organizationFaxId: string; //เบอร์โทรสาร
-  organizationOrder: Number; // ลำดับผังโครงสร้าง
+  organizationOrder: number; // ลำดับผังโครงสร้าง
   organizationUserNote: string; // User Note
   organizationStatusId: string; //status
   organizationGovernmentCodeOption: GovermentOption[];
@@ -38,6 +38,7 @@ interface OrganizaOption {
   government: string; // ส่วนราชการ
   department: string; // ฝ่าย/ส่วน
   pile: string; // กอง
+  isActive: boolean; //
   //   organizationAgencyCodeOption: GovermentOption[];
   //   organizationAgencyCodeOptionFilter: GovermentOption[];
 }

src/modules/02_organizational/interface/request/Mapping.ts

@@ -24,6 +24,7 @@ interface RequestItemsObject {
   positionExecutiveId: string;
   positionExecutiveSideId: string;
   positionStatusId: string; //สถานภาพของตำแหน่ง ไม่แน่ใจ DB
+  qualification: string; //เหตุผล
   positionCondition: string; //เงื่อนไขตำแหน่ง
   positionMasterUserNote: string; //หมายเหตุ
   positionLevelId: any; //ระดับ array id

src/modules/02_organizational/interface/response/Mapping.ts

@@ -30,8 +30,8 @@ interface ResponseTree {
   posiNumNew: string | null;
   posiOld: string | null;
   posiNew: string | null;
-  levelOld: string | null;
+  levelOld: any;
-  levelNew: string | null;
+  levelNew: any;
   change: string | null;
   statusPosition: Boolean;
   report2Id: string | null;

src/modules/02_organizational/views/MainReport.vue

@@ -146,7 +146,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 
 const govermentOP = ref<DataOption[]>([]);
 const govermentOPfilter = ref<DataOption[]>([]);
@@ -166,7 +166,7 @@ const clickAccount3 = async () => {
 };
 
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationAgency)
     .get(config.API.getOCType)
@@ -186,12 +186,12 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchOrganizationAgency();
 });
 </script>

src/modules/02_organizational/views/MainTree.vue

@@ -73,13 +73,13 @@
                   {{ personDetail ? personDetail.positionNum : "" }}
                 </div>
 
-                <div class="text-weight-medium q-pt-md row items-center">
+                <!-- <div class="text-weight-medium q-pt-md row items-center">
                   <q-icon size="10px" color="grey-4" name="mdi-circle" />
                   <div class="q-pl-sm">ตำแหน่งในการบริหารงาน</div>
                 </div>
                 <div class="text-grey-7 q-pl-lg">
                   {{ personDetail ? personDetail.executivePosition : "" }}
-                </div>
+                </div> -->
 
                 <div class="text-weight-medium q-pt-md row items-center">
                   <q-icon size="10px" color="grey-4" name="mdi-circle" />
@@ -170,10 +170,44 @@
               >
                 <!--organization บรรทัดแสดงชื่อหน่วยงาน -->
                 <template v-slot:header-organization="prop">
-                  <div class="row items-center q-gutter-sm q-pa-xs">
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
                     <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                     <div>
-                      {{ prop.node.organizationName }}
+                      <div class="text-weight-medium">
+                        {{ prop.node.organizationName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.governmentCode
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.agency
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.government
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.department
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.pile
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.organizationShortName
+                        }}
+                      </div>
                     </div>
                     <!--แสดง Total Count PositionNum-->
                     <q-badge
@@ -286,8 +320,42 @@
                 <template v-slot:header-organization="prop">
                   <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
                     <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                    <div class="text-weight-medium">
+                    <div>
-                      {{ prop.node.organizationName }}
+                      <div class="text-weight-medium">
+                        {{ prop.node.organizationName }}
+                      </div>
+                      <div class="text-weight-light">
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.governmentCode
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.agency
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.government
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.department
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.pile
+                        }}
+                        {{
+                          prop.node.organizationParentId == null
+                            ? null
+                            : prop.node.organizationShortName
+                        }}
+                      </div>
                     </div>
                     <!--แสดง Total Count PositionNum-->
                     <q-badge
@@ -310,7 +378,9 @@
                       @click.stop="
                         (popupAddOrganization = true),
                           (modalHeaderName = prop.node.organizationName),
-                          (rowClickTree = prop.node)
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
                       "
                       size="10px"
                       icon="mdi-plus"
@@ -331,7 +401,9 @@
                       @click.stop="
                         (popupEditSelectedOrganization = true),
                           (modalHeaderName = prop.node.organizationName),
-                          (rowClickTree = prop.node)
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
                       "
                       size="10px"
                       icon="mdi-pencil-outline"
@@ -359,59 +431,81 @@
                 </template>
                 <!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
                 <template v-slot:header-person="prop">
-                  <div
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-                    class="row items-center text-dark col-12 q-py-xs q-pl-sm rounded-borders"
-                    style="width: 100%"
-                  >
-                    <img
-                      v-if="
-                        prop.node.avatar == '' ||
-                        prop.node.avatar ==
-                          'https://cdn.quasar.dev/img/boy-avatar.png'
-                      "
-                      src="@/assets/avatar_user.jpg"
-                      class="col-xs-1 col-sm-2"
-                      style="width: 28px; height: 28px; border-radius: 50%"
-                    />
-                    <img
-                      v-else
-                      :src="prop.node.avatar"
-                      class="col-xs-1 col-sm-2"
-                      style="width: 28px; height: 28px; border-radius: 50%"
-                    />
-                    <!--=====ตำแหน่งว่าง สีแดง=====-->
                     <div
-                      v-if="
+                      rounded
-                        prop.node.name == `ว่าง` ||
+                      :style="
-                        prop.node.name == `N/A` ||
+                        !prop.node.isActive ? 'filter: grayscale(60%);' : ''
-                        prop.node.name == null
                       "
-                      class="q-px-sm text-weight-medium text-red"
                     >
-                      ว่าง
+                      <img
+                        v-if="
+                          prop.node.avatar == '' ||
+                          prop.node.avatar ==
+                            'https://cdn.quasar.dev/img/boy-avatar.png'
+                        "
+                        src="@/assets/avatar_user.jpg"
+                        class="col-xs-1 col-sm-2"
+                        style="width: 28px; height: 28px; border-radius: 50%"
+                      />
+                      <img
+                        v-else
+                        :src="prop.node.avatar"
+                        class="col-xs-1 col-sm-2"
+                        style="width: 28px; height: 28px; border-radius: 50%"
+                      />
                     </div>
-                    <!--=====หัวหน้า สีเขียว=====-->
+
-                    <div v-else-if="prop.node.positionLeaderFlag">
+                    <div
-                      <div class="q-px-sm text-weight-medium text-primary">
+                      rounded
-                        {{ prop.node.name }}
+                      :class="
+                        !prop.node.isActive ? 'text-grey-6' : 'text-black'
+                      "
+                    >
+                      <!--=====ตำแหน่งว่าง สีแดง=====-->
+                      <div class="row">
+                        <div
+                          v-if="
+                            prop.node.name == `ว่าง` ||
+                            prop.node.name == `N/A` ||
+                            prop.node.name == null
+                          "
+                          class="q-px-sm text-weight-medium"
+                          :class="
+                            !prop.node.isActive ? 'text-grey-6' : 'text-red'
+                          "
+                        >
+                          ว่าง
+                        </div>
+                        <!--=====หัวหน้า สีเขียว=====-->
+                        <div v-else-if="prop.node.positionLeaderFlag">
+                          <div class="q-px-sm text-weight-medium text-primary">
+                            {{ prop.node.name }}
+                          </div>
+                        </div>
+                        <!--=====ลูกน้อง สีปกติ=====-->
+                        <div v-else>
+                          <div class="q-px-sm text-weight-medium">
+                            {{ prop.node.name }}
+                          </div>
+                        </div>
+                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionName }}
+                        </div>
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionNum }}
+                        </div>
+                        <div class="q-pr-sm">
+                          {{ prop.node.positionLevel }}
+                        </div>
                       </div>
-                    </div>
+                      <div class="q-pl-sm text-weight-light">
-                    <!--=====ลูกน้อง สีปกติ=====-->
+                        {{ prop.node.positionSideName }}
-                    <div v-else>
+                        <!-- {{ prop.node.executivePosition }} -->
-                      <div class="q-px-sm text-weight-medium">
+                        {{ prop.node.executivePositionSide }}
-                        {{ prop.node.name }}
                       </div>
                     </div>
-                    <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                    <div class="q-pr-sm">
-                      {{ prop.node.positionName }}
-                    </div>
-                    <div class="q-pr-sm">
-                      {{ prop.node.positionNum }}
-                    </div>
-                    <div class="q-pr-sm">
-                      {{ prop.node.positionLevel }}
-                    </div>
                     <q-icon
                       v-if="prop.node.positionLeaderFlag"
                       class="q-mr-sm"
@@ -431,7 +525,9 @@
                       @click.stop="
                         (popupEditSelectedPosition = true),
                           (modalHeaderName = prop.node.positionName),
-                          (rowClickTree = prop.node)
+                          (rowClickTree = prop.node),
+                          (modalHeaderPosition =
+                            prop.node.keyId.search('-') > 0 ? true : false)
                       "
                       size="10px"
                       icon="mdi-pencil-outline"
@@ -468,8 +564,8 @@
           </q-page>
         </q-page-container>
         <!-- popup Add Organizations & Positions -->
-        <q-dialog v-model="popupAddOrganization" persistent full-width>
+        <q-dialog v-model="popupAddOrganization" persistent>
-          <q-card class="text-dark">
+          <q-card class="text-dark" style="min-width: 950px">
             <q-card-section class="row items-center q-py-sm">
               <div class="text-bold">เพิ่มโครงสร้างอัตรากำลังภายใต้</div>
               <strong class="text-primary q-pl-sm">{{
@@ -502,6 +598,7 @@
                 v-model:positions="positionData"
                 v-model:formprops="positionForm"
                 :is-add-new="true"
+                v-if="modalHeaderPosition"
               />
             </q-card-section>
 
@@ -706,7 +803,7 @@ const store = useDataStore();
 const mixin = useCounterMixin();
 
 const { loaderPage } = store; //แสดง load windows ขณะเรียก api
-const { success, messageError, dialogMessage, showLoader, hideLoader } = mixin;
+const { success, messageError, dialogMessage } = mixin;
 
 //Notification Component Variable
 const $q = useQuasar(); // show dialog
@@ -722,6 +819,7 @@ const popupAddOrganization = ref<boolean>(false); //แสดง pop-up เพ
 const popupEditSelectedOrganization = ref<boolean>(false); //แสดง pop-up Edit หน่วยงานที่เลือก
 const popupEditSelectedPosition = ref<boolean>(false); //แสดง pop-up Edit ตำแหน่งที่เลือก
 const modalHeaderName = ref<string>("กรุงเทพมหานคร/สำนักงาน ก.ก."); //show name of click node on modal
+const modalHeaderPosition = ref<boolean>(true);
 
 //ButtonSet Variable
 const version = ref<string>("published"); // คำอื่นจะเปิดปุ่มให้กดได้ :publicData="version === 'published'" (True = Disable Buttons) -->
@@ -809,16 +907,17 @@ watch(isShowEditTree, (count, prevCount) => {
 onMounted(async () => {
   console.log("onMounted");
   await fetchTreeRoot(true); //fetch Root Edit Tree level 1
-  await loadViewTree();
+  //   await loadViewTree();
   expandedNodeView.value = [`1`];
 
-  // //   setTimeout(() => {
+  setTimeout(async () => {
-  // //delay เพื่อให้หน้า editTree แตก level 2 ให้เสร็จก่อน จึงค่อยมา render หน้า viewTree
+    // //delay เพื่อให้หน้า editTree แตก level 2 ให้เสร็จก่อน จึงค่อยมา render หน้า viewTree
-  // // isShowEditTree.value = false; //show View Tree สั่งแสดงหน้า viewTree
+    // // isShowEditTree.value = false; //show View Tree สั่งแสดงหน้า viewTree
-  // await fetchTreeRoot(false); //fetch View Tree
+    // await fetchTreeRoot(false); //fetch View Tree
-  // // *** viewTree จะเปลี่ยนจาก โหลดทีละ level ตามที่ user click เป็น load file ที่มีข้อมูลครบทั้ง DB แล้วมาทีเดียว
+    await loadViewTree();
-  // // *** น่าจะเปลี่ยนจาก v-if เป็น v-show เฉพาะ viewTree
+    // // *** viewTree จะเปลี่ยนจาก โหลดทีละ level ตามที่ user click เป็น load file ที่มีข้อมูลครบทั้ง DB แล้วมาทีเดียว
-  // //   }, 600);
+    // // *** น่าจะเปลี่ยนจาก v-if เป็น v-show เฉพาะ viewTree
+  }, 600);
   await isTreeHasDraft();
 });
 
@@ -868,12 +967,12 @@ const loadFileServer = async (node: any) => {
       manageApiErrorMsg(e);
     })
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 const isTreeHasDraft = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   let orgHasDraft = false;
   let orgPoHasDraft = false;
   await http
@@ -889,7 +988,7 @@ const isTreeHasDraft = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 
   await http
@@ -905,7 +1004,7 @@ const isTreeHasDraft = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 
   if (orgHasDraft || orgPoHasDraft) {
@@ -920,7 +1019,7 @@ const isTreeHasDraft = async () => {
  */
 const fetchTreeRoot = async (isDraft: boolean) => {
   //   console.log(isDraft);
-  showLoader();
+  loaderPage(true);
   console.log("Call API14 GetTreeRoot");
   isShowEditTree.value = isDraft; // to show same tree that we fetch
   let request = "";
@@ -947,14 +1046,15 @@ const fetchTreeRoot = async (isDraft: boolean) => {
       //   messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
-      //   if (isDraft) {
+      if (isDraft) {
-      // ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
+        // ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
-      // ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
+        // ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
-      //   qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
+        qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
-      //   } else {
+        expandedNodeEdit.value = [dataTreeDraft.value[0].keyId];
-      //     qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
+      } else {
-      //   }
+        qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
+      }
     });
 };
 
@@ -964,7 +1064,7 @@ const fetchTreeRoot = async (isDraft: boolean) => {
 const fetchChildrenByParentId = async (node: any) => {
   //   console.log(isDraft);
   console.log("Call API4");
-  showLoader();
+  loaderPage(true);
   let request = "";
   if (isShowEditTree.value) {
     request = config.API.getDraftTreeNode(node.organizationId, node.keyId);
@@ -984,7 +1084,7 @@ const fetchChildrenByParentId = async (node: any) => {
       manageApiErrorMsg(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1000,7 +1100,7 @@ const onLazyLoad = (node: any) => {
      */
     console.log("Call LazyLoad");
     await fetchChildrenByParentId(node.node);
-    /**   showLoader();
+    /**   loaderPage(true);
     let request = "";
     if (isShowEditTree.value) {
       request = config.API.getDraftTreeNode(
@@ -1037,7 +1137,7 @@ const onLazyLoad = (node: any) => {
         // messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });*/
 
     node.done(node.node.children); //return ค่าให้ q-tree generate children
@@ -1092,7 +1192,7 @@ const apiDeleteOrg = () => {
   //   console.log("isShowEditTree", isShowEditTree.value);
   setTimeout(async () => {
     //delay for lazyLoad to be able to tricker again
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true;
     await http
       .delete(config.API.delTreeOrgDraft(delStructureId.value))
@@ -1111,7 +1211,7 @@ const apiDeleteOrg = () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         await isTreeHasDraft();
       });
   }, 20);
@@ -1140,7 +1240,7 @@ const apiDeletePosition = () => {
   isShowEditTree.value = false;
   setTimeout(async () => {
     //delay for lazyLoad to be able to tricker again
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true;
     await http
       .delete(config.API.delTreePositionDraft(delStructureId.value))
@@ -1157,7 +1257,7 @@ const apiDeletePosition = () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         await isTreeHasDraft();
       });
   }, 20);
@@ -1170,7 +1270,7 @@ const apiDeletePosition = () => {
  * ฟังก์ชัน clear data แบบร่าง
  */
 const deleteDraft = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.delTreeOrgPoDraft)
     .then((res) => {
@@ -1182,7 +1282,7 @@ const deleteDraft = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       router.go(0);
       await isTreeHasDraft();
     });
@@ -1192,7 +1292,7 @@ const deleteDraft = async () => {
  * ฟังก์ชันเผยแพร่แบบร่าง
  */
 const publishDraft = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.publishOrgPoDraft)
     .then((res) => {
@@ -1218,7 +1318,7 @@ const publishDraft = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await isTreeHasDraft();
     });
 };
@@ -1267,6 +1367,18 @@ const treeFilterMethod = (node: any, filter: string) => {
     (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
     (node.name && node.name.indexOf(filt) > -1) ||
     (node.positionName && node.positionName.indexOf(filt) > -1) ||
+    (node.governmentCode &&
+      node.governmentCode.toString().indexOf(filt) > -1) ||
+    (node.agency && node.agency.indexOf(filt) > -1) ||
+    (node.government && node.government.indexOf(filt) > -1) ||
+    (node.department && node.department.indexOf(filt) > -1) ||
+    (node.pile && node.pile.indexOf(filt) > -1) ||
+    (node.organizationShortName &&
+      node.organizationShortName.indexOf(filt) > -1) ||
+    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+    (node.executivePositionSide &&
+      node.executivePositionSide.indexOf(filt) > -1) ||
     (node.positionLevel && node.positionLevel.indexOf(filt) > -1);
 
   //hasMatch จะได้เป็น keyId ของ node ที่หาเจอโดย q-tree จะวนเรียก treeFilterMethod ทีละ node
@@ -1304,7 +1416,7 @@ const addStructure = async (node: any) => {
   //   } // no data to add close pop-up no message show when click save
   if (
     organizCheck == true &&
-    positionCheck == true &&
+    (positionCheck == true || modalHeaderPosition.value == false) &&
     (positionData.value.length > 0 || organizationData.value.length > 0)
   ) {
     let reqOrgAr: Array<any> = JSON.parse(
@@ -1317,7 +1429,7 @@ const addStructure = async (node: any) => {
     });
     // console.log(node.organizationId);
     console.log("Call API1");
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true; //ต้องกลับมาแสดง editTree อีกครั้ง & trigger lazyLoad โดย setExpanded
     await http
       .post(config.API.addTreeDraft, {
@@ -1338,7 +1450,7 @@ const addStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
 
         popupAddOrganization.value = false;
         await isTreeHasDraft();
@@ -1370,7 +1482,7 @@ const editOrgStructure = async (node: any) => {
   if (organizCheck == true) {
     // console.log(node.organizationId);
     console.log("Call API13");
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true; //end prepare for tricker LazyLoad
     await http
       .put(config.API.editTreeOrgDraft(node.organizationId), {
@@ -1393,6 +1505,7 @@ const editOrgStructure = async (node: any) => {
         department: organizationDataEdit.value?.department,
         pile: organizationDataEdit.value?.pile,
         organizationStatusId: organizationDataEdit.value?.organizationStatusId,
+        isActive: organizationDataEdit.value?.isActive,
       })
       .then(async (res) => {
         success($q, "บันทึกข้อมูลร่างสำเร็จ");
@@ -1409,7 +1522,7 @@ const editOrgStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         popupEditSelectedOrganization.value = false;
         await isTreeHasDraft();
       });
@@ -1435,12 +1548,13 @@ const editPositionStructure = async (node: any) => {
 
   if (positionCheck == true) {
     console.log("Call API3");
-    showLoader();
+    loaderPage(true);
     isShowEditTree.value = true; //end prepare for tricker LazyLoad
     await http
       .put(config.API.editTreePositionDraft(node.organizationPositionId), {
         positionMasterId: positionData.value[0].positionMasterId,
         positionUserNote: positionData.value[0].positionUserNote,
+        isActive: positionData.value[0].isActive,
       })
       .then(async (res) => {
         success($q, "บันทึกข้อมูลร่างสำเร็จ");
@@ -1457,7 +1571,7 @@ const editPositionStructure = async (node: any) => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         popupEditSelectedPosition.value = false;
         await isTreeHasDraft();
       });
@@ -1473,7 +1587,7 @@ const clickHistory = async () => {
   modalHistory.value = true;
   //   rowsHistory.value = rawHistory.value.filter((f: any) => f.id == row.id);
 
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getTreeHistory)
     .then((res) => {
@@ -1499,7 +1613,7 @@ const clickHistory = async () => {
       //   messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/02_organizational/views/ManageReport2.vue

@@ -77,6 +77,11 @@
                 <div v-else-if="col.name == 'statusPosition'">
                   {{ col.value ? "ถือครอง" : "ว่าง" }}
                 </div>
+                <div
+                  v-else-if="col.name == 'levelOld' || col.name == 'levelNew'"
+                >
+                  {{ String(col.value) }}
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -120,8 +125,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, modalError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, modalError } = mixin;
-  mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 
@@ -259,203 +263,6 @@ const columns = ref<any>([
   },
 ]);
 const rows = ref<ResponseTree[]>([]);
-const mockdata = ref<ResponseTree[]>([
-  {
-    no: 1,
-    report2Id: "1",
-    profilePositionId: "1",
-    name: "นายกนก ลายมาก",
-    edu: "ศศ.บ. (รัฐศาสตร์)",
-    posiNumOld: "กบห.1",
-    posiNumNew: "กบห.1",
-    posiOld: "ผู้อำนวยการ",
-    posiNew: "ผู้อำนวยการ",
-    levelOld: "ต้น",
-    levelNew: "ต้น",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 2,
-    report2Id: "2",
-    profilePositionId: "2",
-    name: "นายกน ลามา",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.2",
-    posiNumNew: "กบห.2",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 3,
-    report2Id: "3",
-    profilePositionId: "3",
-    name: "นายกก ลายดี",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.3",
-    posiNumNew: "กบห.3",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 4,
-    report2Id: "4",
-    profilePositionId: "4",
-    name: "นายนก มากหลาย",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.4",
-    posiNumNew: "กบห.4",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 5,
-    report2Id: "5",
-    profilePositionId: "5",
-    name: "นางสมพร เพชรเหลือ",
-    edu: "ศศ.บ. (การจัดการทั่วไป)",
-    posiNumOld: "กบห.5",
-    posiNumNew: "กบห.5",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ชำนาญการ",
-    levelNew: "ชำนาญการพิเศษ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 6,
-    report2Id: "6",
-    profilePositionId: "6",
-    name: "นางพร ลายกนก",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.6",
-    posiNumNew: "กบห.6",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ชำนาญการ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 7,
-    report2Id: "7",
-    profilePositionId: "7",
-    name: "นางสาวสวย มากมาย",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.7",
-    posiNumNew: "กบห.7",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 8,
-    report2Id: "8",
-    profilePositionId: "8",
-    name: "นายหล่อ ขั้นเทพ",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.8",
-    posiNumNew: "กบห.8",
-    posiOld: "นักจัดการงานทั่วไป",
-    posiNew: "นักจัดการงานทั่วไป",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ชำนาญการ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 9,
-    report2Id: "9",
-    profilePositionId: "9",
-    name: "นางแม้นศรี บางแค",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.9",
-    posiNumNew: "กบห.9",
-    posiOld: "เจ้าพนักงานธุรการ",
-    posiNew: "เจ้าพนักงานธุรการ",
-    levelOld: "ปฏิบัติงาน",
-    levelNew: "ชำนาญงาน",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 10,
-    report2Id: "10",
-    profilePositionId: "10",
-    name: "นายมั่น มากทอง",
-    edu: "ศศ.บ. (การบริหารการศึกษา)",
-    posiNumOld: "กบห.10",
-    posiNumNew: "กบห.10",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ชำนาญการ",
-    levelNew: "ชำนาญการพิเศษ",
-    change: "เลื่อนระดับ",
-    statusPosition: true,
-  },
-  {
-    no: 11,
-    report2Id: "11",
-    profilePositionId: "11",
-    name: "นายผดุง ทองมาก",
-    edu: "ศศ.บ. (รัฐศาสตร์)",
-    posiNumOld: "กบห.11",
-    posiNumNew: "กบห.11",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ชำนาญการ",
-    levelNew: "ชำนาญการ",
-    change: "-",
-    statusPosition: true,
-  },
-  {
-    no: 12,
-    report2Id: "12",
-    profilePositionId: "12",
-    name: "นางสาวเปรี้ยว เข็ดฟัน",
-    edu: "ศศ.บ. (รัฐศาสตร์)",
-    posiNumOld: "กบห.13",
-    posiNumNew: "กบห.12",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ปฏิบัติการ",
-    levelNew: "ปฏิบัติการ",
-    change: "เปลี่ยนตำแหน่งเลขที่",
-    statusPosition: true,
-  },
-  {
-    no: 13,
-    report2Id: "13",
-    profilePositionId: "13",
-    name: "",
-    edu: "",
-    posiNumOld: "กบห.12",
-    posiNumNew: "กบห.13",
-    posiOld: "นักวิชาการเงินและบัญชี",
-    posiNew: "นักวิชาการเงินและบัญชี",
-    levelOld: "ชำนาญงาน",
-    levelNew: "ชำนาญงาน",
-    change: "เปลี่ยนตำแหน่งเลขที่",
-    statusPosition: false,
-  },
-]);
 
 onMounted(async () => {
   let arVisible: string[] = [];
@@ -469,7 +276,7 @@ onMounted(async () => {
 });
 
 const nodeTree = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -488,7 +295,7 @@ const nodeTree = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -502,7 +309,7 @@ const clickTree = () => {
 };
 
 const onHistory = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2HistoryId(selected.value))
     .then((res) => {
@@ -525,13 +332,13 @@ const onHistory = async () => {
       );
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const doSearch = async () => {
   //ทำไว้แล้ว เหลือ ใส่ type
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2TreeId(selected.value))
     .then((res) => {
@@ -552,7 +359,10 @@ const doSearch = async () => {
             posiNew: e.posiNew ?? "-",
             levelOld: e.levelOld ?? "-",
             levelNew: e.levelNew ?? "-",
-            change: e.change ?? "-",
+            change:
+              e.report2Id == "00000000-0000-0000-0000-000000000000"
+                ? "ไม่เปลี่ยนแปลง"
+                : "เปลี่ยนแปลง",
             statusPosition: e.statusPosition,
           });
         });
@@ -561,7 +371,7 @@ const doSearch = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -577,7 +387,7 @@ const onConfirm = async () => {
     ok: "ยืนยัน",
     persistent: true,
   }).onOk(async () => {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.report2DoneId(selected.value))
       .then((res) => {
@@ -585,7 +395,7 @@ const onConfirm = async () => {
       })
       .catch((e) => {})
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         await doSearch();
       });
   });

src/modules/02_organizational/views/ManageReport2Add.vue

@@ -591,7 +591,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 const id = ref<string>("");
 const myForm = ref<QForm | null>(null); //form data input
 
@@ -669,10 +669,10 @@ const sideWorkOPfilter = ref<DataOption[]>([]);
 const levelOPfilter = ref<DataOption[]>([]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     id.value = route.params.id.toString();
-    showLoader();
+    loaderPage(true);
 
     await fetchGoverment();
     // await fetchAgency();
@@ -685,12 +685,12 @@ onMounted(async () => {
     await fetchLevel();
 
     await fetchData();
-    hideLoader();
+    loaderPage(false);
   }
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2Id(id.value))
     .then(async (res) => {
@@ -723,7 +723,7 @@ const fetchData = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -739,7 +739,7 @@ const checkSave = async () => {
 
 const saveData = async () => {
   //   console.log(myData.value);
-  showLoader();
+  loaderPage(true);
   const body: RequestReport2 = {
     organizationShortNameId: myData.value.goverment2,
     organizationOrganizationId: myData.value.agency2,
@@ -760,7 +760,7 @@ const saveData = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -770,7 +770,7 @@ const clickBack = () => {
 
 //รหัสส่วนราชการ
 const fetchGoverment = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -796,12 +796,12 @@ const fetchGoverment = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 const updateGoverment = async (id: string) => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.getPositionMasterPositionNumberId(id))
     .then((res) => {
@@ -890,13 +890,13 @@ const updateGoverment = async (id: string) => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 // //ตำแหน่งเลขที่
 const fetchPositionNum = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.getPositionMasterPositionNumber)
     .then((res) => {
@@ -910,13 +910,13 @@ const fetchPositionNum = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ประเภทตำแหน่ง
 const fetchCategory = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionType)
     .then((res) => {
@@ -930,13 +930,13 @@ const fetchCategory = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ตำแหน่งทางการบริหาร
 const fetchPositionManage = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionExecutive)
     .then((res) => {
@@ -950,13 +950,13 @@ const fetchPositionManage = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ด้านทางบริหาร
 const fetchSideManage = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionExecutiveSide)
     .then((res) => {
@@ -970,13 +970,13 @@ const fetchSideManage = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ตำแหน่งในสายงาน
 const fetchPositionWork = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -990,13 +990,13 @@ const fetchPositionWork = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ด้าน/สาขา
 const fetchSideWork = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionSide)
     .then((res) => {
@@ -1010,13 +1010,13 @@ const fetchSideWork = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 
 //ระดับตำแหน่ง
 const fetchLevel = async () => {
-  //   showLoader();
+  //   loaderPage(true);
   await http
     .get(config.API.positionLevel)
     .then((res) => {
@@ -1030,7 +1030,7 @@ const fetchLevel = async () => {
     })
     .catch((e) => {})
     .finally(() => {
-      //   hideLoader();
+      //   loaderPage(false);
     });
 };
 

src/modules/02_organizational/views/ManageReport2History.vue

@@ -351,7 +351,7 @@ const router = useRouter();
 const route = useRoute();
 
 const { loaderPage } = dataStore;
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 const id = ref<string>("");
 const previous = ref<boolean>(false);
 const next = ref<boolean>(false);
@@ -360,7 +360,7 @@ const historyHead = ref<ResponseHistoryHead[]>([]);
 const historyData = ref<ResponseHistory[]>([]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     id.value = route.params.id.toString();
 
@@ -386,7 +386,7 @@ const clickPreviousNext = async (page: string) => {
 };
 
 const fetchHistory = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.report2HistoryId(id.value))
     .then((res) => {
@@ -402,7 +402,7 @@ const fetchHistory = async () => {
     })
     .catch((e) => {})
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       if (historyHead.value.length > 1) {
         next.value = true;
         previous.value = false;
@@ -414,7 +414,7 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(
       config.API.report2HistoryDetailId(
@@ -455,7 +455,7 @@ const fetchData = async () => {
     })
     .catch((e) => {})
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/02_organizational/views/Report.vue

@@ -109,7 +109,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, success, dateToISO } = mixin;
 
 const govermentOP = ref<DataOption[]>([]);
 const govermentOPfilter = ref<DataOption[]>([]);
@@ -117,7 +117,7 @@ const goverment = ref<string>("");
 const tab = ref<string>("audit1");
 
 const fetchOrganizationAgency = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     // .get(config.API.organizationAgency)
     .get(config.API.listOrganizationAgency("หน่วยงาน"))
@@ -137,12 +137,12 @@ const fetchOrganizationAgency = async () => {
       console.log(e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchOrganizationAgency();
 });
 </script>

src/modules/03_recruiting/components/Address.vue

@@ -274,7 +274,7 @@ const subdistrictCOptions = ref<DataOption[]>([]);
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const emit = defineEmits(["update:form"]);
 
 watch(myform, async (count: any, prevCount: any) => {
@@ -319,7 +319,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -381,7 +381,7 @@ const fetchDistrict = async (id: string, position: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -409,7 +409,7 @@ const fetchSubDistrict = async (id: string, position: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/components/Career.vue

@@ -213,15 +213,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
+const { dateThaiRange, modalDelete, modalConfirm, dateToISO, success } = mixin;
-  dateThaiRange,
-  modalDelete,
-  modalConfirm,
-  dateToISO,
-  success,
-  showLoader,
-  hideLoader,
-} = mixin;
 const store = useExamDataStore();
 const { examData, changeExamColumns } = store;
 const id = ref<string>("");
@@ -326,7 +318,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateCareer(candidateId.value))
     .then((res) => {
@@ -344,7 +336,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -423,7 +415,7 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .delete(config.API.candidateAdminCareer(rawItem.value.id))
       .then(() => {
@@ -459,7 +451,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.candidateAdminCareer(candidateId.value), {
       name: location.value,
@@ -484,7 +476,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateAdminCareer(id.value), {
       name: location.value,

src/modules/03_recruiting/components/Document.vue

@@ -168,7 +168,7 @@ const name = ref<string>("");
 const files = ref<UploadType[]>([]);
 const file = ref<File[]>([]);
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 onMounted(async () => {
   await getData();
@@ -180,7 +180,7 @@ const fileAdd = async (val: any) => {
 };
 
 const getData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateUpload(candidateId.value))
     .then((res) => {
@@ -191,7 +191,7 @@ const getData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -199,7 +199,7 @@ const deleteData = async (id: string) => {
   const params = {
     documentId: id,
   };
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.candidateUpload(candidateId.value), {
       params,
@@ -211,7 +211,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await getData();
     });
 };
@@ -223,7 +223,7 @@ const uploadData = async () => {
   });
   const formData = new FormData();
   formData.append("", newFile);
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateUpload(candidateId.value), formData)
     .then((res) => {
@@ -233,7 +233,7 @@ const uploadData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       name.value = "";
       uploader.value.reset();
       await getData();

src/modules/03_recruiting/components/Education.vue

@@ -240,7 +240,7 @@ const rows = ref<RequestItemsObject[]>([]);
 const route = useRoute();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const candidateId = ref<string>(route.params.candidateId.toString());
 const filter = ref<string>(""); //search data table
 
@@ -324,7 +324,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateEducation(candidateId.value))
     .then((res) => {
@@ -343,12 +343,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetcheducationLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -363,7 +363,7 @@ const fetcheducationLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -444,7 +444,7 @@ const checkDelete = (row: RequestItemsObject) => {
  */
 const clickDeleteRow = async () => {
   if (rawItem.value != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .delete(config.API.candidateAdminEducation(rawItem.value.id))
       .then(() => {
@@ -480,7 +480,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.candidateAdminEducation(candidateId.value), {
       educationLevelId: educationLevelId.value,
@@ -505,7 +505,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateAdminEducation(id.value), {
       educationLevelId: educationLevelId.value,

src/modules/03_recruiting/components/ExamFinished.vue

@@ -113,7 +113,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { messageError, date2Thai, showLoader, hideLoader } = mixin;
+const { messageError, date2Thai } = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const fullName = ref<string>("");
@@ -136,7 +136,7 @@ onMounted(async () => {
 });
 
 const fetchCard = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateCard(props.candidateId))
     .then((res) => {
@@ -178,7 +178,7 @@ const fetchCard = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/03_recruiting/components/Family.vue

@@ -302,7 +302,7 @@ const $q = useQuasar();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const edit = ref<boolean>(true);
 const myform = ref<any>({});
 const route = useRoute();
@@ -323,7 +323,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateFamily(candidateId.value))
     .then((res) => {
@@ -350,7 +350,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/components/Information.vue

@@ -430,8 +430,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, calAge, modalError, success, showLoader, hideLoader } =
+const { date2Thai, calAge, modalError, success } = mixin;
-  mixin;
 const districtOptions = ref<DataOption[]>([]);
 const route = useRoute();
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -464,7 +463,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateInformation(candidateId.value))
     .then((res) => {
@@ -495,12 +494,12 @@ const fetchData = async () => {
         keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name;
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchImgData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateProfile(candidateId.value))
     .then((res) => {
@@ -511,7 +510,7 @@ const fetchImgData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -543,7 +542,7 @@ const selectProvince = (val: string) => {
 };
 
 const fetchDistrict = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.listDistrict(id))
     .then((res) => {
@@ -558,7 +557,7 @@ const fetchDistrict = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/components/Occupation.vue

@@ -283,7 +283,7 @@ const candidateId = ref<string>(route.params.candidateId.toString());
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const emit = defineEmits(["update:form"]);
 
@@ -300,7 +300,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateOccupation(candidateId.value))
     .then((res) => {
@@ -327,7 +327,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/components/Profile.vue

@@ -21,11 +21,7 @@
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
   <div class="q-px-sm">
-    <Family
+    <Family :prefixOptions="prefixOptions" :status="status" v-model:form="formFamily" />
-      :prefixOptions="prefixOptions"
-      :status="status"
-      v-model:form="formFamily"
-    />
   </div>
 
   <q-separator class="q-my-lg bg-gray" size="5px" />
@@ -60,9 +56,9 @@ import Occupation from "@/modules/03_recruiting/components/Occupation.vue";
 import Education from "@/modules/03_recruiting/components/Education.vue";
 import Career from "@/modules/03_recruiting/components/Career.vue";
 import Document from "@/modules/03_recruiting/components/Document.vue";
+import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useManageDataStore } from "@/modules/01_metadata/store";
 
 const props = defineProps({
   status: {
@@ -88,9 +84,8 @@ const props = defineProps({
 });
 
 const $q = useQuasar();
-
+const dataStore = useDataStore();
-const store = useManageDataStore();
+const { loaderPage } = dataStore;
-const { getPrefix } = store;
 const prefixOptions = ref<DataOption[]>([]);
 const relationshipOptions = ref<DataOption[]>([]);
 const provinceOptions = ref<DataOption[]>([]);
@@ -99,7 +94,7 @@ const formAddress = ref<any>({});
 const formFamily = ref<any>({});
 const formOccupation = ref<any>({});
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 
 const emit = defineEmits([
   "update:formInformation",
@@ -125,26 +120,34 @@ watch(formOccupation, async (count: Object, prevCount: Object) => {
 });
 
 onMounted(() => {
-  hideLoader();
+  loaderPage(false);
   fetchPrefix();
   fetchRelationship();
   fetchProvince();
 });
 
 const fetchPrefix = async () => {
-  const result = await getPrefix(true, false);
+  loaderPage(true);
-  const data = result.data;
+  await http
-  let option: DataOption[] = [];
+    .get(config.API.prefix)
-  if (data.length > 0) {
+    .then((res) => {
-    data.map((r: any) => {
+      const data = res.data.result;
-      option.push({ id: r.id.toString(), name: r.name.toString() });
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      prefixOptions.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
     });
-  }
-  prefixOptions.value = option;
 };
 
 const fetchRelationship = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.relationship)
     .then((res) => {
@@ -159,12 +162,12 @@ const fetchRelationship = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchProvince = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.province)
     .then((res) => {
@@ -179,7 +182,7 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/03_recruiting/components/Table.vue

@@ -106,9 +106,9 @@
     :virtual-scroll-sticky-size-start="48"
     dense
     :pagination-label="paginationLabel"
+    :pagination="initialPagination"
+    :rows-per-page-options="[0]"
   >
-    <!-- :pagination="initialPagination"
-    :rows-per-page-options="[0]" -->
     <template v-slot:header="props">
       <q-tr :props="props">
         <q-th v-for="col in props.cols" :key="col.name" :props="props">

src/modules/03_recruiting/components/TableCandidate.vue

@@ -47,7 +47,7 @@
           <q-list style="min-width: 100px">
             <q-item clickable v-close-popup @click="downloadFile()">
               <q-item-section class="text-blue"
-                >ดาวน์โหลดข้อมูลผู้สมัคร(แบบย่อ)</q-item-section
+                >ดาวน์โหลดจัดการรายชื่อผู้สมัคร</q-item-section
               >
             </q-item>
             <q-item clickable v-close-popup @click="downloadFileDetail()">
@@ -155,7 +155,7 @@ const table = ref<any>(null);
 const files = ref<File[]>([]);
 const filterRef = ref<any>(null);
 const examId = ref<string>(route.params.examId.toString());
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -278,7 +278,7 @@ const uploadFile = async () => {
 };
 
 const uploadDataSeat = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("", files.value[0]);
   await http
@@ -290,14 +290,14 @@ const uploadDataSeat = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       files.value = [];
       props.fetchData();
     });
 };
 
 const uploadDataPoint = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("", files.value[0]);
   await http
@@ -310,14 +310,14 @@ const uploadDataPoint = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       files.value = [];
       props.fetchData();
     });
 };
 
 const downloadFile = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamDownload(examId.value), {
       responseType: "blob",
@@ -330,12 +330,12 @@ const downloadFile = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadFileDetail = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamDownloadDetail(examId.value), {
       responseType: "blob",
@@ -348,7 +348,7 @@ const downloadFileDetail = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/interface/request/Period.ts

@@ -1,9 +1,9 @@
 //ข้อมูล
 interface RequestPeriodExam {
-  announcementDate: string;
+  announcementDate: string | null;
-  announcementEndDate: string;
+  announcementEndDate: string | null;
-  announcementStartDate: string;
+  announcementStartDate: string | null;
-  examDate: string;
+  examDate: string | null;
   announcementExam: boolean;
   bankExam: RequestPayment[];
   checkDisability: boolean;
@@ -18,51 +18,51 @@ interface RequestPeriodExam {
   organizationCodeName: string;
   organizationId: string;
   organizationName: string;
-  paymentEndDate: string;
+  paymentEndDate: string | null;
   paymentKrungThai: string;
-  paymentStartDate: string;
+  paymentStartDate: string | null;
   positionExam: RequestPosition[];
-  registerEndDate: string;
+  registerEndDate: string | null;
-  registerStartDate: string;
+  registerStartDate: string | null;
   round: number;
   year: number;
   category: string;
 }
 
 interface RequestPeriodCompete {
-  announcementEndDate: string;
+  announcementEndDate: string | null;
-  announcementStartDate: string;
+  announcementStartDate: string | null;
-  examDate: string;
+  examDate: string | null;
   detail: string;
   fee: number;
   id: string;
   name: string;
   note: string;
-  paymentEndDate: string;
+  paymentEndDate: string | null;
-  paymentStartDate: string;
+  paymentStartDate: string | null;
-  registerEndDate: string;
+  registerEndDate: string | null;
-  registerStartDate: string;
+  registerStartDate: string | null;
   order: number;
   year: number;
-  announcementDate: string;
+  announcementDate: string | null;
 }
 
 interface RequestPeriodDisable {
-  announcementEndDate: string;
+  announcementEndDate: string | null;
-  announcementStartDate: string;
+  announcementStartDate: string | null;
-  examDate: string;
+  examDate: string | null;
   detail: string;
   fee: number;
   id: string;
   name: string;
   note: string;
-  paymentEndDate: string;
+  paymentEndDate: string | null;
-  paymentStartDate: string;
+  paymentStartDate: string | null;
-  registerEndDate: string;
+  registerEndDate: string | null;
-  registerStartDate: string;
+  registerStartDate: string | null;
   round: number;
   year: number;
-  announcementDate: string;
+  announcementDate: string | null;
 }
 
 interface RequestPosition {
@@ -71,6 +71,7 @@ interface RequestPosition {
   positionName: string;
   typeId: string;
   typeName: string;
+  highDegree: Boolean;
 }
 
 interface RequestPayment {

src/modules/03_recruiting/interface/response/Period.ts

@@ -21,11 +21,11 @@ interface ResponsePeriodExam {
   round: number;
   yearly: number;
   fee: number;
-  dateAnnounce: Date;
+  dateAnnounce: Date | null;
-  dateAnnouncement: [Date, Date];
+  dateAnnouncement: [Date, Date] | null;
-  dateExam: Date;
+  dateExam: Date | null;
-  dateRegister: [Date, Date];
+  dateRegister: [Date, Date] | null;
-  datePayment: [Date, Date];
+  datePayment: [Date, Date] | null;
   organizationName: {
     id: string;
     name: string;
@@ -50,6 +50,7 @@ interface ResponsePosition {
     id: string;
     name: string;
   };
+  highDegree: Boolean;
 }
 interface ResponsePayment {
   id: string;

src/modules/03_recruiting/views/01_compete/Detail.vue

@@ -18,9 +18,7 @@
       <q-menu>
         <q-list style="min-width: 100px">
           <q-item clickable v-close-popup @click="downloadExam()">
-            <q-item-section class="text-blue"
+            <q-item-section class="text-blue">ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section>
-              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
-            >
           </q-item>
           <q-item clickable v-close-popup @click="downloadPassExam()">
             <q-item-section class="text-primary"
@@ -48,7 +46,6 @@
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
-        v-model:pagination="pagination"
         :nornmalData="false"
         :conclude="true"
       >
@@ -102,23 +99,12 @@
           </q-tr>
         </template>
       </Table>
-      <div class="row justify-center q-mt-md">
-        <q-pagination
-          v-model="pagination.page"
-          color="grey-8"
-          :max="pagesNumber"
-          :max-pages="5"
-          size="sm"
-          boundary-links
-          direction-links
-        ></q-pagination>
-      </div>
     </div>
   </q-card>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -134,7 +120,7 @@ const router = useRouter();
 const route = useRoute();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
@@ -326,18 +312,8 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-const pagesNumber = computed(() => {
-  return Math.ceil(rows.value.length / pagination.value.rowsPerPage);
-});
-
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
@@ -346,7 +322,7 @@ const clickDetail = (examID: string) => {
 };
 
 const downloadExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportExam(importId.value), {
       responseType: "blob",
@@ -362,12 +338,12 @@ const downloadExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportPassExam(importId.value), {
       responseType: "blob",
@@ -383,12 +359,12 @@ const downloadPassExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassResultExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportPassResultExam(importId.value), {
       responseType: "blob",
@@ -404,12 +380,12 @@ const downloadPassResultExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.getExamResultById(importId.value), {
       examAttribute: "",
@@ -437,7 +413,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/03_recruiting/views/01_compete/DetailEx.vue

@@ -1,237 +1,304 @@
 <!-- page:detail page สรรหา -->
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
+	<div class="toptitle text-dark col-12 row items-center">
-    <q-btn
+		<q-btn
-      icon="mdi-arrow-left"
+			icon="mdi-arrow-left"
-      unelevated
+			unelevated
-      round
+			round
-      dense
+			dense
-      flat
+			flat
-      color="primary"
+			color="primary"
-      class="q-mr-sm"
+			class="q-mr-sm"
-      @click="router.go(-1)"
+			@click="router.go(-1)"
-    />
+		/>
-    รายละเอียดของผู้สมัครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
+		รายละเอียดของผู้สมัครสอบ {{ examID }} : {{ prefix }}{{ fullname }}
-  </div>
+	</div>
-  <q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
+	<q-card flat bordered class="col-12 row q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-md col-12">
+		<div class="row q-col-gutter-md col-12">
-      <div class="col-xs-12 col-sm-12 col-md-6">
+			<div class="col-xs-12 col-sm-12 col-md-6">
-        <q-card bordered flat class="col-12 q-pa-md">
+				<q-card bordered flat class="col-12 q-pa-md">
-          <div class="col-12 q-col-gutter-sm row items-center">
+					<div class="col-12 q-col-gutter-sm row items-center">
-            <div class="col-12 text-weight-bold">ข้อมูลทั่วไป</div>
+						<div class="col-12 text-weight-bold">ข้อมูลทั่วไป</div>
-            <div class="col-6 text-grey-7" v-if="profile_id !== null">
+						<div
-              เลขประจำตัวประชาชน
+							class="col-6 text-grey-7"
-            </div>
+							v-if="profile_id !== null"
-            <div class="col-6 text-black" v-if="profile_id !== null">
+						>
-              {{ profile_id }}
+							เลขประจำตัวประชาชน
-            </div>
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="profile_id !== null"
+						>
+							{{ profile_id }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="prefix !== null">
+						<div class="col-6 text-grey-7" v-if="prefix !== null">
-              คำนำหน้านาม
+							คำนำหน้านาม
-            </div>
+						</div>
-            <div class="col-6 text-black" v-if="prefix !== null">
+						<div class="col-6 text-black" v-if="prefix !== null">
-              {{ prefix }}
+							{{ prefix }}
-            </div>
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="fullname !== null">
+						<div class="col-6 text-grey-7" v-if="fullname !== null">
-              ชื่อ-นามสกุล
+							ชื่อ-นามสกุล
-            </div>
+						</div>
-            <div class="col-6 text-black" v-if="fullname !== null">
+						<div class="col-6 text-black" v-if="fullname !== null">
-              {{ fullname }}
+							{{ fullname }}
-            </div>
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="birthdate !== null">
+						<div
-              วัน/เดือน/ปี เกิด
+							class="col-6 text-grey-7"
-            </div>
+							v-if="birthdate !== null"
-            <div class="col-6 text-black" v-if="birthdate !== null">
+						>
-              {{ birthdate }}
+							วัน/เดือน/ปี เกิด
-            </div>
+						</div>
+						<div class="col-6 text-black" v-if="birthdate !== null">
+							{{ birthdate }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="gender !== null">เพศ</div>
+						<div class="col-6 text-grey-7" v-if="gender !== null">
-            <div class="col-6 text-black" v-if="gender !== null">
+							เพศ
-              {{ gender }}
+						</div>
-            </div>
+						<div class="col-6 text-black" v-if="gender !== null">
+							{{ gender }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="position_name !== null">
+						<div
-              ตำแหน่งที่สมัคร
+							class="col-6 text-grey-7"
-            </div>
+							v-if="position_name !== null"
-            <div class="col-6 text-black" v-if="position_name !== null">
+						>
-              {{ position_name }}
+							ตำแหน่งที่สมัคร
-            </div>
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="position_name !== null"
+						>
+							{{ position_name }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="university !== null">
+						<div
-              สถานศึกษา
+							class="col-6 text-grey-7"
-            </div>
+							v-if="university !== null"
-            <div class="col-6 text-black" v-if="university !== null">
+						>
-              {{ university }}
+							สถานศึกษา
-            </div>
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="university !== null"
+						>
+							{{ university }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="degree !== null">
+						<div class="col-6 text-grey-7" v-if="degree !== null">
-              วุฒิการศึกษา
+							วุฒิการศึกษา
-            </div>
+						</div>
-            <div class="col-6 text-black" v-if="degree !== null">
+						<div class="col-6 text-black" v-if="degree !== null">
-              {{ degree }}
+							{{ degree }}
-            </div>
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="major !== null">
+						<div class="col-6 text-grey-7" v-if="major !== null">
-              สาขาวิชาเอก
+							สาขาวิชาเอก
-            </div>
+						</div>
-            <div class="col-6 text-black" v-if="major !== null">
+						<div class="col-6 text-black" v-if="major !== null">
-              {{ major }}
+							{{ major }}
-            </div>
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="major !== null">
+						<div class="col-6 text-grey-7" v-if="major !== null">
-              จำนวนครั้งที่สมัครสอบ
+							จำนวนครั้งที่สมัครสอบ
-            </div>
+						</div>
-            <div class="col-6 text-black" v-if="major !== null">
+						<div class="col-6 text-black" v-if="major !== null">
-              {{ examCount }}
+							{{ examCount }}
-            </div>
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="cert_issuedate !== null">
+						<div
-              ใบอนุญาตประกอบวิชาชีพ วัน เดือน ปีที่ได้รับ
+							class="col-6 text-grey-7"
-            </div>
+							v-if="cert_issuedate !== null"
-            <div class="col-6 text-black" v-if="cert_issuedate !== null">
+						>
-              {{ cert_issuedate }}
+							ใบอนุญาตประกอบวิชาชีพ วัน เดือน ปีที่ได้รับ
-            </div>
+						</div>
+						<div
+							class="col-6 text-black"
+							v-if="cert_issuedate !== null"
+						>
+							{{ cert_issuedate }}
+						</div>
 
-            <div class="col-6 text-grey-7" v-if="examAttribute !== null">
+						<div
-              สถานะการคัดกรองคุณสมบัติ
+							class="col-6 text-grey-7"
-            </div>
+							v-if="examAttribute !== null"
-            <div class="col-6 text-black" v-if="examAttribute !== null">
+						>
-              {{ examAttribute }}
+							สถานะการคัดกรองคุณสมบัติ
-            </div>
+						</div>
-          </div>
+						<div
-        </q-card>
+							class="col-6 text-black"
-      </div>
+							v-if="examAttribute !== null"
-      <div class="col-xs-12 col-sm-12 col-md-6">
+						>
-        <q-card
+							{{ examAttribute }}
-          bordered
+						</div>
-          flat
+					</div>
-          class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
+				</q-card>
-        >
+			</div>
-          <div class="col-12 row q-col-gutter-sm">
+			<div class="col-xs-12 col-sm-12 col-md-6">
-            <div class="col-12 text-weight-bold row items-center">
+				<q-card
-              ผลการสอบ
+					bordered
-              <q-space />
+					flat
-              <q-btn
+					class="col-xs-12 col-sm-12 col-md-6 q-px-md q-py-sm full-height"
-                color="primary"
+				>
-                flat
+					<div class="col-12 row q-col-gutter-sm">
-                round
+						<div class="col-12 text-weight-bold row items-center">
-                icon="mdi-download"
+							ผลการสอบ
-                v-if="examResultinscore === 'ผ่าน'"
+							<q-space />
-              >
+							<q-btn
-                <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+								color="primary"
-                <q-menu>
+								flat
-                  <q-list style="min-width: 100px">
+								round
-                    <q-item clickable v-close-popup @click="downloadScore()">
+								icon="mdi-download"
-                      <q-item-section class="text-primary"
+								v-if="examResultinscore === 'ผ่าน'"
-                        >ดาวน์โหลดผลคะแนน</q-item-section
+							>
-                      >
+								<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-                    </q-item>
+								<q-menu>
-                    <q-item
+									<q-list style="min-width: 100px">
-                      clickable
+										<q-item
-                      v-close-popup
+											clickable
-                      @click="downloadCertificate()"
+											v-close-popup
-                    >
+											@click="downloadScore()"
-                      <q-item-section class="text-blue"
+										>
-                        >ดาวน์โหลดเอกสารรับรอง</q-item-section
+											<q-item-section class="text-primary"
-                      >
+												>ดาวน์โหลดผลคะแนน</q-item-section
-                    </q-item>
+											>
-                  </q-list>
+										</q-item>
-                </q-menu>
+										<q-item
-              </q-btn>
+											clickable
-              <q-btn
+											v-close-popup
-                v-else
+											@click="downloadCertificate()"
-                color="blue"
+										>
-                flat
+											<q-item-section class="text-blue"
-                round
+												>ดาวน์โหลดเอกสารรับรอง</q-item-section
-                icon="mdi-download"
+											>
-                @click="downloadScore()"
+										</q-item>
-              >
+									</q-list>
-                <q-tooltip>ดาวน์โหลดผลคะแนน</q-tooltip>
+								</q-menu>
-              </q-btn>
+							</q-btn>
-            </div>
+							<q-btn
-            <div class="row items-center q-gutter-y-sm col-12">
+								v-else
-              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">
+								color="blue"
-                ประเภท
+								flat
-              </div>
+								round
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
+								icon="mdi-download"
-                คะแนนเต็ม
+								@click="downloadScore()"
-              </div>
+							>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
+								<q-tooltip>ดาวน์โหลดผลคะแนน</q-tooltip>
-                คะแนนที่ได้
+							</q-btn>
-              </div>
+						</div>
-              <div
+						<div class="row items-center q-gutter-y-sm col-12">
-                class="col-xs-2 col-sm-2 text-primary text-weight-bold"
+							<div
-              ></div>
+								class="col-xs-4 col-sm-5 text-weight-medium text-grey-7"
+							>
+								ประเภท
+							</div>
+							<div
+								class="col-xs-3 col-sm-2 text-primary text-weight-bold"
+							>
+								คะแนนเต็ม
+							</div>
+							<div
+								class="col-xs-3 col-sm-2 text-primary text-weight-bold"
+							>
+								คะแนนที่ได้
+							</div>
+							<div
+								class="col-xs-2 col-sm-2 text-primary text-weight-bold"
+							></div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ก</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								ภาค ก
-                {{ scoreAFull }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreAFull }}
-                {{ scoreA }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+								{{ scoreA }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ข</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								ภาค ข
-                {{ scoreBFull }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreBFull }}
-                {{ scoreB }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+								{{ scoreB }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ค</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								ภาค ค
-                {{ scoreCFull }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreCFull }}
-                {{ scoreC }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+								{{ scoreC }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-grey-7">รวมทั้งหมด</div>
+							<div class="col-xs-4 col-sm-5 text-grey-7">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								รวมทั้งหมด
-                {{ scoreSumFull }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-3 col-sm-2 q-pr-xs">
+								{{ scoreSumFull }}
-                {{ scoreSum }}
+							</div>
-              </div>
+							<div class="col-xs-3 col-sm-2 q-pr-xs">
-              <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
+								{{ scoreSum }}
+							</div>
+							<div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">
+								คะแนน
+							</div>
 
-              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">
+							<div
-                ผลการสอบ
+								class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm"
-              </div>
+							>
-              <div
+								ผลการสอบ
-                class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
+							</div>
-              >
+							<div
-                <span
+								class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
-                  :class="
+							>
-                    examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'
+								<span
-                  "
+									:class="
-                  >{{ examResultinscore }}</span
+										examResultinscore != 'ผ่าน'
-                >
+											? 'text-red'
-              </div>
+											: 'text-positive'
+									"
+									>{{ examResultinscore }}</span
+								>
+							</div>
 
-              <div class="col-xs-6 col-sm-5 text-grey-7">ลำดับที่สอบได้</div>
+							<div class="col-xs-6 col-sm-5 text-grey-7">
-              <div class="col-xs-6 col-sm-7 q-pr-xs">
+								ลำดับที่สอบได้
-                {{ number }}
+							</div>
-              </div>
+							<div class="col-xs-6 col-sm-7 q-pr-xs">
+								{{ number }}
+							</div>
 
-              <div class="col-xs-6 col-sm-5 text-grey-7">
+							<div class="col-xs-6 col-sm-5 text-grey-7">
-                วันหมดอายุบัญชีสอบแข่งขัน
+								วันหมดอายุบัญชีสอบแข่งขัน
-              </div>
+							</div>
-              <div class="col-xs-6 col-sm-7 q-pr-xs">
+							<div class="col-xs-6 col-sm-7 q-pr-xs">
-                {{ score_expired }}
+								{{ score_expired }}
-              </div>
+							</div>
-            </div>
+						</div>
-          </div>
+					</div>
-        </q-card>
+				</q-card>
-      </div>
+			</div>
-    </div>
+		</div>
-  </q-card>
+	</q-card>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
@@ -269,7 +336,7 @@ const examCount = ref<string>("");
 const number = ref<string>("");
 const score_expired = ref<string>("");
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const examID = ref<string>("62150001");
 const prefix = ref<string>("นาย");
 const fullname = ref<string>("เกียรติศักดิ์ บัณฑิต");
@@ -277,91 +344,95 @@ const importId = ref<string>(route.params.id as string); // Period Import Id
 const examId = ref<string>(route.params.examId as string); // เลขประจำตัวสอบ
 
 onMounted(async () => {
-  await fetchData();
+	await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+	loaderPage(true);
-  await http
+	await http
-    .get(config.API.getExamDetail(importId.value, examId.value))
+		.get(config.API.getExamDetail(importId.value, examId.value))
-    .then((res) => {
+		.then((res) => {
-      let data = res.data.result;
+			let data = res.data.result;
 
-      profile_id.value = data.profileID;
+			profile_id.value = data.profileID;
-      examID.value = data.examID;
+			examID.value = data.examID;
-      prefix.value = data.prefix;
+			prefix.value = data.prefix;
-      fullname.value = data.fullName;
+			fullname.value = data.fullName;
-      birthdate.value = data.dateOfBirth;
+			birthdate.value = data.dateOfBirth;
-      gender.value = data.gender;
+			gender.value = data.gender;
-      degree.value = data.degree;
+			degree.value = data.degree;
-      major.value = data.major;
+			major.value = data.major;
-      university.value = data.university;
+			university.value = data.university;
-      position_name.value = data.positionName;
+			position_name.value = data.positionName;
-      cert_issuedate.value = data.certificateIssueDate;
+			cert_issuedate.value = data.certificateIssueDate;
-      examAttribute.value = data.examAttribute;
+			examAttribute.value = data.examAttribute;
-      number.value = data.number;
+			number.value = data.number;
-      examCount.value = data.examCount;
+			examCount.value = data.examCount;
-      score_expired.value = data.scoreExpire;
+			score_expired.value = data.scoreExpire;
-      if (data.scoreResult != null) {
+			if (data.scoreResult != null) {
-        scoreAFull.value = data.scoreResult.scoreAFull;
+				scoreAFull.value = data.scoreResult.scoreAFull;
-        scoreA.value = data.scoreResult.scoreA;
+				scoreA.value = data.scoreResult.scoreA;
-        scoreBFull.value = data.scoreResult.scoreBFull;
+				scoreBFull.value = data.scoreResult.scoreBFull;
-        scoreB.value = data.scoreResult.scoreB;
+				scoreB.value = data.scoreResult.scoreB;
-        scoreCFull.value = data.scoreResult.scoreCFull;
+				scoreCFull.value = data.scoreResult.scoreCFull;
-        scoreC.value = data.scoreResult.scoreC;
+				scoreC.value = data.scoreResult.scoreC;
-        scoreSumFull.value = data.scoreResult.scoreSumFull;
+				scoreSumFull.value = data.scoreResult.scoreSumFull;
-        scoreSum.value = data.scoreResult.scoreSum;
+				scoreSum.value = data.scoreResult.scoreSum;
-        examResultinscore.value = data.scoreResult.examResult;
+				examResultinscore.value = data.scoreResult.examResult;
-      }
+			}
-    })
+		})
-    .catch((e) => {
+		.catch((e) => {
-      messageError($q, e);
+			messageError($q, e);
-    })
+		})
-    .finally(() => {
+		.finally(() => {
-      hideLoader();
+			loaderPage(false);
-    });
+		});
 };
 
 const downloadScore = async () => {
-  showLoader();
+	loaderPage(true);
-  await http
+	await http
-    .get(config.API.downloadScoreReport(importId.value, examId.value), {
+		.get(config.API.downloadScoreReport(importId.value, examId.value), {
-      responseType: "blob",
+			responseType: "blob",
-    })
+		})
-    .then((res) => {
+		.then((res) => {
-      var a = document.createElement("a");
+			var a = document.createElement("a");
-      a.href = URL.createObjectURL(res.data);
+			a.href = URL.createObjectURL(res.data);
-      a.download = `ผลคะแนน_${examId.value}.pdf`;
+			a.download = `ผลคะแนน_${examId.value}.pdf`;
-      // start download
+			// start download
-      a.click();
+			a.click();
-    })
+		})
-    .catch((e) => {
+		.catch((e) => {
-      messageError($q, e);
+			messageError($q, e);
-    })
+		})
-    .finally(() => {
+		.finally(() => {
-      hideLoader();
+			loaderPage(false);
-    });
+		});
 };
 
 const downloadCertificate = async () => {
-  showLoader();
+	loaderPage(true);
-  await http
+	let type = degree.value.includes("บัณฑิต") ? 2 : 1;
-    .get(config.API.downloadExamReport(importId.value, examId.value, 2), {
+	await http
-      responseType: "blob",
+		.get(
-    })
+			config.API.downloadExamReport(importId.value, examId.value, type),
-    .then((res) => {
+			{
-      var a = document.createElement("a");
+				responseType: "blob",
-      a.href = URL.createObjectURL(res.data);
+			}
-      a.download = `เอกสารรับรอง_${examId.value}.pdf`;
+		)
-      // start download
+		.then((res) => {
-      a.click();
+			var a = document.createElement("a");
-    })
+			a.href = URL.createObjectURL(res.data);
-    .catch((e) => {
+			a.download = `เอกสารรับรอง_${examId.value}.pdf`;
-      messageError($q, e);
+			// start download
-    })
+			a.click();
-    .finally(() => {
+		})
-      hideLoader();
+		.catch((e) => {
-    });
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 </script>
 

src/modules/03_recruiting/views/01_compete/Period.vue

@@ -316,10 +316,7 @@
   <q-dialog v-model="modalCandidate" persistent>
     <q-card style="width: 600px">
       <q-form ref="myFormScore">
-        <DialogHeader
+        <DialogHeader :tittle="textTittleCandidate" :close="clickCloseCandidate" />
-          :tittle="textTittleCandidate"
-          :close="clickCloseCandidate"
-        />
         <q-separator />
         <q-card-section>
           <div class="col-12 row items-center q-col-gutter-sm">
@@ -382,7 +379,7 @@ const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
 const order = ref<number>(1);
 const mixin = useCounterMixin();
-const { success, dateToISO, dateText, showLoader, hideLoader } = mixin;
+const { success, dateToISO, dateText } = mixin;
 const files = ref<any>(null);
 const files_score = ref<any>(null);
 const files_candidate = ref<any>(null);
@@ -554,7 +551,7 @@ const visibleColumnsHistory = ref<String[]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
@@ -567,7 +564,7 @@ const textDate = (value: Date) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getCandidates)
     .then((res) => {
@@ -589,7 +586,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -623,7 +620,7 @@ const clickEditPeriod = (id: string) => {
 
 const clickHistory = async (id: string) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getImportHistory(id))
     .then((res) => {
@@ -652,7 +649,7 @@ const clickHistory = async (id: string) => {
       statusCode.value = e.response.data.status;
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -667,7 +664,7 @@ const clickDelete = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.deleteCandidates(id))
         .then((res) => {
@@ -678,7 +675,7 @@ const clickDelete = (id: string) => {
           messageError($q, e);
         })
         .finally(() => {
-          hideLoader();
+          loaderPage(false);
         });
     })
     .onCancel(() => {})
@@ -707,7 +704,7 @@ const clickCloseCandidate = async () => {
 const checkSaveCandidate = async () => {
   const fd = new FormData();
   fd.append("attachment", files_candidate.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.uploadCandidates(selected_row_id.value), fd)
     .then((res) => {
@@ -720,14 +717,14 @@ const checkSaveCandidate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const checkSaveScore = async () => {
   const fd = new FormData();
   fd.append("attachment", files_score.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveScores(selected_row_id.value), fd)
     .then((res) => {
@@ -740,7 +737,7 @@ const checkSaveScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -750,7 +747,7 @@ const checkSave = async () => {
   fd.append("year", year.value.toString());
   fd.append("order", order.value.toString());
   fd.append("name", name.value);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveCandidates, fd)
     .then((res) => {
@@ -762,7 +759,7 @@ const checkSave = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/03_recruiting/views/01_compete/PeriodAdd.vue

@@ -112,8 +112,9 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateExam)"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -149,8 +150,13 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="dateThaiRange(dateAnnouncement)"
+                  :model-value="
+                    dateAnnouncement != null
+                      ? dateThaiRange(dateAnnouncement)
+                      : null
+                  "
                   :label="`${'วันที่ประกาศ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -186,8 +192,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="dateThaiRange(dateRegister)"
+                  :model-value="
+                    dateRegister != null ? dateThaiRange(dateRegister) : null
+                  "
                   :label="`${'วันที่สมัคร'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -223,8 +232,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="dateThaiRange(datePayment)"
+                  :model-value="
+                    datePayment != null ? dateThaiRange(datePayment) : null
+                  "
                   :label="`${'วันที่ชำระเงิน'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -260,8 +272,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateAnnounce)"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
                   :label="`${'วันประกาศผลสอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -669,8 +684,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, notifyError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, notifyError } = mixin;
-  mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -679,11 +693,11 @@ const announcementExam = ref<boolean>(true);
 const fee = ref<number>(0);
 const round = ref<number>(1);
 const yearly = ref<number>(new Date().getFullYear());
-const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
-const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
-const dateExam = ref<Date>(new Date()); //วันที่สอบ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
-const dateAnnounce = ref<Date>(new Date()); //วันที่ประกาศผล
+const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
 const positionPathOptions = ref<DataOption[]>([]);
 const organizationShortName = ref<DataOption>({ id: "", name: "" });
 const organizationName = ref<DataOption>({ id: "", name: "" });
@@ -766,7 +780,7 @@ watch(organizationName, (count: DataOption, prevCount: DataOption) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
@@ -781,7 +795,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPeriodById(id.value))
     .then((res) => {
@@ -794,22 +808,27 @@ const fetchData = async () => {
       round.value = data.order;
       yearly.value = data.year;
       fee.value = data.fee;
-      dateAnnouncement.value = [
+      dateAnnouncement.value =
-        new Date(data.announcementStartDate),
+        data.announcementStartDate != null && data.announcementEndDate != null
-        new Date(data.announcementEndDate),
+          ? [
-      ];
+              new Date(data.announcementStartDate),
-      dateExam.value = new Date(data.examDate);
+              new Date(data.announcementEndDate),
-      dateRegister.value = [
+            ]
-        new Date(data.registerStartDate),
+          : null;
-        new Date(data.registerEndDate),
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
-      ];
+      dateRegister.value =
-      datePayment.value = [
+        data.registerStartDate != null && data.registerEndDate != null
-        new Date(data.paymentStartDate),
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
-        new Date(data.paymentEndDate),
+          : null;
-      ];
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
+
       editor.value = data.detail;
       note.value = data.note;
-      dateAnnounce.value = new Date(data.announcementDate);
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
 
       fileDocs.value = files;
       fileImgs.value = images;
@@ -818,7 +837,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -845,7 +864,7 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodRecruitDoc(id.value), formData)
       .then((res) => {})
@@ -853,7 +872,7 @@ const uploadDocData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
         success($q, "บันทึกข้อมูลสำเร็จ");
         clickBack();
       });
@@ -869,7 +888,7 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodRecruitImg(id.value), formData)
       .then((res) => {})
@@ -877,7 +896,7 @@ const uploadImgData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -923,27 +942,38 @@ const checkSave = async () => {
 
 const sendData = () => {
   const valueData: RequestPeriodCompete = {
-    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
+    announcementEndDate:
-    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
+      dateAnnouncement.value !== null
-    examDate: dateToISO(dateExam.value),
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
     detail: editor.value,
     fee: fee.value,
     id: "",
     name: name.value,
     note: note.value,
-    paymentEndDate: dateToISO(datePayment.value[1]),
+    paymentEndDate:
-    paymentStartDate: dateToISO(datePayment.value[0]),
+      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
-    registerEndDate: dateToISO(dateRegister.value[1]),
+    paymentStartDate:
-    registerStartDate: dateToISO(dateRegister.value[0]),
+      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+    registerEndDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
     order: round.value,
     year: yearly.value,
-    announcementDate: dateToISO(dateAnnounce.value),
+    announcementDate:
+      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
   };
   return valueData;
 };
 
 const deleteDocData = async (docId: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodDeleteDoc(docId))
     .then(async () => {
@@ -953,12 +983,12 @@ const deleteDocData = async (docId: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const deleteImgData = async (docId: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodDeleteImg(docId))
     .then(async () => {
@@ -968,12 +998,12 @@ const deleteImgData = async (docId: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const addData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.savePeriod, sendData())
     .then(async (res) => {
@@ -986,12 +1016,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.editPeriod(id), sendData())
     .then(async () => {
@@ -1002,7 +1032,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/views/02_qualify/DisableDetail.vue

@@ -129,7 +129,7 @@ const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const importId = ref<string>(route.params.id as string); // Period Import Id
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([
   "examID",
@@ -317,12 +317,12 @@ const clickDetail = (examID: string) => {
 };
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
 const downloadExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportDisableExam(importId.value), {
       responseType: "blob",
@@ -338,12 +338,12 @@ const downloadExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportDisablePassExam(importId.value), {
       responseType: "blob",
@@ -359,12 +359,12 @@ const downloadPassExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadPassResultExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.exportDisablePassResultExam(importId.value), {
       responseType: "blob",
@@ -380,12 +380,12 @@ const downloadPassResultExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.getDisableExamResultById(importId.value), {
       examAttribute: "",
@@ -416,7 +416,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue

@@ -26,16 +26,12 @@
               {{ profile_id }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="prefix !== null">
+            <div class="col-6 text-grey-7" v-if="prefix !== null">คำนำหน้านาม</div>
-              คำนำหน้านาม
-            </div>
             <div class="col-6 text-black" v-if="prefix !== null">
               {{ prefix }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="fullname !== null">
+            <div class="col-6 text-grey-7" v-if="fullname !== null">ชื่อ-นามสกุล</div>
-              ชื่อ-นามสกุล
-            </div>
             <div class="col-6 text-black" v-if="fullname !== null">
               {{ fullname }}
             </div>
@@ -59,23 +55,17 @@
               {{ position_name }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="university !== null">
+            <div class="col-6 text-grey-7" v-if="university !== null">สถานศึกษา</div>
-              สถานศึกษา
-            </div>
             <div class="col-6 text-black" v-if="university !== null">
               {{ university }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="degree !== null">
+            <div class="col-6 text-grey-7" v-if="degree !== null">วุฒิการศึกษา</div>
-              วุฒิการศึกษา
-            </div>
             <div class="col-6 text-black" v-if="degree !== null">
               {{ degree }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="major !== null">
+            <div class="col-6 text-grey-7" v-if="major !== null">สาขาวิชาเอก</div>
-              สาขาวิชาเอก
-            </div>
             <div class="col-6 text-black" v-if="major !== null">
               {{ major }}
             </div>
@@ -128,11 +118,7 @@
                         >ดาวน์โหลดผลคะแนน</q-item-section
                       >
                     </q-item>
-                    <q-item
+                    <q-item clickable v-close-popup @click="downloadCertificate()">
-                      clickable
-                      v-close-popup
-                      @click="downloadCertificate()"
-                    >
                       <q-item-section class="text-blue"
                         >ดาวน์โหลดเอกสารรับรอง</q-item-section
                       >
@@ -152,18 +138,12 @@
               </q-btn>
             </div>
             <div class="row items-center q-gutter-y-sm col-12">
-              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">
+              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
-                ประเภท
+              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนเต็ม</div>
-              </div>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
-                คะแนนเต็ม
-              </div>
               <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
                 คะแนนที่ได้
               </div>
-              <div
+              <div class="col-xs-2 col-sm-2 text-primary text-weight-bold"></div>
-                class="col-xs-2 col-sm-2 text-primary text-weight-bold"
-              ></div>
 
               <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ก</div>
               <div class="col-xs-3 col-sm-2 q-pr-xs">
@@ -201,16 +181,10 @@
               </div>
               <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
 
-              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">
+              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">ผลการสอบ</div>
-                ผลการสอบ
+              <div class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1">
-              </div>
-              <div
-                class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
-              >
                 <span
-                  :class="
+                  :class="examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'"
-                    examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'
-                  "
                   >{{ examResultinscore }}</span
                 >
               </div>
@@ -248,7 +222,7 @@ const dataStore = useDataStore();
 const router = useRouter();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
+const { messageError } = mixin;
 const { loaderPage } = dataStore;
 const date = ref<any>();
 const profile_id = ref<string>("");
@@ -289,7 +263,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisableExamDetail(importId.value, examId.value))
     .then((res) => {
@@ -329,12 +303,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadScore = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.downloadDisableScoreReport(importId.value, examId.value), {
       responseType: "blob",
@@ -350,19 +324,16 @@ const downloadScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadCertificate = async () => {
-  showLoader();
+  loaderPage(true);
   await http
-    .get(
+    .get(config.API.downloadDisableExamReport(importId.value, examId.value, 2), {
-      config.API.downloadDisableExamReport(importId.value, examId.value, 2),
+      responseType: "blob",
-      {
+    })
-        responseType: "blob",
-      }
-    )
     .then((res) => {
       var a = document.createElement("a");
       a.href = URL.createObjectURL(res.data);
@@ -374,7 +345,7 @@ const downloadCertificate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue

@@ -382,7 +382,7 @@ const name = ref<string>("");
 const year = ref<number>(new Date().getFullYear() + 543);
 const round = ref<number>(1);
 const mixin = useCounterMixin();
-const { success, dateText, messageError, showLoader, hideLoader } = mixin;
+const { success, dateText, messageError } = mixin;
 const files = ref<any>(null);
 const files_score = ref<any>(null);
 const files_candidate = ref<any>(null);
@@ -549,7 +549,7 @@ const visibleColumnsHistory = ref<String[]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
@@ -570,7 +570,7 @@ const textDate = (value: Date) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisableCandidates)
     .then((res) => {
@@ -592,7 +592,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -618,7 +618,7 @@ const clickEditPeriod = (id: string) => {
 
 const clickHistory = async (id: string) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisableImportHistory(id))
     .then((res) => {
@@ -644,7 +644,7 @@ const clickHistory = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -659,7 +659,7 @@ const clickDelete = (id: string) => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.deleteDisableCandidates(id))
         .then((res) => {
@@ -670,7 +670,7 @@ const clickDelete = (id: string) => {
           messageError($q, e);
         })
         .finally(() => {
-          hideLoader();
+          loaderPage(false);
         });
     })
     .onCancel(() => {})
@@ -699,7 +699,7 @@ const clickCloseCandidate = async () => {
 const checkSaveCandidate = async () => {
   const fd = new FormData();
   fd.append("attachment", files_candidate.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
     .then((res) => {
@@ -712,14 +712,14 @@ const checkSaveCandidate = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const checkSaveScore = async () => {
   const fd = new FormData();
   fd.append("attachment", files_score.value[0]);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveDisableScores(selected_row_id.value), fd)
     .then((res) => {
@@ -732,7 +732,7 @@ const checkSaveScore = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -742,7 +742,7 @@ const checkSave = async () => {
   fd.append("year", year.value.toString());
   fd.append("round", round.value.toString());
   fd.append("name", name.value);
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveDisableCandidates, fd)
     .then((res) => {
@@ -754,7 +754,7 @@ const checkSave = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 </script>

src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue

@@ -115,8 +115,9 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateExam)"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -154,6 +155,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -191,6 +193,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -228,6 +231,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -263,8 +267,11 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateAnnounce)"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
                   :label="`${'วันประกาศผลสอบ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -671,15 +678,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const {
+const { date2Thai, success, dateToISO, notifyError, messageError } = mixin;
-  date2Thai,
-  success,
-  dateToISO,
-  notifyError,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -688,11 +687,11 @@ const announcementExam = ref<boolean>(true);
 const fee = ref<number>(0);
 const round = ref<number>(1);
 const yearly = ref<number>(new Date().getFullYear());
-const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
-const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
-const dateExam = ref<Date>(new Date()); //วันที่สอบ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
-const dateAnnounce = ref<Date>(new Date()); //วันที่ประกาศผล
+const dateAnnounce = ref<Date | null>(null); //วันที่ประกาศผล
 const positionPathOptions = ref<DataOption[]>([]);
 const organizationShortName = ref<DataOption>({ id: "", name: "" });
 const organizationName = ref<DataOption>({ id: "", name: "" });
@@ -727,7 +726,7 @@ onMounted(async () => {
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
-    hideLoader();
+    loaderPage(false);
     await fetchData();
   } else {
     edit.value = false;
@@ -739,7 +738,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getDisablePeriodById(id.value))
     .then((res) => {
@@ -749,22 +748,26 @@ const fetchData = async () => {
       round.value = data.round;
       yearly.value = data.year;
       fee.value = data.fee;
-      dateAnnouncement.value = [
+      dateAnnouncement.value =
-        new Date(data.announcementStartDate),
+        data.announcementStartDate != null && data.announcementEndDate != null
-        new Date(data.announcementEndDate),
+          ? [
-      ];
+              new Date(data.announcementStartDate),
-      dateExam.value = new Date(data.examDate);
+              new Date(data.announcementEndDate),
-      dateRegister.value = [
+            ]
-        new Date(data.registerStartDate),
+          : null;
-        new Date(data.registerEndDate),
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
-      ];
+      dateRegister.value =
-      datePayment.value = [
+        data.registerStartDate != null && data.registerEndDate != null
-        new Date(data.paymentStartDate),
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
-        new Date(data.paymentEndDate),
+          : null;
-      ];
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
       editor.value = data.detail;
       note.value = data.note;
-      dateAnnounce.value = new Date(data.announcementDate);
+      dateAnnounce.value =
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
       fileDocs.value = data.documents;
       fileImgs.value = data.images;
     })
@@ -772,7 +775,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -796,27 +799,38 @@ const checkSave = async () => {
 
 const sendData = () => {
   const valueData: RequestPeriodDisable = {
-    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
+    announcementEndDate:
-    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
+      dateAnnouncement.value !== null
-    examDate: dateToISO(dateExam.value),
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value !== null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
     detail: editor.value,
     fee: fee.value,
     id: "",
     name: name.value,
     note: note.value,
-    paymentEndDate: dateToISO(datePayment.value[1]),
+    paymentEndDate:
-    paymentStartDate: dateToISO(datePayment.value[0]),
+      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
-    registerEndDate: dateToISO(dateRegister.value[1]),
+    paymentStartDate:
-    registerStartDate: dateToISO(dateRegister.value[0]),
+      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+    registerEndDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
     round: round.value,
     year: yearly.value,
-    announcementDate: dateToISO(dateAnnounce.value),
+    announcementDate:
+      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
   };
   return valueData;
 };
 
 const addData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.saveDisablePeriod, sendData())
     .then(async (res) => {
@@ -831,12 +845,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.editDisablePeriod(id), sendData())
     .then(async () => {
@@ -849,7 +863,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -876,7 +890,7 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamImg(id.value), formData)
       .then((res) => {})
@@ -884,7 +898,7 @@ const uploadImgData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -893,7 +907,7 @@ const deleteDocData = async (docId: string) => {
   const params = {
     documentId: docId,
   };
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodExamDoc(id.value.toString()), {
       params,
@@ -906,7 +920,7 @@ const deleteDocData = async (docId: string) => {
     })
     .finally(async () => {
       await fetchData();
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -937,7 +951,7 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamDoc(id.value), formData)
       .then((res) => {})
@@ -945,7 +959,7 @@ const uploadDocData = async () => {
         messageError($q, e);
       })
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   } else {
     clickBack();
@@ -956,7 +970,7 @@ const uploadDocData = async () => {
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+const dateThaiRange = (val: [Date, Date] | null) => {
   if (val === null) {
     return "";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {

src/modules/03_recruiting/views/02_qualify/ExamForm.vue

@@ -145,7 +145,7 @@ const { loaderPage } = dataStore;
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, dateToISO, messageError, showLoader, hideLoader } = mixin;
+const { success, dateToISO, messageError } = mixin;
 const route = useRoute();
 const examId = ref<string>(route.params.examId.toString());
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -163,7 +163,7 @@ onMounted(async () => {
 });
 
 const fetchStatus = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateId(candidateId.value))
     .then((res) => {
@@ -174,12 +174,12 @@ const fetchStatus = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const confirm = async (status: boolean, reason: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateCheckRegister(candidateId.value), {
       status: status,
@@ -190,14 +190,14 @@ const confirm = async (status: boolean, reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       success($q, "ตรวจสอบข้อมูลสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
 };
 
 const reject = async (reason: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateRejectRegister(candidateId.value), {
       reason: reason,
@@ -207,7 +207,7 @@ const reject = async (reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       success($q, "ตรวจสอบข้อมูลสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });
@@ -253,7 +253,7 @@ const clickSave = async () => {
                       type.value = defaultOccupation.value.employee;
                     if (defaultOccupation.value.status == "other")
                       type.value = defaultOccupation.value.other;
-                    showLoader();
+                    loaderPage(true);
                     await http
                       .post(config.API.candidateId(candidateId.value), {
                         prefixId: defaultInformation.value.prefixId,
@@ -329,7 +329,7 @@ const clickSave = async () => {
                         messageError($q, e);
                       })
                       .finally(async () => {
-                        hideLoader();
+                        loaderPage(false);
                       });
                   }
                 });

src/modules/03_recruiting/views/02_qualify/Manage.vue

@@ -65,7 +65,7 @@ const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError } = mixin;
 const rows = ref<ResponsePeriodExam[]>([]);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -163,12 +163,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamType("exam"))
     .then((res) => {
@@ -184,20 +184,24 @@ const fetchData = async () => {
           yearly: r.year,
           fee: r.fee,
           announcementExam: r.announcementExam,
-          dateAnnounce: new Date(r.announcementDate),
+          dateAnnounce:
-          dateAnnouncement: [
+            r.announcementDate !== null ? new Date(r.announcementDate) : null,
-            new Date(r.announcementStartDate),
+          dateAnnouncement:
-            new Date(r.announcementEndDate),
+            r.announcementStartDate !== null && r.announcementEndDate !== null
-          ],
+              ? [
-          dateRegister: [
+                  new Date(r.announcementStartDate),
-            new Date(r.registerStartDate),
+                  new Date(r.announcementEndDate),
-            new Date(r.registerEndDate),
+                ]
-          ],
+              : null,
-          dateExam: new Date(r.examDate),
+          dateRegister:
-          datePayment: [
+            r.registerStartDate !== null && r.registerEndDate !== null
-            new Date(r.paymentStartDate),
+              ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
-            new Date(r.paymentEndDate),
+              : null,
-          ],
+          dateExam: r.examDate !== null ? new Date(r.examDate) : null,
+          datePayment:
+            r.paymentStartDate !== null && r.paymentEndDate !== null
+              ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
+              : null,
           organizationName: {
             id: r.organizationId,
             name: r.organizationName,
@@ -219,7 +223,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/views/02_qualify/Payment.vue

@@ -288,7 +288,7 @@ const fee = ref<number>();
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { success, messageError, showLoader, hideLoader } = mixin;
+const { success, messageError } = mixin;
 const route = useRoute();
 const examId = ref<string>(route.params.examId.toString());
 const candidateId = ref<string>(route.params.candidateId.toString());
@@ -308,13 +308,13 @@ const props = defineProps({
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchPaymentExam();
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidatePayment(candidateId.value))
     .then((res) => {
@@ -325,12 +325,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchPaymentExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamPayment(examId.value))
     .then((res) => {
@@ -342,12 +342,12 @@ const fetchPaymentExam = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const confirm = async (status: boolean, reason: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.candidateCheckPayment(candidateId.value), {
       status: status,
@@ -358,7 +358,7 @@ const confirm = async (status: boolean, reason: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       success($q, "ตรวจสอบข้อมูลชำระเงินสำเร็จ");
       router.push(`/qualify/manage/${examId.value}`);
     });

src/modules/03_recruiting/views/02_qualify/Period.vue

@@ -102,14 +102,7 @@ const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
-const {
+const { date2Thai, success, typeCategoryExam, messageError } = mixin;
-  date2Thai,
-  success,
-  typeCategoryExam,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
@@ -230,12 +223,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamType("all"))
     .then((res) => {
@@ -255,6 +248,7 @@ const fetchData = async () => {
                 id: r.typeId,
                 name: r.typeName,
               },
+              highDegree: r.highDegree,
             });
           });
           const bankData: ResponsePayment[] = [];
@@ -268,7 +262,8 @@ const fetchData = async () => {
           });
           result.push({
             id: r.id,
-            dateAnnounce: new Date(r.announcementDate),
+            dateAnnounce:
+              r.announcementDate !== null ? new Date(r.announcementDate) : null,
             announcementExam: r.announcementExam,
             name: r.name,
             checkDocument: r.checkDocument,
@@ -276,19 +271,22 @@ const fetchData = async () => {
             round: r.round,
             yearly: r.year,
             fee: r.fee,
-            dateAnnouncement: [
+            dateAnnouncement:
-              new Date(r.announcementStartDate),
+              r.announcementStartDate !== null && r.announcementEndDate !== null
-              new Date(r.announcementEndDate),
+                ? [
-            ],
+                    new Date(r.announcementStartDate),
-            dateExam: new Date(r.examDate),
+                    new Date(r.announcementEndDate),
-            dateRegister: [
+                  ]
-              new Date(r.registerStartDate),
+                : null,
-              new Date(r.registerEndDate),
+            dateExam: r.examDate !== null ? new Date(r.examDate) : null,
-            ],
+            dateRegister:
-            datePayment: [
+              r.registerStartDate !== null && r.registerEndDate !== null
-              new Date(r.paymentStartDate),
+                ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
-              new Date(r.paymentEndDate),
+                : null,
-            ],
+            datePayment:
+              r.paymentStartDate !== null && r.paymentEndDate !== null
+                ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
+                : null,
             organizationName: {
               id: r.organizationId,
               name: r.organizationName,
@@ -312,7 +310,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -342,7 +340,7 @@ const clickAdd = () => {
 };
 
 const deleteData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodExamId(id))
     .then((res) => {
@@ -352,7 +350,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       await fetchData();
     });
 };

src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue

@@ -125,8 +125,10 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateExam)"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
+                  clearable
+                  @clear="clearDateExam"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -164,6 +166,7 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -183,6 +186,7 @@
               v-model="dateRegister"
               :locale="'th'"
               autoApply
+              clearValue
               borderless
               range
               :enableTimePicker="false"
@@ -201,6 +205,8 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
+                  clearable
+                  @clear="clearDateRegister"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -238,6 +244,8 @@
                   class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
+                  clearable
+                  @clear="clearDatePayment"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -272,8 +280,12 @@
                   outlined
                   dense
                   class="full-width datepicker q-mb-md"
-                  :model-value="date2Thai(dateAnnounce)"
+                  :model-value="
+                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
+                  "
                   :label="`${'วันประกาศผลสอบ'}`"
+                  clearable
+                  @clear="clearDateAnnounce"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -417,6 +429,13 @@
                         </template>
                       </selector>
                     </q-td>
+                    <q-td key="highDegree" :props="props">
+                      <q-checkbox
+                        v-model="props.row.highDegree"
+                        label="ปริญญาขึ้นไป"
+                        color="teal"
+                      />
+                    </q-td>
                     <q-td key="type" :props="props">
                       <selector
                         class=""
@@ -976,8 +995,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const myForm = ref<QForm | null>(null); //form data input
 const name = ref<string>("");
 const note = ref<string>("");
@@ -991,11 +1009,11 @@ const yearly = ref<number>(new Date().getFullYear());
 const nameRaw = ref<number | null>(null);
 const roundRaw = ref<number | null>(null);
 const yearlyRaw = ref<number | null>(null);
-const dateRegister = ref<[Date, Date]>([new Date(), new Date()]); //วันที่สมัคร
+const dateRegister = ref<[Date, Date] | null>(null); //วันที่สมัคร
-const datePayment = ref<[Date, Date]>([new Date(), new Date()]); //วันที่จ่ายเงิน
+const datePayment = ref<[Date, Date] | null>(null); //วันที่จ่ายเงิน
-const dateAnnouncement = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ประกาศ
+const dateAnnouncement = ref<[Date, Date] | null>(null); //วันที่ประกาศ
-const dateAnnounce = ref<Date>(new Date()); //วันประกาศผลสอบ
+const dateAnnounce = ref<Date | null>(null); //วันประกาศผลสอบ
-const dateExam = ref<Date>(new Date()); //วันที่สอบ
+const dateExam = ref<Date | null>(null); //วันที่สอบ
 const myFormPayment = ref<any>();
 const myFormPosition = ref<any>();
 const positionPathOptions = ref<DataOption[]>([]);
@@ -1007,6 +1025,10 @@ const examTypeOptions = [
   { name: "ทั่วไป", id: "normol" },
   { name: "แพทย์", id: "docter" },
 ];
+const educateOptions = [
+  { name: "ต่ำกว่าปริญญาตรี", id: "low" },
+  { name: "ปริญญาขึ้นไป", id: "normol" },
+];
 const category = ref<string>("");
 const categoryOptions = [
   { name: "สำนักอนามัย", id: "hygiene" },
@@ -1065,7 +1087,11 @@ const columnsPayment = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsPosition = ref<String[]>(["position", "type"]);
+const visibleColumnsPosition = ref<String[]>([
+  "position",
+  "type",
+  "highDegree",
+]);
 const columnsPosition = ref<QTableProps["columns"]>([
   {
     name: "position",
@@ -1078,6 +1104,17 @@ const columnsPosition = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "highDegree",
+    align: "left",
+    label: "วุฒิการศึกษาปริญญาขึ้นไป",
+    sortable: true,
+    field: "highDegree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "type",
     align: "left",
@@ -1100,7 +1137,7 @@ watch(organizationName, (count: DataOption, prevCount: DataOption) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   if (route.params.id != undefined) {
     edit.value = true;
     id.value = route.params.id.toString();
@@ -1123,7 +1160,7 @@ const clickBack = () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamId(id.value))
     .then((res) => {
@@ -1140,6 +1177,7 @@ const fetchData = async () => {
             id: r.typeId,
             name: r.typeName,
           },
+          highDegree: r.highDegree,
         });
       });
       const bankData: ResponsePayment[] = [];
@@ -1162,20 +1200,24 @@ const fetchData = async () => {
       roundRaw.value = data.round;
       yearlyRaw.value = data.year;
       fee.value = data.fee;
-      dateAnnounce.value = new Date(data.announcementDate);
+      dateAnnounce.value =
-      dateAnnouncement.value = [
+        data.announcementDate != null ? new Date(data.announcementDate) : null;
-        new Date(data.announcementStartDate),
+      dateAnnouncement.value =
-        new Date(data.announcementEndDate),
+        data.announcementStartDate != null && data.announcementEndDate != null
-      ];
+          ? [
-      dateExam.value = new Date(data.examDate);
+              new Date(data.announcementStartDate),
-      dateRegister.value = [
+              new Date(data.announcementEndDate),
-        new Date(data.registerStartDate),
+            ]
-        new Date(data.registerEndDate),
+          : null;
-      ];
+      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
-      datePayment.value = [
+      dateRegister.value =
-        new Date(data.paymentStartDate),
+        data.registerStartDate != null && data.registerEndDate != null
-        new Date(data.paymentEndDate),
+          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
-      ];
+          : null;
+      datePayment.value =
+        data.paymentStartDate != null && data.paymentEndDate != null
+          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
+          : null;
       organizationShortName.value = {
         id: data.organizationCodeId,
         name: data.organizationCodeName,
@@ -1197,7 +1239,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1205,7 +1247,7 @@ const fetchData = async () => {
  * get รายการ รหัสหน่วยงาน
  */
 const fetchOrganizationShortName = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organizationShortName)
     .then((res) => {
@@ -1223,7 +1265,7 @@ const fetchOrganizationShortName = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1231,7 +1273,7 @@ const fetchOrganizationShortName = async () => {
  * get รายการ หน่วยงาน
  */
 const fetchOrganizationOrganization = async (val: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.organization)
     .then((res) => {
@@ -1249,7 +1291,7 @@ const fetchOrganizationOrganization = async (val: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1257,7 +1299,7 @@ const fetchOrganizationOrganization = async (val: string) => {
  * get รายการ ตำแหน่งในสายงาน
  */
 const fetchPositionPath = async (val: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -1275,7 +1317,7 @@ const fetchPositionPath = async (val: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1321,13 +1363,21 @@ const sendData = () => {
       positionName: r.position.name,
       typeId: r.type.id,
       typeName: r.type.name,
+      highDegree: r.highDegree ? true : false,
     });
   });
   const valueData: RequestPeriodExam = {
-    announcementDate: dateToISO(dateAnnounce.value),
+    announcementDate:
-    announcementEndDate: dateToISO(dateAnnouncement.value[1]),
+      dateAnnounce.value != null ? dateToISO(dateAnnounce.value) : null,
-    announcementStartDate: dateToISO(dateAnnouncement.value[0]),
+    announcementEndDate:
-    examDate: dateToISO(dateExam.value),
+      dateAnnouncement.value != null
+        ? dateToISO(dateAnnouncement.value[1])
+        : null,
+    announcementStartDate:
+      dateAnnouncement.value != null
+        ? dateToISO(dateAnnouncement.value[0])
+        : null,
+    examDate: dateExam.value != null ? dateToISO(dateExam.value) : null,
     bankExam: rowsPayment.value,
     checkDisability: checkDisability.value,
     announcementExam: announcementExam.value,
@@ -1342,12 +1392,16 @@ const sendData = () => {
     organizationCodeName: organizationShortName.value?.name,
     organizationId: organizationName.value?.id,
     organizationName: organizationName.value?.name,
-    paymentEndDate: dateToISO(datePayment.value[1]),
+    paymentEndDate:
+      datePayment.value != null ? dateToISO(datePayment.value[1]) : null,
     paymentKrungThai: pay.value,
-    paymentStartDate: dateToISO(datePayment.value[0]),
+    paymentStartDate:
+      datePayment.value != null ? dateToISO(datePayment.value[0]) : null,
     positionExam: positionData,
-    registerEndDate: dateToISO(dateRegister.value[1]),
+    registerEndDate:
-    registerStartDate: dateToISO(dateRegister.value[0]),
+      dateRegister.value != null ? dateToISO(dateRegister.value[1]) : null,
+    registerStartDate:
+      dateRegister.value != null ? dateToISO(dateRegister.value[0]) : null,
     round: round.value,
     year: yearly.value,
     category: category.value,
@@ -1356,7 +1410,7 @@ const sendData = () => {
 };
 
 const addData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.periodExam, sendData())
     .then(async (res) => {
@@ -1371,12 +1425,12 @@ const addData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.periodExamId(id), sendData())
     .then(async (res) => {
@@ -1389,7 +1443,7 @@ const editData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1416,13 +1470,13 @@ const uploadDocData = async () => {
     fileDocDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamDoc(id.value), formData)
       .then((res) => {})
       .catch((e) => {})
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   } else {
     clickBack();
@@ -1452,13 +1506,13 @@ const uploadImgData = async () => {
     fileImgDataUpload.value.forEach((file: any) => {
       formData.append("", file);
     });
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.periodExamImg(id.value), formData)
       .then((res) => {})
       .catch((e) => {})
       .finally(async () => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -1467,7 +1521,7 @@ const deleteDocData = async (docId: string) => {
   const params = {
     documentId: docId,
   };
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.periodExamDoc(id.value.toString()), {
       params,
@@ -1510,6 +1564,7 @@ const clickAddPosition = () => {
         id: "00000000-0000-0000-0000-000000000000",
         position: { id: "", name: "" },
         type: { id: "normol", name: "ทั่วไป" },
+        highDegree: false,
       });
     }
   });
@@ -1526,7 +1581,7 @@ const clickDeletePosition = (row: any) => {
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+const dateThaiRange = (val: [Date, Date] | null) => {
   if (val === null) {
     return "";
   } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
@@ -1535,6 +1590,22 @@ const dateThaiRange = (val: [Date, Date]) => {
     return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
   }
 };
+
+const clearDateExam = () => {
+  dateExam.value = null;
+};
+
+const clearDateRegister = () => {
+  dateRegister.value = null;
+};
+
+const clearDatePayment = () => {
+  datePayment.value = null;
+};
+
+const clearDateAnnounce = () => {
+  dateAnnounce.value = null;
+};
 </script>
 
 <style></style>

src/modules/03_recruiting/views/02_qualify/manageDetail.vue

@@ -11,7 +11,11 @@
       @click="router.go(-1)"
     />
     {{ name }}
-    {{ `ครั้งที่${round}/${yearly == null ? "" : yearly + 543}` }}
+    {{
+      `ครั้งที่${round == null ? "" : round}/${
+        yearly == null ? "" : yearly + 543
+      }`
+    }}
     <q-space />
     <q-btn
       @click="visible = !visible"
@@ -221,6 +225,9 @@
             >
               {{ statusCandidate(props.row.status) }}
             </div>
+            <div v-else-if="col.name == 'registerDate'" class="table_ellipsis">
+              {{ col.value }}
+            </div>
             <div v-else class="table_ellipsis">
               {{ col.value }}
             </div>
@@ -282,14 +289,7 @@ import { useQuasar } from "quasar";
 
 const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
+const { genColor15, dateToISO, date2Thai, messageError } = mixin;
-  genColor15,
-  dateToISO,
-  date2Thai,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const router = useRouter();
@@ -314,6 +314,7 @@ const initialPagination = ref<Pagination>({
 const visibleColumns = ref<String[]>([
   "no",
   "number",
+  "registerDate",
   "examIdenNumber",
   "seatNumber",
   "resultB",
@@ -451,6 +452,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px;",
     style: "font-size: 14px; ",
   },
+  {
+    name: "registerDate",
+    align: "left",
+    label: "วันเและเวลาที่สมัคร",
+    sortable: true,
+    field: "registerDate",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
   {
     name: "status",
     align: "left",
@@ -472,7 +482,7 @@ watch(status, (count: String, prevCount: String) => {
 });
 
 onMounted(async () => {
-  hideLoader();
+  loaderPage(false);
   await fetchDataCom();
 });
 
@@ -491,7 +501,7 @@ const fetchDataCom = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.candidateOfPeriodExam(status.value, examId.value))
     .then((res) => {
@@ -504,6 +514,7 @@ const fetchData = async () => {
           avatar: r.profileImg != null ? r.profileImg.detail : "",
           citizenId: r.citizenId,
           number: r.number,
+          registerDate: r.registerDate,
           examIdenNumber: r.examIdenNumber,
           seatNumber: r.seatNumber,
           resultC: r.resultC,
@@ -518,12 +529,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchPeriodExam = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.periodExamStatus(examId.value))
     .then((res) => {
@@ -538,7 +549,7 @@ const fetchPeriodExam = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -547,7 +558,7 @@ const fetchPeriodExam = async () => {
  */
 const fetchDataSummary = async () => {
   dataNum.value = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.countDashbordPeriodExam(examId.value))
     .then((res) => {
@@ -565,12 +576,12 @@ const fetchDataSummary = async () => {
       dataNum.value = [];
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const downloadFileDashboard = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(
       config.API.periodExamDownloadDashboard(examId.value),
@@ -594,7 +605,7 @@ const downloadFileDashboard = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/03_recruiting/views/03_editor/index.vue

@@ -578,7 +578,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const store = useDataStore();
 const { loaderPage } = store;
-const { date2Thai, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, messageError } = mixin;
 const previous = ref<boolean>(false);
 const next = ref<boolean>(false);
 const addDialog = ref<boolean>(false);
@@ -870,7 +870,7 @@ const saveEdit = async () => {
 };
 
 const saveDataAgency = async (data: DataLink[]) => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.cmsAgency, data)
     .then((res) => {})
@@ -883,7 +883,7 @@ const saveDataAgency = async (data: DataLink[]) => {
 };
 
 const saveDataGoverment = async (data: DataLink[]) => {
-  showLoader();
+  loaderPage(true);
 
   await http
     .post(config.API.cmsGoverment, data)
@@ -897,7 +897,7 @@ const saveDataGoverment = async (data: DataLink[]) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.cms)
     .then((res) => {
@@ -952,12 +952,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const takeLogo = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("FileData", imageFileLogo.value);
   await http
@@ -974,7 +974,7 @@ const takeLogo = async () => {
 };
 
 const takeBanner = async () => {
-  showLoader();
+  loaderPage(true);
   const formData = new FormData();
   formData.append("FileData", imageFile.value);
   await http
@@ -999,7 +999,7 @@ const sendDataDetail = async () => {
         description: web.value.descripstion,
         shortName: web.value.by,
       };
-      showLoader();
+      loaderPage(true);
       await http
         .post(config.API.cmsDeatail, data)
         .then((res) => {})
@@ -1026,7 +1026,7 @@ const sendDataAbout = async () => {
         zipCode: address.value.code,
         telephone: address.value.tel,
       };
-      showLoader();
+      loaderPage(true);
       await http
         .post(config.API.cmsAbout, data)
         .then((res) => {})
@@ -1042,7 +1042,7 @@ const sendDataAbout = async () => {
 };
 
 const fetchProvince = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.province)
     .then((res) => {
@@ -1057,13 +1057,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchDistrict = async (id: string | null) => {
   if (id !== null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -1078,14 +1078,14 @@ const fetchDistrict = async (id: string | null) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null) => {
   if (id !== null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -1104,7 +1104,7 @@ const fetchSubDistrict = async (id: string | null) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };

src/modules/04_registry/components/Assessment.vue

@@ -26,6 +26,10 @@
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
+              <div v-else-if="col.name == 'name'" class="table_ellipsis">
+                {{ textPoint(props.row.pointSum) }}
+                {{ textRangePoint(props.row.pointSum) }}
+              </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
               </div>
@@ -59,7 +63,7 @@
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-12 col-md-12">
               <datepicker
                 menu-class-name="modalfix"
                 :readonly="!edit"
@@ -102,7 +106,7 @@
                 </template>
               </datepicker>
             </div>
-            <div class="col-6">
+            <!-- <div class="col-6">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -117,8 +121,124 @@
                 @update:modelValue="clickEditRow"
                 type="number"
               />
+            </div> -->
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
             </div>
-            <div class="col-12">
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point1"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2Total"
+                :rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="point2"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSumTotal"
+                :rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
+                hide-bottom-space
+                :label="`${'ผลรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                input-class="text-right"
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="pointSum"
+                :rules="[
+                  (val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
+                ]"
+                hide-bottom-space
+                :label="`${'ผลประเมินรวม (คะแนน)'}`"
+                @update:modelValue="clickEditRow"
+                type="number"
+              />
+            </div>
+            <div class="text-subtitle2 col-12 row items-center">
+              <q-space></q-space>
+              ผลการประเมิน:
+              <div class="text-bold items-center q-px-sm">
+                {{ textPoint(pointSum) }}
+              </div>
+              {{ textRangePoint(pointSum) }}
+            </div>
+            <!-- <div class="col-12">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -132,7 +252,7 @@
                 :label="`${'ชื่อแบบประเมิน'}`"
                 @update:modelValue="clickEditRow"
               />
-            </div>
+            </div> -->
           </div>
         </q-card-section>
         <q-separator />
@@ -171,6 +291,10 @@
           >
             {{ date2Thai(col.value) }}
           </div>
+          <div v-else-if="col.name == 'name'" class="table_ellipsis">
+            {{ textPoint(props.row.pointSum) }}
+            {{ textRangePoint(props.row.pointSum) }}
+          </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
           </div>
@@ -194,6 +318,7 @@ import type {
   DataProps,
 } from "@/modules/04_registry/interface/request/Assessment";
 import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
+import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -216,12 +341,16 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
-const point = ref<number>();
+const point1Total = ref<number>();
+const point1 = ref<number>();
+const point2Total = ref<number>();
+const point2 = ref<number>();
+const pointSumTotal = ref<number>();
+const pointSum = ref<number>();
 const date = ref<Date>(new Date());
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -242,7 +371,16 @@ const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.assessment.columns.length == 0
-  ? (visibleColumns.value = ["name", "point", "date"])
+  ? (visibleColumns.value = [
+      "point1Total",
+      "point1",
+      "point2Total",
+      "point2",
+      "pointSumTotal",
+      "pointSum",
+      "name",
+      "date",
+    ])
   : (visibleColumns.value = profileData.assessment.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -257,22 +395,77 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "name",
+    name: "point1Total",
     align: "left",
-    label: "ชื่อแบบประเมิน",
+    label: "ส่วนที่1 (คะแนน)",
     sortable: true,
-    field: "name",
+    field: "point1Total",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "point",
+    name: "point1",
     align: "left",
-    label: "คะแนน",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
     sortable: true,
-    field: "point",
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ผลประเมิน",
+    sortable: true,
+    field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -281,11 +474,66 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
-    name: "date",
+    name: "point1Total",
     align: "left",
-    label: "วันที่ได้รับ",
+    label: "ส่วนที่1 (คะแนน)",
     sortable: true,
-    field: "date",
+    field: "point1Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point1",
+    align: "left",
+    label: "ผลประเมินส่วนที่1 (คะแนน)",
+    sortable: true,
+    field: "point1",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2Total",
+    align: "left",
+    label: "ส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2Total",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point2",
+    align: "left",
+    label: "ผลประเมินส่วนที่2 (คะแนน)",
+    sortable: true,
+    field: "point2",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSumTotal",
+    align: "left",
+    label: "ผลรวม (คะแนน)",
+    sortable: true,
+    field: "pointSumTotal",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "pointSum",
+    align: "left",
+    label: "ผลประเมินรวม (คะแนน)",
+    sortable: true,
+    field: "pointSum",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -294,7 +542,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ชื่อแบบประเมิน",
+    label: "ผลประเมิน",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -302,17 +550,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "point",
-    align: "left",
-    label: "คะแนน",
-    sortable: true,
-    field: "point",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "createdFullName",
     align: "left",
@@ -337,8 +574,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumnsHistory = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
   "name",
-  "point",
   "date",
   "createdFullName",
   "createdAt",
@@ -353,7 +595,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAssessmentId(profileId.value))
     .then((res) => {
@@ -363,7 +605,12 @@ const fetchData = async () => {
         rows.value.push({
           id: e.id,
           name: e.name,
-          point: e.point,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
           date: new Date(e.date),
           createdAt: new Date(e.createdAt),
           createdFullName: e.createdFullName,
@@ -374,7 +621,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -404,7 +651,12 @@ const clickNext = async () => {
 const getData = () => {
   const row = rows.value[rowIndex.value];
   name.value = row.name;
-  point.value = row.point;
+  point1Total.value = row.point1Total;
+  point1.value = row.point1;
+  point2Total.value = row.point2Total;
+  point2.value = row.point2;
+  pointSumTotal.value = row.pointSumTotal;
+  pointSum.value = row.pointSum;
   date.value = row.date;
   id.value = row.id;
 };
@@ -460,12 +712,17 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileAssessmentId(profileId.value), {
       id: id.value,
       name: name.value,
-      point: point.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
       date: dateToISO(date.value),
     })
     .then((res) => {
@@ -484,12 +741,17 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAssessmentId(id.value), {
       id: id.value,
       name: name.value,
-      point: point.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
       date: dateToISO(date.value),
     })
     .then((res) => {
@@ -516,7 +778,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileAssessmentId(id.value))
         .then((res) => {
@@ -569,7 +831,12 @@ const selectData = async (props: DataProps) => {
   rawItem.value = props.row;
   rowIndex.value = props.rowIndex;
   name.value = props.row.name;
-  point.value = props.row.point;
+  point1Total.value = props.row.point1Total;
+  point1.value = props.row.point1;
+  point2Total.value = props.row.point2Total;
+  point2.value = props.row.point2;
+  pointSumTotal.value = props.row.pointSumTotal;
+  pointSum.value = props.row.pointSum;
   date.value = props.row.date;
   id.value = props.row.id;
   await checkRowPage();
@@ -583,7 +850,12 @@ const addData = () => {
   modal.value = true;
   edit.value = true;
   name.value = "";
-  point.value = 0;
+  point1Total.value = 0;
+  point1.value = 0;
+  point2Total.value = 0;
+  point2.value = 0;
+  pointSumTotal.value = 0;
+  pointSum.value = 0;
   date.value = new Date();
 };
 
@@ -623,7 +895,7 @@ const clickEditRow = () => {
 const clickHistory = async (row: RequestItemsObject) => {
   tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAssessmentHisId(row.id))
     .then((res) => {
@@ -633,7 +905,12 @@ const clickHistory = async (row: RequestItemsObject) => {
         rowsHistory.value.push({
           id: e.id,
           name: e.name,
-          point: e.point,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
           date: new Date(e.date),
           createdAt: new Date(e.createdAt),
           createdFullName: e.createdFullName,
@@ -644,7 +921,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -670,6 +947,26 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+
+const textRangePoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
+  if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
+  if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
+  if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
+  if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
+  else return "";
+};
+
+const textPoint = (val: number | undefined) => {
+  if (val == undefined) val = -1;
+  if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
+  if (val >= 60 && val <= 69) return "พอใช้";
+  if (val >= 70 && val <= 79) return "ดี";
+  if (val >= 80 && val <= 89) return "ดีมาก";
+  if (val >= 90 && val <= 100) return "ดีเด่น";
+  else return "-";
+};
 </script>
 <style lang="scss">
 .modalfix {

src/modules/04_registry/components/Coin.vue

@@ -224,8 +224,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const issuer = ref<string>();
@@ -361,7 +360,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileHonorId(profileId.value))
     .then((res) => {
@@ -382,7 +381,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -468,7 +467,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileHonorId(profileId.value), {
       id: id.value,
@@ -492,7 +491,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileHonorId(id.value), {
       id: id.value,
@@ -524,7 +523,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileHonorId(id.value))
         .then((res) => {
@@ -634,7 +633,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขประกาศลูกจ้างดีเด่น"
       : "ประวัติแก้ไขประกาศเกียรติคุณ";
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileHonorHisId(row.id))
     .then((res) => {
@@ -655,7 +654,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Discipline.vue

@@ -293,8 +293,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const level = ref<string>();
@@ -546,7 +545,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDisId(profileId.value))
     .then((res) => {
@@ -569,7 +568,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -657,7 +656,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileDisId(profileId.value), {
       id: id.value,
@@ -683,7 +682,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileDisId(id.value), {
       id: id.value,
@@ -717,7 +716,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileDisId(id.value))
         .then((res) => {
@@ -827,7 +826,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDisHisId(row.id))
     .then((res) => {
@@ -850,7 +849,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Document.vue

@@ -161,7 +161,7 @@ const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const route = useRoute();
-const { success, messageError, showLoader, hideLoader } = mixin;
+const { success, messageError } = mixin;
 const profileId = ref<string>(route.params.id.toString());
 const edit = ref<boolean>(false);
 const uploader = ref<any>();
@@ -174,7 +174,7 @@ onMounted(async () => {
 });
 
 const getData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profilePaperId(profileId.value))
     .then((res) => {
@@ -185,12 +185,12 @@ const getData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const deleteData = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .delete(config.API.profilePaperId(id))
     .then((res) => {
@@ -211,8 +211,10 @@ const uploadData = async () => {
       type: file.value[0].type,
     });
     const formData = new FormData();
-    formData.append("", newFile);
+    formData.append("avatar", newFile);
-    showLoader();
+    formData.append("moss", "newFile");
+    console.log(formData);
+    loaderPage(true);
     await http
       .post(config.API.profilePaperId(profileId.value), formData)
       .then((res) => {

src/modules/04_registry/components/Education.vue

@@ -466,8 +466,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
+const { success, dateToISO, date2Thai, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const levelId = ref<string>();
@@ -897,7 +896,7 @@ onMounted(async () => {
 });
 
 const fetchLevel = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.educationLevel)
     .then((res) => {
@@ -913,12 +912,12 @@ const fetchLevel = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchPositionPath = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.positionPath)
     .then((res) => {
@@ -934,7 +933,7 @@ const fetchPositionPath = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -961,7 +960,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileEduId(profileId.value))
     .then((res) => {
@@ -995,7 +994,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1098,7 +1097,7 @@ const saveData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == positionPathId.value
   //   );
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileEduId(profileId.value), {
       id: id.value,
@@ -1140,7 +1139,7 @@ const editData = async () => {
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
   //     (r: any) => r.id == positionPathId.value
   //   );
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileEduId(id.value), {
       id: id.value,
@@ -1184,7 +1183,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileEduId(id.value))
         .then((res) => {
@@ -1312,7 +1311,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileEduHisId(row.id))
     .then((res) => {
@@ -1346,7 +1345,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Information/Address.vue

@@ -311,10 +311,6 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  notiNoEdit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -323,7 +319,7 @@ const $q = useQuasar();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, success, messageError } = mixin;
 const edit = ref<boolean>(false);
 const addressData = ref<Address>(defaultAddress);
 const myform = ref<any>();
@@ -561,7 +557,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAdrsHisId(route.params.id.toString()))
     .then((res) => {
@@ -589,7 +585,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -610,7 +606,7 @@ const getNewData = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAdrsId(route.params.id.toString()))
     .then((res) => {
@@ -629,7 +625,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -661,7 +657,7 @@ const editData = async () => {
     createdAt: new Date(),
     createdFullName: "-",
   };
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAdrsId(route.params.id.toString()), body)
     .then((res) => {
@@ -731,7 +727,7 @@ const selectSubDistrict = (e: string | null, name: string) => {
 };
 
 const fetchProvince = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.province)
     .then((res) => {
@@ -747,13 +743,13 @@ const fetchProvince = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listDistrict(id))
       .then((res) => {
@@ -774,14 +770,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
 
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null) {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.listSubDistrict(id))
       .then((res) => {
@@ -806,7 +802,7 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
@@ -815,7 +811,6 @@ const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       edit.value = false;
-      props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
     }

src/modules/04_registry/components/Information/Certicate.vue

@@ -293,8 +293,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const certificateNo = ref<string>();
@@ -485,7 +484,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileCertId(profileId.value))
     .then((res) => {
@@ -508,7 +507,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -596,7 +595,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileCertId(profileId.value), {
       id: id.value,
@@ -622,7 +621,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileCertId(id.value), {
       id: id.value,
@@ -656,7 +655,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileCertId(id.value))
         .then((res) => {
@@ -770,7 +769,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       ? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
       : "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileCertHisId(row.id))
     .then((res) => {
@@ -793,7 +792,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Information/Family.vue

@@ -774,7 +774,6 @@ import type {
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
-import { useManageDataStore } from "@/modules/01_metadata/store";
 
 const props = defineProps({
   statusEdit: {
@@ -790,10 +789,10 @@ const emit = defineEmits(["update:statusEdit"]);
 
 const route = useRoute();
 const $q = useQuasar();
-const store = useManageDataStore();
+const dataStore = useDataStore();
-const { getPrefix } = store;
+const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, success, messageError } = mixin;
 const edit = ref<boolean>(false);
 const fix = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
@@ -858,34 +857,24 @@ const refreshData = async () => {
 };
 
 const fetchPrefix = async () => {
-    const result = await getPrefix(true, false);
+  loaderPage(true);
-  const data = result.data;
+  await http
-  let option: DataOption[] = [];
+    .get(config.API.prefix)
-  if (data.length > 0) {
+    .then((res) => {
-    data.map((r: any) => {
+      const data = res.data.result;
-      option.push({ id: r.id.toString(), name: r.name.toString() });
+      let option: DataOption[] = [];
+      data.map((r: any) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      Ops.value.prefixOps = option;
+      OpsFilter.value.prefixOps = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
     });
-  }
-  Ops.value.prefixOps = option;
-  OpsFilter.value.prefixOps = option;
-//   showLoader();
-//   await http
-//     .get(config.API.prefix)
-//     .then((res) => {
-//       const data = res.data.result;
-//       let option: DataOption[] = [];
-//       data.map((r: any) => {
-//         option.push({ id: r.id.toString(), name: r.name.toString() });
-//       });
-//       Ops.value.prefixOps = option;
-//       OpsFilter.value.prefixOps = option;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
 };
 
 const addChildren = async () => {
@@ -912,7 +901,7 @@ const deleteChildren = (items: childrenFamily) => {
 
 const fetchHistory = async () => {
   familyDataHistory.value = [];
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileFamiHisId(route.params.id.toString()))
     .then((res) => {
@@ -944,7 +933,7 @@ const fetchHistory = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
       if (familyDataHistory.value.length == 0) {
         // modalError(
         //   $q,
@@ -966,7 +955,7 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileFamiId(route.params.id.toString()))
     .then((res) => {
@@ -1011,12 +1000,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   const body: ResponseObject = {
     couple: familyData.value.same == "1",
     couplePrefixId: familyData.value.prefixIdC,

src/modules/04_registry/components/Information/Government.vue

@@ -25,6 +25,18 @@
             :label="`${'สังกัด'}`"
           />
         </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.numberId"
+            :label="`${'ตำแหน่งเลขที่'}`"
+          />
+        </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(false)"
@@ -45,8 +57,8 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.numberId"
+            :model-value="govermentData.positionPathSide"
-            :label="`${'เลขที่ตำแหน่ง'}`"
+            :label="`${'ด้าน/สาขา'}`"
           />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
@@ -57,7 +69,7 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.workId"
+            :model-value="govermentData.positionLine"
             :label="`${'สายงาน'}`"
           />
         </div>
@@ -69,7 +81,7 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.typeId"
+            :model-value="govermentData.positionType"
             :label="`${'ประเภท'}`"
           />
         </div>
@@ -81,7 +93,7 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.levelId"
+            :model-value="govermentData.positionLevel"
             :label="`${'ระดับ'}`"
           />
         </div>
@@ -93,10 +105,22 @@
             lazy-rules
             readonly
             borderless
-            :model-value="govermentData.businessId"
+            :model-value="govermentData.positionExecutive"
             :label="`${'ตำแหน่งทางการบริหาร'}`"
           />
         </div>
+        <div class="col-xs-6 col-sm-3 col-md-3">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            dense
+            lazy-rules
+            readonly
+            borderless
+            :model-value="govermentData.positionExecutiveSide"
+            :label="`${'ด้านตำแหน่งทางการบริหาร'}`"
+          />
+        </div>
         <div class="col-12 q-py-md"><q-separator /></div>
         <div class="col-xs-6 col-sm-3 col-md-3">
           <datepicker
@@ -125,8 +149,8 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="date2Thai(new Date(govermentData.containDate))"
-                :rules="[(val) => !!val || `${'กรุณาเลือก วันที่สั่งบรรจุ'}`]"
+                :rules="[(val) => !!val || `${'กรุณาเลือก วันที่บรรจุ'}`]"
-                :label="`${'วันที่สั่งบรรจุ'}`"
+                :label="`${'วันที่บรรจุ'}`"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -306,11 +330,6 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-
-  notiNoEdit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -319,8 +338,7 @@ const $q = useQuasar();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const profileStore = useProfileDataStore();
 const { birthDate, retireText } = storeToRefs(profileStore);
 const edit = ref<boolean>(false);
@@ -343,10 +361,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "position",
+    name: "positionPathSide",
     align: "left",
     label: "ตำแหน่ง",
     sortable: true,
+    field: "positionPathSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -356,7 +385,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -408,10 +437,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "positionExecutiveSide",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "dateAppoint",
     align: "left",
-    label: "วันที่สั่งบรรจุ",
+    label: "วันที่บรรจุ",
     sortable: true,
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
@@ -511,11 +551,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
 const visibleColumnsHistory = ref<String[]>([
   "oc",
   "position",
+  "positionPathSide",
   "posNo",
   "positionLine",
   "positionType",
   "positionLevel",
   "positionexecutive",
+  "positionExecutiveSide",
   "dateAppoint",
   "dateStart",
   "retireDate",
@@ -541,18 +583,20 @@ watch(retireText, async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileGovId(route.params.id.toString()))
     .then((res) => {
       const data: ResponseObject = res.data.result;
       govermentData.value.ocId = data.oc;
       govermentData.value.positionId = data.position;
-      govermentData.value.workId = data.work;
+      govermentData.value.positionPathSide = data.positionPathSide;
-      govermentData.value.typeId = data.type;
+      govermentData.value.positionLine = data.positionLine;
-      govermentData.value.levelId = data.level;
+      govermentData.value.positionType = data.positionType;
+      govermentData.value.positionLevel = data.positionLevel;
       govermentData.value.numberId = data.posNo;
-      govermentData.value.businessId = data.business;
+      govermentData.value.positionExecutive = data.positionExecutive;
+      govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
       govermentData.value.containDate = new Date(data.dateAppoint);
       govermentData.value.workDate = new Date(data.dateStart);
       govermentData.value.retireDate = data.retireDate;
@@ -565,7 +609,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -575,27 +619,13 @@ const refreshData = async () => {
 };
 
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
-  const body: ResponseObject = {
-    oc: govermentData.value.ocId,
-    business: govermentData.value.businessId,
-    dateAppoint: dateToISO(govermentData.value.containDate),
-    dateStart: dateToISO(govermentData.value.workDate),
-    govAge: govermentData.value.ageAll,
-    govAgeAbsent: govermentData.value.absent,
-    govAgePlus: govermentData.value.age,
-    level: govermentData.value.levelId,
-    posNo: govermentData.value.numberId,
-    position: govermentData.value.positionId,
-    retireDate: govermentData.value.retireDate,
-    type: govermentData.value.typeId,
-    work: govermentData.value.workId,
-    reasonSameDate: govermentData.value.reasonSameDate,
-    createdAt: new Date(),
-    createdFullName: "-",
-  };
   await http
-    .put(config.API.profileGovId(route.params.id.toString()), body)
+    .put(config.API.profileGovId(route.params.id.toString()), {
+      dateAppoint: dateToISO(govermentData.value.containDate),
+      dateStart: dateToISO(govermentData.value.workDate),
+      reasonSameDate: govermentData.value.reasonSameDate,
+    })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
     })
@@ -624,7 +654,7 @@ const handleDate = async (modelData: Date) => {
 };
 
 const fetchCalAgeGov = async (date: Date) => {
-  showLoader();
+  loaderPage(true);
   const body = {
     dateAppoint: date,
   };
@@ -638,7 +668,7 @@ const fetchCalAgeGov = async (date: Date) => {
       messageError($q, e);
     })
     .finally(async () => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -647,7 +677,7 @@ const fetchCalAgeGov = async (date: Date) => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileGovHisId(route.params.id.toString()))
     .then((res) => {
@@ -657,11 +687,13 @@ const clickHistory = async () => {
         rowsHistory.value.push({
           oc: e.oc,
           position: e.position,
+          positionPathSide: e.positionPathSide,
           posNo: e.posNo,
           positionLine: e.positionLine,
           positionType: e.positionType,
           positionLevel: e.positionLevel,
           positionExecutive: e.positionExecutive,
+          positionExecutiveSide: e.positionExecutiveSide,
           dateAppoint: new Date(e.dateAppoint),
           dateStart: new Date(e.dateStart),
           retireDate: e.retireDate,
@@ -678,7 +710,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -686,7 +718,6 @@ const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       edit.value = false;
-      props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
     }

src/modules/04_registry/components/Information/Information.vue

@@ -23,6 +23,7 @@
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.cardid"
+            @update:model-value="changeCardID"
             maxlength="13"
             :rules="[
               (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@@ -88,7 +89,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <datepicker
             v-model="informaData.birthDate"
             :locale="'th'"
@@ -132,7 +133,7 @@
             </template>
           </datepicker>
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -145,7 +146,7 @@
             :label="`${'อายุ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -170,7 +171,7 @@
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -195,32 +196,7 @@
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
-          <selector
-            :hide-dropdown-icon="!edit"
-            hide-bottom-space
-            :class="getClass(edit)"
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก หมู่เลือด'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="informaData.bloodId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.bloodOps"
-            option-value="id"
-            :label="`${'หมู่เลือด'}`"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
-                      ) "
-          />
-        </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -234,7 +210,7 @@
             :label="`${'สัญชาติ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -248,7 +224,7 @@
             :label="`${'เชื้อชาติ'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
@@ -273,7 +249,32 @@
                       ) "
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <selector
+            :hide-dropdown-icon="!edit"
+            hide-bottom-space
+            :class="getClass(edit)"
+            :readonly="!edit"
+            :borderless="!edit"
+            :outlined="edit"
+            dense
+            lazy-rules
+            v-model="informaData.bloodId"
+            emit-value
+            map-options
+            option-label="name"
+            :options="Ops.bloodOps"
+            option-value="id"
+            :label="`${'หมู่เลือด'}`"
+            use-input
+            input-debounce="0"
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
+                      ) "
+            clearable
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
           <q-input
             hide-bottom-space
             :outlined="edit"
@@ -284,10 +285,6 @@
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.tel"
-            :rules="[
-              (val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
-              (val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
-            ]"
             :label="`${'เบอร์โทร'}`"
             mask="##########"
           />
@@ -348,6 +345,35 @@
                       ) "
           />
         </div>
+        <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
+          <label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มี"
+            dense
+            :disable="!edit"
+          />
+          <q-radio
+            v-model="same"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="ไม่มี"
+            dense
+            :disable="!edit"
+          />
+        </div>
+        <div class="row col-12">
+          <OldName
+            v-if="same == '1'"
+            v-model:statusEdit="edit"
+            :fetchDataInformation="fetchDataComponent"
+          />
+        </div>
       </div>
     </q-form>
   </q-card>
@@ -394,6 +420,7 @@ import type {
 } from "@/modules/04_registry/interface/request/Information";
 import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
 import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
 import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
 import HistoryTable from "@/components/TableHistory.vue";
 import http from "@/plugins/http";
@@ -407,7 +434,7 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  notiNoEdit: {
+  fetchDataProfile: {
     type: Function,
     default: () => console.log("not function"),
   },
@@ -417,36 +444,31 @@ const emit = defineEmits(["update:statusEdit"]);
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
-  date2Thai,
-  success,
-  dateToISO,
-  messageError,
-  modalError,
-  showLoader,
-  hideLoader,
-} = mixin;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const profileStore = useProfileDataStore();
 const { changeRetireText, changeBirth } = profileStore;
 const edit = ref<boolean>(false);
+const defaultCitizenData = ref<string | null>("");
 const informaData = ref<Information>(defaultInformation);
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const age = ref<boolean>(true);
 const myform = ref<QForm | null>(null);
+const dateBefore = ref<Date>(new Date());
+const same = ref<string>("0");
 const Ops = ref<InformationOps>({
   prefixOps: [],
+  prefixOldOps: [],
   genderOps: [],
   bloodOps: [],
   statusOps: [],
   religionOps: [],
   employeeClassOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
   ],
   employeeTypeOps: [
     { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
@@ -455,13 +477,14 @@ const Ops = ref<InformationOps>({
 });
 const OpsFilter = ref<InformationOps>({
   prefixOps: [],
+  prefixOldOps: [],
   genderOps: [],
   bloodOps: [],
   statusOps: [],
   religionOps: [],
   employeeClassOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+    { id: "temp", name: "ลูกจ้างชั่วคราว" },
   ],
   employeeTypeOps: [
     { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
@@ -682,7 +705,7 @@ const onCancel = async () => {
  * get รายการ ข้อมูลเกี่ยวกับบุคคล
  */
 const fetchPerson = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.person)
     .then((res) => {
@@ -739,7 +762,58 @@ const fetchPerson = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
+    });
+};
+
+const changeCardID = (value: string | number | null) => {
+  if (value != null && typeof value == "string") {
+    if (value.length == 13 && value != defaultCitizenData.value) {
+      dialogMessage(
+        $q,
+        "ข้อมูลมีการแก้ไข?",
+        "ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
+        "info",
+        "ยืนยัน",
+        "public",
+        async () => {
+          await checkCitizen(value);
+        },
+        async () => {
+          informaData.value.cardid = defaultCitizenData.value;
+        }
+      );
+    }
+  }
+};
+
+const checkCitizen = async (id: string) => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileCitizenId(id))
+    .then((res) => {
+      const data = res.data.result.citizen;
+
+      if (!data) {
+        dialogMessage(
+          $q,
+          "ข้อความแจ้งเตือน",
+          "เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
+          "warning",
+          undefined,
+          "orange",
+          undefined,
+          undefined,
+          true
+        );
+        informaData.value.cardid = defaultCitizenData.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
     });
 };
 
@@ -748,7 +822,7 @@ const fetchPerson = async () => {
  */
 const clickHistory = async () => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInforHisId(route.params.id.toString()))
     .then((res) => {
@@ -789,7 +863,7 @@ const clickHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -855,36 +929,44 @@ const handleDate = async (modelData: Date) => {
   await calRetire(modelData);
 };
 
+const fetchDataComponent = async (modelData: Date) => {
+  await props.fetchDataProfile();
+  await fetchData();
+};
+
 const calRetire = async (birth: Date) => {
   const body = {
     birthDate: dateToISO(birth),
   };
-  showLoader();
+  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-  await http
+    loaderPage(true);
-    .post(config.API.profileCalRetire, body)
+    await http
-    .then((res: any) => {
+      .post(config.API.profileCalRetire, body)
-      const data = res.data.result;
+      .then((res: any) => {
-      informaData.value.age = data.age;
+        const data = res.data.result;
-      changeRetireText(data.retireDate);
+        informaData.value.age = data.age;
-      age.value = true;
+        changeRetireText(data.retireDate);
-    })
+        dateBefore.value = birth;
-    .catch((e: any) => {
+      })
-      age.value = false;
+      .catch((e: any) => {
-      messageError($q, e);
+        messageError($q, e);
-      const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
+        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-      changeRetireText(date2Thai(retire));
+        informaData.value.birthDate = dateBefore.value;
-    })
+        changeRetireText(date2Thai(retire));
-    .finally(() => {
+      })
-      hideLoader();
+      .finally(() => {
-    });
+        loaderPage(false);
+      });
+  }
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInforId(route.params.id.toString()))
     .then(async (res: any) => {
       const data: ResponseObject = res.data.result;
+      defaultCitizenData.value = data.citizenId;
       informaData.value.cardid = data.citizenId;
       informaData.value.prefix = "";
       informaData.value.prefixId = data.prefixId;
@@ -902,6 +984,8 @@ const fetchData = async () => {
       informaData.value.employeeType = data.employeeType;
       informaData.value.employeeClass = data.employeeClass;
       informaData.value.profileType = data.profileType;
+      dateBefore.value = new Date(data.birthDate);
+      same.value = data.changeName == true ? "1" : "0";
       await calRetire(new Date(dateToISO(new Date(data.birthDate))));
       if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
         columnsHistory.value.splice(13, 1);
@@ -911,16 +995,13 @@ const fetchData = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
+    .finally(async () => {
-      hideLoader();
+      //   loaderPage(false);
+      await props.fetchDataProfile();
     });
 };
 
 const editData = async () => {
-  if (age.value == false) {
-    modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
-    return;
-  }
   const body: any = {
     citizenId: informaData.value.cardid,
     prefixId: informaData.value.prefixId,
@@ -941,7 +1022,7 @@ const editData = async () => {
     profileType: informaData.value.profileType,
     createdFullName: "-",
   };
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileInforId(route.params.id.toString()), body)
     .then((res) => {
@@ -973,7 +1054,6 @@ const changeBtn = async () => {
   if (edit.value == true) {
     if (props.statusEdit === true) {
       edit.value = false;
-      props.notiNoEdit();
     } else {
       emit("update:statusEdit", true);
     }

src/modules/04_registry/components/Information/OldName.vue

@@ -0,0 +1,961 @@
+<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
+<template>
+  <div class="col-12">
+    <q-form ref="myForm">
+      <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
+      <ProfileTable
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        :add="clickAdd"
+        name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
+        icon="mdi-book"
+        :statusEdit="!statusEdit"
+      >
+        <template #columns="props">
+          <q-tr :props="props">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="statusEdit ? selectData(props) : ''"
+              class="cursor-pointer"
+            >
+              <div v-if="col.name == 'status'" class="table_ellipsis">
+                {{ typeChangeName(col.value) }}
+              </div>
+              <div v-else class="table_ellipsis">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.file != null"
+                color="green"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-file-document-outline"
+                @click="openFile(props.row.file)"
+              />
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </ProfileTable>
+    </q-form>
+  </div>
+  <!-- popup Edit window-->
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 600px">
+      <q-form ref="myForm">
+        <DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานะการเปลี่ยนชื่อ'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="status"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.statusOps"
+                option-value="id"
+                :label="`${'สถานะการเปลี่ยนชื่อ'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
+                      ) "
+              />
+            </div>
+            <q-space class="col-6" />
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <selector
+                :hide-dropdown-icon="!edit"
+                hide-bottom-space
+                :class="getClass(edit)"
+                :readonly="!edit"
+                :borderless="!edit"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+                :outlined="edit"
+                dense
+                lazy-rules
+                v-model="prefixId"
+                emit-value
+                map-options
+                option-label="name"
+                :options="Ops.prefixOps"
+                option-value="id"
+                :label="`${'คำนำหน้า'}`"
+                use-input
+                input-debounce="0"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="firstName"
+                :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
+                hide-bottom-space
+                :label="`${'ชื่อ'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="lastName"
+                :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+                hide-bottom-space
+                :label="`${'นามสกุล'}`"
+                @update:modelValue="clickEditRow"
+              />
+            </div>
+            <q-btn
+              v-if="file != null && !edit"
+              color="green"
+              flat
+              dense
+              round
+              size="14px"
+              icon="mdi-file-document-outline"
+              @click="openFile(file)"
+            />
+            <q-uploader
+              v-if="edit"
+              color="gray"
+              type="file"
+              flat
+              ref="uploader"
+              class="full-width"
+              text-color="white"
+              :max-size="10000000"
+              accept=".jpg,.png,.pdf,.csv,.doc"
+              bordered
+              label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+              @added="fileAdd"
+            >
+              <template v-slot:header="scope">
+                <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+                  <q-btn
+                    v-if="scope.queuedFiles.length > 0"
+                    icon="clear_all"
+                    @click="scope.removeQueuedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบทั้งหมด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.uploadedFiles.length > 0"
+                    icon="done_all"
+                    @click="scope.removeUploadedFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                  </q-btn>
+                  <q-spinner
+                    v-if="scope.isUploading"
+                    class="q-uploader__spinner"
+                  />
+                  <div class="col">
+                    <div class="q-uploader__title">
+                      {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
+                    </div>
+                    <div class="q-uploader__subtitle">
+                      {{ scope.uploadSizeLabel }} /
+                      {{ scope.uploadProgressLabel }}
+                    </div>
+                  </div>
+                  <q-btn
+                    v-if="scope.canAddFiles"
+                    type="a"
+                    icon="add_box"
+                    @click="scope.pickFiles"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-uploader-add-trigger />
+                    <q-tooltip>เลือกไฟล์</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="scope.isUploading"
+                    icon="clear"
+                    @click="scope.abort"
+                    round
+                    dense
+                    flat
+                  >
+                    <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                  </q-btn>
+                </div>
+              </template>
+            </q-uploader>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <DialogFooter
+          :cancel="clickCancel"
+          :edit="clickEdit"
+          :save="clickSave"
+          :validate="validateData"
+          :clickNext="clickNext"
+          :clickPrevious="clickPrevious"
+          :clickDelete="clickDelete"
+          v-model:editvisible="edit"
+          v-model:next="next"
+          v-model:previous="previous"
+          v-model:modalEdit="modalEdit"
+        />
+      </q-form>
+    </q-card>
+  </q-dialog>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+    :history="true"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'status'" class="table_ellipsis">
+            {{ typeChangeName(col.value) }}
+          </div>
+          <div v-else class="table_ellipsis">
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            v-if="props.row.file != null"
+            color="green"
+            flat
+            dense
+            round
+            size="14px"
+            icon="mdi-file-document-outline"
+            @click="openFile(props.row.file)"
+          />
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+  RequestItemsObject,
+  DataProps,
+} from "@/modules/04_registry/interface/request/OldName";
+import type { ResponseObject } from "@/modules/04_registry/interface/response/OldName";
+import type {
+  OldNameOps,
+  DataOption,
+} from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  fetchDataInformation: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  typeChangeName,
+  dialogMessage,
+} = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const prefixId = ref<string>();
+const firstName = ref<string>();
+const lastName = ref<string>();
+const status = ref<string>();
+const nameFile = ref<string>("");
+const minDate = ref<Date>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(route.params.id.toString());
+const file = ref<string | null>(null);
+const fileUpload = ref<any>([]);
+const rows = ref<RequestItemsObject[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+const Ops = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+const OpsFilter = ref<OldNameOps>({
+  prefixOps: [],
+  statusOps: [
+    {
+      id: "firstName",
+      name: "เปลี่ยนชื่อ",
+    },
+    {
+      id: "lastName",
+      name: "เปลี่ยนนามสกุล",
+    },
+    {
+      id: "all",
+      name: "เปลี่ยนชื่อ-นามสกุล",
+    },
+  ],
+});
+profileData.oldName.columns.length == 0
+  ? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
+  : (visibleColumns.value = profileData.oldName.columns);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้า",
+    sortable: true,
+    field: "prefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะการเปลี่ยนชื่อ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "status",
+  "createdFullName",
+  "createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+  await changeProfileColumns("oldName", count);
+});
+
+onMounted(async () => {
+  await fetchPerson();
+  await fetchData();
+});
+
+const fetchData = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * get รายการ ข้อมูลเกี่ยวกับบุคคล
+ */
+const fetchPerson = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.person)
+    .then((res) => {
+      const data = res.data.result;
+      let optionprefixs: DataOption[] = [];
+      data.prefixs.map((r: any) => {
+        optionprefixs.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      Ops.value.prefixOps = optionprefixs;
+      OpsFilter.value.prefixOps = optionprefixs;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+  edit.value = false;
+  rowIndex.value -= 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+  edit.value = false;
+  rowIndex.value += 1;
+  await getData();
+  await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = () => {
+  const row = rows.value[rowIndex.value];
+  prefixId.value = row.prefixId;
+  firstName.value = row.firstName;
+  lastName.value = row.lastName;
+  status.value = row.status;
+  file.value = row.file;
+  id.value = row.id;
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+  editRow.value = false;
+  next.value = true;
+  previous.value = true;
+  if (rowIndex.value + 1 >= rows.value.length) {
+    next.value = false;
+  }
+  if (rowIndex.value - 1 < 0) {
+    previous.value = false;
+  }
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+  editRow.value = false;
+  next.value = false;
+  previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+  editRow.value = false;
+  await addData();
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      if (modalEdit.value) {
+        await editData();
+      } else {
+        await saveData();
+      }
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    const formData = new FormData();
+    formData.append("", newFile);
+    if (prefixId.value != undefined)
+      formData.append("prefixId", prefixId.value);
+    if (firstName.value != undefined)
+      formData.append("firstName", firstName.value);
+    if (lastName.value != undefined)
+      formData.append("lastName", lastName.value);
+    if (status.value != undefined) formData.append("status", status.value);
+    loaderPage(true);
+    await http
+      .post(config.API.profileChangeNameId(profileId.value), formData)
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        await props.fetchDataInformation();
+      });
+  } else {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาอัปโหลดเอกสารหลักฐาน",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+  }
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+  const formData = new FormData();
+  if (fileUpload.value.length > 0) {
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    formData.append("", newFile);
+  }
+  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
+  if (firstName.value != undefined)
+    formData.append("firstName", firstName.value);
+  if (lastName.value != undefined) formData.append("lastName", lastName.value);
+  if (status.value != undefined) formData.append("status", status.value);
+  loaderPage(true);
+  await http
+    .put(config.API.profileChangeNameId(id.value), formData)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await props.fetchDataInformation();
+    });
+};
+
+/**
+ * ลบลบข้อมูล
+ */
+const clickDelete = async () => {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .delete(config.API.profileChangeNameId(id.value))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      modal.value = false;
+      next.value = false;
+      previous.value = false;
+    });
+  } else {
+    modal.value = false;
+    next.value = false;
+    previous.value = false;
+  }
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataProps) => {
+  modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
+  modal.value = true; //modal ที่เด้งขึ้นมา
+  edit.value = false; //ปุ่ม edit ใน modal
+  rawItem.value = props.row;
+  rowIndex.value = props.rowIndex;
+  prefixId.value = props.row.prefixId;
+  firstName.value = props.row.firstName;
+  lastName.value = props.row.lastName;
+  status.value = props.row.status;
+  file.value = props.row.file;
+  id.value = props.row.id;
+  await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+  modalEdit.value = false;
+  modal.value = true;
+  edit.value = true;
+  prefixId.value = "";
+  firstName.value = "";
+  lastName.value = "";
+  status.value = "";
+  file.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  if (editRow.value == true) {
+    $q.dialog({
+      title: `ข้อมูลมีการแก้ไข`,
+      message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
+      cancel: "ยกเลิก",
+      ok: "ยืนยัน",
+      persistent: true,
+    }).onOk(async () => {
+      edit.value = false;
+      await checkRowPage();
+      await getData();
+    });
+  } else {
+    edit.value = false;
+    await checkRowPage();
+  }
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+  editRow.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsObject) => {
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameHisId(row.id))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: ResponseObject) => {
+        rowsHistory.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
+const filterSelector = (val: any, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "statusOps":
+      update(() => {
+        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+};
+
+const fileAdd = async (val: any) => {
+  nameFile.value = val[0].name;
+  fileUpload.value = val;
+};
+
+const openFile = async (val: string | null) => {
+  if (val != null) window.open(val);
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+<style lang="scss">
+.modalfix {
+  position: fixed !important;
+}
+</style>

src/modules/04_registry/components/Information/top.vue

@@ -51,6 +51,22 @@
         <q-tooltip>ยกเลิก</q-tooltip>
       </q-btn>
     </div>
+    <div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="add"
+        @click="addleave"
+        icon="mdi-plus"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
+        <q-tooltip>สรุปวันลา</q-tooltip>
+      </q-btn>
+    </div>
+
     <div class="q-pl-sm" v-else>
       <q-btn
         size="12px"
@@ -86,6 +102,10 @@ const props = defineProps({
     default: "ข้อความ",
     required: true,
   },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
   icon: {
     type: String,
     default: "mdi-help",
@@ -117,6 +137,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
   save: {
     type: Function,
     default: () => console.log("not function"),
@@ -163,5 +187,9 @@ const save = () => {
 const add = () => {
   props.add();
 };
+
+const addleave = () => {
+  props.addleave();
+};
 </script>
 <style scoped></style>

src/modules/04_registry/components/Insignia.vue

@@ -420,8 +420,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const insigniaId = ref<string>("");
@@ -791,7 +790,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchInsignia = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.insignia)
     .then((res) => {
@@ -812,12 +811,12 @@ const fetchInsignia = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInsignId(profileId.value))
     .then((res) => {
@@ -847,7 +846,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -941,7 +940,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileInsignId(profileId.value), {
       id: id.value,
@@ -973,7 +972,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileInsignId(id.value), {
       id: id.value,
@@ -1013,7 +1012,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileInsignId(id.value))
         .then((res) => {
@@ -1135,7 +1134,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileInsignHisId(row.id))
     .then((res) => {
@@ -1165,7 +1164,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Other.vue

@@ -194,7 +194,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const { date2Thai, success, messageError } = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -302,7 +302,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOtherId(profileId.value))
     .then((res) => {
@@ -322,7 +322,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -407,7 +407,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileOtherId(profileId.value), {
       id: id.value,
@@ -430,7 +430,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileOtherId(id.value), {
       id: id.value,
@@ -461,7 +461,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileOtherId(id.value))
         .then((res) => {
@@ -565,7 +565,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOtherHisId(row.id))
     .then((res) => {
@@ -585,7 +585,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Profile.vue

@@ -2,11 +2,24 @@
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
       <div id="information" name="1" class="row col-12 information">
-        <Informationvue
+        <!-- <Informationvue
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
+        /> -->
+        <Information
+          v-model:statusEdit="statusEdit"
+          :fetchDataProfile="fetchData"
         />
       </div>
+      <div id="government" name="16" class="row col-12 q-mt-md">
+        <Government v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="address" name="17" class="row col-12 q-mt-md">
+        <Address v-model:statusEdit="statusEdit" />
+      </div>
+      <div id="family" name="18" class="row col-12 q-mt-md">
+        <Family v-model:statusEdit="statusEdit" />
+      </div>
       <div id="certicate" name="15" class="row col-12 q-mt-md">
         <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
@@ -29,7 +42,12 @@
         />
       </div>
       <div id="position" name="7" class="row col-12 q-mt-md">
-        <SalaryVue v-model:statusEdit="statusEdit" />
+        <SalaryVue
+          v-model:statusEdit="statusEdit"
+          v-if="profileType === 'officer'"
+        />
+
+        <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
       </div>
       <div id="rule" name="8" class="row col-12 q-mt-md">
         <DisciplineVue v-model:statusEdit="statusEdit" />
@@ -284,7 +302,9 @@
                   style="padding: 5px"
                 >
                   {{ date2Thai(n.createdDate) }}
+
                   <q-btn
+                    v-if="!n.isActive"
                     icon="delete"
                     unelevated
                     dense
@@ -486,13 +506,13 @@ import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import Informationvue from "@/modules/04_registry/components/Information/layout.vue";
 import EducationVue from "@/modules/04_registry/components/Education.vue";
 import TrainVue from "@/modules/04_registry/components/Train.vue";
 import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
 import CoinedVue from "@/modules/04_registry/components/Coin.vue";
 import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
 import SalaryVue from "@/modules/04_registry/components/Salary.vue";
+import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
 import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
 import LeaveVue from "@/modules/04_registry/components/Leave.vue";
 import TalentVue from "@/modules/04_registry/components/Talent.vue";
@@ -501,6 +521,11 @@ import RecordVue from "@/modules/04_registry/components/Record.vue";
 import OtherVue from "@/modules/04_registry/components/Other.vue";
 import DocumentVue from "@/modules/04_registry/components/Document.vue";
 import Certicate from "@/modules/04_registry/components/Information/Certicate.vue";
+import Information from "@/modules/04_registry/components/Information/Information.vue";
+import Government from "@/modules/04_registry/components/Information/Government.vue";
+import Address from "@/modules/04_registry/components/Information/Address.vue";
+import Family from "@/modules/04_registry/components/Information/Family.vue";
+import OldName from "@/modules/04_registry/components/Information/OldName.vue";
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -509,15 +534,7 @@ const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
 const mixin = useCounterMixin();
-const {
+const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
-  date2Thai,
-  dateToISO,
-  modalConfirm,
-  messageError,
-  dialogMessage,
-  showLoader,
-  hideLoader,
-} = mixin;
 const route = useRoute();
 const router = useRouter();
 const imageUrl = ref<any>(null);
@@ -593,7 +610,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAvatarId(profileId.value))
     .then((res) => {
@@ -617,12 +634,12 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const checkProfileData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileCheckId(profileId.value))
     .then((res) => {
@@ -633,12 +650,12 @@ const checkProfileData = async () => {
       router.push("/registry");
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchAvatarHistory = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAvatarHistoryId(profileId.value))
     .then((res) => {
@@ -650,6 +667,7 @@ const fetchAvatarHistory = async () => {
           avatar: e.avatar,
           avatarId: e.avatarId,
           createdDate: new Date(e.createdDate),
+          isActive: e.isActive,
         });
       });
     })
@@ -657,7 +675,7 @@ const fetchAvatarHistory = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -666,7 +684,7 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData();
     formData.append("FileData", input[0]);
-    showLoader();
+    loaderPage(true);
     await http
       .post(config.API.profileAvatarId(profileId.value), formData)
       .then((res) => {})
@@ -681,31 +699,37 @@ const uploadImage = async (e: any) => {
   }
 };
 
-const deletePhoto = async (id: string) => {
+const fetchDataDelete = async (id: string) => {
-  //   dialogMessage(
+  loaderPage(true);
-  //     $q,
-  //     "ลบข้อมูล",
-  //     "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
-  //     "delete",
-  //     undefined,
-  //     "red",
-  //     undefined,
-  //     undefined,
-  //     false
-  //   );
-  showLoader();
   await http
     .delete(config.API.profileAvatarHistoryId(id))
-    .then((res) => {})
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(async () => {
       await fetchData();
-      dialogImage.value = false;
+      await clickImage();
+      //   dialogImage.value = false;
     });
 };
 
+const deletePhoto = async (id: string) => {
+  dialogMessage(
+    $q,
+    "ลบข้อมูล",
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+    "delete",
+    undefined,
+    "red",
+    () => fetchDataDelete(id),
+    undefined,
+    false
+  );
+};
+
 const selectAvatarHistory = async () => {
   if (activeImage.value == null) {
     dialogMessage(
@@ -721,7 +745,7 @@ const selectAvatarHistory = async () => {
     );
     return;
   }
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAvatarId(profileId.value), {
       avatar: activeImage.value.avatarId,
@@ -789,7 +813,7 @@ const downloadKP7Short = () => {};
 
 const clickKp7 = async () => {
   window.open(config.API.profileReportId(profileId.value));
-  //   showLoader();
+  //   loaderPage(true);
   //   await http
   //     .get(config.API.profileReportId(profileId.value))
   //     .then((res) => {
@@ -802,7 +826,7 @@ const clickKp7 = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       hideLoader();
+  //       loaderPage(false);
   //     });
 };
 
@@ -821,7 +845,7 @@ const downloadFilePDF = async (res: string, fileName: string) => {
 
 const clickKp7Short = async () => {
   window.open(config.API.profileKp7ShortId(profileId.value));
-  //   showLoader();
+  //   loaderPage(true);
   //   await http
   //     .get(config.API.profileKp7ShortId(profileId.value))
   //     .then((res) => {
@@ -834,17 +858,22 @@ const clickKp7Short = async () => {
   //     })
   //     .catch((e) => {messageError($q, e);})
   //     .finally(() => {
-  //       hideLoader();
+  //       loaderPage(false);
   //     });
 };
 
 const clickRetire = async () => {
   if (reasonStatus.value == true) {
-    modalConfirm(
+    dialogMessage(
       $q,
       "โปรดยืนยัน",
-      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่?",
+      "ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
-      Retire
+      "info",
+      undefined,
+      "primary",
+      Retire,
+      undefined,
+      false
     );
   } else {
     leaveDate.value = new Date();
@@ -858,7 +887,7 @@ const clickRetire = async () => {
 
 const Retire = async () => {
   if (reasonStatus.value == true) {
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.profileReactive(profileId.value))
       .then((res) => {
@@ -873,7 +902,7 @@ const Retire = async () => {
         router.push("/registry");
       });
   } else {
-    showLoader();
+    loaderPage(true);
     await http
       .put(config.API.profileDeactive(profileId.value), {
         leaveDate: dateToISO(leaveDate.value),

src/modules/04_registry/components/Record.vue

@@ -213,8 +213,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -352,7 +351,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileNopaidId(profileId.value))
     .then((res) => {
@@ -373,7 +372,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -459,7 +458,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileNopaidId(profileId.value), {
       id: id.value,
@@ -483,7 +482,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileNopaidId(id.value), {
       id: id.value,
@@ -515,7 +514,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileNopaidId(id.value))
         .then((res) => {
@@ -621,7 +620,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileNopaidHisId(row.id))
     .then((res) => {
@@ -642,7 +641,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Salary.vue

@@ -26,6 +26,16 @@
               <div v-if="col.name == 'date'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
+              <div
+                v-else-if="
+                  col.name == 'positionSalaryAmount' ||
+                  col.name == 'mouthSalaryAmount' ||
+                  col.name == 'amount'
+                "
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+              </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
               </div>
@@ -170,9 +180,9 @@
                         :borderless="!edit"
                         v-model="posNoId"
                         :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกเลขที่ตำแหน่ง'}`,
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งเลขที่'}`,
                         ]"
-                        :label="`${'เลขที่ตำแหน่ง'}`"
+                        :label="`${'ตำแหน่งเลขที่'}`"
                         @update:modelValue="clickEditRow"
                         emit-value
                         map-options
@@ -506,6 +516,16 @@
           >
             {{ date2Thai(col.value) }}
           </div>
+          <div
+            v-else-if="
+              col.name == 'positionSalaryAmount' ||
+              col.name == 'mouthSalaryAmount' ||
+              col.name == 'amount'
+            "
+            class="table_ellipsis"
+          >
+            {{ col.value == null ? "" : col.value.toLocaleString("en-US") }}
+          </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
           </div>
@@ -551,8 +571,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -592,6 +611,23 @@ const selected = ref<string>("");
 const nodesTree = ref<treeTab[]>([]);
 const refSelected = ref<DataOption | null>(null);
 const refOptions = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
   {
     id: "0",
     name: "****************  ครู  **********************",
@@ -707,6 +743,23 @@ const refOptions = ref<DataOption[]>([
   },
 ]);
 const refOptionsFilter = ref<DataOption[]>([
+  {
+    id: "17",
+    name: "****************  ข้าราชการสามัญ  **********************",
+    disable: true,
+  },
+  {
+    id: "18",
+    name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "19",
+    name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "20",
+    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
   {
     id: "0",
     name: "****************  ครู  **********************",
@@ -930,7 +983,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -1097,7 +1150,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "posNo",
     align: "left",
-    label: "เลขที่ตำแหน่ง",
+    label: "ตำแหน่งเลขที่",
     sortable: true,
     field: "posNo",
     headerStyle: "font-size: 14px",
@@ -1312,7 +1365,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 };
 
 const nodeTree = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileOrganizRoot)
     .then((res: any) => {
@@ -1326,7 +1379,7 @@ const nodeTree = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1334,7 +1387,7 @@ const nodeTree = async () => {
  * get รายการ ตำแหน่ง
  */
 const fetchPosition = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.position)
     .then((res) => {
@@ -1411,12 +1464,12 @@ const fetchPosition = async () => {
     })
     .catch((e: any) => {})
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileSalaryId(profileId.value))
     .then((res) => {
@@ -1458,7 +1511,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1468,7 +1521,7 @@ const onSelected = async (id: string) => {
 
 const fetchOrganization = async (id: string) => {
   if (selected.value != "") {
-    showLoader();
+    loaderPage(true);
     await http
       .get(config.API.organizationName(id))
       .then((res) => {
@@ -1479,13 +1532,13 @@ const fetchOrganization = async (id: string) => {
         messageError($q, e);
       })
       .finally(() => {
-        hideLoader();
+        loaderPage(false);
       });
   }
 };
 
 const fetchPositionNumber = async (id: string) => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
     .then((res) => {
@@ -1501,7 +1554,7 @@ const fetchPositionNumber = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -1603,7 +1656,7 @@ const templateDetail = async () => {
     (r: DataOption) => r.id == posNoId.value
   );
   if (posNoF.length > 0) {
-    salaryClass.value = salaryClass.value + `เลขที่ตำแหน่ง${posNoF[0].name} `;
+    salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
   }
 
   const positionLineF = positionLineOptions.value.filter(
@@ -1664,7 +1717,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileSalaryId(profileId.value), {
       date: dateToISO(date.value),
@@ -1699,7 +1752,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileSalaryId(id.value), {
       date: dateToISO(date.value),
@@ -1742,7 +1795,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileSalaryId(id.value))
         .then((res) => {
@@ -1884,7 +1937,7 @@ const clickEditRowRef = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileSalaryHisId(row.id))
     .then((res) => {
@@ -1926,7 +1979,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Table.vue

@@ -5,9 +5,11 @@
       :header="name"
       :icon="icon"
       :add="checkAdd"
+      :addleave="checkAddLeave"
       :addData="true"
       :history="false"
       :disable="statusEdit"
+      :iconAdd="iconAdd"
     />
     <q-space />
     <div class="items-center" style="display: flex" v-if="headerShow">
@@ -95,6 +97,10 @@ const props = defineProps({
   inputfilter: String,
   name: String,
   icon: String,
+  iconAdd: {
+    type: String,
+    default: null,
+  },
   inputvisible: Array,
   editvisible: Boolean,
   headerShow: {
@@ -113,6 +119,10 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
   cancel: {
     type: Function,
     default: () => console.log("not function"),
@@ -143,6 +153,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
   return start + "-" + end + " ใน " + total;
 };
 
+const checkAddLeave = () => {
+  props.addleave();
+};
+
 const checkAdd = () => {
   props.add();
 };

src/modules/04_registry/components/TableProfile.vue

@@ -119,7 +119,29 @@
             <div class="dialog-card-contain">
               <q-card-section class="q-pa-md">
                 <div class="row col-12 q-col-gutter-sm">
-                  <div class="col-xs-12 col-sm-4">
+                  <div class="col-xs-12 col-sm-3">
+                    <selector
+                      hide-bottom-space
+                      :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                      outlined
+                      dense
+                      lazy-rules
+                      :model-value="employeeClass"
+                      emit-value
+                      map-options
+                      :options="employeeClassOps"
+                      option-label="name"
+                      option-value="id"
+                      :label="`${'ประเภท'}`"
+                      use-input
+                      input-debounce="0"
+                      @update:model-value="updateEmployeeClass"
+                    />
+                  </div>
+                  <!-- @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
+                      ) " -->
+                  <div class="col-xs-12 col-sm-2">
                     <q-input
                       clearable
                       dense
@@ -132,7 +154,7 @@
                       type="number"
                     />
                   </div>
-                  <div class="col-xs-12 col-sm-4">
+                  <div class="col-xs-12 col-sm-3">
                     <q-input
                       clearable
                       dense
@@ -206,7 +228,7 @@
                       color="primary"
                       @update:model-value="updateIsShowRetire"
                     >
-                      แสดงข้อมูลผู้พ้นจากราชการ/เกษียณอายุราชการ/เสียชีวิต/โอน/ลาออก
+                      แสดงข้อมูลผู้พ้นจากราชการ
                     </q-toggle>
                     <q-toggle
                       dense
@@ -216,8 +238,19 @@
                     >
                       ทดลองปฏิบัติหน้าที่ราชการ
                     </q-toggle>
+                    <q-space />
+                    <div>
+                      <q-btn
+                        dense
+                        color="primary"
+                        icon="mdi-magnify"
+                        label="ค้นหา"
+                        class="q-px-md"
+                        @click="doSearch"
+                      />
+                    </div>
                   </div>
-                  <div class="col-12 row q-col-gutter-y-md">
+                  <!-- <div class="col-12 row q-col-gutter-y-md">
                     <div class="row q-gutter-md">
                       <q-radio
                         dense
@@ -248,7 +281,7 @@
                         @click="doSearch"
                       />
                     </div>
-                  </div>
+                  </div> -->
                 </div>
               </q-card-section>
             </div>
@@ -272,6 +305,7 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
 
 const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
@@ -280,16 +314,23 @@ const searchPanel = ref<boolean>(true);
 const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการกทม.สามัญ" },
+  { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "temp", name: "ลูกจ้างชั่วคราว" },
+]);
 
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
   profileId: String,
+  employeeClass: String,
   fullName: String,
   oldFullName: String,
   isShowRetire: Boolean,
   isProbation: Boolean,
-  profileType: String,
+  //   profileType: String,
   retireYear: Number || null,
   govAge: Number || null,
   isTab: {
@@ -314,13 +355,14 @@ const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
   "update:profileId",
+  "update:employeeClass",
   "update:fullName",
   "update:oldFullName",
   "update:oldName",
   "update:retireYear",
   "update:govAge",
   "update:isShowRetire",
-  "update:profileType",
+  //   "update:profileType",
   "update:isProbation",
 ]);
 
@@ -334,6 +376,9 @@ const updateVisible = (value: []) => {
 const updateProfileId = (value: string | number | null) => {
   emit("update:profileId", value);
 };
+const updateEmployeeClass = (value: string | number | null) => {
+  emit("update:employeeClass", value);
+};
 const updateFullname = (value: string | number | null) => {
   emit("update:fullName", value);
 };
@@ -349,9 +394,9 @@ const updateIsShowRetire = (value: string | number | null) => {
 const updateIsProbation = (value: string | number | null) => {
   emit("update:isProbation", value);
 };
-const updateProfileType = (value: string | number | null) => {
+// const updateProfileType = (value: string | number | null) => {
-  emit("update:profileType", value);
+//   emit("update:profileType", value);
-};
+// };
 
 const clearDate = () => {
   emit("update:retireYear", null);
@@ -364,6 +409,7 @@ const clickSearchPanel = () => {
   emit("update:oldFullName", null);
   emit("update:fullName", null);
   emit("update:profileId", null);
+  emit("update:employeeClass", null);
   searchPanel.value = !searchPanel.value;
 };
 

src/modules/04_registry/components/Talent.vue

@@ -291,8 +291,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const field = ref<string>();
@@ -507,7 +506,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAbiliId(profileId.value))
     .then((res) => {
@@ -531,7 +530,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -620,7 +619,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileAbiliId(profileId.value), {
       id: id.value,
@@ -647,7 +646,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileAbiliId(id.value), {
       id: id.value,
@@ -682,7 +681,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileAbiliId(id.value))
         .then((res) => {
@@ -794,7 +793,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileAbiliHisId(row.id))
     .then((res) => {
@@ -818,7 +817,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Train.vue

@@ -431,8 +431,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -752,7 +751,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileTrainId(profileId.value))
     .then((res) => {
@@ -780,7 +779,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -873,7 +872,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileTrainId(profileId.value), {
       id: id.value,
@@ -904,7 +903,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileTrainId(id.value), {
       id: id.value,
@@ -943,7 +942,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileTrainId(id.value))
         .then((res) => {
@@ -1063,7 +1062,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileTrainHisId(row.id))
     .then((res) => {
@@ -1091,7 +1090,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/Work.vue

@@ -261,8 +261,7 @@ const { profileData, changeProfileColumns } = store;
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+const { date2Thai, success, dateToISO, messageError } = mixin;
-  mixin;
 const route = useRoute();
 const id = ref<string>("");
 const dateStart = ref<Date>(new Date());
@@ -427,7 +426,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDutyId(profileId.value))
     .then((res) => {
@@ -449,7 +448,7 @@ const fetchData = async () => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 
@@ -536,7 +535,7 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .post(config.API.profileDutyId(profileId.value), {
       id: id.value,
@@ -561,7 +560,7 @@ const saveData = async () => {
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
+  loaderPage(true);
   await http
     .put(config.API.profileDutyId(id.value), {
       id: id.value,
@@ -594,7 +593,7 @@ const clickDelete = async () => {
     persistent: true,
   })
     .onOk(async () => {
-      showLoader();
+      loaderPage(true);
       await http
         .delete(config.API.profileDutyId(id.value))
         .then((res) => {
@@ -702,7 +701,7 @@ const clickEditRow = () => {
  */
 const clickHistory = async (row: RequestItemsObject) => {
   modalHistory.value = true;
-  showLoader();
+  loaderPage(true);
   await http
     .get(config.API.profileDutyHisId(row.id))
     .then((res) => {
@@ -724,7 +723,7 @@ const clickHistory = async (row: RequestItemsObject) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      loaderPage(false);
     });
 };
 

src/modules/04_registry/components/profileType.ts

@@ -63,11 +63,13 @@ interface Address {
 interface Goverment {
   ocId: string | null;
   positionId: string | null;
-  workId: string | null;
+  positionPathSide: string | null;
-  typeId: string | null;
+  positionLine: string | null;
-  levelId: string | null;
+  positionType: string | null;
+  positionLevel: string | null;
   numberId: string | null;
-  businessId: string | null;
+  positionExecutive: string | null;
+  positionExecutiveSide: string | null;
   containDate: Date;
   workDate: Date;
   retireDate: string | null;
@@ -92,11 +94,13 @@ interface zipCodeOption {
 const defaultGoverment: Goverment = {
   ocId: null,
   positionId: null,
-  workId: null,
+  positionPathSide: null,
-  typeId: null,
+  positionLine: null,
-  levelId: null,
+  positionType: null,
+  positionLevel: null,
   numberId: null,
-  businessId: null,
+  positionExecutive: null,
+  positionExecutiveSide: null,
   containDate: new Date(),
   workDate: new Date(),
   retireDate: null,

src/modules/04_registry/interface/index/Main.ts

@@ -9,6 +9,12 @@ interface DataOption {
   disable?: boolean;
 }
 
+interface DataOptionLeave {
+  id: string;
+  name: string;
+  totalLeave: number;
+}
+
 interface DataOptionInsignia {
   id: string;
   name: string;
@@ -23,6 +29,7 @@ interface treeTab {
 
 interface InformationOps {
   prefixOps: DataOption[];
+  prefixOldOps: DataOption[];
   genderOps: DataOption[];
   bloodOps: DataOption[];
   statusOps: DataOption[];
@@ -31,6 +38,11 @@ interface InformationOps {
   employeeTypeOps: DataOption[];
 }
 
+interface OldNameOps {
+  prefixOps: DataOption[];
+  statusOps: DataOption[];
+}
+
 interface AddressOps {
   provinceOps: DataOption[];
   districtOps: DataOption[];
@@ -62,9 +74,11 @@ export type {
   DataOptionInsignia,
   treeTab,
   InformationOps,
+  OldNameOps,
   AddressOps,
   FamilyOps,
   EduOps,
   InsigniaOps,
   DisciplineOps,
+  DataOptionLeave,
 };

src/modules/04_registry/interface/request/Assessment.ts

@@ -6,7 +6,12 @@ interface DataProps {
 //ข้อมูล
 interface RequestItemsObject {
   id: string;
-  point: number;
+  point1Total: number;
+  point1: number;
+  point2Total: number;
+  point2: number;
+  pointSumTotal: number;
+  pointSum: number;
   name: string;
   date: Date;
   createdFullName: string;

src/modules/04_registry/interface/request/Government.ts

@@ -16,11 +16,13 @@ interface RequestItemsObject {
 interface RequestItemsHistoryObject {
   oc: string | null;
   position: string | null;
+  positionPathSide: string | null;
   posNo: string | null;
   positionLine: string | null;
   positionType: string | null;
   positionLevel: string | null;
   positionExecutive: string | null;
+  positionExecutiveSide: string | null;
   dateAppoint: Date;
   dateStart: Date;
   retireDate: string | null;

src/modules/04_registry/interface/request/Leave.ts

@@ -6,20 +6,24 @@ interface DataProps {
 //ข้อมูล
 interface RequestItemsObject {
   id: string;
-  year: number;
+  typeLeave: string;
-  sickDay: number;
+  dateStartLeave: Date;
-  personalDay: number;
+  dateEndLeave: Date;
-  maternityDay: number;
+  numLeave: number;
-  wifeDay: number;
+  sumLeave: number;
-  sickCount: number;
+  totalLeave: number;
-  ordainDay: number;
+  status: string;
-  absentDay: number;
+  reason: string;
-  studyDay: number;
+  typeLeaveId: string;
-  agencyDay: number;
+}
-  coupleDay: number;
+
-  therapyDay: number;
+//ข้อมูล
-  createdFullName: string;
+interface RequestItemsTotalObject {
-  createdAt: Date;
+  typeLeaveId: string;
+  typeLeave: string;
+  totalLeave: number;
+  limitLeave: string;
+  remainLeave: string;
 }
 
 //columns
@@ -35,4 +39,4 @@ interface Columns {
   };
 }
 
-export type { RequestItemsObject, Columns, DataProps };
+export type { RequestItemsObject, Columns, DataProps, RequestItemsTotalObject };

src/modules/04_registry/interface/request/Main.ts

@@ -2,20 +2,35 @@
 interface RequestItemsObject {
   id: number;
   fullname: String;
+  fullnameOld: String;
   avatar: String;
   citizenId: String;
-  //   oc: String;
+  oc: String;
   position: String;
-  numberPosition: String;
+  positionPathSide: String;
+  numberPosition: String | null;
   positionLine: String;
   positionType: String;
   govAge: number;
   positionLevel: String;
-  positionExecutive: String;
+  positionExecutive: String | null;
-  dateAppoint: Date | null;
+  positionExecutiveSide: String | null;
-  dateStart: Date | null;
+  refSalary: String;
-  createdAt: Date | null;
+  positionEmployeePosition: String | null;
-  salaryDate: Date | null;
+  positionEmployeePositionSide: String | null;
+  positionEmployeeLevel: String | null;
+  positionEmployeeGroup: String | null;
+  dateAppoint: Date | string | null;
+  dateStart: Date | string | null;
+  createdAt: Date | string | null;
+  salaryDate: Date | string | null;
+  leaveReason: String;
+  age: String;
+  amount: String;
+  insignia: String;
+  insigniaLast: String;
+  isLeave: String;
+  leaveDateOrder: Date | string | null;
 }
 
 //columns

src/modules/04_registry/interface/request/OldName.ts

@@ -0,0 +1,32 @@
+interface DataProps {
+  row: RequestItemsObject;
+  rowIndex: number;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  id: string;
+  prefix: string;
+  prefixId: string;
+  firstName: string;
+  lastName: string;
+  status: string;
+  file: string | null;
+  createdFullName: string;
+  createdAt: Date;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type { RequestItemsObject, Columns, DataProps };