From 85dd0628f44b629461f5956d61e1317654b264ce Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 30 Apr 2024 16:21:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=9A=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=88=E0=B8=B8=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B9=89=E0=B8=87=20=E0=B8=95=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B9=83=E0=B8=AB=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=20(change=20req)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PersonalList/CardPosition.vue  |  26 ++-
 .../PersonalList/DialogSelectOrg.vue          |  53 ++++-
 .../components/PersonalList/Table.vue         | 201 ++++++++++--------
 3 files changed, 188 insertions(+), 92 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/CardPosition.vue b/src/modules/05_placement/components/PersonalList/CardPosition.vue
index 934485e1e..ac3ad749a 100644
--- a/src/modules/05_placement/components/PersonalList/CardPosition.vue
+++ b/src/modules/05_placement/components/PersonalList/CardPosition.vue
@@ -18,6 +18,8 @@ const positionId = defineModel<string>("positionId", { required: true });
 const seletcId = defineModel<string>("seletcId", { required: true });
 const date = defineModel<Date>("datePos", { required: true });
 const positionData = defineModel<any>("position", { required: true });
+const isAll = defineModel<boolean>("isAll", { required: true });
+const isBlank = defineModel<boolean>("isBlank", { required: true });
 
 const filters = ref<string>("");
 const rowsPosition = ref<Positions[]>([]);
@@ -204,6 +206,7 @@ onMounted(async () => {
   }
 });
 </script>
+
 <template>
   <div class="column q-col-gutter-sm" style="height: 70vh">
     <!-- เลือกเลขที่ตำแหน่ง -->
@@ -215,8 +218,29 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-12 q-pa-md">
           <q-toolbar style="padding: 0px">
-            <q-space />
             <div class="row q-gutter-md">
+              <q-checkbox
+                keep-color
+                v-model="isBlank"
+                label="แสดงเฉพาะตำแหน่งว่าง"
+                color="primary"
+              >
+                <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
+              </q-checkbox>
+            </div>
+            <q-space />
+
+            <div class="row q-gutter-md">
+              <q-checkbox
+                keep-color
+                v-model="isAll"
+                label="แสดงตำแหน่งทั้งหมด"
+                color="primary"
+              >
+                <q-tooltip
+                  >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                >
+              </q-checkbox>
               <div>
                 <q-input outlined dense v-model="filters" label="ค้นหา">
                   <template v-slot:append>
diff --git a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
index ecac1ec10..d7775fb66 100644
--- a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
@@ -29,7 +29,6 @@ const {
   showLoader,
   hideLoader,
   messageError,
-  date2Thai,
   dialogMessageNotify,
   dialogConfirm,
 } = useCounterMixin();
@@ -67,6 +66,7 @@ const seletcId = ref<string>("");
 const selectedPos = ref<any[]>([]);
 const datePos = ref<Date>(new Date());
 const posMasterMain = ref<any>([]);
+const orgRevisionId = ref<string>("");
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
 async function fetchOrganizationActive() {
@@ -76,6 +76,7 @@ async function fetchOrganizationActive() {
     .then((res) => {
       const data = res.data.result;
       if (data) {
+        orgRevisionId.value = data.activeId;
         fetchDataTree(data.activeId);
       }
     })
@@ -135,14 +136,23 @@ function updateSelected(data: TreeMain) {
  * @param id  idTree
  * @param level  levelTree
  */
+const isAll = ref<boolean>(false);
+const isBlank = ref<boolean>(false);
 async function fetchDataTable(id: string, level: number = 0) {
+  console.log(props.dataRow);
+
   showLoader();
   const body = {
     node: level,
     nodeId: id,
     position: props?.dataRow?.positionCandidate,
     typeCommand: props.typeCommand,
+    posLevel: props.dataRow?.posLevelId,
+    posType: props.dataRow?.posTypeId,
+    isAll: isAll.value,
+    isBlank: isBlank.value,
   };
+
   await http
     .post(config.API.orgPosPlacement, body)
     .then((res) => {
@@ -211,17 +221,21 @@ async function onClickSubmit() {
   } else {
     dialogConfirm($q, async () => {
       showLoader();
+
       const body = {
-        PersonalId: props?.dataRow?.personalId,
+        personalId: props?.dataRow?.personalId,
         node: nodeLevel.value,
         nodeId: nodeId.value,
-        posmasterId: positionId.value,
+        orgRevisionId: orgRevisionId.value,
         positionId: selectedPos.value[0].id,
+        posMasterNo: dataPosMaster.posMasterNo, //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
+        positionName: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
+        positionField: selectedPos.value[0].positionField, //ชื่อตำแหน่ง
+        posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
+        posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
+        posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
+        posLevelName: selectedPos.value[0].posLevelName, //ชื่อตำแหน่ง
         reportingDate: datePos.value,
-        organizationName: dataNode.orgTreeName, //ชื่อหน่วยงาน
-        orgTreeShortName: dataNode.orgTreeShortName, //ชื่อย่อ
-        posPath: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
-        posNumber: dataPosMaster.posMasterNo, //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
         typeCommand: props.typeCommand,
       };
 
@@ -296,7 +310,30 @@ function filterNodeFn(data: any, id: string) {
   }
   return null;
 }
+
+watch(
+  () => isAll.value,
+  (value, oldVal) => {
+    console.log("value", value);
+    console.log("oldVal", oldVal);
+    isAll.value = value;
+
+    fetchDataTable(nodeId.value, nodeLevel.value);
+  }
+);
+
+watch(
+  () => isBlank.value,
+  (value, oldVal) => {
+    console.log("isBlank value", value);
+    console.log("isBlank oldVal", oldVal);
+    isBlank.value = value;
+
+    fetchDataTable(nodeId.value, nodeLevel.value);
+  }
+);
 </script>
+
 <template>
   <q-dialog v-model="modal" full-width persistent>
     <q-card>
@@ -388,6 +425,8 @@ function filterNodeFn(data: any, id: string) {
                   v-model:datePos="datePos"
                   v-model:positionId="positionId"
                   v-model:seletcId="seletcId"
+                  v-model:is-all="isAll"
+                  v-model:is-blank="isBlank"
                 />
               </q-tab-panel>
             </q-tab-panels>
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 94bc6472b..30d55832e 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -19,6 +19,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
 import router from "@/router";
+import avatar from "@/assets/avatar_user.jpg";
 
 let roleAdmin = ref<boolean>(false);
 
@@ -91,7 +92,7 @@ const personalId = ref<string>("");
 
 /** แสดงข้อมูลตารางหลัก */
 const visibleColumns = ref<any[]>([
-  "position",
+  "no",
   "fullName",
   "examNumber",
   "idCard",
@@ -108,6 +109,7 @@ const visibleColumns = ref<any[]>([
  * ตาราง ส่งรายชื่อไปหน่วยงาน
  */
 const visibleColumnslist = ref<any>([
+  "no",
   "fullName",
   "examNumber",
   "idCard",
@@ -121,11 +123,11 @@ const visibleColumnslist = ref<any>([
 /**หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "position",
+    name: "no",
     align: "center",
     label: "ลำดับ",
     sortable: false,
-    field: "position",
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -274,42 +276,58 @@ async function getTable() {
         res.data.result.map((data: any) => {
           const rowData = {
             personalId: data.personalId,
-            idCard: data.idCard,
-            fullName: data.fullName + " " + data.idCard,
+            avatar: data.avatar,
             name: data.fullName,
-            profilePhoto: data.profilePhoto ?? "",
-            avatar: data.avatar ?? "",
-            organizationName:
-              data.organizationName +
-              " " +
-              data.organizationShortName +
-              " " +
-              data.positionNumber +
-              " " +
-              data.positionPath,
-            orgName: data.organizationName,
-            organizationShortName: data.organizationShortName,
-            positionNumber: data.positionNumber,
-            positionPath: data.positionPath,
-            reportingDate:
-              data.reportingDate == null
-                ? null
-                : dateText(new Date(data.reportingDate)),
+            fullName: data.fullName + " " + data.idCard,
+            idCard: data.idCard,
             examNumber: data.examNumber,
+            root: data.root,
+            rootId: data.rootId,
+            rootShortName: data.rootShortName,
+            child1: data.child1,
+            child1Id: data.child1Id,
+            child1ShortName: data.child1ShortName,
+            child2: data.child2,
+            child2Id: data.child2Id,
+            child2ShortName: data.child2ShortName,
+            child3: data.child3,
+            child3Id: data.child3Id,
+            child3ShortName: data.child3ShortName,
+            child4: data.child4,
+            child4Id: data.child4Id,
+            child4ShortName: data.child4ShortName,
+            node: data.node,
+            nodeName: data.nodeName,
+            nodeId: data.nodeId,
+            nodeShortName: data.nodeShortName,
+            orgRevisionId: data.orgRevisionId,
+            positionId: data.positionId,
+            posMasterNo: data.posMasterNo,
+            positionName: data.positionName,
+            positionField: data.positionField,
+            posTypeId: data.posTypeId,
+            posTypeName: data.posTypeName,
+            posLevelId: data.posLevelId,
+            posLevelName: data.posLevelName,
+            positionCandidate: data.positionCandidate,
+            positionCandidateId: data.positionCandidateId,
+            reportingDate: data.reportingDate,
             bmaOfficer: convertBmaOfficer(data.bmaOfficer),
             statusId: data.statusId,
-            statusName: convertContainStatus(data.statusId),
-            deferment: data.deferment,
             draft: convertDraft(data.draft),
-            positionCandidate: data.positionCandidate,
-            node: data.node,
-            nodeId: data.nodeId,
-            posmasterId: data.posmasterId,
-            positionId: data.positionId,
-            orgTreeShortName: data.orgTreeShortName,
-            posPath: data.posPath,
-            posNumber: data.posNumber,
-            reportingDateFullDate: data.reportingDate,
+            typeCommand: data.typeCommand,
+
+            statusName: convertContainStatus(data.statusId),
+            organizationName:
+              data.root +
+              " " +
+              data.rootShortName +
+              " " +
+              data.nodeName +
+              "" +
+              data.nodeShortName +
+              "" +
+              data.posMasterNo,
           };
           rowsAll.value.push(rowData);
         });
@@ -325,6 +343,8 @@ async function getTable() {
           e.positionNumber !== null &&
           e.statusName == "เตรียมบรรจุ"
       );
+
+      insertAvatar(rowsAll.value);
     })
     .catch((e) => {
       messageError($q, e);
@@ -334,6 +354,32 @@ async function getTable() {
     });
 }
 
+function insertAvatar(items: any) {
+  items.map((x: any, index: number) => {
+    http
+      .get(
+        config.API.fileByFile(
+          "ทะเบียนประวัติ",
+          "โปรไฟล์",
+          x.id,
+          "profile-" + x.id
+        )
+      )
+      .then((img) => {
+        rowsAll.value[index] = {
+          ...x,
+          avatar: img.data.downloadUrl,
+        };
+      })
+      .catch(() => {
+        rowsAll.value[index] = {
+          ...x,
+          avatar: avatar,
+        };
+      });
+  });
+}
+
 /**ยืนยันการผ่อนผัน */
 async function saveDeferment() {
   myForm.value.validate().then(async (result: boolean) => {
@@ -659,7 +705,7 @@ onMounted(async () => {
             @click="selectData(props.row.personalId, props.row.draft)"
             class="cursor-pointer"
           >
-            <template v-if="col.name === 'position'">
+            <template v-if="col.name === 'no'">
               {{ props.rowIndex + 1 }}
             </template>
             <template
@@ -668,12 +714,9 @@ onMounted(async () => {
             >
               <q-item v-ripple>
                 <q-item-section avatar>
-                  <img
-                    v-if="props.row.avatar == ''"
-                    src="@/assets/avatar_user.jpg"
-                    class="col-4 img-info"
-                  />
-                  <img v-else :src="props.row.avatar" class="col-4 img-info" />
+                  <q-avatar size="30px" color="grey-4">
+                    <q-img :src="props.row.avatar" class="photo-profile" />
+                  </q-avatar>
                 </q-item-section>
 
                 <q-item-section>
@@ -696,18 +739,18 @@ onMounted(async () => {
               >
                 <div class="col-4">
                   <div class="text-weight-medium">
-                    {{ props.row.orgName !== null ? props.row.orgName : "-" }}
+                    {{ props.row.root !== null ? props.row.root : "-" }}
                     {{
-                      props.row.orgTreeShortName !== null
-                        ? `(${props.row.orgTreeShortName})`
+                      props.row.rootShortName !== null
+                        ? `(${props.row.rootShortName})`
                         : ""
                     }}
                   </div>
                   <div class="text-weight-light">
-                    {{ props.row.posPath !== null ? props.row.posPath : "" }}
+                    {{ props.row.nodeName !== null ? props.row.nodeName : "" }}
                     {{
-                      props.row.orgTreeShortName !== null
-                        ? `(${props.row.orgTreeShortName}${props.row.posNumber})`
+                      props.row.nodeShortName !== null
+                        ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
                         : ""
                     }}
                   </div>
@@ -733,17 +776,19 @@ onMounted(async () => {
               </div>
             </template>
 
-            <template
-              v-else-if="col.name === 'reportingDate' && col.value !== '-'"
-            >
+            <template v-else-if="col.name === 'reportingDate'">
               <div class="text-weight-medium">
-                {{ props.row.reportingDate }}
+                {{
+                  props.row.reportingDate !== null
+                    ? dateText(props.row.reportingDate)
+                    : "-"
+                }}
               </div>
             </template>
 
             <template v-else-if="col.name === 'bmaOfficer'">
               <div class="text-weight-medium">
-                {{ props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-" }}
+                {{ props.row.bmaOfficer }}
               </div>
             </template>
 
@@ -1177,16 +1222,9 @@ onMounted(async () => {
                 >
                   <q-item v-ripple style="padding: 0">
                     <q-item-section avatar>
-                      <img
-                        v-if="props.row.avatar == ''"
-                        src="@/assets/avatar_user.jpg"
-                        class="col-4 img-info"
-                      />
-                      <img
-                        v-else
-                        :src="props.row.avatar"
-                        class="col-4 img-info"
-                      />
+                      <q-avatar size="32px" color="grey-4">
+                        <q-img :src="props.row.avatar" class="photo-profile" />
+                      </q-avatar>
                     </q-item-section>
 
                     <q-item-section>
@@ -1232,27 +1270,26 @@ onMounted(async () => {
                   >
                     <div class="col-4">
                       <div class="text-weight-medium">
+                        {{ props.row.root !== null ? props.row.root : "-" }}
                         {{
-                          props.row.orgName !== null ? props.row.orgName : "-"
-                        }}
-                        {{
-                          props.row.orgTreeShortName !== null
-                            ? `(${props.row.orgTreeShortName})`
+                          props.row.rootShortName !== null
+                            ? `(${props.row.rootShortName})`
                             : ""
                         }}
                       </div>
                       <div class="text-weight-light">
                         {{
-                          props.row.posPath !== null ? props.row.posPath : "-"
+                          props.row.nodeName !== null ? props.row.nodeName : ""
                         }}
                         {{
-                          props.row.posNumber !== null
-                            ? `(${props.row.orgTreeShortName}${props.row.posNumber})`
+                          props.row.nodeShortName !== null
+                            ? `(${props.row.nodeShortName}${props.row.posMasterNo})`
                             : ""
                         }}
                       </div>
                     </div>
                   </div>
+
                   <div v-else>
                     <div class="col-4">
                       <div class="text-weight-medium">-</div>
@@ -1270,18 +1307,18 @@ onMounted(async () => {
                     {{ props.row.positionCandidate }}
                   </div>
                 </template>
-                <template
-                  v-else-if="col.name === 'reportingDate' && col.value !== '-'"
-                >
+                <template v-else-if="col.name === 'reportingDate'">
                   <div class="text-weight-medium">
-                    {{ props.row.reportingDate }}
+                    {{
+                      props.row.reportingDate !== null
+                        ? dateText(props.row.reportingDate)
+                        : "-"
+                    }}
                   </div>
                 </template>
                 <template v-else-if="col.name === 'bmaOfficer'">
                   <div class="text-weight-medium">
-                    {{
-                      props.row.bmaOfficer !== null ? props.row.bmaOfficer : "-"
-                    }}
+                    {{ props.row.bmaOfficer }}
                   </div>
                 </template>
                 <template v-else-if="col.name === 'draft'">
@@ -1347,12 +1384,8 @@ onMounted(async () => {
   margin-bottom: 0;
   color: #818181;
 }
-
-.img-info {
-  width: 30px !important;
-  height: 30px !important;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-right: 10px;
+.photo-profile {
+  width: 30px;
+  height: 30px;
 }
 </style>