- rename folder personal list
- add filter status contain ของหน่วยงาน
This commit is contained in:
parent
37b3fa9f0c
commit
0a74df75bc
11 changed files with 234 additions and 410 deletions
|
|
@ -1,451 +0,0 @@
|
|||
<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";
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue