hrms-user/src/modules/06_evaluate/components/directorandmeet/DialogMain.vue

<script setup lang="ts">
import { ref, watch } from "vue";

/** importComponents*/
import HeaderDialog from "@/components/DialogHeader.vue";
import TableView from "@/modules/06_evaluate/components/directorandmeet/Table.vue";

/** รับ props DialogMain.vue */
const props = defineProps({
  modal: {
    type: Boolean,
    require: true,
  },
  fetchDirector: {
    type: Function,
    require: true,
    default: () => "",
  },
  fetchMeeting: {
    type: Function,
    require: true,
    default: () => "",
  },
  close: {
    type: Function,
    default: () => "",
  },
});

const tabMenu = ref<string>("director");

/** watch modal true fetchData */
watch([() => props.modal, () => tabMenu.value], () => {
  props.modal && fetchData();
});

/** function fetchData */
function fetchData() {
  const functionMain =
    tabMenu.value === "director"
      ? props.fetchDirector?.() // fetchDataDirector
      : props.fetchMeeting?.(); // fetchDataMeeting

  return functionMain; // returnFunction
}
</script>

<template>
  <q-dialog v-model="props.modal">
    <q-card style="width: 700px; max-width: 80vw">
      <q-card-section>
        <HeaderDialog
          :tittle="'รายชื่อกรรมการและการประชุม'"
          :close="props.close"
        />
      </q-card-section>

      <q-card-section class="q-pt-none">
        <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
          <div class="col-12 row">
            <q-card class="col-12 row caedNone">
              <q-card class="col-12 items-center">
                <q-tabs
                  v-model="tabMenu"
                  dense
                  align="left"
                  inline-label
                  class="rounded-borders"
                  indicator-color="primary"
                  active-bg-color="teal-1"
                  active-class="text-primary"
                >
                  <q-tab name="director" label="กรรมการ" />
                  <q-tab name="meeting" label="การประชุม" />
                </q-tabs>
                <q-separator />
                <q-tab-panels v-model="tabMenu" animated>
                  <q-tab-panel name="director"
                    ><TableView :type="tabMenu"
                  /></q-tab-panel>

                  <q-tab-panel name="meeting">
                    <TableView :type="tabMenu"
                  /></q-tab-panel>
                </q-tab-panels>
              </q-card>
            </q-card>
          </div>
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>