hrms-user/src/modules/05_leave/views/AddPage.vue

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";

import Form from "@/modules/05_leave/componenst/Forms/Form.vue";
import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
import Form4 from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
import Form5 from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue";
import Form6 from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue";
import Form7 from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue";
import Form8 from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue";
import Form9 from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue";
import Form10 from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue";
import Form11 from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue";
import Form12 from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue";
import Form13 from "@/modules/05_leave/componenst/Forms/13_RehabilitationForm.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();
const route = useRoute();
const myform = ref<QForm | null>(null);
const $q = useQuasar();

const model = ref("10");
const modelSpecific = ref("");

const clickBack = () => {
  router.push(`/leave`);
};

onMounted(() => {});

const saveAbsence = () => {
  $q.dialog({
    title: "ยืนยันการยื่นข้อมูลลาออก",
    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(() => {
      // createFormresign()
      if (model.value !== "7") {
        console.log(1);
      } else if (model.value === "7") {
        console.log(2);
      }
      router.push(`/leave`);
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};

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
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          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">
                  <q-select
                    dense
                    class="col-12 col-sm-6 col-md-4"
                    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)"
                  />
                </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" style="width: 100%;">
              <Form3
                :on-submit="onSubmit"
                v-if="model === '0' || model === '1' || model === '2'"
              />
              <Form4 :on-submit="onSubmit" v-if="model === '3'" />
              <Form5 :on-submit="onSubmit" v-if="model === '4'" />
              <Form6
                :on-submit="onSubmit"
                v-if="model === '5' && modelSpecific === '0'"
              />
              <Form7
                :on-submit="onSubmit"
                v-if="model === '5' && modelSpecific === '1'"
              />
              <Form8 :on-submit="onSubmit" v-if="model === '6'" style="width: 100%;"/>
              <Form9
                :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')
                "
              />
              <Form11 :on-submit="onSubmit" v-if="model === '8'" />
              <Form12 :on-submit="onSubmit" v-if="model === '9'" />
              <Form13 :on-submit="onSubmit" v-if="model === '10'" />
            </div>
          </div>
        </q-card>
      </q-form>
    </div>
  </div>
</template>
<style scoped lang="scss">
.btnBlue {
  background-color: #016987;
  color: #fff;
}
</style>