validate q-rating แบบประเมินผล (คณะกรรมการ)

This commit is contained in:
setthawutttty 2023-09-07 14:50:58 +07:00
parent a542dbe2c7
commit b18056a335

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, defineAsyncComponent, computed, onMounted } from "vue";
import { ref, defineAsyncComponent, computed, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useProbationDataStore } from "@/modules/05_placement/store";
import { useCounterMixin } from "@/stores/mixin";
@ -20,11 +20,20 @@ const {
dateToISO,
success,
dialogConfirm,
dialogMessageNotify,
} = mixin;
const route = useRoute();
const router = useRouter();
const assignId = ref<string>(route.params.form.toString());
const personalId = ref<string>(route.params.id.toString());
const myForm1 = ref<any>(null);
const myForm2 = ref<any>(null);
const myForm3 = ref<any>(null);
const myForm4 = ref<any>(null);
const myForm5 = ref<any>(null);
const myForm6 = ref<any>(null);
const selectResult1 = ref<any>(null);
const selectResult2 = ref<any>(null);
const person = ref<any>([]);
const assign = ref<any>([]);
@ -44,7 +53,6 @@ const fecthAssign = async (id: string) => {
await http
.get(config.API.evaluateChairman(id))
.then(async (res: any) => {
console.log(res);
person.value = await res.data.data.person;
assign.value = await res.data.data.assign;
evaluate_no.value = await res.data.data.evaluate_no;
@ -56,8 +64,6 @@ const fecthAssign = async (id: string) => {
name: e.name,
dated: e.dated,
}));
console.log(mentors.value);
})
.catch((e) => {
messageError($q, e);
@ -260,19 +266,41 @@ const score5 = computed(() => {
Number(other_training_percent.value)
);
});
const savaForm = () => {
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 variablesToWatch = [learn_level, apply_level, success_level];
const savaForm = async () => {
let hasError = false;
await myForm1.value.validate();
await myForm2.value.validate();
await myForm3.value.validate();
await myForm4.value.validate();
await myForm5.value.validate();
await myForm6.value.validate();
await selectResult1.value.validate();
await selectResult2.value.validate();
if (
learn_level.value === 0 ||
apply_level.value === 0 ||
success_level.value === 0 ||
conduct_level.value.length < 4 ||
moral_level.value.length < 3 ||
discipline_level.value.length < 5 ||
orientation.value === null ||
self_learning.value === null ||
training_seminar.value === null
lengthconduct.value !== 4 ||
lengthmoral_level.value !== 3 ||
lengthdiscipline_level.value !== 5 ||
orientation.value === 0 ||
self_learning.value === 0 ||
training_seminar.value === 0 ||
orientation_percent.value === 0 ||
self_learning_percent.value === 0 ||
training_seminar_percent.value === 0 ||
develop_result.value === undefined ||
evaluate_result.value === undefined
) {
hasError = true;
} else if (
@ -291,7 +319,21 @@ const savaForm = () => {
} else putformData();
if (hasError === true) {
notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
variablesToWatch.forEach((item, index) => {
if (item.value === 0) {
alerts[index].value = true;
}
});
if (lengthconduct.value !== 4) {
alerts[3].value = true;
}
if (lengthmoral_level.value !== 3) {
alerts[4].value = true;
}
if (lengthdiscipline_level.value !== 5) {
alerts[5].value = true;
}
dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
}
};
const putformData = () => {
@ -350,6 +392,37 @@ const putformData = () => {
});
});
};
const alerts = Array(20)
.fill(null)
.map(() => ref<boolean>(false));
const getBordered = (i: boolean) => {
return {
border_custom: i,
};
};
variablesToWatch.forEach((variable, index) => {
watch(variable, (item: any) => {
if (item !== 0) {
alerts[index].value = false;
}
});
});
watch(lengthconduct, (newLength) => {
if (newLength === 4) {
alerts[3].value = false;
}
});
watch(lengthmoral_level, (newLength) => {
if (newLength === 3) {
alerts[4].value = false;
}
});
watch(lengthdiscipline_level, (newLength) => {
if (newLength === 5) {
alerts[5].value = false;
}
});
</script>
<template>
@ -419,7 +492,12 @@ const putformData = () => {
<div class="col-12 row no-margin">
<q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item
dense
tag="label"
v-ripple
:class="getBordered(alerts[0].value)"
>
<q-item-section>
<q-item-label>
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@ -458,7 +536,12 @@ const putformData = () => {
<q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
<q-list dense>
<q-item dense tag="label" v-ripple>
<q-item
dense
tag="label"
v-ripple
:class="getBordered(alerts[1].value)"
>
<q-item-section>
<q-item-label>
<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@ -498,7 +581,12 @@ const putformData = () => {
<q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
<q-list dense>
<q-item dense tag="label" v-ripple>
<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" />
@ -631,6 +719,7 @@ const putformData = () => {
2.1 ความประพฤต
</div>
<q-card
:class="getBordered(alerts[3].value)"
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
@ -678,6 +767,7 @@ const putformData = () => {
2.2 ความมณธรรมจรยธรรม
</div>
<q-card
:class="getBordered(alerts[4].value)"
flat
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
@ -726,6 +816,7 @@ const putformData = () => {
</div>
<q-card
flat
:class="getBordered(alerts[5].value)"
bordered
class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
>
@ -981,6 +1072,11 @@ const putformData = () => {
dense
type="number"
v-model="orientation"
hide-bottom-space
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
]"
ref="myForm1"
/>
</div>
<div class="col">
@ -989,6 +1085,11 @@ const putformData = () => {
dense
type="number"
v-model="orientation_percent"
hide-bottom-space
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
]"
ref="myForm2"
/>
</div>
</div>
@ -1001,6 +1102,11 @@ const putformData = () => {
dense
type="number"
v-model="self_learning"
hide-bottom-space
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
]"
ref="myForm3"
/>
</div>
<div class="col">
@ -1009,6 +1115,11 @@ const putformData = () => {
dense
type="number"
v-model="self_learning_percent"
hide-bottom-space
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
]"
ref="myForm4"
/>
</div>
</div>
@ -1021,6 +1132,11 @@ const putformData = () => {
dense
type="number"
v-model="training_seminar"
hide-bottom-space
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกคะเเนน',
]"
ref="myForm5"
/>
</div>
<div class="col">
@ -1029,6 +1145,11 @@ const putformData = () => {
dense
type="number"
v-model="training_seminar_percent"
hide-bottom-space
:rules="[
(val) => (val && val.length > 0) || 'กรุณากรอกร้อยละ',
]"
ref="myForm6"
/>
</div>
</div>
@ -1185,6 +1306,9 @@ const putformData = () => {
label="เลือกสรุปผลการพัฒนา"
map-options
emit-value
hide-bottom-space
:rules="[(val) => val !== null && val !== undefined || 'กรุณาเลือกสรุปผลการพัฒนา']"
ref="selectResult1"
/>
</div>
</div>
@ -1208,6 +1332,13 @@ const putformData = () => {
label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
map-options
emit-value
hide-bottom-space
:rules="[
(val) =>
val !== null && val !== undefined ||
'กรุณาเลือกสรุปผลการประเมินผลทดลองปฎิบัติหน้าที่ราชการ',
]"
ref="selectResult2"
/>
</div>
</div>
@ -1440,4 +1571,9 @@ const putformData = () => {
.q-card {
box-shadow: 0px 0px 0px 0px !important;
}
.border_custom {
border: 2px solid #c10015;
border-radius: 5px;
color: #c10015;
}
</style>