"Refactoring code module 05_placement 01_Main,02_transferMain,03_receiveMain
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
131f8ff499
commit
24a4dac091
21 changed files with 534 additions and 1368 deletions
|
|
@ -1,328 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QTableProps } from "quasar";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin;
|
||||
|
||||
const rows = ref<any[]>([]);
|
||||
const myForm = ref<any>([]);
|
||||
const selection = ref<any>([]);
|
||||
const personalForm = ref<any>([]);
|
||||
|
||||
/** รับค่ามาจากหน้าหลัก */
|
||||
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 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" }),
|
||||
},
|
||||
]);
|
||||
|
||||
/** get ข้อมูลการศึกษา */
|
||||
async function fetchData() {
|
||||
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: date2Thai(e.finishDate),
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* convert text
|
||||
* @param val type
|
||||
*/
|
||||
function formBmaofficer(val: string) {
|
||||
switch (val) {
|
||||
case "OFFICER":
|
||||
return "ขรก.กทม. สามัญ";
|
||||
case "EMPLOYEE_PERM":
|
||||
return "ลูกจ้างประจำ";
|
||||
case "EMPLOYEE_TEMP":
|
||||
return "ลูกจ้างชั่วคราว";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
/** ปิด POPUP ข้อมูล */
|
||||
async function close() {
|
||||
props.close();
|
||||
selection.value = [];
|
||||
rows.value = [];
|
||||
}
|
||||
|
||||
/** เมื่อ props.Modal จะเรียกข้อมูลการศึกษา */
|
||||
watch(props, () => {
|
||||
if (props.Modal === true) {
|
||||
fetchData();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="props.Modal" persistent>
|
||||
<q-card style="max-width: 100%; width: 80%">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
:tittle="`รายละเอียดของ ${personalForm.fullName}`"
|
||||
:close="close"
|
||||
/>
|
||||
|
||||
<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
|
||||
v-if="personalForm.bmaOfficer != null"
|
||||
class="check-officer"
|
||||
>
|
||||
<q-icon name="mdi-check" />
|
||||
{{ 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-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>
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue