form

src/modules/05_leave/componenst/Form.vue

@@ -1,22 +1,21 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive,watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRouter, useRoute } from "vue-router";
 import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
-const router = useRouter();
+import { useLeaveStore } from '@/modules/05_leave/store'
 const mixin = useCounterMixin();
-const routeName = router.currentRoute.value.name;
-const files = ref<any>();
-const levelStudy = ref<string>("");
-const degree = ref<string>("");
-const major = ref<string>("");
-const educational = ref<string>("");
-const studyPeriod = ref<string>("");
-const country = ref<string>("");
-const capital = ref<string>("");
-const noteReason = ref("");
-
+const dataStore = useLeaveStore()
 const { date2Thai } = mixin;
+const props = defineProps({
+  model: {
+    type: String,
+    default: '',
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+});
 
 const formData = reactive<FormData>({
   dateStart: new Date(),
@@ -30,20 +29,10 @@ const formData = reactive<FormData>({
   leaveUse: "1",
   leaveRemaining: "1",
 });
-const props = defineProps({
-  type: {
-    type: String,
-    default: "",
-  },
-  data: {
-    type: Object,
-    default: null,
-  },
-  onSubmit: {
-    type: Function,
-    default: () => "",
-  },
-});
+
+
+
+
 </script>
 <template>
   <q-card bordered class="q-pa-md bg-grey-1">
@@ -57,7 +46,7 @@ const props = defineProps({
         borderless
         :enableTimePicker="false"
         week-start="0"
-        :readonly="routeName != 'addAbsence'"
+        readonly
       >
         <template #year="{ year }">
           {{ year + 543 }}
@@ -70,7 +59,7 @@ const props = defineProps({
             outlined
             dense
             hide-bottom-space
-            :readonly="routeName != 'addAbsence'"
+            readonly
             class="full-width datepicker"
             :model-value="
               formData.dateStart != null ? date2Thai(formData.dateStart) : null
@@ -94,7 +83,7 @@ const props = defineProps({
         dense
         outlined
         readonly
-        v-model="formData.subject"
+        v-model="dataStore.typeLeave"
         label="เรื่อง"
       />
       <q-input
@@ -163,106 +152,4 @@ const props = defineProps({
       />
     </div>
   </q-card>
-  <q-card bordered class="q-pa-md bg-grey-1">
-    <div class="col-12 row q-pa-sm q-col-gutter-sm">
-      <q-input
-        class="col-4"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="levelStudy"
-        label="ระดับที่ขอลาศึกษา"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <q-input
-        class="col-4"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="degree"
-        label="ชื่อปริญญา/ประกาศนียบัตร"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <q-input
-        class="col-4"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="major"
-        label="สาขาวิชาเอก/หลักสูตร/วิชา"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <q-input
-        class="col-4"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="educational"
-        label="ณ สถานศึกษา"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <q-input
-        class="col-4"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="studyPeriod"
-        label="ระยะเวลาในการศึกษาตลอดหลักสูตร"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <q-input
-        class="col-4"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="country"
-        label="ประเทศ"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <q-input
-        class="col-4"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="capital"
-        label="ด้วยทุน"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <q-input
-        class="col-8"
-        v-if="props.type === '7'"
-        dense
-        outlined
-        v-model="noteReason"
-        label="ที่มาของหลักสูตร"
-        :readonly="routeName != 'addAbsence'"
-      />
-
-      <div class="col-12 row" v-if="routeName != 'addAbsence'">
-        <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-          <div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-        </div>
-        <q-card bordered flat class="full-width">
-          <q-list separator>
-            <q-item v-for="file in files" :key="file.key" class="q-my-xs">
-              <q-item-section>
-                <q-item-label class="full-width ellipsis">
-                  {{ file.fileName }}
-                </q-item-label>
-
-                <q-item-label caption> </q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
-      </div>
-    </div>
-  </q-card>
 </template>

src/modules/05_leave/componenst/Forms/01_SickForm.vue

@@ -32,8 +32,7 @@ const props = defineProps({
       (อาจดึงมาจากที่อยู่ปัจจุบันโดยอัตโนมัติ แต่ให้ผู้ใช้งานแก้ไขได้)
     </p> -->
 
-    <div class="col-12 row q-col-gutter-md q-pa-md">
-      <div class="col-xs-12 col-sm-12">
+
         <q-card bordered class="q-pa-md bg-grey-1">
           <div class="col-12 row q-pa-sm q-col-gutter-sm">
             <q-input
@@ -230,6 +229,5 @@ const props = defineProps({
           </div>
         </q-card>
       </div>
-    </div>
-  </div>
+
 </template>