validate แบบสํารวจ

src/modules/05_placement/components/probation/SummarySurvey.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
@@ -45,6 +45,10 @@ const result_option = ref<any>([
 const note = ref<string>("");
 const date = ref<Date>(new Date());
 
+onMounted(() => {
+  getSurveyData();
+});
+
 const saveEdit = (id: string) => {
   dialogConfirm($q, () => console.log("save"));
 };
@@ -60,16 +64,21 @@ const getSurveyData = async () => {
     .get(config.API.summarySurveyDetail(assignId.value))
     .then((res: any) => {
       const data = res.data.data;
-      answer1.value = data.answer1,
+      if (data !== null) {
-      answer2.value = data.answer2,
+        answer1.value = data.answer1;
-      answer3.value = data.answer3
+        answer2.value = data.answer2;
-      status.value = false
+        answer3.value = data.answer3;
-})
+      }
+      status.value = false;
+    })
     .catch((e) => {
       console.log(e);
     });
 };
-const save = () => {
+const classBordered = ref<string>("");
+const save = async () => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result && answer3.value !== 0) {
       const data = {
         answer1: answer1.value,
         answer2: answer2.value,
@@ -85,14 +94,21 @@ const save = () => {
             messageError($q, e);
           });
       });
+    } else if (answer3.value == 0) {
+      classBordered.value = "border_custom";
+    }
+  });
 };
-onMounted(() => {
+watch(answer3, () => {
-  getSurveyData();
+  if (answer3.value == 0) {
+    classBordered.value = "border_custom";
+  } else classBordered.value = "";
 });
 </script>
 
 <template>
   <div class="row col-12 q-ma-xs">
+    <q-form ref="myForm" class="q-pa-md">
       <div class="toptitle text-dark col-12 row items-center q-gutter-md">
         <div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
       </div>
@@ -111,6 +127,7 @@ onMounted(() => {
             outlined
             v-model="answer1"
             type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
           />
         </div>
       </div>
@@ -129,11 +146,12 @@ onMounted(() => {
             outlined
             v-model="answer2"
             type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
           />
         </div>
       </div>
 
-    <div class="col-12 row q-mt-md">
+      <div :class="`col-12 row q-mt-md ${classBordered}`">
         <div class="text-top0 items-center">
           <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
           ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
@@ -168,6 +186,7 @@ onMounted(() => {
       <div class="col-12 q-my-md">
         <q-separator size="3px" color="grey-2" />
       </div>
+    </q-form>
     <!-- <Footer /> -->
     <div class="row col-12">
       <q-space />
@@ -196,4 +215,10 @@ onMounted(() => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+  padding: 10px;
+}
 </style>