validate q-rating แบบประเมินผล (คณะกรรมการ)
This commit is contained in:
parent
a542dbe2c7
commit
b18056a335
1 changed files with 152 additions and 16 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue