ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล

src/modules/05_leave/componenst/Forms/07_HajjForm.vue

@@ -1,31 +1,319 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { reactive, ref } from "vue";
-
+import { useCounterMixin } from "@/stores/mixin";
-const edit = ref<boolean>(false);
+import type { FormRef07 } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm } = mixin;
+const edit = ref<boolean>(true);
 const props = defineProps({
   data: {
     type: Array,
     default: null,
   },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
 });
+const files = ref<any>(null);
+const formData = reactive<any>({
+  writeat: "",
+  government: new Date(),
+  dateLeaveStart: new Date(),
+  dateLeaveEnd: new Date(),
+  totalLeave: new Date(),
+  monk: "",
+  file: null,
+});
+
+const fileRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+const governmentRef = ref<object | null>(null);
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+
+const formRef: FormRef07 = {
+  file: fileRef,
+  writeat: writeatRef,
+  government: governmentRef,
+  dateLeaveStart: dateLeaveStartRef,
+  dateLeaveEnd: dateLeaveEndRef,
+};
+
+function onValidate() {
+  const hasError = [];
+
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
 </script>
 
 <template>
   <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
   <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
+  <form @submit.prevent="onValidate" class="full-width">
-    ลาประกอบพิธีฮัจย์
+    <q-card bordered class="q-pa-md bg-grey-1">
-    <ul>
+      <div class="row q-pa-sm q-col-gutter-sm">
-      <li>ลาตั้งแต่วันที่</li>
+        <q-input
-      <li>ลาถึงวันที่</li>
+          ref="writeatRef"
-      <li>
+          class="col-12 col-sm-12"
-        จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
+          dense
-        backend)
+          outlined
-      </li>
+          bg-color="white"
-      <li>วันที่เข้ารับราชการ (Auto)</li>
+          hide-bottom-space
-      <li>เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก)</li>
+          v-model="formData.writeat"
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
+          label="เขียนที่"
-      <li>เอกสารประกอบ</li>
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-    </ul>
+        />
-  </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formData.government"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+              :readonly="!edit"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  ref="governmentRef"
+                  dense
+                  bg-color="white"
+                  hide-bottom-space
+                  :readonly="!edit"
+                  class="full-width datepicker"
+                  :model-value="
+                    formData.government != null
+                      ? date2Thai(formData.government)
+                      : null
+                  "
+                  :label="`${'วันที่เข้ารับราชการ'}`"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+        <datepicker
+          class="col-12 col-md-4 col-sm-6"
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveStart"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="dateLeaveStartRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveStart != null
+                  ? date2Thai(formData.dateLeaveStart)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6"
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveEnd"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="dateLeaveEndRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveEnd != null
+                  ? date2Thai(formData.dateLeaveEnd)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          type="number"
+          v-model="formData.totalLeave"
+          label="จำนวนวันที่ลา"
+          readonly
+        />
+
+        <div class="q-pl-sm text-weight-bold text-dark col-12">
+          เคยไปประกอบพิธีฮัจย์หรือไม่
+        </div>
+        <div class="col-12">
+          <q-radio
+            v-model="formData.monk"
+            val="ever"
+            label="เคย"
+            checked-icon="task_alt"
+          />
+          <q-radio
+            v-model="formData.monk"
+            val="never"
+            label="ไม่เคยไปประกอบพิธีฮัจย์"
+            checked-icon="task_alt"
+          />
+        </div>
+        <q-input
+          class="col-12 q-mt-sm"
+          dense
+          bg-color="white"
+          outlined
+          v-model="formData.info"
+          label="รายละเอียด"
+        />
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="fileRef"
+            v-model="formData.file"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            lazy-rules
+            hide-bottom-space
+            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <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>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+      />
+    </div>
+  </form>
 </template>

src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue

@@ -1,34 +1,356 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { reactive, ref } from "vue";
-
+import { useCounterMixin } from "@/stores/mixin";
-const edit = ref<boolean>(false);
+import type { FormRef08 } from "@/modules/05_leave/interface/request/AddAbsence";
+import { useQuasar } from "quasar";
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { date2Thai, dialogConfirm } = mixin;
+const edit = ref<boolean>(true);
 const props = defineProps({
   data: {
     type: Array,
     default: null,
   },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
 });
+const files = ref<any>(null);
+const formData = reactive<any>({
+  dateLeaveStart: null,
+  dateLeaveEnd: null,
+  totalLeave: 1,
+  file: null,
+  writeat: "",
+  received: "",
+  at: "",
+  dateAt: "",
+  admitted: "",
+  atPlace: "",
+});
+
+const dateLeaveStartRef = ref<object | null>(null);
+const dateLeaveEndRef = ref<object | null>(null);
+const fileRef = ref<object | null>(null);
+const writeatRef = ref<object | null>(null);
+const receivedRef = ref<object | null>(null);
+const atRef = ref<object | null>(null);
+const dateAtRef = ref<object | null>(null);
+const admittedRef = ref<object | null>(null);
+const atPlaceRef = ref<object | null>(null);
+
+const formRef: FormRef08 = {
+  dateLeaveStart: dateLeaveStartRef,
+  dateLeaveEnd: dateLeaveEndRef,
+  file: fileRef,
+  writeat: writeatRef,
+  received: receivedRef,
+  at: atRef,
+  dateAt: dateAtRef,
+  admitted: admittedRef,
+  atPlace: atPlaceRef,
+};
+
+function onValidate() {
+  const hasError = [];
+
+  for (const key in formRef) {
+    if (Object.prototype.hasOwnProperty.call(formRef, key)) {
+      const property = formRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    onSubmit();
+  }
+}
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log(formData);
+      props.onSubmit();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
 </script>
 
 <template>
   <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
   <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
-  <div>
+  <form @submit.prevent="onValidate">
-    ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
+    <q-card bordered class="q-pa-md bg-grey-1">
-    <ul>
+      <div class="row q-pa-sm q-col-gutter-sm">
-      <li>ลาตั้งแต่วันที่</li>
+        <q-input
-      <li>ลาถึงวันที่</li>
+          ref="writeatRef"
-      <li>
+          class="col-12 col-sm-12"
-        จำนวนวันที่ลา Auto (ส่งลาตั้งแต่วันที่และลาถึงวันที่ ไปคำนวนที่ฝั่ง
+          dense
-        backend)
+          outlined
-      </li>
+          bg-color="white"
-      <li>ได้รับหมายเรียกของ</li>
+          hide-bottom-space
-      <li>ที่</li>
+          v-model="formData.writeat"
-      <li>ลงวันที่</li>
+          label="เขียนที่"
-      <li>ให้เข้ารับการ</li>
+          :rules="[(val) => !!val || `${'เขียนที่'}`]"
-      <li>ณ ที่</li>
+        />
-      <li>รายละเอียด (ไม่บังคับกรอก)</li>
+
-      <li>เอกสารประกอบ</li>
+        <datepicker
-    </ul>
+          class="col-12 col-md-4 col-sm-6"
-  </div>
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveStart"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              bg-color="white"
+              dense
+              ref="dateLeaveStartRef"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveStart != null
+                  ? date2Thai(formData.dateLeaveStart)
+                  : null
+              "
+              :label="`${'ลาตั้งแต่วันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <datepicker
+          class="col-12 col-md-4 col-sm-6"
+          menu-class-name="modalfix"
+          v-model="formData.dateLeaveEnd"
+          :locale="'th'"
+          autoApply
+          borderless
+          :enableTimePicker="false"
+          week-start="0"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              outlined
+              dense
+              ref="dateLeaveEndRef"
+              bg-color="white"
+              hide-bottom-space
+              class="full-width datepicker"
+              :model-value="
+                formData.dateLeaveEnd != null
+                  ? date2Thai(formData.dateLeaveEnd)
+                  : null
+              "
+              :label="`${'ลาถึงวันที่'}`"
+              :rules="[(val) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <q-input
+          class="col-12 col-md-4 col-sm-6"
+          dense
+          outlined
+          bg-color="white"
+          type="number"
+          v-model="formData.totalLeave"
+          label="จำนวนวันที่ลา"
+          readonly
+        />
+
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <q-input
+              ref="receivedRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formData.received"
+              label="ได้รับหมายเรียกของ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
+            />
+            <q-input
+              ref="atRef"
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              v-model="formData.at"
+              label="ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
+            />
+          </div>
+        </div>
+        <div class="full-width">
+          <div class="q-col-gutter-sm row">
+            <datepicker
+              class="col-12 col-md-4 col-sm-6"
+              menu-class-name="modalfix"
+              v-model="formData.dateAt"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  ref="dateAtRef"
+                  bg-color="white"
+                  hide-bottom-space
+                  class="full-width datepicker"
+                  :model-value="
+                    formData.dateAt != null ? date2Thai(formData.dateAt) : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-input
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              ref="admittedRef"
+              outlined
+              v-model="formData.admitted"
+              label="ให้เข้ารับการ"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
+            />
+            <q-input
+              class="col-12 col-sm-6 col-md-4"
+              dense
+              bg-color="white"
+              outlined
+              ref="atPlaceRef"
+              v-model="formData.atPlace"
+              label="ณ ที่"
+              hide-bottom-space
+              :rules="[(val) => !!val || `${'กรุณากรอก ณ ที่'}`]"
+            />
+          </div>
+        </div>
+        <q-input
+          class="col-12 q-mt-sm"
+          dense
+          bg-color="white"
+          outlined
+          v-model="formData.info"
+          label="รายละเอียด"
+        />
+        <div class="col-12 col-sm-6">
+          <q-file
+            ref="fileRef"
+            v-model="formData.file"
+            dense
+            label="เอกสารประกอบ"
+            outlined
+            bg-color="white"
+            multiple
+            lazy-rules
+            hide-bottom-space
+            :rules="[(val) => !!val || `${'กรุณาเลือกไฟล์'}`]"
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+          </q-file>
+        </div>
+
+        <div class="col-12 row" v-if="!edit">
+          <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>
+    <q-separator class="q-mt-sm" />
+    <div class="row col-12 q-pt-md">
+      <q-space />
+      <q-btn
+        id="onSubmit"
+        type="submit"
+        unelevated
+        dense
+        class="q-px-md items-center btnBlue"
+        label="บันทึก"
+      />
+    </div>
+  </form>
 </template>

src/modules/05_leave/interface/request/AddAbsence.ts

@@ -26,7 +26,29 @@ interface FormRef06 {
     addressBuddhist:object|null;
     [key: string]: any;
 }
+interface FormRef07 {
+    file:object|null
+    writeat:object|null
+    government:object|null
+    dateLeaveStart:object|null
+    dateLeaveEnd:object|null
+    [key: string]: any;
+}
+interface FormRef08 {
+    dateLeaveStart:object|null
+    dateLeaveEnd:object|null
+    file:object|null
+    writeat:object|null
+    received:object|null
+    at:object|null
+    dateAt:object|null
+    admitted:object|null
+    atPlace:object|null
+    [key: string]: any;
+}
 export type {
     FormData,
-    FormRef06
+    FormRef06,
+    FormRef07,
+    FormRef08,
 }

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

@@ -27,7 +27,7 @@ const route = useRoute();
 const myform = ref<QForm | null>(null);
 const $q = useQuasar();
 
-const model = ref("");
+const model = ref("6");
 const modelSpecific = ref("");
 
 const clickBack = () => {
@@ -85,65 +85,60 @@ const onSubmit = async () => {
             <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">
+              <div class="q-py-sm q-px-lg">
-                <q-select
+                <div class="row">
-                  dense
-                  class="q-ml-lg col-6"
-                  outlined
-                  v-model="model"
-                  :options="dataStore.options"
-                  option-value="id"
-                  option-label="name"
-                  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'"
-                >
                   <q-select
                     dense
-                    class="q-ml-lg col-6"
+                    class="col-12 col-sm-6 col-md-4"
                     outlined
-                    v-model="modelSpecific"
+                    v-model="model"
-                    :options="
+                    :options="dataStore.options"
-                      model === '5'
-                        ? dataStore.optionsOrdination
-                        : dataStore.optionsSpecific
-                    "
                     option-value="id"
                     option-label="name"
                     emit-value
                     map-options
                     prefix="ประเภทใบลา :"
-                    @update:model-value="
+                    @update:model-value="dataStore.typeConvert(model, null)"
-                      dataStore.typeConvert(model, modelSpecific)
-                    "
                   />
                 </div>
+                <div class="row q-mt-sm">
+                  <div class="col-12 col-sm-6 col-md-3" v-if="model === '5' || model === '7'">
+                    <q-select
+                      dense
+                      outlined
+                      v-model="modelSpecific"
+                      :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>
+
+                <!-- 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>
-            <div v-if="model">
+            <div v-if="model" style="width: 100%;">
               <Form3
                 :on-submit="onSubmit"
                 v-if="model === '0' || model === '1' || model === '2'"
               />
-              <Form4
+              <Form4 :on-submit="onSubmit" v-if="model === '3'" />
-                :on-submit="onSubmit"
+              <Form5 :on-submit="onSubmit" v-if="model === '4'" />
-                v-if="model === '3'"
-              />
-              <Form5
-                :on-submit="onSubmit"
-                v-if="model === '4'"
-              />
               <Form6
                 :on-submit="onSubmit"
                 v-if="model === '5' && modelSpecific === '0'"
@@ -152,7 +147,7 @@ const onSubmit = async () => {
                 :on-submit="onSubmit"
                 v-if="model === '5' && modelSpecific === '1'"
               />
-              <Form8 :on-submit="onSubmit" v-if="model === '6'" />
+              <Form8 :on-submit="onSubmit" v-if="model === '6'" style="width: 100%;"/>
               <Form9
                 :on-submit="onSubmit"
                 v-if="model === '7' && modelSpecific === '0'"
@@ -171,7 +166,6 @@ const onSubmit = async () => {
               <Form13 :on-submit="onSubmit" v-if="model === '10'" />
             </div>
           </div>
-
         </q-card>
       </q-form>
     </div>