2251 lines
92 KiB
Vue
2251 lines
92 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useProbationStore } from "@/modules/11_probation/store/probation";
|
|
import { useQuasar } from "quasar";
|
|
|
|
import Criterion from "@/modules/11_probation/component/Criterion.vue";
|
|
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const store = useProbationStore();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
dialogConfirm,
|
|
success,
|
|
date2Thai,
|
|
dialogMessageNotify,
|
|
dateToISO,
|
|
} = mixin;
|
|
|
|
const dateAutherise = ref<Date | null>(new Date());
|
|
const behavior_improve_desc = ref<string>("");
|
|
|
|
const id = ref<string>(route.params.id as string);
|
|
const profileId = ref<string>(route.params.profileId as string);
|
|
|
|
const person = ref<any>([]);
|
|
const assign = ref<any>([]);
|
|
const evaluate_no = ref<string>("");
|
|
const start_date = ref<Date>(new Date());
|
|
const date_finish = ref<Date>(new Date());
|
|
const round = ref<number>();
|
|
const checkArray = ref<number>(0);
|
|
const option = ref<any>([]);
|
|
const Autherise = ref<any>(null);
|
|
const list1_1 = ref<any>([]);
|
|
const list1_2 = [{ id: "", label: "" }];
|
|
const evaluate_expenct_level = ref<any>([]);
|
|
const evaluate_ouptut = ref<any>([]);
|
|
const knowledge_level = ref<number>(0);
|
|
const skill_level = ref<number>(0);
|
|
const competency_level = ref<number>(0);
|
|
const learn_level = ref<number>(0);
|
|
const apply_level = ref<number>(0);
|
|
const success_level = ref<number>(0);
|
|
const etc = ref<any>(false); // checkBox 1.8
|
|
const achievement_other = ref<any>({ text: "", level: 0 });
|
|
const achievement_strength_desc = ref<string>("");
|
|
const achievement_improve_desc = ref<string>("");
|
|
const behavio_orther = ref<any>({ text: "", level: 0 });
|
|
const etc2 = ref<any>(false);
|
|
|
|
const orientation = ref<any>(null);
|
|
const self_learning = ref<any>(null);
|
|
const training_seminar = ref<any>(null);
|
|
const other_training = ref<any>(null);
|
|
|
|
const ArrayCountbotton = [orientation, self_learning, training_seminar];
|
|
|
|
const conduct_level = ref<any>([]);
|
|
const moral_level = ref<any>([]);
|
|
const discipline_level = ref<any>([]);
|
|
const behavior_strength_desc = ref<string>("");
|
|
const list2_1 = store.behavior_no1;
|
|
const list2_2 = store.behavior_no2;
|
|
const list2_3 = store.behavior_no3;
|
|
const variablesToWatch = [
|
|
knowledge_level,
|
|
skill_level,
|
|
competency_level,
|
|
learn_level,
|
|
apply_level,
|
|
success_level,
|
|
];
|
|
|
|
const lengthconduct = computed(() => {
|
|
return conduct_level.value.filter((item: number) => item !== 0).length;
|
|
});
|
|
const lengthmoral_level = computed(() => {
|
|
return moral_level.value.filter((item: number) => item !== 0).length;
|
|
});
|
|
const lengthdiscipline_level = computed(() => {
|
|
return discipline_level.value.filter((item: number) => item !== 0).length;
|
|
});
|
|
const alerts = Array(20)
|
|
.fill(null)
|
|
.map(() => ref<boolean>(false));
|
|
|
|
//rules
|
|
const behavio_strengthRules = [
|
|
(val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
|
|
];
|
|
const behavio_strengthRef = ref<any>(null);
|
|
const achievement_strengthRef = ref<any>(null);
|
|
const achievement_strengthRules = [
|
|
(val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
|
|
];
|
|
const evaluate_ouptutRules = [
|
|
(val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
|
|
];
|
|
const lengthevaluate_expenct_level = computed(() => {
|
|
return evaluate_expenct_level.value.filter(
|
|
(item: any) => item.level !== undefined && item.level !== 0
|
|
).length;
|
|
});
|
|
const lengthevaluate_ouptut = computed(() => {
|
|
return evaluate_ouptut.value.filter(
|
|
(item: any) => item.level !== undefined && item.level !== 0
|
|
).length;
|
|
});
|
|
/**
|
|
* get ข้อมูล ลง ตัวแปร
|
|
* @param id personal id
|
|
*/
|
|
async function fecthFormdata(id: string) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.formevaluateRecord(id))
|
|
.then((res: any) => {
|
|
evaluate_no.value = res.data.data.evaluate_no;
|
|
start_date.value = res.data.data.start_date;
|
|
date_finish.value = res.data.data.end_date;
|
|
round.value = res.data.data.evaluate_no;
|
|
|
|
person.value = res.data.data.person;
|
|
assign.value = res.data.data.assign;
|
|
option.value.push(res.data.data.director);
|
|
Autherise.value = res.data.data.director;
|
|
|
|
list1_1.value = res.data.data.assign_output;
|
|
res.data.data.assign_output.forEach((e: any) => {
|
|
list1_2.push({ id: "", label: "" });
|
|
});
|
|
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: any) => ({
|
|
id: e.id,
|
|
text: "",
|
|
}));
|
|
checkArray.value = list1_1.value.length;
|
|
})
|
|
.catch((e: any) => {})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
/** return class เมื่อ true */
|
|
function getBordered(i: boolean) {
|
|
return {
|
|
border_custom: i,
|
|
};
|
|
}
|
|
|
|
/** อัปเดต ข้อมูล */
|
|
function putformData() {
|
|
const data = {
|
|
evaluate_no: evaluate_no.value,
|
|
start_date: start_date.value,
|
|
date_finish: date_finish.value,
|
|
evaluate_expenct_level: evaluate_expenct_level.value,
|
|
evaluate_ouptut: evaluate_ouptut.value,
|
|
knowledge_level: knowledge_level.value,
|
|
skill_level: skill_level.value,
|
|
competency_level: competency_level.value,
|
|
learn_level: learn_level.value,
|
|
apply_level: apply_level.value,
|
|
success_level: success_level.value,
|
|
achievement_other: achievement_other.value,
|
|
achievement_strength_desc: achievement_strength_desc.value,
|
|
achievement_improve_desc: achievement_improve_desc.value,
|
|
conduct1_level: conduct_level.value[0],
|
|
conduct2_level: conduct_level.value[1],
|
|
conduct3_level: conduct_level.value[2],
|
|
conduct4_level: conduct_level.value[3],
|
|
moral1_level: moral_level.value[0],
|
|
moral2_level: moral_level.value[1],
|
|
moral3_level: moral_level.value[2],
|
|
discipline1_level: discipline_level.value[0],
|
|
discipline2_level: discipline_level.value[1],
|
|
discipline3_level: discipline_level.value[2],
|
|
discipline4_level: discipline_level.value[3],
|
|
discipline5_level: discipline_level.value[4],
|
|
behavio_orther: behavio_orther.value,
|
|
behavior_strength_desc: behavior_strength_desc.value,
|
|
behavior_improve_desc: behavior_improve_desc.value,
|
|
orientation: Number(orientation.value),
|
|
self_learning: Number(self_learning.value),
|
|
training_seminar: Number(training_seminar.value),
|
|
other_training: Number(other_training.value),
|
|
assessor_dated: dateToISO(dateAutherise.value as Date),
|
|
};
|
|
dialogConfirm($q, async () => await saveformdata(data));
|
|
}
|
|
|
|
/** เช็คค่าว่าง ก่อน save */
|
|
function savaForm() {
|
|
achievement_strengthRef.value.validate();
|
|
behavio_strengthRef.value.validate();
|
|
|
|
let hasError = false;
|
|
|
|
if (
|
|
lengthevaluate_expenct_level.value !==
|
|
evaluate_expenct_level.value.length ||
|
|
lengthevaluate_ouptut.value !== evaluate_ouptut.value.length ||
|
|
knowledge_level.value === 0 ||
|
|
skill_level.value === 0 ||
|
|
competency_level.value === 0 ||
|
|
learn_level.value === 0 ||
|
|
apply_level.value === 0 ||
|
|
success_level.value === 0 ||
|
|
achievement_strength_desc.value === "" ||
|
|
lengthconduct.value !== 4 ||
|
|
lengthmoral_level.value !== 3 ||
|
|
lengthdiscipline_level.value !== 5 ||
|
|
behavior_strength_desc.value === "" ||
|
|
orientation.value === null ||
|
|
self_learning.value === null ||
|
|
training_seminar.value === null
|
|
) {
|
|
hasError = true;
|
|
} else if (
|
|
(etc.value == true &&
|
|
(achievement_other.value.text === undefined ||
|
|
achievement_other.value.text == "" ||
|
|
achievement_other.value.level == undefined ||
|
|
achievement_other.value.level === 0)) ||
|
|
(etc2.value == true &&
|
|
(behavio_orther.value.text === "" ||
|
|
behavio_orther.value.text == undefined ||
|
|
behavio_orther.value.level === undefined ||
|
|
behavio_orther.value.level == 0))
|
|
) {
|
|
hasError = true;
|
|
}
|
|
|
|
if (hasError === true) {
|
|
variablesToWatch.forEach((item, index) => {
|
|
if (item.value === 0) {
|
|
alerts[index + 2].value = true;
|
|
}
|
|
});
|
|
if (
|
|
lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length
|
|
) {
|
|
alerts[0].value = true;
|
|
}
|
|
if (lengthevaluate_ouptut.value !== evaluate_ouptut.value.length) {
|
|
alerts[1].value = true;
|
|
}
|
|
if (lengthconduct.value !== 4) {
|
|
alerts[8].value = true;
|
|
}
|
|
if (lengthmoral_level.value !== 3) {
|
|
alerts[9].value = true;
|
|
}
|
|
if (lengthdiscipline_level.value !== 5) {
|
|
alerts[10].value = true;
|
|
}
|
|
ArrayCountbotton.forEach((item, index) => {
|
|
if (item.value === null) {
|
|
alerts[index + 11].value = true;
|
|
}
|
|
});
|
|
|
|
dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
|
|
} else {
|
|
putformData();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* save ข้อมูล
|
|
* @param data ข้อมูลที่ได้จาก ฟังชั่น putformData
|
|
*/
|
|
async function saveformdata(data: any) {
|
|
await http
|
|
.post(config.API.createformevaluate(id.value), data)
|
|
.then(() => {
|
|
success($q, "บันทึกสำเร็จ");
|
|
router.push(`/probation/detail/${profileId.value}/${id.value}`);
|
|
})
|
|
.catch((e: any) => {
|
|
messageError($q, e);
|
|
});
|
|
}
|
|
|
|
variablesToWatch.forEach((variable, index) => {
|
|
watch(variable, (item: any) => {
|
|
if (item !== 0) {
|
|
alerts[index + 2].value = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
ArrayCountbotton.forEach((variable, index) => {
|
|
watch(variable, (item: any) => {
|
|
if (item !== null) {
|
|
alerts[index + 11].value = false;
|
|
}
|
|
});
|
|
});
|
|
|
|
watch(lengthevaluate_expenct_level, (newLength) => {
|
|
if (newLength === evaluate_expenct_level.value.length) {
|
|
alerts[0].value = false;
|
|
}
|
|
});
|
|
|
|
watch(lengthevaluate_ouptut, (newLength) => {
|
|
if (newLength === evaluate_ouptut.value.length) {
|
|
alerts[1].value = false;
|
|
}
|
|
});
|
|
|
|
watch(lengthconduct, (newLength) => {
|
|
if (newLength === 4) {
|
|
alerts[8].value = false;
|
|
}
|
|
});
|
|
|
|
watch(lengthmoral_level, (newLength) => {
|
|
if (newLength === 3) {
|
|
alerts[9].value = false;
|
|
}
|
|
});
|
|
|
|
watch(lengthdiscipline_level, (newLength) => {
|
|
if (newLength === 5) {
|
|
alerts[10].value = false;
|
|
}
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await fecthFormdata(id.value);
|
|
});
|
|
</script>
|
|
<template>
|
|
<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.go(-1)"
|
|
/>
|
|
<div>การทดลองปฏิบัติหน้าที่ราชการ</div>
|
|
</div>
|
|
</div>
|
|
<q-card bordered>
|
|
<q-card-section class="q-pa-md">
|
|
<div class="row text-weight-medium">
|
|
<div class="col-12 text-grey-7 text-bold">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ person.name ? person.name : "-" }}
|
|
</div>
|
|
<div class="col-12">
|
|
<span class="text-grey-7 text-weight-bold q-pl-lg"
|
|
>ตำแหน่งในสายงาน</span
|
|
>
|
|
{{ person.positionName ? person.positionName : "-" }}
|
|
</div>
|
|
<div class="col-12">
|
|
<span class="text-grey-7 text-weight-bold q-pl-lg">ระดับตำแหน่ง</span>
|
|
{{ person.positionLevelName ? person.positionLevelName : "-" }}
|
|
</div>
|
|
<div class="col-12">
|
|
<span class="text-grey-7 text-weight-bold q-pl-lg">สังกัด</span>
|
|
{{ person.Oc ? person.Oc : "-" }}
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-bold row items-center text-grey-7">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
การทดลองปฎิบัติหน้าที่ราชการ<span class="text-primary q-pr-sm">{{
|
|
"ครั้งที่ " + assign.round_no
|
|
}}</span>
|
|
ตั้งแต่วันที่
|
|
<span class="text-black q-px-sm">{{
|
|
date2Thai(assign.date_start)
|
|
}}</span>
|
|
ถึงวันที่
|
|
<span class="text-black q-px-sm">{{
|
|
date2Thai(assign.date_finish)
|
|
}}</span>
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-bold row items-center text-grey-7">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
บันทึกผล<span class="text-primary q-pr-sm">{{
|
|
"ครั้งที่ " + round
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12 col-sm-6">
|
|
<datepicker
|
|
v-model="start_date"
|
|
: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
|
|
hide-bottom-space
|
|
class="full-width datepicker col-3"
|
|
:model-value="start_date != null ? date2Thai(start_date) : null"
|
|
:label="`${'ระหว่างวันที่'}`"
|
|
:rules="[(val:string) => !!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 class="col-12 col-sm-6">
|
|
<datepicker
|
|
v-model="date_finish"
|
|
: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
|
|
hide-bottom-space
|
|
dense
|
|
class="full-width datepicker col-3"
|
|
:model-value="
|
|
date_finish != null ? date2Thai(date_finish) : null
|
|
"
|
|
:label="`${'ถึงวันที่'}`"
|
|
:rules="[(val:string) => !!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 class="col-12">
|
|
<q-separator size="3px" color="grey-2" />
|
|
</div>
|
|
|
|
<Criterion />
|
|
|
|
<div class="col-12">
|
|
<q-separator size="3px" color="grey-2" />
|
|
</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">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-12 text-weight-medium 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-sm-1 offset-md-1 text-weight-medium text-dark"
|
|
>
|
|
ผลผลิตของงานที่คาดหวัง
|
|
</div>
|
|
|
|
<div class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1">
|
|
<q-card
|
|
flat
|
|
bordered
|
|
:class="[' q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
|
|
>
|
|
<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.output_desc }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="evaluate_expenct_level[i].level"
|
|
:val="list.id"
|
|
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>
|
|
</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-xs-12 col-sm-11 col-md-10 offset-sm-1 offset-md-1 text-weight-medium text-dark"
|
|
>
|
|
ผลผลิตของงานที่เกิดขึ้นจริง
|
|
</div>
|
|
<div
|
|
v-if="$q.screen.gt.xs"
|
|
class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
|
|
>
|
|
<q-card
|
|
flat
|
|
bordered
|
|
:class="['q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
|
|
>
|
|
<q-list dense v-for="(list, i) in list1_2" :key="i">
|
|
<q-item dense tag="label" v-ripple v-if="i < checkArray">
|
|
<q-item-section>
|
|
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
|
|
<q-input
|
|
outlined
|
|
dense
|
|
v-model="evaluate_ouptut[i].text"
|
|
lazy-rules
|
|
autogrow
|
|
label="ผลผลิตของงานที่เกิดขึ้นจริง"
|
|
hide-bottom-space
|
|
:row="1"
|
|
:rules="evaluate_ouptutRules"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="evaluate_ouptut[i].level"
|
|
:val="list.id"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
<!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
|
|
>
|
|
<q-card
|
|
flat
|
|
bordered
|
|
:class="['q-pa-sm bg-grey-1', getBordered(alerts[0].value)]"
|
|
>
|
|
<q-list dense v-for="(list, i) in list1_2" :key="i">
|
|
<q-item dense tag="label" v-ripple v-if="i < checkArray">
|
|
<q-item-section>
|
|
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
|
|
<q-input
|
|
outlined
|
|
dense
|
|
v-model="evaluate_ouptut[i].text"
|
|
lazy-rules
|
|
autogrow
|
|
label="ผลผลิตของงานที่เกิดขึ้นจริง"
|
|
hide-bottom-space
|
|
:row="1"
|
|
:rules="evaluate_ouptutRules"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item dense tag="label" v-ripple v-if="i < checkArray">
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="evaluate_ouptut[i].level"
|
|
:val="list.id"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
<!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[2].value)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="mdi-label"
|
|
color="grey-4"
|
|
class="q-pr-sm"
|
|
/>
|
|
1.2. ความรู้ความสามารถ</q-item-label
|
|
>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="knowledge_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<div v-else class="col-12 col-sm-11">
|
|
<q-card
|
|
bordered
|
|
class="text-weight-medium"
|
|
:class="getBordered(alerts[2].value)"
|
|
style="border-radius: 20px"
|
|
>
|
|
<q-list dense>
|
|
<q-item dense v-ripple>
|
|
<q-item-section>
|
|
<q-item-label class="text-start">
|
|
1.2. ความรู้ความสามารถ</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="knowledge_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[3].value)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="mdi-label"
|
|
color="grey-4"
|
|
class="q-pr-sm"
|
|
/>
|
|
1.3. ทักษะ</q-item-label
|
|
>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="skill_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<div v-else class="col-12 col-sm-11">
|
|
<q-card
|
|
bordered
|
|
class="text-weight-medium"
|
|
:class="getBordered(alerts[3].value)"
|
|
style="border-radius: 20px"
|
|
>
|
|
<q-list dense>
|
|
<q-item dense v-ripple>
|
|
<q-item-section>
|
|
<q-item-label class="text-start">
|
|
1.3. ทักษะ</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="skill_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[4].value)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="mdi-label"
|
|
color="grey-4"
|
|
class="q-pr-sm"
|
|
/>
|
|
1.4. สมรรถนะ</q-item-label
|
|
>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="competency_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<div v-else class="col-12 col-sm-11">
|
|
<q-card
|
|
bordered
|
|
class="text-weight-medium"
|
|
:class="getBordered(alerts[4].value)"
|
|
style="border-radius: 20px"
|
|
>
|
|
<q-list dense>
|
|
<q-item dense v-ripple>
|
|
<q-item-section>
|
|
<q-item-label class="text-start">
|
|
1.4. สมรรถนะ</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="competency_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[5].value)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="mdi-label"
|
|
color="grey-4"
|
|
class="q-pr-sm"
|
|
/>
|
|
1.5. ความสามารถในการเรียนรู้งาน</q-item-label
|
|
>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="learn_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<div v-else class="col-12 col-sm-11">
|
|
<q-card
|
|
bordered
|
|
class="text-weight-medium"
|
|
:class="getBordered(alerts[5].value)"
|
|
style="border-radius: 20px"
|
|
>
|
|
<q-list dense>
|
|
<q-item dense v-ripple>
|
|
<q-item-section>
|
|
<q-item-label class="text-start">
|
|
1.5. ความสามารถในการเรียนรู้งาน</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="learn_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[6].value)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="mdi-label"
|
|
color="grey-4"
|
|
class="q-pr-sm"
|
|
/>
|
|
1.6.
|
|
ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
|
|
>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="apply_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<div v-else class="col-12 col-sm-11">
|
|
<q-card
|
|
bordered
|
|
class="text-weight-medium"
|
|
:class="getBordered(alerts[6].value)"
|
|
style="border-radius: 20px"
|
|
>
|
|
<q-list dense>
|
|
<q-item dense v-ripple>
|
|
<q-item-section>
|
|
<q-item-label class="text-start">
|
|
1.6.
|
|
ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="apply_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[7].value)"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="mdi-label"
|
|
color="grey-4"
|
|
class="q-pr-sm"
|
|
/>
|
|
1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
|
|
>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="success_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
<div v-else class="col-12 col-sm-11">
|
|
<q-card
|
|
bordered
|
|
class="text-weight-medium"
|
|
:class="getBordered(alerts[7].value)"
|
|
style="border-radius: 20px"
|
|
>
|
|
<q-list dense>
|
|
<q-item dense v-ripple>
|
|
<q-item-section>
|
|
<q-item-label class="text-start">
|
|
1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="success_level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
<q-icon
|
|
name="mdi-label"
|
|
color="grey-4"
|
|
class="q-pr-sm" />
|
|
1.8 อื่นๆ<q-checkbox
|
|
class="q-ml-sm"
|
|
dense
|
|
v-model="etc"
|
|
@click="
|
|
(achievement_other.text = ''),
|
|
(achievement_other.level = 0)
|
|
"
|
|
/></q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
<div class="row">
|
|
<div
|
|
v-if="etc"
|
|
class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
|
|
>
|
|
<q-card flat bordered :class="'q-pa-sm bg-grey-1'">
|
|
<q-list dense>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
|
|
<q-input
|
|
v-model="achievement_other.text"
|
|
label="กรอกอื่นๆ"
|
|
dense
|
|
lazy-rules
|
|
autogrow
|
|
hide-bottom-space
|
|
outlined
|
|
class="bg-white"
|
|
:rules="[
|
|
(val:string) =>
|
|
(val && val.length > 0) || 'กรุณากรอกข้อความ',
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="achievement_other.level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
<!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
|
|
>
|
|
<div class="q-pb-sm text-weight-medium text-dark">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
1.8 อื่นๆ<q-checkbox
|
|
class="q-ml-sm"
|
|
dense
|
|
v-model="etc"
|
|
@click="
|
|
(achievement_other.text = ''), (achievement_other.level = 0)
|
|
"
|
|
/>
|
|
</div>
|
|
<q-card v-if="etc" flat bordered :class="'q-pa-sm bg-grey-1'">
|
|
<q-list dense>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
|
|
<q-input
|
|
v-model="achievement_other.text"
|
|
label="กรอกอื่นๆ"
|
|
dense
|
|
lazy-rules
|
|
autogrow
|
|
hide-bottom-space
|
|
outlined
|
|
class="bg-white"
|
|
:rules="[
|
|
(val:string) =>
|
|
(val && val.length > 0) || 'กรุณากรอกข้อความ',
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="achievement_other.level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
<!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row justify-center q-mb-sm">
|
|
<div
|
|
class="col-12 text-top0 row items-center q-pl-md text-weight-medium text-dark"
|
|
>
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
จุดเด่น (ไม่เกิน 5 บรรทัด)
|
|
</div>
|
|
<div class="col-xs-12 col-sm-11 col-md-10">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
v-model="achievement_strength_desc"
|
|
lazy-rules
|
|
type="textarea"
|
|
label="กรอกจุดเด่น"
|
|
hide-bottom-space
|
|
:row="5"
|
|
:rules="achievement_strengthRules"
|
|
ref="achievement_strengthRef"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-center q-mb-sm text-weight-medium text-dark">
|
|
<div class="col-12 text-top0 row items-center q-pl-md">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
|
|
</div>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
v-model="achievement_improve_desc"
|
|
class="col-xs-12 col-sm-11 col-md-10"
|
|
type="textarea"
|
|
hide-bottom-space
|
|
label="กรอกสิ่งที่ควรปรับปรุง"
|
|
:row="5"
|
|
/>
|
|
</div>
|
|
</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 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.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',
|
|
getBordered(alerts[8].value),
|
|
]"
|
|
>
|
|
<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="conduct_level[i]"
|
|
:val="list.id"
|
|
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>
|
|
</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',
|
|
getBordered(alerts[9].value),
|
|
]"
|
|
>
|
|
<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="moral_level[i]"
|
|
:val="list.id"
|
|
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>
|
|
</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',
|
|
getBordered(alerts[10].value),
|
|
]"
|
|
>
|
|
<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="discipline_level[i]"
|
|
:val="list.id"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div v-if="$q.screen.gt.xs" class="col-12 col-sm-11">
|
|
<q-card class="text-weight-medium">
|
|
<q-list dense>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-item-label class="q-pl-sm">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
2.4 อื่นๆ<q-checkbox
|
|
class="q-ml-sm"
|
|
dense
|
|
v-model="etc2"
|
|
@click="
|
|
(behavio_orther.text = ''), (behavio_orther.level = 0)
|
|
"
|
|
/></q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
<div class="row">
|
|
<div
|
|
v-if="etc2"
|
|
class="col-xs-12 col-sm-10 col-md-11 offset-sm-1 offset-md-1"
|
|
>
|
|
<q-card flat bordered :class="'q-pa-sm bg-grey-1'">
|
|
<q-list dense>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
|
|
<q-input
|
|
v-model="behavio_orther.text"
|
|
label="กรอกอื่นๆ"
|
|
dense
|
|
lazy-rules
|
|
autogrow
|
|
hide-bottom-space
|
|
outlined
|
|
class="bg-white"
|
|
:rules="[
|
|
(val:string) =>
|
|
(val && val.length > 0) || 'กรุณากรอกข้อความ',
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
v-model="behavio_orther.level"
|
|
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>
|
|
</q-item-section>
|
|
</q-item>
|
|
<!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="col-xs-12 col-sm-10 col-md-10 offset-sm-1 offset-md-1"
|
|
>
|
|
<div class="q-pb-sm text-weight-medium text-dark">
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
2.4 อื่นๆ<q-checkbox
|
|
class="q-ml-sm"
|
|
dense
|
|
v-model="etc2"
|
|
@click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
|
|
/>
|
|
</div>
|
|
<q-card v-if="etc2" flat bordered :class="'q-pa-sm bg-grey-1'">
|
|
<q-list dense>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<!-- <q-item-label>{{ list.label }}</q-item-label> -->
|
|
<q-input
|
|
v-model="behavio_orther.text"
|
|
label="กรอกอื่นๆ"
|
|
dense
|
|
lazy-rules
|
|
autogrow
|
|
hide-bottom-space
|
|
outlined
|
|
class="bg-white"
|
|
:rules="[
|
|
(val:string) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-rating
|
|
class="justify-center"
|
|
v-model="behavio_orther.level"
|
|
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>
|
|
</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">
|
|
<div class="row justify-center q-mb-sm">
|
|
<div
|
|
class="col-12 text-top0 row items-center q-pl-lg text-weight-medium text-dark"
|
|
>
|
|
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
|
|
จุดเด่น (ไม่เกิน 5 บรรทัด)
|
|
</div>
|
|
<div class="col-xs-12 col-sm-11 col-md-10">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
v-model="behavior_strength_desc"
|
|
class="col-xs-12 col-sm-11 col-md-10"
|
|
lazy-rules
|
|
type="textarea"
|
|
label="กรอกจุดเด่น"
|
|
hide-bottom-space
|
|
:row="5"
|
|
:rules="behavio_strengthRules"
|
|
ref="behavio_strengthRef"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-center q-mb-sm text-weight-medium text-dark">
|
|
<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="behavior_improve_desc"
|
|
class="col-xs-12 col-sm-11 col-md-10"
|
|
type="textarea"
|
|
hide-bottom-space
|
|
label="กรอกสิ่งที่ควรปรับปรุง"
|
|
:row="5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 text-weight-medium">
|
|
<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
|
|
การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<q-card
|
|
flat
|
|
bordered
|
|
class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
|
|
>
|
|
<q-list v-if="$q.screen.gt.xs" dense>
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[11].value)"
|
|
>
|
|
<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="orientation"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="orientation"
|
|
val="0"
|
|
label=" ยังไม่ได้ดำเนินการ"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator class="q-my-xs" />
|
|
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[12].value)"
|
|
>
|
|
<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="self_learning"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="self_learning"
|
|
val="0"
|
|
label=" ยังไม่ได้ดำเนินการ"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator class="q-my-xs" />
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
v-ripple
|
|
:class="getBordered(alerts[13].value)"
|
|
>
|
|
<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="training_seminar"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="training_seminar"
|
|
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="other_training"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="other_training"
|
|
val="0"
|
|
label=" ยังไม่ได้ดำเนินการ"
|
|
/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<div v-else>
|
|
<q-list
|
|
dense
|
|
:class="[getBordered(alerts[11].value), 'item-custom']"
|
|
>
|
|
<q-item dense>
|
|
<q-item-section>
|
|
<q-item-label>1. การปฐมนิเทศ</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
style="
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="orientation"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="orientation"
|
|
val="0"
|
|
label=" ยังไม่ได้ดำเนินการ"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
<q-separator class="q-my-xs" />
|
|
<q-list
|
|
dense
|
|
:class="[getBordered(alerts[11].value), 'item-custom']"
|
|
>
|
|
<q-item dense>
|
|
<q-item-section>
|
|
<q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
style="
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="self_learning"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="self_learning"
|
|
val="0"
|
|
label=" ยังไม่ได้ดำเนินการ"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
<q-separator class="q-my-xs" />
|
|
<q-list
|
|
dense
|
|
:class="[getBordered(alerts[11].value), 'item-custom']"
|
|
>
|
|
<q-item dense>
|
|
<q-item-section>
|
|
<q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
style="
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="training_seminar"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="training_seminar"
|
|
val="0"
|
|
label=" ยังไม่ได้ดำเนินการ"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
<q-separator class="q-my-xs" />
|
|
<q-list dense :class="'item-custom'">
|
|
<q-item dense>
|
|
<q-item-section>
|
|
<q-item-label
|
|
>4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
|
|
>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item
|
|
dense
|
|
tag="label"
|
|
style="
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
"
|
|
>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="other_training"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="other_training"
|
|
val="0"
|
|
label=" ยังไม่ได้ดำเนินการ"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="row justify-center">
|
|
<div class="col-xs-12 col-sm-11">
|
|
<div class="col-12 text-weight-medium items-center">
|
|
ผู้บังคับบัญชา/ผู้มอบหมายงาน
|
|
</div>
|
|
<div class="col-12 row q-col-gutter-sm">
|
|
<q-select
|
|
class="col-xs-12 col-sm-8"
|
|
dense
|
|
v-model="Autherise"
|
|
outlined
|
|
:options="option"
|
|
label="ผู้บังคับบัญชา"
|
|
option-label="label"
|
|
disable
|
|
/>
|
|
<div class="col-xs-12 col-sm-4">
|
|
<datepicker
|
|
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
|
|
hide-bottom-space
|
|
class="full-width datepicker col-3"
|
|
:model-value="
|
|
dateAutherise != null
|
|
? date2Thai(dateAutherise)
|
|
: null
|
|
"
|
|
:label="`${'ลงวันที่'}`"
|
|
:rules="[(val:string) => !!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>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn label="บันทึก" color="secondary" @click="savaForm" />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</template>
|
|
<style scoped>
|
|
.border_custom {
|
|
border: 2px solid #c10015;
|
|
border-radius: 5px;
|
|
}
|
|
.item-custom {
|
|
border: 1px #ededed solid;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|