452 lines
13 KiB
Vue
452 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
|
import { useQuasar } from "quasar";
|
|
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
|
import type { QTableProps } from "quasar";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useRoute } from "vue-router";
|
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
const { success, showLoader, hideLoader, date2Thai, modalConfirm } = mixin;
|
|
const save = ref<boolean>(true);
|
|
|
|
const props = defineProps({
|
|
Modal: Boolean,
|
|
close: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
personalId: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
validate: {
|
|
type: Function,
|
|
default: () => console.log("not function"),
|
|
},
|
|
});
|
|
|
|
const rows = ref<any[]>([
|
|
]);
|
|
//--------------------(แปลงวันที่เป็นไทย)------------------------------------//
|
|
// const graduationDate = new Date(graduationExample);
|
|
// rows.value[0].graduation = date2Thai(graduationDate, false, false);
|
|
|
|
//--------------------------------------------------------------------//
|
|
|
|
const columns = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "university",
|
|
align: "center",
|
|
label: "สถานศึกษา",
|
|
sortable: true,
|
|
field: "university",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "degree",
|
|
align: "center",
|
|
label: "วุฒิการศึกษา",
|
|
sortable: true,
|
|
field: "degree",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
{
|
|
name: "major",
|
|
align: "center",
|
|
label: "สาขาวิชาเอก",
|
|
sortable: true,
|
|
field: "major",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
},
|
|
{
|
|
name: "graduation",
|
|
align: "center",
|
|
label: "วันที่สำเร็จการศึกษา",
|
|
sortable: true,
|
|
field: "graduation",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
sort: (a: string, b: string) =>
|
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
},
|
|
]);
|
|
const myForm = ref<any>([]);
|
|
const personalForm = ref<any>([]);
|
|
const selection = ref<any>([]);
|
|
|
|
|
|
const $q = useQuasar();
|
|
|
|
function isRequired(val: any): boolean | string {
|
|
return !!val || "กรุณาเลือกไฟล์เอกสารหลักฐาน";
|
|
}
|
|
|
|
watch(props, () => {
|
|
if (props.Modal === true) {
|
|
// console.log(props.getdetail);
|
|
fetchData();
|
|
}
|
|
});
|
|
|
|
const validateData = () => {
|
|
const selectedIds = personalForm.value.isProperty;
|
|
|
|
const selectedItems = personalForm.value.isProperty.filter(
|
|
(item: any) => item.value === true
|
|
// selectedIds.includes(item.value)
|
|
);
|
|
return (
|
|
selectedItems.length > 0 || selectedItems.length === selectedIds.length
|
|
);
|
|
};
|
|
|
|
const ClickSave = () => {
|
|
const isValid = validateData();
|
|
|
|
if (isValid) {
|
|
// props.close();
|
|
// props.validate();
|
|
// putpersonalForm();
|
|
modalConfirm(
|
|
$q,
|
|
"การยืนยัน",
|
|
"ยืนยันการบันทึกการคัดกรองคุณสมบัติ",
|
|
putpersonalForm
|
|
);
|
|
} else {
|
|
success($q, "กรอกให้ครบ");
|
|
console.log();
|
|
}
|
|
};
|
|
const fetchData = async () => {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.getDatapersonal(props.personalId))
|
|
.then((res) => {
|
|
personalForm.value = res.data.result;
|
|
personalForm.value.education.map((e: any) => {
|
|
rows.value.push({
|
|
university: e.name,
|
|
degree: e.degree,
|
|
major: e.field,
|
|
graduation: e.finishDate,
|
|
});
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
console.log("e", e);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
};
|
|
const formBmaofficer = (val: string) => {
|
|
switch (val) {
|
|
case "officer":
|
|
return "ขรก.กทม. สามัญ";
|
|
break;
|
|
case "employee_perm":
|
|
return "ลูกจ้างประจำ";
|
|
break;
|
|
case "employee_temp":
|
|
return "ลูกจ้างชั่วคราว";
|
|
break;
|
|
default:
|
|
"";
|
|
}
|
|
};
|
|
const close = async () => {
|
|
props.close();
|
|
selection.value = [];
|
|
rows.value = [];
|
|
};
|
|
const putpersonalForm = async () => {
|
|
await http
|
|
.put(
|
|
config.API.putProperty("0a846508-4932-40de-9a9e-5b519492217c"),
|
|
personalForm.value.isProperty
|
|
)
|
|
.then((res) => {
|
|
success($q, res.data.message);
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
})
|
|
.finally(() => {
|
|
props.close();
|
|
props.validate();
|
|
});
|
|
};
|
|
</script>
|
|
<template>
|
|
<q-dialog v-model="props.Modal">
|
|
<q-card style="max-width: 100%; width: 80%">
|
|
<q-form ref="myForm">
|
|
<div class="row">
|
|
<DialogHeader
|
|
:title="`รายละเอียดของ ${personalForm.fullName}`"
|
|
@click="close"
|
|
/>
|
|
</div>
|
|
<q-separator />
|
|
|
|
<div class="contanier-box-main">
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">
|
|
ข้อมูลทั่วไป
|
|
<span class="check-officer"
|
|
><q-icon
|
|
name="mdi-check"
|
|
v-if="personalForm.bmaofficer !== null && ''"
|
|
/>{{ formBmaofficer(personalForm.bmaofficer) }}</span
|
|
>
|
|
</div>
|
|
<div class="row q-pa-xs">
|
|
<div class="col-3 header-sub-text">
|
|
<div class="q-pb-md">เลขที่ประจำตัวประชาชน</div>
|
|
<div>วัน/เดือน/ปีเกิด</div>
|
|
</div>
|
|
<div class="col-4 sub-text">
|
|
<div class="q-pb-md">
|
|
{{ personalForm.idCard }}
|
|
</div>
|
|
<div>
|
|
{{ date2Thai(personalForm.dateOfBirth) }}
|
|
</div>
|
|
</div>
|
|
<div class="col-2 header-sub-text">
|
|
<div class="q-pb-md">ชื่อ-นามสกุล</div>
|
|
<div>เพศ</div>
|
|
</div>
|
|
<div class="col-3 sub-text">
|
|
<div class="q-pb-md">
|
|
{{ personalForm.fullName }}
|
|
</div>
|
|
<div>
|
|
{{ personalForm.gender }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">ภูมิลำเนา</div>
|
|
<div class="row q-pa-xs">
|
|
<div class="col-3 header-sub-text">ที่อยู่</div>
|
|
<div class="col-9 sub-text">
|
|
{{ personalForm.address }}
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
|
<q-table
|
|
ref="table"
|
|
:rows="rows"
|
|
:columns="columns"
|
|
flat
|
|
bordered
|
|
class="custom-header-table"
|
|
virtual-scroll
|
|
:virtual-scroll-sticky-size-start="48"
|
|
dense
|
|
hide-bottom
|
|
>
|
|
</q-table>
|
|
</q-card>
|
|
</div>
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="row items-center q-pa-xs header-text">การสอบ</div>
|
|
<div class="row q-pa-xs">
|
|
<div class="col-6">
|
|
<q-card class="card-exam q-pa-sm">
|
|
<div class="row">
|
|
<div class="col-4 q-pa-xs header-sub-text-exam">
|
|
<div>ประเภท</div>
|
|
<div>ภาค ก</div>
|
|
<div>ภาค ข</div>
|
|
<div>ภาค ค</div>
|
|
<div>รวมทั้งหมด</div>
|
|
</div>
|
|
<div class="col-4 q-pa-xs">
|
|
<div class="header-sub-text-exam-2">คะแนนที่ได้</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotalA }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotalB }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotalC }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointTotal }}
|
|
</div>
|
|
</div>
|
|
<div class="col-4 q-pa-xs header-sub-text-exam-2">
|
|
<div class="header-sub-text-exam-2">ผลการสอบ</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointA }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointB }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.pointC }}
|
|
</div>
|
|
<div class="sub-text-exam">
|
|
{{ personalForm.point }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
<div class="col-5 q-pt-sm q-pl-lg">
|
|
<div class="row">
|
|
<div class="col-7 header-sub-text">
|
|
<div class="q-pb-sm">ผลการสอบ</div>
|
|
<div class="q-pb-sm">ลำดับที่สอบได้</div>
|
|
<div class="q-pb-sm">จำนวนครั้งที่สมัครสอบ</div>
|
|
</div>
|
|
<div class="col-5 sub-text-exam">
|
|
<div class="q-pb-sm">
|
|
{{ personalForm.pass }}
|
|
</div>
|
|
<div class="q-pb-sm">{{ personalForm.examNumber }}</div>
|
|
<div class="q-pb-sm">{{ personalForm.examRound }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
|
|
<div class="contanier-box-mini">
|
|
<q-card bordered class="card-panding">
|
|
<div class="col-12 row items-center q-pa-sm header-text">
|
|
การคัดกรองคุณสมบัติ
|
|
</div>
|
|
<div
|
|
v-for="(item, index) of personalForm.isProperty"
|
|
:key="index"
|
|
class="q-pa-sm"
|
|
>
|
|
<q-checkbox
|
|
size="xs"
|
|
v-model="item.value"
|
|
:val="item.value"
|
|
:label="item.name"
|
|
keep-color
|
|
color="teal"
|
|
:rules="[isRequired]"
|
|
class="checkbox-group"
|
|
/>
|
|
<q-separator />
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
<q-separator />
|
|
<div>
|
|
<DialogFooter
|
|
@click="ClickSave"
|
|
:model="props.Modal"
|
|
:editvisible="save"
|
|
:validate="validateData"
|
|
/>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.icon-officer {
|
|
color: #00aa86;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.check-officer {
|
|
font-size: 17px;
|
|
font-weight: 500;
|
|
line-height: 26px;
|
|
color: #00aa86;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.contanier-box-main {
|
|
padding: 10px 21px 10px 21px;
|
|
}
|
|
|
|
.contanier-box-mini {
|
|
padding: 10px 0px 10px 0px;
|
|
}
|
|
|
|
.card-panding {
|
|
padding: 15px 21px 15px 21px;
|
|
}
|
|
|
|
.header-text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #4f4f4f;
|
|
}
|
|
|
|
.header-sub-text {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 150%;
|
|
color: #818181;
|
|
}
|
|
.sub-text {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
letter-spacing: 0.0025em;
|
|
color: #35373c;
|
|
}
|
|
|
|
.card-exam {
|
|
border-radius: 5px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.header-sub-text-exam {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
line-height: 150%;
|
|
color: #818181;
|
|
}
|
|
|
|
.header-sub-text-exam-2 {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
line-height: 150%;
|
|
color: #00aa86;
|
|
}
|
|
|
|
.sub-text-exam {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
}
|
|
|
|
.checkbox-group {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #35373c;
|
|
}
|
|
</style>
|