hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับ ตัวชี้วัด ตามแผน รอ API

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-05-07 15:18:52 +07:00
parent 789627a6a9
commit ad66cacc1e
6 changed files with 385 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

166
src/modules/14_KPI/views/indicatorByPlan.vue
View file

@ -4,6 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
import { useRouter } from "vue-router";
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import DialogHistory from '@/modules/14_KPI/components/DialogHistory.vue'
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
@ -11,6 +12,8 @@ import http from "@/plugins/http";
import config from "@/app.config";
/** use*/
const modalHistory = ref<boolean>(false)
const isAll = ref<boolean>(false);
const $q = useQuasar();
const router = useRouter();
const { showLoader, hideLoader, dialogRemove, success, messageError } =
@ -22,7 +25,7 @@ const columns = ref<QTableProps["columns"]>([
{
name: "including",
align: "left",
label: "รหัสตัวชี้วัด",
label: "ลำดับ/รหัสตัวชี้วัด",
sortable: true,
field: "including",
headerStyle: "font-size: 14px",
@ -43,11 +46,14 @@ const expanded = ref<any>([]);
const filterMain = ref<string>("");
const visibleColumns = ref<string[]>(["including", "includingName"]);
const roundOp = ref<DataOption[]>([]);
const roundOp = ref<DataOption[]>([
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
const totalList = ref<number>(1);
const year = ref<number>(new Date().getFullYear());
const year = ref<number|null>(new Date().getFullYear());
const nodeData = reactive<any>({
page: 1,
pageSize: 10,
@ -57,41 +63,12 @@ const nodeData = reactive<any>({
keyword: "",
});
function fetchRoundOption() {
showLoader();
http
.get(
config.API.kpiPeriod +
`?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
)
.then((res) => {
const data = res.data.result.data;
const list = data.map((e: any) => ({
id: e.id,
name:
e.durationKPI === "OCT"
? "รอบตุลาคม"
: e.durationKPI === "APR"
? "รอบเมษายน"
: "",
}));
roundOp.value = list;
nodeData.round = "";
fetchListProjectNew();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function fetchList() {
showLoader();
http
.get(
config.API.kpiPlan +
`?page=${nodeData.page}&pageSize=${nodeData.pageSize}&kpiPeriodId=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
`?page=${nodeData.page}&pageSize=${nodeData.pageSize}&period=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}&year=${year.value}&isAll=${isAll.value}`
)
.then((res) => {
const data = res.data.result.data;
@ -178,12 +155,20 @@ async function deleteData(idData: string) {
function clearFilter() {
nodeData.keyword = "";
fetchActive();
fetchRoundOption();
fetchListProjectNew();
}
onMounted(() => {
fetchActive();
fetchRoundOption();
// fetchData();
/**
* เปิด dialog history
* @param id
*/
function onClickHistory(id:string){
modalHistory.value = true
}
onMounted(async () => {
await fetchActive();
await fetchList();
});
</script>
@ -270,7 +255,7 @@ onMounted(() => {
year-picker
:enableTimePicker="false"
style="width: 150px"
@update:model-value="fetchRoundOption"
@update:model-value="fetchListProjectNew"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -281,7 +266,7 @@ onMounted(() => {
class="inputgreen"
dense
outlined
:model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
:model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
@ -292,6 +277,15 @@ onMounted(() => {
>
</q-icon>
</template>
<template v-if="year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(year = null), (nodeData.page = 1), fetchListProjectNew()
"
class="cursor-pointer"
/>
</template>
</q-input>
</template>
</datepicker>
@ -323,7 +317,20 @@ onMounted(() => {
</q-toolbar-title>
</div>
<q-space />
<div class="row q-gutter-sm">
<q-checkbox
keep-color
v-model="isAll"
label="แสดงตำแหน่งทั้งหมด"
color="primary"
@update:model-value="fetchListProjectNew"
>
<q-tooltip
>แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
>
</q-checkbox>
<q-input
class="inputgreen"
standout
@ -367,11 +374,12 @@ onMounted(() => {
ref="table"
:columns="columns"
:rows="rows"
row-key="subject"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
@ -389,29 +397,66 @@ onMounted(() => {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td>
<q-td auto-width>
<q-btn
color="primary"
flat
dense
round
class="q-mr-xs"
color="grey"
@click.stop
size="14px"
icon="mdi-pencil-outline"
clickable
@click="onClickAddOrView(true, props.row.id)"
icon="more_vert"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
flat
round
icon="delete"
color="red"
@click.stop.pervent="deleteData(props.row.id)"
>
<q-tooltip>ลบข้อมูล </q-tooltip>
<q-menu>
<q-list style="min-width: 180px">
<q-item
clickable
v-close-popup
@click="onClickAddOrView(true, 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="deleteData(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-btn>
</q-td>
</q-tr>
</template>
@ -420,6 +465,11 @@ onMounted(() => {
</div>
</div>
</q-card>
<DialogHistory
v-model:modal="modalHistory"
/>
</template>
<style lang="scss" scoped>

135
src/modules/14_KPI/views/indicatorByRole.vue
View file

@ -7,10 +7,14 @@ import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
import type {
NewPagination,
FormListMainByRole,
} from "@/modules/14_KPI/interface/request/Main";
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
import DialogHistory from "@/modules/14_KPI/components/DialogHistory.vue";
/** use*/
const modalHistory = ref<boolean>(false);
const total = ref<number>();
const $q = useQuasar();
const router = useRouter();
@ -56,7 +60,7 @@ const columns = ref<QTableProps["columns"]>([
]);
const visibleColumns = ref<string[]>(["including", "includingName"]);
const formFilter = reactive({
const formFilter = reactive<FormListMainByRole>({
page: 1,
pageSize: 10,
position: "",
@ -70,13 +74,16 @@ const pagination = ref({
});
/** Option รอบการประเมิน*/
const roundOp = ref<DataOption[]>([]);
const roundOp = ref<DataOption[]>([
{ id: "APR", name: "รอบเมษายน" },
{ id: "OCT", name: "รอบตุลาคม" },
]);
function fetchList() {
http
.get(
config.API.kpiRoleMainList +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}&keyword=${formFilter.keyword}`
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&period=${formFilter.round}&position=${formFilter.position}&keyword=${formFilter.keyword}&year=${formFilter.year}`
)
.then((res) => {
const data = res.data.result.data;
@ -172,28 +179,6 @@ function getOptions() {
});
}
function getRound() {
showLoader();
http
.get(
config.API.kpiPeriod +
`?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}&year=${formFilter.year}`
)
.then((res) => {
const data = res.data.result.data;
roundOp.value = data.map((item: any) => ({
id: item.id,
name: statusTothai(item.durationKPI),
}));
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function statusTothai(val: string) {
switch (val) {
case "SPECIAL":
@ -211,9 +196,16 @@ function setModel(val: string) {
formFilter.position = val;
}
/**
* เปิด dialog history
* @param id
*/
function onClickHistory(id: string) {
modalHistory.value = true;
}
onMounted(async () => {
await getOptions();
await getRound();
await fetchList();
});
</script>
@ -281,10 +273,7 @@ onMounted(async () => {
year-picker
:enableTimePicker="false"
@update:model-value="
(formFilter.page = 1),
(formFilter.round = ''),
getRound(),
fetchList()
(formFilter.page = 1), (formFilter.round = ''), fetchList()
"
>
<template #year="{ year }">{{ year + 543 }}</template>
@ -297,7 +286,7 @@ onMounted(async () => {
outlined
class="inputgreen"
:model-value="
formFilter.year === 0
formFilter.year === null
? 'ทั้งหมด'
: Number(formFilter.year) + 543
"
@ -311,15 +300,15 @@ onMounted(async () => {
>
</q-icon>
</template>
<!-- <template v-if="formFilter.year" v-slot:append>
<template v-if="formFilter.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(formFilter.year = 0), (formFilter.page = 1), getRound(),fetchList()
(formFilter.year = null), (formFilter.page = 1), fetchList()
"
class="cursor-pointer"
/>
</template> -->
</template>
</q-input>
</template>
</datepicker>
@ -443,24 +432,68 @@ onMounted(async () => {
{{ col.value ? col.value : "-" }}
</div>
</q-td>
<q-td>
<q-td auto-width>
<q-btn
flat
round
icon="edit"
color="edit"
@click.stop.pervent="onClickAddOrView(true, props.row.id)"
color="grey"
@click.stop
size="14px"
icon="more_vert"
>
<q-tooltip>แก้ไข </q-tooltip>
</q-btn>
<q-btn
flat
round
icon="delete"
color="red"
@click.stop.pervent="onClickDelete(props.row.id)"
>
<q-tooltip>ลบข้อมูล </q-tooltip>
<q-menu>
<q-list style="min-width: 180px">
<q-item
clickable
v-close-popup
@click.stop.pervent="onClickAddOrView(true, 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-btn>
</q-td>
</q-tr>
@ -468,6 +501,8 @@ onMounted(async () => {
</d-table>
</div>
</q-card>
<DialogHistory v-model:modal="modalHistory" />
</template>
<style scoped></style>