269 lines
9.3 KiB
Vue
269 lines
9.3 KiB
Vue
<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;
|
|
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);
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** 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>
|