2376 lines
93 KiB
Vue
2376 lines
93 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed, watch, defineAsyncComponent } 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 Header = defineAsyncComponent(
|
|
() => import("@/modules/11_probation/component/Header.vue")
|
|
);
|
|
const evaluate_id = ref<string>("");
|
|
const dataArr = ref<any>();
|
|
const dataArrayNumber = defineModel<Number>("dataArrayNumber");
|
|
const fullname = defineModel<string>("fullname");
|
|
|
|
const selectOp = computed(() => {
|
|
return store.tabs.map((i: any) => ({
|
|
id: i.id,
|
|
name: `ครั้งที่${i.no}`,
|
|
nameEn: `save${i.no}`,
|
|
}));
|
|
});
|
|
const props = defineProps({
|
|
fecthAssign: Function,
|
|
data: Object,
|
|
});
|
|
const status = ref<boolean>(false);
|
|
|
|
const $q = useQuasar();
|
|
const store = useProbationStore();
|
|
const dateAutherise = ref<any>(new Date());
|
|
const behavior_improve_desc = ref<string>("");
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
dialogConfirm,
|
|
success,
|
|
date2Thai,
|
|
dialogMessageNotify,
|
|
dateToISO,
|
|
} = mixin;
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
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: "" },
|
|
{ id: "", label: "" },
|
|
{ id: "", label: "" },
|
|
{ id: "", label: "" },
|
|
{ id: "", label: "" },
|
|
{ id: "", label: "" },
|
|
{ id: "", label: "" },
|
|
{ id: "", label: "" },
|
|
{ id: "", label: "" },
|
|
{ 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 data */
|
|
async function fecthFormdata(id: string) {
|
|
await http
|
|
.get(config.API.formevaluateRecord(id))
|
|
.then(async (res: any) => {
|
|
await store.fecthAssignoutput(res.data.data);
|
|
await fectFormfull();
|
|
})
|
|
.catch((e: any) => {})
|
|
.finally(() => {});
|
|
}
|
|
|
|
/** get form รอบ */
|
|
async function fecthFormRound() {
|
|
try {
|
|
let data = await dataArr.value;
|
|
evaluate_id.value = data.id;
|
|
start_date.value = data.date_start;
|
|
date_finish.value = data.date_finish;
|
|
knowledge_level.value = data.knowledge_level;
|
|
skill_level.value = data.skill_level;
|
|
competency_level.value = data.competency_level;
|
|
learn_level.value = data.learn_level;
|
|
apply_level.value = data.apply_level;
|
|
achievement_other.value.text = data.achievement_other_desc;
|
|
achievement_other.value.level = data.achievement_other_level;
|
|
achievement_strength_desc.value = data.achievement_strength_desc;
|
|
achievement_improve_desc.value = data.achievement_improve_desc;
|
|
conduct_level.value[0] = data.conduct1_level;
|
|
conduct_level.value[1] = data.conduct2_level;
|
|
conduct_level.value[2] = data.conduct3_level;
|
|
conduct_level.value[3] = data.conduct4_level;
|
|
moral_level.value[0] = data.moral1_level;
|
|
moral_level.value[1] = data.moral2_level;
|
|
moral_level.value[2] = data.moral3_level;
|
|
discipline_level.value[0] = data.discipline1_level;
|
|
discipline_level.value[1] = data.discipline2_level;
|
|
discipline_level.value[2] = data.discipline3_level;
|
|
discipline_level.value[3] = data.discipline4_level;
|
|
discipline_level.value[4] = data.discipline5_level;
|
|
behavio_orther.value.text = data.behavior_other_desc;
|
|
behavio_orther.value.level = data.behavior_other_level;
|
|
behavior_strength_desc.value = data.behavior_strength_desc;
|
|
behavior_improve_desc.value = data.behavior_improve_desc;
|
|
orientation.value = data.orientation.toString();
|
|
self_learning.value = data.self_learning.toString();
|
|
training_seminar.value = data.training_seminar.toString();
|
|
other_training.value = data.other_training.toString();
|
|
dateAutherise.value = data.assessor_dated;
|
|
if (
|
|
data.achievement_other_desc !== "" &&
|
|
data.achievement_other_level !== null
|
|
) {
|
|
etc.value = true;
|
|
} else etc.value = false;
|
|
if (data.behavior_other_desc !== "" && data.behavior_other_level !== null) {
|
|
etc2.value = true;
|
|
} else etc2.value = false;
|
|
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 (error) {
|
|
hideLoader();
|
|
}
|
|
}
|
|
|
|
/** get form */
|
|
async function fectFormfull() {
|
|
Autherise.value = store.director;
|
|
list1_1.value = store.assignOutput;
|
|
evaluate_expenct_level.value = await store.assignOutput.map((e: any) => ({
|
|
id: e.id,
|
|
labal: e.output_desc,
|
|
}));
|
|
evaluate_ouptut.value = await store.assignOutput.map((e: any) => ({
|
|
id: e.id,
|
|
}));
|
|
checkArray.value = list1_1.value.length;
|
|
await fecthFormRound();
|
|
}
|
|
|
|
/** 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),
|
|
};
|
|
dialogConfirm($q, async () => await editData(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();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* แก้ไขข้อมูล
|
|
* @param data ข้อมูลที่อัปเดต
|
|
*/
|
|
async function editData(data: any) {
|
|
await http
|
|
.put(config.API.editFormEvaluate(id.value, evaluate_id.value), data)
|
|
.then((res: any) => {
|
|
status.value = false;
|
|
success($q, "บันทึกสำเร็จ");
|
|
})
|
|
.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;
|
|
}
|
|
});
|
|
|
|
function edit() {
|
|
status.value = true;
|
|
}
|
|
|
|
function cancel() {
|
|
status.value = false;
|
|
props.fecthAssign?.(id.value);
|
|
}
|
|
|
|
const evaluate_no1 = ref<number>(1);
|
|
const dataRole = ref<string>("mentor");
|
|
const tab = ref<string>("save1");
|
|
/**
|
|
* เปลี่ยน tab
|
|
* @param tabVal type
|
|
*/
|
|
function changeTab(tabVal: string) {
|
|
showLoader();
|
|
|
|
tab.value = tabVal;
|
|
dataArrayNumber.value = Number(tabVal.charAt(4));
|
|
setTimeout(() => {
|
|
hideLoader();
|
|
}, 100);
|
|
}
|
|
|
|
/** download file */
|
|
async function FileDownload(type: string) {
|
|
let numTab = store.evaluate.find((e: any) => e.no === dataArrayNumber.value);
|
|
//ผู้ดูเเล
|
|
if (dataRole.value == "mentor") {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.reportEvaluateRecord1(type, numTab.id), {
|
|
responseType: "blob",
|
|
})
|
|
.then(async (res) => {
|
|
downloadFile(
|
|
res,
|
|
`แบบบันทึกผล(ผู้ดูเเล)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
|
|
);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
} else {
|
|
//ผุ้บังคับ
|
|
showLoader();
|
|
await http
|
|
.get(config.API.reportEvaluateRecord1(type, numTab.id), {
|
|
responseType: "blob",
|
|
})
|
|
.then(async (res) => {
|
|
downloadFile(
|
|
res,
|
|
`แบบบันทึกผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
|
|
);
|
|
})
|
|
.catch((e) => {
|
|
messageError($q, e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
}
|
|
|
|
/** convert file */
|
|
function downloadFile(response: any, filename: string) {
|
|
const link = document.createElement("a");
|
|
var fileName = filename;
|
|
link.href = window.URL.createObjectURL(new Blob([response.data]));
|
|
link.setAttribute("download", fileName);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
|
|
function addData() {
|
|
router.push(`/probation/detail/addresult/${profileId.value}/${id.value}`);
|
|
}
|
|
|
|
/** เช็คค่า props */
|
|
watch(props, async () => {
|
|
evaluate_no1.value = Number(tab.value.charAt(4));
|
|
dataArr.value = await props.data;
|
|
fectFormfull();
|
|
});
|
|
|
|
onMounted(async () => {
|
|
evaluate_no1.value = Number(tab.value.charAt(4));
|
|
dataArr.value = await props.data;
|
|
await fecthFormdata(id.value);
|
|
});
|
|
</script>
|
|
<template>
|
|
<Header
|
|
v-if="store.tabs.length > 0 && $q.screen.gt.xs"
|
|
:change-tab="changeTab"
|
|
:add-data="addData"
|
|
:loop="store.tabs.length"
|
|
:FileDownload="FileDownload"
|
|
/>
|
|
<div
|
|
v-if="!$q.screen.gt.xs"
|
|
class="bg-grey-2 q-pa-sm"
|
|
style="border-radius: 10px 10px 0 0"
|
|
>
|
|
<q-toolbar class="q-pa-none">
|
|
<q-select
|
|
dense
|
|
bg-color="white"
|
|
v-model="tab"
|
|
outlined
|
|
option-label="name"
|
|
option-value="nameEn"
|
|
:options="selectOp"
|
|
emit-value
|
|
map-options
|
|
@update:model-value="changeTab"
|
|
style="width: 70%"
|
|
>
|
|
</q-select>
|
|
<q-space />
|
|
<q-btn flat rounded dense icon="mdi-download" color="primary">
|
|
<q-tooltip>ดาวน์โหลด</q-tooltip>
|
|
<q-menu>
|
|
<q-list style="min-width: 150px">
|
|
<q-item clickable v-close-popup @click="FileDownload('pdf')">
|
|
<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 @click="FileDownload('docx')">
|
|
<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-btn
|
|
color="primary"
|
|
rounded
|
|
flat
|
|
dense
|
|
icon="mdi-plus"
|
|
@click="addData"
|
|
>
|
|
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
|
</q-btn>
|
|
</q-toolbar>
|
|
</div>
|
|
<div :class="`row ${$q.screen.gt.xs ? 'q-pa-md' : 'mobileClass q-pa-sm'}`">
|
|
<div
|
|
:class="`toptitle text-dark col-12 row items-center ${
|
|
$q.screen.gt.xs ? 'q-mt-md' : ''
|
|
}`"
|
|
>
|
|
<div>แบบบันทึกผล (ผู้ดูเเล)</div>
|
|
<div v-if="status == false">
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
color="primary"
|
|
@click="edit()"
|
|
icon="mdi-pencil-outline"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div v-else>
|
|
<q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
|
|
<q-tooltip>ยกเลิก</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
dense
|
|
flat
|
|
round
|
|
class="q-ml-md"
|
|
color="public"
|
|
@click="savaForm()"
|
|
icon="mdi-content-save-outline"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<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" />
|
|
ผู้ทดลองปฏิบัติหน้าที่ราชการ
|
|
{{ store.person.name ? store.person.name : "-" }}
|
|
</div>
|
|
<div class="col-12">
|
|
<span class="text-grey-7 text-weight-bold q-pl-lg"
|
|
>ตำแหน่งในสายงาน</span
|
|
>
|
|
{{ store.person.positionName ? store.person.positionName : "-" }}
|
|
</div>
|
|
<div class="col-12">
|
|
<span class="text-grey-7 text-weight-bold q-pl-lg">ระดับตำแหน่ง</span>
|
|
{{
|
|
store.person.positionLevelName ? store.person.positionLevelName : "-"
|
|
}}
|
|
</div>
|
|
<div class="col-12">
|
|
<span class="text-grey-7 text-weight-bold q-pl-lg">สังกัด</span>
|
|
{{ store.person.Oc ? store.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">{{
|
|
"ครั้งที่ " + store.assign.round_no
|
|
}}</span>
|
|
ตั้งแต่วันที่
|
|
<span class="text-black q-px-sm">{{
|
|
date2Thai(store.assign.date_start)
|
|
}}</span>
|
|
ถึงวันที่
|
|
<span class="text-black q-px-sm">{{
|
|
date2Thai(store.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">{{
|
|
"ครั้งที่ " + evaluate_no1
|
|
}}</span>
|
|
ระหว่างวันที่
|
|
<span class="text-black q-px-sm">
|
|
{{ date2Thai(start_date) }}
|
|
</span>
|
|
ถึงวันที่
|
|
<span class="text-black q-px-sm">
|
|
{{ date2Thai(date_finish) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-col-gutter-sm">
|
|
<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 evaluate_expenct_level"
|
|
:key="i"
|
|
>
|
|
<q-item dense tag="label" v-ripple>
|
|
<q-item-section>
|
|
<q-item-label>{{ list.labal }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-rating
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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.7 อื่นๆ<q-checkbox
|
|
class="q-ml-sm"
|
|
dense
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="orientation"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="self_learning"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="training_seminar"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="other_training"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="orientation"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="self_learning"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="training_seminar"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
checked-icon="task_alt"
|
|
unchecked-icon="panorama_fish_eye"
|
|
v-model="other_training"
|
|
val="1"
|
|
label="ดำเนินการเเล้ว"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-radio
|
|
:disable="!status"
|
|
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
|
|
:disable="!status"
|
|
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>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.border_custom {
|
|
border: 2px solid #c10015;
|
|
border-radius: 5px;
|
|
}
|
|
.item-custom {
|
|
border: 1px #ededed solid;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.mobileClass {
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|