รายละเอียดงานที่ได้รับมอบหมาย (ส่วนนึง)
This commit is contained in:
STW_TTTY\stwtt
parent
a05b234339
commit
244524c0ca
27 changed files with 5092 additions and 8 deletions
262
src/modules/11_probation/component/08_SurveyComment.vue
Normal file
262
src/modules/11_probation/component/08_SurveyComment.vue
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue