ระบบการพัฒนา => รายการโครงการปรับการแสดงผลแบบฟอร์ม

src/modules/15_development/components/BasicInfo.vue

@@ -16,12 +16,18 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 
-const projectId = ref<string>(route.params.id.toLocaleString());
+/**
+ * props
+ */
+const isChangeData = defineModel<boolean>("isChangeData", { required: true });
 const props = defineProps({
   nextStep: { type: Function, required: true },
+  onCheckChangeData: { type: Function, required: true },
 });
+
+const projectId = ref<string>(route.params.id.toLocaleString());
 const checkRoutePermission = ref<boolean>(
   route.name == "developmentDetailPage"
 );
@@ -73,19 +79,20 @@ function fetchData(id: string) {
     })
     .finally(() => {
       hideLoader();
+      isChangeData.value = false;
     });
 }
 
-/** function บันทึกข้อมูล*/
+/**
+ * function บันทึกข้อมูล
+ */
 function onSubmit() {
-  // dialogConfirm($q, () => {
   showLoader();
   http
     .put(config.API.developmentMainTab("tab1", projectId.value), formData)
     .then(() => {
       fetchData(projectId.value);
-      // success($q, "บันทึกข้อมูลสำเร็จ");
-      props.nextStep();
+      isChangeData.value = false;
     })
     .catch((err) => {
       messageError($q, err);
@@ -93,10 +100,11 @@ function onSubmit() {
     .finally(() => {
       hideLoader();
     });
-  // });
 }
 
-/** function fetch หา Id หน่วยงานที่ Active*/
+/**
+ * function fetch หา Id หน่วยงานที่ Active
+ */
 function fetchActive() {
   showLoader();
   http
@@ -138,16 +146,33 @@ function updateSelected(data: DataTree) {
   formData.node = data.orgLevel;
   formData.nodeId = data.orgTreeId;
   formData.orgRevisionId = data.orgRevisionId;
+  props.onCheckChangeData();
 }
 
-/** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
+/**
+ * function ไปยัง Tab ค่อไป
+ */
+function onNextTab() {
+  props.nextStep();
+}
+
+/**
+ * ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น
+ */
 onMounted(async () => {
   fetchActive();
 });
+
+/**
+ * เรียก function ไปใช่หน้าหลัก
+ */
+defineExpose({
+  onSubmit,
+});
 </script>
 
 <template>
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
+  <q-form greedy @submit.prevent @validation-success="onNextTab">
     <q-card bordered class="col-12 row caedNone">
       <div class="col-xs-12 col-sm-3 row">
         <div class="col-12 row no-wrap">
@@ -229,6 +254,7 @@ onMounted(async () => {
                   year-picker
                   :enableTimePicker="false"
                   :readonly="checkRoutePermission"
+                  @update:model-value="props.onCheckChangeData()"
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -268,6 +294,7 @@ onMounted(async () => {
                   rows="6"
                   type="textarea"
                   hide-bottom-space
+                  @update:model-value="props.onCheckChangeData()"
                   :rules="[
             (val:string) =>
               !!val || `${'กรุณากรอกชื่อโครงการ/กิจกรรม/หลักสูตร'}`,
@@ -285,6 +312,7 @@ onMounted(async () => {
                   rows="6"
                   hide-bottom-space
                   type="textarea"
+                  @update:model-value="props.onCheckChangeData()"
                 />
               </div>
               <div class="col-xs-12 col-sm-12 col-md-12">
@@ -298,6 +326,7 @@ onMounted(async () => {
                   rows="6"
                   hide-bottom-space
                   type="textarea"
+                  @update:model-value="props.onCheckChangeData()"
                 />
               </div>
             </div>