validate แบบสํารวจ
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
1ecb2e556b
commit
bb1997e1b0
1 changed files with 117 additions and 92 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from "vue";
|
import { ref, onMounted, watch } from "vue";
|
||||||
import { QForm, useQuasar } from "quasar";
|
import { QForm, useQuasar } from "quasar";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
|
@ -45,6 +45,10 @@ const result_option = ref<any>([
|
||||||
const note = ref<string>("");
|
const note = ref<string>("");
|
||||||
const date = ref<Date>(new Date());
|
const date = ref<Date>(new Date());
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getSurveyData();
|
||||||
|
});
|
||||||
|
|
||||||
const saveEdit = (id: string) => {
|
const saveEdit = (id: string) => {
|
||||||
dialogConfirm($q, () => console.log("save"));
|
dialogConfirm($q, () => console.log("save"));
|
||||||
};
|
};
|
||||||
|
|
@ -60,114 +64,129 @@ const getSurveyData = async () => {
|
||||||
.get(config.API.summarySurveyDetail(assignId.value))
|
.get(config.API.summarySurveyDetail(assignId.value))
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
const data = res.data.data;
|
const data = res.data.data;
|
||||||
answer1.value = data.answer1,
|
if (data !== null) {
|
||||||
answer2.value = data.answer2,
|
answer1.value = data.answer1;
|
||||||
answer3.value = data.answer3
|
answer2.value = data.answer2;
|
||||||
status.value = false
|
answer3.value = data.answer3;
|
||||||
})
|
}
|
||||||
|
status.value = false;
|
||||||
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const save = () => {
|
const classBordered = ref<string>("");
|
||||||
const data = {
|
const save = async () => {
|
||||||
answer1: answer1.value,
|
await myForm.value!.validate().then((result: boolean) => {
|
||||||
answer2: answer2.value,
|
if (result && answer3.value !== 0) {
|
||||||
answer3: answer3.value,
|
const data = {
|
||||||
};
|
answer1: answer1.value,
|
||||||
dialogConfirm($q, async () => {
|
answer2: answer2.value,
|
||||||
await http
|
answer3: answer3.value,
|
||||||
.post(config.API.summarySurveyDetail(assignId.value), data)
|
};
|
||||||
.then((res: any) => {
|
dialogConfirm($q, async () => {
|
||||||
success($q, "บันทึกสำเร็จ");
|
await http
|
||||||
})
|
.post(config.API.summarySurveyDetail(assignId.value), data)
|
||||||
.catch((e: any) => {
|
.then((res: any) => {
|
||||||
messageError($q, e);
|
success($q, "บันทึกสำเร็จ");
|
||||||
|
})
|
||||||
|
.catch((e: any) => {
|
||||||
|
messageError($q, e);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
} else if (answer3.value == 0) {
|
||||||
|
classBordered.value = "border_custom";
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
watch(answer3, () => {
|
||||||
getSurveyData();
|
if (answer3.value == 0) {
|
||||||
|
classBordered.value = "border_custom";
|
||||||
|
} else classBordered.value = "";
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="row col-12 q-ma-xs">
|
<div class="row col-12 q-ma-xs">
|
||||||
<div class="toptitle text-dark col-12 row items-center q-gutter-md">
|
<q-form ref="myForm" class="q-pa-md">
|
||||||
<div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
|
<div class="toptitle text-dark col-12 row items-center q-gutter-md">
|
||||||
</div>
|
<div>แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ</div>
|
||||||
<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>
|
||||||
<div class="col-12">
|
<div class="col-12 row">
|
||||||
<q-input
|
<div class="col-12 text-top0 items-center">
|
||||||
:disable="!status"
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
|
||||||
label="ความคิดเห็น"
|
คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
|
||||||
class="bg-white"
|
</div>
|
||||||
dense
|
<div class="col-12">
|
||||||
borderless
|
<q-input
|
||||||
outlined
|
:disable="!status"
|
||||||
v-model="answer1"
|
label="ความคิดเห็น"
|
||||||
type="textarea"
|
class="bg-white"
|
||||||
/>
|
dense
|
||||||
|
borderless
|
||||||
|
outlined
|
||||||
|
v-model="answer1"
|
||||||
|
type="textarea"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-12 row q-mt-md">
|
||||||
<div class="col-12 row q-mt-md">
|
<div class="col-12 text-top0 items-center">
|
||||||
<div class="col-12 text-top0 items-center">
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
||||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
|
ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
|
||||||
ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-input
|
||||||
|
:disable="!status"
|
||||||
|
label="ความคิดเห็น"
|
||||||
|
class="bg-white"
|
||||||
|
dense
|
||||||
|
borderless
|
||||||
|
outlined
|
||||||
|
v-model="answer2"
|
||||||
|
type="textarea"
|
||||||
|
:rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
|
||||||
<q-input
|
|
||||||
:disable="!status"
|
|
||||||
label="ความคิดเห็น"
|
|
||||||
class="bg-white"
|
|
||||||
dense
|
|
||||||
borderless
|
|
||||||
outlined
|
|
||||||
v-model="answer2"
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 row q-mt-md">
|
<div :class="`col-12 row q-mt-md ${classBordered}`">
|
||||||
<div class="text-top0 items-center">
|
<div class="text-top0 items-center">
|
||||||
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
||||||
ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
|
ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
|
||||||
|
</div>
|
||||||
|
<q-space />
|
||||||
|
<q-rating
|
||||||
|
:disable="!status"
|
||||||
|
v-model="answer3"
|
||||||
|
max="5"
|
||||||
|
size="sm"
|
||||||
|
color="grey"
|
||||||
|
:color-selected="ratingColors"
|
||||||
|
label="ระดับการประเมินพฤติกรรม"
|
||||||
|
>
|
||||||
|
<template v-slot:tip-1>
|
||||||
|
<q-tooltip>ไม่พึงพอใจ</q-tooltip>
|
||||||
|
</template>
|
||||||
|
<template v-slot:tip-2>
|
||||||
|
<q-tooltip>ค่อนข้างพึงพอใจ</q-tooltip>
|
||||||
|
</template>
|
||||||
|
<template v-slot:tip-3>
|
||||||
|
<q-tooltip>พึงพอใจ</q-tooltip>
|
||||||
|
</template>
|
||||||
|
<template v-slot:tip-4>
|
||||||
|
<q-tooltip>พึงพอใจมาก</q-tooltip>
|
||||||
|
</template>
|
||||||
|
<template v-slot:tip-5>
|
||||||
|
<q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
|
||||||
|
</template>
|
||||||
|
</q-rating>
|
||||||
</div>
|
</div>
|
||||||
<q-space />
|
<div class="col-12 q-my-md">
|
||||||
<q-rating
|
<q-separator size="3px" color="grey-2" />
|
||||||
:disable="!status"
|
</div>
|
||||||
v-model="answer3"
|
</q-form>
|
||||||
max="5"
|
|
||||||
size="sm"
|
|
||||||
color="grey"
|
|
||||||
:color-selected="ratingColors"
|
|
||||||
label="ระดับการประเมินพฤติกรรม"
|
|
||||||
>
|
|
||||||
<template v-slot:tip-1>
|
|
||||||
<q-tooltip>ไม่พึงพอใจ</q-tooltip>
|
|
||||||
</template>
|
|
||||||
<template v-slot:tip-2>
|
|
||||||
<q-tooltip>ค่อนข้างพึงพอใจ</q-tooltip>
|
|
||||||
</template>
|
|
||||||
<template v-slot:tip-3>
|
|
||||||
<q-tooltip>พึงพอใจ</q-tooltip>
|
|
||||||
</template>
|
|
||||||
<template v-slot:tip-4>
|
|
||||||
<q-tooltip>พึงพอใจมาก</q-tooltip>
|
|
||||||
</template>
|
|
||||||
<template v-slot:tip-5>
|
|
||||||
<q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
|
|
||||||
</template>
|
|
||||||
</q-rating>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 q-my-md">
|
|
||||||
<q-separator size="3px" color="grey-2" />
|
|
||||||
</div>
|
|
||||||
<!-- <Footer /> -->
|
<!-- <Footer /> -->
|
||||||
<div class="row col-12">
|
<div class="row col-12">
|
||||||
<q-space />
|
<q-space />
|
||||||
|
|
@ -196,4 +215,10 @@ onMounted(() => {
|
||||||
.q-card {
|
.q-card {
|
||||||
box-shadow: 0px 0px 0px 0px !important;
|
box-shadow: 0px 0px 0px 0px !important;
|
||||||
}
|
}
|
||||||
|
.border_custom {
|
||||||
|
border: 2px solid #c10015;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #c10015;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue