update structure ทดลองงาน

This commit is contained in:
Warunee Tamkoo 2023-07-26 15:37:34 +07:00
parent 8c6bb382c0
commit afc9be8ab8
14 changed files with 2743 additions and 28 deletions

View file

@ -0,0 +1,115 @@
<script setup lang="ts">
import { ref, watch } from "vue";
const tabHead = ref<string>("save1");
const props = defineProps({
changeTab: {
type: Function,
default() {
return 'Default function'
}
}
})
watch(tabHead, () => {
props.changeTab(tabHead.value)
});
</script>
<template>
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
dense
v-model="tabHead"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tabHead !== 'save1'"
:color="tabHead !== 'save1' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tabHead !== 'save2'"
:color="tabHead !== 'save2' ? 'grey' : 'add'"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวนโหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red"
name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="blue"
name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</q-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip> เพมบนทกผลการทดลอง </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
</template>