UI ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น
This commit is contained in:
setthawutttty
parent
f2d1bed257
commit
fb026c0622
3 changed files with 453 additions and 545 deletions
|
|
@ -1,180 +1,368 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useProbationReport } from "@/modules/15_probationReport/store";
|
||||
|
||||
import type { ProbationReportType } from "@/modules/15_probationReport/interface/Main";
|
||||
|
||||
import ResultPage from "@/modules/15_probationReport/components/ResultTemplate.vue";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const store = useProbationReport();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const { date2Thai, showLoader, hideLoader, messageError } = mixin;
|
||||
const route = useRoute();
|
||||
|
||||
const $q = useQuasar();
|
||||
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 },
|
||||
]);
|
||||
|
||||
const formData = ref<ProbationReportType>({
|
||||
develop_orientation_score: 0,
|
||||
develop_self_learning_score: 0,
|
||||
develop_training_seminar_score: 0,
|
||||
develop_other_training_score: 0,
|
||||
develop_total_score: 0,
|
||||
develop_orientation_percent: 0,
|
||||
develop_self_learning_percent: 0,
|
||||
develop_training_seminar_percent: 0,
|
||||
develop_other_training_percent: 0,
|
||||
develop_total_percent: 0,
|
||||
develop_result: 0,
|
||||
achievement_score: 0,
|
||||
achievement_score_total: 0,
|
||||
achievement_percent: 0,
|
||||
achievement_result: 0,
|
||||
behavior_score: 0,
|
||||
behavior_score_total: 0,
|
||||
behavior_percent: 0,
|
||||
behavior_result: 0,
|
||||
sum_score: 0,
|
||||
sum_percent: 0,
|
||||
reason: "",
|
||||
pass_result: 0,
|
||||
evaluate_date: new Date(),
|
||||
});
|
||||
/** get คะแนน */
|
||||
async function getReportScore() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.summaryReportDetail(store.assignId))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formData.value.develop_orientation_score = data.develop_orientation_score;
|
||||
formData.value.develop_self_learning_score =
|
||||
data.develop_self_learning_score;
|
||||
formData.value.develop_training_seminar_score =
|
||||
data.develop_training_seminar_score;
|
||||
formData.value.develop_other_training_score =
|
||||
data.develop_other_training_score;
|
||||
formData.value.develop_total_score = data.develop_total_score;
|
||||
formData.value.develop_orientation_percent =
|
||||
data.develop_orientation_percent;
|
||||
formData.value.develop_self_learning_percent =
|
||||
data.develop_self_learning_percent;
|
||||
formData.value.develop_training_seminar_percent =
|
||||
data.develop_training_seminar_percent;
|
||||
formData.value.develop_other_training_percent =
|
||||
data.develop_other_training_percent;
|
||||
formData.value.develop_total_percent = data.develop_total_percent;
|
||||
formData.value.develop_result =
|
||||
data.develop_result == 0 ? 2 : data.develop_result;
|
||||
formData.value.achievement_score = data.achievement_score;
|
||||
formData.value.achievement_score_total = data.achievement_score_total;
|
||||
formData.value.achievement_percent = data.achievement_percent;
|
||||
formData.value.achievement_result = data.achievement_result;
|
||||
formData.value.behavior_score = data.behavior_score;
|
||||
formData.value.behavior_score_total = data.behavior_score_total;
|
||||
formData.value.behavior_percent = data.behavior_percent;
|
||||
formData.value.behavior_result = data.behavior_result;
|
||||
formData.value.sum_score = data.sum_score;
|
||||
formData.value.sum_percent = data.sum_percent;
|
||||
formData.value.reason = data.reason;
|
||||
formData.value.pass_result = data.pass_result;
|
||||
formData.value.evaluate_date = data.evaluate_date;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ดึง ข้อมูลแบบสำรวจ */
|
||||
async function getAssignId() {
|
||||
await http.get(config.API.summaryDetail()).then(async (res: any) => {
|
||||
store.assignId = res.data.result.assignId;
|
||||
});
|
||||
}
|
||||
|
||||
/** get ค่า เมื่อโหลดหน้า */
|
||||
onMounted(async () => {
|
||||
if (!store.assignId) {
|
||||
await getAssignId();
|
||||
}
|
||||
|
||||
getReportScore();
|
||||
});
|
||||
const formData = defineModel<any>("formData", { required: true });
|
||||
const dev_options = defineModel<any>("dev_options", { required: true });
|
||||
const result_option = defineModel<any>("result_option", { required: true });
|
||||
const status = ref<boolean>(false);
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12">
|
||||
<q-tabs
|
||||
v-model="store.tabSub"
|
||||
inline-label
|
||||
align="left"
|
||||
class="text-grey"
|
||||
active-color="primary"
|
||||
active-bg-color="teal-1"
|
||||
indicator-color="primary"
|
||||
>
|
||||
<q-tab name="RESULT1" label="ผลการประเมินการฯ ครั้งที่ 1" />
|
||||
<q-tab name="RESULT2" label="ผลการประเมินการฯ ครั้งที่ 2" />
|
||||
</q-tabs>
|
||||
<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-separator />
|
||||
<q-item-label caption style="color: #464444">
|
||||
<div class="row text-weight-bold">
|
||||
<div class="col">{{ formData.achievement_score }}</div>
|
||||
<div class="col">{{ formData.achievement_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-tab-panels v-model="store.tabSub" animated>
|
||||
<q-tab-panel name="RESULT1">
|
||||
<ResultPage
|
||||
v-model:form-data="formData"
|
||||
v-model:dev_options="dev_options"
|
||||
v-model:result_option="result_option"
|
||||
<q-item-section side v-if="formData.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">{{ formData.behavior_score }}</div>
|
||||
<div class="col">{{ formData.behavior_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="formData.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">{{ formData.sum_score }}</div>
|
||||
<div class="col">{{ formData.sum_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="formData.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="formData.develop_orientation_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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="formData.develop_self_learning_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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="formData.develop_training_seminar_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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="formData.develop_other_training_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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">{{ formData.develop_total_score }}</div>
|
||||
<div class="col q-pl-md">
|
||||
{{ formData.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="formData.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="formData.reason"
|
||||
lazy-rules
|
||||
autogrow
|
||||
hide-bottom-space
|
||||
:row="3"
|
||||
:readonly="!status"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="RESULT2">
|
||||
<ResultPage
|
||||
v-model:form-data="formData"
|
||||
v-model:dev_options="dev_options"
|
||||
v-model:result_option="result_option"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</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="formData.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="formData.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="
|
||||
formData.evaluate_date != null
|
||||
? date2Thai(formData.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>
|
||||
|
|
|
|||
|
|
@ -1,367 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const formData = defineModel<any>("formData", { required: true });
|
||||
const dev_options = defineModel<any>("dev_options", { required: true });
|
||||
const result_option = defineModel<any>("result_option", { required: true });
|
||||
const status = ref<boolean>(false);
|
||||
</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">{{ formData.achievement_score }}</div>
|
||||
<div class="col">{{ formData.achievement_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="formData.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">{{ formData.behavior_score }}</div>
|
||||
<div class="col">{{ formData.behavior_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="formData.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">{{ formData.sum_score }}</div>
|
||||
<div class="col">{{ formData.sum_percent }}</div>
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side v-if="formData.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="formData.develop_orientation_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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="formData.develop_self_learning_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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="formData.develop_training_seminar_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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="formData.develop_other_training_score"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
type="number"
|
||||
:readonly="!status"
|
||||
v-model="formData.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">{{ formData.develop_total_score }}</div>
|
||||
<div class="col q-pl-md">
|
||||
{{ formData.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="formData.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="formData.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="formData.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="formData.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="
|
||||
formData.evaluate_date != null
|
||||
? date2Thai(formData.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>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { onMounted, ref, reactive, type Ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
|
|
@ -8,7 +8,10 @@ import config from "@/app.config";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProbationReport } from "@/modules/15_probationReport/store";
|
||||
|
||||
import type { DataSurvey } from "@/modules/15_probationReport/interface/Main";
|
||||
import type {
|
||||
DataSurvey,
|
||||
ProbationReportType,
|
||||
} 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";
|
||||
|
|
@ -22,7 +25,47 @@ const { showLoader, hideLoader, messageError } = mixin;
|
|||
|
||||
const dataSurvey = ref<any>(null);
|
||||
const isData = ref<boolean>(true);
|
||||
const dataProbation = ref<string>('')
|
||||
const dataProbation = ref<string>("");
|
||||
const dataResult1 = ref<string>("");
|
||||
const dataResult2 = ref<string>("");
|
||||
|
||||
const formDataResult = ref<ProbationReportType>({
|
||||
develop_orientation_score: 0,
|
||||
develop_self_learning_score: 0,
|
||||
develop_training_seminar_score: 0,
|
||||
develop_other_training_score: 0,
|
||||
develop_total_score: 0,
|
||||
develop_orientation_percent: 0,
|
||||
develop_self_learning_percent: 0,
|
||||
develop_training_seminar_percent: 0,
|
||||
develop_other_training_percent: 0,
|
||||
develop_total_percent: 0,
|
||||
develop_result: 0,
|
||||
achievement_score: 0,
|
||||
achievement_score_total: 0,
|
||||
achievement_percent: 0,
|
||||
achievement_result: 0,
|
||||
behavior_score: 0,
|
||||
behavior_score_total: 0,
|
||||
behavior_percent: 0,
|
||||
behavior_result: 0,
|
||||
sum_score: 0,
|
||||
sum_percent: 0,
|
||||
reason: "",
|
||||
pass_result: 0,
|
||||
evaluate_date: new 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 },
|
||||
]);
|
||||
|
||||
/** ดึง ข้อมูลแบบสำรวจ */
|
||||
async function getSurveyData() {
|
||||
|
|
@ -35,7 +78,26 @@ async function getSurveyData() {
|
|||
isData.value = true;
|
||||
store.assignId = res.data.result.assignId;
|
||||
if (res.data.result.assignId) {
|
||||
await getSalary(res.data.result.assignId);
|
||||
await Promise.all([
|
||||
getSalary(
|
||||
res.data.result.assignId,
|
||||
"ทดลองงาน",
|
||||
"มอบหมายงาน",
|
||||
dataProbation
|
||||
),
|
||||
getSalary(
|
||||
res.data.result.assignId,
|
||||
"ทดลองงาน",
|
||||
"รายงานผลครั้งที่ 1",
|
||||
dataResult1
|
||||
),
|
||||
getSalary(
|
||||
res.data.result.assignId,
|
||||
"ทดลองงาน",
|
||||
"รายงานผลครั้งที่ 2",
|
||||
dataResult2
|
||||
),
|
||||
]);
|
||||
}
|
||||
if (data !== null) {
|
||||
dataSurvey.value = data;
|
||||
|
|
@ -49,11 +111,16 @@ async function getSurveyData() {
|
|||
});
|
||||
}
|
||||
|
||||
async function getSalary(id: string) {
|
||||
async function getSalary(
|
||||
id: string,
|
||||
name: string,
|
||||
group: string,
|
||||
val: Ref<string>
|
||||
) {
|
||||
await http
|
||||
.get(config.API.developmentSalaryFile("ทดลองงาน", "มอบหมายงาน", id))
|
||||
.get(config.API.developmentSalaryFile(name, group, id))
|
||||
.then((res) => {
|
||||
dataProbation.value = res.data.fileName
|
||||
val.value = res.data.fileName;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
|
|
@ -102,8 +169,17 @@ onMounted(async () => {
|
|||
indicator-color="primary"
|
||||
>
|
||||
<q-tab name="SURVEY" label="แบบสํารวจความคิดเห็น" />
|
||||
<q-tab name="RESULT" label="ผลการประเมินการฯ" />
|
||||
<q-tab v-if="dataProbation" name="ASSIGN" label="แบบมอบหมายงานฯ" />
|
||||
<q-tab
|
||||
v-if="dataResult1"
|
||||
name="RESULT1"
|
||||
label="ผลการประเมินการฯ ครั้งที่ 1"
|
||||
/>
|
||||
<q-tab
|
||||
v-if="dataResult2"
|
||||
name="RESULT2"
|
||||
label="ผลการประเมินการฯ ครั้งที่ 2"
|
||||
/>
|
||||
<q-tab v-if="dataProbation" name="ASSIGN" label="แบบมอบหมายงานฯ" />
|
||||
</q-tabs>
|
||||
|
||||
<q-separator />
|
||||
|
|
@ -116,8 +192,19 @@ onMounted(async () => {
|
|||
:get-survey-data="getSurveyData"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="RESULT" class="q-pa-none">
|
||||
<ResultPage />
|
||||
<q-tab-panel name="RESULT1" class="q-pa-sm">
|
||||
<ResultPage
|
||||
v-model:form-data="formDataResult"
|
||||
v-model:dev_options="dev_options"
|
||||
v-model:result_option="result_option"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="RESULT2" class="q-pa-sm">
|
||||
<ResultPage
|
||||
v-model:form-data="formDataResult"
|
||||
v-model:dev_options="dev_options"
|
||||
v-model:result_option="result_option"
|
||||
/>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="ASSIGN">
|
||||
<AssignPage />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue