ปรับฟอร์มการลา

src/modules/05_leave/views/AddPage.vue

@@ -27,14 +27,10 @@ const route = useRoute();
 const myform = ref<QForm | null>(null);
 const $q = useQuasar();
 
-const model = ref("");
-const modelSpecific = ref("");
+const model = ref<string>("");
+const modelSpecific = ref<string>("");
 
-const clickBack = () => {
-  router.push(`/leave`);
-};
-
-onMounted(() => {});
+// onMounted(() => {});
 
 const saveAbsence = () => {
   $q.dialog({
@@ -63,11 +59,13 @@ const onSubmit = async () => {
   console.log("save");
 };
 </script>
+
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
       <div class="toptitle text-white col-12 row items-center">
         <q-btn
+          to="/leave"
           icon="mdi-arrow-left"
           unelevated
           round
@@ -75,17 +73,17 @@ const onSubmit = async () => {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="clickBack"
         />
         <div>ยื่นใบลา</div>
       </div>
+
       <q-form ref="myform" class="col-12">
         <q-card bordered>
           <div class="col-12 row q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-sm-12">
               <q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
               <div class="q-pl-sm text-weight-bold text-dark">
-                เลือกประเภทการลา {{ model }}
+                เลือกประเภทการลา
               </div>
               <div class="q-py-sm q-px-lg">
                 <div class="row">
@@ -104,7 +102,10 @@ const onSubmit = async () => {
                   />
                 </div>
                 <div class="row q-mt-sm">
-                  <div class="col-12 col-sm-6 col-md-3" v-if="model === '5' || model === '7'">
+                  <div
+                    class="col-12 col-sm-6 col-md-3"
+                    v-if="model === '5' || model === '7'"
+                  >
                     <q-select
                       dense
                       outlined
@@ -128,11 +129,20 @@ const onSubmit = async () => {
 
                 <!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
               </div>
-              <q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-              <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
-              <Form :model="model" />
+
+              <div>
+                <q-icon
+                  name="mdi-numeric-2-circle"
+                  size="20px"
+                  color="primary"
+                />
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  ข้อมูลการลา
+                </div>
+                <Form :model="model" />
+              </div>
             </div>
-            <div v-if="model" style="width: 100%;">
+            <div v-if="model" class="col-12">
               <Form3
                 :on-submit="onSubmit"
                 v-if="model === '0' || model === '1' || model === '2'"
@@ -147,19 +157,19 @@ const onSubmit = async () => {
                 :on-submit="onSubmit"
                 v-if="model === '5' && modelSpecific === '1'"
               />
-              <Form8 :on-submit="onSubmit" v-if="model === '6'" style="width: 100%;"/>
+              <Form8
+                :on-submit="onSubmit"
+                v-if="model === '6'"
+                style="width: 100%"
+              />
               <Form9
-                :on-submit="onSubmit" 
-                v-if="model === '7' && modelSpecific === '0'" style="width: 100%"
+                :on-submit="onSubmit"
+                v-if="model === '7' && modelSpecific === '0'"
+                style="width: 100%"
               />
               <Form10
                 :on-submit="onSubmit"
-                v-if="
-                  model === '7' &&
-                  (modelSpecific === '1' ||
-                    modelSpecific === '2' ||
-                    modelSpecific === '3')
-                "
+                v-if="model === '7' && modelSpecific != '0'"
               />
               <Form11 :on-submit="onSubmit" v-if="model === '8'" />
               <Form12 :on-submit="onSubmit" v-if="model === '9'" />
@@ -171,9 +181,3 @@ const onSubmit = async () => {
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.btnBlue {
-  background-color: #016987;
-  color: #fff;
-}
-</style>