100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, watch } from "vue";
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
import http from "@/plugins/http";
|
||
|
|
import config from "@/app.config";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* import type
|
||
|
|
*/
|
||
|
|
import type { ItemsTab } from "@/modules/14_KPI/interface/index/Main";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* import components
|
||
|
|
*/
|
||
|
|
import TableResults from "@/modules/14_KPI/components/results/tableResults.vue";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* importStore
|
||
|
|
*/
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* use
|
||
|
|
*/
|
||
|
|
const $q = useQuasar();
|
||
|
|
const { dialogRemove, messageError, showLoader, hideLoader, success } =
|
||
|
|
useCounterMixin();
|
||
|
|
|
||
|
|
/**
|
||
|
|
* ตัวแปร
|
||
|
|
*/
|
||
|
|
const tab = ref<string>("COMPLETE");
|
||
|
|
const tabItems = ref<ItemsTab[]>([
|
||
|
|
{ name: "COMPLETE", label: " รอประกาศผล" },
|
||
|
|
{ name: "KP7", label: "ประกาศผลแล้ว" },
|
||
|
|
]);
|
||
|
|
|
||
|
|
const page = ref<number>(1);
|
||
|
|
const pageSize = ref<number>(10);
|
||
|
|
|
||
|
|
function fetcDatahList() {
|
||
|
|
showLoader();
|
||
|
|
http
|
||
|
|
.post(config.API.evaluationUser, {
|
||
|
|
status: tab.value,
|
||
|
|
page: page.value,
|
||
|
|
pageSize: pageSize.value,
|
||
|
|
})
|
||
|
|
.then((res) => {})
|
||
|
|
.catch((err) => {
|
||
|
|
messageError($q, err);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
hideLoader();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(tab, () => {
|
||
|
|
page.value = 1;
|
||
|
|
pageSize.value = 10;
|
||
|
|
fetcDatahList();
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
fetcDatahList();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="toptitle text-dark col-12 row items-center">ประกาศผล</div>
|
||
|
|
|
||
|
|
<q-card flast bordered>
|
||
|
|
<q-tabs
|
||
|
|
v-model="tab"
|
||
|
|
dense
|
||
|
|
align="left"
|
||
|
|
inline-label
|
||
|
|
class="bg-white text-grey"
|
||
|
|
active-color="primary"
|
||
|
|
indicator-color="primary"
|
||
|
|
>
|
||
|
|
<div v-for="item in tabItems">
|
||
|
|
<q-tab :name="item.name" :label="item.label" />
|
||
|
|
</div>
|
||
|
|
</q-tabs>
|
||
|
|
<q-separator />
|
||
|
|
<q-tab-panels v-model="tab" animated class="shadow-2 rounded-borders">
|
||
|
|
<q-tab-panel name="COMPLETE">
|
||
|
|
<TableResults :tab="tab" />
|
||
|
|
</q-tab-panel>
|
||
|
|
|
||
|
|
<q-tab-panel name="KP7">
|
||
|
|
<TableResults :tab="tab" />
|
||
|
|
</q-tab-panel>
|
||
|
|
</q-tab-panels>
|
||
|
|
</q-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|