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 dataStore = useLeaveStore()
-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 { 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>

src/modules/05_leave/store.ts

@@ -5,6 +5,7 @@ import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/module
 import { useCounterMixin } from "@/stores/mixin"
 
 export const useLeaveStore = defineStore("Leave", () => {
+	const typeLeave = ref<string|undefined>('')
 	const mixin = useCounterMixin()
 	const { date2Thai } = mixin
 	const LeaveType = ref<string | null>("0")
@@ -244,6 +245,53 @@ export const useLeaveStore = defineStore("Leave", () => {
 			style: "font-size: 14px; width:10%;",
 		},
 	])
+	function typeConvert(item: string,subitem:any) {
+		console.log('first',item)
+		if (item !== '5' && item !== '7') {
+			typeLeave.value = convertSubtitle(item);
+		}else if(item === '5'){
+			typeLeave.value = convertSubtitleInfo(subitem);
+		
+		}else if(item === '7'){
+			typeLeave.value = convertSubtitleInfo2(subitem);
+		}
+	}
+
+	function convertSubtitle(val: string) {
+		if (val) {
+			switch (val) {
+				case "0": return "ลาป่วย";
+				case "1": return "ลากิจส่วนตัว";
+				case "2": return "ลาคลอดบุตร";
+				case "3": return "ลาไปช่วยเหลือภริยาที่คลอดบุตร";
+				case "4": return "ลาพักผ่อน";
+				case "5": return "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ";
+				case "6": return "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล";
+				case "7": return "ลาไปศึกษา";
+				case "8": return "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ";
+				case "9": return "ลาติดตามคู่สมรส";
+				case "10": return "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ";
+			}
+		}
+	}
+	function convertSubtitleInfo(val: string) {
+		if (val) {
+			switch (val) {
+				case "0": return "ลาอุปสมบท";
+				case "1": return "ลาประกอบพิธีฮัจย์";
+			}
+		}
+	}
+	function convertSubtitleInfo2(val: string) {
+		if (val) {
+			switch (val) {
+				case "0": return "ลาไปศึกษา";
+				case "1": return "ฝึกอบรม";
+				case "2": return "ปฎิบัติการวิจัย";
+				case "3": return "ดูงาน";
+			}
+		}
+	}
 
 	return {
 		typeOptions,
@@ -264,6 +312,8 @@ export const useLeaveStore = defineStore("Leave", () => {
 		fiscalyearOP,
 		fiscalYearyear,
 		options,
-		optionsOrdination
+		optionsOrdination,
+		typeConvert,
+		typeLeave
 	}
 })

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted,computed } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
-import Form from '@/modules/05_leave/componenst/Form.vue'
+import Form from "@/modules/05_leave/componenst/Form.vue";
+import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
 import { useLeaveStore } from "@/modules/05_leave/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QForm } from "quasar";
 
-
 const dataStore = useLeaveStore();
 
 const router = useRouter();
@@ -17,18 +17,15 @@ const route = useRoute();
 const myform = ref<QForm | null>(null);
 const $q = useQuasar();
 
-const model = ref('');
+const model = ref("");
 const modelSpecific = ref(null);
 
-
-
 const clickBack = () => {
   router.push(`/leave`);
 };
 
 onMounted(() => {});
 
-
 const saveAbsence = () => {
   $q.dialog({
     title: "ยืนยันการยื่นข้อมูลลาออก",
@@ -74,7 +71,7 @@ const saveAbsence = () => {
             <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="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-select
@@ -88,66 +85,40 @@ const saveAbsence = () => {
                   emit-value
                   map-options
                   prefix="ประเภทใบลา :"
+                  @update:model-value="dataStore.typeConvert(model,null)"
                 />
                 <!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
-                <div class="col-6 row q-pa-sm" v-if="model === '5' || model === '7'">
+                <div
+                  class="col-6 row q-pa-sm"
+                  v-if="model === '5' || model === '7'"
+                >
                   <q-select
                     dense
                     class="q-ml-lg col-6"
                     outlined
                     v-model="modelSpecific"
-                    :options="model === '5' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
+                    :options="
+                      model === '5'
+                        ? dataStore.optionsOrdination
+                        : dataStore.optionsSpecific
+                    "
                     option-value="id"
                     option-label="name"
                     emit-value
                     map-options
                     prefix="ประเภทใบลา :"
+                    @update:model-value="dataStore.typeConvert(model,modelSpecific)"
                   />
                 </div>
               </div>
-              <q-icon
+              <q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
-                name="mdi-numeric-2-circle"
+              <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
-                size="20px"
+              <Form :model="model" />
-                color="primary"
+            </div>
-                v-if="model == '7'"
+            <div v-if="model">
-              />
+              <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
-              <div
-                class="q-pl-sm text-weight-bold text-dark"
-                v-if="model == '7'"
-              >
-                เลือกประเภทใบลาศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
-              </div>
-              <div
-                class="col-12 row q-pa-sm q-col-gutter-sm"
-                v-if="model == '7'"
-              >
-                <q-select
-                  dense
-                  class="q-ml-lg col-6"
-                  outlined
-                  v-model="modelSpecific"
-                  :options="dataStore.optionsSpecific"
-                  option-value="id"
-                  option-label="name"
-                  emit-value
-                  map-options
-                  prefix="ประเภทใบลา :"
-                />
-              </div>
-              <q-icon
-                name="mdi-numeric-2-circle"
-                size="20px"
-                color="primary"
-                v-else
-              />
-              <q-icon
-                name="mdi-numeric-3-circle"
-                size="20px"
-                color="primary"
-                v-if="model == '7'"
-              />
               <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-                <Form :type="model"/>
+              <Form3 v-if="model === '0' || model === '1' || model === '2'"/>
             </div>
           </div>
           <q-separator />