hrms-user/src/modules/05_leave/components/FormLeave/Form.vue

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store";

const mixin = useCounterMixin();
const dataStore = useLeaveStore();
const { date2Thai } = mixin;

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
  model: {
    type: String,
    default: "",
  },
});

/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
  dateStart: new Date(),
  subject: "เรื่อง",
  who: "เรียนผู้ใด",
  requestName: "ชื่อผู้ยื่น",
  position: "ตำแหน่ง",
  level: "ระดับ",
  ocRequest: "สังกัด",
  leaveabsentDaySummon: "2",
  leaveUse: "1",
  leaveRemaining: "1",
});

onMounted(() => {
  dataStore.typeLeave = "";
});
</script>

<template>
  <q-card bordered class="q-pa-md bg-grey-1">
    <div class="col-12 row q-pa-sm q-col-gutter-sm">
      <datepicker
        class="col-12 col-sm-4"
        menu-class-name="modalfix"
        v-model="dataStore.dateSendLeave"
        :locale="'th'"
        autoApply
        borderless
        :enableTimePicker="false"
        week-start="0"
        readonly
      >
        <template #year="{ year }">
          {{ year + 543 }}
        </template>
        <template #year-overlay-value="{ value }">
          {{ parseInt(value + 543) }}
        </template>
        <template #trigger>
          <q-input
            outlined
            dense
            bg-color="white"
            hide-bottom-space
            readonly
            class="full-width"
            :model-value="
              dataStore.dateSendLeave != null
                ? date2Thai(dataStore.dateSendLeave)
                : null
            "
            :label="`${'วันที่ยื่นใบลา'}`"
            :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer inputblack"
                style="color: var(--black)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>
      </datepicker>
      <q-input
        class="col-12 col-sm-4"
        dense
        bg-color="white"
        outlined
        readonly
        v-model="dataStore.typeLeave"
        label="เรื่อง"
      />
      <q-input
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.dear"
        label="เรียน"
      />
      <q-input
        class="col-12 col-sm-3"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.fullName"
        label="ชื่อผู้ยื่นขอ"
      />
      <q-input
        class="col-12 col-sm-3"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.positionName"
        label="ตำแหน่งผู้ยื่นขอ"
      />
      <q-input
        class="col-12 col-sm-3"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.positionLevelName"
        label="ระดับผู้ยื่นขอ"
      />
      <q-input
        class="col-12 col-sm-3"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.organizationName"
        label="สังกัดผู้ยื่นขอ"
      />
      <q-input
        v-if="props.model === 'LV-005'"
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.leaveLimit"
        label="จำนวนสิทธิ์การลาที่ได้รับ"
      />
      <q-input
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.leaveTotal"
        label="จำนวนสิทธิ์การลาที่ใช้ไป"
      />
      <q-input
        v-if="props.model === 'LV-005'"
        class="col-12 col-sm-4"
        dense
        outlined
        readonly
        bg-color="white"
        v-model="dataStore.leaveRemain"
        label="จำนวนสิทธิ์การลาคงเหลือ"
      />
    </div>
  </q-card>
</template>