KPI => refactor code
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
61e06096bf
commit
e9ce66b6c1
5 changed files with 105 additions and 74 deletions
|
|
@ -144,6 +144,12 @@ const pagination = ref({
|
|||
rowsPerPage: pageSize.value,
|
||||
});
|
||||
|
||||
/**
|
||||
* ตัวแปร
|
||||
*/
|
||||
const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
|
||||
const roundOp = ref<DataOption[]>([]); // รายการรอบการประเมิน
|
||||
|
||||
/**
|
||||
* function fetch รายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
|
||||
*/
|
||||
|
|
@ -158,8 +164,6 @@ function fetcDataList() {
|
|||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
console.log(data);
|
||||
|
||||
rows.value = data.data;
|
||||
total.value = data.total;
|
||||
maxPage.value = Math.ceil(total.value / pageSize.value);
|
||||
|
|
@ -172,8 +176,6 @@ function fetcDataList() {
|
|||
});
|
||||
}
|
||||
|
||||
const year = ref<number | null>(new Date().getFullYear());
|
||||
const roundOp = ref<DataOption[]>([]);
|
||||
/**
|
||||
* function fetch รอบการประเมิน
|
||||
*/
|
||||
|
|
@ -205,6 +207,7 @@ function fetchRoundOption() {
|
|||
} else {
|
||||
roundOp.value = [];
|
||||
store.formQuery.round = "";
|
||||
rows.value = [];
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -215,6 +218,9 @@ function fetchRoundOption() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
|
||||
*/
|
||||
function changRound() {
|
||||
store.formQuery.page = 1;
|
||||
fetcDataList();
|
||||
|
|
@ -228,12 +234,6 @@ function onSearchData() {
|
|||
fetcDataList();
|
||||
}
|
||||
|
||||
function clearYear() {
|
||||
year.value = null;
|
||||
store.formQuery.round = "";
|
||||
roundOp.value = [];
|
||||
fetcDataList();
|
||||
}
|
||||
/**
|
||||
* ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
|
||||
*/
|
||||
|
|
@ -251,6 +251,9 @@ function onClickView(id: string) {
|
|||
devId.value = id;
|
||||
}
|
||||
|
||||
/**
|
||||
* HookLifecycle
|
||||
*/
|
||||
onMounted(() => {
|
||||
store.formQuery.round = "";
|
||||
fetchRoundOption();
|
||||
|
|
|
|||
|
|
@ -46,12 +46,13 @@ const maxPage = defineModel<number>("maxPage", { required: true });
|
|||
const total = defineModel<number>("total", { required: true });
|
||||
const keyword = defineModel<string>("keyword", { required: true });
|
||||
const porps = defineProps({
|
||||
fetchData: { type: Function, required: true },
|
||||
fetchData: { type: Function, required: true }, // function เรีนกข้อมูลประกาศผล
|
||||
});
|
||||
|
||||
/**
|
||||
* Table
|
||||
*/
|
||||
const selected = ref<ResResults[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
|
|
@ -172,7 +173,12 @@ const pagination = ref({
|
|||
page: page.value,
|
||||
rowsPerPage: pageSize.value,
|
||||
});
|
||||
const selected = ref<ResResults[]>([]);
|
||||
|
||||
/**
|
||||
* ตัวแปร
|
||||
*/
|
||||
const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
|
||||
const roundOp = ref<DataOption[]>([]); // รายการรอบการประเมิน
|
||||
|
||||
/**
|
||||
* function บันทึกการประกาศผล
|
||||
|
|
@ -202,8 +208,6 @@ function onAnnounce() {
|
|||
);
|
||||
}
|
||||
|
||||
const year = ref<number | null>(new Date().getFullYear());
|
||||
const roundOp = ref<DataOption[]>([]);
|
||||
/**
|
||||
* function fetch รอบการประเมิน
|
||||
*/
|
||||
|
|
@ -233,6 +237,7 @@ function fetchRoundOption() {
|
|||
} else {
|
||||
roundOp.value = [];
|
||||
store.formQuery.round = "";
|
||||
rows.value = [];
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -243,6 +248,9 @@ function fetchRoundOption() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เปลี่ยนรอบการประเมิน และ เรียกข้อมูลรายการแผนพัฒนาการปฏิบัติราชการรายบุคคลย้อนหลัง
|
||||
*/
|
||||
function changRound() {
|
||||
store.formQuery.page = 1;
|
||||
porps.fetchData();
|
||||
|
|
@ -256,12 +264,6 @@ function onSearchData() {
|
|||
porps.fetchData();
|
||||
}
|
||||
|
||||
// function clearYear() {
|
||||
// year.value = null;
|
||||
// store.formQuery.round = "";
|
||||
// roundOp.value = [];
|
||||
// porps.fetchData();
|
||||
// }
|
||||
/**
|
||||
* ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
|
||||
*/
|
||||
|
|
@ -270,6 +272,9 @@ watch(pagination, () => {
|
|||
pageSize.value = pagination.value.rowsPerPage;
|
||||
});
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
|
||||
*/
|
||||
onMounted(() => {
|
||||
store.formQuery.round = "";
|
||||
fetchRoundOption();
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ const listReportMain = ref<DataOption[]>([
|
|||
name: "จัดทำประกาศผู้มีผลการปฏิบัติราชการระดับดีเด่นและดีมาก",
|
||||
},
|
||||
]);
|
||||
const listReport = ref<DataOption[]>([]);
|
||||
const listReport = ref<DataOption[]>([]); // รายการรายงานทั้งหมด
|
||||
|
||||
/**
|
||||
* funtion fetchข้อมูลรอบการประเมิน
|
||||
|
|
@ -335,7 +335,6 @@ const formFilter = reactive({
|
|||
});
|
||||
const maxPage = ref<number>(1);
|
||||
const total = ref<number>(0);
|
||||
|
||||
const roundRef = ref<any>(null);
|
||||
|
||||
const rowsPerson = ref<ResPerson[]>([]);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -59,9 +59,7 @@ function fetcDataList() {
|
|||
})
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
|
||||
dataList.value = data.data;
|
||||
|
||||
total.value = data.total;
|
||||
maxPage.value = Math.ceil(total.value / pageSize.value);
|
||||
})
|
||||
|
|
@ -76,10 +74,9 @@ function fetcDataList() {
|
|||
// /**
|
||||
// * ทำงานเมื่อมีการเปลี่ยน Tab
|
||||
// */
|
||||
watch(tab, (t) => {
|
||||
watch(tab, () => {
|
||||
page.value = 1;
|
||||
keyword.value = "";
|
||||
// t == "KP7" || t == "COMPLETE" ? fetcDataList() : "";
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -88,13 +85,6 @@ watch(tab, (t) => {
|
|||
watch(pageSize, () => {
|
||||
fetcDataList();
|
||||
});
|
||||
|
||||
/**
|
||||
* HooK
|
||||
*/
|
||||
onMounted(() => {
|
||||
// fetcDataList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch, nextTick } from "vue";
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { useQuasar, type QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** importType*/
|
||||
/**
|
||||
* importType
|
||||
*/
|
||||
import type {
|
||||
DataOption,
|
||||
ItemsMenu,
|
||||
|
|
@ -17,15 +18,20 @@ import type {
|
|||
} from "@/modules/14_KPI/interface/request/Main";
|
||||
import type { ResRound } from "@/modules/14_KPI/interface/response/Main";
|
||||
|
||||
/** importComponents*/
|
||||
/**
|
||||
* importComponents
|
||||
*/
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
/** importStore*/
|
||||
/**
|
||||
* importStore
|
||||
*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
/** use*/
|
||||
/**
|
||||
* use
|
||||
*/
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
|
|
@ -36,7 +42,9 @@ const {
|
|||
dialogRemove,
|
||||
} = useCounterMixin();
|
||||
|
||||
/** หัวตาราง */
|
||||
/**
|
||||
* ข้้อมูล Table
|
||||
*/
|
||||
const rows = ref<ResRound[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
|
|
@ -98,8 +106,26 @@ const visibleColumns = ref<string[]>([
|
|||
"endDate",
|
||||
"isActive",
|
||||
]);
|
||||
const formQuery = reactive<FormQueryRound>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
year: new Date().getFullYear(),
|
||||
keyword: "",
|
||||
});
|
||||
const totalList = ref<number>(1);
|
||||
const total = ref<number>(0);
|
||||
|
||||
/** itemMenu*/
|
||||
/**
|
||||
* ตัวแปร
|
||||
*/
|
||||
const modalDialog = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const formData = reactive<FormRound>({
|
||||
durationKPI: "",
|
||||
year: null,
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
}); // form เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
|
||||
const itemMenu = ref<ItemsMenu[]>([
|
||||
// {
|
||||
// label: "เปิดรอบ",
|
||||
|
|
@ -119,35 +145,18 @@ const itemMenu = ref<ItemsMenu[]>([
|
|||
icon: "delete",
|
||||
color: "red",
|
||||
},
|
||||
]);
|
||||
|
||||
/** Option รอบการประเมิน*/
|
||||
]); // itemMenu
|
||||
const roundOp = ref<DataOption[]>([
|
||||
{ id: "APR", name: "รอบที่ 1 เมษายน" },
|
||||
{
|
||||
id: "OCT",
|
||||
name: "รอบที่ 2 ตุลาคม",
|
||||
},
|
||||
]);
|
||||
]); //Option รอบการประเมิน
|
||||
|
||||
const formQuery = reactive<FormQueryRound>({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
year: new Date().getFullYear(),
|
||||
keyword: "",
|
||||
});
|
||||
const totalList = ref<number>(1);
|
||||
const formData = reactive<FormRound>({
|
||||
durationKPI: "",
|
||||
year: null,
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
});
|
||||
const modalDialog = ref<boolean>(false);
|
||||
const isStatusEdit = ref<boolean>(false);
|
||||
const total = ref<number>(0);
|
||||
|
||||
/** function fetch ข้อมูลรายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ*/
|
||||
/**
|
||||
* function fetch ข้อมูลรายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
|
||||
*/
|
||||
function fetchList() {
|
||||
showLoader();
|
||||
http
|
||||
|
|
@ -172,20 +181,23 @@ function fetchList() {
|
|||
/**
|
||||
* function opent Dialog เพิ่มรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
|
||||
* @param status เพิ่ม,แก้ไข
|
||||
* @param id
|
||||
*/
|
||||
function onClickAddOrView(status: boolean = false, id: string = "") {
|
||||
function onClickAddOrView(status: boolean = false) {
|
||||
isStatusEdit.value = status;
|
||||
modalDialog.value = true;
|
||||
}
|
||||
|
||||
/** function close Dialog*/
|
||||
/**
|
||||
* function close Dialog
|
||||
*/
|
||||
function closeDialog() {
|
||||
modalDialog.value = false;
|
||||
clearFormData();
|
||||
}
|
||||
|
||||
/** function Clear วันสิ้นสุด*/
|
||||
/**
|
||||
* function Clear วันสิ้นสุด
|
||||
*/
|
||||
function changeDateStart() {
|
||||
if (formData?.startDate !== null && formData?.endDate !== null) {
|
||||
const startDate = new Date(formData.startDate);
|
||||
|
|
@ -196,7 +208,9 @@ function changeDateStart() {
|
|||
}
|
||||
}
|
||||
|
||||
/** function ClearForm เพิ่มรอบการประเมิน*/
|
||||
/**
|
||||
* function ClearForm เพิ่มรอบการประเมิน
|
||||
*/
|
||||
function clearFormData() {
|
||||
formData.durationKPI = "";
|
||||
formData.startDate = null;
|
||||
|
|
@ -204,7 +218,9 @@ function clearFormData() {
|
|||
formData.year = null;
|
||||
}
|
||||
|
||||
/** function บันทึกข้อมูลเพิ่มรอบการประเมิน*/
|
||||
/**
|
||||
* function บันทึกข้อมูลเพิ่มรอบการประเมิน
|
||||
*/
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, async () => {
|
||||
try {
|
||||
|
|
@ -224,6 +240,11 @@ function onSubmit() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function เลือกเมนูแก้ไขรอบ
|
||||
* @param action ปิดรอบ,ลบรอบ
|
||||
* @param id รอบการประเมิน
|
||||
*/
|
||||
function onClickAction(action: string, id: string) {
|
||||
switch (action) {
|
||||
case "open":
|
||||
|
|
@ -315,7 +336,9 @@ function onDeleteRound(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/** function Convertname รอบการประเมิน */
|
||||
/**
|
||||
* function Convertname รอบการประเมิน
|
||||
*/
|
||||
function connvertName(val: string) {
|
||||
const findData = roundOp.value.find((e: DataOption) => e.id === val);
|
||||
return findData?.name;
|
||||
|
|
@ -330,6 +353,9 @@ function updatePagination(newPagination: NewPagination) {
|
|||
formQuery.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* callback function fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ เมือมีการเปลี่ยนแถวต่อหน้า
|
||||
*/
|
||||
watch(
|
||||
() => formQuery.pageSize,
|
||||
() => {
|
||||
|
|
@ -337,6 +363,9 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* callback function เช็ต วันเริ่มต้น และวันสิ้นสุด รอบการประเมินผลการปฏิบัติหน้าที่ราชการ
|
||||
*/
|
||||
watch(
|
||||
[() => formData.durationKPI, () => formData.year],
|
||||
([newDurationKPI, newYear], [oldDurationKPI, oldYear]) => {
|
||||
|
|
@ -352,12 +381,17 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
async function handleUpdateYear() {
|
||||
await nextTick();
|
||||
/**
|
||||
* function อัพเดทปีงบประมาณ และ fetch รายการรอบการประเมินผลการปฏิบัติหน้าที่ราชการ
|
||||
*/
|
||||
function handleUpdateYear() {
|
||||
formQuery.page = 1;
|
||||
fetchList();
|
||||
}
|
||||
|
||||
/**
|
||||
* hookLifecycle
|
||||
*/
|
||||
onMounted(() => {
|
||||
fetchList();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue