hrms-mgt/src/modules/05_placement/components/pass/TableDetail.vue

<script setup lang="ts">

import { ref } from "vue";
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";

const save = ref<boolean>(true);
const props = defineProps({
    Modal: Boolean,
    close: {
        type: Function,
        default: () => console.log("not function"),
    },
    getdetail: {
        type: Object,
        required: true
    }
});

interface CheckboxItem {
    id: number;
    label: string;
}

const selection = ref([]);
const checkboxItems: CheckboxItem[] = [
    { 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 () => {
    console.log(selection.value)
};

</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="`รายละเอียดของ ${props.getdetail.fullName}`" :close="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" />
                                    ข้าราชการฯ กทม</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">
                                        {{ props.getdetail.profileID }}
                                    </div>
                                    <div class="q-pb-md">
                                        {{ props.getdetail.dateOfBirth }}
                                    </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">
                                        {{ props.getdetail.fullName }}
                                    </div>
                                    <div class="q-pb-md">
                                        {{ props.getdetail.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">
                                    {{ props.getdetail.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">
                                        {{ props.getdetail.university }}
                                    </div>
                                    <div class="q-pb-md">
                                        {{ props.getdetail.major }}
                                    </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">
                                        {{ props.getdetail.degree ? props.getdetail.degree : '-' }}
                                    </div>
                                    <div class="q-pb-md">
                                        {{ props.getdetail.remark ? props.getdetail.remark : '-' }}
                                    </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-4 q-pa-xs">
                                                <div class="header-sub-text-exam-2"> คะแนนที่ได้</div>
                                                <div class="sub-text-exam"> {{
                                                    props.getdetail.scoreResult.scoreAFull }}</div>
                                                <div class="sub-text-exam"> {{
                                                    props.getdetail.scoreResult.scoreBFull }}</div>
                                                <div class="sub-text-exam"> {{
                                                    props.getdetail.scoreResult.scoreCFull }}</div>
                                                <div class="sub-text-exam"> {{
                                                    (props.getdetail.scoreResult.scoreSumFull) }}
                                                </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">{{ props.getdetail.scoreResult.scoreA
                                                }}</div>
                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreB
                                                }}</div>
                                                <div class="sub-text-exam">{{ props.getdetail.scoreResult.scoreC
                                                }}</div>
                                                <div class="sub-text-exam">{{
                                                    (props.getdetail.scoreResult.scoreSum) }}</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">{{ props.getdetail.scoreResult.examResult }}
                                            </div>
                                            <div class="q-pb-sm">{{ props.getdetail.number }}</div>
                                            <div class="q-pb-sm">{{ props.getdetail.examCount }}</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 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="save" />
                </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>