hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

dialog detail => Done

Browse source
This commit is contained in:
watcharanondh 2023-06-13 01:15:17 +07:00
parent d6010bf0f1
commit 8704c1ff39
3 changed files with 434 additions and 375 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/modules/05_placement/components/pass/DialogFooter.vue
View file

@ -1,21 +1,4 @@
<template>
<q-card-actions class="text-primary">
<q-space />
<q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
@click="edit" icon="mdi-pencil-outline">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<div v-else>
<q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
icon="mdi-content-save-outline">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
</q-card-actions>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
const props = defineProps({
editvisible: Boolean,
@ -59,3 +42,18 @@ const checkSave = () => {
};
</script>
<template>
<q-card-actions class="text-primary">
<q-space />
<q-btn v-if="!editvisible" flat round :disabled="editvisible" :color="editvisible ? 'grey-7' : 'primary'"
@click="edit" icon="mdi-pencil-outline">
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<div v-else>
<q-btn flat round :disabled="!editvisible" :color="!editvisible ? 'grey-7' : 'public'" @click="checkSave"
icon="mdi-content-save-outline">
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</div>
</q-card-actions>
</template>

35
src/modules/05_placement/components/pass/DialogHeader.vue
View file

@ -1,19 +1,4 @@
<template>
<q-toolbar>
<q-toolbar-title class="text-subtitle2 text-bold">{{ title }}</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
</template>
<script setup lang="ts">
import { ref, useAttrs } from "vue";
const props = defineProps({
title: String,
close: {
@ -24,5 +9,23 @@ const props = defineProps({
const close = async () => {
props.close();
};
</script>
<template>
<q-toolbar class="header-main">
<q-toolbar-title class="header-text">{{ title }}</q-toolbar-title>
<q-btn icon="close" unelevated round dense @click="close" style="color: #ff8080; background-color: #ffdede" />
</q-toolbar>
</template>
<style scoped lang="scss">
.header-main {
padding: 16px 0px 16px 27px;
}
.header-text {
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: #35373C;
}
</style>

742
src/modules/05_placement/components/pass/Table.vue
View file

@ -12,7 +12,7 @@ import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
const editvisible = ref<boolean>(false);
const myForm = ref<QForm | null>(null);
const edit = ref<boolean>(false);
const edit = ref<boolean>(true);
const visibleColumns = ref<String[]>([]);
const store = usePlacementDataStore();
const filter = ref<string>("");
@ -365,23 +365,23 @@ const save = () => {
// modal detail
interface CheckboxItem {
value: number;
id: number;
label: string;
}
const selection = ref([]);
const checkboxItems: CheckboxItem[] = [
{ value: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
{ value: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
{ value: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ value: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
{ value: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
{ value: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
{ value: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
{ value: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
{ value: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ value: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ value: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
{ id: 1, label: 'ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง' },
{ id: 2, label: 'ไม่เป็นคนไร้ความสามารถ คนเสมือนไร้ความสามารถ คนวิกลจริตหรือจิตฟั่นเฟือน ไม่สมประกอบหรือเป็นโรคตามที่กำหนดในกฎ ก.พ.' },
{ id: 3, label: 'ไม่เป็นผู้อยู่ในระหว่างถูกสั่งพักราชการหรือถูกสั่งให้ออกจากราชการไว้ก่อนตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 4, label: 'ไม่เป็นผู้บกพร่องในศีลธรรมอันดีจนเป็นที่รังเกียจของสังคม' },
{ id: 5, label: 'ไม่เป็นกรรมการหรือผู้ดำรงตำแหน่งที่รับผิดชอบในการบริหารพรรคการเมือง หรือเจ้าหน้าที่ในพรรคการเมือง' },
{ id: 6, label: 'ไม่เป็นบุคคลล้มละลาย' },
{ id: 7, label: 'ไม่เป็นผู้เคยต้องรับโทษจำคุกโดยคำพิพากษาถึงที่สุดให้จำคุกเพราะกระทำความผิดทางอาญา เว้นแต่เป็นโทษสำหรับความผิดที่ใด้กระทำโดยประมาทหรือความผิดลหุโทษ' },
{ id: 8, label: 'ไม่เป็นผู้เคยถูกลงโทษให้ออก ปลดออก หรือไล่ออกจากรัฐวิสาหกิจ หรือ หน่วยงานอื่นของรัฐ' },
{ id: 9, label: 'เป็นผู้เคยถูลงโทษให้ออก หรือปลดออก เพราะกระทำผิตวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 10, label: 'เป็นผู้เคยถูกลงโทษไล่ออก เพราะกระทำผิดวินัยตามพระราชบัญญัตินี้ หรือตามกฎหมายอื่น' },
{ id: 11, label: 'เป็นผู้เคยกระทำการทุจริตในการสอบเข้ารับราชการ หรือเข้าปฏิบัติงานใน หน่วยงานของรัฐ' },
];
const clickSave = async () => {
@ -389,345 +389,326 @@ const clickSave = async () => {
};
</script>
<template>
<q-form ref="myForm">
<Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
:boss="true" :saveNoDraft="true" :add="save">
<template #columns="props">
<q-tr :props="props">
<q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
<q-form ref="myForm">
<Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns" v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns" v-model:editvisible="editvisible" :cancel="clickCancel" :history="true"
:boss="true" :saveNoDraft="true" :add="save">
<template #columns="props">
<q-tr :props="props">
<q-icon class="q-mr-sm" size="15px" color="primary" name="mdi-bookmark" v-if="props.row.isDirector"></q-icon>
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
class="cursor-pointer">
<div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
<div>
<q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
<q-icon v-else name="mdi-check" color="positive" class="text-h5" />
</div>
</div>
<div v-else-if="col.name == 'Name'" class="table_ellipsis">
{{ col.value }}
<p>{{ props.row.Id }}</p>
</div>
<div v-else-if="col.name == 'Unit'" class="table_ellipsis">
<q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props.row)"
class="cursor-pointer">
<div v-if="col.name == 'BMAOfficer'" class="table_ellipsis">
<div>
<q-icon v-if="col.value == false" name="mdi-close" color="grey-5" class="text-h5" />
<q-icon v-else name="mdi-check" color="positive" class="text-h5" />
</div>
</div>
<div v-else-if="col.name == 'Name'" class="table_ellipsis">
{{ col.value }}
<p>{{ props.row.Id }}</p>
</div>
<div v-else-if="col.name == 'Unit'" class="table_ellipsis">
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
<div @click="openAppointModal">
<q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
<template v-slot:prepend>
<q-icon name="bookmark" color="primary" />
</template>
</q-input>
</div>
</div>
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
<div v-else>
{{ props.row.UnitGroup }}
<p>{{ col.value }}</p>
</div>
</div>
<div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
<datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
v-model="props.row.ReportingDate">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
<div v-else>
{{ mixin.date2Thai(col.value) }}
</div>
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
<div></div>
</div>
<div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
<q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
@click="editDetail(props.row, 'wait')" />
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')" />
</div>
<div v-else align="right">
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')" />
</div>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
<div @click="openAppointModal">
<q-input hide-bottom-space outlined dense lazy-rules v-model="props.row.Unit">
<template v-slot:prepend>
<q-icon name="bookmark" color="primary" />
</template>
</q-input>
</div>
</div>
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
<div v-else>
{{ props.row.UnitGroup }}
<p>{{ col.value }}</p>
</div>
</div>
<div v-else-if="col.name == 'ReportingDate' && col.value != '-'" class="table_ellipsis">
<div v-if="editvisible && props.row.Status == 'ยังไม่บรรจุ'">
<datepicker :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
v-model="props.row.ReportingDate">
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space outlined dense lazy-rules :model-value="mixin.date2Thai(col.value)">
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div v-else-if="props.row.Status == 'ยังไม่บรรจุ' || props.row.Status == 'สละสิทธิ์'">-</div>
<div v-else>
{{ mixin.date2Thai(col.value) }}
</div>
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<div v-if="props.row.Status === 'บรรจุเเล้ว' || props.row.Status === 'สละสิทธิ์'">
<div></div>
</div>
<div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
<q-btn color="blue" flat dense round size="14px" icon="mdi-account-alert"
@click="editDetail(props.row, 'wait')" />
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')" />
</div>
<div v-else align="right">
<q-btn color="red" flat dense round size="14px" icon="mdi-account-remove"
@click="editDetail(props.row, 'cancel')" />
</div>
</q-td>
</q-tr>
</template>
</Table>
</q-form>
<q-dialog v-model="appointModal" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
<q-separator />
<q-card-section>
<q-dialog v-model="appointModal" persistent>
<q-card style="width: 800px">
<q-form ref="myForm">
<DialogHeader title="เลือกหน่วยงานที่รับบรรจุ" :close="clickClose" />
<q-separator />
<q-card-section>
<div class="row q-col-gutter-xs">
<div class="col">
<q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
<div class="row q-col-gutter-xs">
<div class="col">
<q-select outlined dense v-model="appoint.Code" label="รหัสส่วนราชการ" />
</div>
<div class="col">
<q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
</div>
</div>
<div class="row q-col-gutter-xs q-pt-xs">
<div class="col">
<q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
</div>
<div class="col">
<q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
</div>
</div>
<div class="row q-col-gutter-xs q-pt-xs">
<div class="col">
<q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
</div>
<div class="col">
<q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
</div>
</div>
<div class="row q-col-gutter-xs q-pt-xs">
<div class="col">
<q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
</div>
<div class="col">
<q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
</div>
</div>
<div class="row q-col-gutter-xs q-pt-xs">
<div class="col-6">
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="modal">
<q-card style="max-width: 100%;width:80%;">
<q-form ref="myForm">
<div class="row">
<DialogHeader :title="`รายละเอียดของ ${Name}`" :close="clickClose" />
</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" />
ข้าราชการฯ กทม</span>
</div>
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">
<div class="q-pb-md">
เลขที่ประจำตัวประชาชน
</div>
<div class="q-pb-md">
วัน/เดือน/ปีเกิด
</div>
</div>
<div class="col-4 sub-text">
<div class="q-pb-md">
{{ information.cardId }}
</div>
<div class="q-pb-md">
{{ information.birthday }}
</div>
</div>
<div class="col-2 header-sub-text">
<div class="q-pb-md">
ชื่อ-นามสกุล
</div>
<div class="q-pb-md">
เพศ
</div>
</div>
<div class="col-3 sub-text">
<div class="q-pb-md">
{{ information.fullname }}
</div>
<div class="q-pb-md">
{{ information.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 header-sub-text">
{{ information.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>
<div class="row q-pa-xs">
<div class="col-3 header-sub-text">
<div class="q-pb-md">
สถานศึกษา
</div>
<div class="q-pb-md">
สาขาวิชาเอก
</div>
</div>
<div class="col-4 sub-text">
<div class="q-pb-md">
{{ information.school }}
</div>
<div class="q-pb-md">
{{ information.department }}
</div>
</div>
<div class="col-2 header-sub-text">
<div class="q-pb-md">
วุฒิการศึกษา
</div>
<div class="q-pb-md">
อื่นๆ
</div>
</div>
<div class="col-3 sub-text">
<div class="q-pb-md">
{{ information.deegree ? information.deegree : '-' }}
</div>
<div class="q-pb-md">
{{ information.other }}
</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-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">
<q-select outlined dense v-model="appoint.UnitName" label="ชื่อหน่วยงาน" />
<div class="col-4 q-pa-xs">
<div class="header-sub-text-exam-2"> คะแนนที่ได้</div>
<div class="sub-text-exam"> {{ information.A1 }}</div>
<div class="sub-text-exam"> {{ information.B1 }}</div>
<div class="sub-text-exam"> {{ information.C1 }}</div>
<div class="sub-text-exam"> {{ (information.A1 + information.B1 + information.C1) }}</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">{{ information.A2 }}</div>
<div class="sub-text-exam">{{ information.B2 }}</div>
<div class="sub-text-exam">{{ information.C2 }}</div>
<div class="sub-text-exam"> {{ (information.A2 + information.B2 + information.C2) }}</div>
</div>
</div>
<div class="row q-col-gutter-xs q-pt-xs">
<div class="col">
<q-select outlined dense v-model="appoint.PositionNo" label="ตำแหน่งเลขที่" />
</div>
<div class="col">
<q-select outlined dense v-model="appoint.PositionType" label="ประเภทตำแหน่ง" />
</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="row q-col-gutter-xs q-pt-xs">
<div class="col">
<q-select outlined dense v-model="appoint.PositionManage" label="ตำแหน่งทางการบริหาร" />
</div>
<div class="col">
<q-select outlined dense v-model="appoint.PositionTypeManage" label="ด้านทางบริหาร" />
</div>
<div class="col-5 sub-text-exam">
<div class="q-pb-sm">{{ information.status }}</div>
<div class="q-pb-sm">{{ information.range }}</div>
<div class="q-pb-sm">{{ information.total }}</div>
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="row q-col-gutter-xs q-pt-xs">
<div class="col">
<q-select outlined dense v-model="appoint.PositionLine" label="ตำแหน่งในสายงาน" />
</div>
<div class="col">
<q-select outlined dense v-model="appoint.Major" label="ด้าน/สาขา" />
</div>
</div>
<div class="row q-col-gutter-xs q-pt-xs">
<div class="col-6">
<q-select outlined dense v-model="appoint.PositionLevel" label="ระดับตำแหน่ง" />
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter v-model:editvisible="edit" v-model:modalEdit="modalEdit" :save="saveAppoint" />
</q-form>
</q-card>
</q-dialog>
<q-dialog v-model="modal" full-height full-width>
<q-card>
<q-form ref="myForm">
<!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
<DialogHeader
:title="`รายละเอียดของ ${Name}`"
:close="clickClose"
/>
<q-separator />
<q-card-section class="q-pa-sm">
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
ข้อมูลทั่วไป
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
เลขที่ประจำตัวประชาชน
</div>
<div class="col-3 q-pa-xs" style="font-size: 18px;">
{{ information.cardId }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
ชื่อ-นามสกุล
</div>
<div class="col-3 q-pa-xs" style="font-size: 18px;">
{{ information.fullname }}
</div>
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
วัน/เดือน/ปีเกิด
</div>
<div class="col-3 q-pa-xs" style="font-size: 18px;">
{{ information.birthday }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
เพศ
</div>
<div class="col-3 q-pa-xs" style="font-size: 18px;">
{{ information.gender }}
</div>
</div>
</div>
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
ภูมิลำนำ
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
ที่อยู่
</div>
<div class="col q-pa-xs" style="color: gray; font-size: 18px;">
{{ information.address }}
</div>
</div>
</div>
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
การศึกษา
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
สถานศึกษา
</div>
<div class="col-3 q-pa-xs" style="font-size: 18px;">
{{ information.school }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
วุฒิการศึกษา
</div>
<div class="col-3 q-pa-xs">
{{ information.deegree }}
</div>
</div>
<div class="row">
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
สาขาวิชาเอก
</div>
<div class="col-3 q-pa-xs" style="font-size: 18px;">
{{ information.department }}
</div>
<div class="col-3 q-pa-xs" style="color: gray; font-size: 18px;">
อื่นๆ
</div>
<div class="col-3 q-pa-xs" style="font-size: 18px;">
{{ information.other }}
</div>
</div>
</div>
<!-- Bright -->
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
<div class="col-12 row items-center q-pa-xs" style="font-weight: bold; font-size: 18px;">
การสอบ
</div>
<div class="row">
<!-- text-align: center; -->
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
ประเภท
</div>
<div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
คะแนนเต็ม
</div>
<div class="col-2 q-pa-xs" style="color: #259E75; font-size: 18px;">
คะแนนที่ได้
</div>
<div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
ผลการสอบ
</div>
<div class="col-2 q-pa-xs">
{{ information.status }}
</div>
</div>
<div class="row">
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
ภาค ก
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold; ">
{{ information.A1 }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ information.A2 }}
</div>
<div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
ลำดับที่สอบได้
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ information.range }}
</div>
</div>
<div class="row">
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
ภาค ข
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ information.B1 }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ information.B2 }}
</div>
<div class="col-2 q-pa-xs" style="color: gray; font-size: 19px;">
จำนวนครั้งที่สมัครสอบ
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ information.total }}
</div>
</div>
<div class="row">
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
ภาค ค
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ information.C1 }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ information.C2 }}
</div>
</div>
<div class="row">
<div class="col-2 q-pa-xs" style="color: gray; font-size: 18px;">
รวมทั้งหมด
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ (information.A1 + information.B1 + information.C1) }}
</div>
<div class="col-2 q-pa-xs" style="font-weight: bold;">
{{ (information.A2 + information.B2 + information.C2) }}
</div>
</div>
</div>
<!-- Bright -->
<div class="q-card q-card--bordered q-card--flat q-pa-sm">
<div class="col-12 row items-center q-pa-sm" style="font-weight: bold; font-size: 18px;">
การคัดกรองคุณสมบัติ
</div>
<div >
<q-list >
<q-item>
<q-option-group v-model="selection" :options="checkboxItems" keep-color color="green" type="checkbox" style="font-size: 18px;"/>
</q-item>
<q-separator spaced inset />
</q-list>
</div>
</div>
</q-card-section>
<DialogFooter
:save="clickSave"
v-model:editvisible="edit"
v-model:modalEdit="modalEdit"
/>
<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 of checkboxItems" :key="item.id" class="q-pa-sm">
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
class="checkbox-group" />
<q-separator />
</div>
</q-card>
</div>
</div>
<q-separator />
<div>
<DialogFooter :save="clickSave" v-model:editvisible="edit" v-model:modalEdit="modalEdit" />
</div>
</q-form>
</q-card>
</q-dialog>
@ -765,4 +746,81 @@ const clickSave = async () => {
margin-bottom: 0;
color: #818181;
}
.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>