152 lines
4.3 KiB
Vue
152 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, defineAsyncComponent, watch, onMounted } from "vue";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useQuasar } from "quasar";
|
|
import { useRoute } from "vue-router";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
const route = useRoute();
|
|
const $q = useQuasar();
|
|
const mixin = useCounterMixin();
|
|
const { showLoader, hideLoader, messageError, success } = mixin;
|
|
const assignId = ref<string>(route.params.form.toString());
|
|
|
|
const evaluate = ref<any>([]);
|
|
const tabHead = ref<string>("save1");
|
|
const tabs = ref<any>([]);
|
|
const tab = ref<string>("save1");
|
|
const activeTab = ref<string>("tab2");
|
|
|
|
const props = defineProps({
|
|
activeTab: String,
|
|
});
|
|
onMounted(() => {
|
|
console.log(props.activeTab);
|
|
// fecthAssign(assignId.value);
|
|
});
|
|
watch(props, () => {
|
|
console.log(props);
|
|
});
|
|
// const fecthAssign = async (id: string) => {
|
|
// showLoader();
|
|
// await http
|
|
// .get(config.API.formevaluate(id))
|
|
// .then((res: any) => {
|
|
// evaluate.value = res.data.data.evaluate;
|
|
// tabs.value = evaluate.value;
|
|
|
|
// console.log(tabs.value);
|
|
// })
|
|
// .catch((e: any) => {
|
|
// console.log(e);
|
|
// messageError($q, e);
|
|
// })
|
|
// .finally(() => {
|
|
// hideLoader();
|
|
// });
|
|
// };
|
|
|
|
const changeTab = (tabVal: string) => {
|
|
console.log(tabVal);
|
|
tab.value = tabVal;
|
|
};
|
|
const nextPage = () => {
|
|
const newTabLabel = tabs.value.length + 1;
|
|
tabs.value.push({ no: newTabLabel });
|
|
};
|
|
|
|
const Header = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
|
|
)
|
|
);
|
|
const FormSaveResult = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
|
|
)
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Header :change-tab="changeTab" :activeTab="activeTab" />
|
|
<!-- <q-header class="bg-grey-1">
|
|
<div class="bg-grey-1">
|
|
<div class="col-12 row q-gutter-xs-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
|
|
v-for="tabData in tabs"
|
|
:key="tabData.no"
|
|
:name="tabData.no"
|
|
:label="'ครั้งที่' + tabData.no"
|
|
@click="changeTab('save' + tabData.no)"
|
|
>
|
|
<q-btn
|
|
size="12px"
|
|
flat
|
|
dense
|
|
icon="mdi-download"
|
|
:disable="tabHead !== tabData.no"
|
|
:color="tabHead !== tabData.no ? '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>
|
|
</q-tabs>
|
|
<div>
|
|
<q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
|
|
<q-tooltip> เพิ่ม </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<q-separator />
|
|
</div>
|
|
</q-header> -->
|
|
<!-- <q-page-container>
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel
|
|
v-for="tabName in tabs"
|
|
:key="tabName"
|
|
:name="'save' + tabName.no"
|
|
>
|
|
<FormSaveResult :tab="tab" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-page-container> -->
|
|
|
|
<q-page-container>
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel name="save1">
|
|
<FormSaveResult :tab="tab" />
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="save2">
|
|
<FormSaveResult :tab="tab" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-page-container>
|
|
</template>
|