tab 2 ผลการประเมินการ ฯ แสดงเหมือนของระบบบริหารจัดการ
This commit is contained in:
setthawutttty
parent
3637b9dbdf
commit
3fec8ef37c
4 changed files with 776 additions and 255 deletions
267
src/modules/15_probationReport/components/01_SurveyPage.vue
Normal file
267
src/modules/15_probationReport/components/01_SurveyPage.vue
Normal file
|
|
@ -0,0 +1,267 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useProbationReport } from "@/modules/15_probationReport/store";
|
||||
|
||||
import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
|
||||
|
||||
const store = useProbationReport();
|
||||
const router = useRouter();
|
||||
const optionText = ref<ListDataText[]>([
|
||||
{ value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
|
||||
{ value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
|
||||
{ value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
|
||||
{ value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
|
||||
{ value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
|
||||
]);
|
||||
|
||||
const $q = useQuasar();
|
||||
const myForm = ref<QForm>();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
|
||||
const route = useRoute();
|
||||
|
||||
const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
|
||||
const status = ref<boolean>(true);
|
||||
|
||||
const answer1 = ref<string>("");
|
||||
const answer2 = ref<string>("");
|
||||
const answer3 = ref<number>(0);
|
||||
|
||||
const classBordered = ref<string>("");
|
||||
|
||||
/** ดึง ข้อมูลแบบสำรวจ */
|
||||
async function getSurveyData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.summaryDetail())
|
||||
.then(async (res: any) => {
|
||||
const data = await res.data.result.data;
|
||||
assignId.value = res.data.result.assignId;
|
||||
if (data !== null) {
|
||||
answer1.value = data.answer1;
|
||||
answer2.value = data.answer2;
|
||||
answer3.value = data.answer3;
|
||||
status.value = false;
|
||||
}
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/** save ข้อมูล */
|
||||
async function save() {
|
||||
if (answer3.value !== 0) {
|
||||
const data = {
|
||||
answer1: answer1.value,
|
||||
answer2: answer2.value,
|
||||
answer3: answer3.value,
|
||||
};
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.summarySurveyDetail(assignId.value), data)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
getSurveyData();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
} else if (answer3.value == 0) {
|
||||
classBordered.value = "border_custom";
|
||||
}
|
||||
}
|
||||
|
||||
/** ถ้าเป็น 0 ใส่ class */
|
||||
watch(answer3, () => {
|
||||
if (answer3.value == 0) {
|
||||
classBordered.value = "border_custom";
|
||||
} else classBordered.value = "";
|
||||
});
|
||||
|
||||
/** get ค่า เมื่อโหลดหน้า */
|
||||
onMounted(() => {
|
||||
if (store.tabMain === "SURVEY") {
|
||||
getSurveyData();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-form greedy @submit.prevent @validation-success="save()">
|
||||
<q-card-section>
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
|
||||
คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:readonly="!status"
|
||||
label="ความคิดเห็น"
|
||||
class="bg-white"
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
v-model="answer1"
|
||||
type="textarea"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row q-mt-md">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
||||
ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:readonly="!status"
|
||||
label="ความคิดเห็น"
|
||||
class="bg-white"
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
v-model="answer2"
|
||||
type="textarea"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="`col-12 row q-mt-md ${classBordered}`">
|
||||
<div class="text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
||||
ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
v-for="(item, index) in 5"
|
||||
:disable="!status"
|
||||
:class="answer3 == item && 'active'"
|
||||
outline
|
||||
color="grey-6"
|
||||
:label="item"
|
||||
@click="answer3 = item"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span>{{ optionText[index].label }}</span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
</div>
|
||||
<div class="col-12 q-mt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
</div>
|
||||
<div class="col-12 row q-pb-sm">
|
||||
<div class="col-12 text-top0 items-center q-pa-md">
|
||||
เกณฑ์การประเมินความคาดหวัง
|
||||
</div>
|
||||
<div class="q-gutter-sm row">
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'1'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'2'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'3'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'4'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'5'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator v-if="status" />
|
||||
|
||||
<q-card-actions align="right" v-if="status">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.text-top2 {
|
||||
font-weight: 500;
|
||||
padding-bottom: 8px;
|
||||
color: rgb(70, 68, 68);
|
||||
}
|
||||
|
||||
.text-top0 {
|
||||
font-weight: 600;
|
||||
padding-bottom: 8px;
|
||||
color: rgb(70, 68, 68);
|
||||
}
|
||||
|
||||
.q-rating__icon {
|
||||
text-shadow: transparent !important;
|
||||
}
|
||||
|
||||
.q-card {
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
}
|
||||
|
||||
.border_custom {
|
||||
border: 2px solid #c10015;
|
||||
border-radius: 5px;
|
||||
color: #c10015;
|
||||
padding: 10px;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #cde6fb !important;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
|
||||
border-left: 1px solid #2196f3 !important;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
</style>
|
||||
475
src/modules/15_probationReport/components/02_ResultPage.vue
Normal file
475
src/modules/15_probationReport/components/02_ResultPage.vue
Normal file
|
|
@ -0,0 +1,475 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const { date2Thai, showLoader, hideLoader } = mixin;
|
||||
const route = useRoute();
|
||||
const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
|
||||
const status = ref<boolean>(false);
|
||||
|
||||
const develop_orientation_score = ref<number>();
|
||||
const develop_self_learning_score = ref<number>();
|
||||
const develop_training_seminar_score = ref<number>();
|
||||
const develop_other_training_score = ref<number>();
|
||||
const develop_total_score = ref<number>();
|
||||
const develop_orientation_percent = ref<number>();
|
||||
const develop_self_learning_percent = ref<number>();
|
||||
const develop_training_seminar_percent = ref<number>();
|
||||
const develop_other_training_percent = ref<number>();
|
||||
const develop_total_percent = ref<number>();
|
||||
const develop_result = ref<number>();
|
||||
const achievement_score = ref<number>();
|
||||
const achievement_score_total = ref<number>();
|
||||
const achievement_percent = ref<number>();
|
||||
const achievement_result = ref<number>();
|
||||
const behavior_score = ref<number>();
|
||||
const behavior_score_total = ref<number>();
|
||||
const behavior_percent = ref<number>();
|
||||
const behavior_result = ref<number>();
|
||||
const sum_score = ref<number>();
|
||||
const sum_percent = ref<number>();
|
||||
const reason = ref<string>();
|
||||
const pass_result = ref<number>();
|
||||
const evaluate_date = ref<Date>();
|
||||
const dev_options = reactive([
|
||||
{ value: 1, label: "พัฒนาครบ 3 ส่วน" },
|
||||
{ value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
|
||||
]);
|
||||
const result_option = reactive([
|
||||
{ name: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ", value: 1 },
|
||||
{ name: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ", value: 2 },
|
||||
{ name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
|
||||
]);
|
||||
|
||||
/** get คะแนน */
|
||||
async function getReportScore() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.summaryReportDetail(assignId.value))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
develop_orientation_score.value = data.develop_orientation_score;
|
||||
develop_self_learning_score.value = data.develop_self_learning_score;
|
||||
develop_training_seminar_score.value =
|
||||
data.develop_training_seminar_score;
|
||||
develop_other_training_score.value = data.develop_other_training_score;
|
||||
develop_total_score.value = data.develop_total_score;
|
||||
develop_orientation_percent.value = data.develop_orientation_percent;
|
||||
develop_self_learning_percent.value = data.develop_self_learning_percent;
|
||||
develop_training_seminar_percent.value =
|
||||
data.develop_training_seminar_percent;
|
||||
develop_other_training_percent.value =
|
||||
data.develop_other_training_percent;
|
||||
develop_total_percent.value = data.develop_total_percent;
|
||||
develop_result.value = data.develop_result == 0 ? 2 : data.develop_result;
|
||||
|
||||
achievement_score.value = data.achievement_score;
|
||||
achievement_score_total.value = data.achievement_score_total;
|
||||
achievement_percent.value = data.achievement_percent;
|
||||
achievement_result.value = data.achievement_result;
|
||||
|
||||
behavior_score.value = data.behavior_score;
|
||||
behavior_score_total.value = data.behavior_score_total;
|
||||
behavior_percent.value = data.behavior_percent;
|
||||
behavior_result.value = data.behavior_result;
|
||||
|
||||
sum_score.value = data.sum_score;
|
||||
sum_percent.value = data.sum_percent;
|
||||
|
||||
reason.value = data.reason;
|
||||
pass_result.value = data.pass_result;
|
||||
evaluate_date.value = data.evaluate_date;
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** get ค่า เมื่อโหลดหน้า */
|
||||
onMounted(() => {
|
||||
getReportScore();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12 q-ma-xs">
|
||||
<div class="toptitle text-dark col-12 row items-center q-gutter-md">
|
||||
<div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
|
||||
</div>
|
||||
<div class="row col-12 q-pt-lg q-px-lg no-margin">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
|
||||
ผลการประเมิน
|
||||
</div>
|
||||
</div>
|
||||
<q-card class="text-top0 col-12">
|
||||
<q-list dense>
|
||||
<q-item dense tag="label" v-ripple>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label style="color: gray">
|
||||
<div class="row text-weight-light">
|
||||
<div class="col">คะแนน</div>
|
||||
<div class="col">ร้อยละ</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption style="color: #464444">
|
||||
<div class="row text-weight-bold">
|
||||
<div class="col">{{ achievement_score }}</div>
|
||||
<div class="col">{{ achievement_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="achievement_result == 1">
|
||||
ผ่าน (สูงกว่าร้อยละ 60)
|
||||
</q-item-section>
|
||||
<q-item-section side v-else>
|
||||
ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
<q-card class="text-top0 col-12">
|
||||
<q-list dense>
|
||||
<q-item dense tag="label" v-ripple>
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
||||
2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label style="color: gray">
|
||||
<div class="row text-weight-light">
|
||||
<div class="col">คะแนน</div>
|
||||
<div class="col">ร้อยละ</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
<q-item-label caption style="color: #464444">
|
||||
<div class="row text-weight-bold">
|
||||
<div class="col">{{ behavior_score }}</div>
|
||||
<div class="col">{{ behavior_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="behavior_result == 1">
|
||||
ผ่าน (สูงกว่าร้อยละ 60)
|
||||
</q-item-section>
|
||||
<q-item-section side v-else>
|
||||
ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
|
||||
<q-card class="text-top0 col-12">
|
||||
<q-list dense>
|
||||
<q-item dense tag="label" v-ripple>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-black"
|
||||
>ผลคะแนนรวมการประเมินการทดลอง</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label style="color: gray">
|
||||
<div class="row text-weight-light">
|
||||
<div class="col">คะแนน</div>
|
||||
<div class="col">ร้อยละ</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
<q-item-label caption style="color: #464444">
|
||||
<div class="row text-weight-bold">
|
||||
<div class="col">{{ sum_score }}</div>
|
||||
<div class="col">{{ sum_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="pass_result == 1">
|
||||
ผ่าน (สูงกว่าร้อยละ 60)
|
||||
</q-item-section>
|
||||
<q-item-section side v-else>
|
||||
ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="row col-12 q-pt-lg q-px-lg no-margin">
|
||||
<div class="col-12 row justify-center">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
||||
การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
|
||||
<div class="row q-gutter-md q-pl-md">
|
||||
<div class="col-8 text-weight-medium">หัวข้อ</div>
|
||||
<div class="col">คะแนน</div>
|
||||
<div class="col">ร้อยละ</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator class="q-my-xs" />
|
||||
<div class="row q-gutter-md align-center q-pl-md">
|
||||
<div class="col-8">1. การปฐมนิเทศ</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_orientation_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_orientation_percent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-my-xs" />
|
||||
<div class="row q-gutter-md align-center q-pl-md">
|
||||
<div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_self_learning_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_self_learning_percent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-my-xs" />
|
||||
<div class="row q-gutter-md align-center q-pl-md">
|
||||
<div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_training_seminar_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_training_seminar_percent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator class="q-my-xs" />
|
||||
<div class="row q-gutter-md align-center q-pl-md">
|
||||
<div class="col-8">
|
||||
4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
|
||||
</div>
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_other_training_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="develop_other_training_percent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-my-xs" />
|
||||
<div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
|
||||
<div class="row q-gutter-md q-pl-sm">
|
||||
<div class="col-8 text-weight-medium">
|
||||
<q-item-label
|
||||
>คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
|
||||
>
|
||||
</div>
|
||||
<div class="col q-pl-md">{{ develop_total_score }}</div>
|
||||
<div class="col q-pl-md">{{ develop_total_percent }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row col-12 q-gutter-lg q-mt-md">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
class="col-12"
|
||||
dense
|
||||
v-model="develop_result"
|
||||
outlined
|
||||
:options="dev_options"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
map-options
|
||||
emit-value
|
||||
:readonly="!status"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-11">
|
||||
<div class="col-12 text-top0 row items-center">
|
||||
เหตุผลอื่น ๆ ในการพิจารณา
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
outlined
|
||||
dense
|
||||
class="col-12"
|
||||
v-model="reason"
|
||||
lazy-rules
|
||||
autogrow
|
||||
hide-bottom-space
|
||||
:row="3"
|
||||
:readonly="!status"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-11">
|
||||
<div class="col-12 row q-col-gutter-md">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
ผลการทดลองปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
class="col-12"
|
||||
dense
|
||||
v-model="pass_result"
|
||||
outlined
|
||||
:options="result_option"
|
||||
option-label="name"
|
||||
option-value="value"
|
||||
map-options
|
||||
emit-value
|
||||
:readonly="!status"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
วัน เดือน ปี ที่ประเมิน
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="evaluate_date"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
:readonly="!status"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
:readonly="!status"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
evaluate_date != null ? date2Thai(evaluate_date) : null
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.text-top2 {
|
||||
font-weight: 500;
|
||||
padding-bottom: 8px;
|
||||
color: rgb(70, 68, 68);
|
||||
}
|
||||
|
||||
.text-top0 {
|
||||
font-weight: 600;
|
||||
padding-bottom: 8px;
|
||||
color: rgb(70, 68, 68);
|
||||
}
|
||||
|
||||
.q-rating__icon {
|
||||
text-shadow: transparent !important;
|
||||
}
|
||||
|
||||
.color-txt {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.q-card {
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
}
|
||||
</style>
|
||||
8
src/modules/15_probationReport/store.ts
Normal file
8
src/modules/15_probationReport/store.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
import type { DataOption } from "@/modules/10_registry/interface/index/Main";
|
||||
|
||||
export const useProbationReport = defineStore("ProbationReportStore", () => {
|
||||
const tabMain = ref<string>("SURVEY");
|
||||
return { tabMain };
|
||||
});
|
||||
|
|
@ -1,99 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { QForm, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useProbationReport } from "@/modules/15_probationReport/store";
|
||||
|
||||
import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
|
||||
import SurveyPage from "@/modules/15_probationReport/components/01_SurveyPage.vue";
|
||||
import ResultPage from "@/modules/15_probationReport/components/02_ResultPage.vue";
|
||||
|
||||
const store = useProbationReport();
|
||||
const router = useRouter();
|
||||
const optionText = ref<ListDataText[]>([
|
||||
{ value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
|
||||
{ value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
|
||||
{ value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
|
||||
{ value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
|
||||
{ value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
|
||||
]);
|
||||
|
||||
const $q = useQuasar();
|
||||
const myForm = ref<QForm>();
|
||||
const mixin = useCounterMixin();
|
||||
|
||||
const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
|
||||
const route = useRoute();
|
||||
|
||||
const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
|
||||
const status = ref<boolean>(true);
|
||||
|
||||
const answer1 = ref<string>("");
|
||||
const answer2 = ref<string>("");
|
||||
const answer3 = ref<number>(0);
|
||||
|
||||
const classBordered = ref<string>("");
|
||||
|
||||
/** ดึง ข้อมูลแบบสำรวจ */
|
||||
async function getSurveyData() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.summaryDetail())
|
||||
.then(async (res: any) => {
|
||||
const data = await res.data.result.data;
|
||||
assignId.value = res.data.result.assignId;
|
||||
if (data !== null) {
|
||||
answer1.value = data.answer1;
|
||||
answer2.value = data.answer2;
|
||||
answer3.value = data.answer3;
|
||||
status.value = false;
|
||||
}
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/** save ข้อมูล */
|
||||
async function save() {
|
||||
if (answer3.value !== 0) {
|
||||
const data = {
|
||||
answer1: answer1.value,
|
||||
answer2: answer2.value,
|
||||
answer3: answer3.value,
|
||||
};
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.summarySurveyDetail(assignId.value), data)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
getSurveyData();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
} else if (answer3.value == 0) {
|
||||
classBordered.value = "border_custom";
|
||||
}
|
||||
}
|
||||
|
||||
/** ถ้าเป็น 0 ใส่ class */
|
||||
watch(answer3, () => {
|
||||
if (answer3.value == 0) {
|
||||
classBordered.value = "border_custom";
|
||||
} else classBordered.value = "";
|
||||
});
|
||||
|
||||
/** get ค่า เมื่อโหลดหน้า */
|
||||
onMounted(() => {
|
||||
getSurveyData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
|
|
@ -113,175 +27,32 @@ onMounted(() => {
|
|||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<q-form greedy @submit.prevent @validation-success="save()">
|
||||
<q-card-section>
|
||||
<div class="col-12 row">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
|
||||
คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:readonly="!status"
|
||||
label="ความคิดเห็น"
|
||||
class="bg-white"
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
v-model="answer1"
|
||||
type="textarea"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-tabs
|
||||
v-model="store.tabMain"
|
||||
inline-label
|
||||
align="left"
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
indicator-color="primary"
|
||||
>
|
||||
<q-tab
|
||||
name="SURVEY"
|
||||
label="แบบสํารวจความคิดเห็น ด้านในแสดงหน้าปัจจุบัน"
|
||||
/>
|
||||
<q-tab name="RESULT" label="ผลการประเมินการ" />
|
||||
</q-tabs>
|
||||
|
||||
<div class="col-12 row q-mt-md">
|
||||
<div class="col-12 text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
||||
ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
:readonly="!status"
|
||||
label="ความคิดเห็น"
|
||||
class="bg-white"
|
||||
dense
|
||||
borderless
|
||||
outlined
|
||||
v-model="answer2"
|
||||
type="textarea"
|
||||
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
|
||||
<div :class="`col-12 row q-mt-md ${classBordered}`">
|
||||
<div class="text-top0 items-center">
|
||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
||||
ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn-group outline>
|
||||
<q-btn
|
||||
v-for="(item, index) in 5"
|
||||
:disable="!status"
|
||||
:class="answer3 == item && 'active'"
|
||||
outline
|
||||
color="grey-6"
|
||||
:label="item"
|
||||
@click="answer3 = item"
|
||||
>
|
||||
<q-tooltip>
|
||||
<div class="text-body2">
|
||||
<span>{{ optionText[index].label }}</span>
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</q-btn-group>
|
||||
</div>
|
||||
<div class="col-12 q-mt-md">
|
||||
<q-separator size="3px" color="grey-2" />
|
||||
</div>
|
||||
<div class="col-12 row q-pb-sm">
|
||||
<div class="col-12 text-top0 items-center q-pa-md">
|
||||
เกณฑ์การประเมินความคาดหวัง
|
||||
</div>
|
||||
<div class="q-gutter-sm row">
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'1'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'2'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">
|
||||
ต่ำกว่าความคาดหวังค่อนข้างมาก
|
||||
</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'3'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'4'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">
|
||||
สูงว่าความคาดหวังค่อนข้างมาก
|
||||
</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
|
||||
</div>
|
||||
<div class="col-12 row items-center">
|
||||
<div class="col-2 row justify-center">
|
||||
<q-btn outline color="grey-6" :label="'5'"> </q-btn>
|
||||
</div>
|
||||
<div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
|
||||
<div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator v-if="status" />
|
||||
<q-tab-panels v-model="store.tabMain" animated>
|
||||
<q-tab-panel name="SURVEY" class="q-pa-none">
|
||||
<SurveyPage
|
||||
/></q-tab-panel>
|
||||
|
||||
<q-card-actions align="right" v-if="status">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
<q-tab-panel name="RESULT"> <ResultPage /> </q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.text-top2 {
|
||||
font-weight: 500;
|
||||
padding-bottom: 8px;
|
||||
color: rgb(70, 68, 68);
|
||||
}
|
||||
|
||||
.text-top0 {
|
||||
font-weight: 600;
|
||||
padding-bottom: 8px;
|
||||
color: rgb(70, 68, 68);
|
||||
}
|
||||
|
||||
.q-rating__icon {
|
||||
text-shadow: transparent !important;
|
||||
}
|
||||
|
||||
.q-card {
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
}
|
||||
|
||||
.border_custom {
|
||||
border: 2px solid #c10015;
|
||||
border-radius: 5px;
|
||||
color: #c10015;
|
||||
padding: 10px;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item:not(:last-child):before {
|
||||
border-right: 1px solid #c4c4c4;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active {
|
||||
color: #2196f3 !important;
|
||||
background-color: #cde6fb !important;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
|
||||
border-left: 1px solid #2196f3 !important;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
|
||||
border: 1px solid #2196f3;
|
||||
background-color: #cde6fb;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue