UI เพิ่มรายการโครงการ => เป้าหมาย

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">

src/modules/15_development/interface/index/Main.ts

@@ -8,4 +8,4 @@ interface DataOptionCheckBox {
   value: string;
 }
 
-export type { DataOption,DataOptionCheckBox };
+export type { DataOption, DataOptionCheckBox };

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 };