kpi
This commit is contained in:
STW_TTTY\stwtt
parent
b5d4c507da
commit
338476928a
2 changed files with 234 additions and 20 deletions
|
|
@ -7,7 +7,10 @@ import { useQuasar } from "quasar";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
import type { DataOptionTechnique } from "@/modules/14_KPI/interface/index/Main";
|
||||
import type {
|
||||
DataOptionTechnique,
|
||||
ProjectYearOp,
|
||||
} from "@/modules/14_KPI/interface/index/Main";
|
||||
const props = defineProps({
|
||||
getAll: Function,
|
||||
});
|
||||
|
|
@ -108,6 +111,14 @@ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
|
|||
{ value: "other3", label: "อื่น ๆ (ระบุ)" },
|
||||
]);
|
||||
|
||||
const choice = ref<string>("MANUAL");
|
||||
const projectName = ref<any>("");
|
||||
const projectOp = ref<ProjectYearOp[]>([]);
|
||||
const projectOpMain = ref<ProjectYearOp[]>([]);
|
||||
const choiceOp = ref<DataOptionTechnique[]>([
|
||||
{ value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
|
||||
{ value: "MANUAL", label: "กรอกเอง" },
|
||||
]);
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
|
|
@ -122,7 +133,19 @@ const {
|
|||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
const id = defineModel<string>("id", { required: true });
|
||||
|
||||
const formData = reactive({
|
||||
const formData = reactive<{
|
||||
year: number | null;
|
||||
name: string;
|
||||
group: any[];
|
||||
target: string;
|
||||
isDevelopment70: boolean;
|
||||
isDevelopment20: boolean;
|
||||
isDevelopment10: boolean;
|
||||
achievement10: string;
|
||||
achievement5: string;
|
||||
achievement0: string;
|
||||
}>({
|
||||
year: null,
|
||||
name: "",
|
||||
group: [],
|
||||
target: "",
|
||||
|
|
@ -148,6 +171,14 @@ function close() {
|
|||
formData.achievement5 =
|
||||
"มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
|
||||
formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
|
||||
choice.value = "MANUAL";
|
||||
formData.year = null;
|
||||
projectName.value = "";
|
||||
reasonDevelopment70.value = "";
|
||||
reasonDevelopment20.value = "";
|
||||
reasonDevelopment10.value = "";
|
||||
development.value = [];
|
||||
|
||||
props.getAll?.();
|
||||
}
|
||||
|
||||
|
|
@ -174,10 +205,13 @@ function onSubmit() {
|
|||
isDevelopment10: isDevelopment10.value,
|
||||
kpiUserEvaluationId: idKpi.value,
|
||||
developmentProjects: development.value,
|
||||
reasonDevelopment70:checkOtherBox11 ? reasonDevelopment70.value:'',
|
||||
reasonDevelopment20:checkOtherBox12 ? reasonDevelopment20.value:'',
|
||||
reasonDevelopment10:checkOtherBox13 ? reasonDevelopment10.value:'',
|
||||
reasonDevelopment70: checkOtherBox11 ? reasonDevelopment70.value : "",
|
||||
reasonDevelopment20: checkOtherBox12 ? reasonDevelopment20.value : "",
|
||||
reasonDevelopment10: checkOtherBox13 ? reasonDevelopment10.value : "",
|
||||
|
||||
selectType: choice.value,
|
||||
selectTypeYear: formData.year ? formData.year.toString() : null,
|
||||
selectTypeId: projectName.value.id ? projectName.value.id : null,
|
||||
};
|
||||
showLoader();
|
||||
http[id.value ? "put" : "post"](url, body)
|
||||
|
|
@ -201,21 +235,41 @@ watch(
|
|||
showLoader();
|
||||
http
|
||||
.get(config.API.kpiAchievementDevelop + `/${id.value}`)
|
||||
.then((res) => {
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
formData.name = data.name;
|
||||
formData.group = data.group;
|
||||
formData.target = data.target;
|
||||
formData.isDevelopment70 = data.isDevelopment70;
|
||||
formData.isDevelopment20 = data.isDevelopment20;
|
||||
formData.isDevelopment10 = data.isDevelopment10;
|
||||
formData.achievement10 = data.achievement10;
|
||||
formData.achievement5 = data.achievement5;
|
||||
formData.achievement0 = data.achievement0;
|
||||
development.value = data.developmentProjects;
|
||||
reasonDevelopment70.value = data.developmentProjects.includes("other1") ? data.reasonDevelopment70:'';
|
||||
reasonDevelopment20.value = data.developmentProjects.includes("other2") ? data.reasonDevelopment20:'';
|
||||
reasonDevelopment10.value = data.developmentProjects.includes("other3") ? data.reasonDevelopment10:'';
|
||||
formData.year = data.selectTypeYear;
|
||||
await getDataByYear();
|
||||
setTimeout(() => {
|
||||
choice.value = data.selectType;
|
||||
projectName.value = projectOpMain.value.find(
|
||||
(i: any) => i.id == data.selectTypeId
|
||||
);
|
||||
formData.name = data.name;
|
||||
formData.group = data.group;
|
||||
formData.target = data.target;
|
||||
formData.isDevelopment70 = data.isDevelopment70;
|
||||
formData.isDevelopment20 = data.isDevelopment20;
|
||||
formData.isDevelopment10 = data.isDevelopment10;
|
||||
formData.achievement10 = data.achievement10;
|
||||
formData.achievement5 = data.achievement5;
|
||||
formData.achievement0 = data.achievement0;
|
||||
development.value = data.developmentProjects;
|
||||
reasonDevelopment70.value = data.developmentProjects.includes(
|
||||
"other1"
|
||||
)
|
||||
? data.reasonDevelopment70
|
||||
: "";
|
||||
reasonDevelopment20.value = data.developmentProjects.includes(
|
||||
"other2"
|
||||
)
|
||||
? data.reasonDevelopment20
|
||||
: "";
|
||||
reasonDevelopment10.value = data.developmentProjects.includes(
|
||||
"other3"
|
||||
)
|
||||
? data.reasonDevelopment10
|
||||
: "";
|
||||
}, 500);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -226,6 +280,76 @@ watch(
|
|||
}
|
||||
}
|
||||
);
|
||||
|
||||
const customPosition = () => ({ top: "385px", left: "410px" });
|
||||
async function getDataByYear() {
|
||||
if (formData.year) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentMain + `/done?year=${formData.year}`)
|
||||
.then(async(res) => {
|
||||
const data = await res.data.result.data;
|
||||
projectOpMain.value = data;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getProjectDetail(val: any) {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.developmentMain + `/tab3_1/${val.id}`)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.name = val.projectName;
|
||||
formData.group = data.group;
|
||||
formData.target = data.target;
|
||||
formData.isDevelopment70 = data.isDevelopment70;
|
||||
formData.isDevelopment20 = data.isDevelopment20;
|
||||
formData.isDevelopment10 = data.isDevelopment10;
|
||||
formData.achievement10 = data.achievement10;
|
||||
formData.achievement5 = data.achievement5;
|
||||
formData.achievement0 = data.achievement0;
|
||||
development.value = data.developmentProjectTechniqueActuals;
|
||||
reasonDevelopment70.value =
|
||||
data.developmentProjectTechniqueActuals.includes("other1")
|
||||
? data.reasonDevelopment70
|
||||
: "";
|
||||
reasonDevelopment20.value =
|
||||
data.developmentProjectTechniqueActuals.includes("other2")
|
||||
? data.reasonDevelopment20
|
||||
: "";
|
||||
reasonDevelopment10.value =
|
||||
data.developmentProjectTechniqueActuals.includes("other3")
|
||||
? data.reasonDevelopment10
|
||||
: "";
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function ค้นหาข้อมูลใน option
|
||||
* @param val คำค้นหา
|
||||
* @param update function
|
||||
*/
|
||||
function filterOptionFn(val: string, update: Function) {
|
||||
projectName.value = "";
|
||||
update(() => {
|
||||
projectOp.value = projectOpMain.value.filter(
|
||||
(e: any) => e.projectName.search(val) !== -1
|
||||
);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog persistent v-model="modal">
|
||||
|
|
@ -238,6 +362,90 @@ watch(
|
|||
<q-separator />
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-select
|
||||
class="inputgreen"
|
||||
outlined
|
||||
dense
|
||||
label="ตัวเลือก"
|
||||
:options="choiceOp"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="choice"
|
||||
>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-3" v-if="choice == 'PROJECT'">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="formData.year"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
position="center"
|
||||
year-picker
|
||||
:alt-position="customPosition"
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="getDataByYear(),projectName = ''"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
|
||||
class="inputgreen"
|
||||
:model-value="
|
||||
formData.year === null
|
||||
? null
|
||||
: Number(formData.year) + 543
|
||||
"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-3" v-if="choice == 'PROJECT'">
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
|
||||
class="inputgreen"
|
||||
label="โครงการ/หลักสูตรการฝึกอบรม"
|
||||
:options="projectOp"
|
||||
option-label="projectName"
|
||||
option-value="id"
|
||||
map-options
|
||||
hide-bottom-space
|
||||
use-input
|
||||
:readonly="!formData.year"
|
||||
v-model="projectName"
|
||||
@update:model-value="getProjectDetail(projectName)"
|
||||
@filter="filterOptionFn"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
ไม่มีข้อมูล
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.name"
|
||||
|
|
|
|||
|
|
@ -78,6 +78,11 @@ interface DataAchievement {
|
|||
detail: string;
|
||||
}
|
||||
|
||||
interface ProjectYearOp {
|
||||
id: string;
|
||||
year: number;
|
||||
projectName: string;
|
||||
}
|
||||
export type {
|
||||
DataOption,
|
||||
ItemsMenu,
|
||||
|
|
@ -89,5 +94,6 @@ export type {
|
|||
ItemsTab,
|
||||
OptionCheckbox,
|
||||
DataAchievement,
|
||||
DataOptionTechnique
|
||||
ProjectYearOp,
|
||||
DataOptionTechnique,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue