แก้ประเมิน step 1
This commit is contained in:
parent
3487ae71bb
commit
86ba9053a7
7 changed files with 473 additions and 299 deletions
|
|
@ -1,8 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import TableData from "@/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import { useEvaluateDetailStore } from "@/modules/12_evaluatePersonal/store/EvaluateDetail";
|
||||
import { onMounted, reactive, watch } from "vue";
|
||||
import type {
|
||||
EducationForm,
|
||||
CertificatesForm,
|
||||
} from "@/modules/12_evaluatePersonal/interface/index/evalute";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
|
|
@ -10,129 +17,227 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
const store = useEvaluateDetailStore();
|
||||
const {
|
||||
columnsLicense,
|
||||
columnPeriodhistory,
|
||||
columnTrainingHistory,
|
||||
columnsCertificates,
|
||||
columnSalaries,
|
||||
columnTraining,
|
||||
columnProjectsProposed,
|
||||
} = store;
|
||||
|
||||
const formDetail = reactive({
|
||||
userId: props.data.id,
|
||||
citizenId: "",
|
||||
prefix: "",
|
||||
fullName: "",
|
||||
position: "",
|
||||
oc: "",
|
||||
salary: "",
|
||||
positionLevel: "",
|
||||
posNo: "",
|
||||
birthDate: "",
|
||||
govAge: "",
|
||||
educations: [] as EducationForm[],
|
||||
certificates: [],
|
||||
salaries: [],
|
||||
trainings: [],
|
||||
assessments: [],
|
||||
// Type: "",
|
||||
// Step: "",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
// formDetail.userId = props.data.id;
|
||||
// formDetail.citizenId = props.data.citizenId;
|
||||
formDetail.prefix = props.data.prefix;
|
||||
formDetail.fullName = `${props.data.firstName} ${props.data.lastName}`;
|
||||
formDetail.position = props.data.position;
|
||||
formDetail.oc = props.data.oc;
|
||||
formDetail.salary = props.data.salary
|
||||
? props.data.salary.toLocaleString("th-TH")
|
||||
: "-";
|
||||
formDetail.positionLevel = props.data.positionLevel;
|
||||
formDetail.posNo = props.data.posNo;
|
||||
formDetail.birthDate =
|
||||
props.data.birthDate && date2Thai(props.data.birthDate);
|
||||
formDetail.govAge = props.data.govAge;
|
||||
formDetail.educations = props.data.educations;
|
||||
|
||||
formDetail.certificates = props.data.certificates
|
||||
? props.data.certificates.map((e: CertificatesForm) => ({
|
||||
certificateNo: e.certificateNo,
|
||||
certificateType: e.certificateType,
|
||||
expireDate: date2Thai(e.expireDate),
|
||||
issueDate: date2Thai(e.issueDate),
|
||||
issuer: e.issuer,
|
||||
}))
|
||||
: [];
|
||||
formDetail.salaries = props.data.salaries
|
||||
? props.data.salaries.map((e: any) => ({
|
||||
amount: e.amount,
|
||||
date: date2Thai(e.date),
|
||||
mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
|
||||
posNo: e.posNo,
|
||||
position: e.position,
|
||||
positionSalaryAmount: e.positionSalaryAmount
|
||||
? e.positionSalaryAmount
|
||||
: 0,
|
||||
refCommandDate: e.refCommandDate ? e.refCommandDate : "",
|
||||
|
||||
refCommandNo: e.refCommandNo ? e.refCommandNo : "",
|
||||
salaryClass: e.salaryClass ? e.salaryClass : "",
|
||||
salaryRef: e.salaryRef ? e.salaryRef : "",
|
||||
salaryStatus: e.salaryStatus ? e.salariesStatus : "",
|
||||
//
|
||||
oc: "-",
|
||||
lineWork: "-",
|
||||
side: "-",
|
||||
positionType: "-",
|
||||
level: "-",
|
||||
positionsAdministrative: "-",
|
||||
aspectAdministrative: "-",
|
||||
}))
|
||||
: [];
|
||||
|
||||
formDetail.trainings = props.data.trainings
|
||||
? props.data.trainings.map((e: any) => ({
|
||||
dateOrder: date2Thai(e.dateOrder),
|
||||
department: e.department,
|
||||
duration: e.duration,
|
||||
endDate: date2Thai(e.endDate),
|
||||
name: e.name,
|
||||
numberOrder: e.numberOrder,
|
||||
place: e.place,
|
||||
startDate: date2Thai(e.startDate),
|
||||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}))
|
||||
: [];
|
||||
formDetail.assessments = props.data.assessments;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<q-scroll-area style="height: 450px; max-width: 100%">
|
||||
<div class="q-pa-xs">
|
||||
<q-card class="q-gutter-md" style="max-width: 100%">
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
|
||||
<q-scroll-area style="height: 450px; max=width: 100%">
|
||||
<div class="q-pa-xs">
|
||||
<q-card class="q-gutter-md" style="max-width: 100%">
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.prefix"
|
||||
label="คำนำหน้าชื่อ"
|
||||
></q-input>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="data.prefix"
|
||||
label="คำนำหน้าชื่อ"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="data.fullName"
|
||||
label="ชื่อ - นามสกุล"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
model-value="19/03/44"
|
||||
readonly
|
||||
label="วันเดือนปีเกิด"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="size-icon" name="o_calendar_today" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="ไม่มี"
|
||||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="กย.11"
|
||||
label="ตำแหน่งเลขที่"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="หน่วยใหม่กับหน่วยเก่า"
|
||||
label="สังกัด"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="1,0000"
|
||||
label="เงินเดือน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="ระดับปัจจุบัน"
|
||||
label="ระดับปัจจุบัน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="ระดับที่ประเมิน"
|
||||
label="ระดับที่ประเมิน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="1000 ปี"
|
||||
label="อายุราชการ"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.fullName"
|
||||
label="ชื่อ - นามสกุล"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา</span>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
:model-value="formDetail.birthDate"
|
||||
readonly
|
||||
label="วันเดือนปีเกิด"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="size-icon" name="o_calendar_today" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.position"
|
||||
label="ตำแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.posNo"
|
||||
label="ตำแหน่งเลขที่"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.oc"
|
||||
label="สังกัด"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.salary"
|
||||
label="เงินเดือน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.positionLevel"
|
||||
label="ระดับปัจจุบัน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.positionLevel"
|
||||
label="ระดับที่ประเมิน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="formDetail.govAge"
|
||||
label="อายุราชการ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div v-if="formDetail.educations.length > 0">
|
||||
<div
|
||||
class="row q-pa-sm"
|
||||
v-for="(education, index) in formDetail.educations"
|
||||
:key="index"
|
||||
>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="ปริญญาตรี"
|
||||
:model-value="education.educationLevel"
|
||||
label="ระดับศึกษา"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -141,7 +246,7 @@ const {
|
|||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="มหาวิทยาลัยก."
|
||||
:model-value="education.institute"
|
||||
label="สถานศึกษา"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -149,7 +254,7 @@ const {
|
|||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
model-value="19/03/44"
|
||||
:model-value="date2Thai(education.startDate)"
|
||||
readonly
|
||||
label="ตั้งแต่"
|
||||
>
|
||||
|
|
@ -160,7 +265,12 @@ const {
|
|||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input borderless model-value="19/03/44" readonly label="ถึง">
|
||||
<q-input
|
||||
borderless
|
||||
:model-value="date2Thai(education.endDate)"
|
||||
readonly
|
||||
label="ถึง"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon class="size-icon" name="o_calendar_today" />
|
||||
</template>
|
||||
|
|
@ -169,7 +279,7 @@ const {
|
|||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
model-value="19/03/44"
|
||||
:model-value="date2Thai(education.finishDate)"
|
||||
readonly
|
||||
label="วันทราสำเร็จการศึกษา"
|
||||
>
|
||||
|
|
@ -183,7 +293,7 @@ const {
|
|||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="ปริญญาตรี"
|
||||
:model-value="education.degree"
|
||||
label="วุฒิการศึกษาในตําแหน่ง"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -192,7 +302,7 @@ const {
|
|||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="ปริญญาตรี"
|
||||
:model-value="education.degree"
|
||||
label="วุฒิการศึกษา"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -201,99 +311,112 @@ const {
|
|||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="-"
|
||||
:model-value="education.field"
|
||||
label="สาขาวิชา/ทาง"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input borderless readonly model-value="-" label="ทุน" />
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="education.fundName"
|
||||
label="ทุน"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-3">
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
model-value="3.33"
|
||||
:model-value="education.gpa"
|
||||
label="เกรดเฉลี่ย"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6 col-sm-4 col-md-6">
|
||||
<q-input borderless readonly model-value="ไทย" label="ประเทศ" />
|
||||
<q-input
|
||||
borderless
|
||||
readonly
|
||||
:model-value="education.country"
|
||||
label="ประเทศ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData :columns="columnsLicense" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData :columns="columnPeriodhistory" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData :columns="columnTrainingHistory" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData :columns="columnTrainingHistory" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm"
|
||||
>ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span
|
||||
>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData :columns="columnProjectsProposed" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
|
||||
<q-separator />
|
||||
</q-card>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.size-icon {
|
||||
font-size: 20px; /* ปรับขนาดตามที่คุณต้องการ */
|
||||
}
|
||||
</style>
|
||||
@/modules/12_evaluatePersonal/store/evaluate
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData
|
||||
:columns="columnsCertificates"
|
||||
:row="formDetail.certificates"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData :columns="columnSalaries" :row="formDetail.salaries" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData
|
||||
:columns="columnTraining"
|
||||
:row="formDetail.trainings"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
-
|
||||
<!-- <TableData
|
||||
:columns="columnTraining"
|
||||
:row="formDetail.Trainings"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card bordered style="border: 1px solid #d6dee1">
|
||||
<div class="text-weight-bold row items-center bg-grey-2">
|
||||
<span class="q-ml-lg q-my-sm">ผลงานทีเคยเสนอขอประเมิน (ถ้ามี)</span>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row q-pa-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<TableData :columns="columnProjectsProposed" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-scroll-area>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue