UI รายชื่อกรรมการและการประชุม
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
bc9c65488c
commit
fbbd68570a
7 changed files with 432 additions and 78 deletions
|
|
@ -0,0 +1,96 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
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([() => props.modal, () => tabMenu.value], () => {
|
||||
props.modal && fetchData();
|
||||
});
|
||||
|
||||
function fetchData() {
|
||||
const functionMain =
|
||||
tabMenu.value === "director"
|
||||
? props.fetchDirector?.()
|
||||
: props.fetchMeeting?.();
|
||||
|
||||
return functionMain;
|
||||
}
|
||||
</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-actions align="right" class="bg-white text-teal">
|
||||
<q-btn flat label="OK" v-close-popup />
|
||||
</q-card-actions> -->
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
174
src/modules/06_evaluate/components/directorandmeet/Table.vue
Normal file
174
src/modules/06_evaluate/components/directorandmeet/Table.vue
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const columnsDrictor = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ - นามสกุล",
|
||||
sortable: true,
|
||||
field: "name",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "duty",
|
||||
align: "left",
|
||||
label: "หน้าที่",
|
||||
sortable: true,
|
||||
field: "duty",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
align: "left",
|
||||
label: "อีเมล",
|
||||
sortable: true,
|
||||
field: "email",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
align: "left",
|
||||
label: "เบอร์โทรศัพท์",
|
||||
sortable: true,
|
||||
field: "phone",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columnsMeeting = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateMeeting",
|
||||
align: "left",
|
||||
label: "วันเวลาในการประชุม",
|
||||
sortable: true,
|
||||
field: "dateMeeting",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "results",
|
||||
align: "left",
|
||||
label: "ผลการพิจารณาของคณะกรรมการประเมินผลงานแต่ละคณะ",
|
||||
sortable: true,
|
||||
field: "results",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
|
||||
{
|
||||
name: "timePeriod",
|
||||
align: "left",
|
||||
label: "ระยะเวลาในการแก้ไขผลงาน",
|
||||
sortable: true,
|
||||
field: "timePeriod",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([]);
|
||||
|
||||
onMounted(() => {
|
||||
columns.value =
|
||||
props.type === "director" ? columnsDrictor.value : columnsMeeting.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
:columns="columns"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium" v-html="col.label" />
|
||||
</q-th>
|
||||
</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 v-if="col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div>
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-header-table {
|
||||
height: auto;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue