UI แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ
This commit is contained in:
setthawutttty
parent
da958b9956
commit
149831f897
7 changed files with 341 additions and 3 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import router from "@/router";
|
||||
|
|
@ -7,6 +7,7 @@ import config from "@/app.config";
|
|||
import http from "@/plugins/http";
|
||||
import { tokenParsed } from "@/plugins/auth";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
|
||||
import type {
|
||||
InboxDetail,
|
||||
|
|
@ -18,6 +19,7 @@ import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
|
|||
import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const dataStore = useDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
||||
|
||||
|
|
@ -25,6 +27,13 @@ const fullname = ref<string>(""); // ชื่อผู้ใช้
|
|||
const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
|
||||
const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
|
||||
// รายการเมนูหลักของระบบ
|
||||
|
||||
const filteredItems = computed(() =>
|
||||
items.value.filter(
|
||||
(item) => item.title !== "แบบสำรวจความคิดเห็น" || dataStore.isProbation
|
||||
)
|
||||
);
|
||||
|
||||
const items = ref<MenuMainList[]>([
|
||||
{
|
||||
icon: "mdi-account-group-outline",
|
||||
|
|
@ -114,6 +123,14 @@ const items = ref<MenuMainList[]>([
|
|||
path: "/IDP",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
icon: "mdi-poll",
|
||||
title: "แบบสำรวจความคิดเห็น",
|
||||
sub: "แบบสำรวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ",
|
||||
color: "yellow-3",
|
||||
path: "/probation-report",
|
||||
active: false,
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
|
|
@ -254,7 +271,7 @@ onMounted(async () => {
|
|||
<div class="row justify-start q-col-gutter-md">
|
||||
<div
|
||||
class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row"
|
||||
v-for="(item, j) in items"
|
||||
v-for="(item, j) in filteredItems"
|
||||
:key="j"
|
||||
>
|
||||
<q-card bordered @click="goToPage(item.path)" class="noactive col-12">
|
||||
|
|
|
|||
8
src/modules/15_probationReport/interface/Main.ts
Normal file
8
src/modules/15_probationReport/interface/Main.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
interface ListDataText {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export type{
|
||||
ListDataText
|
||||
}
|
||||
18
src/modules/15_probationReport/router.ts
Normal file
18
src/modules/15_probationReport/router.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* Router การพัฒนา
|
||||
*/
|
||||
|
||||
const probationReportMain = () =>
|
||||
import("@/modules/15_probationReport/views/main.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
path: "/probation-report",
|
||||
name: "probation-reportMain",
|
||||
component: probationReportMain,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [1],
|
||||
},
|
||||
},
|
||||
];
|
||||
286
src/modules/15_probationReport/views/main.vue
Normal file
286
src/modules/15_probationReport/views/main.vue
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, 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 type { ListDataText } from "@/modules/15_probationReport/interface/Main";
|
||||
|
||||
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 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.summarySurveyDetail(assignId.value))
|
||||
.then(async (res: any) => {
|
||||
const data = await res.data.data;
|
||||
if (data !== null) {
|
||||
answer1.value = data.answer1;
|
||||
answer2.value = data.answer2;
|
||||
answer3.value = data.answer3;
|
||||
status.value = false;
|
||||
}
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/** save ข้อมูล */
|
||||
async function save() {
|
||||
// await myForm.value!.validate().then((result: boolean) => {
|
||||
// if (result && 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(() => {
|
||||
// getSurveyData();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-12 row justify-center">
|
||||
<div 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.push(`/`)"
|
||||
/>
|
||||
แบบสํารวจความคิดเห็นการทดลองปฏิบัติหน้าที่ราชการ
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<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 />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue