sumery
This commit is contained in:
parent
efc1688357
commit
e56b43d30b
4 changed files with 206 additions and 0 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue