api ผังบัญชีค่าจ้างลูกจ้างประจำ => บัญชีโครงสร้าง

src/modules/13_salary/components/salaryEmployeeChart/DialogEmployeeChart.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, reactive, watch } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { ObjectCharRef } from "@/modules/13_salary/interface/index/EmployeeChart";
 import type { FormDataChar } from "@/modules/13_salary/interface/request/EmployeeChart";
@@ -24,6 +26,10 @@ const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   isStatusEdit: { type: Boolean, required: true },
   data: { type: Object, required: true },
+  fetchData: {
+    type: Function,
+    required: true,
+  },
 });
 const formData = reactive<FormDataChar>({
   name: "", //ชื่อผังบัญชีโครงสร้างอัตราค่าจ้างลูกจ้าง
@@ -43,6 +49,29 @@ const ObjectRef: ObjectCharRef = {
   group: groupRef,
 };
 
+function fetchSalaryDetail(id: string) {
+  showLoader();
+  http
+    .get(config.API.salaryEmployeeChartByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.name = data.name;
+      formData.group = data.group;
+      formData.isActive = data.isActive;
+      formData.date = data.date;
+      formData.startDate = data.startDate;
+      formData.endDate = data.endDate;
+      formData.details = data.details;
+      isReadonly.value = data.isActive ? true : false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 const isReadonly = ref<boolean>(false);
 function onClickSubmit() {
   const hasError = [];
@@ -62,8 +91,21 @@ function onClickSubmit() {
   }
 }
 
-function onSubmit() {
-  console.log(props.isStatusEdit);
+async function onSubmit() {
+  showLoader();
+  try {
+    const url = !props.isStatusEdit
+      ? config.API.salaryEmployeeChart
+      : config.API.salaryEmployeeChartByid(props.data.id);
+    await http[!props.isStatusEdit ? "post" : "put"](url, formData);
+    success($q, "บันทีกข้อมูลสำเร็จ");
+    props.fetchData?.();
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+    closeDialog();
+  }
 }
 
 function closeDialog() {
@@ -94,16 +136,7 @@ watch(
   () => modal.value,
   () => {
     if (modal.value && props.isStatusEdit) {
-      console.log(props.data);
-      const data = props.data;
-      formData.name = data.name;
-      formData.group = data.group;
-      formData.isActive = data.isActive;
-      formData.date = data.date;
-      formData.startDate = null;
-      formData.endDate = null;
-      formData.details = "";
-      isReadonly.value = data.isActive ? true : false;
+      fetchSalaryDetail(props.data.id);
     }
   }
 );
@@ -112,7 +145,14 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 80%">
       <form @submit.prevent.stop="onClickSubmit">
-        <Header tittle="test" :close="closeDialog" />
+        <Header
+          :tittle="
+            props.isStatusEdit
+              ? 'แก้ไขผังบัญชีค่าจ้างลูกจ้างประจำ'
+              : 'เพิ่มผังบัญชีค่าจ้างลูกจ้างประจำ'
+          "
+          :close="closeDialog"
+        />
         <q-separator />
         <q-card-section class="scroll" style="max-height: 70vh">
           <div class="row col-12 q-col-gutter-sm">