Fix

pages/complaint/index.vue

@@ -154,33 +154,33 @@
         
 
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="fullName" placeholder="نام و نام خانوادگی"></el-input>
+          <el-input v-model="form.fullName" :class="validation.fullName ? 'err' : null" placeholder="نام و نام خانوادگی"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="national" placeholder="کد ملی"></el-input>
+          <el-input v-model="form.national" :class="validation.national ? 'err' : null" placeholder="کد ملی"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="phoneNumber" placeholder="شماره تلفن"></el-input>
+          <el-input v-model="form.phoneNumber" :class="validation.phoneNumber ? 'err' : null" placeholder="شماره تلفن"></el-input>
         </div>
 
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="email" placeholder="ایمیل"></el-input>
+          <el-input v-model="form.email" :class="validation.email ? 'err' : null" placeholder="ایمیل"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="deviceNumber" placeholder="شماره سریال دستگاه"></el-input>
+          <el-input v-model="form.deviceNumber" :class="validation.deviceNumber ? 'err' : null" placeholder="شماره سریال دستگاه"></el-input>
         </div>
         <div class="col-lg-4 col-sm-12 mt-4">
-          <el-input v-model="receptionCode" placeholder="کد پذیرش"></el-input>
+          <el-input v-model="form.receptionCode" :class="validation.receptionCode ? 'err' : null" placeholder="کد پذیرش"></el-input>
         </div>
 
         <div class="col-lg-12 col-sm-12 mt-4">
-          <el-input v-model="caption" type="textarea" :rows="5" placeholder="توضیحات"> </el-input>
+          <el-input v-model="form.caption" :class="validation.caption ? 'err' : null" type="textarea" :rows="5" placeholder="توضیحات"> </el-input>
         </div>
 
         <div class="col-lg-4 col-sm-12 mt-4">
           <h5 class="mb-2">انتخاب نحوه پاسخ دهی:</h5>
           <el-switch
-            v-model="callType"
+            v-model="form.callType"
             inactive-color="#03fc3d"
             active-color="#0367fc"
             style="display: flex; justify-content: space-evenly"
@@ -204,14 +204,19 @@ export default {
 
   data() {
     return {
-      fullName: '',
-      national: '',
-      phoneNumber: '',
-      deviceNumber: '',
-      email: '',
-      receptionCode: '',
-      caption: '',
-      callType: true
+     form:{
+      fullName: null,
+      national: null,
+      phoneNumber: null,
+      deviceNumber: null,
+      email: null,
+      receptionCode: null,
+      caption: null,
+      callType: true,
+     },
+      validation: {},
+      hasValidationError: false,
+      waiting:true
     }
   },
   computed: {
@@ -222,12 +227,62 @@ export default {
   mounted() {},
   methods: {
     sendForm() {
+  
+
+      this.validation = {}
+      this.hasValidationError = false
+      this.waiting = true
+
+
+      this.$axios
+        .post('/api/public/complaint', this.form)
+        .then(response => {
+          this.waiting = false
+
+          
+          this.$message({
+              type: 'success',
+              message: "با موفقیت ثبت شد"
+            })
+
+          this.form = {
+            fullName: '',
+      national: '',
+      phoneNumber: '',
+      deviceNumber: '',
+      email: '',
+      receptionCode: '',
+      caption: '',
+      callType: true,
+          }
+        }).catch(error => {
+    
+
+          if (error.response.status === 422) {
+            this.validation = error.response.data.validation
+            this.hasValidationError = true
+            this.waiting = false
+          } else
+            this.$message({
+              type: 'error',
+              message: error.response.data.message
+            })
+        })
       
+
+
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+.err{
+      box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
+    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
+    -moz-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
+    border: 2px solid rgba(255, 0, 0, 0.2);
+    border-radius: 8px;
+}
 .bg-img-in {
   background: url(@/static/assets/img/home/bg3.jpeg);
   background-size: cover;