502 lines
16 KiB
Vue
502 lines
16 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { useQuasar } from "quasar";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
|
|
/** importType*/
|
|
import type {
|
|
EducationForm,
|
|
CertificatesForm,
|
|
} from "@/modules/06_evaluate/interface/evalute";
|
|
|
|
/** importComponents*/
|
|
import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
|
|
|
|
/** importStore*/
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDetail";
|
|
|
|
/** use*/
|
|
const mixin = useCounterMixin();
|
|
const store = useEvaluateDetailStore();
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
|
|
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
|
|
const {
|
|
columnsCertificates,
|
|
columnSalaries,
|
|
columnTraining,
|
|
columnProjectsProposed,
|
|
} = store;
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:formDeital"]);
|
|
|
|
const formDetail = reactive({
|
|
userId: "",
|
|
citizenId: "",
|
|
prefix: "",
|
|
fullName: "",
|
|
position: "",
|
|
oc: "",
|
|
salary: "",
|
|
positionLevel: "",
|
|
posNo: "",
|
|
birthDate: "",
|
|
govAge: "",
|
|
educations: [] as EducationForm[],
|
|
certificates: [],
|
|
salaries: [],
|
|
trainings: [],
|
|
assessments: [],
|
|
});
|
|
|
|
/** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
|
|
async function fetchDetail() {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.evaluationDetail())
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
formDetail.userId = data.id;
|
|
formDetail.citizenId = data.citizenId;
|
|
formDetail.prefix = data.prefix;
|
|
formDetail.fullName = `${data.firstName} ${data.lastName}`;
|
|
formDetail.position = data.position;
|
|
formDetail.oc = data.oc;
|
|
formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
|
|
formDetail.positionLevel = data.positionLevel;
|
|
formDetail.posNo = data.posNo;
|
|
formDetail.birthDate = data.birthDate && date2Thai(data.birthDate);
|
|
formDetail.govAge = data.govAge;
|
|
formDetail.educations = data.educations;
|
|
formDetail.certificates = data.certificates.map(
|
|
(e: CertificatesForm) => ({
|
|
certificateNo: e.certificateNo,
|
|
certificateType: e.certificateType,
|
|
expireDate: date2Thai(e.expireDate),
|
|
issueDate: date2Thai(e.issueDate),
|
|
issuer: e.issuer,
|
|
})
|
|
);
|
|
formDetail.salaries = 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 = 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 = data.assessments;
|
|
emit("update:formDeital", data);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
hideLoader();
|
|
}, 500);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* function fetchData ตรวจสอบคุณสมบัติ
|
|
* @param id ประเมิน
|
|
*/
|
|
async function fetchCheckSpec(data: any) {
|
|
formDetail.userId = data.id;
|
|
formDetail.citizenId = data.citizenId;
|
|
formDetail.prefix = data.prefix;
|
|
formDetail.fullName = data.fullName;
|
|
formDetail.position = data.position;
|
|
formDetail.oc = data.oc;
|
|
formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
|
|
formDetail.positionLevel = data.positionLevel;
|
|
formDetail.posNo = data.posNo;
|
|
formDetail.birthDate = data.birthDate && date2Thai(data.birthDate);
|
|
formDetail.govAge = data.govAge;
|
|
formDetail.educations = data.educations;
|
|
|
|
formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
|
|
certificateNo: e.certificateNo,
|
|
certificateType: e.certificateType,
|
|
expireDate: date2Thai(e.expireDate),
|
|
issueDate: date2Thai(e.issueDate),
|
|
issuer: e.issuer,
|
|
}));
|
|
formDetail.salaries = 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 = 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 = data.assessments;
|
|
}
|
|
|
|
/**
|
|
* function convertตัวเลข
|
|
* @param x
|
|
*/
|
|
function formattedNumber(x: number) {
|
|
if (x) {
|
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
} else {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
route.name === "evaluate-add" && (await fetchDetail());
|
|
props.data && fetchCheckSpec(props.data);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-card
|
|
bordered
|
|
class="col-12 row shadow-0 q-pa-sm"
|
|
:style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;'"
|
|
>
|
|
<div class="row col-12">
|
|
<q-card class="col-12 cardSp1" bordered>
|
|
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
|
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
|
|
<div class="row col-12 q-pa-sm">
|
|
<div class="row q-col-gutter-sm">
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="formDetail.prefix"
|
|
label="คำนำหน้าชื่อ"
|
|
></q-input>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="formDetail.fullName"
|
|
label="ชื่อ - นามสกุล"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
:model-value="formDetail.birthDate"
|
|
readonly
|
|
label="วันเดือนปีเกิด"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
<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.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 class="col-xs-12 col-sm-9">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="formDetail.oc"
|
|
label="สังกัด"
|
|
autogrow
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card class="col-12 cardSp1" bordered>
|
|
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
|
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div
|
|
class="row col-12 q-pa-sm"
|
|
v-if="formDetail.educations && formDetail.educations.length > 0"
|
|
>
|
|
<div
|
|
class="row q-col-gutter-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="education.educationLevel"
|
|
label="ระดับศึกษา"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="education.institute"
|
|
label="สถานศึกษา"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
:model-value="date2Thai(education.startDate)"
|
|
readonly
|
|
label="ตั้งแต่"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
:model-value="date2Thai(education.endDate)"
|
|
readonly
|
|
label="ถึง"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
:model-value="date2Thai(education.finishDate)"
|
|
readonly
|
|
label="วันที่สำเร็จการศึกษา"
|
|
>
|
|
</q-input>
|
|
</div>
|
|
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="education.isEducation ? 'ใช่' : 'ไม่ใช่'"
|
|
label="วุฒิการศึกษาในตําแหน่ง"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="education.degree"
|
|
label="วุฒิการศึกษา"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="education.field"
|
|
label="สาขาวิชา/ทาง"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-4 col-md-3">
|
|
<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="education.gpa"
|
|
label="เกรดเฉลี่ย"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-xs-6 col-sm-4 col-md-6">
|
|
<q-input
|
|
borderless
|
|
readonly
|
|
:model-value="education.country"
|
|
label="ประเทศ"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="row col-12 q-pa-md">ไม่มีประวัติการศึกษา</div>
|
|
</q-card>
|
|
|
|
<q-card class="col-12 cardSp1" bordered>
|
|
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
|
<span class="q-ml-lg q-my-sm">ใบอนุญาตประกอบวิชาชีพ</span>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<TableData
|
|
class="col-12"
|
|
:columns="columnsCertificates"
|
|
:row="formDetail.certificates"
|
|
/>
|
|
</q-card>
|
|
|
|
<q-card class="col-12 cardSp1" bordered>
|
|
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
|
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-10">
|
|
<TableData :columns="columnSalaries" :row="formDetail.salaries" />
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-card class="col-12 cardSp1" bordered>
|
|
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
|
<span class="q-ml-lg q-my-sm">ประวัติการฝึกอบรมดูงาน</span>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<TableData
|
|
class="col-12"
|
|
:columns="columnTraining"
|
|
:row="formDetail.trainings"
|
|
/>
|
|
</q-card>
|
|
|
|
<q-card class="col-12 cardSp1" bordered>
|
|
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
|
<span class="q-ml-lg q-my-sm">ประสบการณ์ในการปฏิบัติงาน </span>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-12 q-pa-sm">-</div>
|
|
</q-card>
|
|
|
|
<q-card class="col-12 cardSp1" bordered>
|
|
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
|
<span class="q-ml-lg q-my-sm">ผลงานที่เคยเสนอขอประเมิน (ถ้ามี)</span>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="col-10">
|
|
<TableData :columns="columnProjectsProposed" />
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style>
|
|
.cardSp1 {
|
|
border: 1px solid #d6dee1;
|
|
margin-bottom: 10px;
|
|
box-shadow: none !important;
|
|
}
|
|
</style>
|