hrms-mgt/src/modules/09_leave/views/ChangeRoundMain.vue

<script setup lang="ts">
import { ref, useAttrs, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
// ค้นหาในตาราง
import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
const dataStore = useChangeRoundDataStore();
const modal = ref<boolean>(false);
const editCheck = ref<string>("");
const DataRow = ref<any>();
const formData = reactive<dataPost>({
  cardId: "",
  firstName: "",
  lastName: "",
});



function Openmodal(check: string, detail: any) {
  console.log(detail);
  DataRow.value = detail;
  modal.value = true;
  editCheck.value = check;
}
function closeDialog() {
  modal.value = false;
}
async function  searchcardid(){
  const data = await dataStore.dataList.find((e) => e.cardId === formData.cardId)
  if(data){
    formData.firstName = data.firstName
    formData.lastName = data.lastName
  } else if(!data){
    formData.firstName = ''
    formData.lastName = ''
    dataStore.fetchDataForCardId('null','notClick')
  }
}
onMounted(() => {
  dataStore.fetchDatainHistory([
    {
      id: "xxx1",
      roundStart: "08:30",
      roundEnd: "16:00",
      effectiveDate: new Date("2023-11-01T03:08:43.217"),
      reson: null,
    },
    {
      id: "xxx2",
      roundStart: "08:00",
      roundEnd: "16:30",
      effectiveDate: new Date("2023-11-01T03:08:43.217"),
      reson: null,
    },
  ]);
});
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    เปลี่ยนแปลงรอบการปฏิบัติของผู้ใช้งาน
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
    <div class="row col-12 q-mb-sm">
      <q-card flat bordered class="bg-grey-2 col-12 q-pa-lg">
        <div class="text-dark col-12 text-weight-bold text-subtitle1">
          ค้นหารายชื่อ
        </div>
        <div class="row justify-between q-gutter-y-sm">
          <q-input
            v-model="formData.cardId"
            outlined
            label="เลขบัตรประชาชน"
            class="bg-white col-6 col-md-4 inputgreen"
            dense
            maxlength="13"
            @keyup="searchcardid"
          />
          <q-input
            v-model="formData.firstName"
            outlined
            readonly
            label="ชื่อ"
            class="bg-white col-5 col-md-3 inputgreen"
            dense
          />
          <q-input
            v-model="formData.lastName"
            outlined
            readonly
            label="นามสกุล"
            class="bg-white col-6 col-md-3 inputgreen"
            dense
          />
          <q-btn
            @click="
              dataStore.fetchDataForCardId(formData.cardId,'click')
            "
            for="#search"
            dense
            :disabled="!formData.cardId"
            unelevated
            color="primary"
            class="q-px-sm col-5 col-md-1"
            >ค้นหา</q-btn
          >
        </div>
      </q-card>
    </div>
    <div v-if="formData.cardId && dataStore.checkCilck === true">
      <q-card flat bordered class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold">ไม่พบข้อมูลบัตรประชาชนนี้</q-card>
    </div>
    <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
      <d-table
        ref="table"
        :columns="dataStore.columns"
        :rows="dataStore.rows"
        row-key="interrogated"
        flat
        bordered
        :paging="true"
        dense
        class="custom-header-table"
        :visible-columns="dataStore.visibleColumns"

      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              style="color: #000000; font-weight: 500"
            >
              <span class="text-weight-medium">{{ col.label }}</span>
            </q-th>
            <q-th style="width: 200px" />
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props" class="cursor-pointer">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div>
                {{ col.value }}
              </div>
            </q-td>
            <q-td style="width: 150px">
              <div>
                <q-btn
                  flat
                  icon="mdi-dots-vertical"
                  color="grey-8"
                  for="#cancel"
                  dense
                  round
                  unelevated
                >
                  <q-menu>
                    <q-list>
                      <q-item
                        clickable
                        v-close-popup
                        @click="Openmodal('edit', props.row)"
                      >
                        <q-item-section>
                          <q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
                        </q-item-section>
                      </q-item>
                      <q-item
                        clickable
                        v-close-popup
                        @click="Openmodal('history', props.row)"
                      >
                        <q-item-section>
                          <q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-btn>
              </div>
            </q-td>
          </q-tr>
        </template>
      </d-table>
    </div>
  </q-card>
  <Dialogform
    :modal="modal"
    :closeDialog="closeDialog"
    :editCheck="editCheck"
    :DataRow="DataRow"
  />
</template>
<style scoped lang="scss">
.q-table tbody td:before.no-background {
  background: none;
}
</style>