hrms-checkin/src/components/FormTime.vue

<script setup lang="ts">
import { ref, onMounted, defineProps } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import moment, { Moment } from "moment";

const mixin = useCounterMixin();
const { date2Thai, covertDateObject } = mixin;

const props = defineProps({
  dataById: {
    type: Object,
    default: null,
  },
});

const dataById = ref<any>([]);
const date = ref<Date | null>(null);
const checkboxIn = ref<boolean>(false);
const checkboxOut = ref<boolean>(false);
const reason = ref<string>("");
const statusAction = ref<boolean>(false);

onMounted(() => {
  updateClock();
  dataById.value = props.dataById;
  if (dataById.value == null) {
    statusAction.value = true;
  }
});
const dateNow = ref<Date>(new Date());
const timeNoew = ref<string>("");

function updateClock() {
  const date = Date.now();
  let hh = moment(date).format("HH");
  let mm = moment(date).format("mm");
  timeNoew.value = `${hh}:${mm} น.`;
}

function onCkickSave() {
  console.log("save");
}
</script>
<template>
  <q-card-section class="col q-pt-none">
    <div class="row q-pa-sm q-col-q-gutter-sm">
      <q-card
        flat
        bordered
        :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
      >
        <q-card-section class="bg-primary text-white" v-if="!$q.screen.gt.xs">
          <div class="text-center">เวลาปัจจุบัน</div>
        </q-card-section>
        <div v-else class="q-pa-sm text-primary">เวลาปัจจุบัน</div>
        <q-card-section class="text-center">
          <div class="row q-gutter-md">
            <div class="col">{{ date2Thai(dateNow) }}</div>
            <div class="col">{{ timeNoew }}</div>
          </div>
        </q-card-section>
      </q-card>

      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm" v-if="statusAction">
        <VueDatePicker
          v-model="date"
          :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
              borderless
              dense
              :model-value="date !== null ? date2Thai(date) : null"
              :label="`${'กรอกวันที่'}`"
            >
              <template v-slot:prepend>
                <q-icon
                  name="event"
                  class="cursor-pointer"
                  style="color: var(--q-primary)"
                >
                </q-icon>
              </template>
            </q-input> </template
        ></VueDatePicker>
      </q-card>

      <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
        <div class="row q-gutter-md text-grey-5">
          <div class="col-1">
            <q-icon color="grey-5" name="calendar_today" />
          </div>
          <div class="col">{{ covertDateObject(dataById.date) }}</div>
        </div>
      </q-card>
      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
        <div class="row q-gutter-xs">
          <div class="col-12">
            <q-checkbox
              keep-color
              color="primary"
              v-model="checkboxIn"
              label="ขอแก้ไขเวลาเข้างาน"
            />
          </div>
          <div class="col-12">
            <q-checkbox
              keep-color
              v-model="checkboxOut"
              color="primary"
              label="ขอแก้ไขเวลาออกงาน"
            />
          </div>
        </div>
      </q-card>
      <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
        <q-input
          borderless
          v-model="reason"
          label="เหตุผล"
          type="textarea"
          :rows="$q.screen.gt.xs ? '5' : '1'"
          label-color="grey-5"
        />
      </q-card>
    </div>
  </q-card-section>
  <q-separator />
  <q-card-actions align="right">
    <q-btn dense color="secondary" label="บันทึก" @click="onCkickSave" />
  </q-card-actions>
</template>

<style scoped></style>