ยุทธศาสตร์ => API Tree

src/modules/15_development/views/Strategic.vue

@@ -4,31 +4,38 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { ItemsMenu } from "@/modules/15_development/interface/index/Main";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
-const { showLoader, hideLoader, dialogConfirm, dialogRemove } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  dialogRemove,
+  messageError,
+  success,
+} = useCounterMixin();
 
-const ListMenu = ref<any>([
+const ListMenu = ref<ItemsMenu[]>([
   {
     label: "เพิ่ม",
     icon: "add",
-    type: "ADD",
+    value: "ADD",
     color: "primary",
   },
   {
     label: "แก้ไข",
     icon: "edit",
-    type: "EDIT",
+    value: "EDIT",
     color: "edit",
   },
   {
     label: "ลบ",
     icon: "delete",
-    type: "DEL",
+    value: "DEL",
     color: "red",
   },
 ]);
@@ -90,7 +97,7 @@ function onClickAction(type: string, data: any = null) {
       onClickOpenDialog(true, data);
       break;
     case "DEL":
-      onDelete();
+      onDelete(data);
       break;
     default:
       break;
@@ -98,28 +105,16 @@ function onClickAction(type: string, data: any = null) {
 }
 
 const modalDialog = ref<boolean>(false);
-const statusEdit = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
 const strategicName = ref<string>("");
+const levelnode = ref<number>(0);
 const titleDialog = ref<string>("");
 function onClickOpenDialog(status: boolean = false, data: any = null) {
-  statusEdit.value = status;
-  // if (data) {
-  //   titleDialog.value =
-  //     data.level === "0"
-  //       ? "ยุทธศาสตร์ที่ 1"
-  //       : data.level === "1"
-  //       ? "ยุทธศาสตร์ย่อย"
-  //       : data.level === "2"
-  //       ? ""
-  //       : data.level === "3"
-  //       ? ""
-  //       : "";
-  // } else {
-  //   titleDialog.value = "ยุทธศาสตร์/แผน";
-  // }
-
+  isStatusEdit.value = status;
   if (status) {
-    strategicName.value = data.orgTreeName;
+    nodeId.value = data.id;
+    strategicName.value = data.strategyChild1Name;
+    levelnode.value = 1;
     titleDialog.value =
       data.level === "0"
         ? "ยุทธศาสตร์"
@@ -140,6 +135,8 @@ function onClickOpenDialog(status: boolean = false, data: any = null) {
           : data.level === "2"
           ? "กลยุทธ์ที่/เป้าประสงค์ที่"
           : "";
+      levelnode.value = 1;
+      nodeId.value = data.id;
     } else {
       titleDialog.value = "ยุทธศาสตร์";
     }
@@ -153,13 +150,50 @@ function closeDialog() {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
-    closeDialog();
+  dialogConfirm($q, async () => {
+    const formData = {
+      idnode: levelnode.value === 0 ? "0" : nodeId.value,
+      levelnode: levelnode.value,
+      name: strategicName.value,
+    };
+    try {
+      // const url = isStatusEdit.value
+      //   ? config.API.devStrategy;
+      //   : config.API.devStrategy;
+      const method = isStatusEdit.value ? "patch" : "post";
+      await http[method](config.API.devStrategy, formData);
+      fetchDataTree();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
   });
 }
 
-function onDelete() {
-  dialogRemove($q, () => {});
+function onDelete(data: any) {
+  console.log(data);
+  dialogRemove($q, () => {
+    showLoader();
+    const formData = {
+      idnode: data.id,
+      levelnode: 1,
+    };
+    http
+      .delete(config.API.devStrategy, { data: formData })
+      .then(() => {
+        fetchDataTree();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 onMounted(() => {
@@ -240,13 +274,13 @@ onMounted(() => {
                 <q-item
                   clickable
                   v-close-popup
-                  @click.stop="onClickAction(item.type, prop.node)"
+                  @click.stop="onClickAction(item.value, prop.node)"
                 >
                   <q-item-section avatar style="min-width: 20px">
                     <q-icon size="17px" :color="item.color" :name="item.icon" />
                   </q-item-section>
 
-                  <div v-if="item.type === 'ADD'">
+                  <div v-if="item.value === 'ADD'">
                     <q-item-section v-if="prop.node.level === '0'">
                       {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
                     </q-item-section>
@@ -258,7 +292,7 @@ onMounted(() => {
                     </q-item-section>
                   </div>
 
-                  <div v-else-if="item.type === 'EDIT'">
+                  <div v-else-if="item.value === 'EDIT'">
                     <q-item-section v-if="prop.node.level === '0'">
                       {{ `${item.label}ยุทธศาสตร์` }}
                     </q-item-section>
@@ -290,7 +324,7 @@ onMounted(() => {
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="`${
-            statusEdit ? `แก้ไข${titleDialog}` : `เพิ่ม${titleDialog}`
+            isStatusEdit ? `แก้ไข${titleDialog}` : `เพิ่ม${titleDialog}`
           }`"
           :close="closeDialog"
         />