117 lines
3.5 KiB
Vue
117 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
|
import { usePagination } from "@/composables/usePagination";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/** import type*/
|
|
import type { ItemsTab } from "@/modules/14_KPI/interface/index/Main";
|
|
import type { ResResults } from "@/modules/14_KPI/interface/response/Main";
|
|
|
|
/** import components*/
|
|
import TableResults from "@/modules/14_KPI/components/results/tableResults.vue";
|
|
import TableIndividual from "@/modules/14_KPI/components/results/tableIndividual.vue";
|
|
|
|
/** use*/
|
|
const store = useKpiDataStore();
|
|
const $q = useQuasar();
|
|
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
|
const { pagination, params, onRequest } = usePagination("", fetcDataList);
|
|
|
|
const tab = ref<string>("COMPLETE");
|
|
const tabItems = ref<ItemsTab[]>([
|
|
{ name: "COMPLETE", label: " รอประกาศผล" },
|
|
{ name: "KP7", label: "ประกาศผลแล้ว" },
|
|
{ name: "IDP", label: "แผนพัฒนาการปฏิบัติราชการรายบุคคล" },
|
|
]);
|
|
const dataList = ref<ResResults[]>([]); // ข่อมูลรายการ
|
|
const keyword = ref<string>("");
|
|
const result = ref<string>("");
|
|
|
|
/** function fetch รายการประกาศผล*/
|
|
async function fetcDataList() {
|
|
showLoader();
|
|
await http
|
|
.post(config.API.evaluationUser, {
|
|
status: tab.value,
|
|
...params.value,
|
|
keyword: keyword.value.trim(),
|
|
kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
|
|
results: result.value === "" ? undefined : result.value,
|
|
})
|
|
.then(async (res) => {
|
|
const result = await res.data.result;
|
|
pagination.value.rowsNumber = result.total;
|
|
dataList.value = result.data;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** ทำงานเมื่อมีการเปลี่ยน Tab */
|
|
watch(tab, () => {
|
|
pagination.value.page = 1;
|
|
result.value = "";
|
|
keyword.value = "";
|
|
dataList.value = [];
|
|
});
|
|
</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" style="padding: 0px">
|
|
<TableResults
|
|
:tab="tab"
|
|
:row="dataList"
|
|
v-model:keyword="keyword"
|
|
v-model:result="result"
|
|
v-model:pagination="pagination"
|
|
:fetchData="fetcDataList"
|
|
:onRequest="onRequest"
|
|
/>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="KP7" style="padding: 0px">
|
|
<TableResults
|
|
:tab="tab"
|
|
:row="dataList"
|
|
v-model:keyword="keyword"
|
|
v-model:result="result"
|
|
v-model:pagination="pagination"
|
|
:fetchData="fetcDataList"
|
|
:onRequest="onRequest"
|
|
/>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="IDP" style="padding: 0px">
|
|
<TableIndividual :tab="tab" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|