165 lines
4.6 KiB
Vue
165 lines
4.6 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 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";
|
|
/**
|
|
* importStore
|
|
*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useKpiDataStore } from "@/modules/14_KPI/store";
|
|
|
|
/**
|
|
* use
|
|
*/
|
|
const store = useKpiDataStore();
|
|
const $q = useQuasar();
|
|
const { messageError, showLoader, hideLoader } = useCounterMixin();
|
|
|
|
/**
|
|
* ตัวแปร
|
|
*/
|
|
const tab = ref<string>("COMPLETE");
|
|
const tabItems = ref<ItemsTab[]>([
|
|
{ name: "COMPLETE", label: " รอประกาศผล" },
|
|
{ name: "KP7", label: "ประกาศผลแล้ว" },
|
|
{ name: "IDP", label: "แผนพัฒนาการปฏิบัติราชการรายบุคคล" },
|
|
]);
|
|
const dataList = ref<ResResults[]>([]); // ข่อมูลรายการ
|
|
const page = ref<number>(1);
|
|
const pageSize = ref<number>(10);
|
|
const maxPage = ref<number>(1);
|
|
const total = ref<number>(1);
|
|
const keyword = ref<string>("");
|
|
|
|
/**
|
|
* function fetch รายการประกาศผล
|
|
*/
|
|
function fetcDataList() {
|
|
showLoader();
|
|
http
|
|
.post(config.API.evaluationUser, {
|
|
status: tab.value,
|
|
page: page.value,
|
|
pageSize: pageSize.value,
|
|
keyword: keyword.value,
|
|
kpiPeriodId: store.formQuery.round ? store.formQuery.round : "",
|
|
})
|
|
.then((res) => {
|
|
const data = res.data.result.data;
|
|
for (let index = 0; index < data.length; index++) {
|
|
const element = data[index];
|
|
dataList.value.push({
|
|
...element,
|
|
root: "สำนักงานเขตพระนคร",
|
|
rootId: "e8493cd1-d371-402e-add6-566e68d5d1b3",
|
|
rootShortName: "ขพน.",
|
|
position: "นักวิเคราะห์นโยบายและแผน",
|
|
posTypeId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08071",
|
|
posTypeName: "วิชาการ",
|
|
posLevelId: "1526d9d3-d8b1-43ab-81b5-a84dfbe08562",
|
|
posLevelName: "ปฏิบัติการ",
|
|
organization: "ฝ่ายทะเบียน สำนักงานเขตพระนคร",
|
|
});
|
|
}
|
|
// dataList.value = data.data;
|
|
|
|
total.value = data.total;
|
|
maxPage.value = Math.ceil(total.value / pageSize.value);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* ทำงานเมื่อมีการเปลี่ยน Tab
|
|
*/
|
|
watch(tab, (t) => {
|
|
page.value = 1;
|
|
keyword.value = "";
|
|
t == "KP7" || t == "COMPLETE" ? fetcDataList() : "";
|
|
});
|
|
|
|
/**
|
|
* ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
|
|
*/
|
|
watch(pageSize, () => {
|
|
fetcDataList();
|
|
});
|
|
|
|
/**
|
|
* HooK
|
|
*/
|
|
onMounted(() => {
|
|
fetcDataList();
|
|
});
|
|
</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:page="page"
|
|
v-model:pageSize="pageSize"
|
|
v-model:maxPage="maxPage"
|
|
v-model:total="total"
|
|
v-model:keyword="keyword"
|
|
:fetchData="fetcDataList"
|
|
/>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="KP7" style="padding: 0px">
|
|
<TableResults
|
|
:tab="tab"
|
|
:row="dataList"
|
|
v-model:page="page"
|
|
v-model:pageSize="pageSize"
|
|
v-model:maxPage="maxPage"
|
|
v-model:total="total"
|
|
v-model:keyword="keyword"
|
|
:fetchData="fetcDataList"
|
|
/>
|
|
</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>
|