โครงสร้างอัตรากำลัง => ปรับการเพิ่มส่วนราชการ

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

@@ -61,6 +61,8 @@ const orgLevelOptionMain = ref<DataOption[]>([
   { name: "ระดับฝ่าย/กลุ่มงาน", id: "SECTION" },
 ]);
 
+const orgLevelSubOptionMain = ref<DataOption[]>([]);
+
 const orgLevelOption = ref<DataOption[]>([]);
 
 const orgNameRef = ref<Object | null>(null);
@@ -70,6 +72,7 @@ const orgCodeRef = ref<Object | null>(null);
 // const orgPhoneInRef = ref<Object | null>(null);
 // const orgFaxRef = ref<Object | null>(null);
 const orgLevelRef = ref<Object | null>(null);
+const orgLevelSubRef = ref<Object | null>(null);
 
 const formData = reactive<FormDataAgency>({
   orgName: "",
@@ -79,6 +82,7 @@ const formData = reactive<FormDataAgency>({
   orgPhoneIn: "",
   orgFax: "",
   orgLevel: "",
+  orgLevelSub: "",
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -90,6 +94,7 @@ const objectComplaintsRef: FormAgencyRef = {
   // orgPhoneIn: orgPhoneInRef,
   // orgFax: orgFaxRef,
   orgLevel: orgLevelRef,
+  orgLevelSub: orgLevelSubRef,
 };
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
@@ -141,8 +146,12 @@ function onSubmit() {
       ["org" + type + "PhoneIn"]: formData.orgPhoneIn,
       ["org" + type + "Fax"]: formData.orgFax,
       ["org" + type + "Rank"]: formData.orgLevel,
+      ["org" + type + "RankSub"]:
+        level.value !== 0 ? formData.orgLevelSub : undefined,
       [nameId]: rootId,
     };
+    console.log(body);
+
     if (actionType.value === "ADD") {
       await http
         .post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
@@ -229,6 +238,7 @@ watch(
             props.dataNode.orgTreeRank === "DEPARTMENT"
               ? orgLevelOptionMain.value
               : orgLevelOptionMain.value.slice(1, 4);
+          selectOrgLevele(formData.orgLevel);
         }
       }
     }
@@ -245,6 +255,45 @@ const tittleName = computed(() => {
 
   return name;
 });
+
+function selectOrgLevele(val: string) {
+  formData.orgLevelSub = "";
+  switch (val) {
+    case "OFFICE":
+      orgLevelSubOptionMain.value = [
+        { name: "ระดับกอง", id: "DIVISION" },
+        {
+          name: "สำนักงาน",
+          id: "OFFICE",
+        },
+        { name: "ส่วนราชการ", id: "GOVERNMENT" },
+        { name: "โรงพยาบาล", id: "HOSPITAL" },
+        { name: "เทียบเท่ากอง", id: "EQUIVALENT" },
+      ];
+
+      break;
+    case "DIVISION":
+      orgLevelSubOptionMain.value = [
+        { name: "ระดับส่วน", id: "SECTION" },
+        {
+          name: "กลุ่มภารกิจ",
+          id: "MISSION",
+        },
+      ];
+
+    case "SECTION":
+      orgLevelSubOptionMain.value = [
+        { name: "ระดับฝ่าย", id: "FACTION" },
+        {
+          name: "กลุ่มงาน",
+          id: "WORK",
+        },
+      ];
+
+    default:
+      break;
+  }
+}
 </script>
 
 <template>
@@ -323,6 +372,7 @@ const tittleName = computed(() => {
                   emit-value
                   map-options
                   v-model="formData.orgLevel"
+                  @update:model-value="selectOrgLevele"
                   :options="orgLevelOption"
                   :label="
                     level == 0 ? 'ระดับของหน่วยงาน' : 'ระดับของส่วนราชการ'
@@ -339,6 +389,26 @@ const tittleName = computed(() => {
                   lazy-rules
                 />
               </div>
+              <div class="col-4" v-if="formData.orgLevel !== '' && level !== 0">
+                <q-select
+                  :readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
+                  ref="orgLevelSubRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.orgLevelSub"
+                  :options="orgLevelSubOptionMain"
+                  label="ระดับของส่วนราชการ(ซับ)"
+                  :rules="[
+                    (val) => !!val || 'กรุณาเลือกระดับของส่วนราชการ (ซับ)',
+                  ]"
+                  lazy-rules
+                />
+              </div>
               <div class="col-4">
                 <q-input
                   v-model="formData.orgPhoneEx"