From 56c6c7ce0592145152d827e9ec66789f8079ba14 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Fri, 25 Oct 2024 15:15:43 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88?=
 =?UTF-8?q?=E0=B8=B8=E0=B9=81=E0=B8=95=E0=B9=88=E0=B8=87=E0=B8=95=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=89=E0=B8=87=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=9C=E0=B9=88=E0=B8=B2=E0=B8=99=20popup?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=88=E0=B8=A7=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=A5=E0=B8=B0=20filter=20=E0=B8=84=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=A2?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=95=E0=B8=B2=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=96=E0=B8=B2=E0=B8=99=E0=B8=A0=E0=B8=B2=E0=B8=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PersonalList/CardPosition.vue  | 107 ++++++++++++++----
 .../PersonalList/DialogSelectOrg.vue          |  62 +++++++++-
 .../components/PersonalList/Table.vue         |  18 +++
 .../components/PersonalList/TableView.vue     |  30 ++++-
 .../interface/response/SelectOrg.ts           |  16 ++-
 5 files changed, 210 insertions(+), 23 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/CardPosition.vue b/src/modules/05_placement/components/PersonalList/CardPosition.vue
index e977b283c..cb6074ed2 100644
--- a/src/modules/05_placement/components/PersonalList/CardPosition.vue
+++ b/src/modules/05_placement/components/PersonalList/CardPosition.vue
@@ -3,8 +3,13 @@ import { ref, onMounted, watch } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
-import type { Positions } from "@/modules/05_placement/interface/response/SelectOrg";
+import type {
+  Positions,
+  FormPosType,
+  FormPosLevel,
+} from "@/modules/05_placement/interface/response/SelectOrg";
 import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
+import { useSelectOrgStore } from "@/modules/05_placement/stores/storeSelect";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -12,6 +17,8 @@ import { useCounterMixin } from "@/stores/mixin";
 /** use*/
 const { date2Thai } = useCounterMixin();
 
+const store = useSelectOrgStore();
+
 /** props*/
 const selected = defineModel("selectedPos", { required: true }); //ตำแหน่งที่เลือก
 const positionId = defineModel<string>("positionId", { required: true }); //id ตำแหน่งที่เลือก
@@ -20,9 +27,25 @@ 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 isPosition = defineModel<boolean>("isPosition", { required: true });
+const isPositionOld = defineModel<boolean>("isPositionOld", { required: true }); //แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม
+const posType = defineModel<FormPosType>("posType", { required: true }); //ประเภทตำแหน่ง
+const posLevel = defineModel<string>("posLevel", { required: true }); //ระดับตำแหน่ง
+const optionPosType = defineModel<FormPosType[]>("optionPosType", {
+  required: true,
+});
+const optionPosLevel = defineModel<FormPosLevel[]>("optionPosLevel", {
+  required: true,
+});
 
 const positionRows = ref<DataPositionNo[]>(positionData.value);
-const isPosition = ref<boolean>(true);
+
+const props = defineProps({
+  fetchDataTable: Function,
+  onPosType: Function,
+  nodeId: String,
+  nodeLevel: Number,
+});
 
 //Table
 const filters = ref<string>(""); //คำค้นหา
@@ -196,26 +219,22 @@ async function onClickSelectPos(id: string) {
   }
 }
 
-/**
- * function ค้นหาตำแหน่งตามการเลือกแสดงเฉพาะตำแหน่งที่ตรงกับการสอบ
- */
-async function fetchIsPosition() {
-  // ถ้าเลือกแสดงเฉพาะตำแหน่งที่ตรงกับการสอบ ระบบจะ filter เลือกเฉพาะข้อมูลที่ตรงกับการสอบ
-  if (isPosition.value) {
-    const lists = await positionData.value.filter(
-      (e: any) => e.isPosition === true
-    );
-    positionRows.value = lists;
-  }
-  // ถ้าไม่ได้เลือกระบบจะแสดงตำแหน่งทั้งหมด
-  else {
-    positionRows.value = positionData.value;
+function onPositionOld() {
+  props.fetchDataTable?.(props.nodeId, props.nodeLevel);
+  if (isPositionOld.value == false) {
+    posType.value.id = "";
+    posType.value.posTypeName = "";
+    posType.value.posTypeRank = null;
+    posType.value.posLevels = [];
+    posLevel.value = "";
   }
 }
 
 // เช็คว่าถ้ามีการปรับ filter ระบบจะนำข้อมูลไปเช็ค filter แสดงเฉพาะตำแหน่งที่ตรงกับการสอบใหม่อีกครั้ง
 watch(positionData, (newVal, oldVal) => {
-  if (newVal != oldVal) fetchIsPosition();
+  if (newVal != oldVal) {
+    positionRows.value = positionData.value;
+  }
 });
 
 /**
@@ -227,7 +246,7 @@ onMounted(async () => {
       await onClickSelectPos(positionId.value);
     }, 1000);
   } else {
-    fetchIsPosition();
+    positionRows.value = positionData.value;
   }
 });
 </script>
@@ -255,7 +274,9 @@ onMounted(async () => {
             v-model="isPosition"
             label="แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ"
             color="primary"
-            @update:model-value="fetchIsPosition"
+            @update:model-value="
+              props.fetchDataTable?.(props.nodeId, props.nodeLevel)
+            "
           >
             <q-tooltip>แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ</q-tooltip>
           </q-checkbox>
@@ -271,6 +292,54 @@ onMounted(async () => {
             >
           </q-checkbox>
         </div>
+        <div class="col-12">
+          <div class="row q-gutter-sm no-wrap">
+            <div>
+              <q-checkbox
+                keep-color
+                v-model="isPositionOld"
+                label="แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม"
+                color="primary"
+                @update:model-value="onPositionOld"
+              >
+                <q-tooltip>แสดงตำแหน่งที่ตรงกับประเภทและระดับเดิม</q-tooltip>
+              </q-checkbox>
+            </div>
+
+            <div class="col-3">
+              <q-select
+                v-if="isPositionOld"
+                v-model="posType"
+                :options="optionPosType"
+                option-label="posTypeName"
+                label="ประเภทตำแหน่ง"
+                dense
+                outlined
+                @update:model-value="props.onPosType?.()"
+              >
+              </q-select>
+            </div>
+            <div class="col-3">
+              <q-select
+                v-if="isPositionOld"
+                :readonly="posType == null"
+                v-model="posLevel"
+                :options="optionPosLevel"
+                option-label="posLevelName"
+                option-value="posLevelName"
+                label="ระดับตำแหน่ง"
+                dense
+                outlined
+                emit-value
+                map-options
+                @update:model-value="
+                  props.fetchDataTable?.(props.nodeId, props.nodeLevel)
+                "
+              >
+              </q-select>
+            </div>
+          </div>
+        </div>
         <div class="col-12 q-pa-md">
           <q-toolbar style="padding: 0px">
             <q-space />
diff --git a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
index ca86fbd9b..66b4f79e8 100644
--- a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
@@ -15,6 +15,8 @@ import type {
   PositionNo,
   Positions,
   TreeMain,
+  FormPosType,
+  FormPosLevel,
 } from "@/modules/05_placement/interface/response/SelectOrg";
 import type { DataPositionNo } from "@/modules/05_placement/interface/index/SelectOrg";
 
@@ -67,14 +69,18 @@ const positionUse = ref<string[]>([]);
 const positionNo = ref<DataPositionNo[]>([]);
 const positionId = ref<string>("");
 const seletcId = ref<string>("");
+const posType = ref<FormPosType | null>(null);
+const posLevel = ref<string>("");
 const selectedPos = ref<any[]>([]);
 const datePos = ref<Date>(new Date());
 const posMasterMain = ref<any[]>([]);
 const orgRevisionId = ref<string>("");
+const optionPosType = ref<FormPosType[]>([]);
+const optionPosLevel = ref<FormPosLevel[]>([]);
 
 /** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
 async function fetchStructure() {
-  const dataTree = await fetchStructureTree(route.meta.Key as string,false);
+  const dataTree = await fetchStructureTree(route.meta.Key as string, false);
   if (dataTree) {
     orgRevisionId.value = storeTree.activeId;
     nodes.value = dataTree;
@@ -110,6 +116,8 @@ function updateSelected(data: TreeMain) {
  */
 const isAll = ref<boolean>(false);
 const isBlank = ref<boolean>(true);
+const isPosition = ref<boolean>(true);
+const isPositionOld = ref<boolean>(false);
 async function fetchDataTable(id: string, level: number = 0) {
   showLoader();
   const body = {
@@ -125,6 +133,11 @@ async function fetchDataTable(id: string, level: number = 0) {
       : "",
     isAll: isAll.value,
     isBlank: isBlank.value,
+    isPosition: isPosition.value,
+    isPositionOld: isPositionOld.value,
+
+    positionType: posType.value ? posType.value.posTypeName : null,
+    positionLevel: posLevel.value ? posLevel.value : null,
   };
 
   await http
@@ -158,6 +171,7 @@ async function fetchDataTable(id: string, level: number = 0) {
     })
     .catch((err) => {
       messageError($q, err);
+      hideLoader();
     })
     .finally(() => {
       setTimeout(() => {
@@ -252,6 +266,9 @@ function closePopup() {
 function clearData() {
   nodeId.value = "";
   expanded.value = [];
+  posType.value = null;
+  posLevel.value = "";
+  isPositionOld.value = false;
 }
 
 /** callback function เมื่อมีการเปิด popup*/
@@ -294,6 +311,27 @@ function filterItemsTaps(data: TreeMain[]) {
   return orgTreeIds;
 }
 
+async function getOrgPosType() {
+  await http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      const data = await res.data.result;
+      optionPosType.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
+function onPosType() {
+  posLevel.value = "";
+  if (posType.value) {
+    optionPosLevel.value = posType.value.posLevels;
+  }
+  fetchDataTable(nodeId.value, nodeLevel.value);
+}
+
 watch(
   () => isAll.value,
   (value, oldVal) => {
@@ -312,6 +350,16 @@ watch(
   }
 );
 
+watch(
+  () => isPositionOld.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      fetchDataTable(nodeId.value, nodeLevel.value);
+      getOrgPosType();
+    }
+  }
+);
+
 onMounted(() => {
   fetchStructure();
 });
@@ -414,6 +462,16 @@ onMounted(() => {
                   v-model:seletcId="seletcId"
                   v-model:is-all="isAll"
                   v-model:is-blank="isBlank"
+                  v-model:is-position="isPosition"
+                  v-model:is-position-old="isPositionOld"
+                  v-model:pos-type="posType as FormPosType"
+                  v-model:pos-level="posLevel"
+                  v-model:option-pos-type="optionPosType"
+                  v-model:option-pos-level="optionPosLevel"
+                  :fetch-data-table="fetchDataTable"
+                  :on-pos-type="onPosType"
+                  :node-id="nodeId"
+                  :node-level="nodeLevel"
                 />
               </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 082d86ed2..62546ee2b 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -62,6 +62,7 @@ const filter = ref<string>("");
 const Name = ref<string>();
 const rowsAll = ref<any>([]);
 const rows = ref<any[]>([]);
+const rowsAwait = ref<any[]>([]);
 const rowsFilter = ref<any>([]);
 const rowsOrder = ref<any[]>([]);
 const myForm = ref<any>();
@@ -388,6 +389,11 @@ async function getTable() {
       rows.value = await (roleAdmin.value
         ? rowsAll.value
         : rowsAll.value.filter((x: any) => x.statusId !== "DONE"));
+
+      rowsAwait.value = await (roleAdmin.value
+        ? rowsAll.value
+        : rowsAll.value.filter((x: any) => x.statusId !== "DONE"));
+
       // รายชื่อไปยังหน่วยงาน
       rowsFilter.value = await rows.value.filter(
         (e: any) =>
@@ -750,6 +756,17 @@ function openModalOrder(val: boolean) {
   modalOrder.value = val;
 }
 
+function onUpdateNewRows(val: string) {
+  const data = rowsAwait.value;
+  rows.value = data.filter((item: any) => {
+    if (val === "EXTERNAL") {
+      return item.bmaOfficerCheck === null;
+    } else if (val === "OFFICER") {
+      return item.bmaOfficerCheck === "OFFICER";
+    }
+  });
+}
+
 watch(containStatus, () => {
   if (containStatus.value) {
     rows.value = rowsAll.value.filter((x: any) => x.statusId == "DONE");
@@ -796,6 +813,7 @@ onMounted(async () => {
       v-model:containfilter="containStatus"
       @update-modaladdlist="handleModalAddListUpdate"
       @update-modaladdSendPerson="openModalOrder"
+      @update-new-Rows="onUpdateNewRows"
       :history="true"
       :boss="true"
       :saveNoDraft="true"
diff --git a/src/modules/05_placement/components/PersonalList/TableView.vue b/src/modules/05_placement/components/PersonalList/TableView.vue
index 947a2d4ce..b48e3e981 100644
--- a/src/modules/05_placement/components/PersonalList/TableView.vue
+++ b/src/modules/05_placement/components/PersonalList/TableView.vue
@@ -3,13 +3,21 @@ import { ref, useAttrs } from "vue";
 import { QTooltip, useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 
-import type { PersonData } from "@/modules/05_placement/interface/index/Main";
+import type {
+  PersonData,
+  optionData,
+} from "@/modules/05_placement/interface/index/Main";
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 
+const bmaOfficer = ref<string>('')
+const bmaOfficerOption = ref<optionData[]>([
+  { id: "OFFICER", name: "ขรก.กทม. สามัญ" },
+  { id: "EXTERNAL", name: "บุคคลภายนอก" },
+]);
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -117,6 +125,7 @@ const emit = defineEmits([
   "update:containfilter",
   "update-modaladdlist",
   "update-modaladdSendPerson",
+  "update-newRows",
 ]);
 
 function paginationLabel(start: string, end: string, total: string) {
@@ -160,11 +169,30 @@ function updateModaladdlist() {
 function openModalOrder() {
   emit("update-modaladdSendPerson", true);
 }
+
+/** ส่งรายชื่อไปยังหน่วยงาน */
+function onUpdateNewRows() {
+  emit("update-newRows", bmaOfficer.value);
+}
 </script>
 
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm">
+      <q-select
+        outlined
+        dense
+        v-model="bmaOfficer"
+        :options="bmaOfficerOption"
+        emit-value
+        map-options
+        option-value="id"
+        option-label="name"
+        label="สถาณภาพ"
+        style="width: 200px"
+        @update:model-value="onUpdateNewRows"
+      >
+      </q-select>
       <q-btn
         v-if="roleAdmin === false"
         @click="openModalOrder()"
diff --git a/src/modules/05_placement/interface/response/SelectOrg.ts b/src/modules/05_placement/interface/response/SelectOrg.ts
index 4e4fddfaa..bffe3095d 100644
--- a/src/modules/05_placement/interface/response/SelectOrg.ts
+++ b/src/modules/05_placement/interface/response/SelectOrg.ts
@@ -104,4 +104,18 @@ interface Positions {
   positionName: string;
 }
 
-export type { DataList, PositionMaim, PositionNo, Positions, TreeMain };
+interface FormPosLevel {
+  id: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posLevelAuthority: string;
+}
+
+interface FormPosType {
+  id: string;
+  posTypeName: string;
+  posTypeRank: number|null;
+  posLevels: FormPosLevel[];
+}
+
+export type { DataList, PositionMaim, PositionNo, Positions, TreeMain,FormPosType ,FormPosLevel};