95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
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>
|