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

API User Popup สมรรถนะในหน้าฟอร์มแบบประเมิน & อัปโหลดไฟล์

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-04-22 15:46:21 +07:00
parent 95ac852446
commit 035a93c9f0
5 changed files with 364 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

183
src/modules/08_KPI/components/Tab/Dialog/04_Dialog.vue
View file

@ -1,9 +1,17 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { ref, reactive, onMounted, watch } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
const { showLoader, hideLoader } = useCounterMixin();
const modal = defineModel<boolean>("modal", { required: true });
const competencyType = defineModel<string>("competencyType", {
required: true,
});
const numpage = defineModel<number>("numpage", { required: true });
const splitterModel = ref<number>(30);
const search = ref<string>("");
@ -13,18 +21,8 @@ const formula = ref<string>("");
const type = ref<string>("");
const listCheck = ref<number | null>();
const listTarget = ref<any>([
{
id: "ID1",
metricCode: "1กก",
indicatorName: "ตัวชี้วัด 1",
},
{
id: "ID2",
metricCode: "2กก",
indicatorName: "ตัวชี้วัด 2",
},
]);
const listTarget = ref<any>([]);
const listTargetMain = ref<any>([]);
const formDetail = reactive<any>({
type: "สมรรถนะหลัก",
@ -33,11 +31,11 @@ const formDetail = reactive<any>({
criteria: "",
});
const formScore = reactive<any>({
score1: "1",
score2: "2",
score3: "3",
score1: "",
score2: "",
score3: "",
score4: "",
score5: "5",
score5: "",
});
const fieldDetailLabels = {
@ -57,48 +55,56 @@ const fieldLabels = {
const competencyTypeOp = ref<DataOptions[]>([
{
id: "ID1",
id: "HEAD",
name: "สมรรถนะหลัก",
},
{
id: "ID2",
id: "GROUP",
name: "สมรรถนะประจำกลุ่มงาน",
},
{
id: "ID3",
name: "สมรรถนะประจำกลุ่มงาน",
},
{
id: "ID4",
id: "EXECUTIVE",
name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
},
{
id: "ID5",
id: "DIRECTOR",
name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
},
{
id: "ID6",
id: "INSPECTOR",
name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
},
]);
function clickList(index: number, data: any) {
listCheck.value = index;
// dataList.value = data.map((i: any) => ({
// commandNo: i.commandNo,
// duty: i.duty,
// prefix: i.prefix,
// firstName: i.firstName,
// lastName: i.lastName,
// fullName:`${i.prefix}${i.firstName} ${i.lastName}`
// }));
// formDetail.type = ???
// formDetail.name = ???
// formDetail.definition = ???
// formDetail.criteria = ???
formScore.score1 = data.capacityDetails[0].description;
formScore.score2 = data.capacityDetails[1].description;
formScore.score3 = data.capacityDetails[2].description;
formScore.score4 = data.capacityDetails[3].description;
formScore.score5 = data.capacityDetails[4].description;
}
/** ปิด dialog */
function closeDialog() {
modal.value = false;
type.value = ''
search.value = ''
type.value = "";
search.value = "";
listCheck.value = null;
formScore.score1 = "";
formScore.score2 = "";
formScore.score3 = "";
formScore.score4 = "";
formScore.score5 = "";
formDetail.type = "";
formDetail.name = "";
formDetail.definition = "";
formDetail.criteria = "";
}
/** เรียกใช้ class */
@ -107,6 +113,43 @@ function getclass() {
}
function onSubmit() {}
function getData() {
showLoader();
http
.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;
formScore.score2 = data.capacityDetails[1].description;
formScore.score3 = data.capacityDetails[2].description;
formScore.score4 = data.capacityDetails[3].description;
formScore.score5 = data.capacityDetails[4].description;
})
.finally(() => {
hideLoader();
});
}
function filterTxt(val: any) {
console.log(val);
listTarget.value = listTargetMain.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
console.log(listTarget.value.length);
}
watch(
() => modal.value,
() => {
if (modal.value == true) {
type.value = competencyType.value;
getData();
}
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
@ -117,14 +160,17 @@ function onSubmit() {}
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<div class="col-12 row">
<div class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight">
<div
class="bg-grey-1 q-pa-md col-xs-12 col-sm-4 col-md-3 row lineRight"
>
<div class="col-12 q-col-gutter-sm fit">
<div class="col-12 ">
<div class="col-12">
<q-select
v-model="type"
outlined
label="ประเภทสมรรถนะ"
dense
readonly
bg-color="white"
option-label="name"
option-value="id"
@ -134,7 +180,7 @@ function onSubmit() {}
map-options
/>
</div>
<div class="col-12 ">
<div class="col-12">
<q-input
v-model="search"
outlined
@ -142,6 +188,7 @@ function onSubmit() {}
label="ค้นหา"
bg-color="white"
:class="getclass()"
@update:model-value="filterTxt"
>
<template v-slot:append>
<q-icon v-if="search == ''" name="search" />
@ -149,28 +196,23 @@ function onSubmit() {}
v-if="search !== ''"
name="clear"
class="cursor-pointer"
@click="search = ''"
@click="(search = ''), (listTarget = listTargetMain)"
/>
</template>
</q-input>
</div>
<div class="col-12 ">
<div class="col-12">
<q-card bordered flat class="no-shadow bg-white col-12">
<div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหัสตัวชี้วัด</span>
</div>
<div class="col-4">
<span>ชื่อตัวชี้วัด</span>
<div class="col-12">
<span>ชื่อสมรรถนะ</span>
</div>
</div>
<q-separator />
<q-card-section class="q-pa-none">
<q-list
separator
dense
>
<div v-if="listTarget.length > 0">
<q-list separator dense>
<q-item
v-for="(item, index) in listTarget"
:key="index"
@ -178,20 +220,25 @@ function onSubmit() {}
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
@click="clickList(index, item)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="col-4">
<span>{{ item.metricCode }}</span>
</div>
<div class="col-4">
<span>{{ item.indicatorName }}</span>
<div
class="row items-center"
style="height: 20px"
>
<div class="col-12">
<span>{{ item.name }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</div>
<div v-else class="q-pa-md">
<span>ไม่พบข้อมูล</span>
</div>
</q-card-section>
</q-card>
</div>
@ -228,7 +275,7 @@ function onSubmit() {}
</div>
</q-card>
</div>
<div class="col-4 row ">
<div class="col-4 row">
<q-card bordered class="col-12 row no-shadow">
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
<div class="col-6 text-center">ระดับคะแนน</div>
@ -240,9 +287,7 @@ function onSubmit() {}
class="col-12"
>
<div class="row col-12 q-py-sm">
<div
class="col-6 text-center text-body2"
>
<div class="col-6 text-center text-body2">
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
<div class="col-6 text-center">
@ -281,17 +326,17 @@ function onSubmit() {}
background: #ebf9f7 !important;
color: #1bb19ab8 !important;
}
.no-shadow{
box-shadow:none !important;
.no-shadow {
box-shadow: none !important;
}
.lineRight{
border-right: 1px solid #EDEDED !important;
.lineRight {
border-right: 1px solid #ededed !important;
}
.lineTop{
border-top: 1px solid #EDEDED !important;
.lineTop {
border-top: 1px solid #ededed !important;
}
.card-box{
border: 1px solid #EDEDED !important;
.card-box {
border: 1px solid #ededed !important;
border-radius: 8px;
}
</style>