ตัวชีวัด

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-05-09 13:52:08 +07:00
parent 6299afbeab
commit a8773977bb
6 changed files with 451 additions and 641 deletions

View file

@ -1,7 +1,14 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
DataOption,
NewPagination,
} from "@/modules/01_metadataNew/interface/index/Main";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
@ -32,36 +39,85 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
/** Option รอบการประเมิน*/
const roundOp = ref<DataOption[]>([
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
const visibleColumns = ref<string[]>(["including", "includingName"]);
const rows = ref<any[]>([]);
const filter = ref<string>("");
const formFilter = reactive<any>({
keyword: "",
period: "",
year: new Date().getFullYear(),
pageSize: 10,
page: 1,
});
const totalList = ref<number>(0); //
const maxPage = ref<number>(1);
function fetchList() {
showLoader();
formFilter.year = formFilter.year ? formFilter.year.toString() : null;
http
.post(config.API.kpiSpecial + `/search`, formFilter)
.then((res) => {
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
totalList.value = res.data.result.total;
rows.value = res.data.result.data;
})
.catch((err) => {
messageError($q, err);
rows.value = [];
})
.finally(() => {
hideLoader();
});
}
function onClickView(id: string = "") {
router.push(`/assignment/${id}`);
}
function onClickHistory(id: string) {}
function onClickDelete(id: string) {
dialogRemove($q, () => {
console.log(id);
showLoader();
http
.delete(config.API.kpiSpecial + `/${id}`)
.then(() => {
fetchList();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
onMounted(() => {
showLoader();
const list = [
{
id: "1",
including: "12",
includingName: "name",
},
];
function fetchNewList() {
formFilter.page = 1;
fetchList();
}
setTimeout(() => {
rows.value = list;
hideLoader();
}, 100);
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
watch(
() => formFilter.pageSize,
() => {
fetchList();
}
);
onMounted(() => {
fetchList();
});
</script>
@ -72,15 +128,92 @@ onMounted(() => {
<q-card flat bordered class="q-pa-md">
<div class="row q-col-gutter-sm q-pl-sm">
<q-toolbar style="padding: 0">
<div class="row q-gutter-sm">
<datepicker
style="width: 150px"
menu-class-name="modalfix"
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="(formFilter.period = ''), fetchNewList()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
:model-value="
formFilter.year === null
? 'ทั้งหมด'
: Number(formFilter.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
<template v-if="formFilter.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(formFilter.year = null), fetchNewList()
"
class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
<q-select
dense
outlined
v-model="formFilter.period"
:model-value="
formFilter.period === '' ? 'ทั้งหมด' : formFilter.period
"
:options="roundOp"
label="รอบการประเมิน"
option-label="name"
option-value="id"
emit-value
map-options
@update:model-value="fetchNewList"
style="width: 160px"
>
<template v-if="formFilter.period" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="(formFilter.period = ''), fetchNewList()"
class="cursor-pointer"
/>
</template>
</q-select>
</div>
<q-space />
<div class="row q-gutter-sm">
<q-input dense outlined v-model="filter" label="ค้นหา">
<q-input
dense
outlined
v-model="formFilter.keyword"
label="ค้นหา"
@keydown.enter="fetchNewList"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
v-if="formFilter.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
@click="(formFilter.keyword = ''), fetchNewList()"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
@ -115,6 +248,7 @@ onMounted(() => {
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
@update:pagination="updatePageSize"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -135,68 +269,40 @@ onMounted(() => {
<q-btn
flat
round
color="grey"
@click.stop
color="primary"
size="14px"
icon="more_vert"
icon="mdi-eye"
@click.pervent="onClickView(props.row.id)"
>
<q-menu>
<q-list style="min-width: 180px">
<q-item
clickable
v-close-popup
@click="onClickView(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แกไขขอม</q-tooltip>
<q-icon
color="primary"
size="xs"
name="mdi-pencil-outline"
/>
</q-item-section>
<q-item-section>แกไขขอม</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="onClickHistory(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ประวการแกไข</q-tooltip>
<q-icon color="info" size="xs" name="mdi-history" />
</q-item-section>
<q-item-section>ประวการแกไข</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop.pervent="onClickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบขอม</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบขอม</q-item-section>
</q-item>
</q-list>
</q-menu>
<q-tooltip>อม</q-tooltip>
</q-btn>
<q-btn
flat
round
color="red"
size="14px"
icon="mdi-delete "
@click.pervent="onClickDelete(props.row.id)"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
งหมด {{ totalList }} รายการ
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="maxPage"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="fetchList"
></q-pagination>
</template>
</d-table>
</div>
</q-card>

View file

@ -204,13 +204,7 @@ onMounted(async () => {
<div class="q-gutter-sm">
<div class="text-subtitle2 text-bold">หนวยงาน/วนราชการ</div>
<q-input
class="inputgreen"
dense
outlined
v-model="filterMain"
label="ค้นหา"
>
<q-input dense outlined v-model="filterMain" label="ค้นหา">
<template v-slot:append>
<q-icon
v-if="filterMain !== ''"
@ -300,7 +294,6 @@ onMounted(async () => {
}}</template>
<template #trigger>
<q-input
class="inputgreen"
dense
outlined
:model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
@ -329,7 +322,6 @@ onMounted(async () => {
</template>
</datepicker>
<q-select
class="inputgreen"
dense
outlined
v-model="nodeData.round"

View file

@ -118,13 +118,19 @@ function onClickAddOrView(status: boolean = false, id: string = "") {
function onClickDelete(id: number) {
dialogRemove($q, () => {
showLoader();
http
.delete(config.API.kpiRoleMainList + `/${id}`)
.then((res) => {
.then(() => {
success($q, "ลบข้อมูลสำเร็จ");
fetchList();
})
.finally(() => {});
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
@ -301,7 +307,6 @@ onMounted(async () => {
hide-bottom-space
option-label="name"
option-value="id"
class="inputgreen"
:options="positionOp"
use-input
@input-value="setModel"
@ -325,19 +330,8 @@ onMounted(async () => {
</template>
</q-select>
<!-- <q-select
dense
outlined
v-model="formFilter.position"
:options="positionOp"
label="ตำแหน่ง"
option-label="name"
option-value="id"
emit-value
map-options
/> -->
<datepicker
style="width: 120px"
style="width: 150px"
menu-class-name="modalfix"
v-model="formFilter.year"
:locale="'th'"
@ -356,7 +350,6 @@ onMounted(async () => {
<q-input
dense
outlined
class="inputgreen"
:model-value="
formFilter.year === null
? 'ทั้งหมด'
@ -390,7 +383,6 @@ onMounted(async () => {
outlined
v-model="formFilter.round"
:model-value="formFilter.round === '' ? 'ทั้งหมด' : formFilter.round"
class="inputgreen"
:options="roundOp"
label="รอบการประเมิน"
option-label="name"