263 lines
8.6 KiB
Vue
263 lines
8.6 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
import { onMounted, ref, watch } from "vue";
|
||
|
|
import { useRoute, useRouter } from "vue-router";
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
|
||
|
|
import Criterion from "@/modules/11_probation/component/Criterion.vue";
|
||
|
|
import http from "@/plugins/http";
|
||
|
|
import config from "@/app.config";
|
||
|
|
import { useProbationStore } from "@/modules/11_probation/store/probation";
|
||
|
|
|
||
|
|
const borderCustom = ref<boolean>(false);
|
||
|
|
const store = useProbationStore();
|
||
|
|
const router = useRouter();
|
||
|
|
const route = useRoute();
|
||
|
|
|
||
|
|
const status = ref<boolean>(false);
|
||
|
|
const mixin = useCounterMixin();
|
||
|
|
const { showLoader, hideLoader, messageError, dialogConfirm,success } = mixin;
|
||
|
|
const id = ref<string>(route.params.id as string);
|
||
|
|
const $q = useQuasar();
|
||
|
|
const mode = ref<any>($q.screen.gt.xs);
|
||
|
|
|
||
|
|
const answer1 = ref<string>("");
|
||
|
|
const answer2 = ref<string>("");
|
||
|
|
const answer3 = ref<number>(0);
|
||
|
|
|
||
|
|
function onSubmit() {
|
||
|
|
if (answer3.value == 0) {
|
||
|
|
borderCustom.value = true;
|
||
|
|
} else {
|
||
|
|
dialogConfirm($q, () => {
|
||
|
|
http
|
||
|
|
.post(config.API.summarySurveyDetail(id.value), {
|
||
|
|
answer1: answer1.value,
|
||
|
|
answer2: answer2.value,
|
||
|
|
answer3: answer3.value,
|
||
|
|
})
|
||
|
|
.then((res) => {
|
||
|
|
success($q, "บันทึกสำเร็จ");
|
||
|
|
getData()
|
||
|
|
}).catch((e)=>{
|
||
|
|
messageError($q,e)
|
||
|
|
}).finally(()=>{
|
||
|
|
|
||
|
|
})
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getData() {
|
||
|
|
showLoader();
|
||
|
|
http
|
||
|
|
.get(config.API.summarySurveyDetail(id.value))
|
||
|
|
.then((res) => {
|
||
|
|
const data = res.data.data;
|
||
|
|
if (data !== null) {
|
||
|
|
answer1.value = data.answer1;
|
||
|
|
answer2.value = data.answer2;
|
||
|
|
answer3.value = data.answer3;
|
||
|
|
status.value = true;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((e) => {
|
||
|
|
messageError($q, e);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
hideLoader();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/** ถ้าเป็น 0 ใส่ class */
|
||
|
|
watch(answer3, () => {
|
||
|
|
if (answer3.value !== 0) {
|
||
|
|
borderCustom.value = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
borderCustom.value = false;
|
||
|
|
getData();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div v-if="!$q.screen.gt.xs" class="col-xs-12 col-sm-12 col-md-11">
|
||
|
|
<div class="toptitle text-white col-12 row items-center">
|
||
|
|
<q-btn
|
||
|
|
icon="mdi-arrow-left"
|
||
|
|
unelevated
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
flat
|
||
|
|
color="primary"
|
||
|
|
class="q-mr-sm"
|
||
|
|
@click="router.go(-1)"
|
||
|
|
/>
|
||
|
|
<div>แบบสํารวจความคิดเห็น</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div :class="`row q-my-sm ${$q.screen.gt.xs ? '' : 'mobileClass'}`">
|
||
|
|
<q-form
|
||
|
|
greedy
|
||
|
|
@submit.prevent
|
||
|
|
@validation-success="onSubmit"
|
||
|
|
class="full-width"
|
||
|
|
>
|
||
|
|
<div class="row q-col-gutter-sm">
|
||
|
|
<div class="col-12">
|
||
|
|
<span class="toptitle text-dark"
|
||
|
|
>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 text-weight-medium">
|
||
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
|
||
|
|
คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<q-input
|
||
|
|
:disable="status"
|
||
|
|
label="ความคิดเห็น"
|
||
|
|
bg-color="white"
|
||
|
|
dense
|
||
|
|
borderless
|
||
|
|
outlined
|
||
|
|
v-model="answer1"
|
||
|
|
type="textarea"
|
||
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 text-weight-medium">
|
||
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
||
|
|
ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<q-input
|
||
|
|
:disable="status"
|
||
|
|
label="ความคิดเห็น"
|
||
|
|
bg-color="white"
|
||
|
|
dense
|
||
|
|
borderless
|
||
|
|
outlined
|
||
|
|
v-model="answer2"
|
||
|
|
type="textarea"
|
||
|
|
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-if="$q.screen.gt.xs"
|
||
|
|
:class="`col-12 row text-weight-medium items-center ${
|
||
|
|
borderCustom ? 'border_custom' : ''
|
||
|
|
}`"
|
||
|
|
>
|
||
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
||
|
|
ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
|
||
|
|
<q-space />
|
||
|
|
|
||
|
|
<q-rating
|
||
|
|
:disable="status"
|
||
|
|
v-model="answer3"
|
||
|
|
max="5"
|
||
|
|
size="sm"
|
||
|
|
color="grey"
|
||
|
|
:color-selected="store.ratingColors"
|
||
|
|
label="ระดับการประเมินพฤติกรรม"
|
||
|
|
>
|
||
|
|
<template v-slot:tip-1>
|
||
|
|
<q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-2>
|
||
|
|
<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-3>
|
||
|
|
<q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-4>
|
||
|
|
<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-5>
|
||
|
|
<q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
</q-rating>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else class="col-12 text-weight-medium">
|
||
|
|
<div class="col-12 row no-wrap text-weight-medium">
|
||
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
||
|
|
ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
:class="`col-12 text-center q-pa-sm q-mt-sm ${
|
||
|
|
borderCustom ? 'border_customMR' : 'border_customM'
|
||
|
|
}`"
|
||
|
|
>
|
||
|
|
<q-rating
|
||
|
|
:disable="status"
|
||
|
|
v-model="answer3"
|
||
|
|
max="5"
|
||
|
|
size="sm"
|
||
|
|
color="grey"
|
||
|
|
:color-selected="store.ratingColors"
|
||
|
|
label="ระดับการประเมินพฤติกรรม"
|
||
|
|
>
|
||
|
|
<template v-slot:tip-1>
|
||
|
|
<q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-2>
|
||
|
|
<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-3>
|
||
|
|
<q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-4>
|
||
|
|
<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
<template v-slot:tip-5>
|
||
|
|
<q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
|
||
|
|
</template>
|
||
|
|
</q-rating>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<q-separator size="3px" color="grey-2" />
|
||
|
|
</div>
|
||
|
|
<Criterion />
|
||
|
|
<div class="col-12" align="right">
|
||
|
|
<q-btn label="บันทึก" color="secondary" type="submit" v-if="!status"
|
||
|
|
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</q-form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style scoped>
|
||
|
|
.mobileClass {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border_custom {
|
||
|
|
border: 2px solid #c10015;
|
||
|
|
border-radius: 5px;
|
||
|
|
color: #c10015;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border_customM {
|
||
|
|
border: 1px solid #ededed;
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.border_customMR {
|
||
|
|
border: 2px solid #c10015;
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
</style>
|