popup หน่วยงานที่รับผิดชอบ

src/modules/15_development/components/BasicInfo.vue

@@ -4,6 +4,8 @@ import { useQuasar } from "quasar";
 
 import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
 
+import DialogSelectAgency from "@/modules/15_development/components/DialogSelectAgency.vue";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
@@ -11,7 +13,7 @@ const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
 const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
-  org: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
+  org: "",
   projectName: "",
   reason: "",
   objective: "",
@@ -25,6 +27,14 @@ function onSubmit() {
   dialogConfirm($q, () => {});
 }
 
+const modalDialogSelect = ref<boolean>(false);
+function selectAgency() {
+  modalDialogSelect.value = true;
+}
+function updateAgency(name: string) {
+  formData.org = name;
+}
+
 onMounted(() => {
   console.log("ข้อมูลเบื้องต้น");
 });
@@ -66,14 +76,14 @@ onMounted(() => {
         </datepicker>
       </div>
       <div class="col-xs-10 col-sm-10 col-md-10">
-        <q-select
+        <q-input
           dense
           outlined
           v-model="formData.org"
-          :options="options"
           label="ชื่อหน่วยงานที่รับผิดชอบ"
           hide-bottom-space
           lazy-rules
+          @click="selectAgency"
           :rules="[
             (val:string) =>
               !!val || `${'กรุณาเลือกหน่วยงานที่รับผิดชอบ'}`,
@@ -143,6 +153,11 @@ onMounted(() => {
       </q-btn>
     </div>
   </q-form>
+
+  <DialogSelectAgency
+    v-model:modal="modalDialogSelect"
+    @update:updateAgency="updateAgency"
+  />
 </template>
 
 <style scoped></style>