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 FormPart2 from "@/modules/05_leave/componenst/Forms/Form.vue";
import SickForm from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
import FormBirth from "@/modules/05_leave/componenst/Forms/03_Birth.vue";
import HelpWifeBirthForm from "@/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue";
import VacationForm from "@/modules/05_leave/componenst/Forms/05_VacationForm.vue";
import OrdinationForm from "@/modules/05_leave/componenst/Forms/06_OrdinationForm.vue";
import HajjForm from "@/modules/05_leave/componenst/Forms/07_HajjForm.vue";
import MilitaryForm from "@/modules/05_leave/componenst/Forms/08_MilitaryForm.vue";
import StudyForm from "@/modules/05_leave/componenst/Forms/09_StudyForm.vue";
import TrainForm from "@/modules/05_leave/componenst/Forms/10_TrainForm.vue";
import WorkInternationalForm from "@/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue";
import FollowSpouseForm from "@/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue";
import RehabilitationForm 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";
import { useCounterMixin } from "@/stores/mixin";

const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const router = useRouter();
const route = useRoute();
const myform = ref<QForm | null>(null);
const $q = useQuasar();

const model = ref<string>("");
const modelSpecific = ref<string>("");

// 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 () => {
  dialogConfirm(
    $q,
    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
          dense
          flat
          color="primary"
          class="q-mr-sm"
        />
        <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">
              <div style="display: flex; align-items: center">
                <q-icon
                  name="mdi-numeric-1-circle"
                  size="20px"
                  color="primary"
                />
                <div class="q-pl-sm text-weight-bold text-dark">
                  เลือกประเภทการลา
                </div>
              </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), (modelSpecific = '')
                    "
                  />
                </div>
                <div class="row q-mt-sm">
                  <div
                    class="col-12 col-sm-6 col-md-3"
                    v-if="model === '6' || model === '8'"
                  >
                    <q-select
                      dense
                      outlined
                      v-model="modelSpecific"
                      :options="
                        model === '6'
                          ? 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>

              <div>
                <div style="display: flex; align-items: center">
                  <q-icon
                    name="mdi-numeric-2-circle"
                    size="20px"
                    color="primary"
                  />
                  <div class="q-pl-sm text-weight-bold text-dark">
                    ข้อมูลการลา
                  </div>
                </div>
                <FormPart2 :model="model" />
              </div>
            </div>
            <div v-if="model" class="col-12">
              <SickForm
                :on-submit="onSubmit"
                v-if="model === '1' || model === '2'"
              />
              <FormBirth :on-submit="onSubmit" v-if="model === '3'" />
              <HelpWifeBirthForm :on-submit="onSubmit" v-if="model === '4'" />
              <VacationForm :on-submit="onSubmit" v-if="model === '5'" />
              <OrdinationForm
                :on-submit="onSubmit"
                v-if="model === '6' && modelSpecific === '0'"
              />
              <HajjForm
                :on-submit="onSubmit"
                v-if="model === '6' && modelSpecific === '1'"
              />
              <MilitaryForm
                :on-submit="onSubmit"
                v-if="model === '7'"
                style="width: 100%"
              />
              <StudyForm
                :on-submit="onSubmit"
                v-if="model === '8' && modelSpecific === 's0'"
                style="width: 100%"
              />
              <TrainForm
                :on-submit="onSubmit"
                v-if="
                  model === '8' && modelSpecific != 's0' && modelSpecific != ''
                "
              />
              <WorkInternationalForm :on-submit="onSubmit" v-if="model === '9'" />
              <FollowSpouseForm :on-submit="onSubmit" v-if="model === '10'" />
              <RehabilitationForm :on-submit="onSubmit" v-if="model === '11'" />
            </div>
          </div>
        </q-card>
      </q-form>
    </div>
  </div>
</template>