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

# Conflicts:
#	src/api/05_placement/api.placement.ts
#	src/api/index.ts
#	src/modules/05_placement/components/pass/Table.vue

src/api/02_organizational/api.treelist.ts

@@ -10,6 +10,7 @@ import env from "../index";
 const organizationPath = `${env.API_URI_ORG_SERVICE}/Organization/`;
 const postionMasterPath = `${env.API_URI_ORG_SERVICE}/PositionMaster`;
 const organizationPosition = `${env.API_URI_ORG_SERVICE}/OrganizationPosition/`;
+const organizationEmployeePosition = `${env.API_URI_ORG_EMPLOYEE_SERVICE}/organization-employee/`;
 
 const report = `${env.API_URI}/report/organization/`;
 
@@ -83,8 +84,7 @@ export default {
   getPositionNumberIdByOcId: (OcId: string) =>
     `${postionMasterPath}/position-number/Oc/${OcId}`,
 
-
+  organizationEmployeePosition: `${organizationEmployeePosition}`,
-  /**
+  organizationEmployeePositionId: (id: string) =>
-   * api ประวัติการ publish
+    `${organizationEmployeePosition}${id}`,
-   */
 };

src/api/05_placement/api.placement.ts

@@ -1,11 +1,21 @@
-/**
- * api บรรจุ แต่งตั้ง ย้าย โอน
- */
 import env from "../index";
-
+const placement = `${env.API_URI}/Placement/placement`;
-const placement = `${env.API_PLACEMENT_URI}/Placement/placement/`;
+const orgTree = `${env.API_URI_ORG_TREE}`;
 
 export default {
+  MainDetail: (year: number) => `${placement}/exam/${year}`,
+  yearOptions: () => `${placement}/fiscal`,
+  redirectToPage: (examId: string) => `${placement}/pass/${examId}`,
+  disclaimF: () => `${placement}/pass/disclaim`,
+  deferment: () => `${placement}/pass/deferment`,
+  getStatCard: (examId: string) => `${placement}/pass/stat/${examId}`,
+  getDatapersonal: (id: string) => `${placement}/personal/${id}`,
+  putProperty: (id: string) => `${placement}/property/${id}`,
+  orgTree: orgTree,
+  placementPass: () => `${placement}/pass`,
+  placementDefermentInfo: (id: string) => `${placement}/pass/deferment/${id}`,
+  placementDisclaimInfo: (id: string) => `${placement}/pass/disclaim/${id}`,
+
   //personal
   placementPersonalId: (personalId: string) =>
     `${placement}personal/${personalId}`,

src/api/index.ts

@@ -8,10 +8,12 @@ const env = ref<string>(process.env.NODE_ENV || "development");
 
 const config = ref<any>({
   development: {
-    // API_URI: "https://localhost:7006/api/v1",
+    // API_URI: "https://localhost:7260/api",
     API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
     API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
+    API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
+    // API_URI_ORG_EMPLOYEE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
     // API_URI_PROFILE_SERVICE: "https://localhost:7159/api/v1",
     API_URI_PROFILE_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
     // API_CANDIDATE_URI: "https://localhost:7007/api/v1",
@@ -19,6 +21,8 @@ const config = ref<any>({
     // API_REPORT_URI: "https://localhost:7187/api/v1",
     API_REPORT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     API_PLACEMENT_URI: "https://localhost:7260/api",
+    API_URI_ORG_TREE:
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
   },
   test: {
@@ -31,9 +35,12 @@ const config = ref<any>({
     // API_URI: "https://localhost:5010",
     API_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_URI_ORG_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
+    API_URI_ORG_EMPLOYEE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`, //ใช้ชั่วคราว
     API_URI_PROFILE_SERVICE: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_CANDIDATE_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
     API_REPORT_URI: `${window.location.protocol}//${window.location.host}/api/v1`,
+    API_URI_ORG_TREE:
+      "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230707_115124.json",
     MEET_URI: "meet.frappet.com",
   },
 });
@@ -46,6 +53,9 @@ const API_REPORT_URI = ref<string>(config.value[env.value].API_REPORT_URI);
 const API_URI_ORG_SERVICE = ref<string>(
   config.value[env.value].API_URI_ORG_SERVICE
 );
+const API_URI_ORG_EMPLOYEE_SERVICE = ref<string>(
+  config.value[env.value].API_URI_ORG_EMPLOYEE_SERVICE
+);
 const MEET_URI = ref<string>(config.value[env.value].MEET_URI);
 const API_URI_PROFILE_SERVICE = ref<string>(
   config.value[env.value].API_URI_PROFILE_SERVICE
@@ -53,6 +63,7 @@ const API_URI_PROFILE_SERVICE = ref<string>(
 const API_PLACEMENT_URI = ref<string>(
   config.value[env.value].API_PLACEMENT_URI
 );
+const API_URI_ORG_TREE = ref<string>(config.value[env.value].API_URI_ORG_TREE);
 
 export default {
   env: env.value,
@@ -61,7 +72,9 @@ export default {
   API_CANDIDATE_URI: API_CANDIDATE_URI.value,
   API_REPORT_URI: API_REPORT_URI.value,
   API_URI_ORG_SERVICE: API_URI_ORG_SERVICE.value,
+  API_URI_ORG_EMPLOYEE_SERVICE: API_URI_ORG_EMPLOYEE_SERVICE.value,
   API_URI_PROFILE_SERVICE: API_URI_PROFILE_SERVICE.value,
   API_PLACEMENT_URI: API_PLACEMENT_URI.value,
+  API_URI_ORG_TREE: API_URI_ORG_TREE.value,
   MEET_URI: MEET_URI.value,
 };

src/api/manage/api.organization.ts

@@ -3,6 +3,7 @@
  *  เมนูย่อย: ข้อมูลโครงสร้างหน่วยงาน
  */
 import env from "../index";
+const organizationMain = `${env.API_URI}/metadata/main/`;
 const organization = `${env.API_URI}/metadata/organization/`;
 const organizationOrganization = `${env.API_URI}/metadata/organization-organization/`;
 const organizationShortName = `${env.API_URI}/metadata/organization-shortname/`;
@@ -21,6 +22,7 @@ export default {
   /**
    * api จำนวนข้อมูลใน ระบบจัดการข้อมูลหลัก tab ย่อยแต่ละ tab
    */
+  organizationMain: `${organizationMain}organization`,
   organization,
   countDashbordSubHistory: (type: number) => `${dashbord}${type}`,
   countDashbordHistory: `${dashbord}`,

src/api/manage/api.positionEmployee.ts

@@ -3,6 +3,7 @@
  *  เมนูย่อย: ข้อมูลตำแหน่งของลูกจ้างกรุงเทพมหานคร
  */
 import env from "../index";
+const positionEmployee = `${env.API_URI}/metadata/main/`;
 const positionEmployeePosition = `${env.API_URI}/metadata/position-employee-position/`;
 const positionEmployeePositionSide = `${env.API_URI}/metadata/position-employee-position-side/`;
 const positionEmployeeGroup = `${env.API_URI}/metadata/position-employee-group/`;
@@ -11,6 +12,7 @@ const positionEmployeeLevel = `${env.API_URI}/metadata/position-employee-level/`
 const positionEmployeeStatus = `${env.API_URI}/metadata/position-employee-status/`;
 
 export default {
+  positionEmployee: `${positionEmployee}positionEmployee`,
   /**
    * api ตำแหน่ง
    */

src/interface/request/main/main.ts

@@ -88,11 +88,16 @@ const menuList = readonly<any[]>([
       },
       {
         key: 3.5,
+        label: "ผังโครงสร้างลูกจ้าง",
+        path: "organizationalEmployee",
+      },
+      {
+        key: 3.6,
         label: "จัดการบัญชี 2",
         path: "manageReport2",
       },
       {
-        key: 3.6,
+        key: 3.7,
         label: "รายงานบัญชี",
         path: "organizationalReport",
       },

src/modules/01_metadata/components/positionEmployee/Group.vue

@@ -437,7 +437,7 @@ const fetchHistory = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 };

src/modules/02_organizational/router.ts

@@ -9,6 +9,8 @@ const MainStructChart = () =>
 const MainOrgChart = () =>
   import("@/modules/02_organizational/views/MainOrgChart.vue");
 const MainTree = () => import("@/modules/02_organizational/views/MainTree.vue");
+const MainTreeEmployee = () =>
+  import("@/modules/02_organizational/views/MainTreeEmployee.vue");
 const MainReport = () =>
   import("@/modules/02_organizational/views/MainReport.vue");
 const ManageReport2 = () =>
@@ -60,6 +62,16 @@ export default [
       Role: "organization",
     },
   },
+  {
+    path: "/organizational/employee",
+    name: "organizationalEmployee",
+    component: MainTreeEmployee,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "organization",
+    },
+  },
   {
     path: "/organizational/manage/report",
     name: "manageReport2",

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

@@ -29,11 +29,7 @@
             @click="isDrawer = false"
             v-if="isDrawer"
           >
-						<q-icon
+            <q-icon name="chevron_left" size="20px" color="grey-7" />
-							name="chevron_left"
-							size="20px"
-							color="grey-7"
-						/>
           </q-btn>
           <q-scroll-area class="fit">
             <div class="row col-12 text-dark q-pt-sm">
@@ -46,25 +42,15 @@
                       'https://cdn.quasar.dev/img/boy-avatar.png'
                   "
                   src="@/assets/avatar_user.jpg"
-									style="
+                  style="width: 90px; height: 90px; border-radius: 50%"
-										width: 90px;
-										height: 90px;
-										border-radius: 50%;
-									"
                 />
                 <img
                   v-else
                   :src="personDetail.avatar"
-									style="
+                  style="width: 90px; height: 90px; border-radius: 50%"
-										width: 90px;
-										height: 90px;
-										border-radius: 50%;
-									"
                 />
               </div>
-							<div
+              <div class="col-12 items-center row col-12 justify-center">
-								class="col-12 items-center row col-12 justify-center"
-							>
                 <div style="font-weight: 600" class="q-mr-xs">
                   {{ personDetail ? personDetail.name : "" }}
                 </div>
@@ -79,22 +65,12 @@
                 </q-btn>
               </div>
               <div class="q-pl-lg q-pt-sm q-gutter-xs textSub">
-								<div
+                <div class="text-weight-medium q-pt-md row items-center">
-									class="text-weight-medium q-pt-md row items-center"
+                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
-								>
-									<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.positionNum : "" }}
-										personDetail
-											? personDetail.positionNum
-											: ""
-									}}
                 </div>
 
                 <!-- <div class="text-weight-medium q-pt-md row items-center">
@@ -105,40 +81,20 @@
                   {{ personDetail ? personDetail.executivePosition : "" }}
                 </div> -->
 
-								<div
+                <div class="text-weight-medium q-pt-md row items-center">
-									class="text-weight-medium q-pt-md row items-center"
+                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
-								>
-									<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.positionType : "" }}
-										personDetail
-											? personDetail.positionType
-											: ""
-									}}
                 </div>
 
-								<div
+                <div class="text-weight-medium q-pt-md row items-center">
-									class="text-weight-medium q-pt-md row items-center"
+                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
-								>
-									<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.positionLevel : "" }}
-										personDetail
-											? personDetail.positionLevel
-											: ""
-									}}
                 </div>
               </div>
             </div>
@@ -172,9 +128,7 @@
                     size="14px"
                     icon="mdi-history"
                     @click="clickHistory"
-										><q-tooltip
+                    ><q-tooltip>ประวัติการเผยแพร่</q-tooltip>
-											>ประวัติการเผยแพร่</q-tooltip
-										>
                   </q-btn>
                 </div>
                 <q-space />
@@ -198,10 +152,7 @@
                   debounce="300"
                 >
                   <template v-slot:append>
-										<q-icon
+                    <q-icon v-if="treeFilter == ''" name="search" />
-											v-if="treeFilter == ''"
-											name="search"
-										/>
                     <q-icon
                       v-if="treeFilter !== ''"
                       name="clear"
@@ -229,9 +180,7 @@
               >
                 <!--organization บรรทัดแสดงชื่อหน่วยงาน -->
                 <template v-slot:header-organization="prop">
-									<div
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-									>
                     <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                     <div>
                       <div class="text-weight-medium">
@@ -239,48 +188,34 @@
                       </div>
                       <div class="text-weight-light">
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
-														: prop.node
+                            : prop.node.governmentCode
-																.governmentCode
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.agency
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.government
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.department
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.pile
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
-														: prop.node
+                            : prop.node.organizationShortName
-																.organizationShortName
                         }}
                       </div>
                     </div>
@@ -289,21 +224,14 @@
                       rounded
                       color="grey-2"
                       text-color="dark"
-											:label="
+                      :label="prop.node.totalPositionCount"
-												prop.node.totalPositionCount
-											"
                     />
                     <q-badge
-											v-if="
+                      v-if="prop.node.totalPositionVacant > 0"
-												prop.node.totalPositionVacant >
-												0
-											"
                       rounded
                       color="red"
                       outline
-											:label="
+                      :label="prop.node.totalPositionVacant"
-												prop.node.totalPositionVacant
-											"
                     />
                   </div>
                 </template>
@@ -321,26 +249,15 @@
                       "
                       src="@/assets/avatar_user.jpg"
                       class="col-xs-1 col-sm-2"
-											style="
+                      style="width: 28px; height: 28px; border-radius: 50%"
-												width: 28px;
-												height: 28px;
-												border-radius: 50%;
-											"
                     />
                     <img
                       v-else
                       :src="prop.node.avatar"
                       class="col-xs-1 col-sm-2"
-											style="
+                      style="width: 28px; height: 28px; border-radius: 50%"
-												width: 28px;
-												height: 28px;
-												border-radius: 50%;
-											"
                     />
-										<div
+                    <div class="row" @click="seeUserDetail(prop.node)">
-											class="row"
-											@click="seeUserDetail(prop.node)"
-										>
                       <!--=====ตำแหน่งว่าง สีแดง=====-->
                       <div
                         v-if="
@@ -353,22 +270,14 @@
                         ว่าง
                       </div>
                       <!--=====หัวหน้า สีเขียว=====-->
-											<div
+                      <div v-else-if="prop.node.positionLeaderFlag">
-												v-else-if="
+                        <div class="q-px-sm text-weight-medium text-primary">
-													prop.node.positionLeaderFlag
-												"
-											>
-												<div
-													class="q-px-sm text-weight-medium text-primary"
-												>
                           {{ prop.node.name }}
                         </div>
                       </div>
                       <!--=====ลูกน้อง สีปกติ=====-->
                       <div v-else>
-												<div
+                        <div class="q-px-sm text-weight-medium">
-													class="q-px-sm text-weight-medium"
-												>
                           {{ prop.node.name }}
                         </div>
                       </div>
@@ -379,41 +288,29 @@
                       <div
                         class="q-pr-sm"
                         v-if="
-													prop.node.positionType !=
+                          prop.node.positionType != null &&
-														null &&
                           prop.node.positionType != ''
                         "
                       >
-												ประเภท{{
+                        ประเภท{{ `${prop.node.positionType}` }}
-													`${prop.node.positionType}`
-												}}
                       </div>
                       <div
                         class="q-pr-sm"
                         v-if="
-													prop.node.positionLevel !=
+                          prop.node.positionLevel != null &&
-														null &&
+                          prop.node.positionLevel != ''
-													prop.node.positionLevel !=
-														''
                         "
                       >
-												ระดับ{{
+                        ระดับ{{ `${prop.node.positionLevel}` }}
-													`${prop.node.positionLevel}`
-												}}
                       </div>
                       <div
                         class="q-pr-sm"
                         v-if="
-													prop.node
+                          prop.node.executivePosition != null &&
-														.executivePosition !=
+                          prop.node.executivePosition != ''
-														null &&
-													prop.node
-														.executivePosition != ''
                         "
                       >
-												{{
+                        {{ `(${prop.node.executivePosition})` }}
-													`(${prop.node.executivePosition})`
-												}}
                       </div>
                       <div class="q-pr-sm">
                         {{ prop.node.positionNum }}
@@ -455,9 +352,7 @@
               >
                 <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
                 <template v-slot:header-organization="prop">
-									<div
+                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
-									>
                     <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
                     <div>
                       <div class="text-weight-medium">
@@ -465,48 +360,34 @@
                       </div>
                       <div class="text-weight-light">
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
-														: prop.node
+                            : prop.node.governmentCode
-																.governmentCode
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.agency
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.government
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.department
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
                             : prop.node.pile
                         }}
                         {{
-													prop.node
+                          prop.node.organizationParentId == null
-														.organizationParentId ==
-													null
                             ? null
-														: prop.node
+                            : prop.node.organizationShortName
-																.organizationShortName
                         }}
                       </div>
                     </div>
@@ -515,21 +396,14 @@
                       rounded
                       color="grey-2"
                       text-color="dark"
-											:label="
+                      :label="prop.node.totalPositionCount"
-												prop.node.totalPositionCount
-											"
                     />
                     <q-badge
-											v-if="
+                      v-if="prop.node.totalPositionVacant > 0"
-												prop.node.totalPositionVacant >
-												0
-											"
                       rounded
                       color="red"
                       outline
-											:label="
+                      :label="prop.node.totalPositionVacant"
-												prop.node.totalPositionVacant
-											"
                     />
                     <q-btn
                       flat
@@ -537,23 +411,15 @@
                       color="green"
                       @click.stop="
                         (popupAddOrganization = true),
-													(modalHeaderName =
+                          (modalHeaderName = prop.node.organizationName),
-														prop.node
-															.organizationName),
                           (rowClickTree = prop.node),
                           (modalHeaderPosition =
-														prop.node.keyId.search(
+                            prop.node.keyId.search('-') > 0 ? true : false)
-															'-'
-														) > 0
-															? true
-															: false)
                       "
                       size="10px"
                       icon="mdi-plus"
                     >
-											<q-tooltip
+                      <q-tooltip>เพิ่มโครงสร้าง</q-tooltip>
-												>เพิ่มโครงสร้าง</q-tooltip
-											>
                     </q-btn>
                     <!--
                         v-if="
@@ -562,25 +428,16 @@
                       "
                     -->
                     <q-btn
-											v-if="
+                      v-if="prop.node.organizationId != orgRootIdDraft"
-												prop.node.organizationId !=
-												orgRootIdDraft
-											"
                       flat
                       round
                       color="green"
                       @click.stop="
                         (popupEditSelectedOrganization = true),
-													(modalHeaderName =
+                          (modalHeaderName = prop.node.organizationName),
-														prop.node
-															.organizationName),
                           (rowClickTree = prop.node),
                           (modalHeaderPosition =
-														prop.node.keyId.search(
+                            prop.node.keyId.search('-') > 0 ? true : false)
-															'-'
-														) > 0
-															? true
-															: false)
                       "
                       size="10px"
                       icon="mdi-pencil-outline"
@@ -590,10 +447,8 @@
                     <q-btn
                       v-if="
                         prop.node.totalPositionCount ==
-													prop.node
+                          prop.node.totalPositionVacant &&
-														.totalPositionVacant &&
+                        prop.node.organizationId != orgRootIdDraft
-												prop.node.organizationId !=
-													orgRootIdDraft
                       "
                       flat
                       round
@@ -601,9 +456,7 @@
                       size="10px"
                       class="q-mr-sm"
                       icon="mdi-trash-can-outline"
-											@click.stop="
+                      @click.stop="deleteOrganization(prop.node)"
-												deleteOrganization(prop.node)
-											"
                     >
                       <q-tooltip>ลบหน่วยงาน</q-tooltip>
                     </q-btn>
@@ -612,15 +465,11 @@
                 </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 q-px-xs q-pt-xs q-gutter-sm"
-									>
                     <div
                       rounded
                       :style="
-												!prop.node.isActive
+                        !prop.node.isActive ? 'filter: grayscale(60%);' : ''
-													? 'filter: grayscale(60%);'
-													: ''
                       "
                     >
                       <img
@@ -631,69 +480,46 @@
                         "
                         src="@/assets/avatar_user.jpg"
                         class="col-xs-1 col-sm-2"
-												style="
+                        style="width: 28px; height: 28px; border-radius: 50%"
-													width: 28px;
-													height: 28px;
-													border-radius: 50%;
-												"
                       />
                       <img
                         v-else
                         :src="prop.node.avatar"
                         class="col-xs-1 col-sm-2"
-												style="
+                        style="width: 28px; height: 28px; border-radius: 50%"
-													width: 28px;
-													height: 28px;
-													border-radius: 50%;
-												"
                       />
                     </div>
 
                     <div
                       rounded
                       :class="
-												!prop.node.isActive
+                        !prop.node.isActive ? 'text-grey-6' : 'text-black'
-													? 'text-grey-6'
-													: 'text-black'
                       "
                     >
                       <!--=====ตำแหน่งว่าง สีแดง=====-->
                       <div class="row">
                         <div
                           v-if="
-														prop.node.name ==
+                            prop.node.name == `ว่าง` ||
-															`ว่าง` ||
+                            prop.node.name == `N/A` ||
-														prop.node.name ==
-															`N/A` ||
                             prop.node.name == null
                           "
                           class="q-px-sm text-weight-medium"
                           :class="
-														!prop.node.isActive
+                            !prop.node.isActive ? 'text-grey-6' : 'text-red'
-															? 'text-grey-6'
-															: 'text-red'
                           "
                         >
                           ว่าง
                         </div>
                         <!--=====หัวหน้า สีเขียว=====-->
-												<div
+                        <div v-else-if="prop.node.positionLeaderFlag">
-													v-else-if="
+                          <div class="q-px-sm text-weight-medium text-primary">
-														prop.node
-															.positionLeaderFlag
-													"
-												>
-													<div
-														class="q-px-sm text-weight-medium text-primary"
-													>
                             {{ prop.node.name }}
                           </div>
                         </div>
                         <!--=====ลูกน้อง สีปกติ=====-->
                         <div v-else>
-													<div
+                          <div class="q-px-sm text-weight-medium">
-														class="q-px-sm text-weight-medium"
-													>
                             {{ prop.node.name }}
                           </div>
                         </div>
@@ -704,59 +530,38 @@
                         <div
                           class="q-pr-sm"
                           v-if="
-														prop.node
+                            prop.node.positionType != null &&
-															.positionType !=
+                            prop.node.positionType != ''
-															null &&
-														prop.node
-															.positionType != ''
                           "
                         >
-													ประเภท{{
+                          ประเภท{{ prop.node.positionType }}
-														prop.node.positionType
-													}}
                         </div>
                         <div
                           class="q-pr-sm"
                           v-if="
-														prop.node
+                            prop.node.positionLevel != null &&
-															.positionLevel !=
+                            prop.node.positionLevel != ''
-															null &&
-														prop.node
-															.positionLevel != ''
                           "
                         >
-													ระดับ{{
+                          ระดับ{{ prop.node.positionLevel }}
-														prop.node.positionLevel
-													}}
                         </div>
                         <div
                           class="q-pr-sm"
                           v-if="
-														prop.node
+                            prop.node.executivePosition != null &&
-															.executivePosition !=
+                            prop.node.executivePosition != ''
-															null &&
-														prop.node
-															.executivePosition !=
-															''
                           "
                         >
-													{{
+                          {{ `(${prop.node.executivePosition})` }}
-														`(${prop.node.executivePosition})`
-													}}
                         </div>
                         <div class="q-pr-sm">
                           {{ prop.node.positionNum }}
                         </div>
                       </div>
-											<div
+                      <div class="q-pl-sm text-weight-light">
-												class="q-pl-sm text-weight-light"
-											>
                         {{ prop.node.positionSideName }}
                         <!-- {{ prop.node.executivePosition }} -->
-												{{
+                        {{ prop.node.executivePositionSide }}
-													prop.node
-														.executivePositionSide
-												}}
                       </div>
                     </div>
                     <q-icon
@@ -777,15 +582,10 @@
                       color="green"
                       @click.stop="
                         (popupEditSelectedPosition = true),
-													(modalHeaderName =
+                          (modalHeaderName = prop.node.positionName),
-														prop.node.positionName),
                           (rowClickTree = prop.node),
                           (modalHeaderPosition =
-														prop.node.keyId.search(
+                            prop.node.keyId.search('-') > 0 ? true : false)
-															'-'
-														) > 0
-															? true
-															: false)
                       "
                       size="10px"
                       icon="mdi-pencil-outline"
@@ -804,9 +604,7 @@
                       size="10px"
                       class="q-mr-sm"
                       icon="mdi-trash-can-outline"
-											@click.stop="
+                      @click.stop="deletePosition(prop.node)"
-												deletePosition(prop.node)
-											"
                     >
                       <q-tooltip>ลบตำแหน่ง</q-tooltip>
                     </q-btn>
@@ -827,9 +625,7 @@
         <q-dialog v-model="popupAddOrganization" persistent>
           <q-card class="text-dark" style="min-width: 950px">
             <q-card-section class="row items-center q-py-sm">
-							<div class="text-bold">
+              <div class="text-bold">เพิ่มโครงสร้างอัตรากำลังภายใต้</div>
-								เพิ่มโครงสร้างอัตรากำลังภายใต้
-							</div>
               <strong class="text-primary q-pl-sm">{{
                 modalHeaderName
               }}</strong>
@@ -839,10 +635,7 @@
                 unelevated
                 round
                 dense
-								style="
+                style="color: #ff8080; background-color: #ffdede"
-									color: #ff8080;
-									background-color: #ffdede;
-								"
                 size="12px"
                 v-close-popup
               />
@@ -869,10 +662,7 @@
 
             <q-separator />
 
-						<q-card-actions
+            <q-card-actions align="right" class="text-primary q-py-sm">
-							align="right"
-							class="text-primary q-py-sm"
-						>
               <!-- Save for Add Organizations & Positions -->
               <q-btn
                 flat
@@ -901,10 +691,7 @@
                 unelevated
                 round
                 dense
-								style="
+                style="color: #ff8080; background-color: #ffdede"
-									color: #ff8080;
-									background-color: #ffdede;
-								"
                 size="12px"
                 v-close-popup
               />
@@ -919,10 +706,7 @@
               />
             </q-card-section>
             <q-separator />
-						<q-card-actions
+            <q-card-actions align="right" class="text-primary q-py-sm">
-							align="right"
-							class="text-primary q-py-sm"
-						>
               <!-- save Edit Selected Position -->
               <q-btn
                 flat
@@ -951,10 +735,7 @@
                 unelevated
                 round
                 dense
-								style="
+                style="color: #ff8080; background-color: #ffdede"
-									color: #ff8080;
-									background-color: #ffdede;
-								"
                 size="12px"
                 v-close-popup
               />
@@ -968,10 +749,7 @@
               />
             </q-card-section>
             <q-separator />
-						<q-card-actions
+            <q-card-actions align="right" class="text-primary q-py-sm">
-							align="right"
-							class="text-primary q-py-sm"
-						>
               <!-- save Edit Selected Organization -->
               <q-btn
                 flat
@@ -1020,12 +798,7 @@
               color="red"
               class="text-h5"
             />
-						<q-icon
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-							v-else
-							name="mdi-check"
-							color="positive"
-							class="text-h5"
-						/>
           </div>
           <div v-else class="">
             {{ col.value }}
@@ -1058,15 +831,11 @@ import type {
 } from "@/modules/02_organizational/interface/request/Mapping";
 const positionsComponent = defineAsyncComponent(
   () =>
-		import(
+    import("@/modules/02_organizational/components/Tree/MappingPositions.vue")
-			"@/modules/02_organizational/components/Tree/MappingPositions.vue"
-		)
 ); //ชุด Dropdown ตำแหน่ง
 const organizationComponent = defineAsyncComponent(
   () =>
-		import(
+    import("@/modules/02_organizational/components/Tree/OrganizationDialog.vue")
-			"@/modules/02_organizational/components/Tree/OrganizationDialog.vue"
-		)
 ); //ชุด Dropdown หน่วยงาน for Add
 const organizationEditComponent = defineAsyncComponent(
   () =>
@@ -1076,8 +845,7 @@ const organizationEditComponent = defineAsyncComponent(
 ); //ชุด Dropdown หน่วยงาน for Edit ครั้งละ 1 หน่วยงาน
 
 const buttonsSet = defineAsyncComponent(
-	() =>
+  () => import("@/modules/02_organizational/components/Tree/TreeButtonsSet.vue")
-		import("@/modules/02_organizational/components/Tree/TreeButtonsSet.vue")
 ); //ชุด ปุ่มกด copy from TableView but delete Table
 
 // import CustomComponent from "@/components/CustomDialog.vue";
@@ -1830,26 +1598,20 @@ const editOrgStructure = async (node: any) => {
           organizationDataEdit.value?.organizationOrganizationId,
         organizationShortNameId:
           organizationDataEdit.value?.organizationShortNameId,
-				organizationTypeId:
+        organizationTypeId: organizationDataEdit.value?.organizationTypeId,
-					organizationDataEdit.value?.organizationTypeId,
+        organizationLevelId: organizationDataEdit.value?.organizationLevelId,
-				organizationLevelId:
-					organizationDataEdit.value?.organizationLevelId,
         organizationTelExternalId:
           organizationDataEdit.value?.organizationExternalPhoneId,
         organizationTelInternalId:
           organizationDataEdit.value?.organizationInternalPhoneId,
-				organizationFaxId:
+        organizationFaxId: organizationDataEdit.value?.organizationFaxId,
-					organizationDataEdit.value?.organizationFaxId,
+        organizationOrder: organizationDataEdit.value?.organizationOrder,
-				organizationOrder:
+        organizationUserNote: organizationDataEdit.value?.organizationUserNote,
-					organizationDataEdit.value?.organizationOrder,
-				organizationUserNote:
-					organizationDataEdit.value?.organizationUserNote,
         agency: organizationDataEdit.value?.agency,
         government: organizationDataEdit.value?.government,
         department: organizationDataEdit.value?.department,
         pile: organizationDataEdit.value?.pile,
-				organizationStatusId:
+        organizationStatusId: organizationDataEdit.value?.organizationStatusId,
-					organizationDataEdit.value?.organizationStatusId,
         isActive: organizationDataEdit.value?.isActive,
       })
       .then(async (res) => {
@@ -1857,10 +1619,7 @@ const editOrgStructure = async (node: any) => {
 
         //reload children nodes by setExpanded mother node
         const nodeSplit = await node.keyId.split("-");
-				const nodeDelete = await nodeSplit.splice(
+        const nodeDelete = await nodeSplit.splice(0, nodeSplit.length - 1);
-					0,
-					nodeSplit.length - 1
-				);
         const nodeJoin = await nodeDelete.join("-");
         qtreeEdit.value.setExpanded(nodeJoin, true);
       })
@@ -1899,25 +1658,19 @@ const editPositionStructure = async (node: any) => {
     loaderPage(true);
     isShowEditTree.value = true; //end prepare for tricker LazyLoad
     await http
-			.put(
+      .put(config.API.editTreePositionDraft(node.organizationPositionId), {
-				config.API.editTreePositionDraft(node.organizationPositionId),
-				{
         positionMasterId: positionData.value[0].positionMasterId,
         positionUserNote: positionData.value[0].positionUserNote,
         isActive: positionData.value[0].isActive,
         isCondition: positionData.value[0].isCondition,
         conditionNote: positionData.value[0].conditionNote,
-				}
+      })
-			)
       .then(async (res) => {
         success($q, "บันทึกข้อมูลร่างสำเร็จ");
 
         //reload children nodes by setExpanded mother node
         const nodeSplit = await node.keyId.split("-");
-				const nodeDelete = await nodeSplit.splice(
+        const nodeDelete = await nodeSplit.splice(0, nodeSplit.length - 1);
-					0,
-					nodeSplit.length - 1
-				);
         const nodeJoin = await nodeDelete.join("-");
         qtreeEdit.value.setExpanded(nodeJoin, true);
       })
@@ -2062,8 +1815,7 @@ const manageApiErrorMsg = (catchE: any) => {
 }
 
 .btnShadow {
-	box-shadow: 0 1px 2px rgb(0 0 0 / 10%),
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
-		3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
 }
 .texttop {
   font-size: 18px;

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

@@ -16,9 +16,7 @@
     <div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
       <q-card bordered flat class="q-px-md no-wrap row">
         <div class="col-12 text-subtitle2 row items-center">
-					<span class="text-weight-medium text-dark"
+          <span class="text-weight-medium text-dark">ผู้สมัครสอบ</span>
-						>ผู้สมัครสอบ</span
-					>
           <q-space />
           <q-badge
             color="white"
@@ -102,7 +100,7 @@
     ref="table"
     flat
     bordered
-		class="custom-table2"
+    class="custom-header-table"
     v-bind="attrs"
     virtual-scroll
     :virtual-scroll-sticky-size-start="48"

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

@@ -27,16 +27,10 @@
               :props="props"
               @click="clickEdit(props.row)"
             >
-							<div
+              <div v-if="col.name == 'no'" class="table_ellipsis2">
-								v-if="col.name == 'no'"
-								class="table_ellipsis2"
-							>
                 {{ props.rowIndex + 1 }}
               </div>
-							<div
+              <div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
-								v-else-if="col.name == 'yearly'"
-								class="table_ellipsis2"
-							>
                 {{ col.value + 543 }}
               </div>
               <div
@@ -55,10 +49,7 @@
               >
                 {{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
               </div>
-							<div
+              <div v-else-if="col.name == 'category'" class="table_ellipsis2">
-								v-else-if="col.name == 'category'"
-								class="table_ellipsis2"
-							>
                 {{ typeCategoryExam(col.value) }}
               </div>
               <div v-else class="table_ellipsis2">
@@ -254,9 +245,7 @@ const fetchData = async () => {
           result.push({
             id: r.id,
             dateAnnounce:
-							r.announcementDate !== null
+              r.announcementDate !== null ? new Date(r.announcementDate) : null,
-								? new Date(r.announcementDate)
-								: null,
             announcementExam: r.announcementExam,
             name: r.name,
             checkDocument: r.checkDocument,
@@ -265,30 +254,20 @@ const fetchData = async () => {
             yearly: r.year,
             fee: r.fee,
             dateAnnouncement:
-							r.announcementStartDate !== null &&
+              r.announcementStartDate !== null && r.announcementEndDate !== null
-							r.announcementEndDate !== null
                 ? [
                     new Date(r.announcementStartDate),
                     new Date(r.announcementEndDate),
                   ]
                 : null,
-						dateExam:
+            dateExam: r.examDate !== null ? new Date(r.examDate) : null,
-							r.examDate !== null ? new Date(r.examDate) : null,
             dateRegister:
-							r.registerStartDate !== null &&
+              r.registerStartDate !== null && r.registerEndDate !== null
-							r.registerEndDate !== null
+                ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
-								? [
-										new Date(r.registerStartDate),
-										new Date(r.registerEndDate),
-								  ]
                 : null,
             datePayment:
-							r.paymentStartDate !== null &&
+              r.paymentStartDate !== null && r.paymentEndDate !== null
-							r.paymentEndDate !== null
+                ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
-								? [
-										new Date(r.paymentStartDate),
-										new Date(r.paymentEndDate),
-								  ]
                 : null,
             organizationName: {
               id: r.organizationId,

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

@@ -309,9 +309,7 @@ const tittleHistory = ref<string>(
 );
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const profileId = ref<string>(
+const profileId = ref<string>(route.params.id ? route.params.id.toString():'');
-  route.params.id ? route.params.id.toString() : ""
-);
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
@@ -480,7 +478,7 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value) {
+  if (profileId.value!='') {
     loaderPage(true);
     await http
       .get(config.API.profileNopaidId(profileId.value))

src/modules/05_placement/components/Main.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, useAttrs } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormPlacementMainData } from "@/modules/05_placement/interface/request/Main";
+import { useQuasar } from "quasar";
-import type { DataOption } from "@/modules/05_placement/interface/index/Main";
+import type {
+  DataOption,
+  DataOption1,
+} from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const DataStore = usePlacementDataStore();
-
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dateText } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-// แปลงเวลา ค.ศ ให้เป็น พ.ศ
-const textDate = (value: Date) => {
-  return dateText(value);
-};
 
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
@@ -58,175 +58,119 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "numberofCandidates",
+    name: "numberOfCandidates",
     align: "left",
     label: "จำนวนผู้สอบได้",
     sortable: false,
-    field: "numberofCandidates",
+    field: "numberOfCandidates",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "examType",
+    name: "examTypeName",
     align: "left",
     label: "ประเภทการสอบ",
     sortable: false,
-    field: "examType",
+    field: "examTypeName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "accountStartDate",
+    align: "left",
+    label: "วันที่บัญชีใช้ได้ตั้งแต่",
+    sortable: true,
+    field: "accountStartDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "accountExpirationDate",
     align: "left",
-    label: "วันที่บัญชีหมดอายุ",
+    label: "วันที่บัญชีใช้ได้ถึง",
     sortable: true,
     field: "accountExpirationDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormPlacementMainData[]>([
+const rows = ref<QTableProps["rows"]>([]);
-  {
+// const yearValue = ref<number>(0); // เพิ่มตัวแปรในโมดูล
-    id: 1,
+
-    examRound:
+// let OriginalData = ref<FormPlacementMainData[]>([]);
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+// let UpdataData = ref<FormPlacementMainData[]>([]);
-    examOrder: 3,
+const searchYear = ref();
-    fiscalYear: 2023,
+const yearOptions = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-    numberofCandidates: 8,
+
-    examType: 1,
+const dataPlacement = ref<any>([]);
-    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
+const visibleColumns = ref([
-  },
+  "id",
-  {
+  "examRound",
-    id: 2,
+  "examOrder",
-    examRound:
+  "examOrder",
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
+  "fiscalYear",
-    examOrder: 2,
+  "numberOfCandidates",
-    fiscalYear: 2023,
+  "examTypeName",
-    numberofCandidates: 12,
+  "accountStartDate",
-    examType: 1,
+  "accountExpirationDate",
-    accountExpirationDate: "2023-02-28T14:47:04.1785384Z",
-  },
-  {
-    id: 3,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2023,
-    numberofCandidates: 20,
-    examType: 1,
-    accountExpirationDate: "2023-01-31T14:47:04.1785384Z",
-  },
-  {
-    id: 4,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 2,
-    fiscalYear: 2022,
-    numberofCandidates: 16,
-    examType: 2,
-    accountExpirationDate: "2023-11-30T14:47:04.1785384Z",
-  },
-  {
-    id: 5,
-    examRound:
-      "การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ ส่วนการจัดการทั่วไป",
-    examOrder: 1,
-    fiscalYear: 2021,
-    numberofCandidates: 20,
-    examType: 2,
-    accountExpirationDate: "2024-05-21T14:47:04.1785384Z",
-  },
 ]);
 
-let OriginalData = ref<FormPlacementMainData[]>([]);
-let UpdataData = ref<FormPlacementMainData[]>([]);
-
-const OriginalDataFetch = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  await DataStore.DataMain(rows.value);
-  OriginalData.value = await DataStore.DataMainOrig;
-  UpdataData.value = OriginalData.value;
-};
-
 onMounted(async () => {
-  await OriginalDataFetch();
+  await fetchYearOptions();
-  fiscalYearFilter();
-  examTimeFilter();
-  examTypeFilter();
-  await expiredAccountFilter();
-  searchFilterTable();
 });
+const fetchPlacementData = async (val: number) => {
+  showLoader();
+  http
+    .get(config.API.MainDetail(val))
+    .then((res) => {
+      dataPlacement.value = res.data.result;
+      DataStore.DataMainOrig = dataPlacement.value;
+      rows.value = DataStore.DataMainOrig;
+      examTypeFilter();
+      examTimeFilter();
+      expiredAccountFilter();
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchYearOptions = async () => {
+  http
+    .get(config.API.yearOptions())
+    .then((res) => {
+      const response = res.data.result;
+      yearOptions.push(...response);
+      const maxNumber = yearOptions.reduce((max: any, e: any) => {
+        return e.id > max ? e.id : max;
+      }, "");
+      searchYear.value = maxNumber;
+      DataStore.DataMainYearSet(searchYear.value);
+      // DataStore.DataMainYear = yearOptions.value;
+      fetchPlacementData(searchYear.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const filterYear = () => {
+  console.log("searchYear", searchYear.value);
+  fetchPlacementData(searchYear.value);
+};
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
-const redirectToPage = (id?: number) => {
+const redirectToPage = (examId?: number) => {
-  // router.push({ name: 'placementDetail'});
+  router.push(`/placement/pass/${examId}`);
-  router.push(`/placement/detail`);
 };
 
-// เลือกปีงบประมาณ
+//-------------------|ค้นหาในตาราง|-----------------//
-const fiscalyear = ref<number | null>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
-const addedfiscalYearValues: number[] = [];
-const fiscalYearFilter = async () => {
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //    DataStore.DataMainYearSet(rows.value);
-  //    fiscalyearOP.value = DataStore.DataMainYearGet;
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-  for (let data of OriginalData.value) {
-    const year = data.fiscalYear + 543;
-
-    if (fiscalyear.value === null || year > fiscalyear.value) {
-      fiscalyear.value = year;
-    }
-
-    if (!addedfiscalYearValues.includes(year)) {
-      fiscalyearOP.push({ id: year, name: year.toString() });
-      addedfiscalYearValues.push(year);
-    }
-  }
-};
-
-// เลือกปีงบประมาณตาม API
-const searchfiscalyear = () => {
-  console.log("Input value changed:", fiscalyear.value);
-  // API
-  // await http
-  //   .get(config.API.// ตัวอย่าง)
-  //   .then((res: any) => {
-  //   })
-  //   .catch((e: any) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(async () => {
-  //   });
-};
-
-// ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -234,63 +178,64 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
-const attrs = ref<any>(useAttrs());
+//-------------------|ครั้งที่สอบ|------------------------------//
-const visibleColumns = ref<string[]>([
+const examTime = ref<number | string>("all");
-  "id",
+const examTimeOP = reactive<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
-  "examRound",
+const addedExamTimeValues: Set<number> = new Set();
-  "examOrder",
-  "fiscalYear",
-  "numberofCandidates",
-  "examType",
-  "accountExpirationDate",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
-// ครั้งที่สอบ
-const examTime = ref<number | null>(null);
-const examTimeOP = ref<number[]>([]);
 const examTimeFilter = async () => {
-  for (let data of OriginalData.value) {
+  // examTimeOP.push({ id: "all", name: "ทั้งหมด" });
-    if (!examTimeOP.value.includes(data.examOrder)) {
+  for (const data of dataPlacement.value) {
-      examTimeOP.value.push(data.examOrder);
+    const examOrder = data.examOrder;
+    if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
+      examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
+      addedExamTimeValues.add(examOrder);
     }
   }
-  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
+  examTimeOP.sort((a, b) => {
+    if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
+    if (b.id === "all") return 1;
+    return Number(a.id) - Number(b.id);
+  }); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
 };
 
 // ประเภทการสอบ
-const examType = ref<number | null>(0);
+const examType = ref<string | null>("all");
-const examTypeOP = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
+const examTypeOP = ref<DataOption1[]>([{ id: "all", name: "ทั้งหมด" }]);
-const addedexamTypeValues: number[] = [];
+const addedExamTypeValues: Set<string> = new Set();
-const examTypeFilter = async () => {
+const examTypeFilter = () => {
-  for (let data of OriginalData.value) {
+  dataPlacement.value.forEach((item: any) => {
-    const examTypeValue = data.examType;
+    const examTypeName = item.examTypeName;
-    if (examTypeValue == 1 && !addedexamTypeValues.includes(1)) {
+    const examTypeValue = item.examTypeValue;
-      examTypeOP.push({ id: 1, name: "คัดเลือก" });
+    if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
-      addedexamTypeValues.push(1);
+      examTypeOP.value.push({
-    } else if (examTypeValue == 2 && !addedexamTypeValues.includes(2)) {
+        id: examTypeValue,
-      examTypeOP.push({ id: 2, name: "สอบแข่งขัน" });
+        name: examTypeName,
-      addedexamTypeValues.push(2);
+      });
-    }
+      addedExamTypeValues.add(examTypeName);
     }
+  });
 };
-
+//--------------|ฟิลเตอร์|--------------------------------------//
 const searchFilterTable = async () => {
-  // console.log('Input value changed:', examTime.value, examType.value, expiredAccount.value);
+  if (examType.value !== undefined && examType.value !== null) {
     await DataStore.DataUpdateMain(
       examTime.value,
       examType.value,
       expiredAccount.value
     );
-  UpdataData.value = DataStore.DataMainUpdate;
+    rows.value = DataStore.DataMainUpdate;
+  }
 };
 
-// บัญชีหมดอายุ
+//----------------|บัญชีหมดอายุ|-----------------------------//
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
-  const currentDate = new Date();
+  // const currentDate = new Date();
-  const updatedRows = OriginalData.value.map((data) => {
+  const updatedRows = dataPlacement.value.map((data: any) => {
-    let expirationDate = new Date(data.accountExpirationDate);
+    // let expirationDate = new Date(data.accountExpirationDate);
-    let isExpired = expirationDate < currentDate;
+    // let isExpired = currentDate > expirationDate;
+    let isExpired = data.isExpired == expiredAccount;
 
     return { ...data, isExpired };
   });
@@ -299,12 +244,12 @@ const expiredAccountFilter = async () => {
 
 const paging = ref<boolean>(true);
 const pagination = ref({
-  sortBy: "desc",
+  sortBy: "accountStartDate",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
@@ -315,16 +260,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
     รายการสอบแข่งขัน / คัดเลือก
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
+    <div class="row q-col-gutter-md">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
-          v-model="fiscalyear"
+          v-model="searchYear"
           label="ปีงบประมาณ"
           dense
           emit-value
           map-options
-          :options="fiscalyearOP"
+          :options="yearOptions"
           option-value="id"
           option-label="name"
           lazy-rules
@@ -333,7 +278,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          @update:model-value="searchfiscalyear"
+          @update:model-value="filterYear"
         />
         <q-space />
         <q-input
@@ -423,15 +368,14 @@ const paginationLabel = (start: string, end: string, total: string) => {
       <div class="col-12">
         <q-table
           ref="table"
+          :rows="rows"
           :columns="columns"
-          :rows="UpdataData"
           :filter="filterKeyword"
           row-key="id"
           flat
           bordered
           dense
           class="custom-header-table"
-          v-bind="attrs"
           :visible-columns="visibleColumns"
           :pagination-label="paginationLabel"
           v-model:pagination="pagination"
@@ -454,7 +398,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
               @click="redirectToPage(props.row.id)"
             >
               <q-td key="id" :props="props">
-                {{ props.row.id }}
+                {{ props.rowIndex + 1 }}
               </q-td>
               <q-td key="examRound" :props="props">
                 {{ props.row.examRound }}
@@ -463,16 +407,19 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 {{ props.row.examOrder }}
               </q-td>
               <q-td key="fiscalYear" :props="props">
-                {{ props.row.fiscalYear + 543 }}
+                {{ props.row.fiscalYear }}
               </q-td>
-              <q-td key="numberofCandidates" :props="props">
+              <q-td key="numberOfCandidates" :props="props">
-                {{ props.row.numberofCandidates }}
+                {{ props.row.numberOfCandidates }}
               </q-td>
-              <q-td key="examType" :props="props">
+              <q-td key="examTypeName" :props="props">
-                {{ props.row.examType == 1 ? "คัดเลือก" : "สอบแข่งขัน" }}
+                {{ props.row.examTypeName }}
+              </q-td>
+              <q-td key="accountStartDate" :props="props">
+                {{ date2Thai(props.row.accountStartDate) }}
               </q-td>
               <q-td key="accountExpirationDate" :props="props">
-                {{ textDate(props.row.accountExpirationDate) }}
+                {{ date2Thai(props.row.accountExpirationDate) }}
               </q-td>
             </q-tr>
           </template>

src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue

@@ -82,7 +82,7 @@ const step04 = defineAsyncComponent(
 );
 
 const router = useRouter();
-const step = ref<number>(4);
+const step = ref<number>(1);
 const stepper = ref<QStepper>();
 
 const nextStep = () => {

src/modules/05_placement/components/OrderPlacement/step/step03.vue

@@ -325,7 +325,7 @@
             round
             color="public"
             icon="mdi-content-save-outline"
-            @click="next"
+            @click="clickClose"
           >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>

src/modules/05_placement/components/OrderPlacement/step/step04.vue

@@ -22,15 +22,11 @@
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
+                      <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
-                        ><q-icon color="blue" name="mdi-file-word"
-                      /></q-item-section>
                       <q-item-section>ไฟล์ .docx</q-item-section>
                     </q-item>
                   </q-list>
@@ -51,34 +47,23 @@
                 <q-menu>
                   <q-list style="min-width: 150px">
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
+                      <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
-                        ><q-icon color="red" name="mdi-file-pdf"
-                      /></q-item-section>
                       <q-item-section>ไฟล์ .PDF</q-item-section>
                     </q-item>
                     <q-item clickable v-close-popup>
-                      <q-item-section avatar
+                      <q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
-                        ><q-icon color="green-7" name="mdi-file-excel"
-                      /></q-item-section>
                       <q-item-section>ไฟล์ .xls</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
               </q-btn>
             </div>
-            <q-space />
-            <q-btn
-              class="text-dark"
-              flat
-              dense
-              icon="mdi-fullscreen"
-              color="add"
-              @click="dialog = true"
-            />
           </div>
-          <q-separator style="margin-top: -1px; z-index: 1" />
+          <q-separator style="margin-top: -1px; z-index: 1;" />
           <q-card bordered class="card-pdf q-ma-md q-pa-md">
-            <div class="justify-between items-center align-center q-pb-sm row">
+              <div
+                class="justify-between items-center align-center q-pb-sm row"
+              >
                 <q-btn
                   class="text-dark bg-grey-4"
                   flat
@@ -105,7 +90,9 @@
                 <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
                 <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
               </div>
-            <div class="justify-between items-center align-center q-pt-sm row">
+              <div
+                class="justify-between items-center align-center q-pt-sm row"
+              >
                 <q-btn
                   class="text-dark bg-grey-4"
                   flat
@@ -129,6 +116,13 @@
                 </q-btn>
               </div>
           </q-card>
+          <!-- <div class="card-pdf q-ma-md q-pa-md" v-if="tab == 'main'">
+            <pdf-viewer v-model:PDFV="vuePDFRef" />
+          </div> -->
+          <!-- <div class="card-pdf q-ma-md q-pa-md" v-else>
+            <pdf-viewer v-model:PDFV="vuePDFRef" />
+          </div> -->
+          <!-- <pdf-viewer /> -->
         </template>
 
         <template v-slot:separator>
@@ -281,21 +275,6 @@
                   </div>
                 </div>
               </fieldset>
-              <div class="flex justify-around">
-                <q-btn
-                  unelevated
-                  label="ออกคำสั่ง"
-                  :color="validateForm() ? 'public' : 'grey'"
-                  :disable="!validateForm()"
-                />
-                <q-btn
-                  class="text-dark"
-                  unelevated
-                  label="ส่งไปลงนาม"
-                  color="grey"
-                  disable
-                />
-              </div>
             </div>
           </q-form>
         </template>
@@ -326,94 +305,6 @@
         <q-tooltip>ต่อไป</q-tooltip>
       </q-btn> -->
     </div>
-
-    <q-dialog
-      v-model="dialog"
-      persistent
-      :maximized="true"
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
-      <q-card class="bg-white text-white">
-        <!-- <q-bar>
-          <q-space />
-
-          <q-btn dense flat icon="close" v-close-popup>
-            <q-tooltip>ปิดหน้าต่าง</q-tooltip>
-          </q-btn>
-        </q-bar> -->
-
-        <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            style="color: #ff8080; background-color: #ffdede"
-            size="12px"
-            v-close-popup
-          />
-        </div>
-        <q-card-section bordered class="card-pdf q-ma-md q-pa-md">
-          <div class="justify-between items-center align-center q-pb-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
-
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
-
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-          <div class="pdfWidth">
-            <VuePDF
-              ref="vuePDFRef"
-              :pdf="pdfSrc"
-              :page="page"
-              fit-parent
-              :scale="0.1"
-            />
-            <!-- <VuePdf :key="page" :src="pdfSrc" :page="page" /> -->
-          </div>
-          <div class="justify-between items-center align-center q-pt-sm row">
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page > 1 ? page - 1 : page"
-            >
-              <q-icon name="mdi-chevron-left" />
-            </q-btn>
-
-            <span class="body-2 grey--text text-black">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </span>
-
-            <q-btn
-              class="text-dark bg-grey-4"
-              flat
-              dense
-              @click="page = page < numOfPages ? page + 1 : page"
-            >
-              <q-icon name="mdi-chevron-right" />
-            </q-btn>
-          </div>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -426,8 +317,6 @@ import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-const dialog = ref<boolean>(false);
-
 // onUnmounted(() => {
 //   window.removeEventListener("resize", (e: any) => {
 //     myEventHandler(e);

src/modules/05_placement/components/pass/Detail.vue

@@ -1,32 +1,74 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
-import { useRouter } from "vue-router";
+import { useRouter ,useRoute} from "vue-router";
 import cardTop from "@/modules/05_placement/components/pass/StatCard.vue";
 import keycloak from "@/plugins/keycloak";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
+import { usePlacementDataStore } from "@/modules/05_placement/store";
 
+const DataStore = usePlacementDataStore();
+
+const $q = useQuasar
+const mixin = useCounterMixin()
+const { messageError } = mixin
 let roleAdmin = ref<boolean>(false);
-
 const router = useRouter();
-const year = ref<string>("2566");
+const route = useRoute();
-const round = ref<string>("1");
+const examId = route.params.examId;
-const title = ref<string>("การสอบแข่งขันเพื่อรับบุคคลทั่วไปเข้ารับราชการ");
+const year = ref<string>("");
+const round = ref<string>("");
+const title = ref<string>("");
+const examData = ref<any>();
 const AddTablePosition = defineAsyncComponent(
   () => import("@/modules/05_placement/components/pass/Table.vue")
 );
 const stat = ref<any>({
-  total: 5,
+  total: 0,
-  unContain: 1,
+  unContain: 0,
-  prepareContain: 3,
+  prepareContain: 0,
-  contain: 1,
+  contain: 0,
   disclaim: 0,
 });
 
+const getStat = async () => {
+  const examIdString = Array.isArray(examId) ? examId[0] : examId;
+  await http
+  .get(config.API.getStatCard(examIdString))
+  .then((res) =>{
+    const statCard = res.data.result;
+    // อัปเดตค่าในตัวแปร stat
+    stat.value = {
+      total: statCard.total,
+      unContain: statCard.unContain,
+      prepareContain: statCard.prepareContain,
+      contain: statCard.contain,
+      disclaim: statCard.disclaim,
+    };
+    
+      console.log("🚀 ~ file: Table.vue:96 ~ getStatCard ~ data:", statCard);
+  })
+  .catch((e) => {
+    messageError($q, e);
+  })
+};
+
 onMounted(async () => {
+  examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
+  // console.log("DataStore===>", DataStore.DataMainOrig.find((x: any) => x.id == examId))
+  title.value = examData.value.examRound;
+  round.value = examData.value.examOrder;
+  year.value = examData.value.fiscalYear;
+
+  await getStat()
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
 });
+
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
@@ -59,7 +101,7 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
-      <AddTablePosition class="q-pa-none" />
+        <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat"/>
     </div>
   </q-card>
 </template>

src/modules/05_placement/components/pass/DialogFooter.vue

@@ -29,9 +29,9 @@ const emit = defineEmits([
 const updateEdit = (value: Boolean) => {
   emit("update:editvisible", value);
 };
-const cancel = async () => {
+// const cancel = async () => {
-  props.cancel();
+//   props.cancel();
-};
+// };
 const edit = async () => {
   updateEdit(!props.editvisible);
   props.edit();

src/modules/05_placement/components/pass/OrgTree.vue

@@ -0,0 +1,503 @@
+<script setup lang="ts">
+import { useQuasar, QForm } from "quasar";
+import { onMounted, reactive, ref } from "vue";
+import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
+import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { date2Thai, hideLoader, messageError, showLoader, success } = mixin; //ฟังก์ชันกลางที่เรียกใช้
+
+const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
+const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
+
+const checkValidate = ref<boolean>(false);
+const myFormPosition = ref<any>();
+const selected = ref<string>("")
+
+// Set form field
+let dataForm = reactive({
+    personalId: "",
+    containDate: new Date(),
+    posNoId: "",
+    positionId: "",
+    positionLevelId: "",
+    positionLineId: "",
+    positionPathSideId: "",
+    positionTypeId: "",
+    salaryAmount: null,
+    mouthSalaryAmount: null,
+    positionSalaryAmount: null,
+});
+
+onMounted(() => {
+    loadTreeData();
+})
+
+// โหลดข้อมูลโครงสร้างจาก json
+const treeData = ref<Array<any>>([]);
+const loadTreeData = async () => {
+    await http
+        .get(config.API.orgTree)
+        .then((res: any) => {
+            treeData.value = res.data;
+        })
+        .catch((e: any) => {
+            messageError($q, e);
+        })
+        .finally(() => {
+            hideLoader();
+        });
+};
+
+const search = ref<string>("");
+//reset Tree Filter
+const filterRef = ref<any>(null)
+const resetFilter = () => {
+    search.value = "";
+    filterRef.value.focus();
+};
+
+const props = defineProps({
+    personalId: String,
+    modal: Boolean,
+    close: {
+        type: Function,
+        default: () => console.log('close modal'),
+    },
+});
+
+const myFilterMethod = (node: any, filter: string) => {
+    const filt = filter;
+
+    return ((node.name && node.name == null) || !node.name) && ((node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+        (node.positionNum && node.positionNum.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))
+}
+
+const validateData = async () => {
+    checkValidate.value = true;
+    await myFormPosition.value.validate().then((result: boolean) => {
+        if (result == false) {
+            checkValidate.value = false;
+        }
+    });
+};
+
+const saveAppoint = async () => {
+    myFormPosition.value.validate().then(async (result: boolean) => {
+        if (result) {
+            const dataAppoint = await {
+                personalId: props.personalId,
+                containDate: dataForm.containDate,
+                posNoId: dataForm.posNoId,
+                positionId: dataForm.positionId,
+                positionLevelId: dataForm.positionLevelId,
+                positionLineId: dataForm.positionLineId,
+                positionPathSideId: dataForm.positionPathSideId,
+                positionTypeId: dataForm.positionTypeId,
+                salaryAmount: dataForm.salaryAmount,
+                mouthSalaryAmount: dataForm.mouthSalaryAmount,
+                positionSalaryAmount: dataForm.positionSalaryAmount,
+            };
+            // console.log("save appoint===>", dataAppoint);
+
+            showLoader();
+            await http
+                .post(config.API.placementPass(), dataAppoint)
+                .then((res) => {
+                    console.log("respone=>", res)
+                    success($q, "บันทึกสำเร็จ");
+                })
+                .catch((e) => {
+                    messageError($q, e);
+                })
+                .finally(async () => {
+                    await closeAndClear()
+                    await resetFilter()
+                    hideLoader()
+                });
+        }
+    });
+};
+
+const editDataStatus = ref<boolean>(false);
+const clickEditRow = () => {
+    editDataStatus.value = true;
+};
+
+const closeModal = () => {
+    if (editDataStatus.value == true) {
+        $q.dialog({
+            title: `ข้อมูลมีการแก้ไข`,
+            message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
+            cancel: "ยกเลิก",
+            ok: "ยืนยัน",
+            persistent: true,
+        }).onOk(() => {
+            editDataStatus.value = false;
+            closeAndClear()
+        });
+    } else {
+        closeAndClear()
+    }
+}
+
+const closeAndClear = async () => {
+    await props.close();
+    editDataStatus.value = false;
+    selected.value = ""
+    dataForm.personalId = '';
+    dataForm.containDate = new Date()
+    dataForm.posNoId = ""
+    dataForm.positionId = ""
+    dataForm.positionLevelId = ""
+    dataForm.positionLineId = ""
+    dataForm.positionPathSideId = ""
+    dataForm.positionTypeId = ""
+    dataForm.salaryAmount = null
+    dataForm.mouthSalaryAmount = null;
+    dataForm.positionSalaryAmount = null
+}
+// ตำแหน่งเลขที่
+const posNoOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่ง
+const positionOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ด้าน/สาขา
+const positionPathSideOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ตำแหน่งประเภท
+const positionTypeOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// สายงาน
+const positionLineOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+// ระดับ
+const positionLevelOptions = ref<Object[]>([{
+    label: '',
+    value: ''
+}]);
+
+const selectedPosition = async (data: any) => {
+
+    if (data.name == null && selected.value != data.keyId) {
+        console.log("selecteds", data)
+
+        editDataStatus.value = true;
+        selected.value = data.keyId
+
+        // posNo Options
+        posNoOptions.value = [{
+            label: data.positionNum,
+            value: data.positionNumId,
+        }]
+        dataForm.posNoId = data.positionNumId;
+
+        // position Options
+        positionOptions.value = [{
+            label: data.positionName,
+            value: data.positionNameId,
+        }]
+        dataForm.positionId = data.positionNameId;
+
+        // positionPathSide Options
+        let positionPathSideArr: any = [];
+        if (data.positionSideNameObj != null) {
+            data.positionSideNameObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
+            })
+            positionPathSideOptions.value = positionPathSideArr;
+            dataForm.positionPathSideId = positionPathSideArr.length > 1 || positionPathSideArr.length == 0 ? '' : positionPathSideArr[0].value;
+        }
+
+        // positionType Options
+        positionTypeOptions.value = [{
+            label: data.positionType,
+            value: data.positionTypeId,
+        }]
+        dataForm.positionTypeId = data.positionTypeId;
+
+        // positionLine Options
+        positionLineOptions.value = [{
+            label: data.positionLine,
+            value: data.positionLineId,
+        }]
+        dataForm.positionLineId = data.positionLineId;
+
+
+        // positionLevel Options
+        let positionLevelsArr: any = [];
+        if (data.positionLevelObj != null) {
+            data.positionLevelObj.map((x: any) => {
+                positionLevelsArr.push({
+                    label: x.Name,
+                    value: x.Id,
+                })
+            })
+            positionLevelOptions.value = positionLevelsArr;
+            dataForm.positionLevelId = positionLevelsArr.length > 1 || positionLevelsArr.length == 0 ? '' : positionLevelsArr[0].value;
+        }
+
+    } else if (selected.value == data.keyId) {
+        selected.value = '';
+        dataForm.posNoId = "";
+        dataForm.positionId = "";
+        dataForm.positionLevelId = "";
+        dataForm.positionLineId = "";
+        dataForm.positionPathSideId = "";
+        dataForm.positionTypeId = "";
+    }
+}
+</script>
+
+<template>
+    <q-dialog v-model="props.modal" persistent full-width>
+        <q-card>
+            <q-form ref="myFormPosition">
+                <DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="closeModal" />
+                <q-separator />
+                <q-card-section class="q-pa-sm bg-grey-1">
+                    <div class="row col-12 q-col-gutter-sm">
+                        <div class="col-xs-12 col-sm-6 row">
+                            <q-card flat bordered class="fit q-pa-sm">
+                                <q-scroll-area visible style="height: 70vh">
+                                    <q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา"
+                                        class="q-mb-sm">
+                                        <template v-slot:append>
+                                            <q-icon name="mdi-magnify" />
+                                        </template>
+                                    </q-input>
+                                    <div class="q-pa-sm q-gutter-sm">
+                                        <q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
+                                            :no-results-label="notFound" :no-nodes-label="noData"
+                                            :filter-method="myFilterMethod">
+
+                                            <template v-slot:header-organization="prop">
+                                                <div class="col">
+                                                    <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
+                                                        <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+                                                        <div class="text-weight-medium">
+                                                            {{ prop.node.organizationName }}
+                                                        </div>
+
+                                                        <!--แสดง Total Count PositionNum-->
+                                                        <!-- <q-badge rounded color="grey-2" text-color="dark"
+                                                            :label="prop.node.totalPositionCount" /> -->
+                                                        <q-badge v-if="prop.node.totalPositionVacant > 0" rounded
+                                                            color="red" outline :label="prop.node.totalPositionVacant" />
+
+                                                        <q-space />
+                                                    </div>
+                                                    <div class="col items-center q-px-xs q-pt-xs">
+                                                        <div class="text-weight-medium text-grey-7">
+                                                            {{ prop.node.governmentCode }}
+                                                            {{ prop.node.organizationShortName }}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </template>
+
+                                            <template v-slot:header-person="prop">
+                                                <q-item clickable :active="selected == prop.node.keyId"
+                                                    @click="selectedPosition(prop.node)" :disable="prop.node.name != null"
+                                                    active-class="my-list-link text-primary text-weight-medium"
+                                                    class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
+                                                    <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="prop.node.name == null
+                                                        " class="q-px-sm text-weight-medium 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>
+                                                    <q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px"
+                                                        color="primary" name="mdi-bookmark"></q-icon>
+
+                                                    <q-space />
+                                                </q-item>
+                                            </template>
+
+                                        </q-tree>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </div>
+                        <div class="col-xs-12 col-sm-6">
+                            <q-card flat bordered class="fit q-pa-sm">
+                                <q-scroll-area visible style="height: 70vh">
+                                    <div class="row col-12 q-col-gutter-xs">
+                                        <div class="col-xs-12 col-sm-12 col-md-12"></div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <datepicker menu-class-name="modalfix" v-model="dataForm.containDate"
+                                                :locale="'th'" autoApply :enableTimePicker="false" week-start="0">
+                                                <template #year="{ year }">{{ year + 543 }}</template>
+                                                <template #year-overlay-value="{ value }">{{
+                                                    parseInt(value + 543)
+                                                }}</template>
+                                                <template #trigger>
+                                                    <q-input class="full-width inputgreen cursor-pointer" outlined dense
+                                                        lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
+                                                                " :rules="[
+            (val: string) =>
+                !!val ||
+                `${'วันที่รายงานตัว'}`,
+        ]" :label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
+                                                        <template v-slot:prepend>
+                                                            <q-icon name="event" class="cursor-pointer"
+                                                                style="color: var(--q-primary)">
+                                                            </q-icon>
+                                                        </template>
+                                                    </q-input>
+                                                </template>
+                                            </datepicker>
+                                        </div>
+                                        <q-space />
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select class="full-width inputgreen cursor-pointer custom-input" outlined
+                                                standout dense hide-bottom-space lazy-rules :options="posNoOptions"
+                                                v-model="dataForm.posNoId" :label="`${'ตำแหน่งเลขที่'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionOptions"
+                                                v-model="dataForm.positionId" :label="`${'ตำแหน่ง'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules
+                                                :options="positionPathSideOptions" v-model="dataForm.positionPathSideId"
+                                                :label="`${'ด้าน/สาขา'}`" map-options />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionTypeOptions"
+                                                v-model="dataForm.positionTypeId" :label="`${'ประเภทตำแหน่ง'}`"
+                                                map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense hide-bottom-space lazy-rules :options="positionLineOptions"
+                                                v-model="dataForm.positionLineId" :label="`${'สายงาน'}`" map-options />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-select outlined class="full-width inputgreen cursor-pointer custom-input"
+                                                standout dense lazy-rules :options="positionLevelOptions"
+                                                v-model="dataForm.positionLevelId" :label="`${'ระดับ'}`" hide-bottom-space
+                                                :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value
+                                                map-options />
+                                        </div>
+                                        <div class="col-sx-12 col-sm-12 col-md-12">
+                                            <q-separator inset size="2px" class="q-my-md" />
+                                        </div>
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.salaryAmount"
+                                                :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                                                :label="`${'เงินเดือน'}`" @update:modelValue="clickEditRow" type="number"
+                                                hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.positionSalaryAmount"
+                                                :rules="[
+                                                    (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                                                ]" :label="`${'เงินประจำตำแหน่ง'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+
+                                        <div class="col-xs-6 col-sm-6 col-md-6">
+                                            <q-input outlined dense lazy-rules v-model="dataForm.mouthSalaryAmount" :rules="[
+                                                (val) =>
+                                                    !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                                            ]" :label="`${'เงินค่าตอบแทนรายเดือน'}`" @update:modelValue="clickEditRow"
+                                                type="number" hide-bottom-space />
+                                        </div>
+                                    </div>
+                                </q-scroll-area>
+                            </q-card>
+                        </div>
+                    </div>
+                </q-card-section>
+
+                <q-separator />
+                <DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
+                    v-model:modalEdit="editDataStatus" />
+            </q-form>
+        </q-card>
+    </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.q-tree__node-header {
+    padding: 0px;
+    margin-top: 0px;
+    border-radius: 4px;
+    outline: 0;
+}
+
+.my-list-link {
+    color: rgb(118, 168, 222);
+    border-radius: 5px;
+    background: #a3d3fb48 !important;
+    font-weight: 600;
+    border: 1px solid rgba(175, 185, 196, 0.217);
+    /*  box-shadow: 1px 1px 7px 1px rgba(41, 95, 255, 0.15) !important; */
+}
+</style>

src/modules/05_placement/components/pass/TableDetail.vue

@@ -1,39 +1,40 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
 import { useQuasar } from "quasar";
 import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
 import type { QTableProps } from "quasar";
-import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const modal = ref<boolean>();
+const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
-const { success } = mixin;
 const save = ref<boolean>(true);
+
 const props = defineProps({
   Modal: Boolean,
   close: {
     type: Function,
     default: () => console.log("not function"),
   },
-  getdetail: {
+  personalId: {
-    type: Object,
+    type: String,
-    required: true,
+    default: ""
   },
   validate: {
     type: Function,
     default: () => console.log("not function"),
   },
 });
-const rows = ref<any[]>([
-  {
-    university: props.getdetail.university || "-",
-    degree: props.getdetail.degree || "-",
-    major: props.getdetail.major || "-",
-    graduation: "2022-01-01",
-  },
 
+const rows = ref<any[]>([
   ]);
+//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
+// const graduationDate = new Date(graduationExample);
+// rows.value[0].graduation = date2Thai(graduationDate, false, false);
+
+//--------------------------------------------------------------------//
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "university",
@@ -76,86 +77,112 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const myForm = ref<any>();
+const myForm = ref<any>([]);
-const checkValidate = ref<boolean>(false);
+const personalForm = ref<any>([]);
-const selection = ref<number[]>([]);
+const selection = ref<any>([]);
+
 
-const checkboxItems: CheckboxItem[] = [
-  { id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
-  {
-    id: 2,
-    label:
-      "ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.",
-  },
-  {
-    id: 3,
-    label:
-      "ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  { id: 4, label: "ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม" },
-  {
-    id: 5,
-    label:
-      "ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง",
-  },
-  { id: 6, label: "ไม่เป็นบุคคลล้มละลาย" },
-  {
-    id: 7,
-    label:
-      "ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ",
-  },
-  {
-    id: 8,
-    label:
-      "ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ",
-  },
-  {
-    id: 9,
-    label:
-      "เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  {
-    id: 10,
-    label:
-      "เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น",
-  },
-  {
-    id: 11,
-    label:
-      "เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ",
-  },
-];
 const $q = useQuasar();
+
 function isRequired(val: any): boolean | string {
   return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
 }
-const validateData = () => {
-  const selectedIds = selection.value;
-  const selectedItems = checkboxItems.filter((item) =>
-    selectedIds.includes(item.id)
-  );
 
+watch(props, () => {
+  if (props.Modal === true) {
+    // console.log(props.getdetail);
+    fetchData();
+  }
+});
+
+const validateData = () => {
+  const selectedIds = personalForm.value.isProperty;
+
+  const selectedItems = personalForm.value.isProperty.filter(
+    (item: any) => item.value === true
+    // selectedIds.includes(item.value)
+  );
   return (
-    selectedItems.length > 0 && selectedItems.length === selectedIds.length
+    selectedItems.length > 0 || selectedItems.length === selectedIds.length
   );
 };
 
 const ClickSave = () => {
   const isValid = validateData();
+
   if (isValid) {
-    console.log(selection.value);
+    // props.close();
-    console.log("rerer", props.Modal);
+    // props.validate();
-    props.close();
+    // putpersonalForm();
-    props.validate();
+    modalConfirm(
-    selection.value = [];
+      $q,
+      "การยืนยัน",
+      "ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
+      putpersonalForm
+    );
   } else {
     success($q, "กรอกให้ครบ");
+    console.log();
+  }
+};
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.getDatapersonal(props.personalId))
+    .then((res) => {
+      personalForm.value = res.data.result;
+      personalForm.value.education.map((e: any) => {
+        rows.value.push({
+          university: e.name,
+          degree: e.degree,
+          major: e.field,
+          graduation: e.finishDate,
+        });
+      });
+    })
+    .catch((e) => {
+      console.log("e", e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const formBmaofficer = (val: string) => {
+  switch (val) {
+    case "officer":
+      return "ขรก.กทม. สามัญ";
+      break;
+    case "employee_perm":
+      return "ลูกจ้างประจำ";
+      break;
+    case "employee_temp":
+      return "ลูกจ้างชั่วคราว";
+      break;
+    default:
+      "";
   }
 };
-
 const close = async () => {
   props.close();
   selection.value = [];
+  rows.value = [];
+};
+const putpersonalForm = async () => {
+  await http
+    .put(
+      config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
+      personalForm.value.isProperty
+    )
+    .then((res) => {
+      success($q, res.data.message);
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      props.close();
+      props.validate();
+    });
 };
 </script>
 <template>
@@ -164,7 +191,7 @@ const close = async () => {
       <q-form ref="myForm">
         <div class="row">
           <DialogHeader
-            :title="`รายละเอียดของ ${props.getdetail.fullName}`"
+            :title="`รายละเอียดของ ${personalForm.fullName}`"
             @click="close"
           />
         </div>
@@ -176,7 +203,10 @@ const close = async () => {
               <div class="row items-center q-pa-xs header-text">
                 ข้อมูลทั่วไป
                 <span class="check-officer"
-                  ><q-icon name="mdi-check" /> ข้าราชการฯ กทม</span
+                  ><q-icon
+                    name="mdi-check"
+                    v-if="personalForm.bmaofficer !== null && ''"
+                  />{{ formBmaofficer(personalForm.bmaofficer) }}</span
                 >
               </div>
               <div class="row q-pa-xs">
@@ -186,10 +216,10 @@ const close = async () => {
                 </div>
                 <div class="col-4 sub-text">
                   <div class="q-pb-md">
-                    {{ props.getdetail.profileID }}
+                    {{ personalForm.idCard }}
                   </div>
                   <div>
-                    {{ props.getdetail.dateOfBirth }}
+                    {{ date2Thai(personalForm.dateOfBirth) }}
                   </div>
                 </div>
                 <div class="col-2 header-sub-text">
@@ -198,10 +228,10 @@ const close = async () => {
                 </div>
                 <div class="col-3 sub-text">
                   <div class="q-pb-md">
-                    {{ props.getdetail.fullName }}
+                    {{ personalForm.fullName }}
                   </div>
                   <div>
-                    {{ props.getdetail.gender }}
+                    {{ personalForm.gender }}
                   </div>
                 </div>
               </div>
@@ -213,7 +243,7 @@ const close = async () => {
               <div class="row q-pa-xs">
                 <div class="col-3 header-sub-text">ที่อยู่</div>
                 <div class="col-9 sub-text">
-                  {{ props.getdetail.address }}
+                  {{ personalForm.address }}
                 </div>
               </div>
             </q-card>
@@ -231,6 +261,7 @@ const close = async () => {
                 virtual-scroll
                 :virtual-scroll-sticky-size-start="48"
                 dense
+                hide-bottom
               >
               </q-table>
             </q-card>
@@ -252,31 +283,31 @@ const close = async () => {
                       <div class="col-4 q-pa-xs">
                         <div class="header-sub-text-exam-2">คะแนนที่ได้</div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreAFull }}
+                          {{ personalForm.pointTotalA }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreBFull }}
+                          {{ personalForm.pointTotalB }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreCFull }}
+                          {{ personalForm.pointTotalC }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreSumFull }}
+                          {{ personalForm.pointTotal }}
                         </div>
                       </div>
                       <div class="col-4 q-pa-xs header-sub-text-exam-2">
                         <div class="header-sub-text-exam-2">ผลการสอบ</div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreA }}
+                          {{ personalForm.pointA }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreB }}
+                          {{ personalForm.pointB }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreC }}
+                          {{ personalForm.pointC }}
                         </div>
                         <div class="sub-text-exam">
-                          {{ props.getdetail.scoreResult.scoreSum }}
+                          {{ personalForm.point }}
                         </div>
                       </div>
                     </div>
@@ -292,10 +323,10 @@ const close = async () => {
                     </div>
                     <div class="col-5 sub-text-exam">
                       <div class="q-pb-sm">
-                        {{ props.getdetail.scoreResult.examResult }}
+                        {{ personalForm.pass }}
                       </div>
-                      <div class="q-pb-sm">{{ props.getdetail.number }}</div>
+                      <div class="q-pb-sm">{{ personalForm.examNumber }}</div>
-                      <div class="q-pb-sm">{{ props.getdetail.examCount }}</div>
+                      <div class="q-pb-sm">{{ personalForm.examRound }}</div>
                     </div>
                   </div>
                 </div>
@@ -308,12 +339,16 @@ const close = async () => {
               <div class="col-12 row items-center q-pa-sm header-text">
                 การคัดกรองคุณสมบัติ
               </div>
-              <div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
+              <div
+                v-for="(item, index) of personalForm.isProperty"
+                :key="index"
+                class="q-pa-sm"
+              >
                 <q-checkbox
                   size="xs"
-                  v-model="selection"
+                  v-model="item.value"
-                  :val="item.id"
+                  :val="item.value"
-                  :label="item.label"
+                  :label="item.name"
                   keep-color
                   color="teal"
                   :rules="[isRequired]"

src/modules/05_placement/components/pass/TableView.vue

@@ -43,18 +43,12 @@
 
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogMessage } = mixin;
-const editvisible = ref<boolean>(false);
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
-const modalPublish = ref<boolean>(false);
-const modalDelete = ref<boolean>(false);
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -143,8 +137,8 @@ const props = defineProps({
   roleAdmin: Boolean
 });
 const pagination = ref({
-  sortBy: "desc",
+  sortBy: "number",
-  descending: false,
+  descending: true,
   page: 1,
   rowsPerPage: 10,
 });

src/modules/05_placement/interface/index/Main.ts

@@ -1,10 +1,14 @@
 import type { zipCodeOption } from "../../components/PersonalDetail/profileType";
 interface DataOption {
-  id: number | string;
+  id: number|null;
-  name: string;
+  name:string|null;
+  disable?: boolean;
+}
+interface DataOption1 {
+  id: string|null;
+  name:string|null;
   disable?: boolean;
 }
-
 interface DataOptionInsignia {
   id: string;
   name: string;
@@ -137,6 +141,7 @@ export type {
   AddressOps,
   Pagination,
   EduOps,
+  DataOption1,
   InsigniaOps,
   CheckboxItem,
   Property,

src/modules/05_placement/interface/request/Main.ts

@@ -4,8 +4,10 @@ interface FormPlacementMainData {
   examRound: string;
   examOrder: number;
   fiscalYear: number;
-  numberofCandidates: number;
+  numberOfCandidates: number;
-  examType: number;
+  examTypeValue:string;
+  examTypeName: string;
+  accountStartDate: string;
   accountExpirationDate: string;
   isExpired?: boolean;
 }

src/modules/05_placement/interface/request/placement.ts

@@ -1,5 +1,5 @@
 interface TableName {
-  profileID: string;
+  personalId: string;
   position: number;
   fullName: string;
   dateOfBirth: string;
@@ -7,14 +7,20 @@ interface TableName {
   ExamOrder: number;
   unitId: string;
   UnitGroup: string;
+  positionNumber:string;
+  positionPath:string;
   Unit: string;
-  ReportingDate: string; //วันที่รายงานตัว
+  reportingDate: string; //วันที่รายงานตัว
-  BMAOfficer: string;
+  bmaOfficer: string;
-  Status: string;
+  statusId: string;
   checkList: any;
   address: string;
   university: string;
   degree: string;
+  disclaim: string;
+  profilePhoto:string;
+  organizationName:string;
+  organizationShortName:string;
   major: string;
   remark: string;
   number: number;
@@ -31,5 +37,19 @@ interface TableName {
     examResult: string;
   };
 } 
-
+interface PartialTableName {
-export type { TableName };
+  personalId: string;
+  fullName: string;
+  idCard: string;
+  profilePhoto: string;
+  organizationName: string;
+  organizationShortName: string;
+  positionNumber: string;
+  positionPath: string;
+  reportingDate: string;
+  bmaOfficer: string;
+  number: number;
+  statusId: string;
+  deferment: string;
+}
+export type { TableName ,PartialTableName};

src/modules/05_placement/router.ts

@@ -43,7 +43,7 @@ export default [
     },
   },
   {
-    path: "/placement/detail",
+    path: "/placement/pass/:examId",
     name: "placementDetail",
     component: PlacementDetail,
     meta: {

src/modules/05_placement/store.ts

@@ -104,77 +104,77 @@ export const usePlacementDataStore = defineStore("placement", () => {
     (DataMainYear.value = val);
   const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
   const DataUpdateMain = (
-    filter_1: number | null,
+    filter_1: number | string,
-    filter_2: number | null,
+    filter_2: string | null,
     filter_3: boolean
   ) => {
     DataMainUpdate.value = [];
-    if (filter_1 === null && filter_2 === 0 && filter_3 === false) {
+    if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1');
       // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === null && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === 0 && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === null && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 2.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
           item.examOrder === filter_1 &&
-          item.examType === filter_2 &&
+          item.examTypeValue === filter_2 &&
           item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== 0 && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examType === filter_2 && item.isExpired === filter_3
+        (item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === 0 && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === null && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === 0 && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === null && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.4');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== 0 && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.5');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
           item.examOrder == filter_1 &&
-          item.examType == filter_2 &&
+          item.examTypeValue == filter_2 &&
           item.isExpired == filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== 0 && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.6');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
-        (item) => item.examType == filter_2 && item.isExpired == filter_3
+        (item) => item.examTypeValue == filter_2 && item.isExpired == filter_3
       ));
     }
   };