This commit is contained in:
STW_TTTY\stwtt 2024-08-07 09:45:54 +07:00
parent efc1688357
commit e56b43d30b
4 changed files with 206 additions and 0 deletions

View file

@ -64,6 +64,29 @@ const formFilter = reactive<FormFilterAssignment>({
const totalList = ref<number>(0); //
const maxPage = ref<number>(1);
const indicatorTotal = ref<any[]>([
{
value: "kpiPlan",
label: "ตัวชี้วัดตามแผน",
color: "edit",
},
{
value: "kpiRole",
label: "ตัวชี้วัดตามตำแหน่ง",
color: "primary",
},
{
value: "kpiSpecial",
label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
color: "blue",
},
{
value: "total",
label: "ทั้งหมด",
color: "red",
},
]);
function fetchList() {
showLoader();
formFilter.year = formFilter.year ? formFilter.year.toString() : null;
@ -122,7 +145,26 @@ watch(
}
);
function getTotal() {
http
.post(config.API.indicatorSummary)
.then((res) => {
const data = res.data.result;
indicatorTotal.value = indicatorTotal.value.map((indicator) => {
return {
...indicator,
total: data[indicator.value],
};
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
onMounted(() => {
getTotal();
fetchList();
});
</script>
@ -132,6 +174,33 @@ onMounted(() => {
รายการงานอนๆ ไดบมอบหมาย
</div>
<q-card flat bordered class="q-pa-md">
<div class="row">
<div class="col-12">
<q-card bordered class="q-mb-sm q-pa-xs bg-grey-1">
<div class="row q-col-gutter-sm">
<div
v-for="i in indicatorTotal"
class="col-12 col-sm-6 col-md-6 col-lg-3"
>
<div
class="bg-white rounded-borders q-pa-sm"
style="border: 1px solid #ededed"
>
<div class="row items-center no-wrap text-weight-medium">
{{ i.label }}
<q-space />
<q-badge
:color="i.color"
text-color="white"
:label="i.total"
/>
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<div class="row q-col-gutter-sm q-pl-sm">
<q-toolbar style="padding: 0">
<div class="row q-gutter-sm">

View file

@ -49,6 +49,28 @@ const expanded = ref<any>([]);
const filterMain = ref<string>("");
const visibleColumns = ref<string[]>(["including", "includingName"]);
const indicatorTotal = ref<any[]>([
{
value: "kpiPlan",
label: "ตัวชี้วัดตามแผน",
color: "edit",
},
{
value: "kpiRole",
label: "ตัวชี้วัดตามตำแหน่ง",
color: "primary",
},
{
value: "kpiSpecial",
label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
color: "blue",
},
{
value: "total",
label: "ทั้งหมด",
color: "red",
},
]);
const roundOp = ref<DataOption[]>([
{ id: "", name: "ทั้งหมด" },
{ id: "APR", name: "รอบเมษายน" },
@ -195,7 +217,26 @@ function onClickHistory(id: string) {
});
}
function getTotal() {
http
.post(config.API.indicatorSummary)
.then((res) => {
const data = res.data.result;
indicatorTotal.value = indicatorTotal.value.map((indicator) => {
return {
...indicator,
total: data[indicator.value],
};
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
onMounted(() => {
getTotal();
fetchActive();
});
</script>
@ -267,6 +308,29 @@ onMounted(() => {
</div>
<div class="col-xs-12 col-sm-9 q-pa-md row">
<div class="col-12">
<q-card bordered class="q-mb-sm q-pa-xs bg-grey-1">
<div class="row q-col-gutter-sm">
<div
v-for="i in indicatorTotal"
class="col-12 col-sm-6 col-md-6 col-lg-3"
>
<div
class="bg-white rounded-borders q-pa-sm"
style="border: 1px solid #ededed"
>
<div class="row items-center no-wrap text-weight-medium">
{{ i.label }}
<q-space />
<q-badge
:color="i.color"
text-color="white"
:label="i.total"
/>
</div>
</div>
</div>
</div>
</q-card>
<div class="row q-col-gutter-sm items-center q-mb-sm no-wrap">
<datepicker
menu-class-name="modalfix"

View file

@ -69,6 +69,29 @@ const pagination = ref({
rowsPerPage: formFilter.pageSize,
});
const indicatorTotal = ref<any[]>([
{
value: "kpiPlan",
label: "ตัวชี้วัดตามแผน",
color: "edit",
},
{
value: "kpiRole",
label: "ตัวชี้วัดตามตำแหน่ง",
color: "primary",
},
{
value: "kpiSpecial",
label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
color: "blue",
},
{
value: "total",
label: "ทั้งหมด",
color: "red",
},
]);
/** Option รอบการประเมิน*/
const roundOp = ref<DataOption[]>([
{ id: "", name: "ทั้งหมด" },
@ -220,7 +243,26 @@ function onClickHistory(id: string) {
});
}
function getTotal() {
http
.post(config.API.indicatorSummary)
.then((res) => {
const data = res.data.result;
indicatorTotal.value = indicatorTotal.value.map((indicator) => {
return {
...indicator,
total: data[indicator.value],
};
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
onMounted(async () => {
await getTotal();
await getOptions();
await fetchList();
});
@ -231,7 +273,35 @@ onMounted(async () => {
รายการตวชดตามตำแหน
</div>
<q-card flat bordered class="q-pa-md">
<div class="row">
<div class="col-12">
<q-card bordered class="q-mb-sm q-pa-xs bg-grey-1">
<div class="row q-col-gutter-sm">
<div
v-for="i in indicatorTotal"
class="col-12 col-sm-6 col-md-6 col-lg-3"
>
<div
class="bg-white rounded-borders q-pa-sm"
style="border: 1px solid #ededed"
>
<div class="row items-center no-wrap text-weight-medium">
{{ i.label }}
<q-space />
<q-badge
:color="i.color"
text-color="white"
:label="i.total"
/>
</div>
</div>
</div>
</div>
</q-card>
</div>
</div>
<div class="row q-gutter-sm no-wrap q-mb-sm">
<q-select
dense
v-model="formFilter.position"