ผูก API ในส่วนของ KPI สมรรถนะ
This commit is contained in:
STW_TTTY\stwtt
parent
ab9f349af7
commit
6aaa9f6c30
4 changed files with 216 additions and 39 deletions
|
|
@ -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<string>(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<any>();
|
||||
|
||||
const weight = ref<number | null>(null);
|
||||
const { showLoader, hideLoader } = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
success,
|
||||
} = useCounterMixin();
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const idProps = defineModel<string | null>("id", { required: true });
|
||||
const competencyType = defineModel<string>("competencyType", {
|
||||
required: true,
|
||||
});
|
||||
|
|
@ -24,7 +49,7 @@ const define = ref<string>("");
|
|||
const formula = ref<string>("");
|
||||
const type = ref<string>("");
|
||||
|
||||
const listCheck = ref<number | null>();
|
||||
const listCheck = ref<string>();
|
||||
const listTarget = ref<any>([]);
|
||||
const listTargetMain = ref<any>([]);
|
||||
|
||||
|
|
@ -36,6 +61,7 @@ const expectedLevelOp = ref<DataOptions[]>([
|
|||
{ id: "5", name: "5" },
|
||||
]);
|
||||
const formDetail = reactive<any>({
|
||||
id: "",
|
||||
type: "สมรรถนะหลัก",
|
||||
name: "สมรรถนะ 1",
|
||||
definition: "",
|
||||
|
|
@ -65,9 +91,15 @@ const fieldLabels = {
|
|||
|
||||
const competencyTypeOp = ref<DataOptions[]>(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(
|
|||
<q-list separator dense>
|
||||
<q-item
|
||||
v-for="(item, index) in listTarget"
|
||||
:key="index"
|
||||
:key="item.name"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="listCheck === index"
|
||||
:active="listCheck === item.name"
|
||||
active-class="my-menu-link"
|
||||
@click="clickList(index, item)"
|
||||
@click="clickList(item.name, item)"
|
||||
>
|
||||
<q-item-section class="q-pa-none">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
<script setup lang="ts">
|
||||
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<string>(route.params.id as string);
|
||||
const idCapacity = ref<string|null>(null)
|
||||
const dataCapacity = ref<any>()
|
||||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
const { date2Thai,messageError,showLoader,hideLoader,dialogRemove,success } = mixin;
|
||||
|
||||
const type = defineModel<string>("type", { required: true });
|
||||
const name = defineModel<any>("name", { required: true });
|
||||
|
|
@ -15,20 +25,20 @@ const filterKeyword = ref<string>("");
|
|||
const modal = ref<boolean>(false);
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
"capacity",
|
||||
"name",
|
||||
"level",
|
||||
"scoreLevel",
|
||||
"point",
|
||||
"weight",
|
||||
"evaluationResults",
|
||||
"summary",
|
||||
]);
|
||||
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
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<QTableProps["columns"]>([
|
|||
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<QTableProps["columns"]>([
|
|||
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<any>([]);
|
||||
function fetchList() {}
|
||||
const rows = ref<FormCapacityList[]>([]);
|
||||
|
||||
|
||||
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()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -139,13 +190,33 @@ function fetchList() {}
|
|||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="edit"
|
||||
color="edit"
|
||||
@click.stop.pervent="onEdit(props.row)"
|
||||
>
|
||||
<q-tooltip>แก้ไข </q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
icon="delete"
|
||||
color="red"
|
||||
@click.stop.pervent="onDelete(props.row.id)"
|
||||
>
|
||||
<q-tooltip>ลบข้อมูล </q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<Dialog v-model:modal="modal" v-model:competency-type="type" />
|
||||
<Dialog v-model:modal="modal" v-model:competency-type="type" v-model:id="idCapacity" :data-capacity="dataCapacity" :get-data-list="getData"/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue