แก้ assess เป็น evaluate
This commit is contained in:
parent
5f97ee9377
commit
d71b2a172f
25 changed files with 83 additions and 75 deletions
180
src/modules/06_evaluate/components/viewstep/viewPDF.vue
Normal file
180
src/modules/06_evaluate/components/viewstep/viewPDF.vue
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const splitterModel = ref(14);
|
||||
const numOfPages = ref<number>(0);
|
||||
const page = ref<number>(1);
|
||||
const pdfSrc = ref<any>();
|
||||
|
||||
/** ไปหน้าต่อไปของรายงาน */
|
||||
function nextPage() {
|
||||
if (page.value < numOfPages.value) {
|
||||
page.value++;
|
||||
}
|
||||
}
|
||||
|
||||
/** กลับหน้าก่อนหน้าของรายงาน */
|
||||
function backPage() {
|
||||
if (page.value !== 1) {
|
||||
page.value--;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-splitter
|
||||
v-model="splitterModel"
|
||||
horizontal
|
||||
style="
|
||||
height: 50vh;
|
||||
border: 1px solid rgb(210, 210, 210);
|
||||
border-radius: 5px;
|
||||
"
|
||||
before-class="overflow-hidden disable"
|
||||
separator-class="bg-white disabled"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="q-px-sm">
|
||||
<div class="row items-start items-center">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:after>
|
||||
<div class="q-pa-md">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<div class="q-pa-md">
|
||||
<div class="row items-start items-center">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-splitter>
|
||||
<!-- <q-card class="bg-white">
|
||||
<div class="q-pa-md">
|
||||
<div class="row items-start items-center">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row items- items-center">
|
||||
<VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
|
||||
</div>
|
||||
<div class="row items- items-end">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
class="my-auto"
|
||||
@click="backPage"
|
||||
:disable="page == 1"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-auto">
|
||||
<div class="q-pa-md flex">
|
||||
หน้าที่ {{ page }} จาก {{ numOfPages }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-right">
|
||||
<q-btn
|
||||
padding="xs"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey-2"
|
||||
text-color="grey-5"
|
||||
size="md"
|
||||
@click="nextPage"
|
||||
:disable="page === numOfPages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card> -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>ข้อมูลคุณสมบัติ</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
34
src/modules/06_evaluate/components/viewstep/viewStep3.vue
Normal file
34
src/modules/06_evaluate/components/viewstep/viewStep3.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
|
||||
|
||||
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
||||
|
||||
const store = useEvaluateStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
|
||||
<q-tab-panel name="1">
|
||||
<ViewPDF />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="2">
|
||||
<ViewPDF />
|
||||
</q-tab-panel>
|
||||
|
||||
<q-tab-panel name="3">
|
||||
<ViewPDF />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="4">
|
||||
<ViewPDF />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="5">
|
||||
<ViewPDF />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="6">
|
||||
<ViewPDF />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
17
src/modules/06_evaluate/components/viewstep/viewStep7.vue
Normal file
17
src/modules/06_evaluate/components/viewstep/viewStep7.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import ViewPDF from "@/modules/06_evaluate/components/viewstep/viewPDF.vue";
|
||||
|
||||
import { useEvaluateStore } from "@/modules/06_evaluate/store";
|
||||
|
||||
const store = useEvaluateStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-tab-panels v-model="store.tabPanels" animated swipeable vertical>
|
||||
<q-tab-panel name="1">
|
||||
<ViewPDF />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue