API สร้างโครงสร้าง

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

@@ -15,16 +15,31 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
 
-const level = defineModel<string>("orgLevel", { required: true });
+const level = defineModel<number>("orgLevel", { required: true });
+const actionType = defineModel<string>("actionType", { required: true });
 const props = defineProps({
-  modal: Boolean,
-  close: Function,
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  close: {
+    type: Function,
+    require: true,
+  },
+  fetchDataTree: {
+    type: Function,
+    require: true,
+  },
+  dataNode: {
+    type: Object,
+    require: true,
+  },
 });
 
 const $q = useQuasar();
 const store = useOrganizational();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader } = mixin;
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
 const orgLevelOptionMain = ref<DataOption[]>([
   { name: "ระดับสำนัก", id: "DEPARTMENT" },
@@ -87,29 +102,28 @@ function validateForm() {
 
 /** ฟังชั่น บันทึก */
 function onSubmit() {
+  console.log(level.value);
   dialogConfirm($q, async () => {
-    showLoader();
-    const type =
-      level.value === "DEPARTMENT"
-        ? "Root"
-        : level.value === "OFFICE"
-        ? "Child1"
-        : level.value === "DIVISION"
-        ? "Child2"
-        : level.value === "SECTION"
-        ? "Child3"
-        : "child4";
-
+    // showLoader();
+    const type = store.checkLevel(level.value);
     const nameId =
-      level.value === "DEPARTMENT"
+      level.value === 0
         ? "orgRevisionId"
-        : level.value === "OFFICE"
+        : level.value === 1
         ? "orgRootId"
-        : level.value === "DIVISION"
+        : level.value === 2
         ? "orgChild1Id"
-        : level.value === "SECTION"
+        : level.value === 3
         ? "orgChild2Id"
         : "orgChild3Id";
+
+    let rootId: string = "";
+    if (actionType.value === "ADD") {
+      rootId = level.value === 0 ? store.draftId : props.dataNode?.orgTreeId;
+    } else {
+      rootId = level.value === 0 ? store.draftId : props.dataNode?.orgRootId;
+    }
+
     const body = {
       ["org" + type + "Name"]: formData.orgName,
       ["org" + type + "ShortName"]: formData.orgShortName,
@@ -118,34 +132,87 @@ function onSubmit() {
       ["org" + type + "PhoneIn"]: formData.orgPhoneIn,
       ["org" + type + "Fax"]: formData.orgFax,
       ["org" + type + "Rank"]: formData.orgLevel,
-      [nameId]: store.draftId,
+      [nameId]: rootId,
     };
     console.log(body);
-    await http
-      .post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((err) => {
-        console.log(err);
-      })
-      .finally(() => {
-        close();
-        hideLoader();
-      });
+
+    if (actionType.value === "ADD") {
+      await http
+        .post(config.API.createOrgLevel(type.toLocaleLowerCase()), body)
+        .then((res) => {
+          console.log(res);
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((err) => {
+          console.log(err);
+          messageError($q, err);
+        })
+        .finally(async () => {
+          await props.fetchDataTree?.();
+          await closeClear();
+          await hideLoader();
+        });
+    } else {
+      props.dataNode &&
+        (await http
+          .put(
+            config.API.orgLevelByid(
+              type.toLocaleLowerCase(),
+              props.dataNode.orgTreeId
+            ),
+            body
+          )
+          .then((res) => {
+            console.log(res);
+            success($q, "บันทึกข้อมูลสำเร็จ");
+          })
+          .catch((err) => {
+            console.log(err);
+            messageError($q, err);
+          })
+          .finally(async () => {
+            await props.fetchDataTree?.();
+            await closeClear();
+            await hideLoader();
+          }));
+    }
   });
 }
 
+function closeClear() {
+  formData.orgName = "";
+  formData.orgShortName = "";
+  formData.orgCode = "";
+  formData.orgPhoneEx = "";
+  formData.orgPhoneIn = "";
+  formData.orgFax = "";
+  formData.orgLevel = "";
+  props.close?.();
+}
+
 watch(
   () => props.modal,
   () => {
     if (props.modal === true) {
-      if (level.value === "DEPARTMENT") {
-        formData.orgLevel = level.value;
-        orgLevelOption.value = orgLevelOptionMain.value;
+      if (actionType.value === "ADD") {
+        if (level.value === 0) {
+          formData.orgLevel = "DEPARTMENT";
+          orgLevelOption.value = orgLevelOptionMain.value;
+        } else {
+          orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
+          formData.orgLevel = "";
+        }
       } else {
-        orgLevelOption.value = orgLevelOptionMain.value.slice(1, 4);
-        formData.orgLevel = "";
+        if (props.dataNode) {
+          formData.orgName = props.dataNode.orgTreeName;
+          formData.orgShortName = props.dataNode.orgTreeShortName;
+          formData.orgCode = props.dataNode.orgTreeCode;
+          formData.orgPhoneEx = props.dataNode.orgTreePhoneEx;
+          formData.orgPhoneIn = props.dataNode.orgTreePhoneIn;
+          formData.orgFax = props.dataNode.orgTreeFax;
+          formData.orgLevel = props.dataNode.orgTreeRank;
+          orgLevelOption.value = orgLevelOptionMain.value;
+        }
       }
     }
   }
@@ -156,7 +223,7 @@ watch(
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 50vw">
         <form @submit.prevent="validateForm">
-          <DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="props.close" />
+          <DialogHeader :tittle="`เพิ่มหน่วยงาน`" :close="closeClear" />
           <q-separator />
           <q-card-section>
             <div class="row q-col-gutter-sm">
@@ -198,7 +265,7 @@ watch(
               </div>
               <div class="col-4">
                 <q-select
-                  :readonly="level === 'DEPARTMENT'"
+                  :readonly="level === 0 || formData.orgLevel === 'DEPARTMENT'"
                   for="#ocLevel"
                   ref="orgLevelRef"
                   dense