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

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
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";

import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
import HelpWifeBirthForm from "@/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue";
import VacationForm from "@/modules/05_leave/components/FormLeave/05_VacationForm.vue";
import OrdinationForm from "@/modules/05_leave/components/FormLeave/06_OrdinationForm.vue";
import HajjForm from "@/modules/05_leave/components/FormLeave/07_HajjForm.vue";
import MilitaryForm from "@/modules/05_leave/components/FormLeave/08_MilitaryForm.vue";
import StudyForm from "@/modules/05_leave/components/FormLeave/09_StudyForm.vue";
import TrainForm from "@/modules/05_leave/components/FormLeave/10_TrainForm.vue";
import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue";
import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";

const dataStore = useLeaveStore();
const { fetchLeaveType } = dataStore;
const mixin = useCounterMixin();
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;

const router = useRouter();
const route = useRoute();
const myform = ref<QForm | null>(null);
const $q = useQuasar();

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

/**
 * ดึงค่าประเภทการลาจาก Api
 */
async function fectOptionType() {
  await http
    .get(config.API.leaveType())
    .then(async (res) => {
      const data = res.data.result;
      await fetchLeaveType(data);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function inputEdit(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

function onSubmit(postData: FormData, isLeave: boolean = true) {
  if (isLeave) {
    dialogConfirm($q, async () => {
      showLoader();
      await http
        .post(config.API.leaveUser(), postData)
        .then((res) => {
          router.push(`/leave/edit/${res.data.result.id}`);
          success($q, "บันทึกสำเร็จ");
        })
        .catch((e: any) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    });
  } else {
    messageError($q, "", "ไม่มีสิทธิ์ลา");
  }
}

onMounted(async () => {
  if (dataStore.options.length == 0) {
    await fectOptionType();
  }
});
</script>

<template>
  <div class="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" >
        <q-card bordered>
          <div class="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 inputgreen"
                    outlined
                    v-model="model"
                    :options="dataStore.options"
                    option-value="code"
                    option-label="name"
                    emit-value
                    map-options
                    prefix="ประเภทใบลา :"
                    @update:model-value="
                      dataStore.typeConvert(model, null),
                        (modelSpecific = ''),
                        dataStore.fetchProfile()
                    "
                  />
                </div>

                <div class="row q-mt-sm">
                  <div
                    class="col-12 col-sm-6 col-md-3"
                    v-if="model === 'LV-006' || model === 'LV-008'"
                  >
                    <q-select
                      dense
                      outlined
                      v-model="modelSpecific"
                      :options="
                        model === 'LV-006'
                          ? dataStore.optionsOrdination
                          : dataStore.optionsSpecific
                      "
                      option-value="code"
                      option-label="name"
                      emit-value
                      map-options
                      prefix="ประเภทการลา :"
                      @update:model-value="
                        dataStore.typeConvert(model, modelSpecific)
                      "
                    />
                  </div>
                </div>
              </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 class="col-12">
              <SickForm
                v-if="model === 'LV-001' || model === 'LV-002'"
                :on-submit="onSubmit"
              />
              <FormBirth v-if="model === 'LV-003'" :on-submit="onSubmit" />
              <HelpWifeBirthForm
                v-if="model === 'LV-004'"
                :on-submit="onSubmit"
              />
              <VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
              <OrdinationForm
                v-if="model === 'LV-006' && modelSpecific == 'b1'"
                :on-submit="onSubmit"
              />
              <HajjForm
                v-if="model === 'LV-006' && modelSpecific == 'b2'"
                :on-submit="onSubmit"
              />
              <MilitaryForm
                v-if="model === 'LV-007'"
                style="width: 100%"
                :on-submit="onSubmit"
              />
              <StudyForm
                v-if="model === 'LV-008' && modelSpecific === 's1'"
                style="width: 100%"
                :on-submit="onSubmit"
              />
              <TrainForm
                v-if="
                  model === 'LV-008' &&
                  modelSpecific != 's1' &&
                  modelSpecific != ''
                "
                :on-submit="onSubmit"
              />
              <WorkInternationalForm
                v-if="model === 'LV-009'"
                :on-submit="onSubmit"
              />
              <FollowSpouseForm
                v-if="model === 'LV-010'"
                :on-submit="onSubmit"
              />
              <RehabilitationForm
                v-if="model === 'LV-011'"
                :on-submit="onSubmit"
              />
            </div>
          </div>
        </q-card>
      </q-form>
    </div>
  </div>
</template>