From 851dd996f7dbee4bf74c4d6dada2d3e5dcd36d5e Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 2 Apr 2024 16:57:48 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=20=3D>=20=E0=B9=80=E0=B8=9B=E0=B9=89=E0=B8=B2=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B2=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/Target.vue      | 114 +++++++++++++++---
 .../15_development/interface/index/Main.ts    |   2 +-
 .../15_development/interface/response/Main.ts |  17 +++
 3 files changed, 115 insertions(+), 18 deletions(-)

diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 7b383b950..ffa32f7f0 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -1,20 +1,33 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/15_development/interface/index/Main";
 import type {
   FormGroupTarget,
   FormGroupRelate,
 } from "@/modules/15_development/interface/request/Main";
+import type {
+  ResGroup,
+  ResLevel,
+} from "@/modules/15_development/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const { showLoader, hideLoader, dialogConfirm, dialogRemove, success } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+  success,
+  messageError,
+} = useCounterMixin();
 
 const columnsGroup = ref<QTableProps["columns"]>([
   {
@@ -85,9 +98,19 @@ const rows3 = ref<any>([
 ]);
 const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
 const options = ref<any>([
-  "ข้าราชการกรุงเทพมหานคร",
-  "ข้าราชการกรุงเทพมหานครสามัญ",
-  "เจ้าหน้าที่ดำเนิดการ",
+  // "ข้าราชการกรุงเทพมหานคร",
+  // "ข้าราชการกรุงเทพมหานครสามัญ",
+  // "เจ้าหน้าที่ดำเนิดการ",
+]);
+
+const groupOp = ref<DataOption[]>([
+  { id: "1", name: "ข้าราชการกรุงเทพมหานคร" },
+  { id: "2", name: "บุคลากรกรุงเทพมหานคร" },
+  { id: "3", name: "บุคคลภายนอก" },
+]);
+const groupSubOp = ref<DataOption[]>([
+  { id: "1", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
+  { id: "2", name: "ข้าราชการครู" },
 ]);
 
 const modalGroupTarget = ref<boolean>(false);
@@ -108,9 +131,33 @@ const formGroupRelate = reactive<FormGroupRelate>({
   amount: null,
 });
 
+const posTypeOp = ref<DataOption[]>([]);
+const posLevelOp = ref<DataOption[]>([]);
+const posTypeMain = ref<ResGroup[]>([]);
+
+/** function เรียกข้อมูลประเภทตำแหน่ง*/
+function fetchType() {
+  if (posTypeMain.value.length === 0) {
+    http
+      .get(config.API.orgPosType)
+      .then((res) => {
+        const data = res.data.result;
+        posTypeMain.value = data;
+        posTypeOp.value = data.map((e: ResGroup) => ({
+          id: e.id,
+          name: e.posTypeName,
+        }));
+      })
+      .catch((err) => {
+        messageError($q, err);
+      });
+  }
+}
+
 function onClickOpenDialog(type: string) {
   if (type === "group") {
     modalGroupTarget.value = true;
+    fetchType();
   } else {
     modalRelate.value = true;
   }
@@ -154,6 +201,16 @@ function onClickCloseDialog() {
   cleanFormData();
 }
 
+function updatePosTypeName(id: string) {
+  const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
+  posLevelOp.value =
+    posLevel?.posLevels.map((e: ResLevel) => ({
+      id: e.id,
+      name: e.posLevelName.toString(),
+    })) ?? [];
+  formGroupTarget.level = "";
+}
+
 onMounted(() => {
   console.log("เป้าหมาย");
 });
@@ -405,9 +462,13 @@ onMounted(() => {
                 dense
                 outlined
                 v-model="formGroupTarget.groupTarget"
-                :options="options"
+                :options="groupOp"
                 label="กลุ่มเป้าหมาย"
                 hide-bottom-space
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
                 lazy-rules
                 :rules="[
                 (val:string) =>
@@ -420,10 +481,14 @@ onMounted(() => {
                 dense
                 outlined
                 v-model="formGroupTarget.groupTargetSub"
-                :options="options"
+                :options="groupSubOp"
                 label="กลุ่มเป้าหมายย่อย"
                 hide-bottom-space
                 lazy-rules
+                option-label="name"
+                option-value="id"
+                map-options
+                emit-value
                 :rules="[
                 (val:string) =>
                   !!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
@@ -444,29 +509,44 @@ onMounted(() => {
               />
             </div>
             <div class="col-xs-6 col-sm-4 col-md-4">
-              <q-input
-                outlined
+              <q-select
                 dense
+                outlined
                 hide-bottom-space
+                lazy-rules
                 v-model="formGroupTarget.posType"
+                :options="posTypeOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                input-class="text-red"
                 label="ประเภทตำแหน่ง"
+                @update:model-value="updatePosTypeName"
                 :rules="[
-                (val:string) =>
-                  !!val || `${'กรุณากรอกประเภทตำแหน่ง'}`,
-              ]"
+          (val:string) =>
+            !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
+        ]"
               />
             </div>
             <div class="col-xs-6 col-sm-4 col-md-4">
-              <q-input
-                outlined
+              <q-select
                 dense
+                outlined
                 hide-bottom-space
+                lazy-rules
                 v-model="formGroupTarget.level"
+                :options="posLevelOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                input-class="text-red"
                 label="ระดับ"
                 :rules="[
-                (val:string) =>
-                  !!val || `${'กรุณากรอกระดับ'}`,
-              ]"
+        (val:string) =>
+          !!val || `${'กรุณาเลือกระดับ'}`,
+      ]"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-8">
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index cdddf168c..9eb2758ed 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -8,4 +8,4 @@ interface DataOptionCheckBox {
   value: string;
 }
 
-export type { DataOption,DataOptionCheckBox };
+export type { DataOption, DataOptionCheckBox };
diff --git a/src/modules/15_development/interface/response/Main.ts b/src/modules/15_development/interface/response/Main.ts
index e69de29bb..34f0c3237 100644
--- a/src/modules/15_development/interface/response/Main.ts
+++ b/src/modules/15_development/interface/response/Main.ts
@@ -0,0 +1,17 @@
+interface ResGroup {
+  id: string;
+  posLevels: ResLevel[];
+  posTypeName: string;
+  posTypeRank: number;
+  posTypeShortName: string;
+}
+
+interface ResLevel {
+  id: string;
+  posLevelName: number;
+  posTypeName: string;
+  posTypeId: string;
+  posLevelAuthority: string;
+}
+
+export type { ResGroup, ResLevel };