api โครงสร้างอัตรากำลัง

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

@@ -1,22 +1,28 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import DialogHeader from "@/components/DialogHeader.vue";
+
 import type {
   FormDataNewStructure,
   FormNewStructureRef,
   DataOption,
 } from "@/modules/02_organizationalNew/interface/index/Main";
 
-const modal = defineModel<boolean>("newStructure", { required: true });
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const $q = useQuasar();
+const store = useOrganizational();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("newStructure", { required: true });
+const status = defineModel<boolean>("status", { required: true });
 
-const status = defineModel("status");
-const rows = ref<any[]>([]);
 const typeOp = ref<DataOption[]>([
   {
     id: "NEW",
@@ -71,7 +77,18 @@ function validateForm() {
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
+    // http
+    //   .post(config.API.createOrganization, formData)
+    //   .then(() => {
     status.value = true;
+    store.typeOrganizational = "draft";
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    // })
+    // .catch((err) => {
+    //   messageError($q, err);
+    // })
+    // .finally(() => {});
+
     console.log(formData);
   });
   modal.value = false;
@@ -80,6 +97,13 @@ function onSubmit() {
 function close() {
   modal.value = false;
 }
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && !status.value && (formData.type = "NEW");
+  }
+);
 </script>
 <template>
   <template>
@@ -107,6 +131,7 @@ function close() {
                 <q-select
                   for="#type"
                   ref="typeRef"
+                  :readonly="!status"
                   dense
                   hide-bottom-space
                   outlined