ปรับ UI โครงสร้าง

src/modules/02_organizationalNew/components/DialogFormAgency.vue

@@ -9,6 +9,7 @@ import type {
   DataOption,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 
+const level = defineModel<string>("orgLevel", { required: true });
 const props = defineProps({
   modal: Boolean,
   close: Function,
@@ -18,35 +19,46 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
-const ocLevelOp = ref<DataOption[]>([]);
+const orgLevelOptionMain = ref<DataOption[]>([
+  { name: "ระดับสำนัก", id: "DEPARTMENT" },
+  {
+    name: "ระดับกอง/สำนักงาน/ส่วนราชการ/โรงพยาบาล/เทียบเท่ากอง",
+    id: "OFFICE",
+  },
+  { name: "ระดับส่วน/กลุ่มภารกิจ", id: "DIVISION" },
+  { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
+]);
 
-const ocNameRef = ref<Object | null>(null);
-const shortNameRef = ref<Object | null>(null);
-const ocNoRef = ref<Object | null>(null);
-const ocLevelRef = ref<Object | null>(null);
-const telOutRef = ref<Object | null>(null);
-const telInRef = ref<Object | null>(null);
-const telRef = ref<Object | null>(null);
+const orgLevelOption = ref<DataOption[]>([]);
+
+const orgNameRef = ref<Object | null>(null);
+const orgShortNameRef = ref<Object | null>(null);
+const orgCodeRef = ref<Object | null>(null);
+const orgPhoneExRef = ref<Object | null>(null);
+const orgPhoneInRef = ref<Object | null>(null);
+const orgFaxRef = ref<Object | null>(null);
+const orgLevelRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataAgency>({
-  ocName: "",
-  shortName: "",
-  ocNo: "",
-  ocLevel: "",
-  telOut: "",
-  telIn: "",
-  tel: "",
+  orgName: "",
+  orgShortName: "",
+  orgCode: "",
+  orgPhoneEx: "",
+  orgPhoneIn: "",
+  orgFax: "",
+  orgRevisionId: "",
+  orgLevel: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectComplaintsRef: FormAgencyRef = {
-  ocName: ocNameRef,
-  shortName: shortNameRef,
-  ocNo: ocNoRef,
-  ocLevel: ocLevelRef,
-  telOut: telOutRef,
-  telIn: telInRef,
-  tel: telRef,
+  orgName: orgNameRef,
+  orgShortName: orgShortNameRef,
+  orgCode: orgCodeRef,
+  orgPhoneEx: orgPhoneExRef,
+  orgPhoneIn: orgPhoneInRef,
+  orgFax: orgFaxRef,
+  orgLevel: orgLevelRef,
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
@@ -70,7 +82,7 @@ function validateForm() {
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
-    console.log(formData)
+    console.log(formData);
   });
 }
 
@@ -78,16 +90,13 @@ watch(
   () => props.modal,
   () => {
     if (props.modal === true) {
-      ocLevelOp.value = [
-        {
-          id: "id1",
-          name: "id1",
-        },
-        {
-          id: "id2",
-          name: "id2",
-        },
-      ];
+      if (level.value === "DEPARTMENT") {
+        formData.orgLevel = level.value;
+        orgLevelOption.value = orgLevelOptionMain.value;
+      } else {
+        orgLevelOption.value = orgLevelOptionMain.value.splice(1, 4);
+        formData.orgLevel = "";
+      }
     }
   }
 );
@@ -104,8 +113,8 @@ watch(
             <div class="row q-col-gutter-sm">
               <div class="col-4">
                 <q-input
-                  v-model="formData.ocName"
-                  ref="ocNameRef"
+                  v-model="formData.orgName"
+                  ref="orgNameRef"
                   dense
                   outlined
                   for="#ocName"
@@ -116,8 +125,8 @@ watch(
               </div>
               <div class="col-2">
                 <q-input
-                  v-model="formData.shortName"
-                  ref="shortNameRef"
+                  v-model="formData.orgShortName"
+                  ref="orgShortNameRef"
                   dense
                   outlined
                   for="#shortName"
@@ -128,8 +137,8 @@ watch(
               </div>
               <div class="col-2">
                 <q-input
-                  v-model="formData.ocNo"
-                  ref="ocNoRef"
+                  v-model="formData.orgCode"
+                  ref="orgCodeRef"
                   dense
                   outlined
                   for="#ocNo"
@@ -140,8 +149,9 @@ watch(
               </div>
               <div class="col-4">
                 <q-select
+                  :readonly="level === 'DEPARTMENT'"
                   for="#ocLevel"
-                  ref="ocLevelRef"
+                  ref="orgLevelRef"
                   dense
                   hide-bottom-space
                   outlined
@@ -149,8 +159,8 @@ watch(
                   option-value="id"
                   emit-value
                   map-options
-                  v-model="formData.ocLevel"
-                  :options="ocLevelOp"
+                  v-model="formData.orgLevel"
+                  :options="orgLevelOption"
                   label="ระดับของหน่วยงาน"
                   :rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
                   lazy-rules
@@ -158,8 +168,8 @@ watch(
               </div>
               <div class="col-4">
                 <q-input
-                  v-model="formData.telOut"
-                  ref="telOutRef"
+                  v-model="formData.orgPhoneEx"
+                  ref="orgPhoneExRef"
                   dense
                   outlined
                   for="#telOut"
@@ -174,8 +184,8 @@ watch(
               </div>
               <div class="col-4">
                 <q-input
-                  v-model="formData.telIn"
-                  ref="telInRef"
+                  v-model="formData.orgPhoneIn"
+                  ref="orgPhoneInRef"
                   dense
                   outlined
                   for="#telIn"
@@ -189,8 +199,8 @@ watch(
               </div>
               <div class="col-4">
                 <q-input
-                  v-model="formData.tel"
-                  ref="telRef"
+                  v-model="formData.orgFax"
+                  ref="orgFaxRef"
                   dense
                   outlined
                   for="#tel"