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

UI ผลการทดลองปฏิบัติหน้าที่ราชการและแบบสำรวจความคิดเห็น

Browse source
This commit is contained in:
setthawutttty 2025-01-20 18:07:07 +07:00
parent 621104c4a2
commit 9c27d47092
10 changed files with 3695 additions and 417 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/api/probation/api.probation.ts
View file

@ -57,4 +57,6 @@ export default {
`${reportProbation}/14/${type}/${id}`,
kpiCapacity,
appointMainList: (id: string) => `${probation}/appoint/list/${id}`,
};

1
src/interface/Main.ts
View file

@ -8,6 +8,7 @@ interface ProfileData {
posTypeName: string;
posLevelName: string;
posNo: string;
profileId: string;
}
interface InformationData {

62
src/modules/15_probationReport/components/01_SurveyPage.vue
View file

@ -10,6 +10,7 @@ import config from "@/app.config";
import { useProbationReport } from "@/modules/15_probationReport/store";
import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
import type { DataSurvey } from "@/modules/15_probationReport/interface/Main";
const store = useProbationReport();
const router = useRouter();
@ -28,8 +29,13 @@ const mixin = useCounterMixin();
const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
const route = useRoute();
const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
const props = defineProps({
dataSurvey: Object,
getSurveyData: Function,
});
const isData = defineModel<boolean>("isData", { required: true });
const dataSurvey = defineModel<any>("dataSurvey", { required: true });
const status = ref<boolean>(true);
const answer1 = ref<string>("");
@ -38,32 +44,6 @@ const answer3 = ref<number>(0);
const classBordered = ref<string>("");
/** ดึง ข้อมูลแบบสำรวจ */
async function getSurveyData() {
isData.value = true;
showLoader();
await http
.get(config.API.summaryDetail())
.then(async (res: any) => {
const data = await res.data.result.data;
isData.value = true;
assignId.value = res.data.result.assignId;
store.assignId = 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);
isData.value = false;
hideLoader();
});
}
/** save ข้อมูล */
async function save() {
if (answer3.value !== 0) {
@ -75,10 +55,10 @@ async function save() {
dialogConfirm($q, async () => {
showLoader();
await http
.post(config.API.summarySurveyDetail(assignId.value), data)
.post(config.API.summarySurveyDetail(store.assignId), data)
.then((res: any) => {
success($q, "บันทึกสำเร็จ");
getSurveyData();
props.getSurveyData?.();
})
.catch((e: any) => {
messageError($q, e);
@ -99,11 +79,31 @@ watch(answer3, () => {
} else classBordered.value = "";
});
watch(
() => dataSurvey.value,
() => {
if (store.tabMain === "SURVEY") {
if (dataSurvey.value !== null) {
answer1.value = dataSurvey.value.answer1;
answer2.value = dataSurvey.value.answer2;
answer3.value = dataSurvey.value.answer3;
status.value = false;
}
}
}
);
/** get ค่า เมื่อโหลดหน้า */
onMounted(() => {
if (store.tabMain === "SURVEY") {
getSurveyData();
}
if (dataSurvey.value !== null) {
answer1.value = dataSurvey.value.answer1;
answer2.value = dataSurvey.value.answer2;
answer3.value = dataSurvey.value.answer3;
status.value = false;
}
}
});
</script>
<template>

462
src/modules/15_probationReport/components/02_ResultPage.vue
View file

@ -7,12 +7,15 @@ 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, showLoader, hideLoader, messageError } = mixin;
const route = useRoute();
const status = ref<boolean>(false);
const $q = useQuasar();
const develop_orientation_score = ref<number>();
@ -49,6 +52,32 @@ const result_option = reactive([
{ 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();
@ -56,37 +85,38 @@ async function getReportScore() {
.get(config.API.summaryReportDetail(store.assignId))
.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 =
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;
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 =
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;
develop_other_training_percent.value =
formData.value.develop_other_training_percent =
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;
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);
@ -113,354 +143,38 @@ onMounted(async () => {
});
</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>
<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>
<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-separator />
<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"
<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"
/>
</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>
</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>
</template>
<style lang="scss" scoped>

2948
src/modules/15_probationReport/components/03_AssignPage.vue Normal file
View file

File diff suppressed because it is too large Load diff

367
src/modules/15_probationReport/components/ResultTemplate.vue Normal file
View file

@ -0,0 +1,367 @@
<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>

85
src/modules/15_probationReport/interface/Main.ts
View file

@ -1,8 +1,81 @@
interface ListDataText {
value: string;
label: string;
}
value: string;
label: string;
}
export type{
ListDataText
}
interface DataSurvey {
answer1: string;
answer2: string;
answer3: number;
status: boolean;
}
interface TabPermissions {
isEdit: boolean;
isView: boolean;
}
interface DataPermissions {
tab1: TabPermissions;
tab2: TabPermissions;
tab3: TabPermissions;
tab4: TabPermissions;
tab5: TabPermissions;
tab6: TabPermissions;
tab7: TabPermissions;
}
interface AppointTopic {
id: string;
appointId: string;
profileId: string;
name: string;
position: string;
positionType: string;
positionLevel: string;
role: string;
}
interface AppointTopicMain {
id: string;
profileId: string;
topic: string;
commandNo: string;
status: string;
directors: AppointTopic[];
}
interface ProbationReportType {
develop_orientation_score: number;
develop_self_learning_score: number;
develop_training_seminar_score: number;
develop_other_training_score: number;
develop_total_score: number;
develop_orientation_percent: number;
develop_self_learning_percent: number;
develop_training_seminar_percent: number;
develop_other_training_percent: number;
develop_total_percent: number;
develop_result: number;
achievement_score: number;
achievement_score_total: number;
achievement_percent: number;
achievement_result: number;
behavior_score: number;
behavior_score_total: number;
behavior_percent: number;
behavior_result: number;
sum_score: number;
sum_percent: number;
reason: string;
pass_result: number;
evaluate_date: Date;
}
export type {
ListDataText,
DataSurvey,
DataPermissions,
AppointTopicMain,
AppointTopic,
ProbationReportType,
};

116
src/modules/15_probationReport/store.ts
View file

@ -1,9 +1,121 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import type { DataOption } from "@/modules/10_registry/interface/index/Main";
import type { DataPermissions } from "@/modules/15_probationReport/interface/Main";
export const useProbationReport = defineStore("ProbationReportStore", () => {
const tabMain = ref<string>("SURVEY");
const tabSub = ref<string>("RESULT1");
const assignId = ref<string>("");
return { tabMain, assignId };
const dataPermissions = ref<DataPermissions>();
const assign = ref<any>([]);
const evaluate = ref<any>([]);
const tabs = ref<any>([]);
const mainTab = ref<string>("");
const checkLoad = ref<boolean>(false);
const assignOutput = ref<any>([]);
const director = ref<any>([]);
const person = ref<any>([]);
const fecthdataAssign = async (data: any) => {
checkLoad.value = data.evaluate.length == 0 ? true : false;
assign.value = await data.assign;
evaluate.value = await data.evaluate;
tabs.value = await data.evaluate;
};
const fecthAssignoutput = (data: any) => {
assignOutput.value = data.assign_output;
director.value = data.director;
person.value = data.person;
};
const ratingColors = ref<string[]>([
"light-blue-3",
"light-blue-6",
"blue",
"blue-9",
"blue-10",
]);
const orderId = ref<string>("");
const stepOrder = ref<number>(2);
const setOrderId = (val: string) => (orderId.value = val);
const setStepOrder = (val: number) => (stepOrder.value = val);
const behavior_no1 = [
{ id: "1", label: "ให้บริการประชาชน หรือผู้รับบริการด้วยอัธยาศัยดี" },
{ id: "2", label: "มีความรับผิดชอบในการปฏิบัติงาน" },
{
id: "3",
label:
"ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
},
{
id: "4",
label: "ตั้งใจปฏิบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
},
];
const behavior_no2 = [
{
id: "1",
label: "อุทิศตน และเสียสละเวลาในการปฏิบัติงานอย่างเต็มกำลังความสามารถ",
},
{
id: "2",
label: "มีจิตสำนึกที่ดี ปฏิบัติงานด้วยความซื่อสัตย์ สุจริต",
},
{
id: "3",
label:
"ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
},
];
const behavior_no3 = [
{ id: "1", label: "มีความรับผิดชอบในการรักษาเวลาทำงาน" },
{
id: "2",
label: "แต่งกายในการปฏิบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
},
{
id: "3",
label:
"ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
},
{
id: "4",
label:
"ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติ และศักดิ์ศรีของความเป็นข้าราชการ",
},
{
id: "5",
label: "ปฏิบัติหน้าที่อย่างตรงไปตรงมาโดยยึดหลักจรรยาบรรณวิชาชีพ",
},
];
return {
tabMain,
assignId,
tabSub,
fecthdataAssign,
fecthAssignoutput,
assign,
evaluate,
tabs,
assignOutput,
director,
person,
mainTab,
ratingColors,
orderId,
stepOrder,
setOrderId,
setStepOrder,
behavior_no1,
behavior_no2,
behavior_no3,
dataPermissions,
checkLoad,
};
});

65
src/modules/15_probationReport/views/main.vue
View file

@ -1,19 +1,68 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
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 SurveyPage from "@/modules/15_probationReport/components/01_SurveyPage.vue";
import ResultPage from "@/modules/15_probationReport/components/02_ResultPage.vue";
import AssignPage from "@/modules/15_probationReport/components/03_AssignPage.vue";
const $q = useQuasar();
const store = useProbationReport();
const router = useRouter();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
const dataSurvey = ref<any>(null);
const isData = ref<boolean>(true);
const dataProbation = ref<string>('')
/** ดึง ข้อมูลแบบสำรวจ */
async function getSurveyData() {
isData.value = true;
showLoader();
await http
.get(config.API.summaryDetail())
.then(async (res: any) => {
const data = await res.data.result.data;
isData.value = true;
store.assignId = res.data.result.assignId;
if (res.data.result.assignId) {
await getSalary(res.data.result.assignId);
}
if (data !== null) {
dataSurvey.value = data;
}
hideLoader();
})
.catch((e) => {
// messageError($q, e);
isData.value = false;
hideLoader();
});
}
async function getSalary(id: string) {
await http
.get(config.API.developmentSalaryFile("ทดลองงาน", "มอบหมายงาน", id))
.then((res) => {
dataProbation.value = res.data.fileName
})
.catch((e) => {
messageError($q, e);
});
}
onMounted(async () => {
await getSurveyData();
});
</script>
<template>
<div class="col-12 row justify-center">
@ -54,17 +103,25 @@ const isData = ref<boolean>(true);
>
<q-tab name="SURVEY" label="แบบสํารวจความคิดเห็น" />
<q-tab name="RESULT" label="ผลการประเมินการฯ" />
<q-tab v-if="dataProbation" name="ASSIGN" label="แบบมอบหมายงานฯ" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="store.tabMain" animated>
<q-tab-panel name="SURVEY" class="q-pa-none">
<SurveyPage v-model:is-data="isData" />
<SurveyPage
v-model:is-data="isData"
v-model:data-survey="dataSurvey"
:get-survey-data="getSurveyData"
/>
</q-tab-panel>
<q-tab-panel name="RESULT">
<q-tab-panel name="RESULT" class="q-pa-none">
<ResultPage />
</q-tab-panel>
<q-tab-panel name="ASSIGN">
<AssignPage />
</q-tab-panel>
</q-tab-panels>
</q-card>
</div>

4
src/stores/data.ts
View file

@ -9,12 +9,14 @@ import { useCounterMixin } from "./mixin";
import type { ProfileData } from "@/interface/Main";
export const useDataStore = defineStore("dataMain", () => {
const dataProfile = ref<any>()
const storeRegistry = useRegistryInFormationStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, findPosMasterNo } = mixin;
// ref() คือการประกาศ state เหมือน vuex
const formData = reactive<ProfileData>({
profileId: "",
rank: "",
prefix: "",
firstName: "",
@ -94,6 +96,7 @@ export const useDataStore = defineStore("dataMain", () => {
const data = await dataPerson;
isProbation.value = data.isProbation;
formData.profileId = data.profileId;
formData.rank = data.rank;
formData.prefix = data.prefix;
formData.firstName = data.firstName;
@ -143,6 +146,7 @@ export const useDataStore = defineStore("dataMain", () => {
formData,
officerLink,
getProFileType,
dataProfile
};
});