hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

ปรับทดลองงาน

Browse source
This commit is contained in:
Warunee Tamkoo 2023-08-18 15:15:43 +07:00
parent 91935f9f6f
commit 1fc820eb3d
11 changed files with 42 additions and 1475 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/modules/05_placement/components/probation/FormEvaluation/Footer.vue
View file

@ -1,83 +0,0 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
ผู้บังคับบัญชาผู้มอบหมายงาน
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="Autherise"
outlined
:options="option"
label="ผู้บังคับบัญชา"
/>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="dateAutherise"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker col-3"
:model-value="
dateAutherise != null ? date2Thai(dateAutherise) : null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
</script>
<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);
}
</style>

47
src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
View file

@ -41,7 +41,7 @@ const props = defineProps({
});
onMounted(async () => {
console.log("tab===>", props.tab);
// console.log("tab===>", props.tab);
if (props.tab !== undefined) {
round.value = props.tab.charAt(4);
@ -50,6 +50,7 @@ onMounted(async () => {
}
await fecthFormdata(assignId.value);
});
const fecthFormdata = async (id: string) => {
await http
.get(config.API.formevaluateRecord(id))
@ -64,13 +65,14 @@ const fecthFormdata = async (id: string) => {
option.value.push(res.data.data.director);
Autherise.value = res.data.data.director.name;
list1_1.value = res.data.data.assign_output;
evaluate_expenct_level.value = res.data.data.assign_output.map((e) => ({
evaluate_expenct_level.value = res.data.data.assign_output.map((e: any) => ({
id: e.id,
labal: e.output_desc,
}));
evaluate_ouptut.value = res.data.data.assign_output.map((e) => ({
evaluate_ouptut.value = res.data.data.assign_output.map((e: any) => ({
id: e.id,
}));
checkArray.value = list1_1.value.length;
console.log(res.data.data.evaluate_no, round.value);
@ -87,7 +89,7 @@ const fecthFormRound = async (id: string, no: string) => {
showLoader();
await http
.get(config.API.formevaluateround(id, no))
.then((res: any) => {
.then(async(res: any) => {
// console.log(res);
let data = res.data.data.evaluate;
start_date.value = data.date_start;
@ -133,6 +135,14 @@ const fecthFormRound = async (id: string, no: string) => {
) {
etc2.value = true;
}
if (data.achievements) {
await data.achievements.map((e: any, index: number) => {
evaluate_expenct_level.value[index].level = e.evaluate_expect_level
evaluate_ouptut.value[index].text = e.evaluate_output_desc
evaluate_ouptut.value[index].level = e.evaluate_output_level
});
}
status.value = false;
})
.catch((e) => {
@ -405,7 +415,7 @@ const saveformdata = async (data: any) => {
</div>
<div class="col-12 text-top0 row items-center">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
<span class="text-black q-px-sm">{{ "ครั้งที่" + round }}</span>
<span class="text-black q-px-sm">{{ "ครั้งที่ " + round }}</span>
ระหว่างวันที่
<span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
ถึงวันที่
@ -447,6 +457,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -498,6 +509,7 @@ const saveformdata = async (data: any) => {
hide-bottom-space
:row="1"
:rules="evaluate_ouptutRules"
:disable="!status"
/>
</q-item-section>
<q-item-section side>
@ -509,6 +521,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -551,6 +564,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -590,6 +604,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -629,6 +644,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -668,6 +684,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -707,6 +724,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -782,6 +800,7 @@ const saveformdata = async (data: any) => {
@click="
(achievement_other.text = ''), (achievement_other.level = 0)
"
:disable="!status"
/></q-item-label>
</q-item-section>
</q-item>
@ -805,6 +824,7 @@ const saveformdata = async (data: any) => {
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
:disable="!status"
/>
</q-item-label>
</q-item-section>
@ -816,6 +836,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -857,6 +878,7 @@ const saveformdata = async (data: any) => {
:row="5"
:rules="achievement_strengthRules"
ref="achievement_strengthRef"
:disable="!status"
/>
</div>
<div class="col-12 row">
@ -876,6 +898,7 @@ const saveformdata = async (data: any) => {
:row="5"
:rules="achievement_inproveRules"
ref="achievement_inproveRef"
:disable="!status"
/>
</div>
</div>
@ -911,6 +934,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -958,6 +982,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -1005,6 +1030,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -1037,6 +1063,7 @@ const saveformdata = async (data: any) => {
dense
v-model="etc2"
@click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
:disable="!status"
/>
</div>
<q-card
@ -1061,6 +1088,7 @@ const saveformdata = async (data: any) => {
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
:disable="!status"
/>
</q-item-label>
</q-item-section>
@ -1072,6 +1100,7 @@ const saveformdata = async (data: any) => {
color="grey"
:color-selected="ratingColors"
label="ระดับการประเมินพฤติกรรม"
:disable="!status"
>
<template v-slot:tip-1>
<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
@ -1113,6 +1142,7 @@ const saveformdata = async (data: any) => {
:row="5"
:rules="behavio_strengthRules"
ref="behavio_strengthRef"
:disable="!status"
/>
</div>
<div class="col-12 row">
@ -1132,6 +1162,7 @@ const saveformdata = async (data: any) => {
:row="5"
:rules="behavio_inproveRules"
ref="behavio_inproveRef"
:disable="!status"
/>
</div>
</div>
@ -1163,6 +1194,7 @@ const saveformdata = async (data: any) => {
v-model="orientation"
val="1"
label="ดำเนินการเเล้ว"
:disable="!status"
/>
<q-radio
checked-icon="task_alt"
@ -1170,6 +1202,7 @@ const saveformdata = async (data: any) => {
v-model="orientation"
val="0"
label=" ยังไม่ได้ดำเนินการ"
:disable="!status"
/>
</div>
</q-item-section>
@ -1194,6 +1227,7 @@ const saveformdata = async (data: any) => {
v-model="self_learning"
val="0"
label=" ยังไม่ได้ดำเนินการ"
:disable="!status"
/>
</div>
</q-item-section>
@ -1218,6 +1252,7 @@ const saveformdata = async (data: any) => {
v-model="training_seminar"
val="0"
label=" ยังไม่ได้ดำเนินการ"
:disable="!status"
/>
</div>
</q-item-section>
@ -1237,6 +1272,7 @@ const saveformdata = async (data: any) => {
v-model="other_training"
val="1"
label="ดำเนินการเเล้ว"
:disable="!status"
/>
<q-radio
checked-icon="task_alt"
@ -1297,6 +1333,7 @@ const saveformdata = async (data: any) => {
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:disable="!status"
>
<template v-slot:prepend>
<q-icon

20
src/modules/05_placement/components/probation/FormEvaluation/Header.vue
View file

@ -75,26 +75,6 @@ const nextPage = () => {
</q-menu>
</q-btn>
</q-tab>
<!-- <q-tab name="save3" label="ครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red"
name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="blue"
name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</q-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">

472
src/modules/05_placement/components/probation/form/formEva1.vue
View file

@ -1,472 +0,0 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<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 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
</div>
<div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
1.ผลผลิตของงานที่คาดหวัง
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list1_1" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
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>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
</div>
<div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
1.ผลผลิตของงานที่เกิดขึ้น
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list1_2" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
<q-input
outlined
dense
v-model="text2_1"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules
type="textarea"
label="ผลผลิตของงานที่เกิดขึ้นจริง"
hide-bottom-space
:row="1"
/>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1"
:val="list.id"
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>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.2 ความรู้ความสามารถ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ความรู้ความสามารถ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_2"
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>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.3 ทักษะ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ทักษะ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_3"
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>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.4 สมรรถนะ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>สมรรถนะ</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_4"
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>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.5 ความสามารถในการเรียนรู้งาน
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_5"
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>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label
>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model1_6"
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>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
1.7 อื่นๆ
<q-checkbox class="q-ml-sm" dense v-model="etc" />
</div>
<q-card
v-if="etc"
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>
<q-input
v-model="etc_text"
label="กรอกอื่นๆ"
dense
lazy-rules
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="modelEtc"
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>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<FormComment />
</div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
const FormComment = defineAsyncComponent(
() =>
import(
"@/modules/05_placement/components/probation/form/formEvacomment.vue"
)
);
const $q = useQuasar();
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const list1_1 = [
{ id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
{ id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
{ id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
{ id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
{ id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
];
const list1_2 = [
{ id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
{ id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
{ id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
{ id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
{ id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
];
const etc_text = ref<any>(null);
const text2_1 = ref<string>("");
const model = ref<any>(0);
const model1 = ref<any>(0);
const model1_2 = ref<any>(0);
const model1_3 = ref<any>(0);
const model1_4 = ref<any>(0);
const model1_5 = ref<any>(0);
const model1_6 = ref<any>(0);
const modelEtc = ref<any>(0);
const etc = ref<any>(false);
</script>
<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;
}
</style>

289
src/modules/05_placement/components/probation/form/formEva2.vue
View file

@ -1,289 +0,0 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<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 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.1 ความประพฤติ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list2_1" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
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>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.2 ความมีคุณธรรมจริยธรรม
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list2_2" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
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>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.3 การรักษาวินัย
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense v-for="(list, i) in list2_3" :key="i">
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>{{ list.label }}</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="model"
:val="list.id"
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>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
</q-list>
</q-card>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
2.4 อื่นๆ
<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
</div>
<q-card
v-if="etc_4"
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>
<q-input
v-model="etc_text2"
label="กรอกอื่นๆ"
dense
lazy-rules
autogrow
hide-bottom-space
outlined
class="bg-white"
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
]"
/>
</q-item-label>
</q-item-section>
<q-item-section side>
<q-rating
v-model="modelEtc"
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>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<FormComment />
</div>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
const FormComment = defineAsyncComponent(
() =>
import(
"@/modules/05_placement/components/probation/form/formEvacomment.vue"
)
);
const probationStore = useProbationDataStore();
const { ratingColors } = probationStore;
const list2_1 = [
{ id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
{ id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
{
id: "3",
label:
"ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
},
{
id: "4",
label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
},
];
const list2_2 = [
{
id: "1",
label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
},
{ id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
{
id: "3",
label:
"ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
},
];
const list2_3 = [
{ id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
{
id: "2",
label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
},
{
id: "3",
label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
},
{
id: "4",
label:
"ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
},
{
id: "5",
label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
},
];
const etc_text2 = ref<any>(null);
const modelEtc = ref<any>(0);
const etc_4 = ref<any>(false);
const model = ref<any>(0);
</script>
<style lang="scss" scoped>
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
.q-rating__icon {
text-shadow: transparent !important;
}
</style>

130
src/modules/05_placement/components/probation/form/formEva3.vue
View file

@ -1,130 +0,0 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row justify-center">
<div class="col-12 text-top0 items-center">
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
</div>
<q-card
flat
bordered
class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
>
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>1. การปฐมนิเทศ</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_1"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_1"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_2"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_2"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_3"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_3"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
<q-separator class="q-my-xs" />
<q-item dense tag="label" v-ripple>
<q-item-section>
<q-item-label
>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
>
</q-item-section>
<q-item-section side>
<div class="row">
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_4"
val="1"
label="ดำเนินการเเล้ว"
/>
<q-radio
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
v-model="radio_4"
val="0"
label=" ยังไม่ได้ดำเนินการ"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const radio_1 = ref<any>(null);
const radio_2 = ref<any>(null);
const radio_3 = ref<any>(null);
const radio_4 = ref<any>(null);
</script>
<style lang="scss" scoped>
.text-top0 {
font-weight: 600;
padding-bottom: 8px;
color: rgb(70, 68, 68);
}
</style>

83
src/modules/05_placement/components/probation/form/formEvaOrder.vue
View file

@ -1,83 +0,0 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top2 row items-center">
ผู้บังคับบัญชาผู้มอบหมายงาน
</div>
<div class="col-12 row q-col-gutter-md">
<q-select
class="col-xs-12 col-sm-8"
dense
v-model="Autherise"
outlined
:options="option"
label="ผู้บังคับบัญชา"
/>
<div class="col-xs-12 col-sm-4">
<datepicker
menu-class-name="modalfix"
v-model="dateAutherise"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
dense
class="full-width datepicker col-3"
:model-value="
dateAutherise != null ? date2Thai(dateAutherise) : null
"
:label="`${'ลงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
const Autherise = ref<any>(null);
const dateAutherise = ref<any>(new Date());
const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
</script>
<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);
}
</style>

45
src/modules/05_placement/components/probation/form/formEvacomment.vue
View file

@ -1,45 +0,0 @@
<template>
<div class="row col-12 q-gutter-lg no-margin">
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
จุดเด่น (ไม่เกิน 5 บรรทัด)
</div>
<q-input
outlined
dense
v-model="text2_1"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules
type="textarea"
label="กรอกจุดเด่น"
hide-bottom-space
:row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</div>
<div class="col-12 row">
<div class="col-12 text-top0 row items-center q-pl-lg">
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
</div>
<q-input
outlined
dense
v-model="text2_2"
class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
lazy-rules
type="textarea"
hide-bottom-space
label="กรอกสิ่งที่ควรปรับปรุง"
:row="5"
:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const text2_1 = ref<string>("");
const text2_2 = ref<string>("");
</script>

116
src/modules/05_placement/components/probation/tabs/tabs2.vue
View file

@ -1,116 +0,0 @@
<template>
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
dense
v-model="tab"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save1'"
:color="tab !== 'save1' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save2'"
:color="tab !== 'save2' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red"
name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="blue"
name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</q-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<Form />
</q-tab-panel>
<q-tab-panel name="save2">
<Form />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
const Form = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
);
const tab = ref<string>("save1");
</script>

116
src/modules/05_placement/components/probation/tabs/tabs3.vue
View file

@ -1,116 +0,0 @@
<template>
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
dense
v-model="tab"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save1'"
:color="tab !== 'save1' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save2'"
:color="tab !== 'save2' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red"
name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="blue"
name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</q-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<Form />
</q-tab-panel>
<q-tab-panel name="save2">
<Form />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
const Form = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
);
const tab = ref<string>("save1");
</script>

116
src/modules/05_placement/components/probation/tabs/tabs4.vue
View file

@ -1,116 +0,0 @@
<template>
<q-header class="bg-grey-1">
<div class="bg-grey-1">
<div class="col-12 row q-gutter-x-md items-center">
<q-tabs
dense
v-model="tab"
active-class="text-primary text-weight-medium"
indicator-color="grey-1"
class="text-grey-7"
>
<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save1'"
:color="tab !== 'save1' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
<q-btn
size="12px"
flat
dense
icon="mdi-download"
:disable="tab !== 'save2'"
:color="tab !== 'save2' ? 'grey' : 'add'"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="red" name="mdi-file-pdf"
/></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar
><q-icon color="blue" name="mdi-file-word"
/></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
:color="tab !== 'save3' ? 'grey' : 'add'">
<q-tooltip>ดาวน์โหลด</q-tooltip>
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="red"
name="mdi-file-pdf" /></q-item-section>
<q-item-section>ไฟล์ .PDF</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="blue"
name="mdi-file-word" /></q-item-section>
<q-item-section>ไฟล์ .docx</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
</q-tabs>
<div>
<q-btn color="blue" flat dense icon="mdi-plus">
<q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
</q-btn>
</div>
</div>
<q-separator />
</div>
</q-header>
<q-page-container>
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="save1">
<Form />
</q-tab-panel>
<q-tab-panel name="save2">
<Form />
</q-tab-panel>
</q-tab-panels>
</q-page-container>
</template>
<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
const Form = defineAsyncComponent(
() => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
);
const tab = ref<string>("save1");
</script>