From 6aaa9f6c301995b72cf3710556adefa92660d7f9 Mon Sep 17 00:00:00 2001 From: "STW_TTTY\\stwtt" Date: Tue, 23 Apr 2024 16:23:49 +0700 Subject: [PATCH] =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B8=81=20API=20=E0=B9=83?= =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=82=E0=B8=AD?= =?UTF-8?q?=E0=B8=87=20KPI=20=E0=B8=AA=E0=B8=A1=E0=B8=A3=E0=B8=A3=E0=B8=96?= =?UTF-8?q?=E0=B8=99=E0=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/KPI/api.kpis.ts | 4 + .../Tab/Dialog/04_FormCompetency.vue | 138 +++++++++++++++--- .../Tab/Topic/02_CompetencyCard.vue | 101 +++++++++++-- src/modules/08_KPI/interface/request/index.ts | 12 +- 4 files changed, 216 insertions(+), 39 deletions(-) diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts index ad56272..5d24b6b 100644 --- a/src/api/KPI/api.kpis.ts +++ b/src/api/KPI/api.kpis.ts @@ -7,6 +7,8 @@ const kpiPlan = `${env.API_URI}/kpi/plan`; const kpiRole = `${env.API_URI}/kpi/role`; const KpiCapacity = `${env.API_URI}/kpi/capacity`; const KpiFile = `${env.API_URI}/salary/file`; + +const KpiUser = `${env.API_URI}/kpi/user`; export default { kpiPeriod, kpiEvaluation, @@ -17,4 +19,6 @@ export default { fileByFile: (name: string, group: string, id: string, fileName: string) => `${url}/file/${name}/${group}/${id}/${fileName}`, + + kpiUserCapacity:`${KpiUser}/capacity` }; diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue index 52817ec..c4e0bb7 100644 --- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue +++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue @@ -5,15 +5,40 @@ import type { DataOptions } from "@/modules/08_KPI/interface/index/Main"; import { useKpiDataStore } from "@/modules/08_KPI/store"; import { useCounterMixin } from "@/stores/mixin"; + import http from "@/plugins/http"; import config from "@/app.config"; +import { useQuasar } from "quasar"; +import { useRoute } from "vue-router"; +import type { FormCapacityList } from "@/modules/08_KPI/interface/request/index"; + +const route = useRoute(); +const idParam = ref(route.params.id as string); + +const props = defineProps({ + dataCapacity: { + type: Object as () => FormCapacityList, + required: true, + }, + getDataList: Function, +}); + +const $q = useQuasar(); const store = useKpiDataStore(); const expectedLevel = ref(); const weight = ref(null); -const { showLoader, hideLoader } = useCounterMixin(); +const { + showLoader, + hideLoader, + dialogConfirm, + messageError, + dialogMessageNotify, + success, +} = useCounterMixin(); const modal = defineModel("modal", { required: true }); +const idProps = defineModel("id", { required: true }); const competencyType = defineModel("competencyType", { required: true, }); @@ -24,7 +49,7 @@ const define = ref(""); const formula = ref(""); const type = ref(""); -const listCheck = ref(); +const listCheck = ref(); const listTarget = ref([]); const listTargetMain = ref([]); @@ -36,6 +61,7 @@ const expectedLevelOp = ref([ { id: "5", name: "5" }, ]); const formDetail = reactive({ + id: "", type: "สมรรถนะหลัก", name: "สมรรถนะ 1", definition: "", @@ -65,9 +91,15 @@ const fieldLabels = { const competencyTypeOp = ref(store.competencyType); -function clickList(index: number, data: any) { - listCheck.value = index; +function clickList(index: string, data: any) { + formScore.score1 = ""; + formScore.score2 = ""; + formScore.score3 = ""; + formScore.score4 = ""; + formScore.score5 = ""; + listCheck.value = index as string; + formDetail.id = data.id; formDetail.type = data.type; formDetail.name = data.name; formDetail.definition = data.description; @@ -83,19 +115,20 @@ function closeDialog() { modal.value = false; type.value = ""; search.value = ""; - listCheck.value = null; + listCheck.value = ""; formScore.score1 = ""; formScore.score2 = ""; formScore.score3 = ""; formScore.score4 = ""; formScore.score5 = ""; + formDetail.id = ""; formDetail.type = ""; formDetail.name = ""; formDetail.definition = ""; formDetail.criteria = ""; - - weight.value = null - expectedLevel.value = null + idProps.value = null; + weight.value = null; + expectedLevel.value = null; } /** เรียกใช้ class */ @@ -103,7 +136,38 @@ function getclass() { return "inputgreen"; } -function onSubmit() {} +function onSubmit() { + if (formDetail.id == "") { + dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ"); + } else { + dialogConfirm($q, () => { + const url = idProps.value + ? config.API.kpiUserCapacity + `/${idProps.value}` + : config.API.kpiUserCapacity; + const body = { + kpiUserEvaluationId: idParam.value, + kpiCapacityId: formDetail.id, + level: expectedLevel.value.toString(), + weight: weight.value, + point: 0, + summary: 0, + }; + showLoader(); + http[idProps.value ? `put` : `post`](url, body) + .then((res) => { + success($q, "บันทึกข้อมูลสำเร็จ"); + closeDialog(); + props.getDataList?.(); + }) + .catch((e) => { + messageError($q, e); + }) + .finally(() => { + hideLoader(); + }); + }); + } +} function getData() { showLoader(); @@ -111,7 +175,6 @@ function getData() { .get(config.API.KpiCapacity + `?type=${type.value}`) .then((res) => { const data = res.data.result.data; - console.log(data); listTarget.value = data; listTargetMain.value = data; formScore.score1 = data.capacityDetails[0].description; @@ -126,27 +189,56 @@ function getData() { } function filterTxt(val: any) { - console.log(val); listTarget.value = listTargetMain.value.filter( (v: any) => v.name.indexOf(val) > -1 ); - console.log(listTarget.value.length); } +function getDataById() { + http + .get(config.API.kpiUserCapacity + `/${idProps.value}`) + .then((res) => { + const list = listTargetMain.value; + const data = res.data.result; + const target = list.find((item: any) => item.name == data.name); + listCheck.value = data.name as string; + formDetail.name = data.name; + + weight.value = data.weight; + expectedLevel.value = data.level; + + formDetail.id = target.id; + formDetail.type = target.type; + formDetail.name = target.name; + formDetail.definition = target.description; + formScore.score1 = target.capacityDetails[0].description; + formScore.score2 = target.capacityDetails[1].description; + formScore.score3 = target.capacityDetails[2].description; + formScore.score4 = target.capacityDetails[3].description; + formScore.score5 = target.capacityDetails[4].description; + }) + .catch((e) => {}) + .finally(() => {}); +} watch( () => modal.value, () => { if (modal.value == true) { type.value = competencyType.value; - if(type.value == 'HEAD'){ - expectedLevel.value = store.defaultCompetencyCoreLevel - } - else if(type.value == 'GROUP'){ - expectedLevel.value = store.defaultCompetencyGroupLevel - }else{ - expectedLevel.value = null - } getData(); + if (idProps.value) { + setTimeout(() => { + getDataById(); + }, 100); + } else { + if (type.value == "HEAD") { + expectedLevel.value = store.defaultCompetencyCoreLevel; + } else if (type.value == "GROUP") { + expectedLevel.value = store.defaultCompetencyGroupLevel; + } else { + expectedLevel.value = null; + } + } } } ); @@ -215,12 +307,12 @@ watch(
-import { ref } from "vue"; +import { onMounted, ref } from "vue"; import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue"; -import type { QTableProps } from "quasar"; +import { useQuasar, type QTableProps } from "quasar"; import { useCounterMixin } from "@/stores/mixin"; +import http from "@/plugins/http"; +import config from '@/app.config' +import { useRoute } from "vue-router"; +import type { FormCapacityList } from '@/modules/08_KPI/interface/request/index' +const route = useRoute() +const id = ref(route.params.id as string); +const idCapacity = ref(null) +const dataCapacity = ref() + +const $q = useQuasar() const mixin = useCounterMixin(); -const { date2Thai } = mixin; +const { date2Thai,messageError,showLoader,hideLoader,dialogRemove,success } = mixin; const type = defineModel("type", { required: true }); const name = defineModel("name", { required: true }); @@ -15,20 +25,20 @@ const filterKeyword = ref(""); const modal = ref(false); const visibleColumns = ref([ - "capacity", + "name", "level", - "scoreLevel", + "point", "weight", - "evaluationResults", + "summary", ]); const columns = ref([ { - name: "capacity", + name: "name", align: "left", label: "รายการสมรรถนะ", sortable: true, - field: "capacity", + field: "name", headerStyle: "font-size: 14px", style: "font-size: 14px", sort: (a: string, b: string) => @@ -46,11 +56,11 @@ const columns = ref([ a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, { - name: "scoreLevel", + name: "point", align: "left", label: "ระดับคะแนนตามเกณฑ์การประเมิน", sortable: true, - field: "scoreLevel", + field: "point", headerStyle: "font-size: 14px", style: "font-size: 14px", sort: (a: string, b: string) => @@ -68,11 +78,11 @@ const columns = ref([ a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, { - name: "evaluationResults", + name: "summary", align: "left", label: "ผลการประเมิน", sortable: true, - field: "evaluationResults", + field: "summary", headerStyle: "font-size: 14px", style: "font-size: 14px", sort: (a: string, b: string) => @@ -84,8 +94,49 @@ function onAdd() { modal.value = true; } -const rows = ref([]); -function fetchList() {} +const rows = ref([]); + + +function getData(){ + showLoader() + http + .get(config.API.kpiUserCapacity+`?id=${id.value}&type=${type.value}`) + .then((res)=>{ + + const data = res.data.result.data + rows.value = data + }).catch((e)=>{ + messageError($q,e) + }).finally(()=>{ + hideLoader() + }) +} + +function onEdit(data:FormCapacityList){ + modal.value = true; + dataCapacity.value = data + idCapacity.value = data.id +} + +function onDelete(id:string){ + dialogRemove($q,()=>{ + showLoader() + http + .delete(config.API.kpiUserCapacity+`/${id}`) + .then((res)=>{ + success($q,'ลบข้อมูลสำเร็จ') + getData() + }).catch((e)=>{ + messageError($q,e) + }).finally(()=>{ + hideLoader() + }) + }) +} + +onMounted(()=>{ + getData() +}) - +